/* ═══════════════════════════════════════════════════════════════════
   STAFFROOM — the Teachers Hub theme (2026-10-10, Alif: "TH için özel bir
   arayüz ve design system")

   Source: Google Stitch design system "Staffroom — Teachers Hub"
   (project "Eduversal Teachers Hub — Staffroom", 797736632107134107,
   asset 14111797224188936520). Audience: ~1,000 teachers at 16 partner
   schools, signing in with their school Google account, often on older
   laptops and Android phones, in English as a second language.

   Personality: a calm, well-organised staffroom. Light chalk-paper working
   area (long tables + forms stay readable), blackboard-green chrome,
   highlighter amber for "this week" / attention. Never neon, never the
   dark space look (that is Sparkuna, the student product).

     Blackboard  #1f4d3a  (deep #14301f · night #0f241a · soft #e7efe9)
     Chalk paper #f7f5ef  (cards #ffffff · rule #e4e0d6)
     Highlighter #f59e0b  (text-safe ink #b45309 · soft #fdf3e1)
     Ink         #1c2421 · #4a5450 · #6b7470
     Status      on track #15803d · behind #b45309 · at risk #b91c1c · info #0e7490
     Type        Plus Jakarta Sans (headings, numbers) + DM Sans (body)

   HOW IT LOADS: partials/navbar.js injects this file + the font link on
   every page that loads the navbar and adds `th-staffroom` to <html>.
   login.html / waiting.html link it directly. Every rule is scoped to
   html.th-staffroom, so removing the injection restores the old look.

   SPARKUNA PAGES ARE SKIPPED: a page on body[data-theme="sparkuna"]
   (TH /my-students) keeps the Sparkuna Studio theme. Only the navbar —
   which is Teachers Hub chrome — is Staffroom there too.

   Family colours (cyan / mor / amber / teal / …) still mean what they mean
   in DESIGN_SYSTEM.md: on TH they show as the hero's bottom stripe, the
   eyebrow dot and the card hover rule, while the hero band itself is
   always blackboard green.
   Docs: docs/architecture/DESIGN_SYSTEM.md → "Teachers Hub — Staffroom".
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────── */
html.th-staffroom {
  --sr-board:       #1f4d3a;
  --sr-board-deep:  #14301f;
  --sr-board-night: #0f241a;
  --sr-board-soft:  #e7efe9;
  --sr-board-line:  #c9dccf;
  --sr-chalk:       #f7f5ef;
  --sr-chalk-2:     #efece3;
  --sr-card:        #ffffff;
  --sr-rule:        #e4e0d6;
  --sr-amber:       #f59e0b;
  --sr-amber-ink:   #b45309;
  --sr-amber-soft:  #fdf3e1;
  --sr-ink:         #1c2421;
  --sr-ink-2:       #4a5450;
  --sr-ink-3:       #6b7470;
  --sr-ok:          #15803d;
  --sr-ok-soft:     #e6f4ea;
  --sr-warn:        #b45309;
  --sr-warn-soft:   #fdf3e1;
  --sr-risk:        #b91c1c;
  --sr-risk-soft:   #fdeaea;
  --sr-info:        #0e7490;
  --sr-info-soft:   #e3f2f6;
  --sr-on-board:    #ffffff;
  --sr-on-board-2:  rgba(255,255,255,0.74);
  --sr-on-board-3:  rgba(255,255,255,0.52);
  --sr-font-head:   "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
  --sr-font-body:   "DM Sans", system-ui, -apple-system, sans-serif;
  --sr-shadow-sm:   0 1px 2px rgba(28,36,33,0.06);
  --sr-shadow:      0 2px 8px rgba(28,36,33,0.07), 0 1px 2px rgba(28,36,33,0.05);
  --sr-shadow-lg:   0 14px 36px rgba(15,36,26,0.16);
  --sr-radius:      14px;
  --sr-radius-sm:   10px;
  --sr-chalk-lines: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 28px);
}

/* The shared tokens every TH page already reads — re-pointed at Staffroom
   so page-local CSS that uses var(--brand) / var(--ink) / var(--font-title)
   follows the theme without editing each page. */
html.th-staffroom body:not([data-theme="sparkuna"]) {
  --brand:      #1f4d3a;
  --brand-dk:   #14301f;
  --brand-2:    #e7efe9;
  --accent:     #1f4d3a;
  --accent-dk:  #14301f;
  --accent-2:   #e7efe9;
  --ink:        #1c2421;
  --ink-2:      #4a5450;
  --ink-3:      #6b7470;
  --paper:      #f7f5ef;
  --paper-2:    #efece3;
  --border:     #e4e0d6;
  --font-title: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
  --focus-ring: #1f4d3a;
  background: var(--sr-chalk);
  color: var(--sr-ink);
}
/* every family used to tint the body; on TH the page is always chalk */
html.th-staffroom body[data-page-accent]:not([data-theme="sparkuna"]) { background: var(--sr-chalk); }

html.th-staffroom body:not([data-theme="sparkuna"]) :is(h1, h2, h3) { letter-spacing: -0.01em; }

/* ── 2. Navbar (TH chrome — also on Sparkuna pages) ─────────────── */
html.th-staffroom .nav {
  height: 64px;
  background: var(--sr-board);
  border-bottom: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 10px rgba(15,36,26,0.18);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.th-staffroom .nav.scrolled { box-shadow: 0 4px 18px rgba(15,36,26,0.30); border-bottom-color: rgba(0,0,0,0.25); }
html.th-staffroom .nav-logo-img { filter: none; }
html.th-staffroom .nav-logo-divider { background: rgba(255,255,255,0.22); }
html.th-staffroom .nav-logo-text {
  font-family: var(--sr-font-head);
  font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -0.01em;
}

html.th-staffroom .nav-link,
html.th-staffroom .th-dd-trigger {
  position: relative;
  color: var(--sr-on-board-2);
  font-size: 13.5px;
}
html.th-staffroom .nav-link:hover,
html.th-staffroom .th-dd-wrap:hover .th-dd-trigger,
html.th-staffroom .th-dd-wrap.open .th-dd-trigger { background: rgba(255,255,255,0.10); color: #fff; }
/* active section: white text + a highlighter-amber underline (Stitch "Today" tab) */
html.th-staffroom .nav-link.active,
html.th-staffroom .th-dd-trigger.active { background: transparent; color: #fff; font-weight: 700; }
html.th-staffroom .nav-link.active::after,
html.th-staffroom .th-dd-trigger.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -14px;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--sr-amber);
}

/* dropdown panels: a deeper board green, so the white menu text stays */
html.th-staffroom .th-dd-panel {
  top: calc(100% + 13px);
  background: var(--sr-board-deep);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--sr-shadow-lg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.th-staffroom .th-dd-item { color: rgba(255,255,255,0.82); }
html.th-staffroom .th-dd-item svg { color: rgba(255,255,255,0.45); }
html.th-staffroom .th-dd-item:hover { background: rgba(255,255,255,0.09); color: #fff; }
html.th-staffroom .th-dd-item:hover svg { color: var(--sr-amber); }
html.th-staffroom .th-dd-item.active { background: rgba(245,158,11,0.16); color: #ffd58a; }
html.th-staffroom .th-dd-item.active svg { color: var(--sr-amber); }
html.th-staffroom .th-dd-col-header { color: rgba(255,255,255,0.45); }
html.th-staffroom .th-dd-divider,
html.th-staffroom .th-dd-col-divider { background: rgba(255,255,255,0.09); }

html.th-staffroom .nav-feedback-btn { color: var(--sr-on-board-2); border-color: rgba(255,255,255,0.22); }
html.th-staffroom .nav-feedback-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }
html.th-staffroom .nav-badge { background: var(--sr-amber); color: var(--sr-board-night); border-color: var(--sr-board); box-shadow: none; }

/* profile pill + dropdown */
html.th-staffroom .profile-btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.20); }
html.th-staffroom .profile-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); }
html.th-staffroom .profile-dropdown {
  top: calc(100% + 14px);
  background: var(--sr-board-deep);
  border-color: rgba(255,255,255,0.10);
  box-shadow: var(--sr-shadow-lg);
}
html.th-staffroom .pd-header { background: rgba(255,255,255,0.05); }
html.th-staffroom .pd-role-badge { background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.45); color: #ffd58a; }
html.th-staffroom .pd-subrole-chip,
html.th-staffroom .pd-subrole-chip.subject_leader { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.86); }
html.th-staffroom .pd-class-tag,
html.th-staffroom .pd-chip.on { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.28); color: #fff; }
html.th-staffroom .pd-chip:hover { border-color: var(--sr-amber); color: #ffd58a; }
html.th-staffroom .pd-save-btn { background: var(--sr-amber); color: var(--sr-board-night); }
html.th-staffroom .pd-input:focus,
html.th-staffroom .pd-class-input:focus { border-color: var(--sr-amber); background: rgba(245,158,11,0.08); }
html.th-staffroom .progress-ring-fill { stroke: var(--sr-amber); }

/* mobile */
html.th-staffroom .th-hamburger { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.08); }
html.th-staffroom .th-mobile-menu {
  top: 64px; max-height: calc(100vh - 64px);
  background: var(--sr-board-deep);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: rgba(255,255,255,0.10);
}
html.th-staffroom .th-mobile-section-header { color: rgba(255,255,255,0.50); }
html.th-staffroom .th-mobile-subheader { color: rgba(255,255,255,0.38); }
html.th-staffroom .th-mobile-item { color: rgba(255,255,255,0.86); min-height: 44px; }
html.th-staffroom .th-mobile-item.active { background: rgba(245,158,11,0.16); color: #ffd58a; }
html.th-staffroom .th-mobile-item.active svg { color: var(--sr-amber); }

/* feedback modal (navbar partial) */
html.th-staffroom .feedback-overlay { background: rgba(15,36,26,0.55); }
html.th-staffroom .feedback-modal { background: var(--sr-board-deep); border-color: rgba(255,255,255,0.12); }
html.th-staffroom .feedback-select option { background: var(--sr-board-deep); }
html.th-staffroom .feedback-select:focus,
html.th-staffroom .feedback-textarea:focus { border-color: var(--sr-amber); box-shadow: 0 0 0 3px rgba(245,158,11,0.22); background: rgba(245,158,11,0.06); }
html.th-staffroom .feedback-submit-btn { background: var(--sr-amber); color: var(--sr-board-night); font-weight: 700; }
html.th-staffroom .feedback-submit-btn:hover:not(:disabled) { box-shadow: 0 4px 16px rgba(245,158,11,0.35); }

/* ── 3. Page hero — always a blackboard band ─────────────────────── */
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero,
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero[data-accent] {
  background: linear-gradient(160deg, #23553f 0%, var(--sr-board) 45%, #183d2d 100%);
  border-top: 0;
  box-shadow: inset 0 -3px 0 var(--hero-vivid, var(--sr-amber));
  padding: 44px 0 46px;
}
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero::before {
  background:
    radial-gradient(ellipse 60% 80% at 88% 0%, rgba(255,255,255,0.07), transparent 60%),
    var(--sr-chalk-lines);
  background-size: auto;
}
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero::after { display: none; }
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.86); font-size: 11.5px; letter-spacing: 0.08em;
}
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero__eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--hero-vivid, var(--sr-amber)); flex-shrink: 0;
}
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero__title {
  font-family: var(--sr-font-head); font-weight: 800; letter-spacing: -0.02em;
  text-shadow: none;
}
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero__desc { color: rgba(255,255,255,0.78); }
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero__icon {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); box-shadow: none;
}
/* KPI tiles read as chalk-white cards on the board (Stitch "Week 9" card) */
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero__kpi {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16);
}
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero__kpi--primary,
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero[data-accent] .page-hero__kpi--primary {
  background: #fff; border-color: #fff; box-shadow: var(--sr-shadow);
}
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero__kpi--primary .page-hero__kpi-num { color: var(--sr-board); }
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero__kpi--primary :is(.page-hero__kpi-lbl, .page-hero__kpi-sub) { color: var(--sr-ink-2); }
html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero__kpi-num { font-family: var(--sr-font-head); font-weight: 800; }

/* ── 3b. Older bespoke heroes ─────────────────────────────────────
   15 pages (weekly-checklist, self-assessment / appraisal + results,
   read-me-*, cambridge-calendar / -standards, school-events, welcome,
   certificate-verify) still carry their own page-level .hero / .cv-hero.
   Every one of them is a dark band with white text, so only the band
   colour changes here; their layout and text stay as they are until the
   page moves to the canonical .page-hero. */
html.th-staffroom body:not([data-theme="sparkuna"]) :is(header, section, div).hero,
html.th-staffroom body:not([data-theme="sparkuna"]) .cv-hero {
  background: linear-gradient(160deg, #23553f 0%, var(--sr-board) 48%, #163a2b 100%);
}
html.th-staffroom body:not([data-theme="sparkuna"]) :is(header, section, div).hero :is(h1, h2),
html.th-staffroom body:not([data-theme="sparkuna"]) .cv-hero :is(h1, h2) {
  font-family: var(--sr-font-head); letter-spacing: -0.02em;
}

/* ── 4. Working surface ──────────────────────────────────────────── */
html.th-staffroom body:not([data-theme="sparkuna"]) .card {
  background: var(--sr-card);
  border: 1px solid var(--sr-rule);
  border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow-sm);
}
html.th-staffroom body:not([data-theme="sparkuna"]) .page-toolbar { background: rgba(247,245,239,0.94); border-bottom-color: var(--sr-rule); }
html.th-staffroom body:not([data-theme="sparkuna"]) .page-info-strip { background: var(--sr-card); border-color: var(--sr-rule); }

/* buttons — 44px touch height on the big ones, board green primary */
html.th-staffroom body:not([data-theme="sparkuna"]) .btn { border-radius: var(--sr-radius-sm); font-weight: 600; }
html.th-staffroom body:not([data-theme="sparkuna"]) .btn-primary { background: var(--sr-board); border-color: var(--sr-board); color: #fff; }
html.th-staffroom body:not([data-theme="sparkuna"]) .btn-primary:hover { background: var(--sr-board-deep); border-color: var(--sr-board-deep); }
html.th-staffroom body:not([data-theme="sparkuna"]) .btn-ghost { background: #fff; border-color: var(--sr-rule); color: var(--sr-ink); }
html.th-staffroom body:not([data-theme="sparkuna"]) .btn-ghost:hover { border-color: var(--sr-board); color: var(--sr-board); }

html.th-staffroom body:not([data-theme="sparkuna"]) .chip.on,
html.th-staffroom body:not([data-theme="sparkuna"]) .tab-btn.on { background: var(--sr-board); border-color: var(--sr-board); color: #fff; }
html.th-staffroom body:not([data-theme="sparkuna"]) .search-input:focus,
html.th-staffroom body:not([data-theme="sparkuna"]) :is(.modal-input, .modal-textarea, .modal-select):focus {
  border-color: var(--sr-board); box-shadow: 0 0 0 3px rgba(31,77,58,0.14);
}

/* status badges follow the Staffroom status set */
html.th-staffroom body:not([data-theme="sparkuna"]) .badge-green { background: var(--sr-ok-soft);   color: var(--sr-ok); }
html.th-staffroom body:not([data-theme="sparkuna"]) .badge-amber { background: var(--sr-warn-soft); color: var(--sr-warn); }
html.th-staffroom body:not([data-theme="sparkuna"]) .badge-red   { background: var(--sr-risk-soft); color: var(--sr-risk); }
html.th-staffroom body:not([data-theme="sparkuna"]) .badge-blue  { background: var(--sr-info-soft); color: var(--sr-info); }
html.th-staffroom body:not([data-theme="sparkuna"]) .badge-accent { background: var(--sr-board-soft); color: var(--sr-board); }
html.th-staffroom body:not([data-theme="sparkuna"]) .prog-bar-fill { background: var(--sr-board); }

/* modals: chalk header, board title */
html.th-staffroom body:not([data-theme="sparkuna"]) :is(.modal-box, .modal, .confirm-box) { border-radius: 16px; }
html.th-staffroom body:not([data-theme="sparkuna"]) :is(.modal-title, .modal-head-text h3, .confirm-title) {
  font-family: var(--sr-font-head); font-weight: 800; color: var(--sr-ink);
}

/* ── 5. Footer — board night, amber call to action ──────────────── */
html.th-staffroom body:not([data-theme="sparkuna"]) .page-footer { background: var(--sr-board-night); }
html.th-staffroom body:not([data-theme="sparkuna"]) .page-footer::before { opacity: 0.35; }
html.th-staffroom body:not([data-theme="sparkuna"]) .page-footer__cta-title { font-family: var(--sr-font-head); font-weight: 800; }
html.th-staffroom body:not([data-theme="sparkuna"]) .page-footer .page-footer__cta-btn,
html.th-staffroom body:not([data-theme="sparkuna"]) .page-footer[data-accent] .page-footer__cta-btn {
  background: var(--sr-amber); color: var(--sr-board-night); box-shadow: 0 4px 14px rgba(245,158,11,0.28);
}
html.th-staffroom body:not([data-theme="sparkuna"]) .page-footer__nav-link:hover { color: #ffd58a; }

/* ── 6. Focus + selection ───────────────────────────────────────── */
html.th-staffroom :focus-visible { outline-color: var(--sr-amber); }
html.th-staffroom body:not([data-theme="sparkuna"]) ::selection { background: #fde7b5; color: var(--sr-ink); }

/* ── 7. Small screens ───────────────────────────────────────────── */
@media (max-width: 640px) {
  html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero,
  html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero[data-accent] { padding: 30px 0 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html.th-staffroom body:not([data-theme="sparkuna"]) .page-hero { animation: none; }
}