/*
 * GLFL Accounting — design system.
 *
 * Enterprise finance UI: light, restrained, dense. Every colour is a variable
 * in the :root block below so a palette can be introduced later without
 * touching a single template. The chrome is deliberately neutral — colour
 * carries meaning only: red for negative figures, amber for variances, green
 * for a reconciled nil.
 */

:root {
  /* Neutrals — near-white page, warm grey surfaces, near-black text. */
  --bg: #faf9f7;
  --surface: #ffffff;
  --surface-sunken: #f4f3f0;
  --sidebar: #f7f6f3;
  --hover: #f0efeb;
  --selected: #ecebe6;

  /* Hairline borders. */
  --border: #e7e4de;
  --border-strong: #d7d3ca;

  /* Text. */
  --text: #1b1a17;
  --text-muted: #6c6960;
  --text-faint: #9a978d;
  --text-invert: #ffffff;

  /* Meaning-only colour. */
  --neg: #b42318;          /* negative figures */
  --neg-bg: #fef3f2;
  --warn: #a1560a;         /* variances */
  --warn-bg: #fdf6ec;
  --pos: #067647;          /* reconciled nil */
  --pos-bg: #ecfdf3;

  /* Reserved brand accent (from Entity config). NOT used in chrome. */
  --accent: #1f5fa6;

  /* Chart palette — the Tarabut brand: purple and orange on neutral greys. The two
     data colours are the only hues charts use; axis/tick are neutral grey. */
  --chart-bar: #675CF3;    /* brand purple — primary/actual series */
  --chart-line: #F27B20;   /* brand orange — secondary/target/budget series */
  --chart-grid: #ecece6;   /* retained; gridlines are no longer drawn */
  --chart-axis: #cfcfc8;
  --chart-tick: #8a897f;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow-card: 0 1px 2px rgba(27, 26, 23, 0.04), 0 1px 1px rgba(27, 26, 23, 0.03);

  --sidebar-w: 232px;
  --topbar-h: 52px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* Numbers everywhere align: tabular figures, right-aligned in tables. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}
.neg { color: var(--neg); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

/* Budget-vs-actual variance colour: favourable/near/adverse, on the light bg. Used
   only here — the statements deliberately carry no such judgement. */
.bva-pos { color: var(--pos); font-weight: 600; }
/* Within-band (±10%) variance: a CLEAR, neutral amber — deliberately more golden than
   the red-leaning --warn (#a1560a) so an in-tolerance under/overspend reads as neutral,
   never as an adverse red. The direction (favourable/adverse) only colours BEYOND the
   band; within it every line type is this same amber, regardless of sign. */
.bva-warn { color: #9a7100; font-weight: 600; }
.bva-neg { color: var(--neg); font-weight: 600; }

/* ---------------------------------------------------------------- shell */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
}
/* Brand guideline: set width, let height follow; never below 150px, never stretch. */
.sidebar__brand img {
  width: 150px;
  height: auto;
  display: block;
}
.sidebar__brand-text {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.nav { padding: 8px 10px; flex: 1; overflow-y: auto; }
/* Group headings recede: small, faint, light — clearly subordinate to the links. */
.nav__section {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-faint);
  padding: 12px 10px 3px;
  font-weight: 500;
}
/* Tight enough that every section fits without scrolling. */
.nav__link {
  display: block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
}
.nav__link:hover { background: var(--hover); color: var(--text); }
/* Active item: a restrained left accent bar + bolder text, no filled block. */
.nav__link.is-active {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--text);
}

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

.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar__title { font-size: 14px; font-weight: 600; }
.topbar__right { display: flex; align-items: center; gap: 20px; }
.topbar__meta { font-size: 12.5px; color: var(--text-muted); }
.topbar__meta strong { color: var(--text); font-weight: 600; }
.topbar__user {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted);
}
.linkbtn {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; color: var(--text-muted);
}
.linkbtn:hover { color: var(--text); text-decoration: underline; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-sunken); border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 650; color: var(--text-muted);
}

.content { padding: 22px 24px 40px; flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- page head */

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.page-head h1 { font-size: 19px; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
.page-head p { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card__head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card__title { font-size: 13px; font-weight: 600; }
.card__body { padding: 14px 16px; }
.card__body--flush { padding: 0; }

/* Stat tiles. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
}
.stat__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); font-weight: 600;
}
.stat__value {
  font-size: 21px; font-weight: 650; margin-top: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.stat__sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

/* Dashboard tiles — 4 across, whole tile clickable. */
.tile-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
.tile {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px; color: inherit; text-decoration: none;
}
.tile--link { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.tile--link:hover {
  border-color: #9db4d4; box-shadow: 0 2px 8px rgba(27,26,23,0.08); transform: translateY(-1px);
}
.tile--link:hover .tile__label { color: var(--accent); }
.tile--pending { background: repeating-linear-gradient(-45deg, var(--surface), var(--surface) 8px, #faf9f6 8px, #faf9f6 16px); }
.tile__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); font-weight: 600;
}
.tile__info { text-transform: none; cursor: help; color: var(--text-faint); }
.tile__value {
  font-size: 21px; font-weight: 650; margin-top: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.tile__value--pending { color: var(--text-faint); font-weight: 600; font-size: 16px; }
.tile__unit { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.tile__sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

/* ---------------------------------------------------------------- tables */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table th.num, .data-table td.num { text-align: right; }
/* Dense: ~28px rows so 25-30 lines of a trial balance fit without scrolling. */
.data-table tbody td {
  padding: 4px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  /* No `color` here: it is (0,1,2) and would beat semantic cell classes like
     .bva-neg / .neg / .variance-warn (0,1,0), rendering them black. Cells inherit
     --text from the body; the colour classes now win. */
}
.data-table tbody tr:hover td { background: var(--hover); }
.data-table tbody tr.is-link { cursor: pointer; }
.data-table .code {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
.data-table tfoot td {
  padding: 8px 14px;
  border-top: 1px solid var(--border-strong);
  font-weight: 650;
  background: var(--surface-sunken);
}
.data-table tbody tr.subtotal td {
  font-weight: 600;
  background: var(--surface-sunken);
}
/* Links are identifiable at rest: a subtle underline that darkens on hover. */
.row-link, .link { color: var(--text); font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--border-strong); text-underline-offset: 2px;
  text-decoration-thickness: 1px; }
.row-link:hover, .link:hover { text-decoration-color: var(--text); }

/* ---------------------------------------------------------------- badges */

.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 1px 8px; border-radius: 20px; border: 1px solid transparent;
  white-space: nowrap;
}
.tag--neg { color: var(--neg); background: var(--neg-bg); border-color: #f6cfcb; }
.tag--warn { color: var(--warn); background: var(--warn-bg); border-color: #f0dcbf; }
.tag--pos { color: var(--pos); background: var(--pos-bg); border-color: #b8e6cd; }
.tag--muted { color: var(--text-muted); background: var(--surface-sunken); border-color: var(--border); }

.variance-warn { color: var(--warn); font-weight: 600; }
.variance-nil { color: var(--pos); font-weight: 600; }

/* ---------------------------------------------------------------- forms */

.toolbar {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 600;
}
.input, .select {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 13px;
  font-family: inherit; min-width: 150px;
}
.input:focus, .select:focus { outline: 2px solid #c9d6e8; outline-offset: -1px; border-color: #9db4d4; }
.btn {
  height: 34px; padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--hover); }
.btn--primary { background: var(--text); color: var(--text-invert); border-color: var(--text); }
.btn--primary:hover { background: #33322d; }
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }

/* Inline single checkbox + label (e.g. a show/hide toggle in a toolbar). */
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--text-muted); cursor: pointer; }

/* An inline form embedded in a table cell (e.g. amortise a prepayment). */
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }

/* Segmented tabs (e.g. credit note / accrual switch). */
.tabs { display: inline-flex; gap: 2px; background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.tabs .tab { padding: 5px 12px; border-radius: var(--radius-sm); font-size: 12.5px;
  font-weight: 600; color: var(--text-muted); text-decoration: none; }
.tabs .tab:hover { color: var(--text); }
.tabs .tab.is-active { background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-card); }

/* ---------------------------------------------------------------- footer */

.report-footer {
  margin-top: 26px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-faint);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.report-footer strong { color: var(--text-muted); font-weight: 600; }

/* ---------------------------------------------------------------- login */

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 30px 30px 26px;
}
.login-card__brand { margin-bottom: 22px; }
.login-card__brand img { width: 168px; height: auto; display: block; }
.login-card h1 { font-size: 17px; font-weight: 650; margin: 0 0 3px; }
.login-card p { margin: 0 0 20px; color: var(--text-muted); font-size: 13px; }
.login-field { margin-bottom: 14px; }
.login-field label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 5px;
}
.login-field .input { width: 100%; height: 38px; }
.login-error {
  background: var(--neg-bg); border: 1px solid #f6cfcb; color: var(--neg);
  font-size: 12.5px; padding: 8px 11px; border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.login-card .btn--primary { width: 100%; height: 40px; }
.login-foot {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-faint); text-align: center; line-height: 1.5;
}

/* ---------------------------------------------------------------- misc */

.empty {
  padding: 40px; text-align: center; color: var(--text-faint); font-size: 13px;
}
.section-gap { margin-top: 18px; }
.hint { font-size: 12px; color: var(--text-muted); }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 3px 16px; font-size: 13px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.timeline li:last-child { border-bottom: none; }
.timeline .when { color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- flash */

.messages { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  font-size: 13px; padding: 9px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.flash--success { background: var(--pos-bg); border-color: #b8e6cd; color: var(--pos); }
.flash--error { background: var(--neg-bg); border-color: #f6cfcb; color: var(--neg); }
.flash--warning { background: var(--warn-bg); border-color: #f0dcbf; color: var(--warn); }
.flash--info { background: #eef4fb; border-color: #cfe0f3; color: var(--accent); }

/* ---------------------------------------------------------------- entry form */

.form-error {
  background: var(--neg-bg); border: 1px solid #f6cfcb; color: var(--neg);
  font-size: 13px; padding: 9px 13px; border-radius: var(--radius-sm); margin-bottom: 16px;
}
.field-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.field textarea.input { height: auto; padding: 8px 10px; min-width: 320px; resize: vertical; }
.field .input--wide { min-width: 420px; }

.line-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.line-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 600; padding: 6px 8px;
  border-bottom: 1px solid var(--border-strong);
}
.line-table th.num { text-align: right; }
.line-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.line-table .line-input {
  width: 100%; height: 30px; border: 1px solid var(--border); border-radius: 4px;
  padding: 0 8px; font-size: 13px; font-family: inherit; background: var(--surface);
}
.line-table .line-input:focus { outline: 2px solid #c9d6e8; outline-offset: -1px; border-color: #9db4d4; }
.line-table input.line-input.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Per-line dimension tag selects — stacked, compact, in the Tags cell. */
.line-table td.line-tags { padding: 3px 8px; }
.line-table td.line-tags .line-dim { height: 26px; margin: 1px 0; font-size: 12px; padding: 0 6px; }
.line-table td.rownum { color: var(--text-faint); font-variant-numeric: tabular-nums; width: 30px; }
.line-remove {
  border: none; background: none; color: var(--text-faint); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 4px;
}
.line-remove:hover { color: var(--neg); }

.totals-bar {
  display: flex; gap: 28px; align-items: center; justify-content: flex-end;
  padding: 10px 14px; background: var(--surface-sunken);
  border-top: 1px solid var(--border-strong); font-size: 13px;
}
.totals-bar .t-label { color: var(--text-muted); font-weight: 600; }
.totals-bar .t-val { font-variant-numeric: tabular-nums; font-weight: 650; }
.totals-bar .t-diff.is-off { color: var(--neg); }
.totals-bar .t-diff.is-ok { color: var(--pos); }

.action-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.action-bar form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.btn--danger { border-color: #e6b4ae; color: var(--neg); }
.btn--danger:hover { background: var(--neg-bg); }
.spacer { flex: 1; }

/* ---------------------------------------------------------------- charts */

/* Chart text is body-size-or-smaller; each chart's viewBox is kept near its
   rendered half-panel width so text is not magnified. No gridlines. */
.chart { display: block; width: 100%; height: auto; font-family: var(--font-sans); font-size: 11px; }
.chart__axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart__bar { fill: var(--chart-bar); }              /* purple: actual */
.chart__bar--target { fill: var(--chart-line); }     /* orange: board target */
.chart__bar:hover, .chart__bar--target:hover { opacity: 0.82; }
.chart__line { fill: none; stroke: var(--chart-bar); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }   /* purple */
.chart__line--alt { stroke: var(--chart-line); }     /* orange */
.chart__line--dash { stroke-dasharray: 5 4; }
.chart__dot { fill: var(--chart-bar); }
.chart__dot--alt { fill: var(--chart-line); }
.chart__ref { stroke: var(--text-faint); stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; }
.chart__ref-label { fill: var(--text-faint); font-size: 10px; }
.chart__tick { fill: var(--chart-tick); font-size: 11px; }
.chart__tick--l { text-anchor: end; }
.chart__xlabel { fill: var(--chart-tick); font-size: 11px; text-anchor: middle; }
.chart__val { fill: var(--text-muted); font-size: 10px; font-weight: 600; text-anchor: middle; }
/* Future months (target-only, not yet happened): lightened bars and labels. */
.chart__future { opacity: 0.4; }
/* Subtle divider at the current-month boundary. */
.chart__nowline { stroke: var(--chart-axis); stroke-width: 1; stroke-dasharray: 2 3; }
.chart__legend { fill: var(--text-muted); font-size: 11px; }
.chart__empty { fill: var(--text-muted); font-size: 12px; }
.chart-scroll { overflow-x: auto; }

/* Dashboard 2×2 chart grid — two charts per row, each ~half width. */
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chart-grid .card { margin: 0; }
.chart-card__caption { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.chart-card--placeholder { display: flex; align-items: center; justify-content: center;
  min-height: 150px; color: var(--text-faint); }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- breadcrumbs & drill-down */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; margin: 0 0 12px; color: var(--text-muted); }
.breadcrumb__link { color: var(--text-muted); text-decoration: underline;
  text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.breadcrumb__link:hover { color: var(--text); text-decoration-color: var(--text); }
.breadcrumb__sep { color: var(--text-faint); }
.breadcrumb__current { color: var(--text); font-weight: 500; }

/* ---------------------------------------------------- download dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; cursor: pointer; user-select: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown__caret { margin-left: 6px; color: var(--text-muted); font-size: 10px; }
.dropdown__menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  min-width: 160px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 4px; }
.dropdown__item { display: block; padding: 7px 10px; font-size: 13px; color: var(--text);
  border-radius: var(--radius-sm); text-decoration: none; }
.dropdown__item:hover { background: var(--hover); }

/* ---------------------------------------------------- pricing & terms grid */
.terms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; }
.terms-grid .term__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); }
.terms-grid .term__value { font-size: 15px; font-weight: 600; margin-top: 2px; }
@media (max-width: 720px) { .terms-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------- instalment status */
.ins--past { color: var(--text-faint); }
.ins--due td { background: var(--warn-bg); }
.ins-status { font-size: 11px; font-weight: 600; }
.ins-status--past { color: var(--text-muted); }
.ins-status--due { color: var(--warn); }
.ins-status--future { color: var(--text-faint); }

/* ---------------------------------------------------- statement interactions */
/* Clickable figures: no underline (every line is clickable — a wall of underlines);
   the row hover is the affordance. Genuine inline links keep .link's underline. */
.drill { color: inherit; text-decoration: none; }
.data-table tbody tr.is-row:hover td { background: var(--hover); }
.data-table tbody tr.is-row { cursor: pointer; }

/* Collapsible section headers. */
.section-head td { cursor: pointer; user-select: none; }
.sec-caret { display: inline-block; width: 12px; color: var(--text-faint); font-size: 10px;
  transition: transform .1s; }
.section-head.is-collapsed .sec-caret { transform: rotate(-90deg); }

/* Centred Download control, sitting just above the data table. */
.download-bar { display: flex; justify-content: center; margin: 4px 0 10px; }

/* Statement toolbar: From/To on the left, a Grouping dropdown + Download on the
   right, all on one row. A date change reloads (no Run button, no quick-sets). The
   right-hand controls are the same 34px height as the date inputs and bottom-align
   with them (the date fields carry a small label above), so Grouping and Download sit
   level with — vertically centred on — the input boxes rather than floating up by the
   label. */
.stmt-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.stmt-toolbar__dates { display: flex; align-items: flex-end; gap: 14px; margin: 0; }
.stmt-toolbar__right { display: flex; align-items: flex-end; gap: 10px; }

/* Selected option in a Grouping/Statement dropdown (matches the Download control). */
.dropdown__item.is-selected { font-weight: 700; }

/* Quiet footnote beneath a statement (e.g. the July source-extract note). */
.stmt-footnote {
  margin: 12px 0 0; font-size: 11.5px; color: var(--text-faint);
  line-height: 1.5; max-width: 68ch;
}

/* Horizontally scrollable table wrapper (a wide export preview). */
.table-scroll { overflow-x: auto; }

/* Inline checkbox group (e.g. the journal-export status filter). */
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; min-height: 34px; }
.checks label {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  font-weight: 500; color: var(--text); text-transform: none; letter-spacing: 0;
}
.export-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* A flagged row (e.g. a day with a voucher gap). */
.data-table tbody tr.row-flag { background: var(--neg-bg); }

/* Monospace JSON before/after cell in the audit log, clipped with the full value on hover. */
.cell-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px;
  color: var(--text-muted); max-width: 320px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}

/* Simple pager for a paginated table. */
.pager { display: flex; gap: 12px; align-items: center; justify-content: flex-end;
  margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }

/* "How to read this" disclosure for the footnotes/legend. */
.howto { margin-top: 14px; }
.howto > summary { cursor: pointer; color: var(--text-muted); font-size: 12.5px;
  list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.howto > summary::-webkit-details-marker { display: none; }
.howto > summary::before { content: "▸"; color: var(--text-faint); }
.howto[open] > summary::before { content: "▾"; }
.howto__body { margin-top: 8px; }