/* Adrenaline controls: custom dropdowns (adr-controls.js) and a consistent look for text
   boxes, checkboxes and radios. Base rules use :where() (zero specificity), so any existing
   component styling still wins; plain browser defaults never show. Colours follow the CAD
   and dashboard tokens, so seasons and light mode apply. */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* ---- dropdowns */
.adr-sel { position: relative; display: block; width: 100%; min-width: 0; }
.adr-sel--inline { display: inline-block; width: auto; min-width: 160px; vertical-align: middle; }
.adr-sel__native { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; margin: 0 !important; }
.adr-sel__btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 10px 0 12px; border-radius: 10px; border: 1px solid var(--c-border, var(--line, #26262C)); background: var(--c-surface-sunken, var(--bg-raised, #0C0C0F)); color: var(--c-text, var(--text, #FAFAFA)); font: 500 14px/1.2 inherit; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.adr-sel__btn:hover { border-color: var(--c-text-faint, #8A8A93); }
.adr-sel__btn:focus-visible, .adr-sel.is-open .adr-sel__btn { outline: none; border-color: var(--c-brand, var(--accent, #F50332)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand, var(--accent, #F50332)) 22%, transparent); }
.adr-sel__btn:disabled { opacity: .55; cursor: not-allowed; }
.adr-sel__btn.is-empty .adr-sel__text { color: var(--c-text-faint, #8A8A93); }
.adr-sel__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adr-sel__btn svg { flex: none; color: var(--c-text-muted, #A1A1AA); transition: transform .15s; }
.adr-sel.is-open .adr-sel__btn svg { transform: rotate(180deg); }
.adr-pop { position: fixed; z-index: 2147483000; display: flex; flex-direction: column; overflow: hidden; padding: 6px; border-radius: 12px; border: 1px solid var(--c-border, #26262C); background: var(--c-surface-raised, #18181C); color: var(--c-text, #FAFAFA); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); font: 400 14px/1.3 "Geist", ui-sans-serif, system-ui, sans-serif; }
.adr-pop__search { padding: 2px 2px 6px; }
.adr-pop__search input { width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--c-border, #26262C); background: var(--c-surface-sunken, #0C0C0F); color: inherit; font: inherit; outline: none; }
.adr-pop__search input:focus { border-color: var(--c-brand, #F50332); }
.adr-pop__list { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.adr-pop__opt { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.adr-pop__opt span { flex: 1; min-width: 0; }
.adr-pop__opt.is-active { background: var(--c-surface, #111114); }
.adr-pop__opt.is-on { color: var(--c-text, #FAFAFA); font-weight: 600; }
.adr-pop__opt.is-on svg { color: var(--c-brand, #F50332); flex: none; }
.adr-pop__opt.is-disabled { opacity: .45; cursor: not-allowed; }
.adr-pop__group { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-faint, #8A8A93); }
.adr-pop__empty { padding: 10px; color: var(--c-text-faint, #8A8A93); }

/* ---- text boxes */
:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], textarea) {
  min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--c-border, var(--line, #26262C)); background: var(--c-surface-sunken, var(--bg-raised, #0C0C0F)); color: var(--c-text, var(--text, #FAFAFA)); font: 400 14px/1.4 inherit; transition: border-color .12s, box-shadow .12s;
}
:where(textarea) { min-height: 84px; resize: vertical; }
:where(input, textarea)::placeholder { color: var(--c-text-faint, #8A8A93); opacity: 1; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), textarea):focus { outline: none; border-color: var(--c-brand, var(--accent, #F50332)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand, var(--accent, #F50332)) 22%, transparent); }
:where(input[type="number"])::-webkit-inner-spin-button, :where(input[type="number"])::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:where(input[type="number"]) { -moz-appearance: textfield; appearance: textfield; }
:where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"])::-webkit-calendar-picker-indicator { filter: invert(.75); cursor: pointer; }
[data-theme="light"] :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"])::-webkit-calendar-picker-indicator { filter: none; }

/* ---- checkboxes and radios */
:where(input[type="checkbox"], input[type="radio"]) { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0 6px 0 0; border: 1.5px solid var(--c-text-faint, #8A8A93); background: var(--c-surface-sunken, #0C0C0F) center / 12px no-repeat; vertical-align: -3px; cursor: pointer; transition: background-color .12s, border-color .12s; }
:where(input[type="checkbox"]) { border-radius: 5px; }
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"]):checked { background-color: var(--c-brand, var(--accent, #F50332)); border-color: var(--c-brand, var(--accent, #F50332)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
:where(input[type="radio"]):checked { border-color: var(--c-brand, var(--accent, #F50332)); background-image: radial-gradient(circle, var(--c-brand, var(--accent, #F50332)) 0 45%, transparent 50%); background-size: 100% 100%; }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--c-brand, var(--accent, #F50332)); outline-offset: 2px; }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .adr-sel__btn, .adr-sel__btn svg, :where(input, textarea) { transition: none; } }