/* =========================================================
   SAI — Student Academic Intelligence
   Design system: navy + brass + teal · Fraunces / Inter / IBM Plex Mono
   ========================================================= */
:root{
  --ink:#0D1B2E;      --ink-2:#132842;   --ink-3:#1B3550;
  --ink-soft:#26415E; --paper:#FBFAF7;   --paper-2:#F3EFE6;
  --line:#E4DED1;     --line-2:#EFEADF;
  --brass:#B0863C;    --brass-soft:#D8B876; --brass-tint:#F6EEDD;
  --teal:#1F6E63;     --teal-soft:#3E9C8E;  --teal-tint:#E6F1EE;
  --rose:#B04A3C;     --rose-tint:#F7E9E5;
  --ok:#1F6E63;
  --muted:#6C7480;    --muted-2:#8A929E;
  --white:#fff;
  --shadow:0 1px 2px rgba(13,27,46,.05), 0 8px 24px rgba(13,27,46,.04);
  --shadow-lg:0 12px 40px rgba(13,27,46,.14);
  --r:14px; --r-sm:10px; --r-xs:8px;
  --sb-w:266px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--paper);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.muted{color:var(--muted)}
.ta-r{text-align:right}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 14px/1 'Inter',sans-serif;
  padding:11px 18px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;transition:.16s ease;white-space:nowrap;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--ink-3)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper-2)}
.btn-block{width:100%;padding:13px}
.btn svg{flex-shrink:0}

/* ---------- Flash ---------- */
.flash{
  padding:13px 16px;border-radius:var(--r-sm);font-size:14px;font-weight:500;
  margin-bottom:16px;border:1px solid;display:flex;gap:10px;line-height:1.45;
}
.flash-success{background:var(--teal-tint);border-color:#BFE0D8;color:#155e54}
.flash-error{background:var(--rose-tint);border-color:#E9C9C1;color:#8f3529}
.flash-info{background:var(--brass-tint);border-color:#EAD9B6;color:#7c5a1e}

/* ---------- Fields ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field-label{font-size:12.5px;font-weight:600;color:var(--ink-soft);letter-spacing:.01em}
.field input,.field select{
  font:400 15px/1.4 'Inter',sans-serif;color:var(--ink);
  padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);transition:.16s;width:100%;
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,134,60,.14);
}
.field input:disabled{background:var(--paper-2);color:var(--muted)}
.field.has-error input,.field.has-error select{border-color:var(--rose);box-shadow:0 0 0 3px rgba(176,74,60,.12)}
.field-err{font-size:12.5px;color:var(--rose);font-weight:500}
.field-hint{font-size:12.5px;color:var(--muted)}
.field-pw{position:relative;display:flex}
.field-pw input{padding-right:60px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:var(--paper-2);border:1px solid var(--line);border-radius:6px;
  font:600 11px 'IBM Plex Mono',monospace;color:var(--ink-soft);
  padding:5px 8px;cursor:pointer;letter-spacing:.04em;
}
.pw-toggle:hover{background:var(--line-2)}

/* switch */
.switch{display:flex;align-items:center;gap:11px;cursor:pointer;padding-top:4px}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch-track{width:42px;height:24px;border-radius:20px;background:#CFCabb;position:relative;transition:.18s;flex-shrink:0}
.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked + .switch-track{background:var(--teal)}
.switch input:checked + .switch-track::after{transform:translateX(18px)}
.switch-text{font-size:14px;color:var(--ink-soft)}

/* =========================================================
   AUTH — split screen
   ========================================================= */
body.auth{background:var(--ink)}
.auth-split{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
.auth-brand{
  position:relative;color:#EEF1F5;padding:48px 56px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(176,134,60,.24), transparent 60%),
    radial-gradient(760px 460px at -5% 108%, rgba(31,110,99,.22), transparent 55%),
    linear-gradient(160deg,#0B1626,#0D1B2E 60%,#0A1A2E);
  overflow:hidden;
}
.auth-brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 75%);
}
.auth-brand-inner{position:relative;z-index:2}
.auth-eyebrow{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:28px}
.auth-wordmark{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-.015em}
.auth-wordmark span{color:var(--brass-soft)}
.auth-lede{font-family:'Fraunces',serif;font-style:italic;font-size:19px;color:#C4CEDA;max-width:440px;margin-top:22px;line-height:1.45}
.auth-pipe{display:flex;align-items:center;gap:12px;margin-top:44px;flex-wrap:wrap}
.apn{border:1px solid rgba(216,184,118,.34);background:rgba(255,255,255,.03);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.apn.core{border-color:rgba(62,156,142,.5);background:linear-gradient(180deg,rgba(31,110,99,.28),rgba(31,110,99,.08))}
.apk{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-soft)}
.apn.core .apk{color:var(--teal-soft)}
.apv{font-size:13px;color:#E7ECF1;font-weight:500}
.aparrow{color:var(--brass-soft);font-family:'IBM Plex Mono',monospace}
.auth-brand-foot{position:relative;z-index:2;font:400 12px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#7E90A2}

.auth-form{display:flex;align-items:center;justify-content:center;background:var(--paper);padding:40px}
.auth-form-inner{width:100%;max-width:380px}
.auth-h1{font-family:'Fraunces',serif;font-size:32px;font-weight:600;letter-spacing:-.01em}
.auth-sub{color:var(--muted);margin:6px 0 26px;font-size:15px}
.auth-note{font-size:12.5px;color:var(--muted);margin-top:22px;text-align:center;line-height:1.5}

/* =========================================================
   APP SHELL
   ========================================================= */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sb-w);flex-shrink:0;background:var(--ink);color:#C6D0DB;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.sb-head{padding:24px 22px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-mark{font-family:'Fraunces',serif;font-weight:600;font-size:26px;color:#fff;letter-spacing:.02em}
.sb-mark::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brass);margin-left:6px;vertical-align:middle}
.sb-name{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#7E90A2;margin-top:3px}
.sb-nav{flex:1;overflow-y:auto;padding:14px 12px}
.sb-group{font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#61748A;padding:16px 10px 8px}
.sb-link{
  display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:var(--r-sm);
  color:#B7C3D0;font-size:14px;font-weight:500;transition:.14s;position:relative;
}
.sb-link:hover{background:rgba(255,255,255,.05);color:#fff}
.sb-link.is-active{background:linear-gradient(90deg,rgba(176,134,60,.20),rgba(176,134,60,.05));color:#fff}
.sb-link.is-active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--brass-soft)}
.sb-icon{width:18px;height:18px;flex-shrink:0;opacity:.9}
.sb-label{flex:1}
.sb-link.is-soon{color:#7E8C9C}
.sb-soon{font:600 9px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-soft);background:rgba(216,184,118,.12);border:1px solid rgba(216,184,118,.25);padding:2px 6px;border-radius:5px}
.sb-foot{padding:16px 22px;border-top:1px solid rgba(255,255,255,.07)}
.sb-foot-phase{font:600 12px 'Inter';color:#C6D0DB}
.sb-foot-by{font:400 11px 'IBM Plex Mono',monospace;color:#61748A;margin-top:2px;letter-spacing:.05em}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:66px;background:rgba(251,250,247,.86);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;
  padding:0 28px;position:sticky;top:0;z-index:30;
}
.tb-burger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:6px}
.tb-burger svg{width:22px;height:22px}
.tb-title{font-family:'Fraunces',serif;font-size:20px;font-weight:600;letter-spacing:-.01em}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.tb-user{position:relative}
.tb-user-btn{display:flex;align-items:center;gap:10px;background:none;border:1px solid transparent;border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;transition:.14s}
.tb-user-btn:hover{background:var(--paper-2);border-color:var(--line)}
.tb-avatar{width:34px;height:34px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font:600 12px 'IBM Plex Mono',monospace;flex-shrink:0}
.tb-user-meta{display:flex;flex-direction:column;text-align:left;line-height:1.2}
.tb-user-name{font-size:13.5px;font-weight:600;color:var(--ink)}
.tb-user-role{font-size:11.5px;color:var(--muted)}
.tb-caret{width:15px;height:15px;color:var(--muted)}
.tb-menu{position:absolute;right:0;top:52px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);min-width:170px;padding:6px;z-index:40}
.tb-menu a{display:block;padding:9px 12px;border-radius:var(--r-xs);font-size:14px;color:var(--ink-soft)}
.tb-menu a:hover{background:var(--paper-2)}
.tb-menu a.danger{color:var(--rose)}

.content{padding:30px 36px 60px;max-width:1180px;width:100%;margin:0 auto}

/* ---------- Page head ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.page-eyebrow{font:600 12px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:8px}
.page-h1{font-family:'Fraunces',serif;font-size:30px;font-weight:600;letter-spacing:-.015em;line-height:1.1}
.page-sub{color:var(--muted);font-size:15px;margin-top:6px}
.page-actions{display:flex;gap:10px}
.crumb{color:var(--brass)}
.crumb:hover{text-decoration:underline}

/* ---------- KPI ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.kpi-label{font-size:12.5px;color:var(--muted);font-weight:500}
.kpi-value{font-family:'Fraunces',serif;font-size:38px;font-weight:600;line-height:1;margin:10px 0 8px;color:var(--ink)}
.kpi-foot{font-size:12px;color:var(--muted-2)}
.kpi-alert{background:linear-gradient(180deg,#fff,var(--rose-tint))}
.kpi-alert .kpi-value{color:var(--rose)}

/* ---------- Panels / dashboard ---------- */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.panel-title{font-family:'Fraunces',serif;font-size:19px;font-weight:600}
.panel-tag{font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);background:var(--brass-tint);border:1px solid #EAD9B6;padding:4px 9px;border-radius:6px}

.checklist{list-style:none;display:flex;flex-direction:column;gap:4px}
.checklist li{display:flex;gap:13px;padding:12px 0;border-top:1px solid var(--line-2)}
.checklist li:first-child{border-top:none}
.checklist .ck{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;margin-top:2px;position:relative}
.checklist li.done .ck{background:var(--teal);border-color:var(--teal)}
.checklist li.done .ck::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.checklist li.todo .ck{border-color:var(--brass-soft)}
.ck-t{font-weight:600;font-size:14.5px}
.ck-d{font-size:13px;color:var(--muted);margin-top:2px}
.ck-link{font-size:13px;color:var(--brass);font-weight:600;display:inline-block;margin-top:5px}
.ck-link:hover{text-decoration:underline}
.ck-soon{display:inline-block;margin-top:5px;font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);background:var(--paper-2);padding:2px 7px;border-radius:5px}

.roadmap{display:flex;flex-direction:column}
.rm{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line-2);position:relative}
.rm:first-child{border-top:none}
.rm-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);flex-shrink:0}
.rm-done .rm-dot{background:var(--teal);border-color:var(--teal)}
.rm-t{font-weight:600;font-size:14.5px}
.rm-d{font-size:12.5px;color:var(--muted);margin-top:1px}
.rm > div:nth-child(2){flex:1}
.rm-badge{font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);background:var(--teal-tint);border:1px solid #BFE0D8;padding:3px 8px;border-radius:6px}
.rm-badge.next{color:var(--brass);background:var(--brass-tint);border-color:#EAD9B6}

.signed-as{margin-top:24px;font-size:13px;color:var(--muted);text-align:center;font-family:'IBM Plex Mono',monospace;letter-spacing:.02em}
.signed-as strong{color:var(--ink-soft)}

/* ---------- Tables ---------- */
.table-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table thead th{
  text-align:left;padding:13px 18px;background:var(--paper-2);
  font:600 11.5px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.table tbody td{padding:14px 18px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--paper)}
.cell-user{display:flex;align-items:center;gap:11px}
.cell-avatar{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--ink-soft),var(--ink));color:#fff;display:grid;place-items:center;font:600 12px 'IBM Plex Mono',monospace;flex-shrink:0}
.cell-name{font-weight:600;display:block}
.cell-mini{font-size:11.5px;color:var(--rose);font-weight:500}
.you{font:600 9px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);background:var(--brass-tint);padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:middle}

.badge{display:inline-block;font:600 11.5px 'Inter';padding:4px 10px;border-radius:20px;border:1px solid}
.badge-president{color:#5b3a86;background:#f1ebf8;border-color:#ddcdf0}
.badge-dean{color:#8f3529;background:var(--rose-tint);border-color:#e9c9c1}
.badge-admin{color:#7c5a1e;background:var(--brass-tint);border-color:#ead9b6}
.badge-advisor{color:#155e54;background:var(--teal-tint);border-color:#bfe0d8}

.status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500}
.status .dot{width:8px;height:8px;border-radius:50%}
.status-on{color:var(--teal)} .status-on .dot{background:var(--teal)}
.status-off{color:var(--muted-2)} .status-off .dot{background:var(--muted-2)}

.rowactions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.inline{display:inline}
.mini-btn{
  font:600 12.5px 'Inter';padding:7px 11px;border-radius:var(--r-xs);
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;transition:.14s;
}
.mini-btn:hover{background:var(--paper-2);border-color:#D8D0C0}
.mini-btn.danger{color:var(--rose)}
.mini-btn.danger:hover{background:var(--rose-tint);border-color:#e9c9c1}

.legend{margin-top:16px;font-size:12.5px;color:var(--muted);text-align:center}

/* ---------- Forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);max-width:720px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.form-divider{display:flex;align-items:center;gap:14px;margin:12px 0 20px;color:var(--muted)}
.form-divider::before,.form-divider::after{content:"";height:1px;background:var(--line-2);flex:1}
.form-divider span{font:600 11.5px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.form-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;padding-top:20px;border-top:1px solid var(--line-2)}

/* ---------- Empty / error ---------- */
.empty{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:60px 30px;text-align:center;box-shadow:var(--shadow)}
.empty-icon{color:var(--brass-soft);margin-bottom:16px}
.empty-title{font-family:'Fraunces',serif;font-size:22px;font-weight:600}
.empty-text{color:var(--muted);max-width:420px;margin:8px auto 20px;font-size:14.5px}

body.error-page{display:grid;place-items:center;min-height:100vh;background:var(--ink);padding:24px}
.error-box{background:var(--paper);border-radius:18px;padding:48px 44px;text-align:center;max-width:440px;box-shadow:var(--shadow-lg)}
.error-code{font-family:'Fraunces',serif;font-size:64px;font-weight:600;color:var(--brass);line-height:1}
.error-box h1{font-family:'Fraunces',serif;font-size:26px;font-weight:600;margin:6px 0 10px}
.error-box p{color:var(--muted);margin-bottom:22px;font-size:14.5px}

/* ---------- Scrim (mobile) ---------- */
.scrim{position:fixed;inset:0;background:rgba(13,27,46,.5);z-index:35;border:none}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .dash-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .auth-split{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-form{min-height:100vh}
}
@media(max-width:820px){
  .sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg)}
  .sidebar.is-open{transform:translateX(0)}
  .tb-burger{display:inline-flex}
  .content{padding:22px 18px 50px}
  .form-grid{grid-template-columns:1fr}
  .tb-user-meta{display:none}
}
@media(max-width:520px){
  .kpi-row{grid-template-columns:1fr}
  .rowactions{justify-content:flex-start}
  .table thead{display:none}
  .table tbody td{display:block;border:none;padding:6px 16px}
  .table tbody tr{display:block;border-bottom:1px solid var(--line);padding:12px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}