/* ============================================================
   GTBNPS FINANCE — SCREENS
   Dashboard, expenditure, deposits, reports, reminders, settings,
   audit, student sheet, private reconciliation.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════ */
.dash__grid {
  display: grid; gap: var(--s4);
  grid-template-columns: 1fr 360px;
  align-items: start;
}
@media (max-width: 1100px) { .dash__grid { grid-template-columns: 1fr; } }

.dash__hello { margin-bottom: var(--s5); }
.dash__hello h2 { font-size: var(--t-xl); letter-spacing: -.025em; }
.dash__hello p { color: var(--text-2); margin-top: 3px; }

/* Alerts — the handful of things that need somebody today. */
.alert-row {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: var(--s3) var(--s4);
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); margin-bottom: var(--s2);
  text-align: left; transition: transform var(--fast), box-shadow var(--fast);
}
.alert-row:hover { transform: translateX(2px); box-shadow: var(--sh-sm); }
.alert-row__icon {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.alert-row__icon svg { width: 17px; height: 17px; stroke-width: 2.1; }
.alert-row.red   { border-left: 3px solid var(--red-mid); }
.alert-row.red   .alert-row__icon { background: var(--red-bg); color: var(--red); }
.alert-row.amber { border-left: 3px solid var(--gold); }
.alert-row.amber .alert-row__icon { background: var(--amber-bg); color: var(--amber); }
.alert-row.blue  { border-left: 3px solid var(--blue); }
.alert-row.blue  .alert-row__icon { background: var(--blue-bg); color: var(--blue); }
.alert-row__txt { flex: 1; font-size: var(--t-base); font-weight: var(--w-medium); }
.alert-row__go { color: var(--text-4); flex: none; }
.alert-row__go svg { width: 16px; height: 16px; stroke-width: 2.2; }

/* Latest transactions */
.tx { display: flex; align-items: center; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.tx:last-child { border-bottom: 0; }
.tx__icon {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.tx__icon svg { width: 15px; height: 15px; stroke-width: 2.2; }
.tx__icon.in  { background: var(--green-bg); color: var(--green); }
.tx__icon.out { background: var(--red-bg); color: var(--red); }
/* These are <span> elements inside a flex row, so each one that
   holds its own line has to be made a block — left inline they run
   together into one wrapped paragraph, which is exactly how the
   mobile student cards first rendered. */
.tx__main { flex: 1; min-width: 0; display: block; }
.tx__who, .tx__what, .tx__when, .tx__amt { display: block; }
.tx__who { font-size: var(--t-sm); font-weight: var(--w-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx__what { font-size: var(--t-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx__amt { font-size: var(--t-sm); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; flex: none; text-align: right; }
.tx__amt.in  { color: var(--green); }
.tx__amt.out { color: var(--red); }
.tx__when { font-size: 10.5px; color: var(--text-4); margin-top: 1px; }

/* Class performance rows */
.classrow {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 84px;
  align-items: center; gap: var(--s3);
  padding: 11px var(--s3); border-radius: var(--r-sm);
  width: 100%; text-align: left; transition: background var(--fast);
  border-bottom: 1px solid var(--border-light);
}
.classrow:hover { background: var(--surface-alt); }
.classrow__name { font-size: var(--t-sm); font-weight: var(--w-semi); display: block; }
.classrow__n { font-size: var(--t-xs); color: var(--text-3); display: block; }
.classrow__v { font-size: var(--t-sm); text-align: right; font-variant-numeric: tabular-nums; }
.classrow__meter { height: 6px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
.classrow__meter i { display: block; height: 100%; border-radius: var(--r-full); background: var(--green-mid); }
.classrow__meter i.low { background: var(--red-mid); }
.classrow__meter i.mid { background: var(--gold); }
@media (max-width: 700px) {
  .classrow { grid-template-columns: 1.3fr 1fr 70px; }
  .classrow__hide { display: none; }
}

/* Fee-by-fee collection rates */
.ratecard { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.rate {
  padding: var(--s3); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
  text-align: left; width: 100%; transition: border-color var(--fast);
}
.rate:hover { border-color: var(--border-strong); }
.rate__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.rate__label { font-size: var(--t-sm); font-weight: var(--w-semi); }
.rate__pct { font-size: var(--t-base); font-weight: var(--w-black); font-variant-numeric: tabular-nums; }
.rate__nums { font-size: var(--t-xs); color: var(--text-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.rate__opt { font-size: 9.5px; color: var(--text-4); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--w-bold); }

/* Simple bar chart for the weekly trend — drawn with divs, because a
   charting library for eight bars is a lot of kilobytes on a phone. */
.trend { display: flex; align-items: flex-end; gap: 7px; height: 120px; padding-top: var(--s3); }
.trend__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; min-width: 0; }
.trend__bars { display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.trend__bar { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; transition: height var(--slow); }
.trend__bar.in  { background: var(--green-mid); }
.trend__bar.out { background: var(--red-border); }
.trend__label { font-size: 9.5px; color: var(--text-4); text-align: center; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   LEDGER LISTS (expenditure, deposits, audit)
   ══════════════════════════════════════════════════════════ */
.toolbar {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4); flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }

.ledger-row {
  display: grid; grid-template-columns: 96px 1fr 130px 130px 40px;
  align-items: center; gap: var(--s3);
  padding: 11px var(--s3); border-bottom: 1px solid var(--border-light);
}
.ledger-row:hover { background: var(--surface-alt); }
.ledger-row__date { font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ledger-row__desc { font-size: var(--t-sm); font-weight: var(--w-medium); }
.ledger-row__meta { font-size: var(--t-xs); color: var(--text-3); margin-top: 1px; }
.ledger-row__amt { text-align: right; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .ledger-row { grid-template-columns: 1fr auto; grid-template-areas: 'd a' 'm a'; row-gap: 2px; }
  .ledger-row__date { grid-area: d; }
  .ledger-row__desc { grid-area: d; }
  .ledger-row__body { grid-area: d; }
  .ledger-row__amt { grid-area: a; }
  .ledger-row__hide { display: none; }
}

/* ══════════════════════════════════════════════════════════
   REMINDERS
   ══════════════════════════════════════════════════════════ */
.rem__setup { display: grid; grid-template-columns: 320px 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 960px) { .rem__setup { grid-template-columns: 1fr; } }

.classpick { display: flex; flex-wrap: wrap; gap: var(--s2); }
.classpick__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-full);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--text-2);
  transition: all var(--fast);
}
.classpick__item.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.classpick__item .n { font-size: var(--t-xs); opacity: .7; }

.rem__row {
  display: grid; grid-template-columns: 30px 1fr 120px 110px 100px;
  align-items: center; gap: var(--s3);
  padding: 10px var(--s3); border-bottom: 1px solid var(--border-light);
  font-size: var(--t-sm);
}
.rem__row:hover { background: var(--surface-alt); }
.rem__row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--navy); }
.rem__name { font-weight: var(--w-semi); }
.rem__parent { font-size: var(--t-xs); color: var(--text-3); margin-top: 1px; }
.rem__num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .rem__row { grid-template-columns: 26px 1fr 100px; }
  .rem__row .rem__hide { display: none; }
}

.letter-preview {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s5);
  font-size: var(--t-sm); line-height: 1.6; max-height: 520px; overflow-y: auto;
}
.letter-preview h4 { font-size: var(--t-md); margin-bottom: var(--s2); }
.letter-preview .lp-head { text-align: center; border-bottom: 2px solid var(--navy); padding-bottom: var(--s3); margin-bottom: var(--s4); }
.letter-preview .lp-school { font-size: var(--t-md); font-weight: var(--w-black); color: var(--navy); letter-spacing: -.01em; }
.letter-preview .lp-motto { font-size: var(--t-xs); color: var(--gold); font-style: italic; }
.letter-preview .lp-contact { font-size: 10.5px; color: var(--text-3); margin-top: 3px; }
.letter-preview table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; font-size: var(--t-xs); }
.letter-preview th { text-align: left; background: var(--bg-sunken); padding: 5px 7px; font-size: 10px; letter-spacing: .04em; }
.letter-preview td { padding: 5px 7px; border-bottom: 1px solid var(--border-light); }
.letter-preview .lp-tot {
  background: var(--surface-alt); border-left: 3px solid var(--navy);
  padding: var(--s3); margin: var(--s3) 0; display: flex; justify-content: space-between;
}
.letter-preview .lp-warn {
  background: var(--red-bg); border-left: 3px solid var(--red-mid); color: var(--red);
  padding: var(--s3); margin: var(--s3) 0; font-weight: var(--w-semi); font-size: var(--t-xs);
}

/* ══════════════════════════════════════════════════════════
   STUDENT SHEET
   ══════════════════════════════════════════════════════════ */
.stu__head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.stu__av {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-md);
  background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: var(--t-lg); font-weight: var(--w-bold);
}
.stu__name { font-size: var(--t-lg); font-weight: var(--w-bold); }
.stu__meta { font-size: var(--t-sm); color: var(--text-3); }
.stu__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-bottom: var(--s5); }
.stu__num { padding: var(--s3); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); }
.stu__num .l { font-size: 10px; font-weight: var(--w-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.stu__num .v { font-size: var(--t-lg); font-weight: var(--w-black); margin-top: 3px; font-variant-numeric: tabular-nums; }

.fee-line { padding: 11px 0; border-bottom: 1px solid var(--border-light); }
.fee-line__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.fee-line__label { font-size: var(--t-sm); font-weight: var(--w-semi); }
.fee-line__vals { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.fee-line__inst { font-size: var(--t-xs); color: var(--text-3); margin-top: 4px; padding-left: var(--s3); }
.fee-line__inst span { display: inline-block; margin-right: var(--s3); }

/* ══════════════════════════════════════════════════════════
   PRIVATE RECONCILIATION
   ══════════════════════════════════════════════════════════ */
.priv__banner {
  background: linear-gradient(135deg, #2B2416, #1A160D);
  border: 1px solid rgba(212,160,23,.3);
  color: #F0E2BC; border-radius: var(--r-lg);
  padding: var(--s4) var(--s5); margin-bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.priv__banner svg { width: 22px; height: 22px; color: var(--gold-light); flex: none; }
.priv__banner b { color: var(--gold-light); }
.priv__banner .spacer { flex: 1; min-width: 20px; }

.priv__pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.pair {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s4);
}
.pair__label { font-size: 10px; font-weight: var(--w-bold); letter-spacing: .055em; text-transform: uppercase; color: var(--text-3); }
.pair__vals { display: flex; align-items: baseline; gap: var(--s3); margin-top: 7px; }
.pair__declared { font-size: var(--t-md); font-weight: var(--w-semi); color: var(--text-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.pair__true { font-size: var(--t-xl); font-weight: var(--w-black); color: var(--purple); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pair__diff { font-size: var(--t-xs); color: var(--text-3); margin-top: 4px; }

.priv__row {
  display: grid; grid-template-columns: 1fr 150px 110px 110px 110px;
  align-items: center; gap: var(--s3);
  padding: 11px var(--s3); border-bottom: 1px solid var(--border-light); font-size: var(--t-sm);
}
.priv__row:hover { background: var(--surface-alt); }
.priv__row .r { text-align: right; font-variant-numeric: tabular-nums; }
.priv__diff { color: var(--purple); font-weight: var(--w-bold); }
@media (max-width: 800px) {
  .priv__row { grid-template-columns: 1fr 100px; }
  .priv__row .priv__hide { display: none; }
}

/* ══════════════════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════════════════ */
.set__grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--s5); align-items: start; }
@media (max-width: 860px) { .set__grid { grid-template-columns: 1fr; } }

.set__tabs { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.set__tab {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--text-2);
  text-align: left; width: 100%; transition: background var(--fast), color var(--fast);
}
.set__tab:hover { background: var(--bg-sunken); }
.set__tab.on { background: var(--navy); color: #fff; font-weight: var(--w-semi); }
.set__tab svg { width: 16px; height: 16px; flex: none; stroke-width: 1.9; }
@media (max-width: 860px) {
  .set__tabs { flex-direction: row; overflow-x: auto; position: static; padding-bottom: var(--s2); }
  .set__tab { flex: none; }
}

.set__row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--border-light);
}
.set__row:last-child { border-bottom: 0; }
.set__row-main { flex: 1; min-width: 0; }
.set__row-title { font-size: var(--t-base); font-weight: var(--w-semi); }
.set__row-desc { font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; }

.stamp-drop {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4); border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md); background: var(--surface-alt);
}
.stamp-drop img { max-width: 110px; max-height: 76px; object-fit: contain; border-radius: var(--r-xs); background: #fff; }
.stamp-drop__ph {
  width: 110px; height: 76px; border-radius: var(--r-xs); background: var(--bg-sunken);
  display: grid; place-items: center; color: var(--text-4); font-size: var(--t-xs);
}

/* Fee structure table */
.fee-tbl-wrap { overflow-x: auto; }
.fee-item-row td { padding: 8px var(--s3); }
.fee-amt-input {
  width: 110px; height: 34px; text-align: right; padding: 0 9px;
  border: 1px solid var(--border-strong); border-radius: var(--r-xs);
  background: var(--surface-alt); font-variant-numeric: tabular-nums; font-weight: var(--w-semi);
}
.fee-amt-input:focus { outline: none; border-color: var(--navy-soft); background: #fff; }

/* ══════════════════════════════════════════════════════════
   NOTIFICATIONS PANEL
   ══════════════════════════════════════════════════════════ */
.notifpanel {
  position: fixed; top: var(--topbar-h); right: var(--s4); z-index: 70;
  width: min(380px, calc(100vw - 32px)); max-height: min(560px, 74vh);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-xl);
  display: none; flex-direction: column; overflow: hidden;
  animation: modalIn var(--spring);
}
.notifpanel.on { display: flex; }
.notifpanel__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); border-bottom: 1px solid var(--border-light);
}
.notifpanel__list { overflow-y: auto; flex: 1; }
.notif {
  display: flex; gap: var(--s3); padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border-light);
  transition: background var(--fast);
}
.notif.unread { background: var(--blue-bg); }
.notif__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; margin-top: 6px; }
.notif.read .notif__dot { background: var(--border-strong); }
.notif__title { font-size: var(--t-sm); font-weight: var(--w-semi); }
.notif__body { font-size: var(--t-xs); color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.notif__when { font-size: 10.5px; color: var(--text-4); margin-top: 4px; }
@media (max-width: 640px) {
  .notifpanel { left: var(--s3); right: var(--s3); width: auto; top: calc(var(--topbar-h) + 4px); }
}

/* ══════════════════════════════════════════════════════════
   REPORT BOOK
   Calendar as the index, report as a document. The report side is
   styled like something printed rather than like a dashboard —
   generous measure, real headings, rules instead of cards — because
   it is meant to be read for half an hour, not glanced at.
   ══════════════════════════════════════════════════════════ */
.rb { display: grid; grid-template-columns: 288px 1fr; gap: var(--s5); align-items: start; }
.rb__cal { position: sticky; top: var(--s5); }

.rb__calhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
  font-size: var(--t-sm);
}
.rb__dows {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: var(--s3) var(--s3) 0; gap: 3px;
}
.rb__dows span {
  text-align: center; font-size: 10px; font-weight: var(--w-bold);
  color: var(--text-3); letter-spacing: .04em;
}
.rb__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px; padding: var(--s2) var(--s3) var(--s3);
}
.rb__day {
  position: relative; aspect-ratio: 1; border: 1px solid transparent;
  border-radius: var(--r-sm); background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 0; transition: background var(--fast), border-color var(--fast);
}
.rb__day--blank { pointer-events: none; }
.rb__day:hover:not(:disabled) { background: var(--bg-sunken); }
.rb__daynum  { font-size: var(--t-xs); font-weight: var(--w-semi); color: var(--text-2); line-height: 1; }
.rb__dayamt  { font-size: 8.5px; color: var(--green); font-weight: var(--w-bold); line-height: 1; }
/* The "week closes here" marker sits along the BOTTOM edge, not in
   the corner. In the corner it landed on top of the date on any day
   that also had money against it — which is most of them. */
.rb__dayweek {
  position: absolute; bottom: 1px; left: 0; right: 0;
  text-align: center; line-height: 1;
  font-size: 7.5px; font-weight: var(--w-bold); letter-spacing: .03em;
  color: #8A6A0C;
}
.rb__day.is-weekend { padding-bottom: 7px; }
.rb__day.is-busy   { background: var(--green-bg); }
.rb__day.is-busy .rb__daynum { color: var(--text); }
.rb__day.is-weekend { border-color: var(--amber-border); }
.rb__day.is-today  { box-shadow: inset 0 0 0 1.5px var(--navy); }
.rb__day.is-on     { background: var(--navy); border-color: var(--navy); }
.rb__day.is-on .rb__daynum, .rb__day.is-on .rb__dayamt, .rb__day.is-on .rb__dayweek { color: #fff; }
.rb__day:disabled  { opacity: .32; cursor: default; }

.rb__legend {
  padding: 0 var(--s4) var(--s4); display: grid; gap: 4px;
  font-size: 10.5px; color: var(--text-3);
}
.rb__legend span, .rb__barkey span { display: flex; align-items: center; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 3px; display: inline-block; flex: none; }
.dot--busy { background: var(--green-bg); border: 1px solid var(--green-border); }
.dot--week { background: transparent; border: 1.5px solid var(--amber-border); }
.dot--in   { background: var(--green); }
.dot--out  { background: var(--red-mid); }

.rb__weeks { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── The document ───────────────────────────────────────── */
.doc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s6) var(--s7) var(--s7);
}
.doc__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); padding-bottom: var(--s5); margin-bottom: var(--s5);
  border-bottom: 2px solid var(--navy);
}
.doc__kicker {
  font-size: 10.5px; font-weight: var(--w-bold); text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-3); margin-bottom: 3px;
}
.doc__title { font-size: 25px; font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.15; }
.doc__sub { font-size: var(--t-sm); color: var(--text-3); margin-top: 3px; }
.doc__actions { display: flex; gap: var(--s2); flex: none; }

.doc__figures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; margin-bottom: var(--s5);
}
.doc__fig { padding: var(--s4); border-left: 1px solid var(--border); }
.doc__fig:first-child { border-left: 0; }
.doc__figlabel {
  font-size: 10px; font-weight: var(--w-bold); text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3);
}
.doc__figvalue {
  font-size: 21px; font-weight: var(--w-bold); letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.doc__figvalue .unit { font-size: var(--t-xs); font-weight: var(--w-semi); color: var(--text-3); margin-left: 3px; }
.doc__fignote { font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; }

.doc__trend {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  font-size: var(--t-sm); margin-bottom: var(--s5);
}
.doc__trend svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
.doc__trend.is-up   { background: var(--green-bg); color: var(--green); }
.doc__trend.is-down { background: var(--red-bg);   color: var(--red); }

.doc__sec { margin-bottom: var(--s6); }
.doc__sec > h2 {
  font-size: var(--t-md); font-weight: var(--w-bold); letter-spacing: -.01em;
  padding-bottom: var(--s2); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--s2);
}
.doc__sec > h2 .doc__count {
  font-size: 10.5px; font-weight: var(--w-bold); color: var(--text-3);
  background: var(--bg-sunken); border-radius: var(--r-full); padding: 2px 7px;
}
.doc__sec h3 {
  font-size: var(--t-xs); font-weight: var(--w-bold); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3); margin-bottom: var(--s3);
}
.doc__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }

.doc__rows { display: grid; gap: 1px; }
.doc__row {
  display: flex; align-items: center; gap: var(--s3);
  padding: 6px 0; border-bottom: 1px solid var(--border-subtle, var(--border));
  font-size: var(--t-sm);
}
.doc__rowlabel { flex: 1; min-width: 0; }
.doc__rowbar { width: 84px; height: 5px; background: var(--bg-sunken); border-radius: 3px; overflow: hidden; flex: none; }
.doc__rowbar i { display: block; height: 100%; background: var(--navy); border-radius: 3px; }
.doc__rowval { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; min-width: 78px; text-align: right; }

.doc__top {
  background: var(--bg-sunken); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
}
.doc__toplabel {
  font-size: 10px; font-weight: var(--w-bold); text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); margin-bottom: var(--s2);
}
.doc__toprow {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-sm); padding: 3px 0;
}
.doc__toprow > span.truncate { flex: 1; }
.doc__toprow strong { font-variant-numeric: tabular-nums; }
.doc__rank {
  width: 17px; height: 17px; border-radius: var(--r-full); flex: none;
  background: var(--navy); color: #fff; font-size: 9.5px; font-weight: var(--w-bold);
  display: grid; place-items: center;
}

/* The ledger tables. Grid rather than <table> so the same markup can
   drop two columns on a phone without a horizontal scrollbar. */
.doc__table { display: grid; font-size: var(--t-sm); }
.doc__th, .doc__tr, .doc__tf {
  display: grid; grid-template-columns: 1.5fr .9fr 1.5fr .9fr .9fr;
  gap: var(--s3); padding: 7px 0; align-items: baseline;
}
.doc__table--exp .doc__th,
.doc__table--exp .doc__tr,
.doc__table--exp .doc__tf { grid-template-columns: .55fr 2.2fr 1fr .9fr; }
.doc__th {
  font-size: 10px; font-weight: var(--w-bold); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3); border-bottom: 1px solid var(--border-strong);
}
.doc__tr { border-bottom: 1px solid var(--border); }
.doc__tr[data-student] { cursor: pointer; }
.doc__tr[data-student]:hover { background: var(--surface-alt); }
.doc__tf { border-top: 1px solid var(--border-strong); font-weight: var(--w-bold); }
.doc__table .r { text-align: right; font-variant-numeric: tabular-nums; }
.doc__strong { font-weight: var(--w-semi); }
.doc__note { display: block; font-size: var(--t-xs); color: var(--text-3); font-weight: 400; }

.doc__cash { max-width: 420px; }
.doc__cashrow {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--t-sm);
}
.doc__cashrow span:last-child { font-variant-numeric: tabular-nums; font-weight: var(--w-semi); }
.doc__cashrow--total {
  border-top: 2px solid var(--navy); border-bottom: 0; margin-top: 3px;
  font-weight: var(--w-bold); font-size: var(--t-base);
}

.doc__foot {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--t-xs); color: var(--text-3);
}

/* Week shape bars */
.rb__bars { display: grid; grid-auto-flow: column; gap: var(--s2); align-items: end; height: 132px; }
.rb__bar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.rb__barstack {
  flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center;
  gap: 2px; min-height: 0;
}
.rb__barin, .rb__barout { width: 44%; max-width: 18px; border-radius: 3px 3px 0 0; min-height: 2px; }
.rb__barin  { background: var(--green); }
.rb__barout { background: var(--red-mid); }
.rb__barday { font-size: 10px; color: var(--text-3); font-weight: var(--w-semi); }
.rb__baramt { font-size: 9.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rb__barkey { display: flex; gap: var(--s4); margin-top: var(--s3); font-size: 10.5px; color: var(--text-3); }

@media (max-width: 1100px) {
  .rb { grid-template-columns: 244px 1fr; gap: var(--s4); }
  .doc { padding: var(--s5); }
  .doc__cols { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 900px) {
  .rb { grid-template-columns: 1fr; }
  .rb__cal { position: static; }
  .doc__figures { grid-template-columns: 1fr 1fr; }
  .doc__fig:nth-child(3) { border-left: 0; }
  .doc__fig:nth-child(n+3) { border-top: 1px solid var(--border); }
  .doc__head { flex-direction: column; }
  .doc__actions { width: 100%; }
  .doc__actions .btn { flex: 1; }
  .doc__title { font-size: 21px; }
  .hide-sm { display: none !important; }
  .doc__th, .doc__tr, .doc__tf { grid-template-columns: 1.4fr .8fr 1.2fr .9fr; }
  .doc__table--exp .doc__th,
  .doc__table--exp .doc__tr,
  .doc__table--exp .doc__tf { grid-template-columns: .6fr 2fr .9fr; }
}

/* ── Deposits: the per-week panel ───────────────────────── */
.dep__panel > td { padding: 0 !important; background: var(--bg-sunken); }
.dep__wrap { padding: var(--s4); }
.dep__row {
  display: flex; align-items: center; gap: var(--s4);
  padding: 9px var(--s3); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 6px; font-size: var(--t-sm);
}
.dep__date { font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 52px; }
.dep__main { flex: 1; min-width: 0; }
.dep__ref  { font-weight: var(--w-semi); }
.dep__meta { font-size: var(--t-xs); color: var(--text-3); margin-top: 1px; }
.dep__amt  { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.dep__acts { display: flex; gap: 5px; flex: none; }
.dep__acts .btn { padding: 0 8px; }
.dep__acts svg { width: 14px; height: 14px; }
.dep__empty { font-size: var(--t-sm); color: var(--text-3); padding: var(--s2) var(--s3); }
tr.is-open > td { background: var(--surface-alt); }

.dep__pos {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s4); margin-bottom: var(--s4);
}
.dep__posrow {
  display: flex; justify-content: space-between; padding: 5px 0; font-size: var(--t-sm);
}
.dep__posrow .num { font-variant-numeric: tabular-nums; }
.dep__posrow--total {
  padding: 9px 0 0; margin-top: 5px;
  border-top: 2px solid var(--border-strong); font-weight: var(--w-bold);
}

/* ── Drill-down: what one figure is made of ─────────────── */
.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed transparent; transition: border-color var(--fast), color var(--fast);
}
.linkish:hover { color: var(--navy); border-bottom-color: var(--border-strong); }
/* A button inside a table cell shrinks to its content box and then
   wraps the text — which turned "Pre-Nursery & N1" into three lines
   in the first column. The cell already decides the width. */
.tbl td .linkish { white-space: nowrap; text-align: inherit; }
td.r .linkish { display: inline-block; }

.drill__head {
  padding-bottom: var(--s4); margin-bottom: var(--s4);
  border-bottom: 2px solid var(--navy);
}
.drill__big {
  font-size: 26px; font-weight: var(--w-bold); letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; margin-right: 6px;
}
.drill__cls { margin-bottom: var(--s5); }
.drill__cls h4 {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-xs); font-weight: var(--w-bold); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3);
  padding-bottom: var(--s2); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
}
.drill__cls h4 span {
  font-size: var(--t-sm); color: var(--text); letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums;
}
.drill__stu {
  display: flex; align-items: center; gap: var(--s4);
  padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.drill__stu:hover { background: var(--surface-alt); }
.drill__stumain { flex: 1; min-width: 0; }
.drill__name   { font-size: var(--t-sm); font-weight: var(--w-semi); }
.drill__items  { font-size: var(--t-xs); color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.drill__items b { font-variant-numeric: tabular-nums; }
.drill__parent { font-size: var(--t-xs); color: var(--text-3); margin-top: 1px; }
.drill__total {
  font-weight: var(--w-bold); font-variant-numeric: tabular-nums; flex: none;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD ON A PHONE

   Desktop was fine. The phone was not: a 212px minimum column
   meant every tile became a full-width band and the dashboard
   turned into a list you scrolled — which defeats the whole point
   of a screen meant to be read in ten seconds.

   So on a phone it is a real two-column grid, with the week's
   collection spanning both because that is the figure people open
   the app for. The tiles get tighter padding and slightly smaller
   numerals so two fit side by side at 360px without the value
   wrapping, and the class and fee lists are compressed into
   something readable at arm's length rather than hidden.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .tiles--dash { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .tiles--dash .tile { padding: var(--s3) var(--s3) var(--s3); border-radius: var(--r-md); }
  .tiles--dash .tile--wide { grid-column: 1 / -1; padding: var(--s4); }

  .tiles--dash .tile__label { font-size: 9.5px; letter-spacing: .045em; gap: 4px; }
  .tiles--dash .tile__label svg { width: 12px; height: 12px; }
  .tiles--dash .tile__value { font-size: 19px; margin-top: 2px; }
  .tiles--dash .tile--wide .tile__value { font-size: 31px; }
  .tiles--dash .tile__value .unit { font-size: 10px; margin-left: 2px; }
  .tiles--dash .tile__foot { margin-top: 4px; gap: 5px; }
  .tiles--dash .tile__note { font-size: 10px; line-height: 1.35; }
  .tiles--dash .tile__delta { font-size: 11px; }
  .tiles--dash .tile::after { display: none; }   /* the hover arrow is noise on touch */

  .dash__hello { margin-bottom: var(--s4); }
  .dash__hello h2 { font-size: var(--t-lg); }
  .dash__hello p { font-size: var(--t-xs); }

  /* Class rows: name, collected, rate — three columns that still
     say something, instead of five squeezed to nothing. */
  .classrow { grid-template-columns: 1.5fr .9fr 58px; gap: var(--s2); padding: 10px var(--s3); }
  .classrow__name { font-size: var(--t-sm); }
  .classrow__n { font-size: 10px; }
  .classrow__v { font-size: var(--t-xs); }

  /* Fee rates two-up: eight full-width bars is a scroll, not a
     glance. */
  .ratecard { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .rate__label { font-size: 11px; }
  .rate__pct { font-size: var(--t-xs); }
  .rate__nums { font-size: 9.5px; }

  .card__body { padding: var(--s4); }
  .card__head { padding: var(--s4); }
  .card__sub { line-height: 1.4; }
}

@media (max-width: 400px) {
  .tiles--dash .tile__value { font-size: 17px; }
  .tiles--dash .tile--wide .tile__value { font-size: 27px; }
}

/* A copyable URL or key in a settings row. */
.set__code {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s3); padding: var(--s3);
  background: var(--bg-sunken); border-radius: var(--r-sm);
}
.set__code-label {
  width: 100%; font-size: 10px; font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-3);
}
.set__code code {
  flex: 1; min-width: 0; font-size: 11.5px; word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-2);
}