/* Dates on a computer (datepick.js): the box is a plain text box with a calendar mark, and InSync's own calendar opens
   under it. Phones keep the browser's date wheels and never get these. Shared by the app and the link pages (a supplier's
   price request), so each colour falls back to the app's light one where a page has no theme of its own. */
input.dp-field { padding-right: 34px; cursor: pointer; font-variant-numeric: tabular-nums; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238e8e93' stroke-width='1.5'%3E%3Crect x='2' y='3' width='12' height='11' rx='2.5'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
input.dp-field:focus { cursor: text; }
.dp-pop { position: fixed; inset: auto; margin: 0; width: 348px; max-width: calc(100vw - 16px); padding: 10px 10px 12px; border: 0; border-radius: 14px; background: var(--surface, #fff); color: var(--ink, #15181c); box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 0 0 0.5px var(--isep, rgba(60,60,67,.18)); font-family: var(--f-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-variant-numeric: tabular-nums; overflow: visible; }
.dp-pop button { border: 0; background: none; color: inherit; font: inherit; padding: 0; min-height: 0; cursor: pointer; }
.dp-pop button:disabled { cursor: default; opacity: .3; }
.dp-top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px 6px; }
.dp-pop .dp-ttl { font-family: var(--f-display, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; padding: 4px 6px; margin-left: -6px; border-radius: 8px; }
.dp-pop .dp-ttl span { color: var(--tint, #007aff); }
.dp-pop .dp-ttl:hover { background: var(--ifill, rgba(118,118,128,.12)); }
.dp-navs { display: flex; gap: 2px; }
.dp-pop .dp-nav { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--tint, #007aff); }
.dp-pop .dp-nav:hover { background: var(--ifill, rgba(118,118,128,.12)); }
.dp-nav svg { width: 9px; height: 15px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-wk { font-size: 11px; font-weight: 600; color: var(--muted, #6c6c70); text-align: center; text-transform: uppercase; padding: 4px 0; letter-spacing: .02em; }
.dp-pop .dp-d { height: 38px; display: grid; place-items: center; font-size: 17px; }
.dp-d i { font-style: normal; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.dp-pop .dp-d:not(:disabled):hover i { background: var(--ifill, rgba(118,118,128,.12)); }
.dp-pop .dp-we { color: var(--muted, #6c6c70); }
.dp-pop .dp-out { opacity: .35; }
.dp-pop .dp-today i { color: var(--tint, #007aff); font-weight: 600; }
.dp-pop .dp-sel i, .dp-pop .dp-d.dp-sel:hover i { background: var(--tint, #007aff); color: #fff; font-weight: 600; }
.dp-months { grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 4px; }
.dp-pop .dp-m { height: 44px; border-radius: 10px; font-size: 16px; }
.dp-pop .dp-m:hover { background: var(--ifill, rgba(118,118,128,.12)); }
.dp-pop .dp-m.dp-sel { background: var(--tint, #007aff); color: #fff; font-weight: 600; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 4px; border-top: 0.5px solid var(--isep, rgba(60,60,67,.18)); margin-top: 6px; padding-top: 10px; }
.dp-pop .dp-chip { font-size: 13px; font-weight: 600; color: var(--tint, #007aff); background: var(--ifill, rgba(118,118,128,.12)); padding: 5px 8px; border-radius: 999px; }
.dp-pop .dp-chip:not(:disabled):hover { background: var(--isep, rgba(60,60,67,.18)); }
.dp-pop .dp-clear { color: var(--muted, #6c6c70); margin-left: auto; }