/* ==========================================================================
   RateOptimizer — UI control kit
   --------------------------------------------------------------------------
   One skin and one set of behaviours for every input, select, date field and
   autocomplete in the panel. Loaded AFTER app.css so it refines the form
   rules already there rather than replacing them: app.css still owns layout
   (.form-grid, .form-section, .table-toolbar), this sheet owns the controls
   that sit inside it.

   No new palette. Every colour here resolves to a token already declared in
   app.css :root — navy text, #0f6be0 interactive blue, the same borders,
   radii and shadows. A control that looks new here is the same control the
   rest of the panel was already drawing, made consistent.

   The JS counterpart is assets/js/ui-kit.js. Everything below degrades: with
   scripting off the browser's own select and date field remain, styled by
   the same skin, so nothing becomes unusable.
   ========================================================================== */

:root {
    /* One height for every control, so an input, a select and a date field
       standing side by side line up on both edges. The -sm step is the
       toolbar/filter density that app.css already used (36px). */
    --control-h: 40px;
    --control-h-sm: 36px;
    --control-pad-x: 13px;
    --control-pad-x-sm: 12px;
    --control-radius: var(--radius-sm);
    --control-font: 13.5px;
    --control-font-sm: 12.5px;

    /* Popovers (select panels, calendars, suggestion lists) render on the
       body, above the modal backdrop at 60 and below toasts at 70... which
       leaves no room, so they take 80 and toasts stay the top layer by
       being drawn last in a stack that never overlaps them. */
    --popover-z: 80;
    --popover-shadow: 0 1px 2px rgba(11, 27, 52, .06), 0 18px 44px rgba(11, 27, 52, .16);
}

/* --------------------------------------------------------------------------
   1. The control skin
   Applied through a shared selector list rather than a `.ui-control` class,
   because the markup that needs it already exists in 70+ views. The class is
   accepted too, for new markup that wants it explicitly.
   -------------------------------------------------------------------------- */

/* Sizing is read from inherited custom properties, never re-declared by a
   more specific rule. app.css already carries a `.form-group input:not(...)`
   selector at (0,3,1); winning that with an even longer selector, and then
   winning THAT again for every density and affix variant, is a specificity
   arms race with no end. Variables sidestep it: a container or a wrapper
   re-points --control-h or --pad-r and the value simply inherits down. */
.ui-control,
.form-group > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group > select,
.form-group > textarea,
.form-field > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-field > select,
.form-field > textarea,
.ui-field > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ui-field > select {
    width: 100%;
    min-height: var(--control-h);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--pad-l, var(--control-pad-x));
    padding-right: var(--pad-r, var(--control-pad-x));
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    background: var(--field);
    font-family: var(--control-family, var(--font));
    font-size: var(--control-font);
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

/* Textareas keep their own vertical rhythm — a 40px min-height would fight
   the rows attribute every view sets. */
.form-group > textarea,
.form-field > textarea,
.ui-control.ui-textarea {
    min-height: 92px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.55;
    resize: vertical;
}

/* Native selects that the enhancer has not upgraded (JS off, or opted out)
   still need room for the browser's own arrow. */
.form-group > select,
.form-field > select { --pad-r: 34px; cursor: pointer; }

.ui-control:hover:not(:disabled):not([readonly]),
.form-group > input:hover:not(:disabled):not([readonly]):not([type="checkbox"]):not([type="radio"]),
.form-group > select:hover:not(:disabled),
.form-field > input:hover:not(:disabled):not([readonly]):not([type="checkbox"]):not([type="radio"]),
.form-field > select:hover:not(:disabled),
.ui-field > input:hover:not(:disabled):not([readonly]):not([type="checkbox"]):not([type="radio"]),
.ui-field > select:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--surface);
}

/* Focus. `:focus-visible` alone skips mouse-focused text fields, which is
   exactly where the ring is most wanted, so text-entry controls take :focus
   and buttons keep :focus-visible. */
.ui-control:focus,
.form-group > input:focus,
.form-group > select:focus,
.form-group > textarea:focus,
.form-field > input:focus,
.form-field > select:focus,
.form-field > textarea:focus,
.ui-field > input:focus,
.ui-field > select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Error. `.is-invalid` is set by the enhancer and by server-rendered views;
   `:user-invalid` catches native constraint failures without marking every
   untouched required field red on first paint. */
.ui-control.is-invalid,
.form-group > .is-invalid,
.form-field > .is-invalid,
.ui-field > .is-invalid,
.form-group > input:user-invalid,
.form-field > input:user-invalid,
.ui-field > input:user-invalid {
    border-color: var(--danger-solid);
    background: var(--danger-tint);
}
.ui-control.is-invalid:focus,
.form-group > .is-invalid:focus,
.form-field > .is-invalid:focus,
.ui-field > .is-invalid:focus,
.form-group > input:user-invalid:focus,
.form-field > input:user-invalid:focus,
.ui-field > input:user-invalid:focus {
    border-color: var(--danger-solid);
    box-shadow: 0 0 0 3px rgba(214, 52, 32, .18);
}

.ui-control:disabled,
.form-group > input:disabled,
.form-group > select:disabled,
.form-group > textarea:disabled,
.form-field > input:disabled,
.form-field > select:disabled,
.form-field > textarea:disabled,
.ui-field > input:disabled,
.ui-field > select:disabled {
    background: var(--chip);
    border-color: var(--border);
    color: var(--faint);
    cursor: not-allowed;
}
.ui-control[readonly],
.form-group > input[readonly],
.form-field > input[readonly],
.ui-field > input[readonly] {
    background: var(--chip);
    color: var(--muted);
}

.ui-control::placeholder,
.form-group > input::placeholder,
.form-group > textarea::placeholder,
.form-field > input::placeholder,
.ui-field > input::placeholder { color: var(--faint); font-weight: 400; }

/* Values that are identifiers, money or dates read as data, not prose. */
.ui-control.ui-mono,
input.mono { font-family: var(--font-mono); }
.ui-date > .ui-date-input { letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   2. Labels, hints, messages, required marker
   -------------------------------------------------------------------------- */

.form-group > label,
.form-field > label,
.ui-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}
.ui-label .muted, .form-group > label .muted { font-weight: 500; }

.req, .ui-req { color: var(--danger-solid); font-weight: 700; }

.field-hint, .ui-hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--faint);
}

/* One validation message element, whatever produced it. */
.field-error, .ui-msg {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--danger-text);
}
.ui-msg[hidden] { display: none; }
.ui-msg::before {
    content: "!";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--danger-solid);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}
.ui-msg-ok { color: var(--ok-text); }
.ui-msg-ok::before { content: "\2713"; background: var(--ok-solid); font-size: 9px; }

/* --------------------------------------------------------------------------
   3. Field shell — prefix/suffix icons, clear button
   `.ui-field` wraps exactly one control plus its affixes. Padding is pushed
   onto the control by the affix modifiers so the text never sits under an
   icon.
   -------------------------------------------------------------------------- */

.ui-field { position: relative; display: block; }

.ui-field-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    color: var(--faint);
    pointer-events: none;
}
.ui-field-icon svg { display: block; }
.ui-field-prefix { left: 12px; }
.ui-field-suffix { right: 12px; }

.ui-field-has-prefix { --pad-l: 36px; }
.ui-field-has-suffix { --pad-r: 36px; }

/* Clear button. Interactive, so it sits above the pointer-events:none icons
   and gets its own hit target. */
.ui-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity .14s ease, background-color .14s ease, color .14s ease;
}
.ui-clear svg { display: block; }
.ui-field:hover > .ui-clear,
.ui-field:focus-within > .ui-clear,
.ui-clear:focus-visible { opacity: 1; }
.ui-clear[hidden] { display: none; }
.ui-clear:hover { background: var(--chip); color: var(--text); }
.ui-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A field carrying a trailing button (clear, calendar) reserves the space. */
.ui-field-has-clear { --pad-r: 34px; }

/* --------------------------------------------------------------------------
   4. Number input — stepper pair, so a spinner is not the browser's own
   4px-wide arrows that appear on hover and vanish on touch.
   -------------------------------------------------------------------------- */

.ui-number { position: relative; }
.ui-number { --pad-r: 36px; }
.ui-number > input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.ui-number > input[type="number"]::-webkit-outer-spin-button,
.ui-number > input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ui-steppers {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    display: flex;
    flex-direction: column;
    width: 26px;
    border-left: 1px solid var(--border);
    border-radius: 0 var(--control-radius) var(--control-radius) 0;
    overflow: hidden;
}
.ui-step {
    flex: 1 1 50%;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    background: var(--chip);
    color: var(--muted);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.ui-step + .ui-step { border-top: 1px solid var(--border); }
.ui-step:hover { background: var(--accent-tint); color: var(--accent); }
.ui-step:disabled { color: var(--border-strong); cursor: not-allowed; background: var(--chip); }
.ui-number > input[type="number"]:disabled ~ .ui-steppers { opacity: .5; pointer-events: none; }

/* --------------------------------------------------------------------------
   5. Enhanced select — the trigger
   The native <select> stays in the DOM as the value carrier; it is rendered
   but transparent so the browser can still anchor a constraint-validation
   bubble to it and so `form.elements` is unchanged.
   -------------------------------------------------------------------------- */

.ui-select { position: relative; display: block; }

.ui-select > select.ui-select-native {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    /* not display:none — a hidden required control blocks submit invisibly */
}

.ui-select-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--control-h);
    padding: 0 var(--control-pad-x);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    background: var(--field);
    font-family: var(--font);
    font-size: var(--control-font);
    font-weight: 500;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.ui-select-trigger:hover { border-color: var(--border-strong); background: var(--surface); }
.ui-select-trigger:focus-visible,
.ui-select.is-open > .ui-select-trigger {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.ui-select.is-invalid > .ui-select-trigger {
    border-color: var(--danger-solid);
    background: var(--danger-tint);
}
.ui-select.is-disabled > .ui-select-trigger {
    background: var(--chip);
    color: var(--faint);
    cursor: not-allowed;
}

.ui-select-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-select-value.is-placeholder { color: var(--faint); font-weight: 400; }

.ui-select-caret {
    flex: 0 0 auto;
    color: var(--faint);
    transition: transform .18s ease, color .16s ease;
}
.ui-select.is-open .ui-select-caret { transform: rotate(180deg); color: var(--accent); }
.ui-select-trigger:hover .ui-select-caret { color: var(--muted); }

/* --------------------------------------------------------------------------
   6. Popover shell — shared by the select panel, the calendar and the
   suggestion list. Rendered on <body> with position:fixed so no card,
   modal, table-wrap or overflow:hidden ancestor can ever clip it.
   -------------------------------------------------------------------------- */

.ui-pop {
    position: fixed;
    z-index: var(--popover-z);
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--popover-shadow);
    opacity: 0;
    transform: translateY(-4px) scale(.985);
    transform-origin: top center;
    transition: opacity .14s ease, transform .14s ease;
}
.ui-pop { max-width: calc(100vw - 16px); }
.ui-pop.is-up { transform-origin: bottom center; transform: translateY(4px) scale(.985); }
.ui-pop.is-shown { opacity: 1; transform: none; }
.ui-pop[hidden] { display: none; }

/* --------------------------------------------------------------------------
   7. Select panel — search box, option list, empty state
   -------------------------------------------------------------------------- */

.ui-pop-select { display: flex; flex-direction: column; overflow: hidden; }

.ui-search {
    flex: 0 0 auto;
    position: relative;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.ui-search > input {
    width: 100%;
    height: 34px;
    padding: 0 30px 0 32px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--field);
    font-family: var(--font);
    font-size: 13px;
    color: var(--text);
}
.ui-search > input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.ui-search-icon {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--faint);
    pointer-events: none;
}
.ui-search-clear {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
}
.ui-search-clear:hover { background: var(--chip); color: var(--text); }
.ui-search-clear[hidden] { display: none; }

.ui-options {
    flex: 1 1 auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.ui-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background-color .1s ease, color .1s ease;
}
/* A SELECT option row is just its label plus the selected tick. The label
   takes the row and ellipsises rather than widening it — the panel is pinned
   to the trigger's width in ui-kit.js, so nothing here may size the popup. */
.ui-option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Secondary text on an AUTOCOMPLETE suggestion row (renderSuggest). Select
   option rows deliberately render no note at all. It must be able to shrink:
   with flex:0 0 auto it could neither shrink nor wrap, so its full intrinsic
   width became the panel's, the label collapsed to nothing, and the list grew
   a horizontal scrollbar. */
.ui-option-note {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--faint);
}
.ui-option-check { flex: 0 0 auto; color: var(--accent); opacity: 0; }

.ui-option.is-active { background: var(--accent-tint); color: var(--accent-strong); }
.ui-option.is-selected { font-weight: 600; }
.ui-option.is-selected .ui-option-check { opacity: 1; }
.ui-option.is-disabled { color: var(--faint); cursor: not-allowed; background: transparent; }

/* The <optgroup> caption, kept because supplier and permission lists use it. */
.ui-optgroup {
    padding: 10px 10px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}
.ui-optgroup:first-child { padding-top: 4px; }

/* Matched substring inside an option label. */
.ui-option mark {
    padding: 0 1px;
    border-radius: 3px;
    background: var(--gold-tint);
    color: inherit;
    font-weight: 700;
}

.ui-empty {
    padding: 22px 14px;
    text-align: center;
    font-size: 12.5px;
    color: var(--faint);
}
.ui-empty strong { display: block; margin-bottom: 3px; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------------------
   8. Calendar
   -------------------------------------------------------------------------- */

.ui-pop-cal { width: 306px; padding: 12px; }
.ui-pop-cal.is-range { width: auto; }

.ui-cal-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.ui-cal-title {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.ui-cal-select {
    height: 30px;
    padding: 0 24px 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%),
                      linear-gradient(135deg, var(--faint) 50%, transparent 50%);
    background-position: right 11px center, right 7px center;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.ui-cal-select:hover { background-color: var(--chip); }
.ui-cal-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.ui-cal-nav {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.ui-cal-nav:hover:not(:disabled) { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent); }
.ui-cal-nav:disabled { color: var(--border-strong); cursor: not-allowed; }
.ui-cal-nav:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.ui-cal-months { display: flex; gap: 16px; }
.ui-cal-month { flex: 0 0 auto; width: 282px; }
.ui-cal-month-name {
    margin: 0 0 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.ui-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.ui-cal-dow {
    padding: 4px 0 6px;
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
}

.ui-cal-day {
    position: relative;
    display: grid;
    place-items: center;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.ui-cal-day:hover:not(:disabled) { background: var(--accent-tint); color: var(--accent-strong); }
.ui-cal-day:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ui-cal-day.is-outside { color: var(--faint); opacity: .55; }

/* Today: a dot, so it survives being selected or disabled. */
.ui-cal-day.is-today::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--accent);
}
.ui-cal-day.is-today { font-weight: 700; color: var(--accent); }

.ui-cal-day.is-selected,
.ui-cal-day.is-selected:hover {
    background: var(--grad-blue);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 107, 224, .32);
}
.ui-cal-day.is-selected::after { background: #fff; }

/* Range: endpoints solid, the nights between them tinted. */
.ui-cal-day.is-in-range { background: var(--accent-tint); border-radius: 0; color: var(--accent-strong); }
.ui-cal-day.is-range-start { border-radius: 9px 0 0 9px; }
.ui-cal-day.is-range-end { border-radius: 0 9px 9px 0; }
.ui-cal-day.is-range-start.is-range-end { border-radius: 9px; }

.ui-cal-day:disabled {
    color: var(--border-strong);
    cursor: not-allowed;
    background: transparent;
    text-decoration: line-through;
    text-decoration-color: var(--border);
}

.ui-cal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.ui-cal-hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11.5px;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-cal-btn {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}
.ui-cal-btn:hover { background: var(--accent-tint); border-color: var(--accent-line); }
.ui-cal-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ui-cal-btn-plain { color: var(--muted); }
.ui-cal-btn-plain:hover { background: var(--chip); }

/* --------------------------------------------------------------------------
   9. Date field
   The original <input> is kept and switched to type=text: its `.value` stays
   the ISO string a type=date carried, so every script that reads or writes
   these fields keeps working unchanged.
   -------------------------------------------------------------------------- */

.ui-date {
    position: relative;
    display: block;
    --pad-r: 62px;
    --control-family: var(--font-mono);
}
.ui-date-btn {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}
.ui-date-btn:hover { background: var(--accent-tint); color: var(--accent); }
.ui-date-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent); }
.ui-date.is-disabled .ui-date-btn { display: none; }
.ui-date > .ui-clear { right: 33px; }

/* The weekday/short-date readout, so an ISO value is still human. Hidden
   when the field is empty or too narrow to hold it. */
.ui-date-pretty {
    position: absolute;
    top: 50%;
    right: 62px;
    transform: translateY(-50%);
    max-width: 45%;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--chip);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.ui-date-pretty[hidden] { display: none; }
.ui-date:focus-within .ui-date-pretty { opacity: .45; }

/* --------------------------------------------------------------------------
   10. Autocomplete (upgraded input[list])
   -------------------------------------------------------------------------- */

.ui-ac { position: relative; display: block; --pad-r: 34px; }
.ui-ac-caret {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    color: var(--faint);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Density variants
   Toolbars, filter bars, modals-in-tables and inline forms run at -sm.
   -------------------------------------------------------------------------- */

/* One declaration re-sizes every control in a toolbar: the variables the
   skin reads inherit, so nothing here has to out-specify anything. */
.table-toolbar,
.list-tools,
.inline-form,
.ui-sm {
    --control-h: var(--control-h-sm);
    --control-pad-x: var(--control-pad-x-sm);
    --control-font: var(--control-font-sm);
}
.table-toolbar .ui-select-trigger { padding-right: 9px; }
.table-toolbar .ui-date { --pad-r: 32px; min-width: 138px; }
.table-toolbar .ui-date-pretty { display: none; }
.table-toolbar .ui-date > .ui-clear { right: 30px; }
.table-toolbar .ui-date-btn { right: 3px; width: 26px; height: 26px; }

/* The filter bar sizes its own controls to content rather than stretching. */
.table-toolbar .ui-select { min-width: 150px; }
.table-toolbar .filter-range .ui-date { min-width: 0; }
.filter-range { align-items: center; }

/* app.css sizes the toolbar's phone layout through `.filter-field > select`
   and `.filter-range input[type="date"]`. Wrapping the control puts a div
   between the two, so those rules stop matching and the fields collapse to
   their intrinsic width. These re-point them at the wrapper. */
@media (max-width: 760px) {
    .filter-field > .ui-select,
    .filter-field > .ui-date,
    .filter-field > .ui-field { width: 100%; min-width: 0; }
    .filter-range > .ui-date { flex: 1 1 0; min-width: 0; }
}

/* --------------------------------------------------------------------------
   12. Responsive
   Below 560px a popover stops trying to hug its trigger and becomes a sheet
   pinned to the bottom of the viewport: on a phone a 300px calendar anchored
   to a field near the fold is half off-screen otherwise.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .ui-pop {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: auto !important;
        max-width: none !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: none;
        transform: translateY(14px);
        transform-origin: bottom center;
        box-shadow: 0 -8px 40px rgba(11, 27, 52, .24);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .ui-pop.is-shown { transform: none; }

    .ui-pop-cal { width: auto; padding: 14px 14px 18px; }
    .ui-cal-months { flex-direction: column; gap: 18px; }
    .ui-cal-month { width: auto; }
    .ui-cal-day { height: 42px; font-size: 14px; }

    .ui-options { max-height: 46vh !important; padding: 6px 8px 10px; }
    .ui-option { padding: 11px 10px; font-size: 14px; }

    /* A grab handle, so the sheet reads as dismissible. */
    .ui-pop::before {
        content: "";
        display: block;
        width: 38px;
        height: 4px;
        margin: 8px auto 2px;
        border-radius: 999px;
        background: var(--border-strong);
    }

    /* Filter bars stack rather than scroll sideways. The toolbar is already
       a grid at this width (app.css, 760px), so this narrows it to one
       column instead of trying to change its flex direction. */
    .table-toolbar { grid-template-columns: minmax(0, 1fr); }
    .table-toolbar .ui-select,
    .table-toolbar .filter-field { min-width: 0; width: 100%; }
    .filter-actions { margin-left: 0; }
}

@media (min-width: 561px) and (max-width: 900px) {
    .ui-cal-months { flex-direction: column; gap: 14px; }
    .ui-pop-cal.is-range { width: 306px; }
}

/* A dimmer behind the sheet, so the page underneath reads as inert. Only
   drawn at sheet sizes; on desktop the popover needs no backdrop. */
.ui-pop-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--popover-z) - 1);
    background: rgba(8, 20, 40, .38);
    opacity: 0;
    transition: opacity .16s ease;
}
.ui-pop-scrim.is-shown { opacity: 1; }
@media (min-width: 561px) { .ui-pop-scrim { display: none; } }

/* --------------------------------------------------------------------------
   13. Motion + forced colours
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ui-pop,
    .ui-select-caret,
    .ui-cal-day,
    .ui-option,
    .ui-clear { transition: none; }
    .ui-pop { transform: none; }
}

@media (forced-colors: active) {
    .ui-select-trigger,
    .ui-pop,
    .ui-cal-day.is-selected { border: 1px solid CanvasText; }
    .ui-cal-day.is-selected { background: Highlight; color: HighlightText; }
    .ui-option.is-active { background: Highlight; color: HighlightText; }
}

/* Screen-reader-only live region for announcing selection changes. */
.ui-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* When a popover is open the page behind it must not scroll away from the
   anchor; the enhancer sets this on <html>. */
html.ui-pop-lock { overflow: hidden; }
@media (min-width: 561px) { html.ui-pop-lock { overflow: auto; } }