/* ==========================================================================
   SchoolSync identity layer — "Ledger".
   Loaded AFTER app.css and school.css, so it overrides both. Additive: deleting
   the <link> in base.html reverts every screen to the previous look.

   Why this file exists: the base app.css was inherited from ShopSync and its
   primary is Material blue #1E88E5 — the default template blue, and a drift from
   the Light Slate system this product is meant to follow (ink pills, soft status
   pills, bordered white panels). This layer restores Light Slate and gives the
   product an editorial, statement-like identity suited to a fee ledger.

   Two moves carry almost all of it:
   1. Every blue token is repointed at graphite ink. Anything still written as
      var(--blue) / var(--blue-dark) flips to ink automatically.
   2. Money figures switch to a serif with tabular old-style numerals — the one
      typographic choice no dashboard template makes, and it reads as "financial
      statement", not "admin panel".

   Palette: paper #F7F6F3 · panel #FFF · ink #17181C · muted #6B7076
   hairline #E6E3DE / strong #D8D4CC · ledger green #1F7A4D · brick #B4232A
   ochre #B26B12. Touch targets >= 46px. RTL-ready.
   ========================================================================== */
:root {
  /* repoint the inherited blues at ink — this is the retheme in one line */
  --blue: #17181C; --blue-dark: #17181C;
  --green: #1F7A4D; --red: #B4232A; --warn: #B26B12;
  --canvas: #F7F6F3; --card: #FFFFFF;
  --ink: #17181C; --muted: #6B7076;
  --border: #E6E3DE; --radius: 8px;
  --line-strong: #D8D4CC; --ink-soft: #3D4149;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  /* flat by default — a hairline reads sharper than a soft shadow */
  --shadow: none;
}
body.app {
  background: var(--canvas); color: var(--ink);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1 { font-size: 22px; letter-spacing: -.022em; }
h2 { font-size: 16px; letter-spacing: -.012em; }
h3 { font-size: 15px; letter-spacing: -.008em; }

/* ------------------------------------------------------------------ links */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong);
    text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink); }
.link { color: var(--ink); text-decoration: none; }
.card-h .link { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; }
.card-h .link:hover { color: var(--ink); }

/* ----------------------------------------------------------------- header */
.appbar { background: var(--card); border-bottom: 1px solid var(--line-strong); box-shadow: none; }
.brand-mark {
  border-radius: 9px; font-family: var(--serif); font-size: 15px; font-weight: 700;
  letter-spacing: 0; background: var(--ink); box-shadow: none;
}
.brand-text strong { font-weight: 700; letter-spacing: -.012em; }
.brand-sub { letter-spacing: .01em; }

/* A flat tab strip, ink not blue. "You are here" is said twice: the label darkens
   and a rule appears under it, so it survives a greyscale screen. */
.topnav { border-top: 1px solid var(--border); }
.topnav-btn { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.topnav-btn:hover { color: var(--ink); }
.topnav-btn:active { color: var(--ink); }
.topnav-btn.active { color: var(--ink); font-weight: 700; }
.topnav-btn.active::after { left: 8px; right: 8px; height: 2px; background: var(--ink); }

.icon-btn { border-radius: 8px; border-color: var(--line-strong); font-weight: 600; }
.icon-btn:hover { background: #F4F2EF; border-color: var(--ink); }
.chip { border-radius: 8px; background: #F4F2EF; border-color: var(--border); }

/* ---------------------------------------------------------------- panels */
.card { border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
.card--warn { border-color: var(--warn); background: #FDFAF3; }

/* ------------------------------------------------------- the money band */
/* The four border-left stat cards were the most templated thing on the screen.
   One bordered band, hairline-divided, figures set in serif. The 1px grid gap
   shows the hairline in any column count, so mobile (2-up) stays clean too. */
.stat-grid, .kpi {
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.stat {
  border: 0; border-radius: 0; box-shadow: none; background: var(--card);
  padding: 16px 18px; margin: 0;
}
body.rtl .stat { border: 0; }
.stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
/* a 6px signal tick instead of a 4px coloured slab down the whole card */
.stat-label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px;
  margin-inline-end: 8px; vertical-align: 1px; background: var(--line-strong);
}
.stat--green .stat-label::before { background: var(--green); }
.stat--red .stat-label::before { background: var(--red); }
.stat--warn .stat-label::before { background: var(--warn); }
.stat-value {
  font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.15;
  margin: 6px 0 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat-sub { letter-spacing: .005em; }

/* --------------------------------------------------------------- buttons */
.btn { border-radius: 8px; border-color: var(--line-strong); background: var(--card);
       color: var(--ink); font-weight: 600; min-height: 46px; }
.btn:hover { background: #F4F2EF; }
.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover { background: #000; }
.btn--ghost { background: #F4F2EF; border-color: var(--border); }
.btn--ghost:hover { background: #EDEAE5; }
/* One primary colour only. Green is reserved for the money-in signal (dots, pills,
   balances) — a green *button* next to an ink one reads as two competing primaries. */
.btn--success { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--success:hover { background: #000; }
.btn--danger { background: var(--red); border-color: var(--red); }
.link--danger { color: var(--red); }

/* ---------------------------------------------------------------- inputs */
.input { border-color: var(--line-strong); border-radius: 8px; }
.input:focus { outline: 2px solid rgba(23,24,28,.18); border-color: var(--ink); }
select.input { font-weight: 600; }

/* ---------------------------------------------------------------- tables */
.tbl th {
  color: var(--muted); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700; padding: 0 10px 10px;
  border-bottom: 1px solid var(--line-strong);
}
.tbl td { padding: 12px 10px; border-bottom: 1px solid var(--border); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: #FBFAF8; }
.tbl a { font-weight: 600; text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line-strong); }
.tbl a:hover { box-shadow: inset 0 -2px 0 var(--ink); }
/* the row action wall: compact, aligned right, not four full-height slabs.
   NOTE: do NOT put display:flex on the <td>. A flexed td stops being a table-cell,
   the column collapses to ~20px and the button overflows leftward, stranding ~220px
   of dead space at the table's right edge. Keep it a real cell, right-align, and
   make the buttons inline-flex instead. width:1% + nowrap then shrinks the column to
   its content so the slack goes to the name column, not this one (at auto it grew to
   526px and pushed the balance figure ~400px away from its own button). */
.tbl .actions { display: table-cell; text-align: right; white-space: nowrap;
                width: 1%; padding-left: 8px; }
.tbl .actions .btn { display: inline-flex; align-items: center; vertical-align: middle;
                     min-height: 38px; padding: 0 13px; font-size: 13px; }
.tbl .actions .btn + .btn { margin-left: 6px; }
/* Half the weight: on a 40-row list a solid button beside a grey chip in every row is
   still a wall. Secondary row actions drop to a quiet label so the eye lands on the
   one action that matters. Hit area is unchanged (min-height still applies). */
.tbl .actions .btn--ghost { background: transparent; border-color: transparent;
                            color: var(--muted); box-shadow: none; font-weight: 600; }
.tbl .actions .btn--ghost:hover { background: #F1EFEC; color: var(--ink); }
.row--low td { background: #FDFAF3; }

/* Soft status pills (Light Slate): tinted, not solid. */
.pill { border-radius: 6px; padding: 3px 9px; font-size: 11px; letter-spacing: .02em; }
.pill--green { background: #EAF5EF; color: #1F7A4D; }
.pill--red { background: #FBECEC; color: #B4232A; }
.pill--warn { background: #FBF2E4; color: #B26B12; }
.pill--grey { background: #F1EFEC; color: var(--muted); }

.flash { border-radius: 8px; border: 1px solid transparent; }
.flash--ok { background: #EAF5EF; color: #1F7A4D; border-color: #CFE6DA; }
.flash--warn { background: #FBECEC; color: #B4232A; border-color: #F0D2D2; }
.flash--info { background: #F1EFEC; color: var(--ink-soft); border-color: var(--border); }

/* --------------------------------------------------------------- reports */
.report-line { border-bottom: 1px solid var(--border); }
.range-tabs a { border-radius: 8px; border-color: var(--line-strong); font-weight: 600; }
.range-tabs a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 700; }
.totals-grand { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; }
.totals > div { font-variant-numeric: tabular-nums; }
.mono-big, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.done-amount { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }
.sheet { border-radius: 12px; }

/* ---------------------------------------------------------------- mobile */
.tab.active { color: var(--ink); }
.tab.active::before { background: var(--ink); }
.modal-card { border-radius: 14px; }

/* --------------------------------------------------- auth / sign-in page */
/* Vertical centring needs the wrapper class added in login.html. The 3px ink
   rule across the top plus a serif school name is the whole "designed" signal. */
.auth-wrap { display: grid; place-items: center; min-height: calc(100vh - 190px); }
.auth-card { max-width: 396px; width: 100%; padding: 28px; border-top: 3px solid var(--ink); }
.auth-card h1 { font-family: var(--serif); font-size: 27px; font-weight: 600;
  letter-spacing: -.022em; margin-bottom: 2px; }
.auth-card .btn { margin-top: 10px; }

@media (max-width: 520px) {
  .stat-value { font-size: 21px; }
  .stat { padding: 13px 12px; }
  .auth-wrap { min-height: calc(100vh - 150px); }
}