/* ═══════════════════════════════════════════════════════════════════════════
   _CONTRAST_BOOST — global readability safety net (v1.0, 2026-07-21)

   User feedback: several pages (Assembly List, dropdown menus, small labels
   etc.) render text at almost the same tone as the background so values
   are hard to read. Individual pages sometimes hardcode grey-on-grey
   colors that bypass the theme tokens, so a per-page audit alone would
   still miss edge cases. This file is loaded AFTER the active theme.css
   in every page and re-forces a minimum-contrast baseline through very
   targeted, selector-narrow rules — never re-styling the whole page:

     • Native <select>/<option> get solid white bg + dark text so the
       browser's native dropdown remains readable regardless of theme.
     • Every generic .dropdown / .menu / .popover / .list-group / [role=menu]
       gets an opaque background token + strong text token.
     • Small helper text classes (.text-muted / .subtle / .hint) whose
       hardcoded #9ca3af/#a0a4b8/#9aa0b8 fell below 4.5:1 are pushed to
       the theme's --color-text-secondary.
     • Table cells inherit --table-text, never anything transparent,
       so no rendering path can leave them looking washed out.

   All rules use :where() or :not() to keep specificity at 0-0-1 so any
   deliberate page-level override still wins. ═════════════════════════ */

/* 1 ── Native select / option — the browser paints these off the DOM tree
        so a page-level "input { background: transparent }" breaks them on
        every theme. Force solid white + dark text (light theme) or dark
        surface + bright text (dark theme, via same tokens on dark mode). */
:where(select) {
  background-color: var(--input-bg, #ffffff) !important;
  color:            var(--input-text, #0f1226) !important;
  border-color:     var(--input-border, rgba(120,130,170,0.55)) !important;
}
:where(select option),
:where(select optgroup) {
  background-color: #ffffff;
  color:            #0f1226;
}
html[data-theme="dark_mode"] :where(select option),
html[data-theme="dark_mode"] :where(select optgroup) {
  background-color: #1e2130;
  color:            #f2f4fb;
}

/* 2 ── Generic dropdown / menu / popover surfaces. Anything that renders
        a floating panel of clickable rows must have an opaque backdrop
        and a strong text color, otherwise the theme's translucent surface
        blends with the page. */
:where(
  .dropdown-menu,
  .dropdown-panel,
  .menu-popover,
  .list-group,
  .autocomplete-list,
  .combobox-list,
  [role="menu"],
  [role="listbox"]
) {
  background-color: var(--color-surface-elevated, #ffffff) !important;
  color:            var(--color-text, #0f1226) !important;
  border: 1px solid var(--border-color, rgba(120,130,170,0.40));
  box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,0.14));
}
:where(
  .dropdown-menu > *,
  .dropdown-panel > *,
  .menu-popover > *,
  .list-group > *,
  .autocomplete-list > *,
  .combobox-list > *,
  [role="menu"] > *,
  [role="menuitem"],
  [role="listbox"] > *,
  [role="option"]
) {
  color: var(--color-text, #0f1226);
}
:where([role="menuitem"]:hover, [role="option"]:hover) {
  background-color: var(--sidebar-item-hover, rgba(99,102,241,0.16));
}

/* 3 ── Muted / hint / helper text classes. Many pages hardcode #9aa0b8 or
        #9ca3af which is 3.0-3.4:1 on white — below AA. Point them all at
        the theme's --color-text-muted (which we just bumped to #4a5175
        on milky-glass, #a5abc9 on dark mode). */
:where(.text-muted, .muted, .subtle, .hint, .help-text, .form-help, small.help) {
  color: var(--color-text-muted, #4a5175) !important;
}

/* 4 ── Table safety net — table cells must always inherit table-text,
        never a translucent color. Applies to both plain <table> and
        [role="table"] / grid patterns. */
:where(table td, table th, [role="cell"], [role="rowheader"], [role="columnheader"]) {
  color: var(--table-text, var(--color-text, #0f1226));
}
:where(table tr:hover td) {
  background-color: var(--table-row-hover, rgba(99,102,241,0.10));
}
:where(table thead th, [role="row"] [role="columnheader"]) {
  color:            var(--table-header-text, #22273f);
  background-color: var(--table-header-bg, #edeff8);
  font-weight: 700;
}

/* 5 ── Placeholder text — hardcoded #a0a4b8 placeholders sat under 3:1
        on white inputs. Point to the theme's --input-placeholder which
        we just raised to #6b7190 on milky-glass. */
:where(input, textarea)::placeholder {
  color: var(--input-placeholder, #6b7190);
  opacity: 1;                     /* Firefox halves opacity by default */
}

/* 6 ── Card contrast — cards on the same page can visually merge into the
        background when both are near-white. Give every generic .card /
        [data-role="card"] a real border tone if the page didn't set one. */
:where(.card, .panel, [data-role="card"]) {
  background-color: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border, rgba(120,130,170,0.38));
}

/* 7 ── Selected row in any list — makes "which row am I on?" obvious. */
:where([aria-selected="true"], .is-selected, .selected) {
  background-color: var(--color-primary-light, rgba(99,102,241,0.18)) !important;
  color:            var(--color-text, #0f1226) !important;
}