/* ============================================================
   Datetime Picker — base styles + day-cell atom
   ============================================================
   Multi-session build, see HeyVolt master plan dated 2026-04-27.
   This file ships in stages:
     • Session 1 (this): .datetime-day atom + 10 visual states
     • Session 2: .datetime-panel-header, .datetime-grid, month/year drilldown
     • Session 3+: live JS, time wheel, triggers, polish

   All colors come from semantic tokens in css/color-modes.css —
   dark mode "just works" by virtue of the token system.
*/

/* ─── Day cell atom ───────────────────────────────────────
   Two-layer structure mirrors the Figma frame `2843:420706`:
   • outer wrapper (.datetime-day) is 30×30 with 2px padding —
     this is what gets the range-strip background
   • inner pill (.datetime-day-cell) is fully rounded — this
     is the selection / hover / today highlight

   Single-day states paint only the inner pill.
   Range states (start/end/middle) paint the outer wrapper too
   so the strip is continuous between adjacent cells.
*/

.datetime-day {
    /* Outer wrapper — square, full bg for range strip.
       Renders as <div> for headers and other-month cells, <button> for
       interactive current-month cells. The reset block below kills
       the button's user-agent styles (default border, font, color);
       we deliberately leave `outline` alone so the keyboard focus ring
       still shows until Session 7's proper a11y pass styles it. */
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 2px;
    display: inline-flex;
    align-items: stretch;
    justify-content: stretch;
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    /* No transition on outer — it switches state instantly */
}

.datetime-day-cell {
    /* Inner pill — circular highlight */
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 9999px;
    border: 1px solid transparent;          /* reserves border-space for today; prevents layout reflow on state change */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: var(--text-primary);
    background: transparent;
    cursor: pointer;
    user-select: none;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

/* ─── State 1 of 10 — Day name (header row, M/T/W…) ─────── */
.datetime-day--header .datetime-day-cell {
    font-weight: 600;
    cursor: default;
}

/* ─── State 2 of 10 — Default — no override needed ─────── */

/* ─── State 3 of 10 — Hover (frozen via class or real :hover) */
/* The :not() list excludes states whose own background should win over
   the hover overlay — including the Phase 2 .is-range-* aliases. Without
   the .is-range-start / .is-range-end exclusions the native :hover would
   override the inner brand-solid pill on those cells, leaving an "outer
   dark / inner light" ring on the cell currently under the cursor while
   picking the second range endpoint. */
.datetime-day--hover .datetime-day-cell,
.datetime-day:not(.datetime-day--header):not(.datetime-day--disabled):not(.datetime-day--no-avail):not(.datetime-day--selected):not(.datetime-day--start):not(.datetime-day--end):not(.is-disabled):not(.is-no-avail):not(.is-selected):not(.is-range-start):not(.is-range-end):hover .datetime-day-cell {
    background: var(--bg-brand-secondary);
}

/* ─── State 4 of 10 — Selected (single-date selection) ─── */
.datetime-day--selected .datetime-day-cell,
.datetime-day.is-selected .datetime-day-cell {
    background: var(--bg-brand-solid);
    color: var(--text-primary-on-brand);
}

/* ─── State 5 of 10 — Today / Current — 1px brand border ── */
.datetime-day--today .datetime-day-cell,
.datetime-day.is-today .datetime-day-cell {
    border-color: var(--border-brand);
}
/* Today + Selected stack: keep the border-brand visible? No —
   selection wins. Spec says solid blue pill; today indicator
   is only relevant on unselected days. */
.datetime-day--today.datetime-day--selected .datetime-day-cell,
.datetime-day.is-today.is-selected .datetime-day-cell {
    border-color: var(--bg-brand-solid);
}

/* ─── State 6 of 10 — Disabled (text dimmed, no bg) ─────── */
.datetime-day--disabled .datetime-day-cell,
.datetime-day.is-disabled .datetime-day-cell {
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* ─── State 7 of 10 — noAvailability (subtle bg + dim text) */
.datetime-day--no-avail .datetime-day-cell,
.datetime-day.is-no-avail .datetime-day-cell {
    background: var(--bg-disabled-subtle);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* ─── Range states (Phase 2 wires the JS — Session 1 ships
   the visuals so the docs page can show them now) ─────── */

/* ─── State 8 of 10 — RangeSelected (middle of range) ──── */
.datetime-day--range,
.datetime-day.is-range {
    background: var(--bg-brand-secondary);
}

/* ─── State 9 of 10 — StartDate — outer rounded LEFT only — */
.datetime-day--start,
.datetime-day.is-range-start {
    background: var(--bg-brand-solid);
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}
.datetime-day--start .datetime-day-cell,
.datetime-day.is-range-start .datetime-day-cell {
    background: var(--bg-brand-solid);
    color: var(--text-primary-on-brand);
}

/* ─── State 10 of 10 — EndDate — outer rounded RIGHT only ─ */
.datetime-day--end,
.datetime-day.is-range-end {
    background: var(--bg-brand-solid);
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
}
.datetime-day--end .datetime-day-cell,
.datetime-day.is-range-end .datetime-day-cell {
    background: var(--bg-brand-solid);
    color: var(--text-primary-on-brand);
}

/* ─── Month grid container (static demo on docs page) ───── */
.datetime-month-grid {
    display: inline-grid;
    grid-template-columns: repeat(7, 30px);
    grid-auto-rows: 30px;
    gap: 0;
    padding: 0;
    border-radius: 8px;
    background: var(--bg-primary);
}

/* Row wrapper — Session 7 a11y. The W3C grid pattern requires `role="row"`
   children of `role="grid"`, so the JS-rendered grid wraps each week of 7
   day cells in a `.datetime-grid-row` with `role="row"`. `display: contents`
   removes the row's own box from the layout (so cells still flow into the
   parent's CSS Grid columns) while keeping the row in the accessibility tree. */
.datetime-grid-row {
    display: contents;
}

/* ─── Demo helper: row of cells side by side for the
   "Day Cell States" section on the docs page ───────────── */
.datetime-day-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   Calendar panel — Session 2
   ============================================================
   The .datetime-panel is the popover container that holds the
   header (prev/next + clickable month-year) and the day grid.
   In Session 5 it will be wrapped by a trigger; for now it
   renders inline so the docs page can show it as a static demo.
*/

.datetime-panel {
    display: inline-flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 248px;                                /* 7 × 30 day cells + 16px each side padding + a little buffer */
    padding: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.06),
                0 4px 8px -2px rgba(16, 24, 40, 0.10);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="dark"] .datetime-panel {
    /* Figma's dark mode frames render with transparent shadow — the panel sits
       directly on the canvas with only the 1px border for depth. Matched here
       so the visual diff is faithful. */
    box-shadow: none;
}

/* ─── Panel header: prev | month-year | next ───────────── */
.datetime-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding-bottom: 12px;
}

/* Prev / next chevron button */
.datetime-nav {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.datetime-nav:hover {
    background: var(--bg-secondary-hover);
    color: var(--text-primary);
}
.datetime-nav i {
    font-size: 14px;
}

/* Center label cluster — wraps the two clickable buttons */
.datetime-nav-label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Month / year buttons inside the label */
.datetime-nav-month,
.datetime-nav-year {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.875rem;                         /* 14px */
    line-height: 1.25rem;                        /* 20px */
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.datetime-nav-month:hover,
.datetime-nav-year:hover {
    background: var(--bg-secondary-hover);
}

/* Wrapper that anchors the picker dropdown when open.
   Lets the month/year button stay as a clean <button> while
   keeping the menu as its sibling rather than its child
   (buttons cannot contain other interactive elements). */
.datetime-header-trigger {
    position: relative;
    display: inline-flex;
}

/* ─── Header dropdown menu (month picker / year picker) ──
   Visually mirrors the Dropdown component's .dropdown-menu
   but uses dedicated classes so the calendar can evolve
   independently from the Dropdown component. */
.datetime-header-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    min-width: 105px;                            /* matches Figma month-picker width */
    max-height: 320px;
    padding: 8px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    background: var(--bg-primary);
    box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.06),
                0 4px 8px -2px rgba(16, 24, 40, 0.10);
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}
.datetime-header-menu.is-open {
    display: block;
}

[data-theme="dark"] .datetime-header-menu {
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.5),
                0 4px 8px -2px rgba(0, 0, 0, 0.6);
}

/* Year picker is narrower */
.datetime-header-menu--year {
    min-width: 69px;
}

/* Item inside the header menu */
.datetime-header-item {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.datetime-header-item:hover {
    background: var(--bg-secondary-hover);
    color: var(--text-primary);
}
.datetime-header-item.is-selected {
    background: var(--bg-brand-secondary);
    color: var(--text-primary);
    font-weight: 500;
}

/* Year items center-align (Figma) */
.datetime-header-menu--year .datetime-header-item {
    text-align: center;
}

/* ─── Day-name header row inside .datetime-grid ─────────
   Distinct from the demo on the page that shows a single
   day-name cell. This is the in-grid header row. */
.datetime-day--header {
    /* font-weight: 600 already set on .datetime-day-cell — see Session 1 */
}

/* ============================================================
   Time picker — Session 4
   ============================================================
   Vertical scroll-wheel for selecting hours, minutes, and
   optionally seconds. Standalone for now — Session 8 composes
   it as a sibling column to the calendar grid.

   Structure (per column):
     .datetime-time
       .datetime-time-column        ← positioning context
         .datetime-time-band        ← static highlight, doesn't scroll
         .datetime-time-scroll      ← the scroll container
           .datetime-time-row       ← one per value (00–23 or 00–59)
       .datetime-time-separator     ← ":"

   The band sits at the column's vertical center and never moves;
   values scroll behind it. Tabular numerals + scroll-snap keep
   the values aligned. A scrollend handler in JS reads which row
   is centered after the user scrolls and updates the selection.
*/

/* Variant of .datetime-panel that auto-sizes to content (the
   calendar panel is fixed at 248px; the time wheel is narrower
   and the panel should hug it, not pad it out). */
.datetime-panel--auto {
    width: auto;
}

/* Composed datetime panel — calendar + time side-by-side (Session 7.5 E).
   Override the default 248px width so the panel hugs both columns. */
.datetime-panel--datetime {
    width: auto;
}

/* Side-by-side column layout for composed pickers. Each `.datetime-panel-col`
   is a child column (calendar, time, optional preset list). */
.datetime-panel-cols {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.datetime-panel-col {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

/* The calendar column matches the standalone calendar panel's intrinsic width
   so the day grid + header layout is unchanged when composed. */
.datetime-panel-col--calendar {
    width: 216px;                                    /* 248px panel − 32px padding */
}

/* Time column matches the calendar column's height when composed — bumps the
   default 160px (5 visible rows) up to 240px (7.5 visible rows) so the time
   wheel doesn't leave empty space below the calendar. The standalone Time
   Picker page keeps the fixed 160px because there's no calendar to match
   and a taller column would feel oversized on its own. */
.datetime-panel-col--time .datetime-time-column,
.datetime-panel-col--time .datetime-time-separator {
    height: 240px;
}

/* Preset column (Session 7.5 F) — clinical preset times sit as a left column
   in the side-by-side panel. Reuses the menu-list-item visual from Dropdown. */
.datetime-panel-col--presets {
    width: 196px;
    padding-right: 4px;
    border-right: 1px solid var(--border-secondary);
}

.datetime-presets-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    margin: 0;
    /* Range presets render as <ul><li><button>...; clinical presets render
       as <div><button>... directly. list-style:none + zero li margin/padding
       suppresses default bullets so both flavours look identical. */
    list-style: none;
}
.datetime-presets-list > li {
    margin: 0;
    padding: 0;
}

.datetime-preset-item {
    display: block;
    width: 100%;
    padding: 6px 8px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;                             /* 14px */
    line-height: 1.25rem;                            /* 20px */
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.datetime-preset-item:hover {
    background: var(--bg-secondary-hover);
    color: var(--text-primary);
}
.datetime-preset-item.is-selected {
    background: var(--bg-brand-secondary);
    color: var(--text-primary);
    font-weight: 500;
}
.datetime-preset-item:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: -2px;
}

/* ============================================================
   Range mode — Phase 2 Session 1
   ============================================================
   Activated by `data-mode="range"` on the .datetime-picker root.
   The panel hosts two side-by-side .datetime-panel-col--calendar
   children (left = current month, right = current+1). When
   `data-presets="true"` is also set, a preset column is rendered
   to the left of both calendars.

   Synchronized navigation: only the OUTER chevrons are shown —
   prev on the left calendar's header, next on the right calendar's
   header. Both step the same `state` and re-render both grids.
*/

/* Panel hugs its dual-column content (existing 248px would clip). */
.datetime-panel--range {
    width: auto;
}

/* Range-mode preset column — same visual surface as the time-preset
   column (.is-selected pill in left column), but a distinct class so
   range presets can evolve independently. Both flavours share
   .datetime-presets-list + .datetime-preset-item. */
.datetime-panel-col--range-presets {
    width: 196px;
    padding-right: 4px;
    border-right: 1px solid var(--border-secondary);
}

/* In range mode each calendar only shows the chevron that points
   "outward" — left header has prev only, right header has next only.
   Hide the inner chevrons so synchronized nav reads cleanly. */
.datetime-panel--range .datetime-panel-col--calendar[data-range-side="start"] .datetime-nav--next,
.datetime-panel--range .datetime-panel-col--calendar[data-range-side="end"]   .datetime-nav--prev {
    visibility: hidden;
    pointer-events: none;
}

/* Narrow-width fallback (D8): when two calendars don't fit side-by-side
   the cols stack vertically. Threshold ≈ presets(196) + 2×calendar(216)
   + 2×gap(16) + panel padding(32) = 692px. Round up to 720px so we
   trigger before the layout actually breaks. The inner chevrons stay
   hidden — outer-only navigation reads the same vertically. */
@media (max-width: 720px) {
    .datetime-panel--range .datetime-panel-cols {
        flex-direction: column;
        gap: 8px;
    }
    .datetime-panel--range .datetime-panel-col--range-presets {
        width: 100%;
        padding-right: 0;
        padding-bottom: 8px;
        border-right: none;
        border-bottom: 1px solid var(--border-secondary);
    }
}

.datetime-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.datetime-time-column {
    position: relative;
    flex: 0 0 auto;
    width: 60px;
    height: 160px;                                   /* 5 rows × 32px — visible window */
}

/* The scrolling column. Per-row pill highlights the selected value —
   no centred band, no fade mask. Vertical-menu pattern from Figma
   `4294:8303`: scroll the list, click to select, the row's own pill
   moves with it. */
.datetime-time-scroll {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8px 0;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y proximity;                   /* gentle snap so values land cleanly without fighting user momentum */
    scrollbar-width: none;                           /* Firefox */
}
.datetime-time-scroll::-webkit-scrollbar {
    display: none;                                   /* WebKit/Blink */
}

/* One row per selectable value (00 → 23 for hours, 00 → 59 for min/sec). */
.datetime-time-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    background: transparent;
    border: none;
    border-radius: 4px;                              /* matches Figma fill_QMED9A pill — was 6px in the wheel pattern */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    scroll-snap-align: start;                        /* list-style snap; rows align to top of viewport, not centre */
    font-feature-settings: 'lnum' 1, 'tnum' 1;       /* tabular numerals — keeps "11" and "00" aligned */
    transition: background-color 0.12s ease, color 0.12s ease, font-weight 0.12s ease;
}
.datetime-time-row:hover {
    background: var(--bg-secondary-hover);
    color: var(--text-primary);
}
.datetime-time-row.is-selected {
    background: var(--bg-brand-secondary);
    color: var(--text-primary);
    font-weight: 500;                                /* Medium per Figma — was 600 / Semibold in the wheel pattern */
}

/* The ":" between columns */
.datetime-time-separator {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    padding: 0 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
}

/* ============================================================
   Triggers + popover — Session 5
   ============================================================
   Two trigger styles (input + button) wrap the panel and turn it
   into a popover. The wrapper `.datetime-picker` is the positioning
   anchor; the panel switches from inline (the standalone Calendar
   sub-page demos) to absolute (positioned 4px below the trigger)
   only when it's inside `.datetime-picker`.

   States mirror the Input component vocabulary —
     Default / Hover / Focus / Filled / Disabled / Error
   — with frozen visual classes (`.is-hover` etc.) for the docs page,
   plus real :hover / :focus-visible for live triggers.

   Open/close uses pointerdown for outside-click (modern, unifies
   mouse + touch + pen — the dropdown's deferred polish baked in
   from day 1 here).
*/

/* ─── Wrapper / popover positioning ──────────────────────── */

.datetime-picker {
    position: relative;
    display: inline-block;
}

/* When the panel is inside a picker wrapper it becomes a popover.
   Standalone .datetime-panel (no wrapper) stays inline — this is
   what the Calendar / Time Picker sub-pages use for static demos. */
.datetime-picker .datetime-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
}

/* The hidden attribute is the source of truth for visibility.
   `display: none` would have the same effect; using both keeps
   the attribute in sync with what the screen reader sees. */
.datetime-picker .datetime-panel[hidden] {
    display: none;
}

/* ─── Trigger base ───────────────────────────────────────── */

.datetime-trigger {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
                background-color 0.15s ease, color 0.15s ease;
}

.datetime-trigger:focus {
    outline: none;                                    /* we paint our own focus ring per variant */
}

.datetime-trigger-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--fg-quaternary);
    font-size: 16px;
    transition: color 0.15s ease;
}

.datetime-trigger-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s ease;
}

/* ─── Input variant — looks + feels like the Input component ─ */

.datetime-trigger--input {
    width: 100%;
    min-width: 240px;
    height: 44px;
    padding: 0 14px;
    gap: 8px;
    background-color: var(--bg-primary-alt);
    border-color: var(--border-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--text-placeholder);
}

.datetime-trigger--input .datetime-trigger-value {
    color: var(--text-placeholder);
}

.datetime-trigger--input.is-filled .datetime-trigger-value {
    color: var(--text-primary);
}

/* Hover */
.datetime-trigger--input:hover:not(:disabled):not(.is-disabled):not(.is-error),
.datetime-trigger--input.is-hover {
    border-color: var(--border-primary);
}

/* Focus — also painted when the picker is open, so the trigger reads as
   "active" while the panel is showing. `:focus-within` picks up focus on
   the inner <input> when the input variant is rendered as a div wrapper
   (Session 6); `:focus-visible` keeps working for the button variant
   where the trigger itself is the focusable element. */
.datetime-trigger--input:focus-within:not(.is-disabled):not(.is-error),
.datetime-trigger--input:focus-visible:not(:disabled):not(.is-disabled):not(.is-error),
.datetime-trigger--input.is-focus,
.datetime-picker.is-open .datetime-trigger--input:not(:disabled):not(.is-disabled):not(.is-error) {
    border-color: var(--border-brand);
    box-shadow: 0 0 0 4px rgba(146, 172, 247, 0.24);
}
[data-theme="dark"] .datetime-trigger--input:focus-within:not(.is-disabled):not(.is-error),
[data-theme="dark"] .datetime-trigger--input:focus-visible:not(:disabled):not(.is-disabled):not(.is-error),
[data-theme="dark"] .datetime-trigger--input.is-focus,
[data-theme="dark"] .datetime-picker.is-open .datetime-trigger--input:not(:disabled):not(.is-disabled):not(.is-error) {
    box-shadow: 0 0 0 4px rgba(146, 172, 247, 0.24);
}

/* Error */
.datetime-trigger--input.is-error {
    border-color: var(--border-error);
}
.datetime-trigger--input.is-error:focus-within,
.datetime-trigger--input.is-error:focus-visible,
.datetime-trigger--input.is-error.is-focus {
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.14);
}
[data-theme="dark"] .datetime-trigger--input.is-error:focus-visible,
[data-theme="dark"] .datetime-trigger--input.is-error.is-focus {
    box-shadow: 0 0 0 4px rgba(255, 64, 64, 0.2);
}

/* Disabled */
.datetime-trigger--input:disabled,
.datetime-trigger--input.is-disabled {
    background-color: var(--bg-disabled);
    border-color: var(--border-disabled);
    cursor: not-allowed;
}
.datetime-trigger--input:disabled .datetime-trigger-value,
.datetime-trigger--input.is-disabled .datetime-trigger-value {
    color: var(--text-disabled);
}
.datetime-trigger--input:disabled .datetime-trigger-icon,
.datetime-trigger--input.is-disabled .datetime-trigger-icon {
    color: var(--fg-disabled);
}

/* ─── Button variant — looks like a Tertiary Gray button ──── */

.datetime-trigger--button {
    height: 40px;
    padding: 0 12px;
    gap: 6px;
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.datetime-trigger--button .datetime-trigger-value {
    flex: 0 1 auto;                                   /* sits next to the icon, not stretching */
    color: inherit;
}

.datetime-trigger--button .datetime-trigger-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.datetime-trigger--button:hover:not(:disabled):not(.is-disabled):not(.is-error),
.datetime-trigger--button.is-hover {
    background: var(--bg-secondary-hover);
    color: var(--text-primary);
}
.datetime-trigger--button:hover .datetime-trigger-icon,
.datetime-trigger--button.is-hover .datetime-trigger-icon {
    color: var(--text-primary);
}

.datetime-trigger--button:focus-visible:not(:disabled):not(.is-disabled):not(.is-error),
.datetime-trigger--button.is-focus,
.datetime-picker.is-open .datetime-trigger--button:not(:disabled):not(.is-disabled):not(.is-error) {
    background: var(--bg-secondary-hover);
    color: var(--text-primary);
    box-shadow: 0 0 0 4px rgba(146, 172, 247, 0.24);
}
.datetime-trigger--button:focus-visible .datetime-trigger-icon,
.datetime-trigger--button.is-focus .datetime-trigger-icon,
.datetime-picker.is-open .datetime-trigger--button .datetime-trigger-icon {
    color: var(--text-primary);
}

.datetime-trigger--button.is-filled {
    color: var(--text-primary);
}
.datetime-trigger--button.is-filled .datetime-trigger-icon {
    color: var(--text-primary);
}

.datetime-trigger--button.is-error {
    color: var(--text-error-primary);
}
.datetime-trigger--button.is-error .datetime-trigger-icon {
    color: var(--text-error-primary);
}

.datetime-trigger--button:disabled,
.datetime-trigger--button.is-disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
}
.datetime-trigger--button:disabled .datetime-trigger-icon,
.datetime-trigger--button.is-disabled .datetime-trigger-icon {
    color: var(--fg-disabled);
}

/* ============================================================
   Typed input + Apply/Cancel — Session 6
   ============================================================
   Three additions on top of Session 5:
     1. `<input>` element overrides — strip user-agent styles so the
        live input variant is visually indistinguishable from the
        button-rendered state-gallery variant.
     2. `.datetime-error-hint` — small text below the trigger when
        a typed value fails to parse.
     3. `.datetime-footer` — Apply / Cancel buttons inside the panel.
*/

/* ─── <input> as the value element (input variant only) ────── */

input.datetime-trigger-value {
    /* Strip the input's user-agent box so it sits flush inside the wrapper.
       The wrapper provides padding, background, and border. */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    outline: none;
    padding: 0;
    margin: 0;
    /* Inherit the wrapper's typography so the placeholder matches the
       state gallery's <span> rendering pixel for pixel. */
    font: inherit;
    color: inherit;
    /* The flex sizing comes from .datetime-trigger-value (already set);
       we just need to make sure the input doesn't impose its own width. */
    width: 100%;
}

/* The placeholder uses the same color as the empty-value state from
   Session 5 (var(--text-placeholder)). Inheriting from .datetime-trigger--input
   gets us there without per-browser pseudo-element duplication, but Chrome
   and Safari need the explicit ::placeholder rule to apply opacity:1. */
input.datetime-trigger-value::placeholder {
    color: var(--text-placeholder);
    opacity: 1;
}

/* When the input is filled, the wrapper sets text color to --text-primary
   via the existing `.is-filled .datetime-trigger-value` rule — but since
   the input has its own `color: inherit`, we need the inheritance chain to
   actually flow. Override explicitly to be safe across browsers. */
.datetime-trigger--input.is-filled input.datetime-trigger-value {
    color: var(--text-primary);
}

/* ─── Icon as a <button> (input variant only) ────────────────
   When the icon is interactive (so clicking toggles the panel) we
   reset the user-agent button styles so it visually matches the
   <span> icon used in the state gallery. */
button.datetime-trigger-icon {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
button.datetime-trigger-icon:focus-visible {
    /* The wrapper's :focus-within already paints the brand ring; killing
       the button's own default outline avoids a doubled focus indicator. */
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─── Help hint (Session 7.5 D) ───────────────────────────────
   Subtle format example below the input trigger ("t.d. 15.03.2026").
   Hidden when the trigger is in an error state — the error hint takes
   the same below-the-input slot. */
.datetime-help-hint {
    margin-top: 6px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;                                /* 12px */
    line-height: 1rem;
    color: var(--text-tertiary);
}
.datetime-help-hint:empty {
    display: none;
}
/* When the trigger paints its error state, hide the help hint so the
   error message owns the slot — sibling combinator works because both
   hints are direct siblings of the trigger inside .datetime-picker. */
.datetime-trigger.is-error ~ .datetime-help-hint {
    display: none;
}

/* ─── Error hint ──────────────────────────────────────────────
   Sits as a sibling of the trigger, inside .datetime-picker, so it
   inherits the wrapper's width and lays out below in normal flow. */
.datetime-error-hint {
    margin-top: 6px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;                                /* 12px */
    line-height: 1rem;
    color: var(--text-error-primary);
    /* Empty hint takes no vertical space — only visible when there's a message */
    min-height: 0;
}
.datetime-error-hint:empty {
    display: none;
}

/* ─── Apply / Cancel footer ───────────────────────────────────
   Lives at the bottom of the panel. Right-aligned button row with a
   subtle top border separating it from the calendar grid. */
.datetime-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-secondary);
}

/* Footer buttons share a base — they're miniature versions of the
   site's Tertiary Gray and Primary Brand buttons, scoped to the
   datetime panel so we don't reach into other components' styles.
   Sizes match the panel's compact footprint (smaller than 40px). */
.datetime-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease,
                border-color 0.12s ease, box-shadow 0.12s ease;
}

.datetime-footer-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(146, 172, 247, 0.24);
}

/* Cancel — Tertiary Gray look (transparent background, hover tint) */
.datetime-footer-btn--cancel {
    color: var(--text-secondary);
}
.datetime-footer-btn--cancel:hover {
    background: var(--bg-secondary-hover);
    color: var(--text-primary);
}

/* Today (Session 7.5) — icon-only Tertiary Gray, square 32×32 so it doesn't
   compete with Cancel/Apply for footer width. Left-aligned via auto margin
   so the right-side cancel + apply stay flush right. */
.datetime-footer-btn--today {
    margin-right: auto;
    width: 32px;
    padding: 0;
    color: var(--text-secondary);
    font-size: 16px;
}
.datetime-footer-btn--today i {
    pointer-events: none;                              /* clicks land on the button, not the inner icon */
}
.datetime-footer-btn--today:hover {
    background: var(--bg-secondary-hover);
    color: var(--text-primary);
}

/* Apply — Primary Brand look (filled blue) */
.datetime-footer-btn--apply {
    background: var(--bg-brand-solid);
    color: var(--text-primary-on-brand);
    border-color: var(--bg-brand-solid);
}
.datetime-footer-btn--apply:hover {
    background: var(--bg-brand-solid-hover);
    border-color: var(--bg-brand-solid-hover);
}

/* ============================================================
   Docs-only — variant demo "stage" on forms-datetime.html
   ============================================================
   Each picker sits inside a `.datetime-variant-stage` wrapper that
   gives it a subtle showcase panel: tinted bg, 1px border, generous
   symmetric padding, flex-centered. Reads as a dedicated demo
   surface separate from the surrounding doc text + code panel.

   The popover panel is position:absolute anchored to the picker
   itself, so it correctly escapes the stage's bottom edge when
   opened. Don't add overflow:hidden here — it would clip the panel.
*/
.datetime-variant-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-48) 24px;
    margin: 24px 0 32px;
}