/* ============================================================
   ZENITH — component & layout styles
   ============================================================ */

/* ---------- App shell ---------- */
#root{min-height:100vh;}
.app{display:flex;min-height:100vh;background:var(--bg-page);}

/* Sidebar */
.side{width:248px;flex-shrink:0;background:var(--navy);color:var(--fg-on-dark);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.side__brand{display:flex;align-items:center;gap:10px;padding:22px 22px 18px;}
.side__nav{display:flex;flex-direction:column;gap:2px;padding:8px 12px;flex:1;overflow-y:auto;}
.side__sec{font-size:10px;font-weight:600;letter-spacing:var(--tr-caps);text-transform:uppercase;
  color:var(--fg-on-dark-muted);padding:16px 12px 6px;}
.navitem{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);
  color:#C9D4E8;text-decoration:none;font-size:14.5px;font-weight:500;border:none;background:none;
  width:100%;text-align:left;transition:background .15s,color .15s;letter-spacing:var(--tr-body);}
.navitem i{font-size:20px;}
.navitem:hover{background:rgba(255,255,255,.07);color:#fff;}
.navitem.active{background:var(--blue);color:#fff;box-shadow:var(--sh-blue);}
.side__foot{padding:14px;border-top:1px solid rgba(255,255,255,.10);}

/* Role switch (demo control) */
.roleswitch{display:flex;gap:4px;background:rgba(255,255,255,.08);padding:4px;border-radius:var(--r-pill);}
.roleswitch button{flex:1;border:none;background:none;color:#B9C6DE;font-size:12px;font-weight:600;
  padding:7px 6px;border-radius:var(--r-pill);transition:.15s;letter-spacing:var(--tr-body);}
.roleswitch button.on{background:#fff;color:var(--navy);}

/* Main column */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{min-height:64px;display:flex;align-items:center;gap:16px;padding:10px 28px;background:#fff;
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;}
.topbar h1{font-size:19px;font-weight:600;letter-spacing:var(--tr-head);margin:0;line-height:1.2;white-space:nowrap;}
.topbar .sub{font-size:12.5px;color:var(--fg-muted);margin-top:2px;}
.content{padding:28px;max-width:1180px;width:100%;margin:0 auto;}

/* Lang toggle */
.langtog{display:flex;border:1px solid var(--border-strong);border-radius:var(--r-pill);overflow:hidden;}
.langtog button{border:none;background:#fff;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--fg-muted);}
.langtog button.on{background:var(--navy);color:#fff;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;
  font-weight:600;font-size:14.5px;letter-spacing:var(--tr-body);padding:12px 22px;border-radius:var(--r-pill);
  transition:all .15s cubic-bezier(.22,1,.36,1);white-space:nowrap;}
.btn i{font-size:18px;}
.btn--primary{background:var(--blue);color:#fff;}
.btn--primary:hover{background:var(--blue-dark);box-shadow:var(--sh-blue);}
.btn--primary:active{transform:scale(.98);}
.btn--ghost{background:#fff;color:var(--navy);border:1.5px solid var(--border-strong);}
.btn--ghost:hover{border-color:var(--navy);background:var(--grey-5);}
.btn--green{background:var(--green);color:#fff;}
.btn--green:hover{background:#0c8a58;box-shadow:0 10px 30px rgba(18,166,107,.28);}
.btn--quiet{background:transparent;color:var(--blue);padding:10px 12px;}
.btn--quiet:hover{color:var(--blue-dark);}
.btn--danger{background:var(--red-soft);color:var(--red);}
.btn--danger:hover{background:#f7dcdc;}
.btn[disabled]{background:var(--grey-3);color:#fff;cursor:not-allowed;box-shadow:none;}
.btn--sm{padding:9px 16px;font-size:13px;}
.btn--lg{padding:15px 30px;font-size:16px;}

/* ---------- Cards ---------- */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);}
.card--pad{padding:24px;}
.card--hover{transition:transform .18s,box-shadow .18s;}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--sh-md);}
.card--dark{background:var(--navy);color:#fff;border-color:rgba(255,255,255,.1);}

/* chips / badges */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:5px 12px;border-radius:var(--r-pill);letter-spacing:var(--tr-body);white-space:nowrap;}
.chip i{font-size:14px;flex-shrink:0;}
.chip--blue{background:var(--blue-soft);color:var(--blue-dark);}
.chip--green{background:var(--green-soft);color:#0c7a4f;}
.chip--amber{background:var(--amber-soft);color:#9a6c0c;}
.chip--grey{background:var(--grey-5);color:var(--fg-muted);}
.chip--red{background:var(--red-soft);color:var(--red);}

.eyebrow{margin:0 0 8px;}

/* divider */
.hr{height:1px;background:var(--border);border:none;margin:0;}

/* grid helpers */
.grid{display:grid;gap:20px;}
.row{display:flex;gap:16px;}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;}

/* stat */
.stat__num{font-size:34px;font-weight:600;letter-spacing:var(--tr-head);line-height:1;font-variant-numeric:tabular-nums;}
.stat__lab{font-size:13px;color:var(--fg-muted);margin-top:6px;}

/* progress bar */
.pbar{height:8px;border-radius:999px;background:var(--grey-4);overflow:hidden;}
.pbar > span{display:block;height:100%;border-radius:999px;background:var(--blue);transition:width .4s cubic-bezier(.22,1,.36,1);}

/* ---------- Exam runner (full-screen exam hall) ---------- */
.exam{position:fixed;inset:0;z-index:200;background:#EEF2F8;display:flex;flex-direction:column;}
.exam__bar{height:60px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:18px;padding:0 22px;flex-shrink:0;}
.exam__bar .pill{font-size:12.5px;color:#C9D4E8;white-space:nowrap;}
.exam__timer{margin-left:auto;display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;
  font-weight:600;font-size:20px;background:rgba(255,255,255,.08);padding:7px 16px;border-radius:var(--r-pill);}
.exam__timer.warn{background:rgba(232,163,23,.22);color:var(--amber);}
.exam__body{flex:1;display:flex;min-height:0;}
.exam__paper{flex:1;overflow-y:auto;padding:40px 24px 120px;}
.paper{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--sh-md);padding:44px 48px;}
.qnum{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-weight:600;font-size:15px;flex-shrink:0;}
.opt{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border:1.5px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;transition:.13s;background:#fff;margin-bottom:10px;}
.opt:hover{border-color:var(--blue);background:var(--blue-soft);}
.opt.sel{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue);}
.opt__key{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border-strong);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:var(--fg-muted);}
.opt.sel .opt__key{background:var(--blue);border-color:var(--blue);color:#fff;}

/* question navigator */
.exam__nav{width:236px;flex-shrink:0;background:#fff;border-left:1px solid var(--border);
  padding:20px 18px;overflow-y:auto;}
.qgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.qdot{aspect-ratio:1;border-radius:var(--r-xs);border:1.5px solid var(--border);background:#fff;
  font-size:13px;font-weight:600;color:var(--fg-muted);cursor:pointer;transition:.12s;}
.qdot:hover{border-color:var(--blue);}
.qdot.answered{background:var(--blue);border-color:var(--blue);color:#fff;}
.qdot.flagged{border-color:var(--amber);background:var(--amber-soft);color:#9a6c0c;}
.qdot.current{outline:3px solid rgba(20,86,199,.3);outline-offset:1px;}

/* answer textarea */
.ans{width:100%;min-height:200px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:14px 16px;font-size:15px;line-height:1.6;color:var(--fg);resize:vertical;outline:none;background:#fff;}
.ans:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,86,199,.14);}

/* ---------- Z-score gauge ---------- */
.zgauge{position:relative;width:200px;height:200px;}
.zgauge__val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.zgauge__num{font-size:46px;font-weight:600;letter-spacing:-0.02em;line-height:1;}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:var(--tr-caps);
  color:var(--fg-muted);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--border);}
.tbl td{padding:14px;border-bottom:1px solid var(--border);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr.clickable{cursor:pointer;}
.tbl tr.clickable:hover{background:var(--grey-5);}

/* avatar */
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0;}

/* segmented control */
.seg{display:inline-flex;background:var(--grey-5);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px;}
.seqarrow{border:none;background:none;color:var(--grey-2);padding:1px 4px;cursor:pointer;line-height:1;}
.seqarrow:hover:not(:disabled){color:var(--blue);}
.seqarrow:disabled{opacity:.3;cursor:not-allowed;}
.seqarrow i{font-size:14px;}
.seg button{border:none;background:none;padding:8px 18px;border-radius:var(--r-pill);font-size:13.5px;
  font-weight:600;color:var(--fg-muted);transition:.14s;}
.seg button.on{background:#fff;color:var(--navy);box-shadow:var(--sh-xs);}

/* mobile */
.mobnav{display:none;}
.roleswitch-m{display:none;}
.signout-m{display:none;}

/* ============ AUTH — student/teacher split ============ */
.auth{position:fixed;inset:0;display:flex;background:var(--bg-page);z-index:100;}
.auth__brand{width:46%;max-width:620px;flex-shrink:0;background:radial-gradient(120% 90% at 12% 8%,#1B3A6B 0,transparent 55%),
  linear-gradient(150deg,#16294B 0%,#0E1F3D 60%,#0A1730 100%);color:#fff;
  padding:48px 54px;display:flex;flex-direction:column;gap:30px;position:relative;overflow:hidden;}
.auth__rings{position:absolute;inset:0;pointer-events:none;}
.auth__rings span{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08);}
.auth__rings span:nth-child(1){width:520px;height:520px;right:-180px;bottom:-160px;}
.auth__rings span:nth-child(2){width:340px;height:340px;right:-90px;bottom:-70px;}
.auth__rings span:nth-child(3){width:200px;height:200px;right:-20px;bottom:10px;background:var(--grad-brand);opacity:.14;filter:blur(10px);border:none;}
.auth__form{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;position:relative;overflow-y:auto;}
.auth__formInner{width:100%;max-width:400px;}
.auth__logo-m{display:none;margin-bottom:24px;}
.auth__roles{display:flex;gap:8px;background:var(--grey-5);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px;}
.auth__roles button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;background:none;
  padding:11px 10px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--fg-muted);transition:.15s;}
.auth__roles button i{font-size:19px;}
.auth__roles button.on{background:#fff;color:var(--navy);box-shadow:var(--sh-sm);}

/* ============ AUTH — admin console ============ */
.authadmin{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(130% 100% at 50% 0%,#16294B 0,#0A1730 60%,#070F22 100%);overflow-y:auto;}
.authadmin__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 35%,#000 0,transparent 72%);mask-image:radial-gradient(circle at 50% 35%,#000 0,transparent 72%);}
.authadmin__card{position:relative;z-index:1;width:100%;max-width:430px;background:rgba(18,32,58,.82);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:34px 34px 30px;
  box-shadow:var(--sh-lg);backdrop-filter:blur(8px);}

@media(max-width:860px){
  .auth__brand{display:none;}
  .auth__logo-m{display:block;}
}
@media(max-width:900px){
  .side{display:none;}
  .topbar{flex-wrap:wrap;row-gap:10px;gap:8px;}
  /* role switcher moves into the top bar on mobile (sidebar is hidden) */
  .roleswitch-m{display:flex;background:var(--grey-5);border:1px solid var(--border);}
  .roleswitch-m button{color:var(--fg-muted);font-size:12px;padding:6px 12px;}
  .roleswitch-m button.on{background:var(--navy);color:#fff;}
  /* sign-out surfaced in the top bar on mobile (sidebar with the desktop one is hidden) */
  .signout-m{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    flex-shrink:0;border:1px solid var(--border);background:#fff;border-radius:var(--r-pill);
    color:var(--fg-muted);cursor:pointer;}
  .signout-m i{font-size:20px;}
  .signout-m:active{background:var(--grey-5);}
  .mobnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--navy);
    padding:8px 4px;justify-content:space-between;gap:0;}
  /* items share the width evenly so all fit (admin has 7) — no clipped tab */
  .mobnav button{flex:1 1 0;min-width:0;border:none;background:none;color:#A9B6CE;display:flex;
    flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:600;line-height:1.15;
    text-align:center;padding:6px 2px;border-radius:var(--r-sm);}
  .mobnav button i{font-size:21px;}
  .mobnav button.active{color:#fff;}
  .content{padding:18px 16px 90px;}
  .topbar{padding:10px 16px;}

  /* exam: stack the two-pane layouts and surface the side rail (it holds the
     config "Lock in" button + MCQ navigator), instead of hiding it */
  .exam__body{flex-direction:column;overflow-y:auto;}
  .exam__body .exam__paper{padding:18px 14px 40px;overflow:visible;flex:none;}
  .exam__nav{display:block;width:auto;border-left:none;border-top:1px solid var(--border);}
  .exam__bar{gap:10px;padding:0 14px;}
  .exam__bar .pill{display:none;}
  .paper{padding:24px 18px;}
  /* sequential-exam paper is a direct child of .exam — keep it filling &
     scrolling within the viewport (no page-level gap) */
  .exam > .exam__paper{padding:18px 14px 60px;}
  /* exam config: neutralise inline flex/overflow/width so panes stack & flow */
  .cfg-cards{flex:none !important;overflow:visible !important;padding:18px 14px 24px !important;}
  .exam__nav[style]{width:auto !important;}
}

/* phone: collapse fixed multi-column grids (inline grid-template needs !important) */
@media(max-width:640px){
  .grid{grid-template-columns:1fr !important;}
  .grid--2mob{grid-template-columns:1fr 1fr !important;gap:12px !important;}
  .grid--3mob{grid-template-columns:1fr 1fr !important;gap:12px !important;}
  .hide-sm{display:none !important;}

  /* dashboard Z-Score / Island-Rank hero */
  .hero-nums{grid-template-columns:1fr !important;gap:8px !important;}
  .hero-div{display:none !important;}
  .hero-z{font-size:74px !important;}
  .hero-rank{font-size:60px !important;}

  /* topbar title shouldn't force horizontal overflow */
  .topbar h1{font-size:16px !important;white-space:normal !important;}
  .topbar .sub{display:none;}

  .card--pad{padding:18px;}
  /* Tables STACK into labelled cards on phones (no clipped horizontal scroll).
     data-label on each td is populated from the <th> by responsive-tables.js. */
  .tbl thead{display:none;}
  .tbl,.tbl tbody{display:block;width:100%;}
  .tbl tr{display:block;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-sm);padding:4px 14px;margin:0 0 10px;}
  .tbl tr:last-child{margin-bottom:0;}
  .tbl tr td{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:10px 0;border-bottom:1px solid var(--border);text-align:right;font-size:13.5px;}
  .tbl tr td:last-child{border-bottom:none;}
  .tbl tr td::before{content:attr(data-label);text-align:left;flex-shrink:0;font-size:11px;
    font-weight:600;text-transform:uppercase;letter-spacing:var(--tr-caps);color:var(--fg-muted);}
  .tbl tr td:empty{display:none;}
  /* cells whose value is a wide widget (progress bar) get the value on its own row */
  .tbl tr td > div{flex:1 1 100%;min-width:0;}
  /* full-width CTAs so wide button labels never overflow their card */
  .paper-cta{width:100%;}
  .paper-cta .btn{flex:1 1 100%;}
}