/* Custom date/time picker - vanilla port of the Design System PDateField/PTimeField
   (Predict Knowledge/predict-app/lib.jsx). ONE calendar across the app: AU DD/MM/YYYY,
   Monday-first, identical in every browser - never the native <input type=date> popup.
   pdate.js progressively enhances existing <input type=date/time/datetime-local>. */
/* No :root block here: --field-height / --field-height-sm are design tokens. This file used to
   redefine them (38px) and, loading after the tokens on every page, silently retuned every
   field in the app. The trigger reads the tokens, it does not set them. */

/* trigger mirrors the DS Input box so a date field lines up with text fields;
   it is a div holding a typeable text input plus a calendar icon button */
.pdate-trigger { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--field-height); box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--white); cursor: text; text-align: left; font-family: var(--font-body); font-size: var(--text-md); color: var(--text-strong); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); outline: none; }
.pdate-trigger:hover { border-color: var(--border-strong); }
.pdate-trigger.is-open, .pdate-trigger:focus-within { border-color: var(--sapphire-500); box-shadow: var(--shadow-focus); }
.pdate-trigger.is-invalid { border-color: var(--status-critical); }
.pdate-trigger.is-disabled { background: var(--grey-100); color: var(--text-subtle); cursor: not-allowed; }
.pdate-trigger--sm { height: var(--field-height-sm); font-size: var(--text-sm); padding: 0 10px; gap: 6px; }
.pdate-trigger--range { height: var(--field-height-sm); font-size: var(--text-sm); padding: 0 10px; gap: 6px; }
/* no explicit width: the JS-set size attribute gives the intrinsic width so auto-width
   triggers fit the whole value; flex still grows/shrinks it in full-width forms */
.pdate-trigger__val { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.pdate-trigger__val::placeholder { color: var(--text-subtle); }
/* the trigger box already shows the focus ring (.pdate-trigger:focus-within). Suppress the
   inner input's own focus box-shadow (from the global input:focus rule in app.css) so the
   focused field shows ONE blue border, not a nested pair. */
.pdate-trigger__val:focus, .pdate-trigger__val:focus-visible { box-shadow: none; border-color: transparent; }
.pdate-trigger__val:disabled { cursor: not-allowed; }
.pdate-trigger__ico { flex: none; border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; color: var(--ink-400); display: inline-flex; border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-standard); }
.pdate-trigger__ico:hover { color: var(--text-strong); }
.pdate-trigger__ico:disabled { cursor: not-allowed; }

.pdate-pop { position: fixed; z-index: calc(var(--z-dropdown) + 1); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--elevation-raised); padding: 12px; width: 264px; box-sizing: border-box; font-family: var(--font-body); }
.pdate-scrim { position: fixed; inset: 0; z-index: var(--z-dropdown); }
.pdate-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pdate-nav { flex: none; width: var(--field-height-sm); height: var(--field-height-sm); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); background: var(--surface-card); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted);
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.pdate-nav:hover { border-color: var(--border-strong); color: var(--text-strong); }
.pdate-title { flex: 1; text-align: center; background: transparent; border: none; cursor: pointer; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--text-strong); padding: 6px; border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard); }
.pdate-title:hover { background: var(--grey-50); }
.pdate-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pdate-grid--dow { margin-bottom: 2px; }
.pdate-dow { text-align: center; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); padding: 4px 0; }
.pdate-day { height: var(--field-height-sm); display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-body); font-variant-numeric: tabular-nums; transition: background var(--duration-fast) var(--ease-standard); }
.pdate-day:hover { background: var(--sapphire-50); }
.pdate-day.is-out { color: var(--text-subtle); opacity: 0.5; }
.pdate-day.is-today { box-shadow: inset 0 0 0 1px var(--sapphire-500); color: var(--sapphire-700); font-weight: var(--weight-bold); }
.pdate-day.is-inrange { background: var(--sapphire-50); border-radius: 0; }
.pdate-day.is-sel, .pdate-day.is-sel:hover { background: var(--sapphire-500); color: var(--white); font-weight: var(--weight-bold); box-shadow: none; border-radius: var(--radius-sm); }
.pdate-day:disabled { color: var(--text-subtle); opacity: 0.3; cursor: not-allowed; background: transparent; }
.pdate-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pdate-mo { height: var(--field-height); border: 1px solid transparent; background: var(--grey-50); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-body);
  transition: background var(--duration-fast) var(--ease-standard); }
.pdate-mo:hover { background: var(--sapphire-50); }
.pdate-mo.is-sel { background: var(--sapphire-500); color: var(--white); font-weight: var(--weight-bold); }
.pdate-timerow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pdate-timerow__lbl { flex: none; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-xs); color: var(--text-muted); }
.pdate-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.pdate-linkbtn { border: none; background: transparent; cursor: pointer; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xs); color: var(--sapphire-600); padding: 2px 0;
  transition: color var(--duration-fast) var(--ease-standard); }
.pdate-linkbtn:hover { color: var(--sapphire-700); text-decoration: underline; }
/* range popover: an Apply button always, plus From/To time fields when the pair carries a time */
.pdate-rangetimes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pdate-rangetimes .pdate-timerow { margin-top: 0; }
.pdate-foot__hint { flex: 0 1 auto; min-width: 0; font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdate-spacer { flex: 1; }
.pdate-apply { flex: none; border: none; background: var(--sapphire-500); color: var(--white); border-radius: var(--radius-sm); padding: 6px 16px; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xs); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard); }
.pdate-apply:hover { background: var(--sapphire-600); }
.pdate-apply:disabled { opacity: .5; cursor: not-allowed; }

.ptime { height: var(--field-height); box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--white); font-family: var(--font-body); font-size: var(--text-md); color: var(--text-strong); font-variant-numeric: tabular-nums; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.ptime:hover { border-color: var(--border-strong); }
.ptime:focus { border-color: var(--sapphire-500); box-shadow: var(--shadow-focus); }
.ptime--sm { height: var(--field-height-sm); font-size: var(--text-sm); }
.pdate-timefield { width: 90px; flex: none; }
.pdate-timefield--sec { width: 116px; }
.ptime.is-invalid { border-color: var(--status-critical); }

/* the enhanced native input is kept in the DOM (form value + fallback) but hidden.
   top/left pin it to its containing block: without them the input sits at its static flow
   position, and since overflow ancestors don't clip an absolutely positioned element whose
   containing block is outside them, many enhanced fields silently stretched the document
   into a phantom page scroll (Schedule panel, Areas windows table). */
.pdate-native-hidden { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
/* range boxes are the natives' containing block, so validation bubbles stay at the field */
[data-pdate-range] { position: relative; }