/* ====================================================== DateTimePicker — styled replacement for the browser's native date/time popups. Every / gets a trigger row (icon + label + big value) that opens a month grid or a scrollable list of half-hour slots. The native input stays in the DOM as the source of truth; see datetime-picker.js. Tokens only, so the look tracks the rest of the app. ====================================================== */ /* ---------- Field wrapper + trigger ---------- */ /* The native input is kept LAID OUT (1px, transparent) rather than display:none — UI._formValid() skips fields whose offsetParent is null, so a hidden required date would silently pass validation. */ .dtp-field { position: relative; } .dtp-field > input[data-dtp-done] { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; margin: 0; opacity: 0; pointer-events: none; } /* Default: sits in a normal .field under its own .label, so it matches the height and radius of the .input it replaced. */ .dtp-trigger { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 8px 12px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease); } .dtp-trigger:hover { background: var(--surface); } .dtp-trigger.is-open, .dtp-trigger:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12); } .dtp-trigger .dtp-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ink-3); } .dtp-trigger.is-open .dtp-icon { color: var(--ink-2); } .dtp-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .dtp-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); line-height: 1.2; } /* Captioned variant: label rides inside the row, so it needs the taller box. */ .dtp-trigger.has-label { min-height: 56px; border-radius: var(--radius); } .dtp-value { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dtp-trigger.has-label .dtp-value { font-size: 15px; font-weight: 600; } .dtp-value.is-empty { color: var(--ink-3); font-weight: 400; } /* UI._flagMissing() marks the hidden native input; show the ring on the row. */ .dtp-field > input.field-missing { outline: none; } .dtp-field > input.field-missing + .dtp-trigger { outline: 2px solid #e54d4d; outline-offset: 2px; } /* A stack of trigger rows reading as one card, like a grouped list. */ .dtp-card { display: flex; flex-direction: column; gap: 8px; } .dtp-card .field { margin: 0; } /* ---------- Popover ---------- */ /* Portalled to with position:fixed — .modal is the scroll container (overflow-y:auto) and would clip an absolutely positioned child. z-index sits above the modal layer (100) and the peek layer (1200), below the toast layers (99999+). */ .dtp-pop { position: fixed; z-index: 1300; width: 300px; max-width: calc(100vw - 24px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: var(--space-4); animation: dtp-pop-in 0.16s var(--ease); } @keyframes dtp-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Calendar ---------- */ .dtp-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--space-3); } .dtp-title { font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; flex: 1; } .dtp-nav { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-2); cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .dtp-nav:hover { background: var(--surface-2); color: var(--ink); } .dtp-nav:disabled { opacity: 0.35; cursor: default; } .dtp-nav:disabled:hover { background: var(--bg); color: var(--ink-2); } .dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dtp-dow { display: grid; place-items: center; height: 28px; font-size: 11px; font-weight: 600; color: var(--ink-3); } .dtp-day { display: grid; place-items: center; height: 36px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .dtp-day:hover { background: var(--surface-2); } .dtp-day.is-today { box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; } .dtp-day.is-selected, .dtp-day.is-selected:hover { background: var(--ink); color: var(--bg); font-weight: 600; } .dtp-day:disabled { color: var(--ink-3); opacity: 0.45; cursor: default; background: transparent; box-shadow: none; } .dtp-day.is-blank { visibility: hidden; } .dtp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-2); } /* ---------- Time list ---------- */ .dtp-pop.dtp-pop-time { width: 200px; padding: var(--space-2); } .dtp-times { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; } .dtp-time { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer; transition: background 0.15s var(--ease); } .dtp-time .dtp-mer { color: var(--ink-3); font-size: 12px; font-weight: 600; } .dtp-time:hover { background: var(--surface-2); } .dtp-time.is-selected { background: var(--surface-2); font-weight: 600; } .dtp-time.is-selected .dtp-mer { color: var(--ink-2); } /* Out of range (an End field bounded by its Start) — matches .dtp-day:disabled. Last, so a stored value that's now out of range reads as blocked, not chosen. */ .dtp-time:disabled, .dtp-time:disabled:hover { color: var(--ink-3); opacity: 0.45; cursor: default; background: transparent; font-weight: 400; } .dtp-time:disabled .dtp-mer { color: var(--ink-3); } /* ---------- Touch / phone ---------- SMs open these on a job site, so day cells and slots get real 44px targets and the popover becomes a bottom sheet. */ @media (hover: none) { .dtp-day { height: 44px; } .dtp-time { padding: 12px; } .dtp-nav { width: 40px; height: 40px; } } @media (max-width: 600px) { .dtp-pop, .dtp-pop.dtp-pop-time { inset: auto 0 0 0 !important; width: auto; max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; padding: var(--space-5); padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); animation: dtp-sheet-in 0.2s var(--ease); } .dtp-times { max-height: 44vh; } } @keyframes dtp-sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }