/* APEX SIS prototype — shared styles */

/*
  Palette taken from apex-schools.org:
    #184563  deep navy   (headings)
    #356c84  steel blue  (primary)
    #fcbf16  gold        (accent)
  Neutrals are biased toward the navy rather than pure grey.
*/
:root{
  --ink:#16334A;      --ink-2:#46647A;   --ink-3:#7A93A5;
  --line:#DBE4EA;     --line-2:#EDF2F5;
  --surface:#F4F7F9;  --card:#FFFFFF;
  --primary:#356C84;  --primary-ink:#FFFFFF;  --primary-soft:#E4EDF2;
  --navy:#184563;
  --accent:#FCBF16;   --accent-ink:#4A3705;
  --good:#2F6F4E;     --warn:#A0740D;   --crit:#A33A2C;
  --role:#6BA3BC;     --role-ink:#16334A;
  --bar:#184563;      --bar-line:rgba(255,255,255,.12);
  --shadow:0 1px 2px rgba(24,69,99,.07), 0 8px 24px -12px rgba(24,69,99,.22);
  --r:6px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E4EDF2;    --ink-2:#9FB6C4;   --ink-3:#75909F;
    --line:#24404F;   --line-2:#1A303C;
    --surface:#0C1A22; --card:#12242E;
    --primary:#6BA3BC; --primary-ink:#06181F;  --primary-soft:#1B3A49;
    --navy:#8FB6CC;
    --accent:#FCBF16; --accent-ink:#3A2B04;
    --good:#5CA37A;   --warn:#D4A73C;   --crit:#D4715F;
    --role:#6BA3BC;   --role-ink:#0C1A22;
    --bar:#0E2C3F;    --bar-line:rgba(255,255,255,.10);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --ink:#E4EDF2;    --ink-2:#9FB6C4;   --ink-3:#75909F;
  --line:#24404F;   --line-2:#1A303C;
  --surface:#0C1A22; --card:#12242E;
  --primary:#6BA3BC; --primary-ink:#06181F;  --primary-soft:#1B3A49;
  --navy:#8FB6CC;
  --accent:#FCBF16; --accent-ink:#3A2B04;
  --good:#5CA37A;   --warn:#D4A73C;   --crit:#D4715F;
  --role:#6BA3BC;   --role-ink:#0C1A22;
  --bar:#0E2C3F;    --bar-line:rgba(255,255,255,.10);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.wordmark,.tile-n{font-family:Archivo,"Segoe UI",system-ui,sans-serif;text-wrap:balance}
h1{font-size:26px;font-weight:600;letter-spacing:-.01em;margin:0}
h2{font-size:15px;font-weight:600;margin:0}
a{color:var(--primary)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- wordmark ----------
   Mirrors the real Apex logo: "APEX" letter-spaced, followed by a gold second word.
   Navy on light grounds, white on the navy bar. */
.wordmark{display:flex;align-items:baseline;gap:7px;text-decoration:none;font-family:Archivo,system-ui,sans-serif;white-space:nowrap}
.wordmark .mark{
  font-weight:700;font-size:17px;letter-spacing:.18em;color:var(--navy);
}
.wordmark .mark-sub{
  font-weight:600;font-size:16px;letter-spacing:.01em;color:var(--accent);
}
.wordmark small{font-weight:500;color:var(--ink-3);font-size:12px;letter-spacing:.02em}

/* ---------- auth pages ---------- */
.auth{min-height:100vh;display:grid;align-content:center;justify-items:center;padding:40px 20px;gap:22px}
.auth-card{width:100%;max-width:390px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:30px}
.auth-card.restricted{border-top:3px solid var(--accent)}
.auth-card.restricted .eyebrow{color:var(--warn)}
.auth-head{margin-bottom:22px}
.auth-head p{margin:6px 0 0;color:var(--ink-3);font-size:13.5px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],select{
  font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:5px;
  background:var(--surface);color:var(--ink);width:100%;
}
.btn{
  font:inherit;font-weight:600;font-family:Archivo,system-ui,sans-serif;cursor:pointer;
  padding:9px 16px;border-radius:5px;border:1px solid transparent;
  background:var(--primary);color:var(--primary-ink);width:100%;text-align:center;text-decoration:none;display:inline-block;
}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--line);width:auto;padding:6px 12px;font-size:13px}
.auth-alt{font-size:13px;color:var(--ink-3);text-align:center}
.demo-logins{width:100%;max-width:390px;border:1px dashed var(--line);border-radius:var(--r);padding:14px 16px}
.demo-logins .eyebrow{margin-bottom:8px;display:block}
.demo-logins ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:12.5px}
.demo-logins li{display:flex;justify-content:space-between;gap:12px;color:var(--ink-2)}
.demo-logins a{text-decoration:none}

/* ---------- app shell ----------
   Dark navy bar carrying the logo the way their own site does. */
.topbar{
  display:flex;align-items:center;gap:16px;padding:0 20px;height:56px;
  background:var(--bar);border-bottom:1px solid var(--bar-line);position:sticky;top:0;z-index:5;
}
.topbar .spacer{flex:1}
.topbar .wordmark .mark{color:#FFFFFF}
.topbar .who{font-size:13px;color:rgba(255,255,255,.62)}
.topbar .btn.ghost{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.28)}
.topbar .btn.ghost:hover{background:rgba(255,255,255,.1)}
.topbar :focus-visible{outline-color:var(--accent)}
.ctx{
  display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.78);
  border-left:1px solid rgba(255,255,255,.2);padding-left:16px;height:26px;
}
.role-chip{
  font-family:Archivo,system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;background:var(--role);color:var(--role-ink);
}

.layout{display:grid;grid-template-columns:212px 1fr;min-height:calc(100vh - 56px)}
.sidenav{border-right:1px solid var(--line);padding:18px 12px;background:var(--card)}
.sidenav .eyebrow{padding:0 10px;margin-bottom:8px;display:block}
.sidenav a{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 10px;border-radius:5px;color:var(--ink-2);text-decoration:none;font-size:13.5px;
}
.sidenav a[aria-current=page]{background:var(--primary-soft);color:var(--primary);font-weight:600}
.sidenav a .n{font-size:11.5px;color:var(--ink-3);font-family:"IBM Plex Mono",monospace}
.sidenav .group{margin-bottom:18px;display:grid;gap:1px}
main{padding:26px 28px 60px;max-width:1120px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.page-head p{margin:5px 0 0;color:var(--ink-3);font-size:13.5px}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:26px}
.tile{background:var(--card);padding:14px 16px;display:grid;gap:2px}
.tile .k{font-size:12px;color:var(--ink-3)}
.tile-n{font-size:25px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile .sub{font-size:12px;color:var(--ink-3)}
.tile .sub.up{color:var(--good)}
.tile .sub.warn{color:var(--warn)}

/* ---------- panels & tables ---------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.panel-head a{font-size:12.5px;text-decoration:none}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:9px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace}
.muted{color:var(--ink-3)}
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:3px;background:var(--line-2);color:var(--ink-2)}
.pill.good{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pill.crit{background:color-mix(in srgb,var(--crit) 15%,transparent);color:var(--crit)}
.code{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-2)}
.stub{padding:14px 16px;font-size:13px;color:var(--ink-3);border-top:1px dashed var(--line)}
.list{list-style:none;margin:0;padding:0}
.list li{padding:11px 16px;border-bottom:1px solid var(--line-2);display:flex;gap:12px;align-items:flex-start}
.list li:last-child{border-bottom:0}
.list .when{margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--role);margin-top:7px;flex:none}

.note{margin-top:26px;font-size:12.5px;color:var(--ink-3);border-left:2px solid var(--line);padding-left:12px}

@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .sidenav{border-right:0;border-bottom:1px solid var(--line)}
  .sidenav .group{display:flex;flex-wrap:wrap;gap:4px}
  main{padding:20px 16px 50px}
  .ctx{display:none}
}