/*
 * ============================================================
 *  UbuntuPlay — UbuntuPlay Hub
 *  Copyright © 2024-2026 Zipangile. All rights reserved.
 *
 *  Developer : Sobhuza Ziba
 *  Company   : Zipangile
 *  Product   : UbuntuPlay
 *
 *  This software and all its modules, features, algorithms,
 *  protocols, UI designs, and associated files are the
 *  exclusive intellectual property of Zipangile.
 *  Unauthorised copying, modification, distribution, or use
 *  of any part of this system — in whole or in part — is
 *  strictly prohibited without the express written permission
 *  of Zipangile.
 *
 *  For licensing enquiries: legal@zipangile.com
 * ============================================================
 */

/* Material Symbols Outlined & Rounded */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-outlined, .material-symbols-rounded, .ms-icon {
  font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  vertical-align: middle;
}

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

/* ============================================================
 * DESIGN TOKEN CONTRACT — UbuntuPlay Design System (2026 audit)
 * Canonical source of truth: public/landing.css :root + business-toolkit/00-Brand-System/01-brand-guide.md
 * Physical palette (identical across landing.css / shared.css / docs.css / classroom / Studio):
 *   ink #1B1C1A · surface #FAF8F4 · cream #F5F0E8 · forest #2D6A4F/#40916C (deep #22543D, soft #EAF0EC)
 *   gold #D4A017/#E9B44C (TEXT-SAFE gold-ink #8A6408) · baobab #C8692A (deep #8F4517) · teal #0D5C55
 *   sky #1356A0 · error #B3261E (M3) · line rgba(27,28,26,.10)
 * A11y invariants (WCAG 2.2 AA): text tokens >= 4.5:1 on their surfaces; global :focus-visible ring;
 * prefers-reduced-motion honored; 44px primary touch targets.
 * This file keeps its historical token NAMES (--bg/--text/--accent…) — values MUST stay in sync
 * with the contract above. Do not reintroduce Tailwind ambers/roses as semantic text colors.
 * ============================================================ */

:root {
  /* ── Modern Palette (Slate, Indigo, Teal) ── */
  --slate-50:  #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b;
  --slate-900: #0f172a; --slate-950: #020617;

  --emerald-50:  #f0fdf4; --emerald-100: #dcfce7; --emerald-200: #bbf7d0;
  --emerald-300: #86efac; --emerald-400: #4ade80; --emerald-500: #10b981;
  --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46;
  --emerald-900: #064e3b;

  /* ── Earth Tones (Forest) ── */
  --forest-50:  #f2f8f6; --forest-100: #e2ede9; --forest-200: #c6dbd4;
  --forest-300: #9cbdb2; --forest-400: #6a9a8b; --forest-500: #4d7f70;
  --forest-600: #3b6559; --forest-700: #305249; --forest-800: #28433d;
  --forest-900: #223a35; --forest-950: #0d1a18;

  --sage-50:  #f6f7f4; --sage-100: #e9ece3; --sage-200: #d4d9c7;
  --sage-300: #b4bf9f; --sage-400: #90a075; --sage-500: #728358;
  --sage-600: #586842; --sage-700: #455135; --sage-800: #38422d;
  --sage-900: #303828;

  --teal-50:  #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4;
  --teal-300: #5eead4; --teal-400: #2dd4bf; --teal-500: #14b8a6;
  --teal-600: #0d9488; --teal-700: #0f766e; --teal-800: #115e59;
  --teal-900: #134e4a;

  --rose-500: #f43f5e; --rose-600: #e11d48;
  --amber-500: #f59e0b; --amber-600: #d97706;

  /* ── Default Theme (Light) — Landing System v2 alignment ── */
  --bg:          #FAF8F4;
  --panel:       #ffffff;
  --panel-hover: #F1EDE5;
  --border:      rgba(27, 28, 26, 0.12);
  --border-lt:   rgba(27, 28, 26, 0.07);
  --text:        #1B1C1A;
  --text-muted:  rgba(27, 28, 26, 0.66);
  --accent:      #2D6A4F;
  --accent-lt:   #40916C;
  --accent-pale: #EAF0EC;

  --green:       #2D6A4F;
  --green-lt:    #40916C;
  --green-pale:  #EAF0EC;

  /* Text-safe brand accents (see DESIGN TOKEN CONTRACT above).
     --gold/--amber/--red are used as TEXT + borders across the portals, so they carry the
     text-safe deep values (gold-ink #8A6408, baobab-deep #8F4517, M3 error #B3261E) — the
     decorative fills stay available via --gold-fill / the raw scales. */
  --gold:        #8A6408;
  --gold-fill:   #D4A017;
  --red:         #B3261E;

  --font:        'DM Sans', system-ui, sans-serif;
  --mono:        'JetBrains Mono', monospace;
  --display:     'DM Sans', 'Syne', system-ui, sans-serif;
  --radius:      20px;
  --radius-sm:   14px;
  --shadow:      0 1px 2px rgb(27 28 26 / 0.04), 0 4px 14px rgb(27 28 26 / 0.05);
  --shadow-md:   0 2px 6px rgb(27 28 26 / 0.05), 0 14px 34px rgb(27 28 26 / 0.10);

  --sidebar-w:   240px;
  --topbar-h:    64px;

  /* Glassmorphism */
  --glass-bg:     rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-blur:   20px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.28, 0.44, 1);

  --purple:       #A855F7;

  /* ── Convenience aliases (used by hub pages) ── */
  --muted:   var(--text-muted);
  --red-lt:  #DC362E;
  --teal:    #0D5C55;
  --amber:   #8F4517;
  --btn-green-bg: var(--accent);
}

/* ── Keyboard focus (WCAG 2.4.7) — landing.css pattern ── */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Form fields keep their box-shadow focus ring (defined below) instead of the outline. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }

/* ── Skip link (WCAG 2.4.1) — injected by shared.js on portal pages ── */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--text); color: var(--bg);
  padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
  text-decoration: none; transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ── Dark Mode Toggle ── */
body.dark {
  --bg:          var(--forest-950);
  --panel:       var(--forest-900);
  --panel-hover: var(--forest-800);
  --border:      var(--forest-800);
  --border-lt:   var(--forest-700);
  --text:        var(--forest-50);
  --text-muted:  var(--forest-400);
  --muted:       var(--forest-400);
  --accent:      var(--emerald-500);
  --accent-lt:   var(--emerald-400);
  --accent-pale: rgba(16, 185, 129, 0.15);

  --green:       var(--emerald-500);
  --green-pale:  rgba(16, 185, 129, 0.1);

  /* Text-safe accents flip to their light variants on dark panels */
  --gold:        #E9B44C;
  --amber:       #E9944C;
  --red:         #FFB4AB;
  --red-lt:      #FFB4AB;
  --teal:        var(--teal-300);

  --shadow:      0 8px 30px rgba(0, 0, 0, 0.4);

  --glass-bg:     rgba(13, 26, 24, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  body:not(.light) {
    --bg:          var(--forest-950);
    --panel:       var(--forest-900);
    --panel-hover: var(--forest-800);
    --border:      var(--forest-800);
    --border-lt:   var(--forest-700);
    --text:        var(--forest-50);
    --text-muted:  var(--forest-400);
    --muted:       var(--forest-400);
    --accent:      var(--emerald-500);
    --accent-lt:   var(--emerald-400);
    --accent-pale: rgba(16, 185, 129, 0.15);

    --green:       var(--emerald-500);
    --green-pale:  rgba(16, 185, 129, 0.1);

    --gold:        #E9B44C;
    --amber:       #E9944C;
    --red:         #FFB4AB;
    --red-lt:      #FFB4AB;
    --teal:        var(--teal-300);

    --glass-bg:     rgba(13, 26, 24, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
  }
}

html, body { overflow-x: hidden; }

body {
  font-family: var(--font);
  background-color: var(--bg);
  background-image:
    radial-gradient(at 0% 0%, rgba(45, 106, 79, 0.07) 0px, transparent 52%),
    radial-gradient(at 100% 0%, rgba(212, 160, 23, 0.06) 0px, transparent 52%),
    radial-gradient(at 100% 100%, rgba(45, 106, 79, 0.05) 0px, transparent 52%),
    radial-gradient(at 0% 100%, rgba(19, 86, 160, 0.04) 0px, transparent 52%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  transition: background-color 0.3s, color 0.3s;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:100;background:var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border-bottom:1px solid var(--glass-border);height:var(--topbar-h);
  display:flex;align-items:center;padding:0 24px;gap:12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, var(--shadow);
}
.topbar-logo{font-size:18px;font-weight:800;color:var(--accent);text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap}
.topbar-title{font-size:14px;color:var(--text-muted);margin-left:4px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}

.layout{display:flex;min-height:calc(100vh - var(--topbar-h))}
.sidebar{width:var(--sidebar-w);background:var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border-right:1px solid var(--glass-border);
  padding:16px 12px;flex-shrink:0;
  /* Sticky sidebar — stays on screen while main content scrolls */
  position:sticky;top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));overflow-y:auto;
  display: flex; flex-direction: column;
}
.main{flex:1;padding:32px;overflow-x:hidden}

/* ── Nav ────────────────────────────────────────────────────────── */
.nav-section{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-muted);padding:16px 12px 8px;opacity:.8}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:999px;
  cursor:pointer;font-size:14px;color:var(--text-muted);text-decoration:none;
  background:none;border:1px solid transparent;width:100%;
  transition:background .25s var(--ease-out), color .25s var(--ease-out), border-radius .35s var(--ease-out);
  margin-bottom:2px;
  font-weight:500; min-height:44px;
}
.nav-item:hover{background:rgba(27,28,26,0.05); color:var(--text); border-radius:var(--radius-sm)}
.nav-item.active{background:var(--accent-pale); color:var(--accent); font-weight:700}
.nav-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;font-size:11px;font-family:var(--mono);
  background:var(--accent-pale);color:var(--accent);border-radius:99px;padding:1px 8px;
  font-weight:700;
}

/* ── Typography & Page Headers ─────────────────────────────────── */
.page-hdr{display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:16px;margin-bottom:32px}
.page-title{font-size:24px;font-weight:800;letter-spacing:-0.02em}
.page-sub{font-size:15px;color:var(--text-muted);margin-top:4px}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, var(--shadow);
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out);
}
.card-hdr {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0,0,0,0.01);
}
.card-title {
  font-size: 16px;
  font-weight: 700;
}
.card-body {
  padding: 24px;
}
.card-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background-color: rgba(0,0,0,0.01);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.4rem;
  min-height: 44px; /* WCAG 2.5.8 / platform 44px touch-target rule */
  font-weight: 700;
  border-radius: 999px;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s var(--ease-out),
              background 0.25s var(--ease-out), border-radius 0.35s var(--ease-out), filter 0.25s;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: var(--font);
  gap: 0.5rem;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-lt); transform: translateY(-1px); box-shadow: 0 8px 20px var(--accent-pale); border-radius: var(--radius-sm); }

.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: var(--green-lt); transform: translateY(-1px); box-shadow: 0 8px 20px var(--green-pale); border-radius: var(--radius-sm); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--panel-hover); border-radius: var(--radius-sm); }

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { filter: brightness(1.1); box-shadow: 0 4px 12px rgba(179, 38, 30, 0.25); border-radius: var(--radius-sm); }

.btn-sm { padding: 0.45rem 0.9rem; font-size: 12px; min-height: 36px; /* dense-UI exception (table rows) — still above the 24px WCAG AA floor */ }
.btn-full { width: 100%; }
/* btn-green: alias for btn-primary (forest accent) */
.btn-green { background: var(--accent); color: #fff; }
.btn-green:hover { background: var(--accent-lt); transform: translateY(-1px); box-shadow: 0 8px 20px var(--accent-pale); border-radius: var(--radius-sm); }

/* ── Two-column responsive grid (hub dashboard layout) ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ── Stats ───────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.stat {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-num {
  font-size: 32px;
  font-weight: 800;
  margin-top: 8px;
  display: block;
}
.stat-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  opacity: 0.2;
}
.stat.accent .stat-num { color: var(--accent); }
.stat.green  .stat-num { color: var(--green); }
.stat.gold   .stat-num { color: var(--gold); }
.stat.teal   .stat-num { color: var(--teal); }
.stat.amber  .stat-num { color: var(--amber); }
.stat.red    .stat-num { color: var(--red); }

/* ── Tables ──────────────────────────────────────────────────────── */
.t-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th {
  background: rgba(27, 28, 26, 0.035);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid var(--border-lt);
}
body.dark th { background: var(--slate-800); color: var(--slate-400); }
td {
  padding: 14px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background-color: var(--panel-hover); }
td.mono { font-family: var(--mono); font-size: 13px; }

/* ── Forms ───────────────────────────────────────────────────────── */
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 1; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge-green  { background: var(--green-pale); color: var(--green); }
.badge-amber  { background: rgba(212, 160, 23, 0.14); color: var(--gold); }
.badge-red    { background: rgba(179, 38, 30, 0.08); color: var(--red); }
.badge-accent { background: var(--accent-pale); color: var(--accent); }
.badge-teal   { background: var(--teal-50); color: var(--teal-700); }
.badge-muted  { background: var(--slate-100); color: var(--slate-500); }

/* ── Modals ──────────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7);
  z-index: 1000; display: none; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px); padding: clamp(12px, 3vw, 24px); overflow-y: auto;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(1.5);
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  width: min(680px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  animation: modalIn 0.35s var(--ease-spring);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.modal-hdr {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; background: var(--panel); z-index: 1;
}
.modal-title { font-size: 18px; font-weight: 800; }
.modal-close {
  background: var(--panel-hover); border: 1px solid var(--border); font-size: 18px; cursor: pointer;
  color: var(--text-muted); width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.modal-body { padding: 20px; }
.modal-actions { display: flex; gap: 10px; margin-top: 10px; }
.modal-actions .btn { flex: 1; justify-content: center; }
.modal > .field, .modal > .form-row, .modal > .callout, .modal > .result-msg, .modal > .token-warn, .modal > [id$='-result'], .modal > #tkm-qr-wrap {
  margin-left: 20px;
  margin-right: 20px;
}
.modal > .field:first-of-type, .modal > .form-row:first-of-type, .modal > .callout:first-of-type { margin-top: 16px; }
.modal > .field:last-of-type, .modal > .form-row:last-of-type, .modal > .callout:last-of-type, .modal > .modal-actions:last-of-type { margin-bottom: 20px; }

/* ── Callouts ────────────────────────────────────────────────────── */
.callout {
  padding: 16px 20px; border-radius: var(--radius-sm); margin-bottom: 24px;
  font-size: 14px; border: 1px solid transparent;
}
.callout-info { background: var(--accent-pale); border-color: var(--accent); color: var(--accent); }
.callout-ok   { background: var(--green-pale); border-color: var(--green); color: var(--green); }
.callout-warn { background: rgba(212, 160, 23, 0.09); border-color: var(--gold-fill); color: var(--gold); }

/* ── Grids ───────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .grid-2, .form-row { grid-template-columns: 1fr; } }

/* ── Theme Switcher Button ── */
.theme-toggle {
  background: var(--panel-hover); border: 1px solid var(--border);
  width: 44px; height: 44px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  color: var(--text); font-size: 18px; flex-shrink: 0;
}

/* ── Org theme override ── */
.theme-org {
  --accent:      var(--teal-600);
  --accent-lt:   var(--teal-500);
  --accent-pale: var(--teal-50);
}
/* NOTE: never combine a selector and an @media at-rule in one selector list — the whole
   rule is dropped as invalid CSS (this exact bug shipped here and killed org dark mode;
   the district block below has always used the correct split form). */
body.theme-org.dark {
  --accent:      var(--teal-400);
  --accent-lt:   var(--teal-300);
  --accent-pale: rgba(20, 184, 166, 0.1);
}
@media (prefers-color-scheme: dark) {
  body.theme-org:not(.light) {
    --accent:      var(--teal-400);
    --accent-lt:   var(--teal-300);
    --accent-pale: rgba(20, 184, 166, 0.1);
  }
}

/* ── District theme override (Government / Ministry) ── */
.theme-district {
  --accent:      #3b5bdb;
  --accent-lt:   #4c6ef5;
  --accent-pale: #edf2ff;
}
body.theme-district.dark {
  --accent:      #748ffc;
  --accent-lt:   #91a7ff;
  --accent-pale: rgba(59, 91, 219, 0.12);
}
@media (prefers-color-scheme: dark) {
  body.theme-district:not(.light) {
    --accent:      #748ffc;
    --accent-lt:   #91a7ff;
    --accent-pale: rgba(59, 91, 219, 0.12);
  }
}

/* ── Bar charts (Legacy) ─────────────────────────────────────────── */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bar-label{font-size:12px;color:var(--text-muted);width:120px;flex-shrink:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;height:7px;background:var(--border);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:width .5s;background:var(--accent)}
.bar-val{font-size:12px;font-weight:700;font-family:var(--mono);width:36px;text-align:right;flex-shrink:0}

/* ── School card ─────────────────────────────────────────────────── */
.school-card{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow)}
.sc-header{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--border);background:rgba(0,0,0,0.01)}
.sc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sc-dot.online{background:var(--green);box-shadow:0 0 8px var(--green)}
.sc-dot.offline{background:var(--slate-400)}
.sc-name{font-size:16px;font-weight:700}
.sc-meta{font-size:12px;color:var(--text-muted);font-family:var(--mono);margin-top:2px}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.sc-cell{padding:14px 20px;border-right:1px solid var(--border)}
.sc-cell:last-child{border-right:none}
.sc-cell-label{font-size:11px;color:var(--text-muted);font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.sc-cell-val{font-size:14px;font-weight:600}

/* ── Token box ───────────────────────────────────────────────────── */
.token-box{background:var(--bg);border:1px solid var(--green);border-radius:8px;
  padding:12px 16px;font-family:var(--mono);font-size:13px;color:var(--green);
  word-break:break-all;flex:1}
.token-warn{background:rgba(212, 160, 23, 0.12);border:1px solid var(--gold-fill);
  border-radius:8px;padding:12px 16px;font-size:13px;color:var(--gold);margin-bottom:16px}

/* ── Results & errors ────────────────────────────────────────────── */
.result-msg{display:none;border-radius:8px;padding:12px 16px;font-size:14px;font-family:var(--mono)}
.err-msg{color:var(--red);font-size:13px;font-family:var(--mono);margin-top:8px;display:none}
.err-msg.show{display:block}

/* ── Toast ───────────────────────────────────────────────────────── */
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toast{position:fixed;bottom:32px;right:32px;z-index:10000;background:var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius:var(--radius-sm);padding:14px 24px;font-size:14px;font-weight:600;
  box-shadow:0 10px 25px -5px rgba(0,0,0,0.2);animation:toastIn .3s ease;
  border-left:4px solid var(--accent); color: var(--text);
}

/* ── Mobile Nav Toggle ── */
.mob-menu-btn{
  display:none; background:none; border:none; cursor:pointer;
  padding:8px; margin-left:-8px; border-radius:8px;
  color:var(--text); font-size:24px; line-height:1;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.mob-overlay{
  display:none; position:fixed; inset:0; z-index:150;
  background:rgba(15,23,42,0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity:0; transition:opacity .25s;
}
.mob-overlay.open{display:block; opacity:1}

/* ── Charts ──────────────────────────────────────────────────────── */
.chart-container { position: relative; height: 300px; width: 100%; }

/* ── Mobile Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .mob-menu-btn{display:flex}
  .layout{min-height:calc(100vh - var(--topbar-h)); position:relative}
  .sidebar {
    /* On mobile: slide-in drawer from the left */
    position: fixed; left: calc(-1 * var(--sidebar-w)); top: 0; bottom: 0;
    height: 100%; overflow-y: auto;
    z-index: 200; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 10px 0 30px rgba(0,0,0,0.2);
    width: var(--sidebar-w);
  }
  .sidebar.mob-open { transform: translateX(var(--sidebar-w)); }
  .main { padding: 20px 16px; width:100%; min-width:0; }
  .topbar { padding: 0 16px; gap: 8px; }
  .topbar-logo { font-size: 15px; }
  .topbar-title { font-size: 12px; max-width:80px; }
  .topbar-right { gap: 8px; }
  .page-title{font-size:20px}
  .page-sub{font-size:13px}
  .stat-grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .stat{padding:18px}
  .stat-num{font-size:24px}
  .sc-grid { grid-template-columns: 1fr; }
  .sc-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .sc-cell:last-child { border-bottom: none; }
  .modal{max-width:100%; margin:0 12px; max-height:92vh}
  .modal-bg{padding:12px; align-items:flex-end}
  .grid-2, .form-row, .two-col { grid-template-columns: 1fr; }
  .page-hdr{flex-direction:column; align-items:stretch; gap:12px}
  .modal { border-radius: 26px 26px 0 0; max-height: 94vh; }
  .modal-hdr { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .modal > .field, .modal > .form-row, .modal > .callout, .modal > .result-msg, .modal > .token-warn, .modal > [id$='-result'], .modal > #tkm-qr-wrap {
    margin-left: 16px;
    margin-right: 16px;
  }
  .modal-actions { flex-direction: column; }
}

/* ── Standard Branding ── */
.logo-img { height: 32px; width: auto; display: block; }
.logo-mark-img { height: 32px; width: auto; display: block; }
body.dark .logo-img,
body.dark .logo-mark-img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  body:not(.light) .logo-img,
  body:not(.light) .logo-mark-img { filter: brightness(0) invert(1); }
}

/* ── Reduced motion (WCAG 2.3.3) — landing.css pattern ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}