.search-input, select, input[type="text"], input[type="email"], input[type="date"], input[type="password"], textarea { padding: var(--sp-1); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: var(--fs-2); transition: var(--transition); background: var(--surface); color: var(--text); box-sizing: border-box; }
.search-input, select, input[type="text"], input[type="email"], input[type="date"], input[type="password"], input[type="number"] { height: var(--field-h); }
.search-input:focus, select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-surface); }

/* Strip the OS appearance so <select> respects the platform's sharp radius +
   surface (without this macOS renders a rounded native control), and replace
   the native arrow with a platform chevron. NOTE: the OPEN options popup is
   OS-rendered and cannot be CSS-styled — fully styling the option list would
   require a custom JS dropdown component (deferred). */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* clearance for the chevron adornment (icon sizing, not rhythm): --sp-5 + --sp-2 = 32 */
    padding-right: calc(var(--sp-5) + var(--sp-2));
    /* chevron adornment — data-URIs can't read CSS vars, so the muted-gray is
       set per theme (slate-500 on light, slate-400 on dark) to track --text-muted. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    background-size: 14px;
}
body.theme-dark select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}

/* ============================================================
   Custom dropdown (VDR.dropdown) — a styleable <select> replacement.
   JS wraps each <select> in .dropdown, hides the native control, and renders a
   .dropdown-trigger + .dropdown-panel listbox. The trigger mirrors the native
   select look (surface, border, chevron, field height); the panel is fully
   themeable (the native popup is not). Width tracks content by default; full-
   width contexts opt in with .dropdown.is-block or a context override. */
.dropdown { position: relative; display: inline-flex; max-width: 100%; vertical-align: middle; }
.dropdown > select { display: none; }
.dropdown-trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-1);
    width: auto; min-width: 0; height: var(--field-h);
    padding: 0 var(--sp-2);
    border: 1px solid var(--border); border-radius: var(--radius-control);
    background: var(--surface); color: var(--text); font-size: var(--fs-2);
    cursor: pointer; white-space: nowrap; transition: var(--transition);
}
/* Full-width contexts (create-row, settings) make the trigger fill its cell. */
.dropdown.is-block .dropdown-trigger { width: 100%; }
.dropdown-trigger:hover { border-color: var(--text-muted); }
.dropdown.open .dropdown-trigger,
.dropdown-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-surface); }
.dropdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-chevron { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--transition); }
.dropdown.open .dropdown-chevron { transform: rotate(180deg); }

.dropdown-panel {
    position: absolute; z-index: 60; top: calc(100% + var(--sp-1)); left: 0;
    min-width: 100%; width: max-content; max-width: min(320px, 90vw);
    max-height: 280px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-control); box-shadow: var(--sh-3);
    padding: var(--sp-1); display: none;
}
.dropdown.open .dropdown-panel { display: block; }
.dropdown-option {
    display: flex; align-items: stretch; gap: 0;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-control);
    font-size: var(--fs-2); color: var(--text); cursor: pointer; white-space: nowrap;
}
.dropdown-opt-label { align-self: center; overflow: hidden; text-overflow: ellipsis; }
.dropdown-option:hover, .dropdown-option.is-active { background: var(--surface-sunken); }
.dropdown-option.is-selected { color: var(--accent); font-weight: var(--fw-600); }
.dropdown-option.is-disabled { opacity: 0.4; cursor: not-allowed; }
.dropdown-option.dropdown-action { border-top: 1px solid var(--border); color: var(--accent); font-weight: var(--fw-500); }
.dropdown.is-block { display: flex; width: 100%; }

/* Nesting guides: one vertical bar per depth + a smaller font for deeper levels
   (down to the declared minimum). Used by nested-folder dropdowns. */
.dropdown-indent { flex-shrink: 0; align-self: stretch; width: var(--sp-4); border-left: 1px solid var(--border); }
.dropdown-option.dd-depth-1 { font-size: var(--fs-1); }
.dropdown-option.dd-depth-2 { font-size: var(--fs-0); }

/* Empty state: a no-option dropdown that declares data-empty-href becomes a
   surface-raised action button (e.g. folder dropdown → "Create folder"). */
.dropdown-empty-action { background: var(--surface-raised); justify-content: center; gap: var(--sp-2); }
/* No hover effect — it's a plain action button (overrides .dropdown-trigger:hover). */
.dropdown-empty-action:hover { background: var(--surface-raised); border-color: var(--border); box-shadow: none; }
.dropdown-empty-action .icon { flex-shrink: 0; color: var(--text-muted); }
.dropdown.dropdown-is-empty .dropdown-trigger[disabled] { color: var(--text-muted); cursor: default; background: var(--surface); }

/* ============================================================
   Custom calendar (VDR.calendar) — a styleable, date-only <input type=date>.
   Trigger mirrors the field look; the popup has a year/month/day selector row
   (chevron-less dropdowns, ordered per the date-format setting) over a month
   grid. Portaled to <body> so the table's overflow can't clip it. */
.calendar { position: relative; display: inline-flex; max-width: 100%; vertical-align: middle; }
.calendar > input[type="date"] { display: none; }
.calendar-trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    width: auto; min-width: 0; height: var(--field-h); padding: 0 var(--sp-2) 0 var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--radius-control);
    background: var(--surface); color: var(--text); font-size: var(--fs-2);
    cursor: pointer; white-space: nowrap; transition: var(--transition);
}
.calendar-trigger:hover { border-color: var(--text-muted); }
.calendar.open .calendar-trigger,
.calendar-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-surface); }
.calendar-label { overflow: hidden; text-overflow: ellipsis; }
.calendar-label.is-placeholder { color: var(--text-muted); }
.calendar-icon { flex-shrink: 0; color: var(--text-muted); }

.calendar-panel {
    position: absolute; z-index: 60; top: calc(100% + var(--sp-1)); left: 0;
    width: 280px; max-width: 90vw; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-control);
    box-shadow: var(--sh-3); padding: var(--sp-3); display: none;
}
.calendar.open .calendar-panel,
.calendar-panel.calendar-panel--portal { display: block; }
.calendar-selects { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.calendar-selects .dropdown { flex: 1; min-width: 0; }
.calendar-selects .dropdown-trigger { width: 100%; justify-content: center; gap: var(--sp-1); padding: 0 var(--sp-2); font-weight: var(--fw-600); }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-weekdays { margin-bottom: var(--sp-1); }
.calendar-weekdays span { text-align: center; font-size: var(--fs-0); color: var(--text-muted); padding: var(--sp-1) 0; }
.calendar-days { gap: var(--sp-1); }
.calendar-day {
    aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--text); font-size: var(--fs-2);
    border-radius: var(--radius-control); cursor: pointer; transition: background var(--transition);
}
.calendar-day:hover:not(.is-disabled):not(.is-empty) { background: var(--surface-sunken); }
.calendar-day.is-today { font-weight: var(--fw-700); color: var(--accent); }
.calendar-day.is-selected { background: var(--accent); color: var(--n-0); }
.calendar-day.is-disabled { color: var(--text-muted); opacity: 0.4; cursor: not-allowed; }
.calendar-day.is-empty { visibility: hidden; cursor: default; }

.search-bar { position: relative; display: flex; align-items: center; max-width: 420px; }
.search-icon { position: absolute; left: 12px; pointer-events: none; }
.search-bar input.search-input {
    width: 100%;
    height: var(--field-h);
    box-sizing: border-box;
    /* left clearance for the search-icon slot (icon box, not rhythm): --sp-5 + --sp-3 = 36 */
    padding: var(--sp-1) var(--sp-1) var(--sp-1) calc(var(--sp-5) + var(--sp-3));
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-2);
}
.search-bar input.search-input:focus { outline: none; border-color: var(--surface-dark); }

textarea { line-height: 1.5; }

/* Form label = the eyebrow token (12px uppercase muted), so a field's label reads the
   same as a table header or section eyebrow. Layout (block + bottom margin) stays here. */
.form-label { font-size: var(--fs-1); font-weight: var(--fw-600); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: var(--sp-2); display: block !important; }

.error-text { color: var(--danger); font-size: var(--fs-1); font-weight: var(--fw-600); }

/* Executive Toggle Switch */
.switch {
    position: relative;
    display: inline-block !important;
    width: 36px;
    height: 20px;
    vertical-align: middle;
    box-sizing: border-box;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--surface-raised); /* Changed from var(--border) */
    transition: var(--transition);
    box-sizing: border-box;
    border-radius: var(--radius-control);
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px !important;
    top: 3px !important;
    bottom: auto !important;
    background-color: var(--surface);
    transition: var(--transition);
    box-shadow: var(--sh-1);
    box-sizing: border-box;
    border-radius: var(--radius-control);
}
input:checked + .slider { background-color: var(--accent); }
input:focus + .slider { box-shadow: 0 0 1px var(--accent); }
input:checked + .slider:before { transform: translateX(16px); }
/* Unified squared toggle: rectangular track + square knob. Base .slider /
   .slider:before carry the radius (above); .round keeps the same squared shape. */
.slider.round { border-radius: var(--radius-control); }
.slider.round:before { border-radius: var(--radius-control); }

/* Checkbox — design-system styled (sharp + accent fill) to match the switch,
   replacing the OS-native control. Excludes the switch's hidden input. */
input[type="checkbox"]:not(.switch input) {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    flex-shrink: 0;
    transition: var(--transition);
    box-sizing: border-box;
    /* align to the line-box middle, not the text baseline — otherwise the box
       rides ~3px high against sibling fields / centered table cells. */
    vertical-align: middle;
}
input[type="checkbox"]:not(.switch input):hover { border-color: var(--accent); }
/* Checked = inverted fill: the box stays on the light surface and the accent is
   carried by the border + the checkmark line (rather than an accent box with a
   white tick). Reads cleaner and keeps the same weight in light/dark contexts. */
input[type="checkbox"]:not(.switch input):checked,
input[type="checkbox"]:not(.switch input):indeterminate {
    background: var(--surface);
    border-color: var(--accent);
}
input[type="checkbox"]:not(.switch input):checked::after {
    content: "";
    width: 4px;
    height: 8px;
    border: solid var(--accent);
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}
input[type="checkbox"]:not(.switch input):indeterminate::after {
    content: "";
    width: 8px;
    height: 2px;
    background: var(--accent);
}
input[type="checkbox"]:not(.switch input):focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-surface);
}
input[type="checkbox"]:not(.switch input):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Readonly and Disabled Form Elements: keep the same field surface (var(--surface))
   so every field reads as a field in both modes; the not-allowed cursor + muted
   opacity are the only "not editable" cues. */
input[readonly], select[readonly], textarea[readonly],
input[disabled], select[disabled], textarea[disabled] {
    background-color: var(--surface);
    cursor: not-allowed;
}