:root {
  --ap-bg:             #0a0a0f;
  --ap-surface:        #13131a;
  --ap-surface-2:      #1a1a24;
  --ap-surface-hover:  #1e1e2a;
  --ap-border:         #222230;
  --ap-border-hover:   #333345;
  --ap-text-primary:   #ececf1;
  --ap-text-secondary: #8585a0;
  --ap-text-muted:     #55556a;
  /* #6265f1 rather than #6366f1: a 1/255 shift clears 4.5:1 against
     white text (4.47 -> 4.52) and is visually indistinguishable. */
  --ap-accent:         #6265f1;
  --ap-accent-hover:   #818cf8;
  --ap-accent-glow:    rgba(98, 101, 241, 0.15);
  --ap-on-accent:      #ffffff;
  --ap-on-accent-hover: #0a0a0f;
  --ap-success:        #34d399;
  --ap-warning:        #fbbf24;
  --ap-error:          #f87171;
  --ap-info:           #60a5fa;
  --ap-on-success:     #0a0a0f;
  --ap-on-warning:     #0a0a0f;
  --ap-on-error:       #0a0a0f;
  --ap-on-info:        #0a0a0f;
  --ap-nav-bg:         #0d0d14;
  --ap-nav-border:     #1a1a28;
  --ap-nav-item-hover: #1a1a24;
  --ap-nav-item-active: rgba(99, 102, 241, 0.12);
  --ap-table-header-bg:  #111118;
  --ap-table-row-hover:  #1a1a24;
  --ap-table-border:     #1e1e2c;
  --ap-font:      'Inter', 'Segoe UI', Arial, sans-serif;
  --ap-font-mono: 'JetBrains Mono', 'Fira Mono', monospace;
  --ap-space-1: 8px;
  --ap-space-2: 16px;
  --ap-space-3: 24px;
  --ap-space-4: 32px;
  --ap-space-6: 48px;
  --ap-radius-sm: 6px;
  --ap-radius-md: 8px;
  --ap-radius-lg: 12px;
  /* Worklist urgency row colors — Radix dark scale */
  --ap-row-1: #132d21;
  --ap-row-2: #2d2305;
  --ap-row-3: #3f2700;
  --ap-row-4: #4d3000;
  --ap-row-5: #500f1c;
  --ap-row-6: #611623;
  --ap-row-7: #72232d;
  color-scheme: dark;
}

[data-ui-theme="light"] {
  --ap-bg:             #f9f9fb;
  --ap-surface:        #ffffff;
  --ap-surface-2:      #f0f0f3;
  --ap-surface-hover:  #e8e8ec;
  --ap-border:         #e0e1e6;
  --ap-border-hover:   #cdced6;
  --ap-text-primary:   #1c2024;
  --ap-text-secondary: #60646c;
  --ap-text-muted:     #8b8d98;
  --ap-accent:         #3e63dd;
  --ap-accent-hover:   #3358d4;
  --ap-accent-glow:    rgba(62, 99, 221, 0.10);
  --ap-on-accent:      #ffffff;
  --ap-on-accent-hover: #ffffff;
  --ap-success:        #218358;
  --ap-warning:        #ab6400;
  --ap-error:          #ce2c31;
  --ap-info:           #0d74ce;
  --ap-on-success:     #ffffff;
  --ap-on-warning:     #ffffff;
  --ap-on-error:       #ffffff;
  --ap-on-info:        #ffffff;
  --ap-nav-bg:         #ffffff;
  --ap-nav-border:     #e8e8ec;
  --ap-nav-item-hover: #f0f0f3;
  --ap-nav-item-active: rgba(62, 99, 221, 0.08);
  --ap-table-header-bg:  #f9f9fb;
  --ap-table-row-hover:  #f0f0f3;
  --ap-table-border:     #e8e8ec;
  /* Worklist urgency row colors — green → yellow → orange → red progression */
  --ap-row-1: #c8e6c9;
  --ap-row-2: #f0f4c3;
  --ap-row-3: #fff9c4;
  --ap-row-4: #ffe0b2;
  --ap-row-5: #ffccbc;
  --ap-row-6: #f8bbd0;
  --ap-row-7: #ef9a9a;
  color-scheme: light;
}

[data-ui-theme="slate"] {
  /* Second dark option: blue-gray slate surfaces + teal accent. Lifted
     off pure black (unlike "dark") so long reading sessions feel softer
     while staying low-glare. */
  --ap-bg:             #161b22;
  --ap-surface:        #1c232c;
  --ap-surface-2:      #232b36;
  --ap-surface-hover:  #2a3340;
  --ap-border:         #2f3a47;
  --ap-border-hover:   #3f4c5c;
  --ap-text-primary:   #e2e8f0;
  --ap-text-secondary: #94a3b8;
  --ap-text-muted:     #64748b;
  --ap-accent:         #14b8a6;
  --ap-accent-hover:   #2dd4bf;
  --ap-accent-glow:    rgba(20, 184, 166, 0.18);
  /* Teal is a light accent — white text on it is only 2.5:1. Needs ink. */
  --ap-on-accent:      #0a0a0f;
  --ap-on-accent-hover: #0a0a0f;
  --ap-success:        #4ade80;
  --ap-warning:        #fbbf24;
  --ap-error:          #f87171;
  --ap-info:           #38bdf8;
  --ap-on-success:     #0a0a0f;
  --ap-on-warning:     #0a0a0f;
  --ap-on-error:       #0a0a0f;
  --ap-on-info:        #0a0a0f;
  --ap-nav-bg:         #12171e;
  --ap-nav-border:     #232b36;
  --ap-nav-item-hover: #232b36;
  --ap-nav-item-active: rgba(20, 184, 166, 0.14);
  --ap-table-header-bg:  #1a2029;
  --ap-table-row-hover:  #252e3a;
  --ap-table-border:     #29333f;
  /* Worklist urgency ramp — same green → amber → red progression as dark,
     tuned to sit on the slate bg */
  --ap-row-1: #16322a;
  --ap-row-2: #2e2b12;
  --ap-row-3: #3d2e10;
  --ap-row-4: #4a3212;
  --ap-row-5: #4d1c26;
  --ap-row-6: #5c2029;
  --ap-row-7: #6d2a32;
  color-scheme: dark;
}

[data-ui-theme="reading"] {
  /* Reading Room: warm, dim dark theme for darkened reading rooms.
     Charcoal-brown surfaces and amber accent keep blue light and glare
     low next to diagnostic monitors; text is warm off-white, not pure
     white, to reduce halation. */
  --ap-bg:             #14110e;
  --ap-surface:        #1c1814;
  --ap-surface-2:      #241f1a;
  --ap-surface-hover:  #2b251f;
  --ap-border:         #332c25;
  --ap-border-hover:   #453c32;
  --ap-text-primary:   #e8dfd2;
  --ap-text-secondary: #a89a88;
  --ap-text-muted:     #75695b;
  --ap-accent:         #d9913d;
  --ap-accent-hover:   #e8a656;
  --ap-accent-glow:    rgba(217, 145, 61, 0.18);
  /* Amber is a light accent — white text on it is only 2.6:1. Needs ink. */
  --ap-on-accent:      #0a0a0f;
  --ap-on-accent-hover: #0a0a0f;
  --ap-success:        #8fbf6a;
  --ap-warning:        #e0b04a;
  --ap-error:          #e07a62;
  --ap-info:           #c9a27a;
  --ap-on-success:     #0a0a0f;
  --ap-on-warning:     #0a0a0f;
  --ap-on-error:       #0a0a0f;
  --ap-on-info:        #0a0a0f;
  --ap-nav-bg:         #110e0c;
  --ap-nav-border:     #241f1a;
  --ap-nav-item-hover: #241f1a;
  --ap-nav-item-active: rgba(217, 145, 61, 0.14);
  --ap-table-header-bg:  #1a1612;
  --ap-table-row-hover:  #2a241e;
  --ap-table-border:     #2e2721;
  /* Worklist urgency ramp — warm olive → amber → rust, dim enough not to
     glow in a dark room */
  --ap-row-1: #1f2716;
  --ap-row-2: #2e2a12;
  --ap-row-3: #3a2c10;
  --ap-row-4: #452f12;
  --ap-row-5: #4a1f16;
  --ap-row-6: #58231a;
  --ap-row-7: #682a1f;
  color-scheme: dark;
}

[data-ui-theme="calm"] {
  --ap-bg:             #f6f5f2;
  --ap-surface:        #fdfcfa;
  --ap-surface-2:      #efeee9;
  --ap-surface-hover:  #e7e5df;
  --ap-border:         #dedcd4;
  --ap-border-hover:   #c9c6ba;
  --ap-text-primary:   #2e2d29;
  --ap-text-secondary: #6b6a62;
  --ap-text-muted:     #9b998e;
  --ap-accent:         #5b7a8c;
  --ap-accent-hover:   #4c6a7b;
  --ap-accent-glow:    rgba(91, 122, 140, 0.12);
  --ap-on-accent:      #ffffff;
  --ap-on-accent-hover: #ffffff;
  --ap-success:        #5c8a6e;
  --ap-warning:        #a98456;
  --ap-error:          #b06a5c;
  --ap-info:           #5b7a8c;
  --ap-on-success:     #0a0a0f;
  --ap-on-warning:     #0a0a0f;
  --ap-on-error:       #0a0a0f;
  --ap-on-info:        #ffffff;
  --ap-nav-bg:         #fdfcfa;
  --ap-nav-border:     #e7e5df;
  --ap-nav-item-hover: #efeee9;
  --ap-nav-item-active: rgba(91, 122, 140, 0.10);
  --ap-table-header-bg:  #efeee9;
  --ap-table-row-hover:  #e7e5df;
  --ap-table-border:     #e3e1da;
  /* Worklist urgency ramp — low-chroma until a study is actually aging out,
     then saturation steps up for buckets 6-7 so overdue studies still pop */
  --ap-row-1: #f2f1ec;
  --ap-row-2: #ece9e0;
  --ap-row-3: #e6e1d3;
  --ap-row-4: #e0d9c4;
  --ap-row-5: #dccbab;
  --ap-row-6: #d9a875;
  --ap-row-7: #c97b5c;
  color-scheme: light;
}

[data-ui-theme="avr"] {
  /* Outer page bg #618BCB from atn_tracknbill.css (loads after Styles.css'
     white body rule, wins on source order) — the blue visible around the
     centered white content in the original. Banner bg #A5C6BE from the
     worklist.aspx tab-bar row's bgcolor attribute. Accent #3366CC from the
     site's actual a:link rule (atn.css / atn_tracknbill.css), not the
     .linkColor helper class used elsewhere in their stylesheet. */
  --ap-bg:             #618bcb;
  --ap-surface:        #f7f9fb;
  --ap-surface-2:      #dbebff;
  --ap-surface-hover:  #eaf3ff;
  --ap-border:         #9bb6dd;
  --ap-border-hover:   #7fa0cc;
  --ap-text-primary:   #000000;
  --ap-text-secondary: #6e6e6e;
  --ap-text-muted:     #999999;
  --ap-accent:         #3366cc;
  --ap-accent-hover:   #274d99;
  --ap-accent-glow:    rgba(51, 102, 204, 0.15);
  --ap-on-accent:      #ffffff;
  --ap-on-accent-hover: #ffffff;
  --ap-success:        #008000;
  --ap-warning:        #ffa500;
  --ap-error:          #ff0000;
  --ap-info:           #6699cc;
  --ap-on-success:     #ffffff;
  --ap-on-warning:     #0a0a0f;
  --ap-on-error:       #0a0a0f;
  --ap-on-info:        #0a0a0f;
  --ap-nav-bg:         #a5c6be;
  --ap-nav-border:     #8faa9f;
  --ap-nav-item-hover: #b7d2c9;
  --ap-nav-item-active: rgba(0, 0, 0, 0.08);
  --ap-table-header-bg:  #dbebff;
  --ap-table-row-hover:  #eaf3ff;
  --ap-table-border:     #9bb6dd;
  /* Worklist urgency ramp — copied from AVR's real StudyDelayFive/Ten/Fifteen
     classes (white -> pale yellow -> orange -> salmon-red). AVR's own CSS
     never defined tiers past "Fifteen", so buckets 5-7 are extrapolated by
     continuing to deepen the red rather than copying their decorative
     escalation-bar legend, which cycles back to green/yellow-green after
     red — that would read as "improving," the opposite of what an aging
     ramp should signal. */
  --ap-row-1: #ffffff;
  --ap-row-2: #ffffbb;
  --ap-row-3: #ffcc66;
  --ap-row-4: #f5a394;
  --ap-row-5: #ee8577;
  --ap-row-6: #e56354;
  --ap-row-7: #d6402e;
  color-scheme: light;
}

[data-ui-theme="fav-team"] {
  /* Fav Team: placeholder palette. The real values are injected at runtime by
     templates/js/fav-team-theme.js as inline custom properties on
     <html> (inline style beats any stylesheet rule, so this block never wins
     once the palette is applied).

     This block exists for two reasons:
       1. Pre-hydration fallback. The palette normally paints from a
          localStorage cache in the pre-paint inline script; if that cache is
          empty or stale the user sees this instead of a flash of unstyled or
          stock-Bootstrap UI. These are the :root dark values verbatim, so the
          failure mode is "plain dark" rather than "broken".
       2. tests/test_app_theme_css.py walks every theme in its THEMES list and
          asserts the full token set plus 4.5:1 accent contrast. Keeping the
          block real means that enforcement covers fav-team too.

     Do not hand-tune these to look like a specific team. Team palettes are
     derived in utils/team_themes.py and owned by team_themes.json. */
  --ap-bg:             #0a0a0f;
  --ap-surface:        #13131a;
  --ap-surface-2:      #1a1a24;
  --ap-surface-hover:  #1e1e2a;
  --ap-border:         #222230;
  --ap-border-hover:   #333345;
  --ap-text-primary:   #ececf1;
  --ap-text-secondary: #8585a0;
  --ap-text-muted:     #55556a;
  --ap-accent:         #6265f1;
  --ap-accent-hover:   #818cf8;
  --ap-accent-glow:    rgba(98, 101, 241, 0.15);
  --ap-on-accent:      #ffffff;
  --ap-on-accent-hover: #0a0a0f;
  --ap-success:        #34d399;
  --ap-warning:        #fbbf24;
  --ap-error:          #f87171;
  --ap-info:           #60a5fa;
  --ap-on-success:     #0a0a0f;
  --ap-on-warning:     #0a0a0f;
  --ap-on-error:       #0a0a0f;
  --ap-on-info:        #0a0a0f;
  --ap-nav-bg:         #0d0d14;
  --ap-nav-border:     #1a1a28;
  --ap-nav-item-hover: #1a1a24;
  --ap-nav-item-active: rgba(99, 102, 241, 0.12);
  --ap-table-header-bg:  #111118;
  --ap-table-row-hover:  #1a1a24;
  --ap-table-border:     #1e1e2c;
  --ap-row-1: #132d21;
  --ap-row-2: #2d2305;
  --ap-row-3: #3f2700;
  --ap-row-4: #4d3000;
  --ap-row-5: #500f1c;
  --ap-row-6: #611623;
  --ap-row-7: #72232d;
  color-scheme: dark;
}

/* Two-stop team gradient chip shown on the Fav Team picker button. Several
   teams share a near-identical primary (three NFL teams are all dark navy), so
   the chip — not the chrome — is the primary identity signal in the picker. */
.ap-team-chip {
  display: inline-block;
  width: 14px;
  height: 4px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* Favorite-team crest, left of the theme switcher (nav include, opt-in pages).
   The light disc is not decoration: Bears, Seahawks and Cowboys are all dark
   navy and would vanish straight into a dark nav bar. A fixed pale plate reads
   the same in every theme, so one asset per team covers all of them. */
.ap-team-logo-slot {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.ap-team-logo-slot[hidden] {
  display: none;
}

.ap-team-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* ── Muted/hint text — overrides Bootstrap .text-muted ──── */
.text-muted,
.ap-text-hint {
  color: var(--ap-text-secondary) !important;
}

/* ── Base page ───────────────────────────────────────────── */
html, body {
  background: var(--ap-bg);
  color: var(--ap-text-primary);
  font-family: var(--ap-font);
}

a {
  color: var(--ap-accent);
  text-decoration: none;
}
a:hover {
  color: var(--ap-accent-hover);
}

/* ── Header / Nav ────────────────────────────────────────── */
.header {
  background: var(--ap-nav-bg);
  border-bottom: 1px solid var(--ap-nav-border);
  color: var(--ap-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 20px;
}

.header-left,
.header-actions,
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions {
  margin-left: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a,
.nav-links .dropdown-toggle {
  color: var(--ap-text-secondary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.nav-links a:hover,
.nav-links .dropdown-toggle:hover {
  background: var(--ap-nav-item-hover);
  color: var(--ap-text-primary);
}

.nav-links a.active {
  background: var(--ap-nav-item-active);
  color: var(--ap-accent);
}

/* Nav dropdown */
.nav-links .dropdown-menu {
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
}

.nav-links .dropdown-menu .dropdown-item {
  color: var(--ap-text-primary);
}

.nav-links .dropdown-menu .dropdown-item:hover {
  background: var(--ap-surface-hover);
  color: var(--ap-text-primary);
}

/* AVR's nav banner is a colored sage-green bg (not a near-neutral surface
   like the other themes), so the shared secondary-gray nav text falls
   short of readable contrast on it. Using a darker shade of the same
   green (not flat black) keeps it in the same color family as the
   banner — active page still stands out via var(--ap-accent) blue. */
[data-ui-theme="avr"] .nav-links a,
[data-ui-theme="avr"] .nav-links .dropdown-toggle,
[data-ui-theme="avr"] #username,
[data-ui-theme="avr"] #userMenu {
  color: #2f4a42;
}

[data-ui-theme="avr"] .nav-links a:hover,
[data-ui-theme="avr"] .nav-links .dropdown-toggle:hover {
  color: #1e332e;
}

/* Page heading: deep blue instead of flat black, ties to the theme's
   link/accent blue rather than reading as plain default text. */
[data-ui-theme="avr"] h1 {
  color: #1a3d73;
}

/* Logo: pink SVG → white in dark, black in light */
.logo img {
  filter: brightness(0) invert(1);
  height: 21px;
  width: auto;
}

[data-ui-theme="light"] .logo img,
[data-ui-theme="calm"] .logo img,
[data-ui-theme="avr"] .logo img {
  filter: brightness(0);
}

/* Username label */
#username {
  color: var(--ap-text-secondary);
  font-size: 14px;
}

/* User menu button */
#userMenu {
  color: var(--ap-text-secondary);
  border-color: var(--ap-border);
  background: transparent;
}

#userMenu:hover, #userMenu.show {
  background: var(--ap-surface-hover);
  color: var(--ap-text-primary);
  border-color: var(--ap-border-hover);
}

/* User dropdown */
.user-info .dropdown-menu {
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.user-info .dropdown-menu .dropdown-item {
  color: var(--ap-text-primary);
}

.user-info .dropdown-menu .dropdown-item:hover {
  background: var(--ap-surface-hover);
  color: var(--ap-text-primary);
}

.user-info .dropdown-menu .dropdown-divider {
  border-color: var(--ap-border);
}

/* ── Form controls ───────────────────────────────────────── */
.form-control,
.form-select,
.form-control:disabled,
.form-select:disabled {
  background: var(--ap-surface);
  border-color: var(--ap-border);
  color: var(--ap-text-primary);
}

.form-control:focus,
.form-select:focus {
  background: var(--ap-surface);
  border-color: var(--ap-accent);
  color: var(--ap-text-primary);
  box-shadow: 0 0 0 3px var(--ap-accent-glow);
  outline: none;
}

.form-control::placeholder {
  color: var(--ap-text-muted);
}

.form-label {
  color: var(--ap-text-secondary);
  font-size: 14px;
}

/* ── Depth / shadows for light mode ─────────────────────── */
[data-ui-theme="light"] .header {
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  border-bottom: none;
}

[data-ui-theme="light"] .card {
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  border: none;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--ap-surface);
  border-color: var(--ap-border);
  color: var(--ap-text-primary);
}

/* ── Modal ───────────────────────────────────────────────── */
.modal-content {
  background: var(--ap-surface);
  border-color: var(--ap-border);
  color: var(--ap-text-primary);
}

.modal-header {
  background: var(--ap-surface-2);
  border-bottom-color: var(--ap-border);
}

.modal-footer {
  background: var(--ap-surface-2);
  border-top-color: var(--ap-border);
}

.modal-header .btn-close {
  filter: var(--ap-btn-close-filter, none);
}

/* invert close button in dark mode */
:root {
  --ap-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}
[data-ui-theme="light"] {
  --ap-btn-close-filter: none;
}

/* ── Alerts — override Bootstrap defaults for dark mode ── */
.alert {
  border: 1px solid;
}

.alert-success {
  background: rgba(52,211,153,0.10);
  border-color: rgba(52,211,153,0.25);
  color: var(--ap-success);
}
.alert-info {
  background: rgba(96,165,250,0.10);
  border-color: rgba(96,165,250,0.25);
  color: var(--ap-info);
}
.alert-warning {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.25);
  color: var(--ap-warning);
}
.alert-danger {
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.25);
  color: var(--ap-error);
}
.alert-heading { color: inherit; }
.alert strong { color: inherit; }

/* Light: Radix semantic filled variants */
[data-ui-theme="light"] .alert-success {
  background: #e6f6eb; border-color: #adddc0; color: #218358;
}
[data-ui-theme="light"] .alert-info {
  background: #e6f4fe; border-color: #acd8fc; color: #0d74ce;
}
[data-ui-theme="light"] .alert-warning {
  background: #fff7c2; border-color: #f3d673; color: #ab6400;
}
[data-ui-theme="light"] .alert-danger {
  background: #feebec; border-color: #f4a9aa; color: #ce2c31;
}

/* ── Badges ───────────────────────────────────────────────── */
.badge.bg-secondary, .badge.bg-light {
  background: var(--ap-surface-2) !important;
  color: var(--ap-text-secondary) !important;
  border: 1px solid var(--ap-border);
}
.badge.bg-dark {
  background: var(--ap-surface) !important;
  color: var(--ap-text-primary) !important;
  border: 1px solid var(--ap-border);
}
.badge-report-prelim {
  background: #fff0c2;
  color: #7a4800;
  border: 1px solid #e9b44c;
  font-weight: 600;
}
.badge-report-final {
  background: #d6f5e3;
  color: #1a6b3a;
  border: 1px solid #4cba7a;
  font-weight: 600;
}
[data-ui-theme="dark"] .badge-report-prelim {
  background: #3d2e00;
  color: #ffd97d;
  border-color: #8a6200;
}
[data-ui-theme="dark"] .badge-report-final {
  background: #0d2e1a;
  color: #6ee7a0;
  border-color: #1e6640;
}
[data-ui-theme="slate"] .badge-report-prelim {
  background: #3a2f0b;
  color: #fcd34d;
  border-color: #856a1a;
}
[data-ui-theme="slate"] .badge-report-final {
  background: #0f3029;
  color: #5eead4;
  border-color: #1f6f60;
}
[data-ui-theme="reading"] .badge-report-prelim {
  background: #3a2c0f;
  color: #f0c46a;
  border-color: #7d5f1f;
}
[data-ui-theme="reading"] .badge-report-final {
  background: #1f2a16;
  color: #a9d48a;
  border-color: #4a6a33;
}
[data-ui-theme="calm"] .badge-report-prelim {
  background: var(--ap-surface-2);
  color: var(--ap-warning);
  border-color: var(--ap-border);
}
[data-ui-theme="calm"] .badge-report-final {
  background: var(--ap-surface-2);
  color: var(--ap-success);
  border-color: var(--ap-border);
}
  /* AVR: the Prelim/Final tags keep AVR's uppercase weight and font color,
     but for AVR theme only, the box/background is removed (no pill) to match
     what the user wants on the worklist. The color is preserved. */
  [data-ui-theme="avr"] .badge-report-prelim {
    background: transparent;
    color: #6b3f00;
    border: none;
  }
  [data-ui-theme="avr"] .badge-report-final {
    background: transparent;
    color: #155c31;
    border: none;
  }
[data-ui-theme="avr"] .badge-report-prelim,
[data-ui-theme="avr"] .badge-report-final {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── Tables ───────────────────────────────────────────────── */
.table {
  color: var(--ap-text-primary);
  border-color: var(--ap-table-border);
}
.table > :not(caption) > * > * {
  color: var(--ap-text-primary);
  background: transparent;
  border-color: var(--ap-table-border);
}
.table thead th {
  background: var(--ap-table-header-bg);
  color: var(--ap-text-secondary);
  border-color: var(--ap-table-border);
}
.table tbody tr:hover > * {
  background: var(--ap-table-row-hover);
  color: var(--ap-text-primary);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: var(--ap-surface-2);
  color: var(--ap-text-primary);
}

/* ── Input group text ─────────────────────────────────────── */
.input-group-text {
  background: var(--ap-surface-2);
  border-color: var(--ap-border);
  color: var(--ap-text-secondary);
}

/* ── Dropdown (global) ────────────────────────────────────── */
.dropdown-menu {
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
[data-ui-theme="light"] .dropdown-menu {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}
.dropdown-item {
  color: var(--ap-text-primary);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--ap-surface-hover);
  color: var(--ap-text-primary);
}
.dropdown-divider {
  border-color: var(--ap-border);
}

/* ── List group ───────────────────────────────────────────── */
.list-group-item {
  background: var(--ap-surface);
  border-color: var(--ap-border);
  color: var(--ap-text-primary);
}
.list-group-item:hover {
  background: var(--ap-surface-hover);
}
.list-group-item.active {
  background: var(--ap-accent);
  border-color: var(--ap-accent);
}

/* ── hr ───────────────────────────────────────────────────── */
hr {
  border-color: var(--ap-border);
  opacity: 1;
}

/* ── Two-way theme pill toggle */
.ap-theme-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}

[data-ui-theme="light"] .ap-theme-pill,
[data-ui-theme="calm"] .ap-theme-pill,
[data-ui-theme="avr"] .ap-theme-pill {
  border-color: var(--ap-border);
  background: var(--ap-surface);
}

.ap-theme-pill-btn {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.55);
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

[data-ui-theme="light"] .ap-theme-pill-btn,
[data-ui-theme="calm"] .ap-theme-pill-btn,
[data-ui-theme="avr"] .ap-theme-pill-btn {
  color: var(--ap-text-secondary);
}

.ap-theme-pill-btn:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}

[data-ui-theme="light"] .ap-theme-pill-btn:hover,
[data-ui-theme="calm"] .ap-theme-pill-btn:hover,
[data-ui-theme="avr"] .ap-theme-pill-btn:hover {
  background: var(--ap-surface-hover);
  color: var(--ap-text-primary);
}

.ap-theme-pill-btn.active {
  background: rgba(99,102,241,0.35);
  color: #ffffff;
}

[data-ui-theme="slate"] .ap-theme-pill-btn.active {
  background: rgba(20,184,166,0.35);
}

[data-ui-theme="reading"] .ap-theme-pill-btn.active {
  background: rgba(217,145,61,0.35);
}

[data-ui-theme="light"] .ap-theme-pill-btn.active,
[data-ui-theme="calm"] .ap-theme-pill-btn.active,
[data-ui-theme="avr"] .ap-theme-pill-btn.active {
  background: var(--ap-accent);
  color: #ffffff;
}

/* ── Cross-theme aliases for --success-accent/-text/-border etc ──
   report-create-flair.html references these but nothing ever defined
   them (dead vars in every theme, not just calm) — map to the ap-*
   scale so they resolve per active theme. */
:root {
  --success-accent: var(--ap-success);
  --success-text:   var(--ap-success);
  --success-border: var(--ap-success);
  --warning-accent: var(--ap-warning);
  --warning-text:   var(--ap-warning);
  --warning-border: var(--ap-warning);
  --info-accent:    var(--ap-info);
  --info-text:      var(--ap-info);
  --info-border:    var(--ap-info);
}

/* ══════════════════════════════════════════════════════════════
   Bootstrap component theming — all themes
   ══════════════════════════════════════════════════════════════
   Bootstrap resolves every button/control colour from --bs-btn-*
   and --bs-* custom properties. Any state left undeclared falls
   back to stock Bootstrap, which is blue for "primary" (#0d6efd,
   #0a58ca active, #3184fd focus ring) regardless of theme. Every
   state below is therefore declared explicitly.

   Foreground colour comes from the --ap-on-* tokens rather than a
   hardcoded #fff: slate's teal and reading's amber are light accents
   where white text is only ~2.5:1, so they need ink instead. */

/* ── .btn-primary ─────────────────────────────────────────── */
.btn-primary {
  background-color: var(--ap-accent);
  border-color: var(--ap-accent);
  color: var(--ap-on-accent);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus {
  background-color: var(--ap-accent-hover);
  border-color: var(--ap-accent-hover);
  color: var(--ap-on-accent-hover);
}
.btn-primary:focus,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 .25rem var(--ap-accent-glow);
}
/* Disabled must not recolour to Bootstrap blue — the report pages flip
   the button to disabled + "Submitting..." on submit, which is exactly
   when it is on screen and most visible. */
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary:disabled:hover,
.btn-primary:disabled:focus,
fieldset:disabled .btn-primary {
  background-color: var(--ap-accent);
  border-color: var(--ap-accent);
  color: var(--ap-on-accent);
  opacity: .6;
  box-shadow: none;
}
.btn-outline-primary { color: var(--ap-accent); border-color: var(--ap-accent); }
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--ap-accent);
  border-color: var(--ap-accent);
  color: var(--ap-on-accent);
}
.btn-outline-primary:focus { box-shadow: 0 0 0 .25rem var(--ap-accent-glow); }
.btn-outline-primary:disabled,
.btn-outline-primary.disabled { color: var(--ap-accent); border-color: var(--ap-accent); opacity: .6; }

/* ── .btn-link (unstyled accent-coloured button) ──────────── */
.btn-link { color: var(--ap-accent); }
.btn-link:hover,
.btn-link:focus { color: var(--ap-accent-hover); }
.btn-link:focus { box-shadow: none; }

/* ── .btn-secondary ─────────────────────────────────────────
   Bootstrap's #6c757d is a fixed gray that reads muddy on dark
   surfaces and washed-out on calm/avr. */
.btn-secondary {
  background-color: var(--ap-surface-2);
  border-color: var(--ap-border-hover);
  color: var(--ap-text-primary);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--ap-surface-hover);
  border-color: var(--ap-border-hover);
  color: var(--ap-text-primary);
}
.btn-secondary:focus { box-shadow: 0 0 0 .25rem var(--ap-accent-glow); }
.btn-secondary:disabled,
.btn-secondary.disabled { background-color: var(--ap-surface-2); border-color: var(--ap-border-hover); color: var(--ap-text-primary); opacity: .6; }
.btn-outline-secondary { color: var(--ap-text-secondary); border-color: var(--ap-border-hover); }
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background-color: var(--ap-text-secondary);
  border-color: var(--ap-text-secondary);
  color: var(--ap-on-accent);
}

/* ── Status buttons — themed in every theme, not just calm ───
   Previously only [data-ui-theme="calm"] overrode these, leaving
   slate/reading/dark showing saturated Bootstrap green/red/yellow
   next to their own muted palettes. */
.btn-success {
  background-color: var(--ap-success);
  border-color: var(--ap-success);
  color: var(--ap-on-success);
}
.btn-danger {
  background-color: var(--ap-error);
  border-color: var(--ap-error);
  color: var(--ap-on-error);
}
.btn-warning {
  background-color: var(--ap-warning);
  border-color: var(--ap-warning);
  color: var(--ap-on-warning);
}
.btn-info {
  background-color: var(--ap-info);
  border-color: var(--ap-info);
  color: var(--ap-on-info);
}
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-danger:hover,  .btn-danger:focus,  .btn-danger:active,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active,
.btn-info:hover,    .btn-info:focus,    .btn-info:active {
  filter: brightness(0.92);
  color: inherit;
}
.btn-success:focus, .btn-danger:focus, .btn-warning:focus, .btn-info:focus {
  box-shadow: 0 0 0 .25rem var(--ap-accent-glow);
}
.btn-success:disabled, .btn-success.disabled,
.btn-danger:disabled,  .btn-danger.disabled,
.btn-warning:disabled, .btn-warning.disabled,
.btn-info:disabled,    .btn-info.disabled { opacity: .6; filter: none; }

.btn-outline-success { color: var(--ap-success); border-color: var(--ap-success); }
.btn-outline-danger  { color: var(--ap-error);   border-color: var(--ap-error); }
.btn-outline-warning { color: var(--ap-warning); border-color: var(--ap-warning); }
.btn-outline-info    { color: var(--ap-info);    border-color: var(--ap-info); }
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active { background-color: var(--ap-success); border-color: var(--ap-success); color: var(--ap-on-success); }
.btn-outline-danger:hover,  .btn-outline-danger:focus,  .btn-outline-danger:active  { background-color: var(--ap-error);   border-color: var(--ap-error);   color: var(--ap-on-error); }
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active { background-color: var(--ap-warning); border-color: var(--ap-warning); color: var(--ap-on-warning); }
.btn-outline-info:hover,    .btn-outline-info:focus,    .btn-outline-info:active    { background-color: var(--ap-info);    border-color: var(--ap-info);    color: var(--ap-on-info); }

/* ── .btn-doc-link ──────────────────────────────────────────────
   Tertiary action: opens a guide or reference in a new tab.
   These were previously a mix of .btn-outline-info and
   .btn-outline-success, which rendered a blue button and a green
   button side by side for the same action and implied a state
   distinction (info vs. success) that does not exist.

   Deliberately neutral so it never competes with the team accent or
   with the status colours that carry real meaning on this page (green
   = armed/ready on the dictation buttons, amber = busy, grey =
   disabled). Picks up the team accent on hover only. */
.btn-doc-link { color: var(--ap-text-secondary); border-color: var(--ap-text-secondary); }
.btn-doc-link:hover,
.btn-doc-link:focus,
.btn-doc-link:active {
  background-color: var(--ap-accent-glow);
  border-color: var(--ap-accent);
  color: var(--ap-accent);
}
.btn-doc-link:focus { box-shadow: 0 0 0 .25rem var(--ap-accent-glow); }

/* ── Bootstrap "primary" utility + component classes ─────────
   These all hardcode --bs-primary (#0d6efd) and appear throughout
   the report pages: .text-primary on the finding edit pencils,
   .bg-primary on the "Submitted" status badge, .nav-tabs on the
   study tab strip, .form-switch on the transcribe toggles. */
.text-primary,
.text-primary:hover,
.text-bg-primary,
.link-primary {
  color: var(--ap-accent) !important;
}
.bg-primary { background-color: var(--ap-accent) !important; border-color: var(--ap-accent) !important; }
.border-primary { border-color: var(--ap-accent) !important; }
.badge.bg-primary,
.text-bg-primary { color: var(--ap-on-accent) !important; }
.alert-primary { background: var(--ap-accent-glow); border-color: var(--ap-accent); color: var(--ap-text-primary); }
.alert-primary .alert-link { color: var(--ap-accent); }

.nav-tabs { border-bottom-color: var(--ap-border); }
.nav-tabs .nav-link {
  color: var(--ap-text-secondary);
  border-color: transparent;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--ap-accent);
  border-color: var(--ap-border) var(--ap-border) var(--ap-surface);
  background: var(--ap-surface);
  outline: none;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--ap-accent);
  background: var(--ap-surface);
  border-color: var(--ap-border) var(--ap-border) var(--ap-surface);
}
.nav-pills .nav-link.active,
.dropdown-item.active {
  background-color: var(--ap-accent);
  color: var(--ap-on-accent);
}

/* Checkboxes / radios / switches — Bootstrap tints the checked
   state blue. The report pages have four of these. */
.form-check-input {
  background-color: var(--ap-surface-2);
  border-color: var(--ap-border-hover);
}
.form-check-input:checked,
.form-check-input[type="checkbox"]:checked,
.form-check-input[type="radio"]:checked,
.form-check-input:focus,
.form-check-input:hover {
  background-color: var(--ap-accent);
  border-color: var(--ap-accent);
  box-shadow: none;
}
.form-check-input:focus-visible { box-shadow: 0 0 0 .25rem var(--ap-accent-glow); }
.form-switch .form-check-input:checked {
  background-color: var(--ap-accent);
  border-color: var(--ap-accent);
}

/* Pagination / accordion / progress / active table rows */
.page-link {
  color: var(--ap-accent);
  background-color: var(--ap-surface);
  border-color: var(--ap-border);
}
.page-link:hover { color: var(--ap-accent-hover); background: var(--ap-surface-hover); border-color: var(--ap-border-hover); }
.page-item.active .page-link { background-color: var(--ap-accent); border-color: var(--ap-accent); color: var(--ap-on-accent); }
.page-item.disabled .page-link { color: var(--ap-text-muted); background: var(--ap-surface-2); border-color: var(--ap-border); }

.accordion-button { background: var(--ap-surface-2); color: var(--ap-text-primary); box-shadow: none; }
.accordion-button:not(.collapsed) { background: var(--ap-accent-glow); color: var(--ap-accent); box-shadow: none; }
.accordion-button:focus { border-color: var(--ap-accent); box-shadow: 0 0 0 .25rem var(--ap-accent-glow); }
.accordion-item { background: var(--ap-surface); border-color: var(--ap-border); }
.accordion-body { background: var(--ap-surface); color: var(--ap-text-primary); }

.progress { background-color: var(--ap-surface-2); }
.progress-bar { background-color: var(--ap-accent); color: var(--ap-on-accent); }

.table > :not(caption) > * > *.active,
.table > :not(caption) > * > *.active > * {
  background-color: var(--ap-accent-glow);
  color: var(--ap-text-primary);
}

/* ── Calm theme: remaining Bootstrap de-saturation ───────────
   calm's whole point is low-chroma; these cover the alert
   surfaces that still carried stock Bootstrap fills. */
[data-ui-theme="calm"] .alert-success { background: var(--ap-surface); border-color: var(--ap-success); color: var(--ap-text-primary); }
[data-ui-theme="calm"] .alert-danger  { background: var(--ap-surface); border-color: var(--ap-error);   color: var(--ap-text-primary); }
[data-ui-theme="calm"] .alert-warning { background: var(--ap-surface); border-color: var(--ap-warning); color: var(--ap-text-primary); }
[data-ui-theme="calm"] .alert-info    { background: var(--ap-surface); border-color: var(--ap-info);    color: var(--ap-text-primary); }
[data-ui-theme="calm"] .alert-success .alert-link { color: var(--ap-success); }
[data-ui-theme="calm"] .alert-danger  .alert-link { color: var(--ap-error); }
[data-ui-theme="calm"] .alert-warning .alert-link { color: var(--ap-warning); }
[data-ui-theme="calm"] .alert-info    .alert-link { color: var(--ap-info); }

/* ── Text selection ───────────────────────────────────────── */
::selection {
  background: var(--ap-accent-glow);
  color: var(--ap-text-primary);
}