/* ============================================================
   Quantum Capital Group – 360 Review System
   Dark Theme CSS  (layered on Bootstrap 5)
   ============================================================ */

/* ── Brand colours ─────────────────────────────────────────── */
/* Applied to both :root and [data-bs-theme=dark] so Bootstrap 5.3's
   dark-mode scoping picks up our exact palette. */
:root,
[data-bs-theme="dark"] {
  --navy:        #1a3a5c;
  --navy-dark:   #0a1829;
  --navy-mid:    #0f2236;
  --navy-card:   #0f2236;
  --navy-header: #162840;
  --navy-border: #1e3d5c;
  --navy-light:  #2a5080;
  --gold:        #c9a84c;
  --gold-light:  #e8c96a;
  --text-primary: #d0dde8;
  --text-muted:   #8ab4d4;   /* ~7.3:1 on cards — passes WCAG AA */
  --text-faint:   #7c9fc0;   /* was #4a7090 (3.1:1, failed AA); now ~5.8:1 */

  /* ── Override Bootstrap 5 CSS variables for dark theme ───── */
  --bs-body-bg:            #0a1829;
  --bs-body-color:         #d0dde8;
  --bs-secondary-bg:       #0d1f30;
  --bs-tertiary-bg:        #162840;
  --bs-card-bg:            #0f2236;
  --bs-card-cap-bg:        #162840;
  --bs-card-border-color:  #1e3d5c;
  --bs-border-color:       #1e3d5c;
  --bs-border-color-translucent: rgba(30,61,92,.6);
  --bs-dropdown-bg:        #0c1e30;
  --bs-dropdown-color:     #b0c8de;
  --bs-dropdown-border-color: #1e3d5c;
  --bs-dropdown-link-color: #b0c8de;
  --bs-dropdown-link-hover-bg: #162840;
  --bs-dropdown-link-hover-color: #fff;
  --bs-modal-bg:           #0f2236;
  --bs-modal-header-border-color: #1e3d5c;
  --bs-modal-footer-border-color: #1e3d5c;
  --bs-table-bg:           transparent;
  --bs-table-striped-bg:   rgba(255,255,255,.03);
  --bs-table-hover-bg:     rgba(255,255,255,.04);
  --bs-table-border-color: #1a2f45;
  --bs-table-color:        #d0dde8;
  --bs-input-bg:           #0d1f30;
  --bs-input-border-color: #2e5077;
  --bs-input-color:        #d0dde8;
  --bs-input-focus-border-color: #c9a84c;
  --bs-form-select-bg:     #0d1f30;
  --bs-list-group-bg:      #0f2236;
  --bs-list-group-border-color: #1e3d5c;
  --bs-list-group-action-hover-bg: #162840;
  --bs-nav-tabs-border-color: #1e3d5c;
  --bs-nav-tabs-link-active-bg: #0f2236;
  --bs-nav-tabs-link-active-border-color: #1e3d5c;
  --bs-nav-link-color:     #8ab4d4;
  --bs-nav-link-hover-color: #fff;
  --bs-pagination-bg:      #0f2236;
  --bs-pagination-border-color: #1e3d5c;
  --bs-pagination-color:   #8ab4d4;
  --bs-pagination-hover-bg: #162840;
  --bs-pagination-hover-color: #fff;
  --bs-progress-bg:        #1a2f45;
  --bs-code-color:         #c9a84c;
  /* Heading color token — Bootstrap 5.3 respects this in dark mode */
  --bs-heading-color:      #d0dde8;
  --bs-emphasis-color:     #d0dde8;
  --bs-link-color:         #8ab4d4;
  --bs-link-hover-color:   #c9a84c;

  /* ── Structural tokens for inline-style theming ──────────────
     These mirror the hex values used inline across the templates.
     In dark mode they resolve to the exact original colours (so the
     dark theme is unchanged); the [data-theme="light"] block below
     remaps them to a designed light palette. Templates reference
     these via var(--qc-*) in their inline style="" declarations. */
  --qc-bg:          #0a1829;   /* page / deepest inset background      */
  --qc-surface:     #0f2236;   /* cards & primary panels               */
  --qc-surface-2:   #0d1f30;   /* secondary surface                    */
  --qc-surface-3:   #162840;   /* headers / raised insets              */
  --qc-surface-4:   #0c1c2e;   /* totals / emphasis rows               */
  --qc-border:      #1e3d5c;   /* default border                       */
  --qc-border-2:    #2e5077;   /* input / stronger border              */
  --qc-border-3:    #1a2f45;   /* faint divider                        */
  --qc-text:        #d0dde8;   /* primary text                         */
  --qc-text-muted:  #8ab4d4;   /* muted text                           */
  /* AB#50332: #7c9fc0 was 4.04:1 on --qc-border, and --qc-border is the fill under the
     dashboard review-status badges — the 12-node color-contrast finding in the ticket. It
     cleared AA on the plain surfaces, which is why an earlier "AA-corrected" pass kept it.
     #8baac7 is 4.62:1 there; lightening an ink on a dark fill can only raise every other
     pair it appears in. */
  --qc-text-faint:  #8baac7;   /* faint text (AA on --qc-border too)    */
  --qc-text-2:      #b0c8de;   /* secondary text                       */
  --qc-brand-ink:   #a9d2f5;   /* navbar brand wordmark                */
  --qc-gold-ink:    #c9a84c;   /* gold used as TEXT                    */
  /* Text drawn ON a --qc-gold-ink fill. It cannot be one literal: gold is LIGHT in dark
     mode and DARK in light mode, so #0a1929 (which 16 sites hard-coded) reads 3.6:1 once
     light mode darkens the gold underneath it. This flips with the theme instead. */
  --qc-on-gold:     #0a1829;   /* ink on a gold fill (AB#50332)         */
}

html {
  background-color: var(--qc-bg) !important;
  color-scheme: dark;
}

/* ── Utility colour classes ─────────────────────────────────── */
.text-navy        { color: var(--gold) !important; }
.bg-navy          { background-color: var(--navy) !important; }
.border-navy      { border-color: var(--navy-border) !important; }

/* ── Navy button ────────────────────────────────────────────── */
.btn-navy {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn-navy:hover, .btn-navy:focus {
  background-color: #122842;
  border-color: #122842;
  color: #fff;
}
.btn-navy:disabled {
  background-color: var(--navy);
  border-color: var(--navy);
  opacity: .55;
  color: #fff;
}
.btn-outline-navy {
  border-color: var(--navy);
  color: #7aacdd;
  background-color: transparent;
}
.btn-outline-navy:hover, .btn-outline-navy:focus {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ── Progress bar ──────────────────────────────────────────── */
.progress-bar.bg-navy { background-color: var(--navy) !important; }

/* ── Body / layout ─────────────────────────────────────────── */
body {
  background-color: var(--navy-dark) !important;
  color: var(--text-primary) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
}

/* ── Page title / heading visibility ───────────────────────── */
/* Belt-and-suspenders: ensure all headings are visible on dark bg */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text-primary);
}
/* Page-level headings that use inline color:#fff — reinforce them */
h4.fw-bold, h5.fw-bold {
  color: #d0dde8;
}

.main-content { padding-top: 1.5rem; padding-bottom: 3rem; }

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar.bg-navy {
  background-color: #050f1a !important;
  border-bottom: 1px solid #0d2035;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.navbar-brand img { height: 36px; }
.navbar.bg-navy .navbar-brand { color: var(--gold) !important; font-weight: 700; }
.navbar.bg-navy .nav-link { color: #b0c8de !important; }
.navbar.bg-navy .nav-link:hover { color: var(--gold-light) !important; }
.navbar.bg-navy .nav-link.active { color: var(--gold) !important; }
.navbar.bg-navy .dropdown-menu {
  background-color: #0a1829;
  border: 1px solid var(--navy-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.navbar.bg-navy .dropdown-item { color: #b0c8de; font-size: .875rem; }
.navbar.bg-navy .dropdown-item:hover,
.navbar.bg-navy .dropdown-item:focus { background-color: #162840; color: #fff; }
.navbar.bg-navy .dropdown-item.active,
.navbar.bg-navy .dropdown-item:active { background-color: var(--navy); }
.navbar-toggler { border-color: rgba(255,255,255,.2); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background-color: var(--navy-card);
  border: 1px solid var(--navy-border);
  border-radius: 10px;
  color: var(--text-primary);
}
.card-header {
  background-color: var(--navy-header) !important;
  border-bottom: 1px solid var(--navy-border);
  border-radius: 10px 10px 0 0 !important;
  color: #fff !important;
}
/* Catch any card-header with old light classes */
.card-header.bg-white,
.card-header.bg-light { background-color: var(--navy-header) !important; color: #fff !important; }

/* ── Bootstrap overrides for dark context ───────────────────── */
.bg-white  { background-color: var(--navy-card)   !important; color: var(--text-primary); }
.bg-light  { background-color: #0d1f30             !important; color: var(--text-muted); }
.text-muted { color: var(--text-muted) !important; }
/* WCAG AA contrast fix: the two legacy "faint" blues are used inline as text
   colours across many templates and fail AA on the dark theme (#4a7090 ~3.1:1,
   #5a8ab0 ~4.4:1 on cards). An !important rule beats a normal inline color
   declaration, so this lifts every inline instance to ~5.8:1 without editing
   each template. (Only affects text colour; borders/backgrounds untouched.) */
[style*="#4a7090"] { color: #7c9fc0 !important; }
[style*="#5a8ab0"] { color: #7c9fc0 !important; }
.border-top    { border-color: var(--navy-border) !important; }
.border-bottom { border-color: var(--navy-border) !important; }
.border-start  { border-color: var(--navy-border) !important; }
.border-end    { border-color: var(--navy-border) !important; }
.border        { border-color: var(--navy-border) !important; }

/* ── Tables ─────────────────────────────────────────────────── */
.table { color: var(--text-primary); }
.table > :not(caption) > * > * { border-color: #1a2f45; background-color: transparent; }
.table-light, .table-light > * > tr > th,
thead.table-light { background-color: var(--navy-header) !important; color: var(--text-muted) !important; }
.table-hover tbody tr:hover td { background-color: rgba(255,255,255,.03); }
.table-sm td, .table-sm th { padding: .45rem .55rem; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select, .form-check-input {
  background-color: #0d1f30;
  border-color: var(--navy-border);
  color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
  background-color: #0d1f30;
  border-color: var(--gold);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem rgba(201,168,76,.18);
}
.form-control::placeholder { color: var(--text-faint); }
.form-control[readonly] {
  background-color: #0a1829;
  color: var(--text-muted);
}
.form-label { color: #c4d6e8; }
textarea.form-control { resize: vertical; }

/* A checkbox sitting inline in a dense row of controls, with its name beside it.
   Bootstrap spaces .form-check by floating the box into a 1.5em left padding, which leaves
   a gap of 0.5em measured against the ROW's font-size — not the label's. In the tight rows
   on the live-review scheduler the label is .74rem while the box keeps its own size, and the
   two ended up touching ("[x]VanLoh, Wil"). Laying the pair out as a flex row with an
   explicit gap makes the spacing independent of that arithmetic, which is also what
   device.css already does for touch pointers. */
.qc-check-inline {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding-left: 0;
  margin-bottom: 0;
}
.qc-check-inline .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
}

/* ── A switch says which way it is set, in words ──────────────
   Reported from HCM Global Settings in light mode: "the coloring stays the same so you can't tell
   what changes you are making". A switch carries its state only in a fill colour and the position
   of a small knob, and both are easy to lose — a pale fill in light mode, a pill distorted by the
   touch sizing in device.css, a zoomed-out window, or simply a reader who does not know which end
   means on. It is also WCAG 1.4.1: state conveyed by colour alone.

   So the label says it. One rule pair covers every switch in the app rather than editing the
   eighteen of them, needs no JavaScript, and updates the moment the box is ticked. */
.form-switch .form-check-input + .form-check-label::after {
  content: " — Off";
  color: var(--qc-text-faint);
  font-weight: normal;
  font-size: .78rem;
}
.form-switch .form-check-input:checked + .form-check-label::after {
  content: " — On";
  color: var(--qc-success);
}

.input-group-text {
  background-color: #162840;
  border-color: var(--navy-border);
  color: var(--text-muted);
}

/* ── Dropdowns ──────────────────────────────────────────────── */
.dropdown-menu {
  background-color: #0c1e30;
  border: 1px solid var(--navy-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.dropdown-item { color: #b0c8de; }
.dropdown-item:hover, .dropdown-item:focus { background-color: #162840; color: #fff; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--navy); color: #fff; }
.dropdown-header { color: var(--text-faint); }
.dropdown-divider { border-color: var(--navy-border); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge.bg-light {
  background-color: #1e3d5c !important;
  color: #8ab4d4 !important;
}
.badge.text-dark { color: #0a1829 !important; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { border-radius: 8px; }
.alert-info {
  background-color: #0e2236;
  border-color: #1e4a6e;
  color: var(--text-muted);
}
.alert-success {
  background-color: #0a2218;
  border-color: #1a4830;
  color: #66bb8a;
}
.alert-warning {
  background-color: #221a08;
  border-color: #5a4010;
  color: #e8c96a;
}
.alert-danger {
  background-color: #22080a;
  border-color: #5a1018;
  color: #e88a8a;
}
.alert-secondary {
  background-color: #0e1e2e;
  border-color: #1e3550;
  color: #8ab4d4;
}
.alert-dismissible .btn-close { filter: invert(1) brightness(.7); }

/* ── Nav tabs ───────────────────────────────────────────────── */
.nav-tabs { border-color: var(--navy-border); }
.nav-tabs .nav-link {
  color: var(--text-muted);
  border-color: transparent;
  border-bottom-color: var(--navy-border);
}
.nav-tabs .nav-link:hover { color: #fff; border-color: var(--navy-border); }
.nav-tabs .nav-link.active {
  background-color: var(--navy-card);
  border-color: var(--navy-border);
  border-bottom-color: var(--navy-card);
  color: var(--gold);
}
.tab-content {
  background-color: var(--navy-card) !important;
  border-color: var(--navy-border) !important;
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-content {
  background-color: var(--navy-card);
  border: 1px solid var(--navy-border);
  color: var(--text-primary);
}
.modal-header { border-color: var(--navy-border); }
.modal-footer { border-color: var(--navy-border); }
.btn-close { filter: invert(1) brightness(.7); }

/* ── Login page ─────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #050f1a 0%, #0f2236 60%, #162840 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container { width: 100%; max-width: 440px; }
.login-card {
  border: 1px solid var(--navy-border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  overflow: hidden;
  background: var(--navy-card);
}
.login-header {
  background: linear-gradient(135deg, #050f1a, #0f2236);
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--navy-border);
}
.login-logo { height: 54px; margin-bottom: .75rem; }
.login-body  { padding: 1.75rem 2rem; background: var(--navy-card); }
.login-footer {
  background-color: #0a1829;
  border-top: 1px solid var(--navy-border);
  padding: .75rem 2rem;
  font-size: .78rem;
  color: var(--text-faint);
}

/* ── Avatar circles ─────────────────────────────────────────── */
.avatar-circle {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), #2a5a8c);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--navy-border);
}
.avatar-circle-sm {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), #2a5a8c);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-circle-lg {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), #2a5a8c);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--navy-border);
}

/* ── Phase timeline ─────────────────────────────────────────── */
.phase-timeline {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: .5rem;
}
.phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  position: relative;
  flex: 1;
}
.phase-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #1a3550;
  border: 3px solid #1e3d5c;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: var(--text-faint);
}
.phase-connector {
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 3px;
  background: #1e3d5c;
  z-index: 0;
}
.phase-step:last-child .phase-connector { display: none; }
.phase-step.done .phase-dot {
  background: var(--navy);
  border-color: #2a5a8c;
  color: #fff;
}
.phase-step.done .phase-connector { background: var(--navy); }
.phase-step.active .phase-dot {
  background: var(--gold);
  border-color: var(--gold-light);
  color: #0a1829;
  box-shadow: 0 0 0 4px rgba(201,168,76,.2);
}
.phase-label {
  font-size: .65rem;
  text-align: center;
  margin-top: .4rem;
  color: var(--text-faint);
  line-height: 1.2;
}
.phase-step.done .phase-label  { color: var(--text-muted); font-weight: 600; }
.phase-step.active .phase-label { color: var(--gold); font-weight: 700; }

/* ── Dashboard mini-dots ───────────────────────────────────── */
.phase-dot.done {
  background: #1a4530;
  border-color: #2a6840;
  color: #66bb8a;
}
.phase-dot.active {
  background: var(--gold);
  border-color: var(--gold-light);
  color: #0a1829;
  box-shadow: 0 0 0 3px rgba(201,168,76,.2);
}

/* ── Badge for phase chip ──────────────────────────────────── */
.badge-phase {
  font-size: .72rem;
  padding: .35em .65em;
  border-radius: 20px;
}

/* ── Task card (dashboard) ─────────────────────────────────── */
.task-card {
  border-left: 3px solid var(--navy);
  border-radius: 8px;
  background: var(--navy-card);
  padding: .85rem 1.1rem;
  margin-bottom: .6rem;
  border: 1px solid var(--navy-border);
  border-left: 3px solid var(--navy-light);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: box-shadow .15s, border-left-color .15s;
}
.task-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  border-left-color: var(--gold);
}
.task-card.done  { border-left-color: #2a6840; opacity: .7; }
.task-card.overdue { border-left-color: #c53030; }

/* ── Table hover helper ─────────────────────────────────────── */
.hover-bg:hover  { background-color: #0d1f30 !important; }
.hover-navy:hover { color: var(--gold) !important; }

/* ── Typography helpers ─────────────────────────────────────── */
.tracking-wide { letter-spacing: .06em; }
.fs-7 { font-size: .8rem; }

/* ── Rating buttons (1-5 scale) ─────────────────────────────── */
.rating-group { display: flex; gap: .4rem; flex-wrap: wrap; }
.rating-btn {
  min-width: 2.4rem;
  font-weight: 600;
  background: #0d1f30;
  border-color: #2e5077;
  color: var(--text-muted);
  border-radius: 6px !important;
  transition: all .12s;
}
.rating-btn:hover {
  background: #162840;
  border-color: var(--gold);
  color: var(--gold);
}
.btn-check:checked + .rating-btn {
  background-color: var(--navy);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201,168,76,.3);
}
.btn-outline-navy.btn-sm.rating-btn { color: var(--text-muted); }

/* N/A button — same lit-up checked state as the 1–5 buttons */
.na-btn {
  background: #0d1f30;
  border: 1px solid #2e5077;
  color: #5a8ab0;
  font-size: .82rem;
  border-radius: 6px !important;
  transition: all .12s;
}
.na-btn:hover {
  background: #162840;
  border-color: var(--gold);
  color: var(--gold);
}
.btn-check:checked + .na-btn {
  background-color: var(--navy);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201,168,76,.3);
}

/* ── Print styles ───────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  .navbar, .btn, form { display: none !important; }
  body { background: #fff; font-size: 11pt; color: #000; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; background: #fff; color: #000; }
}

/* ── Notification bell ──────────────────────────────────────── */
.notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  font-size: .6rem;
  min-width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dc3545;
  color: #fff;
  pointer-events: none;
}

/* ── Analytics stat cards ───────────────────────────────────── */
.stat-card {
  border-radius: 10px;
  padding: 1rem;
  background: var(--navy-card);
  border: 1px solid var(--navy-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  text-align: center;
}
.stat-card .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

/* ── Dept link grid ─────────────────────────────────────────── */
.dept-link {
  display: block;
  padding: .75rem 1rem;
  border-right: 1px solid var(--navy-border);
  border-bottom: 1px solid var(--navy-border);
  text-decoration: none;
  color: var(--text-muted);
  transition: background .15s;
}
.dept-link:hover { background: #162840; color: #fff; }

/* ── Guest review banner ────────────────────────────────────── */
.guest-header {
  background: linear-gradient(90deg, #050f1a 0%, #0f2236 100%);
  color: #fff;
  padding: 1.25rem 1.5rem;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid var(--navy-border);
}

/* ── Scrollable panels ──────────────────────────────────────── */
.scroll-panel { overflow-y: auto; }

/* ── Empty state ────────────────────────────────────────────── */
.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-faint);
}
.empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: .3; }

/* ── Progress bar colours ───────────────────────────────────── */
.progress { background-color: #1a2f45; }

/* ── HR review form specific ────────────────────────────────── */
.q-section-header {
  background: linear-gradient(90deg, #0a1829, #162840);
  border-left: 3px solid var(--gold);
  border-radius: 6px 6px 0 0;
  padding: .65rem 1rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold);
}
.question-block {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(30,61,92,.6);
}
.question-block:last-child { border-bottom: none; }
.question-label {
  font-weight: 600;
  color: #c4d6e8;
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: .5rem;
}
.prior-year-panel {
  background: #0a1829;
  border: 1px solid var(--navy-border);
  border-radius: 6px;
  padding: .75rem 1rem;
  font-size: .82rem;
  color: var(--text-muted);
}
.prior-year-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gold);
  margin-bottom: .35rem;
}

/* ── Peer review row (review_list) ──────────────────────────── */
.peer-review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--navy-border);
  transition: background .12s;
}
.peer-review-row:last-child { border-bottom: none; }
.peer-review-row:hover { background: #0d1f30; }

/* ── Dashboard profile card ─────────────────────────────────── */
.profile-banner {
  background: linear-gradient(135deg, #0a1829 0%, #162840 100%);
  border: 1px solid var(--navy-border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* ── Collapse expand panel ──────────────────────────────────── */
.collapse-review-panel {
  background: #0a1829;
  border-top: 1px solid var(--navy-border);
}

/* ── Collapsible card headers ───────────────────────────────── */
.card-header.qc-collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  /* Left-justify the title; the auto-collapse chevron is pushed to the right edge
     (margin-left:auto below). Headers that explicitly use .justify-content-between
     keep their own layout because that Bootstrap utility is !important. */
  justify-content: flex-start;
}
.card-header.qc-collapsible:hover {
  background-color: #1e3858 !important;
}
.card-header.qc-collapsible .qc-chevron {
  font-size: .75rem;
  color: var(--text-faint);
  transition: transform .22s ease, color .15s;
  flex-shrink: 0;
  margin-left: auto;
}
.card-header.qc-collapsible.collapsed .qc-chevron {
  transform: rotate(-90deg);
}
.card-header.qc-collapsible:hover .qc-chevron {
  color: var(--gold);
}
/* Smooth body collapse */
.card > .qc-collapsible-body {
  overflow: hidden;
  transition: max-height .28s ease, opacity .22s ease;
  max-height: 9999px;
  opacity: 1;
}
.card > .qc-collapsible-body.qc-collapsed {
  max-height: 0 !important;
  opacity: 0;
}

/* ── Sticky header ──────────────────────────────────────────── */
.sticky-top { position: sticky; top: 0; z-index: 2; }

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 576px) {
  .phase-label { font-size: .58rem; }
  .login-body  { padding: 1.25rem 1.25rem; }
}

/* ============================================================
   LIGHT (DAYTIME) MODE  —  designed palette via CSS variables
   ------------------------------------------------------------
   A true light theme: every structural colour is a variable
   (Bootstrap --bs-*, our --navy/--text/--gold, and the --qc-*
   tokens used in template inline styles). This block remaps them
   to a light palette. The dark theme is the default and is left
   untouched. The navbar intentionally stays dark navy (a classic
   light-app top bar); semantic status colours (success green,
   danger red, warning amber, talent tags) are kept as-is since
   they read correctly on a light background.

   Activated firm-wide via the Global Setting, which renders
   <html data-theme="light">.
   ============================================================ */
[data-theme="light"] {
  /* Brand / legacy tokens */
  --navy:        #1a3a5c;      /* kept as accent (buttons, badges) */
  --navy-dark:   #eef2f7;
  --navy-mid:    #ffffff;
  --navy-card:   #ffffff;
  --navy-header: #e9eef4;
  --navy-border: #d4dde6;
  --navy-light:  #b9c8d8;
  --gold:        #b88f2e;
  --gold-light:  #d9b85a;
  --text-primary: #1f2d3d;
  --text-muted:   #44617a;
  --text-faint:   #61748a;

  /* Bootstrap 5 tokens */
  --bs-body-bg:            #eef2f7;
  --bs-body-color:         #1f2d3d;
  --bs-secondary-bg:       #f6f9fc;
  --bs-tertiary-bg:        #e9eef4;
  --bs-card-bg:            #ffffff;
  --bs-card-cap-bg:        #e9eef4;
  --bs-card-border-color:  #d4dde6;
  --bs-border-color:       #d4dde6;
  --bs-border-color-translucent: rgba(20,40,60,.15);
  --bs-dropdown-bg:        #ffffff;
  --bs-dropdown-color:     #2c3e52;
  --bs-dropdown-border-color: #d4dde6;
  --bs-dropdown-link-color: #2c3e52;
  --bs-dropdown-link-hover-bg: #eef2f7;
  --bs-dropdown-link-hover-color: #0a1829;
  --bs-modal-bg:           #ffffff;
  --bs-modal-header-border-color: #d4dde6;
  --bs-modal-footer-border-color: #d4dde6;
  --bs-table-bg:           transparent;
  --bs-table-striped-bg:   rgba(0,0,0,.025);
  --bs-table-hover-bg:     rgba(0,0,0,.04);
  --bs-table-border-color: #e4e9ef;
  --bs-table-color:        #1f2d3d;
  --bs-input-bg:           #ffffff;
  --bs-input-border-color: #c3cfdb;
  --bs-input-color:        #1f2d3d;
  --bs-input-focus-border-color: #b88f2e;
  --bs-form-select-bg:     #ffffff;
  --bs-list-group-bg:      #ffffff;
  --bs-list-group-border-color: #d4dde6;
  --bs-list-group-action-hover-bg: #eef2f7;
  --bs-nav-tabs-border-color: #d4dde6;
  --bs-nav-tabs-link-active-bg: #ffffff;
  --bs-nav-tabs-link-active-border-color: #d4dde6;
  --bs-nav-link-color:     #44617a;
  --bs-nav-link-hover-color: #0a1829;
  --bs-pagination-bg:      #ffffff;
  --bs-pagination-border-color: #d4dde6;
  --bs-pagination-color:   #44617a;
  --bs-pagination-hover-bg: #eef2f7;
  --bs-pagination-hover-color: #0a1829;
  --bs-progress-bg:        #e2e8ee;
  --bs-code-color:         #b8860b;
  --bs-heading-color:      #1f2d3d;
  --bs-emphasis-color:     #1f2d3d;
  --bs-link-color:         #2563a8;
  --bs-link-hover-color:   #b88f2e;

  /* Structural inline-style tokens — light */
  --qc-bg:         #eef2f7;
  --qc-surface:    #ffffff;
  --qc-surface-2:  #f6f9fc;
  --qc-surface-3:  #e9eef4;
  --qc-surface-4:  #f1f5f9;
  --qc-border:     #d4dde6;
  --qc-border-2:   #c3cfdb;
  --qc-border-3:   #e4e9ef;
  --qc-text:       #1f2d3d;
  --qc-text-muted: #44617a;
  --qc-text-2:     #2c3e52;
  --qc-brand-ink:  #14304f;

  /* AB#50332 — four light-mode inks darkened just enough to clear AA on every surface they
     are actually drawn on. Each was a near-miss, not a wild one, and each is measured in
     tests/unit/test_unit_light_mode_contrast.py rather than eyeballed:

       --qc-text-faint  #61748a -> #516174  worst pair 3.49:1 -> 4.62:1  (on --qc-border)
       --qc-gold-ink    #8a6d1f -> #745c1a  worst pair 3.56:1 -> 4.65:1  (on --qc-border)

     (--qc-warning and --qc-accent needed the same treatment, but they are declared in
     components.css, which loads AFTER this file — so their fix lives there or it would be
     silently overridden.)

     Only the LIGHT values move. Dark mode is the primary theme and none of these pairs fail
     there, so changing the dark value would restyle the app for no accessibility gain. Hue
     and saturation are preserved, so the brand gold is still gold — only its lightness drops,
     which on a light background can only help. The targets are 4.6+, not 4.5, so antialiasing
     or a later surface tweak does not silently push them back under. */
  --qc-text-faint: #516174;
  --qc-gold-ink:   #745c1a;
  --qc-on-gold:    #ffffff;   /* gold is dark here, so ink on it must be light */
}

/* The top navbar stays dark navy (bg-navy) in BOTH themes, so its brand wordmark and
   version badge must keep a LIGHT ink — the light-theme --qc-brand-ink (#14304f, dark)
   would otherwise be dark-on-dark and invisible. Re-scope the var inside the navbar. */
[data-theme="light"] .navbar.bg-navy { --qc-brand-ink: #a9d2f5; }

/* Document + a few class rules that use literal dark hexes (not variables). */
html[data-theme="light"] { background-color: #eef2f7 !important; color-scheme: light; }
[data-theme="light"] body { background-color: #eef2f7 !important; color: #1f2d3d !important; }
/* Card header text is forced #fff for the dark theme — flip it for light. */
[data-theme="light"] .card-header { color: #1f2d3d !important; }
[data-theme="light"] .card-header.bg-white,
[data-theme="light"] .card-header.bg-light { background-color: #e9eef4 !important; color: #1f2d3d !important; }
[data-theme="light"] .bg-white { background-color: #ffffff !important; color: #1f2d3d; }
[data-theme="light"] .bg-light { background-color: #f1f5f9 !important; color: #44617a; }
[data-theme="light"] .form-control,
[data-theme="light"] .form-select { background-color: #ffffff; }
/* AB#50720 — the tick was invisible on every checkbox in light mode. A CHECKED
   Bootstrap checkbox draws a WHITE tick SVG on the accent-coloured background, so
   forcing the background white (as this rule used to, unconditionally) painted a white
   tick on white. Only the UNCHECKED box should be white; the checked one keeps an
   accent fill for the tick to sit on. */
[data-theme="light"] .form-check-input:not(:checked) { background-color: #ffffff; }
[data-theme="light"] .form-check-input:checked {
  background-color: #2563a8;
  border-color: #2563a8;
}
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus { background-color: #ffffff; }
[data-theme="light"] .form-control[readonly] { background-color: #f1f4f8; color: #44617a; }
[data-theme="light"] .input-group-text { background-color: #e9eef4; color: #44617a; }
[data-theme="light"] .rating-btn,
[data-theme="light"] .na-btn { background: #f6f9fc; color: #44617a; }
[data-theme="light"] .rating-btn:hover,
[data-theme="light"] .na-btn:hover { background: #eef2f7; }
[data-theme="light"] .hover-bg:hover { background-color: #eef2f7 !important; }
[data-theme="light"] .peer-review-row:hover { background: #f6f9fc; }
[data-theme="light"] .collapse-review-panel { background: #f6f9fc; }
[data-theme="light"] .prior-year-panel { background: #f6f9fc; }
[data-theme="light"] .q-section-header { background: linear-gradient(90deg, #eef2f7, #e3ebf3); }
[data-theme="light"] .profile-banner { background: linear-gradient(135deg, #ffffff, #eef2f7); }
[data-theme="light"] .dept-link:hover { background: #eef2f7; color: #0a1829; }
[data-theme="light"] .btn-outline-navy { color: #1a3a5c; }
/* …and its HOVER, which the line above was silently cancelling. `.btn-outline-navy:hover`
   (up in the base layer) fills with --navy and sets color:#fff, but a class plus a
   pseudo-class scores the same specificity as an attribute plus a class — so the light
   override, being later in the file, won the `color` and left dark navy ink on a dark navy
   fill. "Fill out as a matrix" went blank on hover; so did all 115 uses of this button
   across 29 templates. Pairing every themed colour with its own hover is the fix, not
   raising specificity. */
[data-theme="light"] .btn-outline-navy:hover,
[data-theme="light"] .btn-outline-navy:focus { color: #fff; }
/* The review form's question text. #c4d6e8 is a dark-theme ink and had no light override, so
   it stayed pale blue on a white card. The matrix view reads correctly because its question
   cell carries no colour class at all and simply inherits the body text — so match that
   token rather than inventing a second one, and the two views cannot drift. */
[data-theme="light"] .question-label { color: var(--text-primary); }
[data-theme="light"] .card-header.qc-collapsible:hover { background-color: #e3ebf3 !important; }
/* Bootstrap injects a white close-X via filter for dark; reset it for light. */
[data-theme="light"] .btn-close { filter: none; }
[data-theme="light"] .alert-dismissible .btn-close { filter: none; }
/* Alerts: dark-theme bodies are very dark — give light equivalents. */
[data-theme="light"] .alert-info    { background: #e7f1fb; border-color: #b6d4ef; color: #1c4e80; }
[data-theme="light"] .alert-success { background: #e6f4ec; border-color: #bcdfca; color: #1d7a45; }
/* #8a6d1f (the old gold-ink) was 4.43:1 on this fill — a warning alert should carry the
   warning ink anyway, and that token is now 4.65:1 here (AB#50332). */
[data-theme="light"] .alert-warning { background: #fbf3df; border-color: #ecd9a6; color: var(--qc-warning); }
[data-theme="light"] .alert-danger  { background: #fbe9e9; border-color: #efc2c2; color: #a3302f; }
[data-theme="light"] .alert-secondary { background: #eef2f7; border-color: #d4dde6; color: #44617a; }
[data-theme="light"] .table-light, [data-theme="light"] thead.table-light,
[data-theme="light"] .table-light > * > tr > th { background-color: #e9eef4 !important; color: #44617a !important; }