:root {
  --ink: #1c2a24;
  --paper: #f6f5f1;
  --panel: #ffffff;
  --line: #dcd8ce;
  --moss: #2f5d4f;
  --moss-dark: #234438;
  --clay: #b5533c;
  --muted: #6b7268;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Iowan Old Style', 'Georgia', serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.topbar .brand {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.topbar .brand-mark {
  height: 22px;
  width: 22px;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 50%;
  position: relative;
  top: -1px;
}

.topbar .brand .code {
  color: var(--moss);
}

.topbar .who {
  font-family: 'Menlo', monospace;
  font-size: 0.8rem;
  color: var(--muted);
}

.topbar button {
  font-family: inherit;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  color: var(--ink);
}

.topbar button:hover { border-color: var(--moss); color: var(--moss); }

.sync-pill {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 20px;
  display: none;
}
.sync-pill:not(:empty) { display: inline-block; }
.sync-pill.offline { background: #f3dcd6; color: var(--clay); }
.sync-pill.syncing { background: #f3e6d8; color: #8a5a2a; }

.stale-note {
  font-size: 0.8rem;
  color: #8a5a2a;
  background: #f3e6d8;
  border-radius: var(--radius);
  padding: 6px 12px;
  margin: -8px 0 16px;
  display: none;
}
.stale-note.visible { display: block; }

.tabbar {
  display: flex;
  gap: 4px;
  padding: 0 32px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.tabbar a {
  display: inline-block;
  padding: 12px 16px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  border-bottom: 2px solid transparent;
}

.tabbar a:hover { color: var(--ink); }
.tabbar a.active { color: var(--moss-dark); border-bottom-color: var(--moss); font-weight: 600; }

main {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* --- Login screen --- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 36px;
}

.login-card h1 {
  font-size: 1.4rem;
  margin: 0 0 4px;
}

.login-card .sub {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 28px;
}

label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 6px;
}

input, select {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 18px;
}

input:focus, select:focus {
  outline: 2px solid var(--moss);
  outline-offset: 1px;
}

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--moss);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 11px 20px;
  cursor: pointer;
}

.btn:hover { background: var(--moss-dark); }
.btn.secondary { background: none; color: var(--moss); border: 1px solid var(--moss); }

.error-msg {
  color: var(--clay);
  font-size: 0.85rem;
  margin: -8px 0 16px;
  min-height: 1em;
}

/* --- Dashboard --- */
h2 { font-size: 1.2rem; margin: 0 0 4px; }
.section-note { color: var(--muted); font-size: 0.88rem; margin: 0 0 20px; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

th {
  background: #eef0e8;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted);
}

tr:last-child td { border-bottom: none; }

.empty-row td {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 24px;
}

.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: #eef0e8; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
  background: #e3ece7;
  color: var(--moss-dark);
}

.badge.warn { background: #f3e6d8; color: #8a5a2a; }
.badge.danger { background: #f3dcd6; color: var(--clay); }

/* --- Sub-tabs within a page (e.g. Finance: Invoices / Arrears) --- */
.subtabs { display: flex; gap: 6px; margin-bottom: 20px; }
.subtabs button {
  font-family: inherit;
  font-size: 0.88rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 16px;
  cursor: pointer;
  color: var(--muted);
}
.subtabs button.active { border-color: var(--moss); color: var(--moss); background: #eef0e8; }

.summary-strip {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}
.summary-strip .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; }
.summary-strip .stat .num { font-size: 1.3rem; font-weight: 600; }
.summary-strip .stat .label { font-size: 0.78rem; color: var(--muted); }

/* --- Modal --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(28,42,36,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 100;
}
.modal-overlay.hidden { display: none; }
.hidden { display: none; }
.modal-box {
  background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line);
  padding: 28px; width: 100%; max-width: 420px;
}
.modal-box h3 { margin: 0 0 18px; font-size: 1.05rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.modal-actions .btn.secondary { border-color: var(--line); color: var(--muted); }

/* --- Printable receipt --- */
.receipt { font-family: 'Menlo', monospace; font-size: 0.85rem; line-height: 1.6; }
.receipt hr { border: none; border-top: 1px dashed var(--line); margin: 12px 0; }
.receipt .row { display: flex; justify-content: space-between; }
.receipt .total { font-weight: 700; font-size: 1rem; }

@media print {
  body * { visibility: hidden; }
  #receiptPrintArea, #receiptPrintArea *, #reportPrintArea, #reportPrintArea * { visibility: visible; }
  #receiptPrintArea, #reportPrintArea { position: absolute; top: 0; left: 0; width: 100%; padding: 24px; }
  .modal-actions { display: none; }
  /* Consistent paper size/margins rather than leaving it to whatever the
     browser's own print defaults happen to be. */
  @page { size: A4; margin: 15mm; }
  /* A long table (a broadsheet - a whole class's scores - or a multi-year
     transcript) can genuinely span several printed pages: repeat the
     header row on each page it lands on, and never let a single row get
     sliced across a page break. */
  .report-doc table { page-break-inside: auto; }
  .report-doc thead { display: table-header-group; }
  .report-doc tr { page-break-inside: avoid; }
  /* Whole-class report cards (see reports.html's "Generate for whole
     class") are several of these concatenated into one document - each
     one after the first starts on its own fresh page rather than running
     on from wherever the previous student's report card ended. */
  .doc-page-break { page-break-before: always; }
}

/* ============================================================
   PHONE / SMALL-SCREEN LAYOUT
   Everything above this point was written with zero responsive design at
   all: no viewport meta tag on any page (added separately - see each
   page's <head>), zero @media rules besides print. On an actual phone
   that means the browser renders the whole page at desktop width
   (~980px) and scales the lot down, so every fix below only starts
   working once that tag exists too - the two changes depend on each
   other. Breakpoint chosen (640px) comfortably covers real phones in
   portrait - iPhone SE/mini at 375px up through the larger Android
   phones around 412-430px - with headroom, while leaving tablets and
   anything wider on the existing desktop layout untouched.
   ============================================================ */
@media (max-width: 640px) {
  /* Two-column forms are everywhere in this app (every "Add a ..." panel
     across academics/finance/boarding/transport/procurement/etc. all use
     .grid-2) and were never designed to fit in less than ~460px of usable
     width - at phone width each column would land under ~150px, too
     narrow for a label plus its input to read comfortably. Stacking to
     one column is the single highest-impact form fix here, and it's one
     rule reaching every form in the app at once because they all share
     this class. */
  .grid-2 { grid-template-columns: 1fr; }

  /* The main nav (<nav class="tabbar">, identical ~21-link list repeated
     on every authenticated page) is a plain flex row with no wrap and no
     scroll. At phone width that either pushes most links off-screen with
     no way to reach them, or - if it were allowed to wrap - eats most of
     the vertical viewport before any actual page content shows. Scrolling
     it horizontally keeps every link reachable via a natural swipe
     without growing the page's height at all. -webkit-overflow-scrolling
     gives it momentum/inertia on iOS Safari instead of a stiff, tick-by-
     tick scroll; scrollbar-width: none + the ::-webkit-scrollbar rule
     hide the scrollbar itself, since a swipeable strip reads more like a
     native app control without one visibly sitting under it. */
  .tabbar {
    padding: 0 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar a {
    flex: 0 0 auto;
    padding: 12px 12px;
    white-space: nowrap;
  }

  /* Same overflow problem, same fix, for the sub-navigation inside a page
     (e.g. Boarding's Houses & Rooms / Allocation / Attendance / Meal
     Plans / Inspections / Incidents / Reports - seven subtabs, the most
     of any page in this app, on a strip that was never going to fit
     seven text buttons in ~350px). Padding bumped slightly beyond the
     desktop 7px/16px too, since these are real tap targets on a touch
     screen, not just clickable text on a cursor-driven one. */
  .subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px 20px;
    padding: 0 12px 4px;
  }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs button {
    flex: 0 0 auto;
    padding: 9px 16px;
  }

  /* Dashboard KPI rows (management.html alone has up to 22 of these
     stat cards across its tabs) were a flex row with no wrap, so at
     phone width they'd run off-screen exactly like the nav bars above.
     Unlike navigation, though, a stat card reads fine stacked - there's
     no ordering/adjacency meaning lost by wrapping - so wrap is the
     right fix here instead of a horizontal scroll. */
  .summary-strip { flex-wrap: wrap; gap: 12px; }
  .summary-strip .stat { flex: 1 1 calc(50% - 6px); padding: 12px 14px; }

  /* Every data table in the app (attendance rolls, fee schedules,
     student lists, the lot) is full-width with 6-14px of cell padding
     and was sized for a desktop's ~870px of usable content width - many
     have 6-8 columns. Rather than rewrite every table's markup across
     26 pages to add an individual scroll wrapper, switching the <table>
     element itself to `display: block` with `overflow-x: auto` makes
     each one independently horizontally scrollable with no HTML changes
     anywhere: every existing <table> in the app gets this for free.
     thead/tbody/tr/th/td keep their normal table-related display roles
     by default (table-header-group, table-row-group, table-row,
     table-cell) - only the outer <table> changes, so the grid itself
     still renders correctly, just inside a block-level scroll
     container instead of being forced to fit the viewport's width. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 8px 10px; font-size: 0.86rem; }

  main { padding: 20px 12px 60px; }

  .topbar { padding: 14px 14px; flex-wrap: wrap; gap: 8px; row-gap: 6px; }
  .topbar .brand { font-size: 1.02rem; }
  .topbar .brand-mark { height: 18px; width: 18px; margin-right: 6px; }
  .topbar .who { font-size: 0.72rem; }

  .login-card { padding: 32px 22px; }

  .panel { padding: 16px; margin-bottom: 20px; }

  .modal-overlay { padding: 12px; }
  .modal-box { padding: 20px; max-height: 90vh; overflow-y: auto; }

  /* .receipt/.report-doc are read on-screen sometimes (not only printed -
     the print @media rules above only apply once an actual print job
     starts), so their fixed-width row layout gets the same treatment as
     everything above it rather than being left out because it's "print"
     content. */
  .report-doc .doc-summary { gap: 14px; }
  .report-doc table { display: block; overflow-x: auto; }
}

/* --- Printable academic reports (report card, transcript, mark sheet,
   broadsheet, academic summary) --- */
.report-doc { font-family: Georgia, serif; color: #222; }
.report-doc header.doc-head { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #333; padding-bottom: 14px; margin-bottom: 18px; }
.report-doc header.doc-head img { height: 48px; }
.report-doc header.doc-head h1 { font-size: 18px; margin: 0; }
.report-doc header.doc-head p { margin: 2px 0; font-size: 12px; color: #555; }
.report-doc h2 { font-size: 15px; margin: 0 0 4px; }
.report-doc .doc-meta { font-size: 13px; color: #444; margin-bottom: 14px; }
.report-doc .doc-meta span { margin-right: 18px; }
.report-doc table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.report-doc th, .report-doc td { border: 1px solid #ccc; padding: 5px 8px; text-align: left; }
.report-doc th { background: #f2f0ea; }
.report-doc td.num, .report-doc th.num { text-align: right; }
.report-doc .doc-summary { display: flex; gap: 24px; flex-wrap: wrap; margin: 14px 0; font-size: 13px; }
.report-doc .doc-summary .stat b { display: block; font-size: 17px; }
.report-doc .doc-footer { margin-top: 40px; font-size: 12px; color: #666; display: flex; justify-content: space-between; }