/* ============================================================
   DESIGN SYSTEM
   ============================================================ */
:root {
  /* ----------------------------------------------------------------
     The palette is the Training dashboard's, value for value, so the
     two apps read as one product. The names are ours — they are used
     ~600 times across this file, and renaming them would change a lot
     of lines to achieve nothing you could see.
     ---------------------------------------------------------------- */
  --brand: #9B1B30;            /* ruby */
  --brand-hover: #7A1426;      /* ruby, pressed */
  --brand-subtle: #F7E9EC;     /* tint behind active nav, row hover */
  --brand-subtle-2: #FBEFF1;   /* the lighter of the two tints */





  --c-trend-up: #16A34A;
  --c-trend-down: #DC2626;
  --c-trend-flat: #9CA3AF;
  --c-success: #16A34A;
  --c-danger: #DC2626;
  --c-info: #2563EB;
  /* Warm, slightly pink neutrals rather than blue-greys — this is what
     makes the Training dashboard feel soft rather than corporate. */
  --bg: #FBF9F9;               /* the page behind everything */
  --bg-card: #FFFFFF;
  --bg-subtle: #FAF5F6;        /* hover surfaces, sunken fills */
  --sidebar-bg: #FFFFFF;
  --sidebar-hover: #FBEFF1;
  --border: #ECE0E3;
  --border-soft: #F3E9EB;      /* inner hairlines */
  --text: #1C1116;
  /* Readable greys: #9CA3AF on white was 2.5:1, under the 4.5:1 minimum for
     normal text, and it carried hundreds of labels. */
  /* Status/score text colours that pass 4.5:1 on white; body.dark swaps in
     bright versions that pass on the dark cards. */
  --t-green: #1B7B43; --t-red: #B3261E; --t-cyan: #0E7490;
  --t-indigo: #3B41AE; --t-amber: #876208;
  /* Each status colour comes as a tint to sit on and an ink to write in. */
  --ok: #1F8B4C;      --ok-tint: #E6F3EC;      --ok-ink: #1B7B43;   --ok-solid: #1E8549;
  --warn: #B8860B;    --warn-tint: #FBF1DC;    --warn-ink: #876208; --warn-solid: #966D09;
  --bad: #B3261E;     --bad-tint: #FAE7E5;     --bad-ink: #B3261E;
  --brand-text: #5E0F1E;       /* ruby dark enough to write with */
  --text-secondary: #4A3A40;
  /* The Training dashboard's muted is #7A6A70. On its white cards that is
     5.1:1, but this dashboard writes muted text on the tints far more often,
     and there it drops to 4.3:1 — under the readable line. One shade darker
     passes on every surface we use and is indistinguishable side by side. */
  --text-muted: #6E5E64;
  /* Inter throughout — a UI sans built for dense interfaces, with tabular
     figures that keep score and money columns aligned. */
  /* The system face, as the Training dashboard uses. It needs no download,
     so the first paint carries the right type instead of swapping fonts. */
  --font: -apple-system, system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --sidebar-w: 280px;
  --header-h: 68px;
  --radius: 16px;              /* cards / modals */
  --radius-sm: 10px;           /* buttons / inputs */
  /* Two layers: a hairline to seat the card, and a wide ruby-tinted haze. */
  --shadow: 0 1px 2px rgba(28,17,22,.05), 0 6px 20px rgba(94,15,30,.06);
  --shadow-md: 0 2px 10px rgba(94,15,30,.10);
  --shadow-lg: 0 18px 44px rgba(94,15,30,.16);
  /* Dark surfaces that float above the page: tooltips, the tour. */
  --float-bg: #1C1116; --float-ink: #FFFFFF;
  --float-line: rgba(255,255,255,.22); --float-fill: rgba(255,255,255,.13);

  /* Two names that were used but never defined. `var(--surface)` on a modal
     resolved to nothing, so that dialog has had no background at all; the
     other carries text colour in 14 places. Pointed at their real values
     rather than chased through fifteen call sites. */
  --surface: var(--bg-card);
  --text-primary: var(--text);

  /* One colour per programme, the way the Training dashboard gives each kind
     of session its own. These were written out by hand in seven different
     places; now they live here and follow the theme. */
  --p-sat-math: #1D4ED8;   --p-sat-eng: #6D28D9;
  --p-pre-math: #155E75;   --p-pre-eng: #92400E;
  --p-elite-math: #047857; --p-elite-eng: #B91C1C;
  --p-ink: #FFFFFF;        /* what to write on a programme chip */
  /* Swatches: distinct solid fills for rooms, avatars and staff chips.
     They always carry white text, so they stay dark in both themes. */
  --sw1: #4338CA; --sw2: #1D4ED8; --sw3: #0E7490; --sw4: #047857;
  --sw5: #B45309; --sw6: #B91C1C; --sw7: #6D28D9; --sw8: #BE185D;
  --sw-ink: #FFFFFF;
  --toast-ink: #FFFFFF;   /* what a toast writes on its fill */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;             /* the Training dashboard's base */
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  letter-spacing: normal;
  text-rendering: optimizeLegibility;
}

button, select, input, textarea { font-family: var(--font); }
/* Keep digits aligned down a column wherever they are meant to line up. */
table, .kpi-value, .detail-table, input[type=number], td, th,
.um-user-card, .ra-room { font-variant-numeric: tabular-nums lining; }
/* `all` transitions every property that changes, including layout ones, which
   is a reliable way to make a press feel sluggish. Only the things that
   actually change on hover and press. */
button { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; }
table { font-variant-numeric: tabular-nums; }
select { cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(155,17,30,.08); }
::selection { background: rgba(155,17,30,.15); }

/* ---- DARK MODE ---- */
body.dark {
  /* The Training dashboard's night palette, value for value: warm near-black
     rather than navy, and a ruby lifted to a rose so it still reads. */
  --brand: #E0637A;
  --brand-hover: #EA7489;
  --brand-text: #F7C3CE;
  --brand-subtle: rgba(224,99,122,.20);
  --brand-subtle-2: rgba(224,99,122,.11);
  --bg: #131013;
  --bg-card: #1B171A;
  --bg-subtle: #231E22;
  --sidebar-bg: #1B171A;
  --sidebar-hover: rgba(224,99,122,.11);
  --border: #312A2E;
  --border-soft: #272125;
  --text: #F4EEF0;
  --text-secondary: #D6C9CE;
  --text-muted: #A5959B;
  --t-green: #4FCB8A; --t-red: #EE7A72; --t-cyan: #22D3EE;
  --t-indigo: #A5B4FC; --t-amber: #E0B255;
  --ok: #4FCB8A;   --ok-tint: rgba(79,203,138,.16);  --ok-ink: #4FCB8A;   --ok-solid: #4FCB8A;
  --warn: #E0B255; --warn-tint: rgba(224,178,85,.16); --warn-ink: #E0B255; --warn-solid: #E0B255;
  --bad: #EE7A72;  --bad-tint: rgba(238,122,114,.16); --bad-ink: #EE7A72;
  --shadow: 0 1px 2px rgba(0,0,0,.40), 0 6px 20px rgba(0,0,0,.34);
  --float-bg: #2E272C; --float-ink: #F4EEF0;
  --float-line: rgba(255,255,255,.20); --float-fill: rgba(255,255,255,.10);
  /* At night each programme lifts to a light tint, so it reads on the dark
     cards — and a chip filled with it takes dark ink. */
  --p-sat-math: #93A4FF;   --p-sat-eng: #C7A6FF;
  --p-pre-math: #5FC9DE;   --p-pre-eng: #E0B255;
  --p-elite-math: #4FCB8A; --p-elite-eng: #EE7A72;
  --p-ink: #1C1116;
  /* Aliases must be repeated here: a var() inside a custom property keeps
     the value it was written with, so a :root-only alias stays light. */
  --surface: var(--bg-card);
  --text-primary: var(--text);
  --toast-ink: #1C1116;
}
body.dark .kpi-card,
body.dark .section-card,
body.dark .table-wrap,
body.dark .chart-card { background: var(--bg-card); border-color: var(--border); }
body.dark th { background: #1E1E30; color: var(--text-secondary); }
body.dark td { border-color: var(--border); }
body.dark .filter-bar { background: var(--bg-card); border-color: var(--border); }
body.dark #main-header { background: var(--bg-card); border-color: var(--border); }
body.dark .filter-select { background: var(--bg-card); border-color: var(--border); color: var(--text); }
body.dark .page-subtitle { color: var(--text-muted); }
/* ---- LOGIN ---- */
#loginOverlay {
  position: fixed; inset: 0;
  background: #9B111E;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; overflow: hidden; padding: 1.5rem;
}
body.dark #loginOverlay { background: #6B0C14; }

.login-card {
  background: #fff; border-radius: 28px; overflow: hidden;
  width: 100%; max-width: 880px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  position: relative; z-index: 1;
  display: flex; min-height: 500px;
}
body.dark .login-card { background: #1A1A2E; }
@media (max-width: 700px) {
  .login-card { flex-direction: column; max-width: 420px; min-height: auto; border-radius: 24px; }
}

/* Left: brand panel */
.login-brand {
  flex: 0 0 46%; background: #f5f0ed; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.5rem; border-radius: 28px; margin: 0;
}
.login-brand::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 80%, rgba(155,17,30,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(155,17,30,.03) 0%, transparent 50%);
}
.login-brand::after { display: none; }
body.dark .login-brand { background: #1e1e2e; }
body.dark .login-brand-sub { color: #666; }
body.dark .login-brand-logo-big svg .ll1 { fill: #c44 !important; opacity: .5 !important; }
body.dark .login-brand-logo-big svg .ll2 { fill: #c44 !important; opacity: .9 !important; }
.login-brand > * { position: relative; z-index: 2; }
.login-brand-logo-big {
  width: 160px; height: 160px; margin: 0 auto 1.5rem; opacity: .9;
}
.login-brand-logo-big svg { width: 160px; height: 160px; }
.login-brand-logo-big svg .ll1 { fill: #9B111E !important; opacity: .65 !important; }
.login-brand-logo-big svg .ll2 { fill: #9B111E !important; opacity: 1 !important; }
.login-brand-sub {
  color: #888; font-size: .82rem; font-weight: 400;
  margin-top: .75rem; line-height: 1.5; text-align: center;
}
@media (max-width: 700px) {
  .login-brand { flex: none; padding: 2rem 1.75rem; min-height: 180px; border-radius: 24px 24px 0 0; }
  .login-brand-logo-big { width: 100px; height: 100px; margin-bottom: 1rem; }
  .login-brand-logo-big svg { width: 100px; height: 100px; }
  .login-brand-sub { font-size: .78rem; margin-top: .5rem; }
}

/* Right: form panel */
.login-form-side {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 2.75rem;
}
@media (max-width: 700px) { .login-form-side { padding: 2rem 1.75rem 2rem; } }
.login-form-logo { width: 44px; height: 44px; margin-bottom: 1.25rem; }
.login-form-logo svg { width: 44px; height: 44px; }
.login-form-logo svg .ll1, .login-form-logo svg .ll2 { fill: #9B111E !important; opacity: 1 !important; }
.login-form-title { font-size: 1.85rem; font-weight: 700; color: #1a1a1a; margin-bottom: .4rem; letter-spacing: -0.02em; }
body.dark .login-form-title { color: #F3F4F6; }
.login-form-sub { font-size: .95rem; color: #888; margin-bottom: 1.75rem; }

.login-field { margin-bottom: 1.1rem; position: relative; }
.login-field label { display: block; font-size: .85rem; font-weight: 500; color: #666; margin-bottom: .5rem; }
body.dark .login-field label { color: #777; }
.login-field input {
  width: 100%; padding: .85rem 1rem; border: 1.5px solid #e0e0e0;
  border-radius: 10px; font-family: var(--font); font-size: 1rem;
  color: #1a1a1a; background: #fff; transition: all .2s;
  outline: none;
}
body.dark .login-field input { background: #111120; border-color: #2D2D3F; color: #F3F4F6; }
.login-field input:focus { border-color: #9B111E; box-shadow: 0 0 0 3px rgba(155,17,30,.08); }
body.dark .login-field input:focus { background: #1E1E30; box-shadow: 0 0 0 3px rgba(155,17,30,.15); }
.login-field input::placeholder { color: #ccc; font-weight: 400; }
.pw-toggle {
  position: absolute; right: .85rem; bottom: .8rem;
  background: none; border: none; cursor: pointer; color: #ccc;
  padding: .2rem; display: flex; align-items: center;
}
.pw-toggle:hover { color: #9B111E; }
.btn-login {
  width: 100%; padding: .9rem; background: #9B111E; color: #fff;
  border: none; border-radius: 10px; font-family: var(--font); font-size: 1rem;
  font-weight: 600; cursor: pointer; transition: all .2s;
  margin-top: .75rem; letter-spacing: .01em;
}
.btn-login:hover { background: #820E19; box-shadow: 0 6px 20px rgba(155,17,30,.3); transform: translateY(-1px); }
.btn-login:active { transform: translateY(0) scale(.99); }
.login-error {
  color: var(--t-red); font-size: .85rem; font-weight: 500; margin-top: .85rem;
  text-align: center; min-height: 1.2em;
}
.login-error.is-loading {
  color: var(--brand, #9B111E); display: flex; align-items: center; justify-content: center; gap: .45rem;
}
@keyframes loginSpin { to { transform: rotate(360deg); } }
.login-spinner {
  width: 16px; height: 16px; border: 2.5px solid rgba(155,17,30,.25);
  border-top-color: var(--brand, #9B111E); border-radius: 50%;
  animation: loginSpin .7s linear infinite; flex-shrink: 0;
}
.btn-login:disabled {
  opacity: .7; cursor: not-allowed; transform: none !important;
}
.login-hint { text-align: center; font-size: .8rem; color: #aaa; margin-top: 1.25rem; }

/* Toast notification enhancement */
#dashToast { box-shadow: 0 8px 24px rgba(0,0,0,.2); }

/* ---- DETAIL MODAL ---- */
#detailModal {
  display: none; position: fixed; inset: 0; z-index: 10002;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 1rem;
}
#detailModal.open { display: flex; }
.detail-card {
  background: var(--bg-card); border-radius: 16px;
  width: 100%; max-width: 680px; max-height: 88vh;
  overflow-y: auto; box-shadow: var(--shadow-lg);
}
body.dark .detail-card { background: var(--bg-card); }
.detail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-card); z-index: 1;
  border-radius: 16px 16px 0 0;
}
body.dark .detail-header { background: var(--bg-card); }
.detail-title { font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; color: var(--text); }
.detail-subtitle { font-size: .88rem; color: var(--text-muted); margin-top: .2rem; }
.detail-close {
  background: none; border: 1.5px solid var(--border); border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .15s;
}
.detail-close:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-subtle); }
.detail-back {
  display: none; align-items: center; gap: .35rem;
  background: none; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 0 .75rem; height: 32px; cursor: pointer; color: var(--text-muted);
  font-family: var(--font); font-size: .8rem; font-weight: 600;
  transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.detail-back:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-subtle); }
.detail-back svg { width: 14px; height: 14px; }
.detail-header-actions { display: flex; align-items: center; gap: .5rem; }
.detail-body { padding: 1.25rem 1.5rem; }
.detail-stats { display: flex; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.detail-stat { background: var(--bg-subtle); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: .8rem 1rem; flex: 1; min-width: 120px; }
.detail-stat-label { font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em; }
.detail-stat-value { font-size: 1.7rem; font-weight: 800; color: var(--text);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: .25rem; }
.detail-chart-wrap { height: 260px; min-height: 200px; margin-bottom: 1.25rem; }
.detail-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 60vh; }
.detail-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.detail-table th { padding: .55rem .75rem; text-align: left; font-size: 10px;
  font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--border); background: var(--bg-subtle);
  position: sticky; top: 0; z-index: 2; }
.detail-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--border-soft); }
.detail-table tr:hover td { background: var(--brand-subtle-2); }

/* ---- APP LAYOUT ---- */
#app {
  display: flex; height: 100vh; overflow: hidden;
}

/* ---- SIDEBAR ---- */
#sidebar {
  width: var(--sidebar-w); background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  flex-shrink: 0; height: 100vh; overflow: hidden;
  border-right: 1px solid var(--border);
  transition: margin-left .25s ease, transform .25s ease;
}
#sidebar.collapsed {
  margin-left: calc(-1 * var(--sidebar-w));
}

.sidebar-logo {
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
}
.sidebar-logo-icon { width: 42px; height: 42px; flex-shrink: 0; background: var(--brand); border-radius: 12px; display: grid; place-items: center; box-shadow: var(--shadow); }
.sidebar-logo-icon svg { width: 30px; height: 30px; display: block; }
.sidebar-logo-text { color: var(--text); font-weight: 700; font-size: 1.1rem; line-height: 1.2; letter-spacing: -0.01em; }
.sidebar-logo-sub { color: var(--text-muted); font-size: .78rem; font-weight: 500; margin-top: .1rem; }

.sidebar-nav { flex: 1; padding: 1rem .75rem 2rem; overflow-y: auto; min-height: 0; }
.nav-section-label {
  font-size: .72rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 1.25rem .75rem .5rem;
}
.sidebar-nav > .nav-section-label:first-child { padding-top: .25rem; }
.nav-item {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .8rem; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text); font-size: .95rem; font-weight: 500;
  transition: background .18s ease, color .18s ease, transform .18s ease; text-decoration: none; margin-bottom: 2px;
  border-left: 4px solid transparent; padding-left: calc(.8rem - 4px);
  user-select: none;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-secondary); transition: color .18s ease; }
/* The 3px sideways nudge fought the press scale and read as jitter. */
.nav-item:hover { background: var(--sidebar-hover); }
.nav-item:hover svg { color: var(--brand-text); }
.nav-item.active {
  background: var(--brand-subtle); color: var(--brand-text);
  border-left-color: var(--brand); font-weight: 600;
}
.nav-item.active svg { color: var(--brand-text); }

.sidebar-bottom {
  padding: .85rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-user-info {
  padding: .7rem .75rem;
  font-size: .78rem; color: var(--text-secondary);
  display: flex; align-items: center; gap: .65rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  transition: border-color .15s; margin-bottom: .6rem;
}
.sidebar-user-info:hover { border-color: var(--brand); }
.sidebar-user-name { color: var(--text); font-weight: 600; font-size: .9rem; }
.sidebar-user-tag {
  display: inline-block; font-size: .64rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 20px; margin-top: .3rem;
  background: var(--brand-subtle); color: var(--brand-text);
  text-transform: uppercase; letter-spacing: .04em;
}
/* Bottom action buttons — clean 2-col grid */
.sidebar-bottom-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: 0;
}
.sidebar-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .5rem; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid var(--border); cursor: pointer;
  color: var(--text-secondary); font-family: var(--font); font-size: .78rem; font-weight: 500;
  transition: all .15s; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0;
}
.sidebar-btn:hover { background: var(--sidebar-hover); color: var(--text); border-color: var(--border); }
.sidebar-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar-btn.danger { border-color: rgba(220,38,38,.4); color: var(--c-danger); }
.sidebar-btn.danger:hover { background: rgba(220,38,38,.06); color: var(--c-danger); border-color: var(--c-danger); }

/* ---- MAIN AREA ---- */
#main-area {
  flex: 1; display: flex; flex-direction: column;
  height: 100vh; overflow: hidden; min-width: 0;
}

/* ---- HEADER ---- */
#main-header {
  height: var(--header-h); background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.75rem; flex-shrink: 0;
}
.header-left h1 {
  font-size: 1.3rem; font-weight: 700; color: var(--text);
  letter-spacing: -0.02em;
}
.header-breadcrumb {
  font-size: .8rem; color: var(--text-muted); margin-top: .15rem;
}
.header-right {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
}
/* Rows and cards that open something can now be reached with Tab. */
[tabindex="0"]:focus-visible, tr[tabindex]:focus-visible { outline: 2px solid #6366F1; outline-offset: -2px; border-radius: 4px; }
/* iPhone Safari zooms the page into any text box under 16px and leaves it
   zoomed. Phones get 16px boxes so tapping a field does not jump the page. */
@media (max-width: 600px) {
  input, select, textarea { font-size: 16px !important; }
}
/* Profile cards never grow wider than a phone screen. */
.gsearch { position: relative; }
.gsearch input {
  width: 230px; padding: .38rem .6rem .38rem 1.9rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text);
  font-family: var(--font); font-size: .8rem; outline: none; transition: border-color .15s, width .15s;
}
.gsearch input:focus { border-color: #6366F1; background: var(--bg-card); width: 300px; }
.gsearch svg.gs-icon { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-muted); pointer-events: none; }
.gsearch kbd { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); font-family: var(--font); font-size: .62rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 .3rem; pointer-events: none; }
.gsearch input:focus ~ kbd { display: none; }
.gs-results { position: absolute; top: calc(100% + 6px); right: 0; width: 360px; max-width: calc(100vw - 32px); max-height: 420px; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.14); z-index: 900; padding: .35rem; }
.gs-head { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: .45rem .55rem .2rem; }
.gs-item { display: flex; justify-content: space-between; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .45rem .55rem; border: 0; border-radius: 7px; background: none; cursor: pointer; font-family: var(--font); color: var(--text); }
.gs-item:hover, .gs-item.active { background: rgba(99,102,241,.09); }
.gs-item:focus-visible { outline: 2px solid #6366F1; outline-offset: -2px; }
.gs-name { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-meta { font-size: .7rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.gs-empty { padding: .8rem .6rem; font-size: .8rem; color: var(--text-muted); }
@media (max-width: 900px) { .gsearch input { width: 150px; } .gsearch input:focus { width: 200px; } .gsearch kbd { display: none; } }
@media (max-width: 600px) { .gsearch { display: none; } }
.header-status-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; border-radius: 6px;
  background: var(--bg-secondary); font-size: .7rem; font-weight: 600;
  color: var(--text-muted); border: 1px solid var(--border);
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9CA3AF; flex-shrink: 0;
  transition: background .3s;
}
.live-dot.live { background: #10B981; box-shadow: 0 0 0 2px rgba(16,185,129,.2); }
.live-dot.error { background: #EF4444; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bookSuccessPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#sheetStatus { font-size: .7rem; color: var(--text-muted); font-weight: 600; }
#lastUpdated { font-size: .68rem; color: var(--text-muted); }
.btn-refresh {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; color: var(--text-muted); padding: .3rem .5rem;
  display: flex; align-items: center; gap: .3rem; font-family: var(--font);
  font-size: .72rem; font-weight: 600; transition: all .15s;
}
.btn-refresh:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-subtle); }
.btn-refresh svg { width: 13px; height: 13px; }

/* ---- FILTER BAR ---- */
#filter-bar {
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: .6rem 1.75rem; display: flex; align-items: center;
  gap: .5rem; flex-wrap: wrap; flex-shrink: 0;
}
.filter-label {
  font-size: .68rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: .35rem;
}
.filter-label svg { width: 13px; height: 13px; opacity: .5; }
.filter-select {
  padding: .35rem .65rem; border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--font); font-size: .8rem; color: var(--text);
  background: var(--bg-card); cursor: pointer; outline: none;
  transition: all .15s; height: 32px;
}
.filter-select:focus, .filter-select:hover { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(155,17,30,.06); }
.filter-sep { width: 1px; height: 20px; background: var(--border); margin: 0 .15rem; flex-shrink: 0; }
.btn-clear-filters {
  padding: .3rem .65rem; border: 1px solid var(--border); border-radius: 8px;
  background: none; font-family: var(--font); font-size: .75rem; height: 32px;
  color: var(--text-muted); cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: .3rem;
}
.btn-clear-filters:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-subtle); }
.btn-clear-filters svg { width: 12px; height: 12px; }

/* searchable filter dropdown */
.ss-wrap { position: relative; display: inline-block; }
.ss-native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.ss-trigger { text-align: left; min-width: 120px; max-width: 200px; display: inline-flex; align-items: center; justify-content: space-between; gap: .4rem; overflow: hidden; }
.ss-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-trigger::after { content: '▾'; font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }
.ss-trigger:disabled { cursor: default; }
.ss-panel { position: absolute; top: calc(100% + 5px); left: 0; z-index: 300; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.12); width: 260px; padding: .6rem; }
.ss-search { width: 100%; box-sizing: border-box; padding: .55rem .8rem; border: 1.5px solid var(--border); border-radius: 10px; font-family: var(--font); font-size: .9rem; color: var(--text); background: var(--bg-card); outline: none; margin-bottom: .5rem; }
.ss-search:focus { border-color: #9B111E; }
.ss-list { max-height: 300px; overflow-y: auto; }
.ss-item { padding: .55rem .8rem; border-radius: 8px; font-size: .9rem; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item:hover { background: rgba(155,17,30,.06); }
.ss-item.ss-active { background: rgba(155,17,30,.1); font-weight: 600; color: #9B111E; }
.ss-empty { padding: .6rem .8rem; font-size: .85rem; color: var(--text-muted); }

/* filter pills */
#filterPills {
  display: none; align-items: center; flex-wrap: wrap; gap: .4rem;
  padding: .5rem 1.5rem; background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.f-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--brand-subtle); color: #9B111E;
  border: 1px solid rgba(155,17,30,.15); border-radius: 20px;
  padding: .25rem .7rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.f-pill:hover { background: #9B111E; color: #fff; border-color: #9B111E; }
.f-pill-x { font-size: .9rem; line-height: 1; }

/* ---- CONTENT AREA ---- */
#content {
  flex: 1; overflow-y: auto; padding: 2rem 2.25rem;
  background: var(--bg);
  /* Keep the scrollbar's space reserved whether or not it is showing. Without
     this, anything that changes the page height — switching page, opening a
     panel, a filter returning fewer rows — makes the scrollbar appear or
     vanish and shunts the whole page sideways by its width. That sideways
     jolt is what reads as the screen shaking when you press something. */
  scrollbar-gutter: stable;
}
#content > .page.active { max-width: 1600px; }
.page { display: none; }
/* Every page used to slide up 6px and fade in over 200ms on arrival. On a
   dashboard you move around all day that movement is the thing you notice, so
   pages now simply appear. */
.page.active { display: block; }
/* The press behaviour is defined once, in the MOTION block at the end of this
   stylesheet. It used to live here as well, and two definitions of the same
   thing is how this file ended up with surprises in it. */

/* Skeleton loading */
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
.skeleton-row { height: 42px; margin-bottom: 4px; border-radius: 6px; }
.skeleton-text { height: 14px; margin-bottom: 8px; width: 60%; }
#loading-skeleton { display: none; }
#loading-skeleton.active { display: block; }

/* Table row hover enhancement */
table.data-table tbody tr { transition: background .12s; }
table.data-table tbody tr:hover td { background: rgba(155,17,30,.03); }

/* ---- KPI CARDS ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem; margin-bottom: 1.75rem;
}
.kpi-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.35rem 1.35rem 1.1rem;
  /* Only the two things that actually change on hover. `all` on a card this
     size animates layout properties too, which is what makes a press feel
     heavy. */
  box-shadow: var(--shadow); transition: box-shadow .2s ease, border-color .2s ease;
  position: relative; overflow: hidden;
}
.kpi-card:hover { box-shadow: var(--shadow-md); }
.kpi-card.clickable { cursor: pointer; }
.kpi-card.clickable:hover { border-color: var(--brand); }
.kpi-label {
  font-size: .75rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .55rem;
}
.kpi-value {
  font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* ---- SECTION CARDS ---- */
.section-grid-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 1.1rem; margin-bottom: 1.75rem; }
.section-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem;
  box-shadow: var(--shadow);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem; font-weight: 600; color: var(--text);
  margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem;
}
.section-title svg { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; }

/* ---- BUTTON HIERARCHY ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-family:var(--font); font-size:.875rem; font-weight:500; padding:.55rem 1rem; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; transition:background .18s ease, box-shadow .18s ease, transform .12s ease, border-color .18s ease; line-height:1; white-space:nowrap; }
.btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.btn svg { width:16px; height:16px; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-hover); box-shadow:0 4px 12px rgba(155,17,30,.22); transform:translateY(-1px); }
.btn-secondary { background:var(--bg-card); color:var(--text); border-color:var(--border); }
.btn-secondary:hover { background:var(--bg-subtle); border-color:var(--text-muted); }
.btn-danger { background:rgba(220,38,38,.08); color:var(--c-danger); border-color:rgba(220,38,38,.3); }
.btn-danger:hover { background:var(--c-danger); color:#fff; }
.btn-success { background:var(--c-success); color:#fff; }
.btn-success:hover { filter:brightness(.94); box-shadow:0 4px 12px rgba(22,163,74,.22); transform:translateY(-1px); }
.btn-info { background:var(--c-info); color:#fff; }
.btn-info:hover { filter:brightness(.94); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover { background:var(--bg-subtle); color:var(--text); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ---- TABS ---- */
.tabs { display:flex; gap:.15rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; overflow-x:auto; }
.tab-btn { appearance:none; background:none; border:none; font-family:var(--font); font-size:.9rem; font-weight:500; color:var(--text-secondary); padding:.7rem 1rem; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .15s, border-color .15s; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--brand-text); border-bottom-color:var(--brand); font-weight:600; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ---- STATUS PILLS ---- */
.pill { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; letter-spacing:.01em; }
.pill-pending { background:rgba(245,158,11,.14); color:#B45309; }
.pill-approved { background:rgba(22,163,74,.14); color:#15803D; }
.pill-rejected { background:rgba(220,38,38,.14); color:#B91C1C; }
.pill-cancelled { background:var(--bg-subtle); color:var(--text-muted); }
.pill-info { background:rgba(37,99,235,.14); color:#1D4ED8; }

/* ---- PAYROLL RATE CARDS ---- */
.rate-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; max-width:640px; }
.rate-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; }
.rate-card .rate-role { font-size:.78rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; }
.rate-card .rate-val { font-size:1.75rem; font-weight:700; color:var(--text); margin:.4rem 0 .1rem; font-variant-numeric:tabular-nums; }
.rate-card .rate-val small { font-size:.82rem; font-weight:500; color:var(--text-muted); }

/* ---- PROGRAM OVERVIEW CARDS ---- */
.pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.pc-card {
  position: relative; text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.15rem 2.2rem;
  box-shadow: var(--shadow); transition: border-color .18s, box-shadow .18s, transform .12s;
  overflow: hidden;
}
.pc-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--pc-accent, var(--brand));
}
.pc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.pc-card.active { border-color: var(--pc-accent, var(--brand)); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.pc-card-label { font-size: .82rem; font-weight: 700; color: var(--text-secondary); letter-spacing: .01em; }
.pc-card-median { font-size: 2.6rem; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: .35rem 0 .15rem; }
.pc-card-sub { font-size: .74rem; color: var(--text-muted); display: flex; gap: .6rem; flex-wrap: wrap; }
/* Full-width drill-down panel (accordion) */
.pc-gtable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pc-gtable th { text-align: left; padding: .45rem .6rem; font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.pc-gtable td { padding: .55rem .6rem; border-top: 1px solid var(--border); color: var(--text-secondary); }
.pc-gtable tr.pc-g-row { cursor: pointer; transition: background .12s; }
.pc-gtable tr.pc-g-row:hover { background: var(--brand-subtle, rgba(0,0,0,.04)); }
.pc-gtable td.pc-g-name { font-weight: 600; color: var(--text); }
.pc-gtable th.pc-num, .pc-gtable td.pc-num { text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .pc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pc-grid { grid-template-columns: 1fr; } .pc-card-median { font-size: 2.2rem; } }
.pc-card-open { position:absolute; bottom:1rem; right:1.1rem; font-size:.72rem; font-weight:700; color:var(--brand-text); display:flex; align-items:center; gap:.25rem; }

/* ---- OVERVIEW BRANCH FOCUS WINDOW ---- */
.ovf { position:fixed; z-index:56; display:flex; flex-direction:column; background:var(--bg); opacity:0; transform:translateY(12px) scale(.99); pointer-events:none; transition:opacity .22s ease, transform .22s cubic-bezier(.2,.7,.2,1); }
.ovf.on { opacity:1; transform:none; pointer-events:auto; }
.ovf-bar { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.85rem 1.5rem; background:var(--bg-card); border-bottom:1px solid var(--border); flex-shrink:0; }
.ovf-back { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font); font-size:.84rem; font-weight:700; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:.45rem .75rem; cursor:pointer; transition:border-color .15s; }
.ovf-back:hover { border-color:var(--brand); color:var(--brand-text); }
.ovf-crumbs { display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--text-muted); min-width:0; }
.ovf-crumbs b { color:var(--text); font-weight:700; }
.ovf-crumbs .sep { opacity:.5; }
.ovf-med { margin-left:auto; text-align:right; line-height:1; }
.ovf-med .v { font-size:1.6rem; font-weight:800; letter-spacing:-.02em; color:var(--brand-text); font-variant-numeric:tabular-nums; }
.ovf-med .l { font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.ovf-x { width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:1.05rem; cursor:pointer; display:grid; place-items:center; transition:border-color .15s; }
.ovf-x:hover { border-color:var(--brand); color:var(--brand-text); }
.ovf-scroll { flex:1; overflow-y:auto; padding:1.5rem; }
.ovf-in { max-width:1120px; margin:0 auto; }
.ovf-title { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:0 0 .2rem; color:var(--text); }
.ovf-lead { color:var(--text-muted); font-size:.86rem; margin:0 0 1.4rem; }
.ovf-bgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem; }
.ovf-branch { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:1.1rem 1.15rem 1rem; cursor:pointer; text-align:left; font-family:var(--font); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.04); opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease, border-color .16s; }
.ovf-branch.in { opacity:1; transform:none; }
.ovf-branch:hover { border-color:var(--brand); box-shadow:0 8px 22px rgba(0,0,0,.10); }
.ovf-b-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.ovf-b-name { font-size:1rem; font-weight:700; }
.ovf-b-rank { font-size:.66rem; font-weight:800; color:var(--text-muted); background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:.2rem .5rem; white-space:nowrap; }
.ovf-b-med { display:flex; align-items:baseline; gap:.5rem; margin:.6rem 0 .05rem; }
.ovf-b-med .v { font-size:2.6rem; font-weight:800; letter-spacing:-.03em; color:var(--brand-text); line-height:.95; font-variant-numeric:tabular-nums; }
.ovf-delta { font-size:.72rem; font-weight:800; padding:.14rem .45rem; border-radius:999px; font-variant-numeric:tabular-nums; }
.ovf-delta.up { color:#0E9F6E; background:rgba(14,159,110,.12); }
.ovf-delta.dn { color:#CC3D46; background:rgba(204,61,70,.12); }
.ovf-delta.eq { color:var(--text-muted); background:var(--bg); }
.ovf-b-medl { font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.85rem; }
.ovf-b-stats { display:flex; gap:1rem; padding-top:.8rem; border-top:1px solid var(--border); }
.ovf-stat .n { font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums; }
.ovf-stat .k { font-size:.66rem; color:var(--text-muted); font-weight:600; margin-top:.05rem; }
.ovf-pbar { height:7px; border-radius:999px; background:var(--bg); overflow:hidden; margin-top:.85rem; }
.ovf-pbar > i { display:block; height:100%; border-radius:999px; transition:width .5s ease; }
.ovf-plegend { display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; font-size:.7rem; color:var(--text-muted); }
.ovf-plegend b { color:var(--text); font-weight:800; }
.ovf-b-go { margin-top:.9rem; font-size:.78rem; font-weight:700; color:var(--brand-text); display:inline-flex; align-items:center; gap:.3rem; }
.ovf-gwrap { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.ovf-gscroll { overflow-x:auto; }
@media (max-width: 560px) { .ovf-med { margin-left:0; } .ovf-b-med .v { font-size:2.3rem; } }
@media (prefers-reduced-motion: reduce) { .ovf, .ovf-branch { transition:none !important; } .ovf-branch { opacity:1; transform:none; } }

/* ---- TABLES ---- */
.table-wrap { overflow-x: auto; overflow-y: auto; max-height: 70vh; }
table.data-table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
}
table.data-table th {
  background: #F8F9FA; padding: .7rem .9rem;
  text-align: left; font-size: .78rem; font-weight: 700;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
table.data-table td {
  padding: .7rem .9rem; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: rgba(155,17,30,.02); }
table.data-table tr.row-danger td { background: rgba(239,68,68,.04); }
table.data-table tr.row-warn td { background: rgba(251,191,36,.04); }
body.dark table.data-table th { background: #1E1E30; }
body.dark table.data-table tr:hover td { background: rgba(255,255,255,.03); }

/* ---- TREND ARROW ---- */
.trend-up { color: var(--c-trend-up); font-weight: 700; }
.trend-down { color: var(--c-trend-down); font-weight: 700; }
.trend-flat { color: var(--c-trend-flat); font-weight: 700; }

/* ---- ALERTS PAGE ---- */
.btn-resolve {
  padding: .3rem .75rem; font-family: var(--font); font-size: .8rem;
  font-weight: 600; border-radius: 8px; cursor: pointer; transition: all .15s;
  border: 1.5px solid var(--border); background: none; color: var(--text-secondary);
  white-space: nowrap;
}
.btn-resolve:hover { border-color: var(--brand); color: var(--brand-text); }
.btn-resolve.done { color: var(--t-green); border-color: rgba(16,185,129,.4); }
/* ---- CHART CARDS ---- */
.chart-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.35rem;
  box-shadow: var(--shadow); margin-bottom: 1.1rem;
}
/* ---- MODALS ---- */
#atRiskModal, #userModal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 1000;
  align-items: center; justify-content: center; padding: 1rem;
}
.modal-card {
  background: var(--bg-card); border-radius: 16px;
  width: 100%; max-width: 900px; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 25px 60px rgba(0,0,0,.2);
}
.modal-header {
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.modal-title { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.modal-body { padding: 1.35rem 1.5rem; overflow-y: auto; flex: 1; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.btn-modal-close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: .3rem; border-radius: 6px; display: flex; align-items: center;
  transition: color .2s;
}
.btn-modal-close:hover { color: var(--text); }
.btn-modal-close svg { width: 18px; height: 18px; }

/* user modal specific */
.um-card {
  background: var(--bg-card); border-radius: 16px;
  width: 100%; max-width: 680px; max-height: 88vh;
  overflow-y: auto; padding: 1.5rem 1.75rem;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
}
.um-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.um-title { font-size: 1.1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: .5rem; }
.um-title svg { width: 20px; height: 20px; color: var(--brand-text); }
.btn-um-close { background: none; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--text-muted); padding: .35rem .55rem; display: flex; align-items: center; transition: all .15s; }
.btn-um-close:hover { border-color: var(--brand); color: var(--brand-text); }
.um-section-title { font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .65rem; margin-top: .5rem; }
.um-user-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.um-user-card { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg); transition: border-color .15s; }
.um-user-card:hover { border-color: var(--brand); box-shadow: 0 1px 10px rgba(155,27,48,.07); }
.um-user-avatar { width: 38px; height: 38px; border-radius: 10px; background: var(--brand); color: #fff; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; }
.um-user-info { flex: 1; min-width: 0; }
.um-user-name { font-weight: 700; font-size: .9rem; color: var(--text); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.um-user-meta { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.um-user-progs { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.um-user-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.um-user-actions button { padding: .25rem .55rem; border-radius: 7px; font-size: .72rem; font-weight: 600; cursor: pointer; font-family: var(--font); transition: all .15s; border: 1.5px solid var(--border); background: none; color: var(--text-muted); }
.um-user-actions button:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-subtle); }
.um-user-actions .um-btn-remove { border-color: color-mix(in srgb, var(--brand) 35%, transparent); color: var(--brand-text); }
.um-user-actions .um-btn-remove:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.you-badge { font-size: .62rem; font-weight: 700; background: var(--brand); color: #fff; border-radius: 5px; padding: .12rem .4rem; }
.um-role-tag { display: inline-flex; padding: .15rem .45rem; border-radius: 5px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--brand-subtle); color: var(--brand-text); }
.um-prog-chip { display: inline-flex; padding: .1rem .45rem; border-radius: 5px; font-size: .65rem; font-weight: 600; background: var(--brand-subtle); color: var(--brand-text); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.um-2step { font-size: .66rem; font-weight: 700; color: var(--brand-text); background: var(--brand-subtle); padding: .12rem .4rem; border-radius: 5px; align-self: center; }
.um-prog-pick { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1.5px solid var(--border); border-radius: 9px; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--text); background: var(--bg-card); transition: all .15s; }
.um-prog-pick:hover { border-color: var(--brand); }
.um-prog-pick.is-on { border-color: var(--brand); background: var(--brand-subtle); color: var(--brand-text); }
.um-prog-pick input { accent-color: var(--brand); width: 18px; height: 18px; flex-shrink: 0; }
.um-toolbar { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.um-search { flex: 1; min-width: 0; position: relative; }
.um-search::before { content: ''; position: absolute; left: .65rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; background: currentColor; color: var(--text-muted);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center/contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center/contain; }
.um-search input { width: 100%; padding: .5rem .75rem .5rem 2.1rem; border: 1.5px solid var(--border); border-radius: 9px; font-size: .88rem; font-family: var(--font); background: var(--bg); color: var(--text); outline: none; }
.um-card-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 1rem; }
.um-person-card { display: flex; flex-direction: column; gap: .5rem; padding: .9rem; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg); transition: border-color .15s, box-shadow .15s; }
.um-person-card:hover { border-color: var(--brand); box-shadow: 0 1px 10px rgba(155,27,48,.07); }
.um-person-top { display: flex; align-items: center; gap: .6rem; }
.um-person-id { min-width: 0; flex: 1; }
.um-person-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.um-person-email { margin-top: 0; }
.um-person-actions { flex-wrap: wrap; margin-top: auto; padding-top: .25rem; }
.um-person-actions select { max-width: 100%; }
.um-divider { border: none; border-top: 1.5px solid var(--border); margin: 1.25rem 0; }
.um-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
.um-field label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .35rem; }
.um-field input, .um-field select { width: 100%; padding: .55rem .75rem; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: .88rem; color: var(--text); background: var(--bg-card); outline: none; }
.um-field input:focus, .um-field select:focus { border-color: var(--brand); }
body.dark .um-field input, body.dark .um-field select { background: #111120; border-color: #2D2D3F; color: #F3F4F6; }
.btn-add-user { padding: .6rem 1.25rem; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-family: var(--font); font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.btn-add-user:hover { background: var(--brand-hover); }
.btn-del-user { padding: .2rem .5rem; background: none; border: 1.5px solid rgba(239,68,68,.35); border-radius: 6px; color: var(--t-red); font-size: .75rem; font-weight: 600; cursor: pointer; font-family: var(--font); transition: all .15s; }
.btn-del-user:hover { background: rgba(239,68,68,.1); }
.btn-manage-users { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; background: var(--brand-subtle); border: 1.5px solid rgba(155,17,30,.25); color: #9B111E; border-radius: 8px; font-family: var(--font); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.btn-manage-users:hover { background: #9B111E; color: #fff; }
.btn-manage-users svg { width: 13px; height: 13px; }
.um-msg-error { color: var(--t-red); font-size: .82rem; margin-top: .5rem; }
.um-msg-success { color: var(--t-green); font-size: .82rem; margin-top: .5rem; }
.btn-logout { padding: .35rem .75rem; background: none; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: .8rem; color: var(--text-secondary); cursor: pointer; transition: all .2s; }
.btn-logout:hover { border-color: #EF4444; color: var(--t-red); }
.btn-export { padding: .45rem .9rem; background: none; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: .82rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .2s; }
.btn-export:hover { border-color: var(--brand); color: var(--brand-text); }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  #sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 500; transform: translateX(-100%); margin-left: 0 !important; }
  #sidebar.collapsed { margin-left: 0 !important; transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  #main-area { width: 100%; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .section-grid-2 { grid-template-columns: 1fr; }
  #content { padding: 1rem; }
  #filter-bar { padding: .5rem .75rem; gap: .4rem; }
  .filter-select { font-size: .78rem; padding: .3rem .5rem; height: 30px; }
  .filter-sep { display: none; }
  .detail-card { max-width: 100%; max-height: 95vh; border-radius: 12px; }
  .modal-card { max-width: 100%; max-height: 92vh; }
  .chat-bubble { max-width: 92%; }
  #main-header { padding: 0 1rem; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; gap: .75rem; }
  .kpi-value { font-size: 1.8rem; }
  .page-title { font-size: 1.1rem; }
  .section-title { font-size: .92rem; }
  table.data-table { font-size: .78rem; }
  table.data-table th, table.data-table td { padding: .5rem .5rem; }
  .detail-body { padding: 1rem; }
  .detail-stats { gap: .5rem; }
  .detail-stat { padding: .5rem .75rem; min-width: 70px; }
  .detail-stat-value { font-size: 1.15rem; }
  .inbox-card-header { padding: .75rem 1rem; flex-direction: column; }
  .inbox-card-actions { width: 100%; }
  .btn-approve, .btn-reject { flex: 1; text-align: center; }
}
/* ---- General mobile pass: modals, wide tables, drill-downs ---- */
@media (max-width: 640px) {
  /* Modal cards fill the width instead of a fixed max-width */
  #invModal > div, #staffRemoveModal > div, #bookingDetailOverlay > div,
  #ovNoteModal > div, .modal-card { max-width: 100% !important; width: 100% !important; }
  /* Any inline two-column grids inside modals/pages stack */
  #invModal [style*="grid-template-columns:1fr 1fr"],
  #page-roomavail [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Program-card drill: single column, roomier scroll */
  .pc-card-median { font-size: 2rem; }
  /* Wide exam-management tables always scroll horizontally */
  #page-reporting table, #page-invigilators table, #page-roomavail table { min-width: 640px; }
  #page-reporting .section-card, #page-invigilators > div, #page-roomavail > div,
  #page-reporting > div { max-width: 100%; }
  /* Quick-access cards: two per row on small screens */
  #main-area .pc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  #main-area .pc-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1400px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  #content { padding: 2rem 2.5rem; }
}
.hamburger {
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; color: var(--text-muted);
  padding: .35rem; margin-right: .35rem; transition: all .15s;
}
.hamburger:hover { background: var(--bg-secondary); color: var(--text); border-color: var(--brand); }
.hamburger svg { width: 18px; height: 18px; }

/* ---- PAGE TITLE AREA ---- */
.page-header { margin-bottom: 1.5rem; }
.page-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.page-subtitle { font-size: .88rem; color: var(--text-muted); margin-top: .25rem; }

/* overlay sidebar bg for mobile */
#sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 499; }
#sidebar-overlay.visible { display: block; }

/* ---- SCORE ENTRY PAGE ---- */
.score-entry-form { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);margin-bottom:1.25rem; }
.se-field { display:flex;flex-direction:column;gap:.35rem; }
.se-field label { font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em; }
.se-field input,.se-field select { padding:.55rem .75rem;border:1.5px solid var(--border);border-radius:8px;font-family:var(--font);font-size:.88rem;color:var(--text);background:var(--bg-card);outline:none;transition:border-color .2s;height:38px; }
.se-field input:focus,.se-field select:focus { border-color:var(--brand); }
body.dark .se-field input,body.dark .se-field select { background:#111120;border-color:#2D2D3F;color:#F3F4F6; }
/* Score entry: progress counter, keyboard hint, and a header that stays put
   while scrolling a long class list. */
.se-progress { font-size:.72rem;font-weight:700;color:var(--text-muted);background:var(--bg-secondary);border:1px solid var(--border);padding:.15rem .5rem;border-radius:999px;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0; }
.se-progress-done { color:var(--t-green);background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35); }
.se-progress-warn { color:#B45309;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4); }
#seScoreTable thead th { position:sticky;top:0;z-index:2;background:var(--bg-card); }
body.dark #seScoreTable thead th { background:#15151F; }
body.dark .se-progress { background:#1B1B27;border-color:#2D2D3F; }

/* Searchable group picker — the group list is ~1700 entries, far past what a
   native dropdown can handle. Results are capped at 60 per keystroke so the
   list stays fast, with a hint to keep typing when there are more. */
.gp-wrap { position:relative; }
.gp-input { width:100%;padding:.55rem 2rem .55rem .75rem;border:1.5px solid var(--border);border-radius:8px;font-family:var(--font);font-size:.88rem;color:var(--text);background:var(--bg-card);outline:none;transition:border-color .2s;height:38px;box-sizing:border-box; }
.gp-input:focus { border-color:var(--brand); }
.gp-input:disabled { opacity:.55;cursor:not-allowed; }
.gp-clear { position:absolute;right:.4rem;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-muted);font-size:1.15rem;line-height:1;cursor:pointer;border-radius:6px; }
.gp-clear:hover { background:var(--bg-secondary);color:var(--text); }
/* The button carries the `hidden` attribute when no group is picked, but the
   display above overrode it, so an empty box showed a clear-me cross. */
.gp-clear[hidden] { display: none; }
.gp-list { position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;max-height:290px;overflow-y:auto;background:var(--bg-card);border:1.5px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:.25rem; }
.gp-opt { display:flex;align-items:baseline;gap:.5rem;padding:.5rem .6rem;border-radius:7px;cursor:pointer;font-size:.86rem;color:var(--text);min-height:36px;box-sizing:border-box; }
.gp-opt:hover,.gp-opt.gp-active { background:var(--brand-subtle); }
.gp-opt.gp-active { outline:2px solid var(--brand);outline-offset:-2px; }
.gp-opt-name { font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.gp-opt-meta { font-size:.74rem;color:var(--text-muted);flex-shrink:0; }
.gp-head { padding:.4rem .6rem .25rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted); }
.gp-empty { padding:.85rem .6rem;font-size:.85rem;color:var(--text-muted);text-align:center; }
.gp-hidden-select { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0); }
body.dark .gp-input { background:#111120;border-color:#2D2D3F;color:#F3F4F6; }
body.dark .gp-list { background:#15151F;border-color:#2D2D3F;box-shadow:0 8px 24px rgba(0,0,0,.5); }
.btn-load-students { padding:.55rem 1.25rem;background:var(--brand-subtle);border:1.5px solid rgba(122,31,62,.25);border-radius:8px;font-family:var(--font);font-size:.88rem;font-weight:600;color:var(--brand-text);cursor:pointer;transition:all .2s;height:38px;align-self:flex-end; }
.btn-load-students:hover { background:var(--brand);color:#fff; }
/* Collapsed setup bar — shown in place of the setup fields once students load. */
.se-setup-summary { display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:.7rem 1rem;margin-bottom:1rem; }
.se-setup-chips { display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0; }
.se-setup-chip { display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--text);background:var(--bg-secondary);border-radius:999px;padding:.25rem .7rem;white-space:nowrap; }
.se-setup-chip b { font-weight:700; }
.se-setup-chip.se-chip-group { background:var(--brand-subtle);color:var(--brand-text); }
.se-setup-edit { padding:.4rem .9rem;border:1.5px solid var(--border);border-radius:8px;background:transparent;font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--text-muted);cursor:pointer;min-height:34px;transition:all .15s;flex-shrink:0; }
.se-setup-edit:hover { border-color:var(--brand);color:var(--brand-text); }
body.dark .se-setup-summary { background:#15151F;border-color:#2D2D3F; }
/* Phones: the controls a teacher taps over and over need a real target.
   Measured at 375px the score box was 28px tall and picker rows 36px, well
   under the 44px minimum, which makes entering 25 scores fiddly. */
/* Touch devices, not just narrow ones. Keyed on pointer:coarse as well as
   width because an iPad is 768px wide and fell one pixel outside a
   max-width:767px rule — so tablets kept the 28px desktop controls despite
   being touch-only. Measured: 7 of 12 pages had targets under 44px at 768px. */
@media (max-width: 1024px), (pointer: coarse) {
  /* App-wide minimum tap target. Measured across pages, buttons and selects
     were coming out at 28px — half the 44px people can reliably hit. Uses
     min-height so anything already taller is left alone. */
  main button, main select, main input:not([type=checkbox]):not([type=radio]),
  main a[onclick], main [role="button"] { min-height:44px; }
  main input:not([type=checkbox]):not([type=radio]), main select { font-size:16px; }
  .se-score-input { height:44px;font-size:16px; }        /* 16px stops iOS zooming on focus */
  .se-name-input { min-height:44px;font-size:16px; }
  .gp-input { height:44px;font-size:16px; }
  .gp-opt { min-height:44px;align-items:center; }
  .se-setup-edit { min-height:44px; }
  .se-status-select { min-height:44px !important;font-size:16px !important; }
  .se-field input,.se-field select { height:44px;font-size:16px; }
  .btn-calculate,.btn-save-scores,.btn-load-students { min-height:44px; }
}
.score-entry-actions { display:flex;align-items:center;gap:.75rem;margin-top:1rem;flex-wrap:wrap; }
.btn-calculate { padding:.6rem 1.4rem;background:var(--brand);color:#fff;border:none;border-radius:8px;font-family:var(--font);font-size:.88rem;font-weight:600;cursor:pointer;transition:background .2s; }
.btn-calculate:hover { background:var(--brand-hover); }
.btn-save-scores { padding:.6rem 1.4rem;background:#10B981;color:#fff;border:none;border-radius:8px;font-family:var(--font);font-size:.88rem;font-weight:600;cursor:pointer;transition:background .2s; }
.btn-save-scores:hover { background:#059669; }
.se-success-msg { font-size:.85rem;font-weight:600;color:var(--t-green);padding:.5rem .85rem;background:rgba(16,185,129,.1);border-radius:8px;display:none; }
.se-summary { display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem; }
.se-stat { background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:.6rem 1rem;min-width:100px; }
.se-stat-label { font-size:.68rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em; }
.se-stat-value { font-size:1.5rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;margin-top:.1rem; }
.se-name-input { border:none;background:transparent;font-family:var(--font);font-size:.84rem;color:var(--text);width:100%;outline:none;padding:0; }
.se-name-input:focus { background:var(--brand-subtle);border-radius:4px;padding:.1rem .3rem;outline:1.5px solid var(--brand); }
body.dark .se-name-input { background:transparent;color:#F3F4F6; }
body.dark .se-name-input:focus { background:#2A1525; }
.se-score-input { width:80px;padding:.3rem .5rem;border:1.5px solid var(--border);border-radius:6px;font-family:var(--font);font-size:.84rem;color:var(--text);background:var(--bg-card);outline:none;text-align:center;transition:border-color .2s;font-variant-numeric:tabular-nums; }
.se-score-input:focus { border-color:var(--brand); }
body.dark .se-score-input { background:#111120;border-color:#2D2D3F;color:#F3F4F6; }
.se-pct-cell { font-weight:700;font-variant-numeric:tabular-nums;font-size:.88rem;min-width:56px;display:inline-block; }
/* ---- INBOX / APPROVAL ---- */
.inbox-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:0;margin-bottom:1rem;box-shadow:var(--shadow);overflow:hidden; }
.inbox-card-header { display:flex;align-items:flex-start;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);gap:1rem; }
.inbox-card-meta { flex:1;min-width:0; }
.inbox-card-title { font-size:1.02rem;font-weight:700;color:var(--text);margin-bottom:.3rem; }
.inbox-card-actions { display:flex;gap:.5rem;flex-shrink:0; }
.btn-approve { padding:.45rem 1rem;background:#047857;color:#fff;border:none;border-radius:8px;font-family:var(--font);font-size:.82rem;font-weight:700;cursor:pointer;transition:background .15s; }
.btn-approve:hover { background:#065F46; }
.btn-reject { padding:.45rem 1rem;background:none;border:1.5px solid rgba(239,68,68,.4);color:var(--t-red);border-radius:8px;font-family:var(--font);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s; }
.btn-reject:hover { background:rgba(239,68,68,.08); }
.inbox-card-stats { display:flex;gap:.75rem;flex-wrap:wrap;padding:.85rem 1.25rem;border-bottom:1px solid var(--border);background:var(--bg); }
.inbox-card-stat { text-align:center;min-width:64px; }
.inbox-card-stat-label { font-size:.65rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em; }
.inbox-card-stat-value { font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:.1rem; }
.inbox-card-toggle { padding:.6rem 1.25rem;font-size:.78rem;color:var(--brand-text);font-weight:600;cursor:pointer;user-select:none;display:flex;align-items:center;gap:.4rem; }
.inbox-card-toggle:hover { background:var(--brand-subtle); }
.inbox-card-table { display:none; }
/* ---- 3-DOT MENU ---- */
.dot-menu { position:relative;display:inline-block; }
.dot-menu-btn { background:none;border:none;cursor:pointer;padding:4px 6px;font-size:1.1rem;color:var(--text-muted);border-radius:6px;line-height:1; }
.dot-menu-btn:hover { background:var(--bg);color:var(--text); }
.dot-menu-drop { display:none;position:fixed;min-width:200px;background:var(--bg-card,#fff);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:99999;overflow:hidden; }
.dot-menu-drop.open { display:block; }
.dot-menu-item { display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;font-size:.82rem;font-weight:500;color:var(--text);cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:var(--font); }
.dot-menu-item:hover { background:var(--bg); }
.dot-menu-item svg { width:14px;height:14px;flex-shrink:0; }
.row-action-btn { display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);cursor:pointer;font-size:.72rem;font-weight:600;font-family:var(--font);color:var(--text-muted);white-space:nowrap;transition:all .15s; }
.row-action-btn:hover { background:var(--bg);color:var(--text);border-color:var(--text-muted); }
.row-action-btn svg { width:12px;height:12px;flex-shrink:0; }
.row-action-btn.send-btn { color:var(--t-green);border-color:rgba(5,150,105,.3); }
.row-action-btn.send-btn:hover { background:rgba(5,150,105,.08);border-color:#059669; }
/* ---- CHAT INBOX ---- */
.chat-thread { background:var(--bg-card);border:1px solid var(--border);border-radius:12px;margin-bottom:1rem;overflow:hidden; }
.chat-header { padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; }
.chat-status { display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.2rem .55rem;border-radius:20px; }
.chat-status.open { background: var(--warn-tint); color: var(--warn-ink); }
.chat-status.reviewed { background: var(--ok-tint); color: var(--ok-ink); }
.chat-messages { padding:.75rem 1.25rem;max-height:400px;overflow-y:auto; }
.chat-msg { margin-bottom:.65rem;display:flex;flex-direction:column; }
.chat-msg.sent { align-items:flex-end; }
.chat-msg.received { align-items:flex-start; }
.chat-bubble { max-width:85%;padding:.55rem .85rem;border-radius:12px;font-size:.85rem;line-height:1.55;word-break:break-word; }
.chat-msg.sent .chat-bubble { background:var(--brand);color:#fff;border-bottom-right-radius:4px; }
.chat-msg.received .chat-bubble { background:var(--bg);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px; }
.chat-msg-meta { font-size:.68rem;color:var(--text-muted);margin-top:.15rem;padding:0 .25rem; }
.chat-reply { display:flex;gap:.5rem;padding:.75rem 1.25rem;border-top:1px solid var(--border);background:var(--bg); }
.chat-reply input { flex:1;padding:.5rem .75rem;border:1.5px solid var(--border);border-radius:8px;font-size:.85rem;font-family:var(--font);background:var(--bg-card,#fff);color:var(--text);outline:none; }
.chat-reply input:focus { border-color:var(--brand); }
.chat-reply button { padding:.5rem 1rem;background:var(--brand);color:#fff;border:none;border-radius:8px;font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap; }
.chat-reply button:hover { opacity:.9; }
.chat-note-public { margin:.5rem 1.25rem;padding:.5rem .75rem;background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.15);border-radius:8px; }
.chat-note-public .note-label { font-size:.7rem;font-weight:700;color:var(--t-indigo);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.2rem; }
.chat-note-public .note-text { font-size:.82rem;color:var(--text);line-height:1.5; }
.pg-btn { display:inline-block;padding:.35rem .7rem;border:1px solid var(--border);border-radius:6px;font-size:.8rem;font-weight:600;color:var(--text);background:var(--bg-card);cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s; }
.pg-btn:hover { border-color:var(--brand);background:rgba(185,28,28,.06); }
.pg-btn[disabled],.pg-btn.disabled { opacity:.4;cursor:default;pointer-events:none; }

/* ============================================================
   DESIGN SYSTEM v2 — "refined professional", SATashkent ruby
   ------------------------------------------------------------
   One set of components for every page. Pages should use these
   classes instead of inline styles: there were 2,041 inline
   style attributes and 175 separately styled buttons, which is
   why no two screens looked alike. Every value here comes from
   a token, so light and dark themes follow automatically.
   ============================================================ */
:root {
--space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius: 12px;                /* was 16px — calmer, less bubbly */
  --radius-sm: 8px;

  /* --shadow itself is set once, with the rest of the palette, further up. */
  --ring: 0 0 0 3px var(--brand-subtle);
--z-modal: 10500;--z-toast: 10700;
}
body.dark {
  --shadow-md: 0 2px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(224,99,122,.26);
}

/* ---- Buttons: one primary per view, everything else quiet ---- */
.btn { border-radius: var(--radius-sm); font-weight: 600; font-size: .85rem; padding: .5rem .9rem; }
.btn-primary:hover { transform: none; box-shadow: none; background: var(--brand-hover); }
.btn-success:hover, .btn-info:hover { transform: none; box-shadow: none; filter: brightness(.95); }
.btn:focus-visible { box-shadow: var(--ring); outline: none; }
.btn-sm { padding: .32rem .6rem; font-size: .78rem; border-radius: 6px; }
.btn-lg { padding: .65rem 1.2rem; font-size: .92rem; }
.btn-block { width: 100%; }
.btn-icon { padding: .4rem; width: 32px; height: 32px; }
.btn-icon.btn-sm { width: 28px; height: 28px; padding: .25rem; }
.btn-quiet { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-quiet:hover { background: var(--bg-subtle); color: var(--text); }
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ---- Cards ---- */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: var(--space-4); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-title { font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.card-sub { font-size: .82rem; color: var(--text-muted); margin-top: .15rem; }
.card-body { padding: var(--space-5); }
.card-body.flush { padding: 0; }
.section-card { border-radius: var(--radius); padding: var(--space-5); }

/* ---- Toolbar: the row of filters/actions above a table ---- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-3); }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Tables ---- */
table.data-table th { background: var(--bg-subtle); font-size: .68rem; letter-spacing: .06em;
  color: var(--text-muted); border-bottom: 1px solid var(--border); padding: .55rem .75rem; }
table.data-table td { padding: .6rem .75rem; font-size: .86rem; }
table.data-table tr:hover td { background: var(--bg-subtle); }
.dt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-center { text-align: center; }
.dt-nowrap { white-space: nowrap; }
.dt-muted { color: var(--text-muted); }
.dt-strong { font-weight: 600; color: var(--text); }
.dt-actions { text-align: right; white-space: nowrap; }
.dt-actions .btn { margin-left: .3rem; }
tr.clickable { cursor: pointer; }

/* ---- Status pills ---- */
.pill-success { background: rgba(22,163,74,.12); color: var(--t-green); }
.pill-warn { background: rgba(245,158,11,.14); color: var(--t-amber); }
.pill-danger { background: rgba(220,38,38,.12); color: var(--t-red); }
.pill-info { background: rgba(37,99,235,.12); color: var(--t-indigo); }
.pill-neutral { background: var(--bg-subtle); color: var(--text-secondary); }
.pill-brand { background: var(--brand-subtle); color: var(--brand-text); }
.pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
body.dark .pill-success { background: rgba(52,211,153,.14); }
body.dark .pill-warn { background: rgba(251,191,36,.16); }
body.dark .pill-danger { background: rgba(248,113,113,.16); }
body.dark .pill-info { background: rgba(165,180,252,.16); }
body.dark .pill-brand { background: rgba(244,131,143,.14); }

/* ---- Stat tiles ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }
.stat-label { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.15; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: .8rem; font-weight: 500; color: var(--text-muted); }
.stat-meta { font-size: .76rem; color: var(--text-muted); margin-top: .2rem; }
.stat.is-good .stat-value { color: var(--t-green); }
.stat.is-warn .stat-value { color: var(--t-amber); }
.stat.is-bad .stat-value { color: var(--t-red); }

/* ---- Empty / restricted states ---- */
.empty { text-align: center; padding: var(--space-6) var(--space-4); color: var(--text-muted); }
.empty-icon { font-size: 1.6rem; line-height: 1; margin-bottom: var(--space-2); opacity: .7; }
.empty-title { font-size: .95rem; font-weight: 600; color: var(--text); margin-bottom: .25rem; }
.empty-text { font-size: .85rem; color: var(--text-muted); max-width: 46ch; margin: 0 auto; line-height: 1.55; }
.empty .btn { margin-top: var(--space-4); }

/* ---- Modal shell (one implementation; sits above legacy overlays) ---- */
.ui-modal { position: fixed; inset: 0; background: rgba(16,24,40,.5); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.ui-modal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); width: 100%; max-height: 88vh; display: flex; flex-direction: column; }
.ui-modal-sm .ui-modal-card { max-width: 420px; }
.ui-modal-md .ui-modal-card { max-width: 620px; }
.ui-modal-lg .ui-modal-card { max-width: 900px; }
.ui-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.ui-modal-title { font-size: 1rem; font-weight: 600; color: var(--text); }
.ui-modal-body { padding: var(--space-5); overflow-y: auto; font-size: .9rem; color: var(--text); line-height: 1.6; }
.ui-modal-footer { padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.ui-modal-x { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.3rem; line-height: 1; padding: .2rem .4rem; border-radius: 6px; }
.ui-modal-x:hover { background: var(--bg-subtle); color: var(--text); }

/* ---- Form controls ---- */
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: var(--space-3); }
.field-label { font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.field-hint { font-size: .76rem; color: var(--text-muted); }
.input, .select, .textarea { font-family: var(--font); font-size: .88rem; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .5rem .7rem; width: 100%; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: var(--ring); }
.textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
.field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.field-row > .field { flex: 1 1 200px; margin-bottom: 0; }

/* ---- Pagination ---- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3); flex-wrap: wrap; }
.pager-info { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- Page header ---- */
.page-header { margin-bottom: var(--space-4); }
.page-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.page-subtitle { font-size: .86rem; color: var(--text-muted); margin-top: .2rem; }

.data-table tr.dt-top td { vertical-align: top; }
/* ---- A choice you pick from a row (booking wizard) ---- */
.choice { --choice-accent: var(--brand);
  padding: .65rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); color: var(--text); font-family: var(--font); font-size: .9rem;
  font-weight: 500; cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease; }
.choice:hover { border-color: var(--choice-accent); }
.choice.is-on { border-color: var(--choice-accent); color: var(--choice-accent);
  background: var(--bg-subtle); font-weight: 650; }
@supports (background: color-mix(in srgb, red 8%, white)) {
  .choice.is-on { background: color-mix(in srgb, var(--choice-accent) 8%, var(--bg-card)); }
}
/* ---- Small segmented switch ---- */
.seg-btn { padding: .5rem 1.1rem; border: none; border-radius: var(--radius-sm); background: transparent;
  color: var(--text-secondary); font-family: var(--font); font-size: .82rem; font-weight: 650; cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.seg-btn:hover { background: var(--bg-subtle); color: var(--text); }
.seg-btn.is-on { background: var(--brand); color: #fff; }

/* a close (×) button reads better a touch larger */
.btn-icon { font-size: 1.05rem; line-height: 1; }

/* ---- Bring the older one-off controls onto the new look ---- */
/* Score entry, inbox and row buttons were each styled separately; these
   override the old rules so every button matches the shared .btn. */
.btn-calculate, .btn-save-scores, .btn-approve, .btn-reject, .btn-clear-filters, .pg-btn, .row-action-btn {
  font-family: var(--font); border-radius: var(--radius-sm); font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease; box-shadow: none;
}
.btn-calculate, .btn-save-scores, .btn-approve {
  padding: .5rem 1rem; font-size: .85rem; border: 1px solid transparent; color: #fff; cursor: pointer;
}
.btn-calculate { background: var(--brand); }
.btn-calculate:hover { background: var(--brand-hover); }
.btn-save-scores, .btn-approve { background: var(--brand); }
.btn-save-scores:hover, .btn-approve:hover { background: var(--brand-hover); }
.btn-reject { padding: .5rem 1rem; font-size: .85rem; background: var(--bg-card);
  border: 1px solid rgba(220,38,38,.35); color: var(--t-red); cursor: pointer; }
.btn-reject:hover { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.5); }
.btn-clear-filters, .pg-btn { padding: .45rem .85rem; font-size: .82rem;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.btn-clear-filters:hover, .pg-btn:hover { border-color: var(--text-muted); background: var(--bg); color: var(--text); }
.row-action-btn { padding: .3rem .6rem; font-size: .74rem; background: var(--bg-card);
  border: 1px solid var(--border); color: var(--text-secondary); }
.row-action-btn:hover { border-color: var(--text-muted); color: var(--text); background: var(--bg); }

/* Score entry fields match the shared .input / .select */
.se-field label { font-size: .72rem; font-weight: 650; letter-spacing: .04em; }
.se-field input, .se-field select, .gp-input {
  border-width: 1px; border-radius: var(--radius-sm); height: 40px; font-size: .88rem;
}
.se-field input:focus, .se-field select:focus, .gp-input:focus {
  border-color: var(--brand); box-shadow: var(--ring); outline: none;
}
.score-entry-form { box-shadow: none; padding: var(--space-5); }
.score-entry-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }

/* Conversation and submission cards */
.chat-thread, .inbox-card { border-radius: var(--radius); box-shadow: none; }

.inbox-card.is-alert { border-left: 3px solid var(--t-amber); }

.data-table-dense th, .data-table-dense td { padding: .5rem .6rem; }

/* ---- Overview hero ---- */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4);
  margin-bottom: var(--space-4); align-items: stretch; }
.hero-grid > .card { margin-bottom: 0; }
.hero-median .card-body { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 150px; }
.hero-number { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--brand); font-variant-numeric: tabular-nums; margin: .4rem 0; }
.hero-meta { font-size: .8rem; color: var(--text-muted); }
.mini-row { display: flex; align-items: center; gap: var(--space-3); padding: .5rem var(--space-4);
  border-bottom: 1px solid var(--border); }
.mini-row:last-child { border-bottom: 0; }
.mini-rail { display: inline-block; width: 3px; height: 26px; border-radius: 2px; flex-shrink: 0; }
.mini-main { flex: 1; min-width: 0; }
.mini-title { font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-meta { font-size: .72rem; color: var(--text-muted); }

/* ---- The review banner that opens the big table ---- */
.review-banner { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  padding: var(--space-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: var(--space-4); cursor: pointer; font-family: var(--font); transition: border-color .15s ease; }
.review-banner:hover { border-color: var(--brand); }
.review-chevron { font-size: 1.3rem; color: var(--text-muted); line-height: 1; transition: transform .18s ease; }
.review-banner.is-open .review-chevron { transform: rotate(90deg); }
.review-main { flex: 1; min-width: 0; }
.review-title { display: block; font-size: .98rem; font-weight: 700; color: var(--text); }
.review-sub { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }

/* ---- Count chips that double as filters ---- */
.count-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary);
  font-family: var(--font); font-size: .78rem; transition: border-color .15s ease, background .15s ease; }
.count-chip strong { color: var(--text); font-variant-numeric: tabular-nums; }
.count-chip-dot { width: 7px; height: 7px; border-radius: 50%; }
.count-chip-danger .count-chip-dot { background: var(--t-red); }
.count-chip-warn .count-chip-dot { background: var(--t-amber); }
.count-chip-success .count-chip-dot { background: var(--t-green); }
.count-chip-danger.active { border-color: var(--t-red); background: rgba(220,38,38,.07); }
.count-chip-warn.active { border-color: var(--t-amber); background: rgba(217,119,6,.07); }
.count-chip-success.active { border-color: var(--t-green); background: rgba(16,185,129,.07); }

/* ---- Rows that need attention keep a coloured edge ---- */
.data-table tr.row-rail-danger td:first-child { box-shadow: inset 3px 0 0 var(--t-red); }
.data-table tr.row-rail-warn td:first-child { box-shadow: inset 3px 0 0 var(--t-amber); }
.data-table tr.row-warn > td { background: rgba(217,119,6,.04); }

/* ---- Drawer that opens under a table row ---- */
.dt-drawer { padding: 0 !important; border-top: none !important; }
.drawer { background: var(--bg); border-top: 2px solid var(--border); max-height: 400px; overflow-y: auto; }
.drawer-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: .55rem var(--space-4); border-bottom: 1px solid var(--border); font-size: .76rem; }
.drawer-check { display: flex; align-items: center; gap: .3rem; cursor: pointer;
  font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.data-table-inner { font-size: .82rem; }

/* ---- Floating bar for a bulk selection ---- */
.bulk-bar { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .5rem .7rem; box-shadow: 0 8px 30px rgba(0,0,0,.18); z-index: var(--z-toast);
  align-items: center; gap: .5rem; }
.bulk-bar .ov-bulk-count { font-size: .82rem; font-weight: 650; color: var(--text); white-space: nowrap; }
.bulk-sep { width: 1px; height: 20px; background: var(--border); }

.chip-danger { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: var(--t-red); }

.page-header-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.input-search { max-width: 240px; }
.chip { display: inline-block; font-size: .74rem; background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 6px; padding: .08rem .38rem; margin: 0 .15rem .15rem 0; color: var(--text-secondary); }

/* ---- Collapsible panel ---- */
.panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  margin-bottom: var(--space-4); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: var(--space-2); padding: .7rem var(--space-4);
  cursor: pointer; font-size: .85rem; font-weight: 650; color: var(--text); list-style: none; user-select: none; }
.panel-head::-webkit-details-marker { display: none; }
.panel-head::after { content: '\203A'; margin-left: auto; font-size: 1.1rem; color: var(--text-muted);
  transform: rotate(90deg); transition: transform .15s ease; }
.panel[open] > .panel-head::after { transform: rotate(-90deg); }
.panel-head:hover { background: var(--bg); }
.panel-icon { display: inline-flex; flex-shrink: 0; }
.panel-meta { font-weight: 400; color: var(--text-muted); font-size: .8rem; }
.panel-body { padding: 0 var(--space-4) var(--space-4); }
.panel-danger { border-color: rgba(220,38,38,.28); }
.panel-danger > .panel-head { color: var(--t-red); }
.panel-success { border-color: rgba(16,185,129,.28); }
.panel-success > .panel-head { color: var(--t-green); }
.panel-warn { border-color: rgba(217,119,6,.28); }
.panel-warn > .panel-head { color: var(--t-amber); }
/* a sub-heading inside a panel */
.panel-sub { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin: var(--space-3) 0 var(--space-2); }

.field-row > .field.field-sm { flex: 0 1 165px; }

.pill.pill-num { font-size: .8rem; font-variant-numeric: tabular-nums; }

.data-table tr.is-clickable { cursor: pointer; }
.select-sm { padding: .3rem .55rem; font-size: .78rem; width: auto; min-width: 150px; }


/* ---- A page that reads better narrow (notifications, help) ---- */
.narrow-page { max-width: 760px; margin: 0 auto; }

/* ---- Notification list ---- */
.notif { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s ease; }
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--bg); }
.notif.is-unread { background: var(--brand-subtle); }
.notif.is-unread:hover { background: var(--brand-subtle); }
.notif-icon { font-size: 1.15rem; flex-shrink: 0; line-height: 1.3; }
.notif-main { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: .88rem; color: var(--text); }
.notif.is-unread .notif-title { font-weight: 700; }
.notif-text { font-size: .82rem; color: var(--text-secondary); margin-top: .15rem; }
.notif-meta { font-size: .72rem; color: var(--text-muted); margin-top: .25rem; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: .4rem; }


/* ---- Body copy inside a card ---- */
.prose { font-size: .9rem; line-height: 1.65; color: var(--text); }
.prose strong { font-weight: 650; }
.prose p { margin: 0 0 .6rem; }
.prose p:last-child { margin-bottom: 0; }
.prose code { font-size: .82em; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: .05rem .3rem; }

/* ---- A card that needs attention gets a coloured edge ---- */
.card.is-alert { border-left: 3px solid var(--t-red); }

/* ---- Small print under an item ---- */
.meta-row { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .78rem;
  color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.detail-box { white-space: pre-wrap; word-break: break-word; font-size: .72rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; margin-top: .4rem;
  max-height: 220px; overflow: auto; }

/* ---- One loading block everywhere ---- */
.ui-loading { padding: 3rem 1rem; text-align: center; color: var(--text-muted); font-size: .88rem; }
.ui-loading .spinner { display: inline-block; width: 22px; height: 22px; border: 3px solid var(--border);
  border-top-color: var(--brand); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: .7rem; }


/* ---- "Your groups / all groups" switch in the group picker ---- */
.gp-scope { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--border);
  background: var(--bg-subtle); color: var(--text-secondary); font-family: var(--font); font-size: .78rem;
  padding: .5rem .75rem; cursor: pointer; position: sticky; top: 0; z-index: 1; }
.gp-scope strong { color: var(--brand-text); }
.gp-scope:hover { background: var(--bg); }

/* ---- Profile ---- */
.who { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.who-avatar-wrap { position: relative; flex-shrink: 0; }
.who-avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem;
  overflow: hidden; border: 3px solid var(--border); }
.who-avatar img { width: 100%; height: 100%; object-fit: cover; }
.who-avatar-edit { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px;
  background: var(--brand); color: #fff; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; cursor: pointer; border: 2px solid var(--bg-card); }
.who-main { min-width: 0; }
.who-name { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.kv { display: flex; justify-content: space-between; gap: var(--space-4); padding: .5rem 0;
  border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: 0; }
.kv-key { font-size: .78rem; color: var(--text-muted); }
.kv-val { font-weight: 600; font-size: .88rem; color: var(--text); }
.input-code { width: 130px; font-size: 1rem; letter-spacing: .2em; font-variant-numeric: tabular-nums; }

/* ---- Exam booking (teacher view) ----
   The side-by-side grid and the step dots went with the seven-step form. */
.bk-list { display: flex; flex-direction: column; gap: var(--space-2); }
.bk-list.is-past { opacity: .72; }

/* ---- Enter Scores ----
   The step captions and the second grid went with the two numbered steps. */
hr.rule { height: 1px; border: 0; background: var(--border); margin: 0 0 var(--space-5); }

.se-num { color: var(--text-muted); font-size: .78rem; font-weight: 700; width: 36px; }
.se-advice-cell { font-size: .75rem; font-weight: 650; }
.input-note { font-size: .78rem; padding: .3rem .5rem; width: 150px; }
.se-status-select { min-width: 96px; font-weight: 600; }

/* ---- Small shared pieces, replacing the same styles written out again and again ---- */
.ui-blank { text-align: center; padding: 3rem 1rem; color: var(--text-muted); font-size: .88rem; }
.panel-h { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; }
.panel-sub-text { font-size: .85rem; color: var(--text-muted); margin-bottom: var(--space-4); }
.th-plain { padding: .55rem .75rem; text-align: left; font-size: .72rem; font-weight: 700;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.text-sm { font-size: .82rem; }
.text-normal { color: var(--text); }
.row-mid { display: flex; align-items: center; gap: var(--space-2); }
.hair-bottom { border-bottom: 1px solid var(--border); }
.mb-4 { margin-bottom: var(--space-4); }
.is-faint { opacity: .4; }

/* ---- Exam Staff cards ---- */
.cell { padding: .6rem .5rem; }
.meta-line { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-muted); }
.card-foot { margin-top: auto; padding-top: .65rem; }
.mb-3 { margin-bottom: var(--space-3); }
.col-gap { display: flex; flex-direction: column; gap: .3rem; }
.name-clip { font-weight: 700; font-size: .88rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-card { display: flex; flex-direction: column; padding: var(--space-4); margin-bottom: 0; }

.seg-icon { display: inline-flex; align-items: center; justify-content: center; padding: .4rem .55rem; }
.seg-icon svg { width: 15px; height: 15px; }

/* ---- Reporting, assignments, schedule ---- */
.cell-lg { padding: .7rem .9rem; }
.soft-chip { padding: .45rem .9rem; border-radius: var(--radius-sm); background: var(--bg-subtle);
  font-weight: 600; font-size: .85rem; color: var(--text); }
.meta-row { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .82rem; color: var(--text-muted); }
.panel-head-row { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border);
  font-size: .95rem; font-weight: 700; color: var(--text); }
.flat-table { width: 100%; border-collapse: collapse; }
.flat-thead { background: var(--bg); border-bottom: 2px solid var(--border); }
.input-sm { padding: .45rem .6rem; font-size: .88rem; }

/* ---- Last of the repeated one-offs ---- */
.pick-row { display: flex; align-items: center; gap: var(--space-2); padding: .5rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  font-size: .88rem; background: var(--bg-card); color: var(--text); }
.pick-row:hover { border-color: var(--brand); }
.text-danger { color: var(--t-red); }
.dt-semibold { font-weight: 600; }
.soft-box { margin-top: var(--space-4); padding: var(--space-3); background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* A destructive button's text was 4.1:1 on its own pale background. */
.btn-danger { color: #991B1B; }
body.dark .btn-danger { color: #FCA5A5; }

/* Timestamps on an unread notification sat at 4.2:1 against its tint. */
.notif-meta { color: var(--text-secondary); }
/* The "Cancelled" caption on a booking card, same reason. */
/* The colour beside it already carries the status; the caption just has to be
   readable, and its own accent left it at 4.4:1. */
/* ---- Exam Staff ---- */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--space-3); }
.inv-grid > .card { margin-bottom: 0; height: 100%; }
.inv-card .card-body { display: flex; flex-direction: column; height: 100%; }
.card.is-off, .data-table tr.is-off { opacity: .55; }
.avatar { width: 38px; height: 38px; border-radius: 10px; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.meta-line.has-rate { color: var(--t-green); font-weight: 600; }
.seg-group { display: inline-flex; background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; }
.seg-group .seg-btn { border-radius: 0; }

/* ---- My assignments ---- */
.exam-row { padding: .7rem .9rem; border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.exam-row:last-child { margin-bottom: 0; }
.pill-solid { color: #fff; }
.avatar-brand { background: var(--brand); }
.note-box { margin-top: .5rem; padding: .5rem .7rem; border-radius: var(--radius-sm);
  font-size: .82rem; border: 1px solid var(--border); background: var(--bg-subtle); color: var(--text); }
.note-warn { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.25); }
.note-info { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.25); }
.note-good { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.25); }

/* ---- Payroll report ---- */
.wide-page { max-width: 1100px; margin: 0 auto; }
.money { font-weight: 700; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.grand-total { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: .8rem var(--space-4); border-top: 2px solid var(--border); font-weight: 700; font-size: .9rem; }

/* ---- Shared rows and tiles used by the last pages ---- */
.list-row { padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-2); }
.cell-bare { padding: .6rem 0 .3rem; border: none; }
.input-tiny { width: 76px; padding: .3rem .5rem; font-size: .85rem; text-align: center; }

.board-page { max-width: 1500px; margin: 0 auto; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); }

.count-chip.active { border-color: var(--chip, var(--brand)); background: var(--bg-subtle); }

.pill-xs { font-size: .62rem; padding: .1rem .35rem; margin-top: .15rem; }

/* A disabled control is exempt from the contrast rule, but .5 opacity made
   the pager's "Newer" hard to read at 3:1. Still clearly disabled at .65. */
.btn:disabled { opacity: .65; }

/* ---- Settings: pass marks ---- */
.mark-group { margin-bottom: var(--space-5); }
.mark-group:last-child { margin-bottom: 0; }
.mark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-2); }
.mark-value { font-size: .95rem; font-weight: 700; color: var(--text); min-width: 38px; text-align: center;
  font-variant-numeric: tabular-nums; }
.rail { width: 4px; height: 18px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.list-row.is-editing { border-color: var(--brand); background: var(--brand-subtle); }

.input-money { width: 140px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rate-edit { margin: .5rem 0 .25rem; }

/* ---- Settings panels ---- */
.mb-2 { margin-bottom: var(--space-2); }
.mr-1 { margin-right: .3rem; }
.stack { display: grid; gap: .35rem; }
.hair-top { border-top: 1px solid var(--border); padding-top: var(--space-3); }
/* A filled button carries white text, so it needs a touch more than an
   outlined one to stay legible while disabled. */
.btn-primary:disabled, .btn-danger:disabled { opacity: .72; }

/* ---- Contrast fixes found by the check ---- */
/* Found on a teacher's screen: the active-filter chips are hard-coded ruby,
   which is 2:1 on the dark background. Teachers always have these chips. */
.f-pill { color: var(--brand-text); }
body.dark .f-pill { border-color: rgba(244,131,143,.25); }
/* The red and amber score pills sat at 4.0 and 4.3 on their own tint. */
.pill-danger { color: #991B1B; }
.pill-warn { color: #92400E; }
body.dark .pill-danger { color: #FCA5A5; }
body.dark .pill-warn { color: #FCD34D; }

/* Table headings were 4.4:1 — just under the readable mark. */
table.data-table th { color: var(--text); }
/* The big Overview number: plain ruby is too dark on a dark card. */
.hero-number { color: var(--brand-text); }
/* Sign Out sat at 3.5:1 in both themes. */
.sidebar-btn.danger { color: #B91C1C; }
body.dark .sidebar-btn.danger { color: #FCA5A5; }

/* ---- A token that was used everywhere and defined nowhere ----
   --bg-secondary appears in 23 rules and had no definition, so every surface
   that asked for it painted transparent: the header status chips, the search
   field, several hover fills. Aliased to the token it was evidently meant to
   be.
   It needs its own line for dark mode: a var() inside a custom property is
   worked out where it is written, so a single :root alias kept handing dark
   mode the light grey. That is why the segmented switch on Exam Staff and
   Payroll Report stayed a pale strip at night. */
:root     { --bg-secondary: var(--bg-subtle); }
body.dark { --bg-secondary: var(--bg-subtle); }

/* ---- Up / down / no-change arrows ----
   The old three were too pale to read on the cards: the flat arrow sat at
   2.5:1 in daylight and the red one at 3.5:1 at night. Same three meanings,
   strong enough to see. */
:root     { --c-trend-up: #15803D; --c-trend-down: #B91C1C; --c-trend-flat: #4B5563; }
body.dark { --c-trend-up: #4ADE80; --c-trend-down: #F87171; --c-trend-flat: #9CA3AF; }

/* ---- Header user badge ----
   renderSidebarUser() has always written .user-badge / .user-avatar /
   .user-name into #userBadgeArea, and the stylesheet had a rule for none of
   them — no flex, no gap, no avatar circle — so the name and the role ran
   together as "JahongirR&D Head". Compact sibling of .sidebar-user-info. */
#userBadgeArea { display: flex; align-items: center; min-width: 0; }
.user-badge { display: inline-flex; align-items: center; gap: .45rem;
  min-width: 0; max-width: 260px; padding: .2rem .5rem .2rem .25rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); }
.user-avatar { width: 26px; height: 26px; flex-shrink: 0; overflow: hidden;
  border-radius: 50%; background: var(--brand); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; line-height: 1; }
.user-name { font-size: .82rem; font-weight: 600; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-badge .pill { flex-shrink: 0; white-space: nowrap; }
/* The night ruby is light enough that white on it is only 3.4:1. */
body.dark .user-avatar { color: #1C1116; }

/* ---- Sidebar buttons ----
   .sidebar-btn had no text-decoration rule, so the three that are <a> came
   out underlined and the two that are <button> did not. .nav-item has
   carried this declaration all along. */
.sidebar-btn { text-decoration: none; }

/* ---- The active-filter chips row ----
   The rule was written for #filter-chips, which matches nothing; the element
   is #filterPills, which repeated all of it inline. renderFilterPills() sets
   display at runtime, so this only supplies the state before JS runs. */
#filterPills { padding: .5rem 1.75rem; }
@media (max-width: 768px) { #filterPills { padding: .5rem .75rem; } }

/* ---- A dropdown near the right edge opens leftwards ---- */
.ss-panel { max-width: calc(100vw - 24px); }
.ss-wrap.ss-right .ss-panel { left: auto; right: 0; }

/* ---- Filter controls were missing the 44px touch floor ----
   The app-wide rule is scoped to `main …`, and #filter-bar is a sibling of
   <main>, so these stayed 30px on tablets and phones. The #filter-bar prefix
   is needed because a plain `height` beats `min-height`. */
@media (max-width: 1024px), (pointer: coarse) {
  #filter-bar .filter-select, #filter-bar .ss-trigger,
  #filter-bar .btn-clear-filters { height: auto; min-height: 44px; }
  .ss-search { min-height: 44px; }
  .ss-item { min-height: 44px; display: flex; align-items: center; }
}

/* ================================================================
   CHROME: a header that holds its shape, and a sidebar that becomes a
   rail instead of squeezing the page.

   Measured before this block, at an 880px viewport: the title block was
   107px tall inside a 68px fixed header (the breadcrumb wrapped to three
   lines and pushed the title out of view), and the right-hand group was
   611px wide with its right edge past the viewport, so Sync was cut off
   and the user badge was off-screen entirely. The 280px sidebar stayed in
   flow until 768px, which is what created the broken band from ~769 to
   ~1100px — the band you land in when you zoom the browser in.
   ================================================================ */

/* ---- Header ---- */
#main-header { height: auto; min-height: var(--header-h);
  padding-top: .5rem; padding-bottom: .5rem; gap: var(--space-3); }
#main-header > .row-mid { flex: 1 1 auto; min-width: 0; }
.header-left { min-width: 0; }
.header-left h1, .header-breadcrumb {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-right { flex-shrink: 1; min-width: 0; flex-wrap: nowrap; }
.gsearch, .btn-refresh { flex-shrink: 0; }

/* The live clock and the "SAT results N h ago" pill are hidden rather than
   deleted: seven places write to them without first checking the element is
   there, so removing the markup would throw. The Sync button's tooltip
   already says when results were last pulled. */
.header-status-chip, #freshnessChip { display: none !important; }

/* The breadcrumb restates the <h1> — both come from the same titles[] pair —
   and the sidebar already shows where you are. */
@media (max-width: 1024px) { .header-breadcrumb { display: none; } }
@media (max-width: 900px)  { .btn-refresh-label { display: none; }
                             .btn-refresh { padding: .32rem .45rem; } }
@media (max-width: 768px)  { .user-badge .user-name { display: none; } }
@media (max-width: 480px)  { .header-left h1 { font-size: 1.05rem; }
                             .user-badge { border: 0; background: none; padding: 0; }
                             .user-badge .pill { display: none; } }

/* ---- Sidebar becomes an icon rail between 769px and 1100px ---- */
@media (min-width: 769px) and (max-width: 1100px) {
  #sidebar { width: 72px; }
  #sidebar.collapsed { margin-left: -72px; }
  .nav-label, .sidebar-logo-text, .sidebar-logo-sub,
  .nav-section-label, .sidebar-user-name, .sidebar-user-tag { display: none; }
  .sidebar-logo { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar-nav { padding: .75rem .5rem 1.5rem; }
  .nav-item { justify-content: center; padding-left: 0; padding-right: 0;
              gap: 0; position: relative; }
  .nav-item:hover { transform: none; }
  .sidebar-bottom { padding-left: .5rem; padding-right: .5rem; }
  .sidebar-bottom-actions { grid-template-columns: 1fr; }
  .sidebar-btn { padding: .5rem 0; }
  .sidebar-user-info { justify-content: center; padding: .4rem; }
  /* A badge sits on its icon once the label it followed is hidden. */
  .nav-item span[id$="Badge"] { position: absolute; top: 3px; right: 8px; }
}

/* ---- Filter row ----
   It wrapped to three rows at 880px and the break landed somewhere different
   at every width. Grouping means it always breaks between the dropdowns and
   the date range. The dates get a label because <input type="date"> cannot
   show a placeholder in Chrome or Safari, so two bare boxes said nothing. */
.filter-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.filter-dates { flex-wrap: nowrap; flex-shrink: 0; }
.filter-date { min-width: 120px; }
.btn-clear-filters { margin-left: auto; }
@media (max-width: 1280px) { .ss-trigger { max-width: 155px; } }
@media (max-width: 1100px) {
  .ss-trigger { min-width: 110px; max-width: 135px; }
  .filter-date { min-width: 112px; }
  .btn-clear-filters { margin-left: 0; }
}

/* ---- Sign-in screen ----
   The screen had its own set of controls — own labels, own inputs, own
   button — so it read as a different product from the dashboard behind it.
   These pull it onto the same type and fields. */
.login-field label { font-size: .8rem; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-secondary); }
/* The two grey sub-lines were too faint to read: 3.1:1 on the cream brand panel
   and 2.9:1 on the dark one. The brand panel has its own background, so these
   need their own colours rather than the shared tokens. */
.login-brand-sub { color: #5E5E66; }
/* This needs the `body.dark` prefix: the old rule has it too, and a more
   specific selector beats a later one whatever the order. */
body.dark .login-field label { color: var(--text-secondary); }
body.dark .login-brand-sub { color: #A8A8B8; }
.login-form-sub { color: var(--text-secondary); }
.login-field input { border-width: 1px; border-radius: var(--radius-sm); font-size: .95rem; }
.btn-login { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--radius-sm); font-size: .95rem; }
/* The spinner sits inside the button now, so it has to read on the red fill. */
.btn-login .login-spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.login-error { min-height: 1.2em; }
/* No element has ever used this. */

/* ---- Exam bookings ----
   The page used to be a seven-step form stacked on a day board in a different
   width. It is one page now: the board, with the form in a panel. */
.bk-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.35rem;
  margin: 0 0 var(--space-4); }
.bk-count { display: inline-flex; align-items: baseline; gap: .35rem;
  font-size: .85rem; color: var(--text-secondary); }
.bk-count strong { font-size: 1.15rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums lining; }
/* A count of nothing steps back instead of shouting a zero in colour. */
.bk-count.is-zero, .bk-count.is-zero strong { color: var(--text-muted); font-weight: 600; }

.bk-form .field:last-of-type { margin-bottom: 0; }
.bk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
@media (max-width: 480px) { .bk-form-row { grid-template-columns: 1fr; } }
.bk-form-other { margin-top: .4rem; }
/* The exam time is decided by the schedule, so it is shown, not asked for. */
.bk-form-time { display: flex; align-items: center; min-height: 38px; padding: 0 .1rem;
  font-size: .88rem; font-weight: 650; color: var(--text); }
.bk-drop { border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  padding: .7rem; text-align: center; cursor: pointer; background: var(--bg-subtle);
  color: var(--text-secondary); font-size: .85rem; transition: border-color .15s ease; }
.bk-drop:hover, .bk-drop.is-over { border-color: var(--brand); }
/* The deadline line used to be three hard-coded pale boxes, which stayed
   daylight-coloured inside the dark panel. Tints composite over whatever card
   is behind them, so one set works in both. */
.bk-note { margin: 0 0 var(--space-3); padding: .45rem .65rem; border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 600; border: 1px solid transparent; }
.bk-note.is-ok   { background: rgba(4,120,87,.10);  border-color: rgba(4,120,87,.22);  color: var(--t-green); }
.bk-note.is-warn { background: rgba(180,83,9,.10);  border-color: rgba(180,83,9,.22);  color: var(--t-amber); }
.bk-note.is-bad  { background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.22); color: #991B1B; }
body.dark .bk-note.is-bad { color: #FCA5A5; }
/* the QA Telegram link inside a late-booking notice */
.bk-note a, .bk-msg a { color: inherit; font-weight: 700; text-decoration: underline; }
/* "Book an exam" pressed after the deadline: the notice replaces the form */
.bk-late { display: flex; flex-direction: column; gap: var(--space-3); }
.bk-late a.btn { text-decoration: none; }
.bk-late-text { margin: 0; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--brand-subtle);
  color: var(--brand-text); font-size: .95rem; line-height: 1.5; }
.bk-msg { margin: var(--space-3) 0 0; padding: .55rem .8rem; border-radius: var(--radius-sm);
  font-size: .84rem; font-weight: 600; }
/* The plain --t-red sits at 4.2:1 on the pink tint in daylight, so the error
   line gets a darker red of its own; at night the tint is dark and it flips. */
.bk-msg.is-bad { background: var(--brand-subtle); color: #991B1B; }
body.dark .bk-msg.is-bad { color: #FCA5A5; }
.bk-msg.is-good { background: var(--bg-subtle); color: var(--t-green); }
.bk-form .btn-block { margin-top: var(--space-4); }

.bk-done { text-align: center; padding: var(--space-3) 0; }
.bk-done-actions { justify-content: center; margin-top: var(--space-4); }

/* ---- Enter Scores ----
   The setup was two numbered steps in two grids whose columns never lined up,
   because each grid sized itself to its own contents. One grid now, so every
   box sits on the same rails. */
.se-setup-head { margin-bottom: var(--space-4); }
.se-setup-head .card-sub { margin-top: .2rem; }
.se-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3) var(--space-4); align-items: start; }
@media (max-width: 520px) { .se-grid { grid-template-columns: 1fr; } }
/* A box waiting on an answer above it steps back rather than spelling out
   what to pick first — the card says that once. */
.se-field select:disabled, .se-field input:disabled, .gp-input:disabled {
  opacity: 1; color: #5A6170; background: var(--bg-subtle); cursor: not-allowed; }
/* --text-muted lands at 4.4:1 on the grey fill, just under readable, so the
   daylight value is a notch darker; at night the muted grey is already clear. */
body.dark .se-field select:disabled, body.dark .se-field input:disabled,
body.dark .gp-input:disabled { color: var(--text-muted); }
.score-entry-actions .btn { min-width: 0; }

/* A spinner for any button that is waiting on the network, matching the one
   the sign-in button already uses. */
.btn-spinner { display: inline-block; width: 14px; height: 14px; margin-right: .45rem;
  vertical-align: -2px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: loginSpin .7s linear infinite; flex-shrink: 0; }
.btn-secondary .btn-spinner, .btn-quiet .btn-spinner {
  border-color: rgba(155,17,30,.25); border-top-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: 2.4s; } }

/* "Keep me signed in" sits between the password and the button, where the
   person is already looking. */
.login-remember { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
  font-size: .85rem; color: var(--text-secondary); cursor: pointer; user-select: none; }
.login-remember input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; margin: 0; }

/* The vocabulary set an English group is examined on. Shown on every card and
   row, so whoever prints, invigilates or marks the paper knows which words. */
.vocab-chip { display: inline-block; max-width: 100%; margin: .2rem 0; padding: .12rem .45rem;
  border-radius: 5px; background: var(--brand-subtle); color: var(--brand-text);
  font-size: .7rem; font-weight: 700; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ============================================================
   THE TRAINING DASHBOARD'S LOOK
   ------------------------------------------------------------
   One definition per component, written last so it is the one
   that wins. Class names are untouched — every page keeps
   emitting exactly the markup it emitted before.
   ============================================================ */

/* ---- Surfaces ---- */
.card, .section-card, .chart-card, .kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card { padding: 18px; }
.card-header { padding: 0 0 14px; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px; }
.card-body { padding: 0; }
.card-body.flush { margin: 0 -18px -18px; }
.card-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---- Page heading ---- */
.page-header { margin-bottom: 20px; }
.page-title { font-size: 23px; font-weight: 750; letter-spacing: -.015em; }
.page-subtitle { margin-top: 5px; font-size: 13px; color: var(--text-muted); max-width: 620px; }

/* ---- Section label ---- */
.panel-title, .nav-section-label, .field-label, .th-plain {
  font-size: 11.5px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--brand); color: #fff; border: 0; border-radius: 9px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 650; font-family: var(--font);
  cursor: pointer; box-shadow: 0 1px 2px rgba(94,15,30,.18); white-space: nowrap;
}
.btn:hover { background: var(--brand-hover); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
/* Everything that is not the one primary action on the view is quiet. */
.btn-secondary, .btn-ghost, .btn-quiet {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border); box-shadow: none;
}
.btn-secondary:hover, .btn-ghost:hover, .btn-quiet:hover { background: var(--bg-subtle); border-color: var(--border); }
.btn-danger { background: var(--bg-card); color: var(--bad-ink); border: 1px solid var(--border); box-shadow: none; }
.btn-danger:hover { background: var(--bad-tint); border-color: var(--bad); }
.btn-success { background: var(--ok-solid); color: #fff; border: 0; }
/* At night the brand lifts to a rose so it can be written on dark cards.
   White on that rose is only 3.4:1, so a button filled with it takes dark
   ink instead — 5.5:1, and it looks deliberate rather than washed out. */
body.dark .btn,
body.dark .btn-primary,
body.dark .btn-success { color: #1C1116; }
body.dark .btn-secondary, body.dark .btn-ghost,
body.dark .btn-quiet, body.dark .btn-danger { color: var(--text); }
body.dark .btn-danger { color: var(--bad-ink); }
body.dark .btn.is-busy::after { border-color: rgba(28,17,22,.35); border-top-color: #1C1116; }
/* Anything else filled with the brand needs the same treatment. */
body.dark .seg-btn.is-on,
body.dark .pill-solid,
body.dark .nav-item.active { color: #1C1116; }
body.dark .nav-item.active svg { color: #1C1116; }
.btn-sm { padding: 7px 12px; font-size: 12px; border-radius: 8px; }
.btn-lg { padding: 12px 20px; font-size: 14.5px; }
.btn-icon { padding: 7px 9px; }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* ---- Stat tiles ---- */
.stat, .kpi-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px; border-radius: 16px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-label, .kpi-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--text-muted);
}
.stat-value, .kpi-value {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining; line-height: 1.15;
}
.stat-meta { font-size: 12px; color: var(--text-muted); }
.kpi-card.clickable:hover, .stat[onclick]:hover, .card.is-clickable:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ---- Empty states ---- */
.empty, .ui-blank {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 34px 16px; color: var(--text-muted);
}
.empty-icon, .es-icon {
  display: inline-grid; place-items: center; width: 58px; height: 58px;
  border-radius: 18px; background: var(--bg-subtle); color: var(--text-muted); margin-bottom: 6px;
}
.empty-title { color: var(--text); font-size: 14.5px; font-weight: 700; }
.empty-text { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }

/* ---- Sidebar ---- */
.nav-item {
  display: flex; align-items: center; gap: 11px;
  background: transparent; border: 0; color: var(--text-muted);
  padding: 10px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.nav-item:hover { background: var(--brand-subtle-2); color: var(--text); }
.nav-item:hover svg { color: var(--brand); }
/* Solid, not a tint: on the Training dashboard you can tell where you are
   from the far side of the room. */
.nav-item.active { background: var(--brand); color: #fff; }
.nav-item.active svg { color: currentColor; }
.nav-section-label { margin: 11px 0 2px; padding: 0 12px; opacity: .85; }

/* ---- Tables: still tables, in the new language ---- */
.table-wrap {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--shadow);
}
table.data-table th {
  background: var(--bg-subtle); color: var(--text-muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 12px; border-bottom: 0;
  /* A sticky header loses its border when it scrolls; an inset shadow stays. */
  box-shadow: inset 0 -1px 0 var(--border);
}
table.data-table td { padding: 10px 12px; font-size: 13.5px; border-bottom: 1px solid var(--border-soft); }
table.data-table tbody tr:hover td { background: var(--brand-subtle-2); }
body.dark table.data-table tbody tr:hover td { background: var(--bg-subtle); }
table.data-table tr.row-danger td { background: var(--bad-tint); }
table.data-table tr.row-warn td { background: var(--warn-tint); }

/* ---- Pills ---- */
.pill { border-radius: 999px; padding: .18rem .5rem; font-size: 11.5px; font-weight: 700; }
.pill-success { background: var(--ok-tint); color: var(--ok-ink); }
.pill-warn    { background: var(--warn-tint); color: var(--warn-ink); }
.pill-danger  { background: var(--bad-tint); color: var(--bad-ink); }
.pill-brand   { background: var(--brand-subtle); color: var(--brand-text); }
.pill-neutral { background: var(--bg-subtle); color: var(--text-secondary); }
/* The rest of the pill names, which the earlier blocks still set in fixed
   colours — these are the ones that did not follow the theme. */
.pill-info      { background: color-mix(in srgb, var(--t-indigo) 14%, transparent); color: var(--t-indigo); }
.pill-pending   { background: var(--warn-tint); color: var(--warn-ink); }
.pill-approved  { background: var(--ok-tint);   color: var(--ok-ink); }
.pill-rejected  { background: var(--bad-tint);  color: var(--bad-ink); }
.pill-cancelled { background: var(--bg-subtle); color: var(--text-muted); }
.pill-solid   { color: #fff; }
body.dark .pill-solid { color: #1C1116; }

/* ---- Inputs ---- */
.input, .select, .textarea {
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-card); color: var(--text);
  padding: 9px 11px; font-size: 13.5px; font-family: var(--font);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; }

/* ============================================================
   MOTION
   ------------------------------------------------------------
   Scaled to the size of what you press: a small button may move
   3%, a full-width one barely at all, and a card or a table row
   not at all — pressing a whole block makes the screen lurch.
   ============================================================ */
.btn, .nav-item, .pill, .tab-btn, .count-chip, .seg-btn, .f-pill {
  transition: transform .1s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
button { transition: transform .1s ease; }
button:active { transform: scale(.98); }
.btn:not(:disabled):active { transform: scale(.97); box-shadow: none; }
.btn-block:active, .btn-lg:active, .btn-login:active { transform: scale(.995); }
.nav-item:active, .sidebar-btn:active { transform: scale(.985); }
.pill:active, .tab-btn:active, .count-chip:active, .seg-btn:active, .f-pill:active { transform: scale(.96); }

/* One focus ring everywhere, in the brand tint. */
.btn:focus-visible, .nav-item:focus-visible, .tab-btn:focus-visible,
.count-chip:focus-visible, .seg-btn:focus-visible, a:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--brand-subtle); border-radius: 9px;
}

/* A button that is waiting on the network says so from the first instant. */
.btn.is-busy { pointer-events: none; opacity: .85; }
.btn.is-busy::after {
  content: ''; width: 13px; height: 13px; margin-left: .15rem;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: btnspin .6s linear infinite;
}
.btn-secondary.is-busy::after, .btn-ghost.is-busy::after, .btn-quiet.is-busy::after,
.btn-danger.is-busy::after { border-color: var(--border); border-top-color: var(--brand); }
@keyframes btnspin { to { transform: rotate(360deg); } }

/* The sidebar icon gives a small kick when its page becomes the one you are on. */
.nav-item.active svg { animation: navpop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes navpop { 0% { transform: scale(.82); } 100% { transform: scale(1); } }

/* Dialogs arrive rather than appear. */
.ui-modal { animation: ovfade .16s ease both; }
.ui-modal-card { animation: ovrise .22s cubic-bezier(.22,.9,.3,1) both; }
@keyframes ovfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ovrise { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* The busy spinner is information, not decoration — it keeps turning. */
  .btn.is-busy::after { animation-duration: .9s !important; animation-iteration-count: infinite !important; }
}

/* ---- The sidebar you can drag ---- */
.side-grip {
  position: fixed; top: 0; left: calc(var(--sidebar-w) - 3px);
  width: 7px; height: 100vh; z-index: 480; cursor: col-resize;
  background: transparent;
}
.side-grip::after {
  content: ''; position: absolute; left: 3px; top: 0; width: 1px; height: 100%;
  background: var(--brand); opacity: 0; transition: opacity .15s ease;
}
.side-grip:hover::after, body.is-resizing .side-grip::after { opacity: .5; }
body.is-resizing { cursor: col-resize; user-select: none; }
/* While dragging, the sidebar must follow the pointer exactly — an easing
   transition here makes it feel like it is lagging behind your hand. */
body.is-resizing #sidebar { transition: none; }
/* Below this the sidebar is an icon rail or slides over the page; there is
   nothing to drag. */
@media (max-width: 1100px) { .side-grip { display: none; } }

/* ---- "Show me around" ---- */
#tourMask { display: none; position: fixed; inset: 0; z-index: var(--z-toast, 10700); }
/* The dimming is the ring's own huge shadow, so the hole is genuinely clear
   and whatever is underneath stays readable. */
.tour-cut {
  position: absolute; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(20,12,16,.62), 0 0 0 2px var(--brand);
  transition: top .22s cubic-bezier(.22,.9,.3,1), left .22s cubic-bezier(.22,.9,.3,1),
              width .22s cubic-bezier(.22,.9,.3,1), height .22s cubic-bezier(.22,.9,.3,1);
}
.tour-pop {
  position: absolute; width: min(320px, calc(100vw - 20px));
  background: var(--float-bg); color: var(--float-ink);
  border: 1px solid var(--float-line); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow-lg);
  transition: top .22s cubic-bezier(.22,.9,.3,1), left .22s cubic-bezier(.22,.9,.3,1);
}
.tour-step { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; opacity: .62; margin-bottom: 6px; }
.tour-title { font-size: 15px; font-weight: 750; margin-bottom: 4px; }
.tour-text { font-size: 13px; line-height: 1.5; opacity: .88; }
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
/* On the dark card the quiet button needs its own treatment. */
.tour-actions .btn-secondary {
  background: var(--float-fill); color: var(--float-ink); border-color: var(--float-line);
}
.tour-actions .btn-secondary:hover { background: rgba(255,255,255,.2); }
@media (prefers-reduced-motion: reduce) {
  .tour-cut, .tour-pop { transition: none; }
}

/* ---- Sidebar count badges -----------------------------------------
   One definition instead of five copies written into the markup. The
   fills are the darkest of each family so white reads on them by day,
   and dark ink reads on the lighter night values. */
.nav-badge {
  margin-left: auto;
  background: var(--brand);
  color: #FFFFFF;
  border-radius: 10px;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .4rem;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}
.nav-badge-warn { background: var(--warn-ink); }
.nav-badge-bad  { background: var(--bad); }
.nav-badge-info { background: var(--t-indigo); }
body.dark .nav-badge { color: #1C1116; }

/* ---- Form controls, one size and one look -------------------------
   The filter bar, the day-board toolbar and the missing-scores panel
   each rolled their own select and date box, so a single row held three
   heights, three corner radii and three focus rings. Everything that
   takes input is sized from these two numbers. */
:root     { --ctl-h: 34px; --ctl-h-sm: 30px; }
body.dark { --ctl-h: 34px; --ctl-h-sm: 30px; }

.input, .select, .filter-select, .ss-trigger,
input[type="date"].input, input[type="date"].filter-select {
  height: var(--ctl-h);
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background-color: var(--bg-card);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { border-radius: 9px; font-size: 13px; }
.input-sm, .select-sm, .btn-sm, .btn-sm.btn-icon {
  height: var(--ctl-h-sm);
  font-size: 12.5px;
}
.input-sm, .select-sm { padding: 0 9px; }
.btn-sm { padding: 0 12px; border-radius: 8px; }
.btn-icon.btn-sm { width: var(--ctl-h-sm); padding: 0; }
.input:focus, .select:focus, .textarea:focus,
.filter-select:focus, .ss-trigger:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-subtle);
  outline: none;
}
.input:hover, .select:hover, .filter-select:hover, .ss-trigger:hover { border-color: var(--brand); }

/* The browser's own dropdown arrow is the loudest sign a control was never
   restyled. One chevron, drawn in each theme's muted ink. */
select.select, select.filter-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%236E5E64' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
body.dark select.select, body.dark select.filter-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%23A5959B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---- Filter bar ---- */
#filter-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: .7rem 1.75rem;
  gap: .45rem;
}
.filter-label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.filter-label svg { width: 12px; height: 12px; opacity: .55; }
.filter-sep { height: 18px; background: var(--border-soft); }
.btn-clear-filters {
  height: var(--ctl-h-sm); padding: 0 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-muted);
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
}
.btn-clear-filters:hover {
  border-color: var(--brand); color: var(--brand-text); background: var(--brand-subtle);
}
.ss-trigger::after { content: ''; width: 10px; height: 7px; flex-shrink: 0;
  background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
}

/* The night ruby is light enough that white on it is only 3.4:1. Everything
   filled with the brand colour takes dark ink after dark. */
body.dark .um-user-avatar,
body.dark .you-badge,
body.dark .chat-msg.sent .chat-bubble,
body.dark .chat-reply button { color: #1C1116; }

/* ---- Sign-in page --------------------------------------------------
   It was the last screen running on its own private palette — a dozen
   fixed hexes that owed nothing to the rest of the dashboard, which is
   why it looked like a different product. It reads the tokens now, and
   its fields are the same fields as everywhere else. */
#loginOverlay { background: var(--brand); padding: 1.5rem; }
body.dark #loginOverlay { background: #0E0B0E; }

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  max-width: 820px;
  min-height: 460px;
  box-shadow: 0 24px 64px rgba(28,17,22,.28);
}
body.dark .login-card { background: var(--bg-card); border-color: var(--border); }

/* The brand half was 46% of the card holding one logo in empty space. */
.login-brand {
  flex: 0 0 40%;
  background: var(--brand-subtle-2);
  border-right: 1px solid var(--border-soft);
  border-radius: 20px 0 0 20px;
  padding: 2.5rem 2rem;
  gap: .25rem;
}
body.dark .login-brand { background: var(--bg-subtle); border-right-color: var(--border); }
.login-brand::before { display: none; }
.login-brand-logo-big { margin-bottom: .25rem; }
.login-brand-logo-big svg { width: 120px; height: 120px; }
.login-brand-logo-big svg .ll1 { fill: var(--brand) !important; opacity: .45 !important; }
.login-brand-logo-big svg .ll2 { fill: var(--brand) !important; opacity: 1 !important; }
body.dark .login-brand-logo-big svg .ll1 { fill: var(--brand) !important; opacity: .45 !important; }
body.dark .login-brand-logo-big svg .ll2 { fill: var(--brand) !important; opacity: 1 !important; }
.login-brand-name {
  font-size: 1.05rem; font-weight: 750; color: var(--brand-text);
  letter-spacing: -.01em; margin-top: 1.1rem;
}
.login-brand-sub {
  color: var(--text-muted); font-size: .82rem; margin-top: .3rem;
  text-align: center; max-width: 15rem; line-height: 1.5;
}
body.dark .login-brand-sub { color: var(--text-muted); }

.login-form-side { padding: 3rem 2.75rem; }
.login-form-logo { display: none; }   /* the shield is already on the left */
.login-form-title {
  font-size: 1.6rem; font-weight: 750; color: var(--text);
  letter-spacing: -.02em; margin-bottom: .3rem;
}
body.dark .login-form-title { color: var(--text); }
.login-form-sub { font-size: .88rem; color: var(--text-muted); margin-bottom: 1.5rem; }

.login-field { margin-bottom: .9rem; }
.login-field label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .35rem;
}
body.dark .login-field label { color: var(--text-muted); }
.login-field input {
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-card); color: var(--text);
  font-family: var(--font); font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.dark .login-field input { background: var(--bg-subtle); border-color: var(--border); color: var(--text); }
.login-field input::placeholder { color: var(--text-muted); opacity: .7; font-weight: 400; }
.login-field input:focus,
body.dark .login-field input:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-subtle); background: var(--bg-card);
}
.pw-toggle { bottom: 11px; right: 11px; color: var(--text-muted); }
.pw-toggle:hover { color: var(--brand); }

.btn-login {
  width: 100%; height: 44px; margin-top: .35rem;
  background: var(--brand); color: #FFFFFF;
  border: none; border-radius: 10px;
  font-family: var(--font); font-size: 14.5px; font-weight: 650;
  cursor: pointer; transition: background .15s ease, transform .1s ease;
  box-shadow: 0 1px 2px rgba(94,15,30,.18);
}
body.dark .btn-login { color: #1C1116; }
.btn-login:hover { background: var(--brand-hover); transform: none; box-shadow: 0 1px 2px rgba(94,15,30,.18); }
.btn-login:active { transform: scale(.995); }
.btn-login:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-subtle); }

/* The build stamp read as debris under the link. It belongs at the foot
   of the card, quiet, where it is still there when somebody is asked. */
#buildStamp {
  position: absolute; left: 0; right: 0; bottom: .85rem;
  margin: 0; font-size: .66rem; opacity: .6;
}
@media (max-width: 700px) {
  .login-card { max-width: 420px; }
  .login-brand { flex: none; border-right: none; border-bottom: 1px solid var(--border-soft);
                 border-radius: 20px 20px 0 0; min-height: 0; padding: 1.75rem; }
  .login-brand-logo-big svg { width: 84px; height: 84px; }
  #buildStamp { position: static; margin-top: .75rem; }
}

/* ---- Maintenance notice ---- */
#maintBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: calc(.7rem + env(safe-area-inset-top, 0px)) 1rem .7rem;
  background: var(--warn-solid); color: #FFFFFF;
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  line-height: 1.4; text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
#maintBar svg { width: 17px; height: 17px; flex-shrink: 0; }
body.maint-on #loginOverlay, body.maint-on #app { }  /* content stays usable; the bar just sits on top */