/* ==========================================================================
   School ERP — interface

   Designed for the people who actually use it: a clerk marking a register or
   entering marks for forty students, for hours. The reference is the school
   register itself — ruled columns, a roll-number spine, ink on paper — not a
   dashboard. Red appears only where a teacher's pen would use it.

   Type is set in Georgia for headings and the system UI face for everything
   else. No webfonts: the school server may be on a local network with no
   internet, and a heading that silently falls back is worse than one that
   was designed for the fallback.
   ========================================================================== */

:root{
  /* Ink — the primary structural colour, from fountain-pen blue-black */
  --ink-900:#151d28;
  --ink-800:#1e2937;
  --ink-700:#2c3a4b;
  --ink-500:#556474;
  --ink-400:#78848f;
  --ink-300:#9aa4ae;

  /* Paper — warm, but light enough not to read as "vintage" */
  --paper:#faf9f6;
  --paper-raised:#ffffff;
  --paper-sunk:#f2f1ec;

  /* Rules — the ruled lines of a register */
  --rule:#e4e1d9;
  --rule-strong:#cfcbc0;

  /* Verdigris — actions. Calm enough to look at all day. */
  --accent-700:#14544a;
  --accent-600:#1a6b5e;
  --accent-500:#238173;
  --accent-100:#e2efec;

  /* Marking red — only for genuine attention: fails, overdue, absent */
  --mark-700:#8f2f24;
  --mark-600:#a93a2c;
  --mark-100:#fbeae7;

  --ok-700:#2b6b3f;
  --ok-100:#e6f1e9;
  --warn-700:#8a6118;
  --warn-100:#fbf1de;

  --shadow-sm:0 1px 2px rgba(21,29,40,.06);
  --shadow-md:0 2px 10px rgba(21,29,40,.07);

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",ui-serif,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --rail:230px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-800);
  font:15px/1.5 var(--sans);
  font-feature-settings:"kern" 1;
}

/* All numbers line up in columns, always. In a register this is not a
   nicety: a misaligned mark column is a misread mark. */
table,.num,.stat b,input[type=text]{font-variant-numeric:tabular-nums}

a{color:var(--accent-600)}
a:hover{color:var(--accent-700)}

:focus-visible{
  outline:2px solid var(--accent-500);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- Shell ---------- */
.shell{display:flex;min-height:100vh}

.rail{
  width:var(--rail);
  flex:none;
  background:var(--ink-900);
  color:#c3ccd6;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.rail-head{
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rail-head .mark{
  font:600 11px/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-500);
  display:block;
  margin-bottom:6px;
}
.rail-head .name{
  font:400 17px/1.25 var(--serif);
  color:#fff;
  display:block;
}
.rail-head .year{
  font-size:11px;
  color:var(--ink-400);
  margin-top:5px;
  display:block;
}

.rail nav{padding:10px 0 20px;flex:1}
.rail .group{
  font:600 10px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#5d6b7a;
  padding:16px 18px 7px;
}
.rail a{
  display:block;
  padding:7px 18px;
  color:#c3ccd6;
  text-decoration:none;
  font-size:13.5px;
  border-left:3px solid transparent;
}
.rail a:hover{background:rgba(255,255,255,.05);color:#fff}
.rail a.on{
  background:rgba(35,129,115,.16);
  border-left-color:var(--accent-500);
  color:#fff;
  font-weight:600;
}
.rail-foot{
  padding:12px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12px;
}
.rail-foot .who{color:#fff;display:block;margin-bottom:3px}
.rail-foot a{padding:0;border:0;font-size:12px;color:var(--ink-300)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  background:var(--paper-raised);
  border-bottom:1px solid var(--rule);
  padding:14px 26px;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.topbar h1{
  margin:0;
  font:400 22px/1.2 var(--serif);
  color:var(--ink-900);
  letter-spacing:-.01em;
}
.topbar .lede{color:var(--ink-500);font-size:13.5px}
.topbar .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.content{padding:22px 26px 60px;max-width:1280px;width:100%}

/* ---------- Panels ---------- */
.panel{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:5px;
  margin-bottom:18px;
  box-shadow:var(--shadow-sm);
}
.panel-head{
  padding:13px 18px;
  border-bottom:1px solid var(--rule);
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.panel-head h2{
  margin:0;
  font:600 14px/1.3 var(--sans);
  letter-spacing:.01em;
  color:var(--ink-900);
}
.panel-head .note{font-size:12.5px;color:var(--ink-500)}
.panel-head .right{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.panel-body{padding:16px 18px}
.panel-body.flush{padding:0}

/* ---------- Controls ---------- */
.bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
label{
  display:block;
  font:600 10.5px/1 var(--sans);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-400);
  margin-bottom:5px;
}
input[type=text],input[type=password],input[type=number],select,textarea{
  padding:7px 10px;
  border:1px solid var(--rule-strong);
  border-radius:4px;
  font:14px/1.4 var(--sans);
  background:#fff;
  color:var(--ink-800);
}
input:hover,select:hover{border-color:var(--ink-300)}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent-500);
  outline:2px solid var(--accent-100);
  outline-offset:0;
}
textarea{resize:vertical}

button,.btn{
  display:inline-block;
  padding:8px 15px;
  border:1px solid var(--accent-600);
  border-radius:4px;
  background:var(--accent-600);
  color:#fff;
  font:600 13.5px/1.3 var(--sans);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
button:hover,.btn:hover{background:var(--accent-700);border-color:var(--accent-700);color:#fff}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost,button.ghost{
  background:#fff;
  color:var(--ink-700);
  border-color:var(--rule-strong);
}
.btn.ghost:hover,button.ghost:hover{background:var(--paper-sunk);color:var(--ink-900);border-color:var(--ink-300)}
.btn.danger,button.danger{background:#fff;color:var(--mark-700);border-color:#e0bcb6}
.btn.danger:hover,button.danger:hover{background:var(--mark-100);color:var(--mark-700);border-color:var(--mark-600)}
.btn.sm,button.sm{padding:5px 10px;font-size:12px}

/* ---------- The register ----------
   Data tables are the heart of this application. The left column is treated
   as a spine, the way a roll-number column is ruled off in a paper register,
   so the eye can track along a row without losing it. */
.reg{width:100%;border-collapse:collapse;font-size:13.5px}
.reg thead th{
  background:var(--paper-sunk);
  border-bottom:1.5px solid var(--rule-strong);
  padding:9px 12px;
  text-align:left;
  font:600 10.5px/1.3 var(--sans);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-500);
  white-space:nowrap;
}
.reg tbody td{
  padding:9px 12px;
  border-bottom:1px solid var(--rule);
  vertical-align:middle;
}
.reg tbody tr:hover{background:#fcfcfa}
.reg tbody tr:last-child td{border-bottom:0}
.reg .spine{
  border-right:1.5px solid var(--rule-strong);
  background:var(--paper-sunk);
  font-weight:600;
  color:var(--ink-700);
  text-align:center;
  width:56px;
}
.reg thead .spine{border-right-color:var(--rule-strong)}
.reg .num{text-align:right}
.reg .who .nm{font-weight:600;color:var(--ink-900)}
.reg .who .id{font-size:11.5px;color:var(--ink-400);margin-top:1px}
.reg tfoot td,.reg tfoot th{
  background:var(--paper-sunk);
  border-top:1.5px solid var(--rule-strong);
  padding:9px 12px;
  font-weight:700;
}
.scroll-x{overflow-x:auto}

/* ---------- Status ---------- */
.tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:3px;
  font:600 11px/1.5 var(--sans);
  letter-spacing:.02em;
  white-space:nowrap;
}
.tag.ok,.tag.P,.tag.PAID,.tag.SENT,.tag.DELIVERED,.tag.ACTIVE{background:var(--ok-100);color:var(--ok-700)}
.tag.bad,.tag.A,.tag.UNPAID,.tag.FAILED{background:var(--mark-100);color:var(--mark-700)}
.tag.warn,.tag.L,.tag.PARTIAL,.tag.QUEUED,.tag.SENDING{background:var(--warn-100);color:var(--warn-700)}
.tag.info,.tag.V{background:#e5eef5;color:#1d4f70}
.tag.H{background:#ece7f3;color:#4d3a72}
.tag.quiet,.tag.CANCELLED{background:var(--paper-sunk);color:var(--ink-500)}

.fail{color:var(--mark-700);font-weight:600}

/* ---------- Figures ---------- */
.figs{display:flex;gap:28px;flex-wrap:wrap}
.fig{min-width:72px}
.fig b{
  display:block;
  font:400 25px/1.1 var(--serif);
  color:var(--ink-900);
  letter-spacing:-.01em;
}
.fig span{
  display:block;
  font:600 10px/1.3 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-400);
  margin-top:4px;
}
.fig.bad b{color:var(--mark-700)}
.fig.ok b{color:var(--ok-700)}
.fig.warn b{color:var(--warn-700)}

/* ---------- Messages ---------- */
.note{
  padding:11px 15px;
  border-radius:4px;
  margin-bottom:14px;
  font-size:13.5px;
  border-left:3px solid;
}
.note.success{background:var(--ok-100);color:var(--ok-700);border-color:var(--ok-700)}
.note.error{background:var(--mark-100);color:var(--mark-700);border-color:var(--mark-600)}
.note.warning{background:var(--warn-100);color:var(--warn-700);border-color:var(--warn-700)}
.note.info{background:var(--accent-100);color:var(--accent-700);border-color:var(--accent-500)}
.note a{color:inherit;font-weight:600}

/* ---------- Empty states: an invitation, not a shrug ---------- */
.blank{
  padding:44px 24px;
  text-align:center;
  color:var(--ink-500);
}
.blank .h{
  font:400 17px/1.3 var(--serif);
  color:var(--ink-700);
  margin-bottom:6px;
}
.blank p{margin:0 0 14px;font-size:13.5px}

.muted{color:var(--ink-400);font-size:12.5px}
.hint{font-size:12.5px;color:var(--ink-500);margin-top:7px}

/* ---------- Dashboard ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;margin-bottom:18px}
.card-link{
  display:block;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:5px;
  padding:15px 17px;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow-sm);
}
.card-link:hover{border-color:var(--accent-500);box-shadow:var(--shadow-md);color:inherit}
.card-link .k{
  font:600 10px/1 var(--sans);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-400);
}
.card-link .v{
  font:400 30px/1.15 var(--serif);
  color:var(--ink-900);
  margin:9px 0 3px;
  letter-spacing:-.015em;
}
.card-link .d{font-size:12.5px;color:var(--ink-500)}
.card-link.alert{border-left:3px solid var(--mark-600)}
.card-link.alert .v{color:var(--mark-700)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- Responsive ---------- */
.rail-toggle{display:none}
@media(max-width:840px){
  .shell{flex-direction:column}
  .rail{
    width:100%;
    height:auto;
    position:static;
    max-height:none;
  }
  .rail nav{display:none;padding:4px 0 14px}
  .rail.open nav{display:block}
  .rail-foot{display:none}
  .rail.open .rail-foot{display:block}
  .rail-toggle{
    display:block;
    position:absolute;
    top:14px;
    right:16px;
    background:transparent;
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    padding:6px 11px;
    font-size:12px;
  }
  .rail-head{position:relative}
  .content{padding:16px 14px 50px}
  .topbar{padding:12px 14px}
  .topbar h1{font-size:19px}
  .reg{font-size:13px}
  .reg thead th,.reg tbody td{padding:8px 8px}
}

@media(prefers-reduced-motion:no-preference){
  .card-link{transition:border-color .12s ease,box-shadow .12s ease}
  button,.btn{transition:background .12s ease,border-color .12s ease}
  .rail a{transition:background .1s ease}
}

/* ---------- Print ---------- */
@media print{
  .rail,.topbar,.no-print,.panel-head .right{display:none !important}
  .shell{display:block}
  .content{padding:0;max-width:none}
  .panel{border:0;box-shadow:none;margin:0}
  body{background:#fff}
}