/* superadmin.js — the platform console overlay (cc.aidued.com) */
.sa-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(12, 16, 24, .55); backdrop-filter: blur(3px); display: flex; align-items: stretch; justify-content: center; padding: 24px; }
.sa-shell { width: 100%; max-width: 1080px; background: var(--panel, #fff); color: var(--ink, #141821); border-radius: 16px; box-shadow: 0 24px 80px rgba(0, 0, 0, .4); display: flex; flex-direction: column; overflow: hidden; }
.sa-head { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line, #e5e8ef); flex-wrap: wrap; }
.sa-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.sa-brand span { font-size: 20px; }
.sa-tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.sa-tab { border: none; background: none; padding: 8px 12px; border-radius: 9px; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink-soft, #55607a); cursor: pointer; }
.sa-tab:hover { background: var(--panel-2, #f2f4f9); }
.sa-tab.on { background: var(--brand, #2e6fc4); color: var(--on-fill, #fff); }
.sa-close { border: none; background: var(--panel-2, #f2f4f9); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--ink-soft); }
.sa-pane { padding: 18px 20px; overflow: auto; flex: 1; }

.sa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.sa-card { border: 1px solid var(--line, #e5e8ef); border-radius: 12px; padding: 12px 14px; background: var(--panel-2, #f8fafd); }
.sa-card-l { display: block; font-size: 12px; color: var(--ink-soft, #55607a); font-weight: 600; }
.sa-card-v { display: block; font-size: 24px; font-weight: 800; margin-top: 2px; }

.sa-tablewrap { overflow-x: auto; border: 1px solid var(--line, #e5e8ef); border-radius: 12px; }
.sa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sa-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); position: sticky; top: 0; }
.sa-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sa-table tr:last-child td { border-bottom: none; }
.sa-amt { font-variant-numeric: tabular-nums; }
.sa-h3 { font-size: 14px; font-weight: 800; margin: 18px 0 8px; }

.sa-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.sa-pill.good { background: rgba(26, 160, 90, .16); color: #158048; }
.sa-pill.warn { background: rgba(214, 158, 30, .18); color: #9a6b00; }
.sa-pill.bad { background: rgba(200, 60, 60, .14); color: #b23b3b; }

.sa-form { max-width: 720px; margin-bottom: 16px; }
.sa-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
.sa-list { display: flex; flex-direction: column; gap: 8px; }
.sa-coupon { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.sa-coupon.off { opacity: .6; }
.sa-coupon > div:nth-child(2) { flex: 1; }
.sa-code { font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: .06em; margin-right: 8px; }

.sa-gate { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; gap: 8px; align-items: center; }

@media (max-width: 640px) { .sa-overlay { padding: 0; } .sa-shell { border-radius: 0; } .sa-head { gap: 8px; } }

/* ── Standalone console app (cc.aidued.com) ──────────────────────────────────
   The console is the WHOLE application on the console host — its own sidebar and
   its own body, with the school app never mounted. (.sa-overlay above is still
   used for Ctrl+Alt+S / #/superadmin on the ordinary school domain, where the
   console genuinely is a panel over the school app.) */
body.cc-app-host { margin: 0; background: var(--bg, #f6f8fc); }
.cc-app { display: flex; min-height: 100vh; align-items: stretch; }

/* This rail is dark in BOTH themes — it is the console's identity, not a
   theme response — so it is one of the few surfaces where the "whitewash on
   dark" complaint applies no matter what the school has chosen. #e8eefc on
   #10192b measured 15.11:1, which is the pure-contrast maximum this codebase
   is moving away from; see the long note on [data-theme="dark"] in style.css
   for why that is a comfort problem rather than a legibility one. The ground
   is lifted a step and the ink dropped to a navy-tinted light grey: 11.74:1,
   with the two alpha-derived greys below still clearing AA at 5.31 and 7.62. */
.cc-side {
  width: 232px; flex: 0 0 232px; display: flex; flex-direction: column;
  background: #151d2e; color: #ced8ea; padding: 18px 12px; gap: 18px;
}
.cc-side-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.cc-side-mark { font-size: 22px; }
.cc-side-brand b { font-size: 16px; letter-spacing: .2px; }
.cc-side-sub { font-size: 11.5px; color: rgba(206, 216, 234, .62); margin-top: 1px; }

.cc-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cc-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; background: none; color: rgba(206, 216, 234, .78);
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
/* hover brightens to the rail's full ink (7.62 → 11.74:1) rather than to #fff,
   which on this ground was 15.11:1 — a flash of glare on every pointer move. */
.cc-nav-item:hover { background: rgba(255, 255, 255, .07); color: #ced8ea; }
/* --brand is themed: in dark mode it is #6ea8ff, and #fff on that measured
   2.41:1 — the selected nav item was the least readable thing in the console
   for anyone with dark mode on. --on-fill exists for exactly this pairing. */
.cc-nav-item.on { background: var(--brand, #2e6fc4); color: var(--on-fill, #fff); }
.cc-nav-ic { font-size: 15px; width: 20px; text-align: center; }

.cc-side-foot { padding: 0 4px; }
.cc-signout {
  width: 100%; border: 1px solid rgba(255, 255, 255, .18); background: none;
  color: rgba(206, 216, 234, .8); font: inherit; font-size: 13px;
  padding: 8px; border-radius: 9px; cursor: pointer;
}
.cc-signout:hover { background: rgba(255, 255, 255, .08); color: #ced8ea; }

.cc-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cc-topbar {
  display: flex; align-items: center; gap: 12px; padding: 14px 22px;
  border-bottom: 1px solid var(--line, #e5e8ef); background: var(--panel, #fff);
}
.cc-title { margin: 0; font-size: 18px; }
.cc-topbar-link { font-size: 13px; color: var(--brand, #2e6fc4); text-decoration: none; }
.cc-main { padding: 20px 22px; overflow: auto; flex: 1; }

@media (max-width: 820px) {
  .cc-app { flex-direction: column; }
  .cc-side { width: auto; flex: none; flex-direction: row; align-items: center; gap: 10px; padding: 10px; overflow-x: auto; }
  .cc-side-brand { flex: 0 0 auto; }
  .cc-nav { flex-direction: row; flex: 1; gap: 4px; }
  .cc-nav-item span:not(.cc-nav-ic) { display: none; }
  .cc-nav-item { padding: 9px 11px; }
  .cc-side-foot { flex: 0 0 auto; }
  .cc-signout { width: auto; padding: 8px 10px; }
}

/* ── clickable school rows + avatars (schools list) ───────────────────────── */
.sa-row { cursor: pointer; }
.sa-row:hover { background: var(--panel-2, #f2f4f9); }
.sa-row:focus-visible { outline: 2px solid var(--brand, #2e6fc4); outline-offset: -2px; }
.sa-schoolcell { display: flex; align-items: center; gap: 10px; }
.sa-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: #fff; font-weight: 800; font-size: 12.5px; flex: 0 0 auto; letter-spacing: .02em; overflow: hidden; }
.sa-chev { color: var(--ink-soft, #8891a5); text-align: right; font-size: 18px; width: 20px; }
.sa-amt { font-variant-numeric: tabular-nums; }

/* ── school detail drawer (slide-over) ────────────────────────────────────── */
.cc-drawer-back { position: fixed; inset: 0; z-index: 9500; background: rgba(12, 16, 26, .42); display: flex; justify-content: flex-end; }
.cc-drawer { width: min(760px, 96vw); height: 100%; background: var(--panel, #fff); color: var(--ink, #141821); display: flex; flex-direction: column; box-shadow: -18px 0 60px rgba(0, 0, 0, .35); animation: cc-slide .18s ease; }
@keyframes cc-slide { from { transform: translateX(28px); opacity: .6; } to { transform: none; opacity: 1; } }
.cc-dr-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line, #e5e8ef); }
.cc-dr-x { margin-left: auto; border: none; background: var(--panel-2, #f2f4f9); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--ink-soft); flex: 0 0 auto; }
.cc-dr-tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line, #e5e8ef); overflow-x: auto; flex: 0 0 auto; }
.cc-dr-tab { border: none; background: none; padding: 7px 11px; border-radius: 8px; font: inherit; font-weight: 600; font-size: 13px; color: var(--ink-soft, #55607a); cursor: pointer; white-space: nowrap; }
.cc-dr-tab:hover { background: var(--panel-2, #f2f4f9); }
.cc-dr-tab.on { background: var(--brand, #2e6fc4); color: var(--on-fill, #fff); }
.cc-dr-body { flex: 1; overflow: auto; }
.cc-dr-pad { padding: 16px 18px; }
.cc-dr-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sa-crest { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); background: #fff; }

/* key/value grid */
.sa-kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 18px; margin: 4px 0 10px; }
.sa-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line, #e5e8ef); align-items: baseline; }
.sa-kv-l { color: var(--ink-soft, #55607a); font-size: 12.5px; }
.sa-kv-v { font-weight: 600; font-size: 13.5px; text-align: right; }
.sa-kv-v.mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sa-h4 { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.sa-mini { font-size: 12.5px; }
.sa-details summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; }
.sa-note-banner { background: var(--panel-2, #f2f4f9); border: 1px solid var(--line, #e5e8ef); border-radius: 9px; padding: 9px 11px; color: var(--ink-soft, #55607a); margin: 4px 0 10px; }

/* actions tab */
.sa-actiongrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.sa-action { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 1px solid var(--line, #e5e8ef); border-radius: 11px; background: var(--panel-2, #f8fafd); cursor: pointer; font: inherit; }
.sa-action:hover { border-color: var(--brand, #2e6fc4); }
.sa-grant { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }

.btn.xs { padding: 3px 8px; font-size: 12px; border-radius: 7px; }

@media (max-width: 640px) { .cc-drawer { width: 100vw; } }

/* ── Dashboard (console home) ──────────────────────────────────────────────── */
.sa-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sa-dash-title { margin: 0; font-size: 19px; }
.sa-dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

.sa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.sa-kpi { border: 1px solid var(--line, #e5e8ef); border-radius: 12px; padding: 11px 13px; background: var(--panel-2, #f8fafd); position: relative; overflow: hidden; }
.sa-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand, #2e6fc4); opacity: .55; }
.sa-kpi.good::before { background: #28a745; } .sa-kpi.bad::before { background: #e05b4f; } .sa-kpi.warn::before { background: #d69e1e; }
.sa-kpi-l { display: block; font-size: 11.5px; color: var(--ink-soft, #55607a); font-weight: 600; }
.sa-kpi-v { display: block; font-size: 22px; font-weight: 800; margin-top: 2px; line-height: 1.1; }
.sa-kpi-s { display: block; font-size: 11px; color: var(--ink-soft, #8891a5); margin-top: 2px; }

.sa-dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sa-chartcard { min-width: 0; }
.sa-chartbox { padding: 10px 12px 12px; height: 210px; }
.sa-chartbox canvas { max-height: 100%; }

.sa-panel { border: 1px solid var(--line, #e5e8ef); border-radius: 12px; background: var(--panel, #fff); overflow: hidden; }
.sa-panel-h { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--line, #e5e8ef); background: var(--panel-2, #f8fafd); font-size: 13.5px; }
.sa-badge { margin-left: auto; background: var(--brand, #2e6fc4); color: var(--on-fill, #fff); font-size: 11px; font-weight: 700; min-width: 20px; text-align: center; border-radius: 999px; padding: 1px 7px; }
.sa-dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.sa-attn-list { display: flex; flex-direction: column; }
.sa-attn-row { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--line, #eef1f6); cursor: pointer; }
.sa-attn-row:last-child { border-bottom: none; }
.sa-attn-row:hover { background: var(--panel-2, #f2f4f9); }
.sa-attn-row:focus-visible { outline: 2px solid var(--brand, #2e6fc4); outline-offset: -2px; }
.sa-attn-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-attn-r { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink-soft, #55607a); }
.sa-attn-r.good { color: #158048; } .sa-attn-r.bad { color: #b23b3b; } .sa-attn-r.warn { color: #9a6b00; }

/* ── the console's page skeleton ──────────────────────────────────────────────
   Shown for the one frame between clicking a sidebar item and that page's first
   element arriving. Every console page fetches before it appends anything, so
   without this the pane was blank white for the whole round trip and the click
   looked ignored (superadmin.js ccDraw). */
.cc-skel { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.cc-skel-bar {
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(127,140,170,.14) 25%, rgba(127,140,170,.26) 37%, rgba(127,140,170,.14) 63%);
  background-size: 400% 100%;
  animation: cc-skel-sweep 1.3s ease-in-out infinite;
}
.cc-skel-bar:first-child { height: 22px; border-radius: 9px; }
@keyframes cc-skel-sweep { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .cc-skel-bar { animation: none; } }