/* ═══════════════════════════════════════════════════════════════════
   Vidyalaya — office system.  2026 refresh.

   What changed and why:
   · Colour moved to OKLCH with tints derived by color-mix(), so every
     wash of green is perceptually even instead of eyeballed.
   · Dark mode, because the office works past sunset in winter.
   · Borders mostly removed. Whitespace and a hairline of elevation
     separate things now; a rule survives only where it carries meaning,
     like the ruling in a register.
   · Cross-document view transitions: the app is server-rendered, and
     two lines of CSS now make navigation feel continuous.
   · Sticky table headers, because a fee register runs 200 rows.
   · Fluid type with clamp(), tighter optical tracking on headings.
   · Flash messages became toasts, so they stop shoving the page down.

   Everything new is progressive enhancement. On an older browser the
   layout is identical, just without transitions and blur.
   ═══════════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .16s; }
::view-transition-new(root) { animation-duration: .16s; }
.sidebar { view-transition-name: app-sidebar; }
.topbar  { view-transition-name: app-topbar; }

:root {
  color-scheme: light;

  --h-board: 168;
  --h-brass:  75;
  --h-alert:  25;
  --h-ok:    155;

  --board:    oklch(33% 0.055 var(--h-board));
  --board-hi: oklch(27% 0.052 var(--h-board));
  --brass:    oklch(56% 0.115 var(--h-brass));
  --alert:    oklch(52% 0.170 var(--h-alert));
  --ok:       oklch(52% 0.105 var(--h-ok));

  --bg:      oklch(97.2% 0.004 250);
  --surface: oklch(100% 0 0);
  --raised:  oklch(100% 0 0);
  --sunken:  oklch(98.4% 0.004 250);

  --ink:   oklch(24% 0.018 255);
  --ink-2: oklch(48% 0.016 255);
  --ink-3: oklch(64% 0.014 255);

  --board-wash:  color-mix(in oklab, var(--board) 8%,  var(--surface));
  --board-wash2: color-mix(in oklab, var(--board) 14%, var(--surface));
  --brass-wash:  color-mix(in oklab, var(--brass) 12%, var(--surface));
  --alert-wash:  color-mix(in oklab, var(--alert) 10%, var(--surface));
  --ok-wash:     color-mix(in oklab, var(--ok)    12%, var(--surface));

  --line:   color-mix(in oklab, var(--ink) 12%, var(--bg));
  --line-2: color-mix(in oklab, var(--ink) 7%,  var(--bg));

  --ring:  0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent);
  --lift:  var(--ring), 0 1px 2px -1px oklch(24% 0.02 255 / .10),
                        0 4px 12px -4px oklch(24% 0.02 255 / .10);
  --lift-2:var(--ring), 0 2px 4px -2px oklch(24% 0.02 255 / .12),
                        0 12px 28px -8px oklch(24% 0.02 255 / .14);

  --sans: 'IBM Plex Sans', 'IBM Plex Sans Devanagari', ui-sans-serif,
          -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --serif:'IBM Plex Serif', Georgia, serif;

  --t-xs: .72rem;
  --t-sm: .82rem;
  --t-md: .905rem;
  --t-lg: 1.02rem;
  --t-2xl:clamp(1.45rem, 1.25rem + .8vw, 1.85rem);

  --r-sm: 6px;
  --r:    9px;
  --r-lg: 13px;
  --sidebar-w: 244px;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --fast: .15s var(--ease);
}

[data-theme="dark"] {
  color-scheme: dark;

  --board:    oklch(72% 0.085 var(--h-board));
  --board-hi: oklch(78% 0.090 var(--h-board));
  --brass:    oklch(76% 0.115 var(--h-brass));
  --alert:    oklch(70% 0.150 var(--h-alert));
  --ok:       oklch(74% 0.115 var(--h-ok));

  --bg:      oklch(17.5% 0.014 var(--h-board));
  --surface: oklch(21.5% 0.016 var(--h-board));
  --raised:  oklch(24.5% 0.018 var(--h-board));
  --sunken:  oklch(19.5% 0.015 var(--h-board));

  --ink:   oklch(94% 0.008 var(--h-board));
  --ink-2: oklch(74% 0.012 var(--h-board));
  --ink-3: oklch(58% 0.012 var(--h-board));

  --board-wash:  color-mix(in oklab, var(--board) 14%, var(--surface));
  --board-wash2: color-mix(in oklab, var(--board) 22%, var(--surface));
  --brass-wash:  color-mix(in oklab, var(--brass) 16%, var(--surface));
  --alert-wash:  color-mix(in oklab, var(--alert) 16%, var(--surface));
  --ok-wash:     color-mix(in oklab, var(--ok)    16%, var(--surface));

  --line:   color-mix(in oklab, var(--ink) 18%, var(--bg));
  --line-2: color-mix(in oklab, var(--ink) 11%, var(--bg));

  --ring:  0 0 0 1px color-mix(in oklab, var(--ink) 13%, transparent);
  --lift:  var(--ring), 0 2px 6px -2px oklch(0% 0 0 / .40);
  --lift-2:var(--ring), 0 8px 26px -6px oklch(0% 0 0 / .50);
}

/* Same design in hex, for browsers without oklch() */
@supports not (color: oklch(50% 0.1 200)) {
  :root {
    --board: #0E4F3F; --board-hi: #08322A; --brass: #B87514;
    --alert: #B3261E; --ok: #1B7A4B;
    --bg: #F1F4F5; --surface: #FFFFFF; --raised: #FFFFFF; --sunken: #F8FAFA;
    --ink: #16202E; --ink-2: #55677A; --ink-3: #8FA0AE;
    --board-wash: #E9F1EE; --board-wash2: #DCE9E4; --brass-wash: #FAF2E2;
    --alert-wash: #FBEAE8; --ok-wash: #E7F4EC;
    --line: #DCE3E6; --line-2: #EDF1F3;
    --ring: 0 0 0 1px rgba(22,32,46,.09);
    --lift: 0 0 0 1px rgba(22,32,46,.09), 0 1px 2px rgba(22,32,46,.06), 0 4px 12px rgba(22,32,46,.05);
    --lift-2: 0 0 0 1px rgba(22,32,46,.09), 0 2px 4px rgba(22,32,46,.08), 0 12px 28px rgba(22,32,46,.10);
  }
}

* { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  accent-color: var(--board);
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--board); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Every figure in this app is tabular. That is the point of a register. */
.num, td.num, .amount, .mono, .stat-value,
input[type=number], input.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -.012em;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--board-hi);
  color: color-mix(in oklab, var(--surface) 82%, var(--board));
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain;
}
[data-theme="dark"] .sidebar {
  background: var(--sunken); color: var(--ink-2);
  box-shadow: inset -1px 0 0 var(--line);
}

.brand { padding: 18px 16px 14px; }
.brand-mark { display: flex; align-items: center; gap: 11px; }
.brand-seal img, .doc-seal img, .profile-photo img { width: 100%; height: 100%; object-fit: contain; }
.brand-seal {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px;
  background: color-mix(in oklab, var(--brass) 22%, transparent);
  color: var(--brass); display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 16px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 34%, transparent);
}
.brand-name {
  font-weight: 600; font-size: var(--t-sm); line-height: 1.25;
  color: color-mix(in oklab, var(--surface) 96%, var(--board));
  letter-spacing: -.008em;
}
[data-theme="dark"] .brand-name { color: var(--ink); }
.brand-sub {
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in oklab, var(--surface) 52%, var(--board)); margin-top: 2px;
}
[data-theme="dark"] .brand-sub { color: var(--ink-3); }

.nav { padding: 6px 8px 24px; flex: 1; }
.nav-group { margin-bottom: 14px; }
.nav-label {
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in oklab, var(--surface) 46%, var(--board));
  padding: 0 10px 5px; font-weight: 500;
}
[data-theme="dark"] .nav-label { color: var(--ink-3); }

.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-sm);
  color: color-mix(in oklab, var(--surface) 78%, var(--board));
  font-size: var(--t-md); text-decoration: none; margin-bottom: 1px;
  transition: background var(--fast), color var(--fast);
}
[data-theme="dark"] .nav a { color: var(--ink-2); }
.nav a:hover {
  background: color-mix(in oklab, var(--surface) 10%, transparent);
  color: color-mix(in oklab, var(--surface) 98%, var(--board)); text-decoration: none;
}
[data-theme="dark"] .nav a:hover { background: var(--raised); color: var(--ink); }
.nav a.active {
  background: color-mix(in oklab, var(--surface) 15%, transparent);
  color: var(--surface); font-weight: 500; box-shadow: inset 2px 0 0 var(--brass);
}
[data-theme="dark"] .nav a.active { background: var(--board-wash); color: var(--ink); }
.nav .ico { width: 17px; text-align: center; opacity: .78; font-size: 14px; }
.nav-count {
  margin-left: auto; background: var(--brass);
  color: oklch(20% 0.03 var(--h-brass));
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 99px;
}

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

.topbar {
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-2);
  padding: 0 22px; height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  position: sticky; top: 0; z-index: 20;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .topbar { background: var(--surface); }
}
.topbar-school { font-weight: 600; font-size: var(--t-md); letter-spacing: -.008em; }
.topbar-meta { font-size: var(--t-xs); color: var(--ink-2); }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.session-chip {
  font-family: var(--mono); font-size: var(--t-xs);
  background: var(--board-wash); color: var(--board);
  padding: 4px 9px; border-radius: 99px; font-weight: 500; white-space: nowrap;
}
.user-chip { display: flex; align-items: center; gap: 9px; font-size: var(--t-sm); }
.avatar {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--board); color: var(--surface);
  display: grid; place-items: center; font-size: var(--t-sm); font-weight: 600;
}
[data-theme="dark"] .avatar { color: oklch(20% 0.02 var(--h-board)); }

.content { padding: 22px 22px 56px; max-width: 1360px; width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  @starting-style { .content { opacity: 0; transform: translateY(6px); } }
  .content { transition: opacity .22s var(--ease), transform .22s var(--ease); }
}

/* ── Page header ────────────────────────────────────────────────── */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-title {
  font-size: var(--t-2xl); font-weight: 600; margin: 0;
  letter-spacing: -.024em; line-height: 1.15;
}
.page-sub { color: var(--ink-2); font-size: var(--t-sm); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--lift); margin-bottom: 16px;
  container-type: inline-size;
}
.card-head {
  padding: 14px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line-2);
}
.card-title { font-weight: 600; font-size: var(--t-md); margin: 0; letter-spacing: -.01em; }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }

/* ── Stat tiles ─────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.stat {
  background: var(--surface); border-radius: var(--r-lg);
  padding: 15px 17px; box-shadow: var(--lift);
  position: relative; overflow: hidden;
  transition: box-shadow var(--fast), transform var(--fast);
}
a.stat:hover { box-shadow: var(--lift-2); transform: translateY(-1px); }
.stat::before {
  content: ''; position: absolute; inset: 0 auto auto 17px;
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--board);
}
.stat.brass::before    { background: var(--brass); }
.stat.register::before { background: var(--alert); }
.stat-label {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); font-weight: 500;
}
.stat-value {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); font-weight: 600;
  margin-top: 7px; letter-spacing: -.035em; line-height: 1.1;
}
.stat.brass .stat-value    { color: var(--brass); }
.stat.register .stat-value { color: var(--alert); }
.stat-foot { font-size: var(--t-xs); color: var(--ink-3); margin-top: 4px; }

/* ── Tables: ruled like a register, sticky head, no vertical lines ─ */
.table-wrap { overflow-x: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); }
table.reg { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.reg thead th {
  text-align: left; padding: 10px 15px;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .075em;
  color: var(--ink-2); font-weight: 600;
  background: var(--sunken); border-bottom: 1px solid var(--line);
  white-space: nowrap; position: sticky; top: 58px; z-index: 5;
}
table.reg tbody td {
  padding: 10px 15px; border-bottom: 1px solid var(--line-2); vertical-align: middle;
}
table.reg tbody tr { transition: background var(--fast); }
table.reg tbody tr:hover { background: var(--sunken); }
table.reg tbody tr:last-child td { border-bottom: none; }
table.reg th.right, table.reg td.right { text-align: right; }
table.reg th.center, table.reg td.center { text-align: center; }
table.reg tfoot td {
  padding: 12px 15px; font-weight: 600;
  border-top: 2px solid color-mix(in oklab, var(--ink) 55%, var(--bg));
  background: var(--brass-wash);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.row-due { background: color-mix(in oklab, var(--alert) 4%, var(--surface)); }
.row-due:hover { background: color-mix(in oklab, var(--alert) 8%, var(--surface)) !important; }

.empty { padding: 52px 22px; text-align: center; color: var(--ink-2); }
.empty-title { font-weight: 600; color: var(--ink); margin-bottom: 5px; font-size: var(--t-lg); }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 22%, transparent);
}
.badge.paid    { background: var(--ok-wash);    color: color-mix(in oklab, var(--ok) 88%, var(--ink)); }
.badge.unpaid  { background: var(--alert-wash); color: color-mix(in oklab, var(--alert) 88%, var(--ink)); }
.badge.partial { background: var(--brass-wash); color: color-mix(in oklab, var(--brass) 88%, var(--ink)); }
.badge.neutral { background: var(--sunken);     color: var(--ink-2); }
.badge.board   { background: var(--board-wash); color: var(--board); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 0; box-shadow: var(--ring);
  background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  cursor: pointer; text-decoration: none; line-height: 1.4;
  transition: background var(--fast), box-shadow var(--fast), transform .08s var(--ease);
}
.btn:hover { background: var(--sunken); text-decoration: none; box-shadow: var(--lift); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--board); color: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--board) 70%, black);
}
[data-theme="dark"] .btn-primary { color: oklch(19% 0.02 var(--h-board)); }
.btn-primary:hover { background: color-mix(in oklab, var(--board) 88%, black); }
[data-theme="dark"] .btn-primary:hover { background: var(--board-hi); }
.btn-brass {
  background: var(--brass); color: oklch(99% 0 0);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 70%, black);
}
[data-theme="dark"] .btn-brass { color: oklch(20% 0.03 var(--h-brass)); }
.btn-brass:hover { background: color-mix(in oklab, var(--brass) 88%, black); }
.btn-danger {
  background: var(--surface); color: var(--alert);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--alert) 32%, transparent);
}
.btn-danger:hover { background: var(--alert-wash); }
.btn-sm { padding: 5px 10px; font-size: var(--t-xs); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Forms ──────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
  margin-bottom: 5px; letter-spacing: .012em;
}
.field .hint, .hint { font-size: var(--t-xs); color: var(--ink-3); margin-top: 4px; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=month], input[type=email], input[type=search], input[type=tel],
select, textarea, input[type=file] {
  width: 100%; padding: 8px 11px; border: 0; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-sm);
  transition: box-shadow var(--fast);
}
textarea { min-height: 78px; resize: vertical; field-sizing: content; }
input:hover, select:hover, textarea:hover {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 20%, var(--bg));
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--board),
              0 0 0 3px color-mix(in oklab, var(--board) 18%, transparent);
}
input:user-invalid, select:user-invalid, textarea:user-invalid {
  box-shadow: inset 0 0 0 1px var(--alert),
              0 0 0 3px color-mix(in oklab, var(--alert) 15%, transparent);
}
.field:has(:focus-visible) label { color: var(--board); }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.form-actions {
  display: flex; gap: 8px; margin-top: 8px;
  padding-top: 16px; border-top: 1px solid var(--line-2);
}
.filters {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px 16px; background: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--lift); margin-bottom: 14px;
}
.filters .field { margin-bottom: 0; }
.filters .field label { margin-bottom: 4px; }

/* ── Flash became a toast: it no longer pushes the page down ─────── */
.flash {
  position: fixed; top: 70px; right: 20px; z-index: 60; max-width: 380px;
  padding: 12px 15px; border-radius: var(--r);
  font-size: var(--t-sm); box-shadow: var(--lift-2);
  display: flex; gap: 10px; align-items: flex-start; background: var(--surface);
}
.flash::before { content: ''; width: 3px; align-self: stretch; border-radius: 3px; flex: 0 0 3px; }
.flash.ok::before   { background: var(--ok); }
.flash.err::before  { background: var(--alert); }
.flash.info::before { background: var(--board); }
.flash.ok   { color: color-mix(in oklab, var(--ok) 82%, var(--ink)); }
.flash.err  { color: color-mix(in oklab, var(--alert) 82%, var(--ink)); }
.flash.info { color: color-mix(in oklab, var(--board) 82%, var(--ink)); }
@media (prefers-reduced-motion: no-preference) {
  @starting-style { .flash { opacity: 0; transform: translateX(14px); } }
  .flash { transition: opacity .2s var(--ease), transform .2s var(--ease); }
}
.flash.dismissed { opacity: 0; transform: translateX(14px); pointer-events: none; }
.flash-x {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: inherit; opacity: .5; font-size: 16px; line-height: 1; padding: 0 2px;
}
.flash-x:hover { opacity: 1; }

/* ── Theme toggle ───────────────────────────────────────────────── */
.theme-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  border: 0; box-shadow: var(--ring); background: var(--surface);
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
  font-size: 14px; transition: background var(--fast), color var(--fast);
}
.theme-btn:hover { background: var(--sunken); color: var(--ink); }
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }

/* ── Command palette ────────────────────────────────────────────── */
.cmdk-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-sm);
  box-shadow: var(--ring); background: var(--surface);
  color: var(--ink-3); font-size: var(--t-sm); cursor: pointer; border: 0;
  min-width: 172px;
}
.cmdk-trigger:hover { background: var(--sunken); color: var(--ink-2); }
.cmdk-trigger kbd {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  background: var(--sunken); box-shadow: var(--ring);
  padding: 1px 5px; border-radius: 4px; color: var(--ink-3);
}
.cmdk {
  position: fixed; inset: 0; z-index: 80; display: none;
  justify-items: center; align-content: start; padding-top: 12vh;
  background: color-mix(in oklab, var(--ink) 42%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cmdk.open { display: grid; }
.cmdk-panel {
  width: min(560px, 92vw); background: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--lift-2); overflow: hidden;
}
.cmdk-panel input {
  border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--line-2); padding: 15px 18px; font-size: var(--t-lg);
}
.cmdk-panel input:focus { box-shadow: none; outline: none; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-size: var(--t-md);
}
.cmdk-item:hover, .cmdk-item.sel { background: var(--board-wash); text-decoration: none; }
.cmdk-item .ico { width: 18px; text-align: center; color: var(--ink-3); }
.cmdk-item .grp {
  margin-left: auto; font-size: var(--t-xs); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .07em;
}
.cmdk-none { padding: 26px; text-align: center; color: var(--ink-3); font-size: var(--t-sm); }

/* ── Login ──────────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1.05fr 1fr; background: var(--surface);
}
.login-aside {
  background: var(--board-hi);
  color: color-mix(in oklab, var(--surface) 80%, var(--board));
  padding: 52px 54px; display: flex; flex-direction: column;
  justify-content: space-between; position: relative; overflow: hidden;
}
.login-aside::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 31px, color-mix(in oklab, var(--surface) 6%, transparent) 31px 32px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
  pointer-events: none;
}
.login-aside > * { position: relative; z-index: 1; }
.login-kicker {
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass); font-weight: 600;
}
.login-h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 2.6rem); line-height: 1.12;
  color: var(--surface); font-weight: 500; margin: 16px 0 12px; letter-spacing: -.022em;
}
[data-theme="dark"] .login-h1 { color: var(--ink); }
.login-lede {
  font-size: var(--t-lg);
  color: color-mix(in oklab, var(--surface) 62%, var(--board)); max-width: 34ch;
}
.login-facts { display: flex; gap: 32px; margin-top: 34px; }
.login-fact-n {
  font-family: var(--mono); font-size: 1.35rem; color: var(--brass);
  font-weight: 600; letter-spacing: -.03em;
}
.login-fact-l {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em;
  color: color-mix(in oklab, var(--surface) 48%, var(--board)); margin-top: 2px;
}
.login-foot { font-size: var(--t-xs); color: color-mix(in oklab, var(--surface) 45%, var(--board)); }
.login-form-side { display: grid; place-items: center; padding: 40px; }
.login-box { width: 100%; max-width: 352px; }
.login-box h2 { font-size: var(--t-2xl); margin: 0 0 4px; font-weight: 600; letter-spacing: -.022em; }
.login-box p.sub { color: var(--ink-2); font-size: var(--t-sm); margin: 0 0 24px; }
.login-box .flash {
  position: static; max-width: none; margin-bottom: 16px; box-shadow: var(--ring);
}
.demo-creds {
  margin-top: 22px; padding: 13px 15px; background: var(--sunken);
  border-radius: var(--r); box-shadow: var(--ring); font-size: var(--t-sm); color: var(--ink-2);
}
.demo-creds b {
  display: block; margin-bottom: 7px; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
}
.demo-creds code {
  font-family: var(--mono); background: var(--surface); padding: 1px 5px;
  border-radius: 4px; box-shadow: var(--ring); font-size: var(--t-xs);
}

/* ── Student profile ────────────────────────────────────────────── */
.profile-head { display: flex; gap: 18px; align-items: flex-start; }
.profile-photo {
  width: 76px; height: 76px; border-radius: var(--r-lg);
  background: var(--board-wash2); color: var(--board);
  display: grid; place-items: center; font-size: 26px; font-weight: 600;
  flex: 0 0 76px; overflow: hidden;
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; font-size: var(--t-sm); }
.kv dt { color: var(--ink-2); font-size: var(--t-xs); padding-top: 1px; }
.kv dd { margin: 0; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs a {
  padding: 9px 14px; font-size: var(--t-sm); color: var(--ink-2);
  border-bottom: 2px solid transparent; text-decoration: none;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { color: var(--board); border-bottom-color: var(--board); font-weight: 600; }

/* ── Attendance ─────────────────────────────────────────────────── */
.att-toggle {
  display: inline-flex; border-radius: var(--r-sm); overflow: hidden;
  box-shadow: var(--ring); background: var(--surface);
}
.att-toggle label {
  padding: 6px 13px; font-size: var(--t-xs); cursor: pointer;
  font-weight: 600; color: var(--ink-2);
  box-shadow: inset -1px 0 0 var(--line-2);
  transition: background var(--fast), color var(--fast);
}
.att-toggle label:last-child { box-shadow: none; }
.att-toggle label:hover { background: var(--sunken); }
.att-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.att-toggle label:has(input[value=P]:checked) { background: var(--ok);    color: oklch(99% 0 0); }
.att-toggle label:has(input[value=A]:checked) { background: var(--alert); color: oklch(99% 0 0); }
.att-toggle label:has(input[value=L]:checked) { background: var(--brass); color: oklch(99% 0 0); }
.att-toggle label:has(input[value=H]:checked) { background: var(--ink-2); color: oklch(99% 0 0); }
[data-theme="dark"] .att-toggle label:has(input:checked) { color: oklch(18% 0.02 250); }
.att-cell {
  font-family: var(--mono); font-size: var(--t-xs); text-align: center; padding: 5px 2px !important;
}
.att-P { color: var(--ok); }
.att-A { color: var(--alert); font-weight: 700; }
.att-L { color: var(--brass); }
.att-H { color: var(--ink-2); }

/* ── Printed documents ──────────────────────────────────────────── */
.doc {
  background: var(--surface); max-width: 780px; margin: 0 auto 20px;
  border-radius: var(--r-lg); box-shadow: var(--lift);
  padding: 36px 40px; font-family: var(--serif);
}
.doc-head {
  display: flex; gap: 16px; align-items: flex-start;
  border-bottom: 2px solid var(--board); padding-bottom: 14px;
}
.doc-seal {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--board);
  display: grid; place-items: center; color: var(--board); font-size: 21px; font-weight: 600;
}
.doc-school { font-size: 1.4rem; font-weight: 600; color: var(--board); letter-spacing: -.018em; }
.doc-addr { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-2); margin-top: 2px; }
.doc-type {
  font-family: var(--sans); text-align: center; margin: 18px 0;
  font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: var(--board);
}
.doc-meta {
  display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--sans); font-size: var(--t-sm); margin-bottom: 14px; flex-wrap: wrap;
}
.doc table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--t-sm); }
.doc table th {
  text-align: left; padding: 8px 11px; background: var(--board-wash);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--board); border-bottom: 1px solid var(--line);
}
.doc table td { padding: 8px 11px; border-bottom: 1px solid var(--line-2); }
.doc table tfoot td {
  font-weight: 700; border-top: 2px solid color-mix(in oklab, var(--ink) 55%, var(--bg));
  background: var(--brass-wash);
}
.doc-words {
  font-family: var(--sans); font-size: var(--t-sm); margin-top: 12px;
  font-style: italic; color: var(--ink-2);
}
.doc-sign {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 48px; font-family: var(--sans); font-size: var(--t-xs); flex-wrap: wrap;
}
.doc-sign div { text-align: center; }
.doc-sign .line {
  border-top: 1px solid var(--ink); padding-top: 6px; min-width: 150px; color: var(--ink-2);
}
.doc-note {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-3);
  margin-top: 24px; border-top: 1px dashed var(--line); padding-top: 11px;
}
.cancelled-stamp {
  transform: rotate(-11deg);
  box-shadow: inset 0 0 0 3px var(--alert); color: var(--alert);
  font-family: var(--sans); font-weight: 700; letter-spacing: .18em; font-size: 1.2rem;
  padding: 6px 20px; display: inline-block; margin: 12px 0; border-radius: 4px; opacity: .82;
}

/* ── Utility ────────────────────────────────────────────────────── */
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: var(--t-sm); }
.strong { font-weight: 600; }
.red { color: var(--alert); }
.green { color: var(--ok); }
.gold { color: var(--brass); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt16 { margin-top: 16px; } .mb16 { margin-bottom: 16px; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex-between { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 70;
    translate: -100% 0; transition: translate .2s var(--ease); box-shadow: var(--lift-2);
  }
  .sidebar.open { translate: 0 0; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-aside { padding: 34px 26px; }
  .content { padding: 16px 14px 44px; }
  .menu-btn { display: inline-flex !important; }
  .cmdk-trigger, .topbar-meta, .session-chip { display: none; }
  table.reg thead th { position: static; }
  .flash { left: 14px; right: 14px; max-width: none; top: 66px; }
  .kv { grid-template-columns: 118px 1fr; }
}
.menu-btn { display: none; }
@container (max-width: 420px) { .card-head { flex-wrap: wrap; } }

/* ── Print ──────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .page-actions, .no-print, .filters, .flash,
  .cmdk, .cmdk-trigger, .theme-btn { display: none !important; }
  html, body { background: #fff; color: #000; }
  .content { padding: 0; max-width: none; }
  .doc, .card { box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
  .doc { max-width: none; }
  table.reg thead th {
    position: static; background: #f2f2f2 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  a { color: #000; text-decoration: none; }
  @page { margin: 14mm; }
}

/* ── Accessibility floor ────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
  @view-transition { navigation: none; }
}