/* ═══════════════════════════════════════════════════════════════════════════
   npo-accounting-v2 — "C2 · Slate Revised" design system (see DESIGN.md)
   Token-driven dual theme. Light = :root; dark = html[data-theme="dark"].
   The sidebar is DARK in both themes. Links + document references are BLUE.
   Compact ledger density: ~34px table rows, tabular numerals, right-aligned ₱.
   Selector contract preserved from v1 so all 500+ templates restyle in place.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* content — light theme (FLMFI palette: petrol-navy + sun gold on warm paper) */
  --bg: #f8fafc;                   /* slate-50 — original NPO canvas */
  --panel: #f1f5f9;                /* slate-100 */
  --text: #0f172a;                 /* slate-900 — headings and figures */
  --text-2: #475569;               /* body copy, a step softer than the heading */
  --muted: #64748b;                /* slate-500 */
  /* Hairlines carry a trace of the brand navy rather than neutral slate — the
     borders then belong to the palette instead of sitting beside it. Same
     lightness as the slate-200 they replace, so nothing gets heavier. */
  --line: rgba(0, 48, 64, .12);
  --row-line: rgba(0, 48, 64, .07);
  --row-hover: rgba(0, 48, 64, .035);
  --link: #294a70;                 /* HANAI navy — clickable refs (AA) */
  --brand: var(--link);            /* clickable reference numbers stay blue */
  /* FLMFI navy accent. Buttons use --accent (white text ~12:1 ✓);
     --accent-bright is the petrol for bars/focus; --accent-text the AA navy for status. */
  --accent: #294a70;               /* HANAI navy — primary buttons */
  --accent-hover: #1e3a5a;
  --accent-bright: #49688e;        /* mid-navy — non-text accents */
  --on-accent: #ffffff;
  --accent-soft: #eef3fa;          /* navy-050 — chip fill */
  --accent-text: #1e3a5a;          /* navy text/status (AA) */
  /* Status: emerald / amber / rose (original). Text tokens use the AA-dark step;
     the dots use the original brighter step. */
  --ok: #047857;       --ok-soft: #eaf5ee;      /* emerald-700 */
  --warn: #8a6300;     --warn-soft: #fdf3d6;    /* gold-amber (AA) */
  --danger: #b71a12;   --danger-soft: #fdeceb;  /* FLMFI red */
  --neutral: #64748b;  --neutral-soft: #f1f5f9;
  --dot-ok: #059669; --dot-warn: #d9a70f; --dot-danger: #e02020; --dot-neutral: #9aa39a;
  --info: #294a70;                 /* navy for KPI accents (AA on paper) */
  --input-bg: #ffffff;
  /* Shadows tinted the same way, so depth reads as the navy receding rather
     than a grey smudge. */
  --overlay-shadow: 0 18px 45px rgba(0, 48, 64, .20);
  --shadow-sm: 0 1px 2px rgba(0, 48, 64, .06);
  --shadow-card: 0 1px 3px rgba(0, 48, 64, .07);
  --shadow-pop: 0 12px 32px rgba(0, 48, 64, .16);
  --focus: var(--accent-bright);

  /* sidebar — original NPO navy-slate gradient, primary-blue active pill */
  --sb-bg-from: #294a70;
  --sb-bg-to: #1a3352;
  --sb-bg: #294a70;
  --sb-border: #3c5c85;
  --sb-item: #c2d0e2;
  --sb-hover-bg: #375a83;
  --sb-active-bg: #ffab1f;         /* gold-400 — the active row is gold-filled */
  --sb-active-text: #002a66;       /* navy-seal reads on the gold */
  --sb-heading: #93a9c6;           /* section labels — AA on the navy ground */
  --sb-pill: #294a70;              /* navy count pills (white text) */
  --sb-accent: #ffab1f;            /* gold, matching the active fill */

  /* geometry + type (original radii) */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --gutter: 22px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 14px;          /* screen body — print sets its own 12px */
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* FLMFI brand accents (theme-invariant) */
  --gold: #ffab1f; --gold-strong: #d9861a; --navy: #294a70; --red-flmfi: #e02020;
  --gold-300: #f8c171; --gold-400: #ffab1f; --gold-500: #f4a024; --gold-600: #d9861a;
  --gold-seal: #ddbe40; --gold-ink: #8a5a00; --navy-seal: #002a66;
  /* Cards, table bodies and the selected tab sit on white; the canvas stays
     slate-50 behind them, which is what gives the page its depth. */
  --surface: #ffffff;

  /* Type scale — ONE consistent 6-step ladder used app-wide (CSS + templates).
     Every font-size resolves to one of these; no ad-hoc in-between sizes.
       11 micro   · table headers, caps labels, kbd, badges, meta
       12 small   · secondary text, tabs, compact controls, .small
       13 body    · default prose, links, buttons, inputs, table cells, sidebar
       15 title   · card / section / report headings
       18 page    · page titles (h1)
       22 display · KPI values, big numbers  */
  --fs-micro: 11px;  --fs-small: 12px; --fs-body: 13px;
  --fs-title: 15px;  --fs-page: 18px;  --fs-display: 22px;

  /* original NPO palette scales (also back stray v1 references) */
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a;
  --primary-50: #eef3fa; --primary-100: #d6e2f1; --primary-500: #49688e;
  --primary-600: #294a70; --primary-700: #1e3a5a; --primary-800: #16293f;
  --emerald-50: #ecfdf5; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857;
  --amber-50: #fffbeb; --amber-600: #d97706; --amber-700: #b45309;
  --rose-50: #fff1f2; --rose-500: #f43f5e; --rose-600: #e11d48; --rose-700: #be123c;
}

html[data-theme="dark"] {
  /* navy-tinted dark ground so the content flows from the navy sidebar */
  --bg: var(--sb-bg-to);           /* match the slate sidebar (deep end #16202e) */
  --panel: var(--sb-bg-from);      /* raised surfaces (card headers/hovers) — sidebar slate #1a2332 */
  --text: #e6ebf3;
  --text-2: #a3b0c4;
  --muted: #8595ad;
  --line: #2a3649;
  --row-line: #1c2738;
  --row-hover: #1a2536;
  --link: #60a5fa;
  --accent: #0d5a6e;               /* petrol button — white text AA on dark */
  --accent-hover: #12708a;
  --accent-bright: #2a97b0;
  --accent-soft: #08313d;          /* deep petrol chip fill */
  --accent-text: #7fd3e6;          /* light petrol text/status on the dark ground (AA) */
  --ok: #34d399;       --ok-soft: #0d2a20;
  --warn: #fbbf24;     --warn-soft: #2a2113;
  --danger: #fb7185;   --danger-soft: #2b1620;
  --neutral: #8595ad;  --neutral-soft: #1c2738;
  --dot-ok: #34d399; --dot-warn: #fbbf24; --dot-danger: #fb7185; --dot-neutral: #64748b;
  --info: #60a5fa;                 /* blue KPI accents on the dark card */
  --input-bg: #0c1320;
  --surface: #1e3a5a;
  --overlay-shadow: 0 18px 45px rgba(0, 0, 0, .55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ── Reset / base ───────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: var(--font-size-base, 14px)/1.5 var(--font);
  color: var(--text);
  background: var(--bg);
}
img { max-width: 100%; }
/* Form controls don't inherit the family by default → they fall back to Arial,
   which trips design-font-drift. Force the system stack everywhere. */
button, input, select, textarea { font-family: inherit; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-soft); }

/* ── App layout ─────────────────────────────────────────────────────────── */
.app-layout { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
/* Full-width content: use the whole viewport (minus the sidebar) instead of
   capping at 1280px, and tighter top/bottom padding to lift content up. */
.page { flex: 1; padding: 14px var(--gutter) 32px; max-width: none; width: 100%; }

/* ── Sidebar (dark in BOTH themes) ──────────────────────────────────────── */
.sidebar {
  width: 250px; flex: 0 0 250px;
  background-color: var(--sb-bg);
  background-image: linear-gradient(180deg, var(--sb-bg-from), var(--sb-bg-to));
  border-right: 1px solid var(--sb-border);
  display: flex; flex-direction: column;
  min-height: 100vh; position: sticky; top: 0; height: 100vh;
}
.sb-logo { display: flex; align-items: center; gap: 10px; padding: 13px 14px 11px; }
.sb-logo-seal {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px;
  background: #fff; padding: 2px; object-fit: contain;
}
.sb-logo-text .name { color: #fff; font-family: var(--font-serif); font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.18; }
.sb-logo-text .sub { color: #cdd9de; font-size: 11.5px; line-height: 1.32; }
.sb-logo-text .sub2 { color: var(--sb-heading); font-size: 11px; line-height: 1.32; }
.sb-org-pill {
  margin: 0 12px 8px; padding: 4px 9px; border-radius: var(--radius-sm);
  background: var(--sb-hover-bg); display: flex; align-items: center; gap: 7px;
  color: var(--sb-item); font-size: 11px;
}
.sb-org-pill .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--ok); flex: 0 0 7px; }
.sb-org-pill .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; scrollbar-width: thin; scrollbar-color: #333845 transparent; }
.sb-nav::-webkit-scrollbar { width: 8px; }
.sb-nav::-webkit-scrollbar-thumb { background: #333845; border-radius: 99px; }
.sb-section-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--sb-heading); padding: 12px 8px 4px;
}
.sb-link {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; margin-bottom: 0; border-radius: var(--radius-sm);
  color: var(--sb-item); font-size: 13px; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.sb-link:hover { background: var(--sb-hover-bg); color: #e6e8ee; text-decoration: none; }
.sb-link.active { background: var(--sb-active-bg); color: var(--sb-active-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--sb-accent); }
.sb-link.active:hover { background: var(--sb-active-bg); }
.sb-link svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .9; }
.sb-link span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Clean rail (Juan-clean): per-item hover chevrons and the keyboard-shortcut
   hint pills are hidden — a calm icon + label list. The shortcuts still WORK:
   base.html's key handlers navigate independently of these visuals; only the
   clutter is removed. */
.sb-link > svg:last-child, .sb-link .chevron { display: none; }
.sb-link kbd, .sb-link .nav-kbd { display: none; }
/* Collapsible sidebar groups — ONE consistent pattern for every multi-item
   category (Donations, Accounting, Administration). A single-destination module
   renders as a plain .sb-link with no header. Header = bolder text + caret;
   caret points down when open, right when collapsed. */
.sb-group { margin-top: 2px; }
.sb-group-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; margin-top: 8px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: #cdd3e0; font: 700 11px var(--font);
  text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; text-align: left;
}
.sb-group-header:hover { background: var(--sb-hover-bg); color: #e6e8ee; }
.sb-group-header > svg:first-of-type { width: 15px; height: 15px; flex: 0 0 15px; opacity: .85; }
.sb-group-header > span:not(.sb-group-caret) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-group-caret { flex: 0 0 auto; display: flex; }
.sb-group-caret svg { width: 11px; height: 11px; transform: rotate(90deg); transition: transform .15s ease; opacity: .6; }
.sb-group-header.collapsed .sb-group-caret svg { transform: rotate(0deg); }
/* Grouped items sit subtly inset from the flush-left standalone links, so the
   hierarchy reads clearly (group children vs. top-level modules). */
.sb-group-body { display: flex; flex-direction: column; margin-left: 9px; padding-left: 7px; border-left: 1px solid #2a3143; }
/* Secondary labels nested inside a group (e.g. Accounting → Disbursement) sit
   tighter and slightly dimmer than a top-level group header. */
/* Nested category titles inside a group (Disbursement, Reports, …) are just
   labels — dim them well below the clickable items so they read as quiet
   dividers, not options. */
.sb-group-body .sb-section-label { padding: 8px 8px 3px; font-size: 11px; opacity: .45; }
.sb-user {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-top: 1px solid #262b37;
}
.sb-avatar {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-sm);
  background: var(--sb-active-bg); color: #fff; font-size: 11px; font-weight: 650;
  display: flex; align-items: center; justify-content: center; object-fit: cover; overflow: hidden;
}
.sb-user-info { min-width: 0; }
.sb-user-info .name { color: #e6e8ee; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-info .role { color: var(--sb-heading); font-size: 11px; }

/* collapse + mobile drawer */
.sidebar-toggle {
  position: fixed; left: 238px; top: 14px; z-index: 40;
  width: 24px; height: 24px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: left .2s ease; box-shadow: 0 1px 4px rgba(15,23,42,.08);
}
.sidebar-toggle:hover { color: var(--text); }
.sidebar-toggle svg { width: 13px; height: 13px; }
.sidebar-toggle .when-closed { display: none; }
html.sb-collapsed .sidebar { display: none; }
html.sb-collapsed .sidebar-toggle { left: 10px; }
html.sb-collapsed .sidebar-toggle .when-open { display: none; }
html.sb-collapsed .sidebar-toggle .when-closed { display: flex; }
.sb-backdrop { display: none; }
.mobile-nav-toggle { display: none; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 9px var(--gutter); border-bottom: 1px solid var(--line);
  background: var(--bg); position: sticky; top: 0; z-index: 30;
}
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); flex: 1; min-width: 0; }
.breadcrumb a { color: var(--muted); display: flex; align-items: center; }
.breadcrumb a:hover { color: var(--link); text-decoration: none; }
.breadcrumb a svg { width: 14px; height: 14px; }
.breadcrumb .sep { display: flex; opacity: .55; }
.breadcrumb .sep svg { width: 11px; height: 11px; }
.breadcrumb .current { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: 9px; }
.topbar-right .sep { width: 1px; height: 20px; background: var(--line); }
.topbar-user { display: flex; align-items: center; gap: 8px; }
.topbar-user .who { text-align: right; line-height: 1.25; }
.topbar-user .who .name { font-size: 12px; font-weight: 600; }
.topbar-user .who .role { font-size: 11px; color: var(--muted); }
.topbar-user .sb-avatar { background: var(--accent); }
.btn-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
}
.btn-icon:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.btn-icon svg { width: 15px; height: 15px; }
.notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px;
  border-radius: 99px; background: #b3261e; color: #fff;   /* fixed AA red, white text, both themes */
  font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; padding: 0 3px;
}
.notif-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--link); display: inline-block; }
.logout-btn {
  display: flex; align-items: center; gap: 6px; border: 0; background: transparent;
  color: var(--muted); font: 12px var(--font); cursor: pointer; padding: 5px 7px; border-radius: var(--radius-sm);
}
.logout-btn:hover { background: var(--panel); color: var(--text); }
.logout-btn svg { width: 14px; height: 14px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: flex; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: flex; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.sound-toggle .icon-sound-on { display: none; }
.sound-toggle .icon-sound-off { display: flex; }
.sound-toggle.is-on .icon-sound-on { display: flex; color: var(--link); }
.sound-toggle.is-on .icon-sound-off { display: none; }
.cmdk-hint {
  display: flex; align-items: center; gap: 7px; min-width: 190px;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--muted); font-size: 12px; cursor: pointer;
}
.cmdk-hint:hover { color: var(--text-2); }
.cmdk-hint kbd { font: 600 11px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; margin-left: auto; }

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
/* Hide the page title ONLY where it is the plain, redundant echo of the
   breadcrumb. A title that carries a status badge or an inline action/link
   (detail pages) is kept, so no status information is lost. */
.page-title:not(:has(.badge)):not(:has(.btn)):not(:has(a)) { display: none; }
.page-title h1 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.page-title .subtitle { display: none; }           /* v1 UI-cleanup parity */
/* Action buttons (Add / Import / Export …) stay right-aligned — alone on the row
   when the title is hidden, opposite the title when it is shown. */
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.help-text { display: none; }                       /* v1 UI-cleanup parity */

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font: 600 13px/1.4 var(--font); cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* A small lift on hover so a button answers the cursor. Kept to 1px and a soft
   shadow — this is a data application, not a landing page. */
.btn:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  text-decoration: none; box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
/* Tabs sit in a sticky strip; lifting them would fight the row they line up in. */
.tabs .btn:hover, .sm-tab:hover { transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; transition: none; }
}
.btn:active { background: var(--accent-hover); box-shadow: none; }
.btn svg { width: 13px; height: 13px; }
.btn-secondary { background: var(--bg); border-color: var(--line); color: var(--text-2); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--panel); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-card); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; }
.btn-ghost:hover { background: var(--panel); color: var(--text); box-shadow: none; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #a52222; border-color: #a52222; }
.btn-success { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-xs { padding: 4px 8px; font-size: 11px; gap: 4px; min-height: 24px; }
.btn-xs svg { width: 12px; height: 12px; }
/* Row-action links + tiny grid buttons keep a >=24px hit area (WCAG 2.5.8). */
.sm-table td a, .sm-table td button, table td .btn-xs, table td a { min-height: 24px; }
.actions .btn, .actions a, .actions button { min-height: 24px; }
/* Disabled controls: dim via a token color that still clears AA (not opacity,
   which drops muted text below contrast on the dark ground). */
.btn[disabled], .btn.pg-disabled { color: var(--muted); background: transparent; border-color: var(--line); pointer-events: none; filter: none; }
/* Clean like Juan: hide the [KEY] hint pills on page buttons and tabs — the
   shortcuts still work via the global key handlers, only the visual is removed.
   Kept: the ⌘K search hint (.cmdk-hint kbd), prose <kbd> in help/docs, and modal
   contextual hints (kbd.mk = Esc/Save shown only while a dialog is open). */
.btn kbd:not(.mk), .page-actions kbd:not(.mk),
.sm-tab kbd, .tabs .btn kbd:not(.mk) { display: none; }
.icon-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  color: var(--muted); border: 0; background: transparent; cursor: pointer;
}
/* WCAG 2.5.8: give icon-only interactive targets a >=24px hit area. */
.breadcrumb a { min-width: 24px; min-height: 24px; justify-content: center; }
.sm-table .actions-cell a, .sm-table .actions-cell button,
td .icon-action, td a.icon-action { min-width: 24px; min-height: 24px; }
.icon-action svg { width: 14px; height: 14px; }
.icon-action:hover { background: var(--panel); color: var(--text); }
.icon-action.edit:hover { color: var(--link); }
.icon-action.delete:hover { color: var(--danger); }
.icon-action.key:hover { color: var(--warn); }
.pill-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; border-radius: var(--radius-pill); padding: 3px 11px; font-size: 11px; font-weight: 600; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.pill-toggle.activate { color: var(--ok); border-color: var(--ok); }
.pill-toggle.activate:hover { background: var(--ok-soft); }
.pill-toggle.deactivate { color: var(--danger); border-color: var(--danger); }
.pill-toggle.deactivate:hover { background: var(--danger-soft); }

/* ── Cards (Juan: rounded, soft shadow, airier) ─────────────────────────── */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; box-shadow: var(--shadow-card); }
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 18px; background: transparent;
  border-bottom: 1px solid var(--line); border-radius: 0; flex-wrap: wrap;
}
.card-header h2 { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.card-body { padding: 18px; }
.card-table { overflow-x: auto; border-radius: 0 0 var(--radius) var(--radius); max-width: 100%; }
.card-table table { margin: 0; border: 0; }
/* Inside a card's own scroll container the sticky header pins to the CARD's
   top edge (top:0), not the viewport offset used for bare page tables. */
.card-table table thead th { top: 0; }

/* ── Tables (Juan: airier rows, soft header, clean hover) ───────────────── */
.page table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg); }
.page table th {
  text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--panel);
  white-space: nowrap;
}
/* A little extra breathing room at the table's outer edges. */
/* Edge cells keep a little more breathing room than the interior, but not the
   22px that was pushing every table wider than its data. */
.page table th:first-child, .page table td:first-child { padding-left: 14px; }
.page table th:last-child,  .page table td:last-child  { padding-right: 14px; }
/* Sort links + inline reference links fill a >=24px hit area (WCAG 2.5.8). */
.page table th a { display: inline-flex; align-items: center; min-height: 24px; }
a.je-ref, a.ref-link { display: inline-flex; align-items: center; min-height: 24px; }
/* Sticky column headers: pin below the real measured nav chrome
   (sticky_nav.js publishes --nav-bottom on .page; 47px topbar fallback).
   Inside a card's own scroll container they pin to the card top instead. */
.page table thead th { position: sticky; top: var(--nav-bottom, 47px); z-index: 5; }
.page .card-table table thead th { top: 0; }
table.no-sticky-thead thead th, .no-sticky-thead table thead th { position: static; top: auto; }
.page table td { padding: 6px 12px; border-bottom: 1px solid var(--row-line); font-variant-numeric: tabular-nums; vertical-align: middle; }
/* Tight rows still keep interactive targets at the 24px WCAG-2.5.8 minimum. */
.page table td a, .page table td button:not(.badge) { display: inline-flex; align-items: center; min-height: 24px; }
/* Opt-in: every body cell stays on ONE line (the card scrolls horizontally). */
.page table.oneline td { white-space: nowrap; }
/* Note popover — the small card shown by a Notes "View" button (native popover),
   centred on screen with a dimmed backdrop. */
.note-pop { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
  max-width: 400px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-pop); background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.55; }
.note-pop::backdrop { background: rgba(3, 20, 27, .28); }
.note-pop-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px; }
.page tbody tr { transition: background .12s ease; }
.page tbody tr:hover { background: var(--row-hover); }
.page table tr:last-child td { border-bottom: 0; }
.sm-table td.ell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-table td.ell .muted { font-size: 12px; }
.sm-table .actions-cell { white-space: nowrap; text-align: right; }
.sm-table .actions-cell .btn { margin-left: 4px; }
td.num, th.num, td.amt, th.amt, .text-right { text-align: right; }
/* `.page table th` (0,1,2) outranks `th.num` (0,1,1), so numeric HEADERS were
   losing to the generic left-align and sat left of their own right-aligned
   figures in every table in the app. Match the header's specificity so a
   column and its heading line up. Tabular figures keep the digits in columns
   so totals sit under the amounts they add up. */
.page table th.num, .page table th.amt { text-align: right; }
.page table td.num, .page table td.amt,
.page table th.num, .page table th.amt { font-variant-numeric: tabular-nums; }
.pos { color: var(--ok); }
.neg { color: var(--danger); }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ── Status badges → dot + text (C2: never filled pills) ────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--text-2);
  padding: 1px 0; border-radius: 0; background: transparent; white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--dot-neutral); flex: 0 0 7px; }
.badge-posted::before, .badge-active::before, .badge-paid::before,
.badge-rca-apl::before, .badge-rca-liq::before { background: var(--dot-ok); }
.badge-posted, .badge-active, .badge-paid, .badge-rca-apl, .badge-rca-liq { color: var(--ok); }
.badge-submitted::before, .badge-partial::before, .badge-rca-fa::before,
.badge-rca-apu::before { background: var(--dot-warn); }
.badge-submitted, .badge-partial, .badge-rca-fa, .badge-rca-apu { color: var(--warn); }
.badge-rca-auu::before { background: var(--accent); }
.badge-rca-auu { color: var(--accent-text); }
.badge-cancelled::before, .badge-inactive::before, .badge-rca-cancelled::before,
.badge-rca-disapproved::before { background: var(--dot-danger); }
.badge-cancelled, .badge-inactive, .badge-rca-cancelled, .badge-rca-disapproved { color: var(--danger); }
.badge-draft::before, .badge-rca-draft::before { background: var(--dot-neutral); }
.badge-draft, .badge-rca-draft { color: var(--muted); }
.badge-rca-auu.badge, .badge * { font-variant-numeric: tabular-nums; }
.badge-role-super, .badge-role-accountant, .badge-role-bookkeeper, .badge-role-viewer {
  color: var(--text-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 9px;
}
.badge-role-super::before { background: var(--accent); }
.badge-role-accountant::before { background: var(--ok); }
.badge-role-bookkeeper::before { background: var(--warn); }
.badge-role-viewer::before { background: var(--neutral); }

/* ── KPI cards ──────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 12px; }
.grid-2 { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
/* The KPI strip holds three fixed cards plus one per donor-restriction class
   that actually received money, so its length changes with the data. A fixed
   four-column grid left a quarter of the row empty whenever nothing restricted
   came in; auto-fit spreads whatever is there across the full width. */
.kpi-row { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Grid children default to min-width:auto and expand to their widest content
   (a wide table), overflowing the row. min-width:0 lets .card-table scroll
   internally instead of stretching the card past the viewport. */
.grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.kpi { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-card); }
.kpi .kpi-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.kpi .kpi-value { display: block; font-size: 22px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .kpi-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── Filters / toolbars / tabs ──────────────────────────────────────────── */
.toolbar, .sm-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sm-toolbar .spacer { flex: 1; }
.toolbar form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar input, .sm-filters input { min-width: 170px; }
.sm-filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.sm-filters .field { margin: 0; }
.sm-filters label { font-size: 11px; }
.sm-tabbar, .tabs {
  display: flex; gap: 2px; align-items: flex-end; flex-wrap: wrap;
  /* The rule the folder tabs stand on: gold on a primary strip, quiet slate on
     a secondary one, so two stacked strips stay distinguishable. */
  border-bottom: 1px solid var(--gold);
  margin-bottom: 14px;
  /* sticky (not relative): sticky_nav.js sets `top` to stack strips below the
     header. With position:relative that `top` DISPLACES the strip out of its
     flow slot and later content renders underneath it — the overlap bug. */
  position: sticky; top: var(--nav-bottom, 47px); z-index: 12; background: var(--bg);
}
/* Folder tabs. A rule runs under the whole strip and the selected tab is a
   bordered folder whose bottom edge is open, so it reads as the front of the
   page below it. Inactive tabs stay plain labels — no box, no fill. */
.sm-tab, .tabs .btn, .tabs > .btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  font: 600 13px var(--font); text-decoration: none; cursor: pointer;
  /* Sits each tab down over the strip's rule so the selected one can break it. */
  margin-bottom: -1px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sm-tab svg { width: 13px; height: 13px; }
/* Hover: the pill fades in under the cursor and the label darkens to full ink.
   Only the tabs you can travel to — the one you are on is already filled. */
.sm-tab:hover, .tabs .btn:not(.btn-secondary):hover {
  background: var(--panel); color: var(--text); border-color: var(--line);
  text-decoration: none; filter: none;
}
/* Active tab: soft teal pill — a generic segmented-control pattern.
   The selector used to be :not(.btn-secondary), which filled every tab EXCEPT
   the current one: the tab partials mark the active tab with `btn-secondary`
   and the rest with `btn-ghost`, so the highlight sat on everywhere you were
   not. Resting borders on all of them hid it. */
.sm-tab.active, .tabs .btn.btn-secondary {
  /* The selected folder takes the page's own background and opens at the
     bottom, breaking the rule so the tab joins the content under it. Weight
     stays identical to an inactive tab — colour and border carry the state —
     so selecting one never changes its width and the strip never shifts. */
  background: var(--bg); color: var(--text);
  border-color: var(--line); border-bottom-color: var(--bg);
}
.sm-tab.active:hover, .tabs .btn.btn-secondary:hover {
  background: var(--accent-soft); color: var(--accent-text);
}
.sm-subtabs { display: flex; gap: 5px; flex-wrap: wrap; margin: -6px 0 12px; }
.tabs.subtabs, .sm-subtabs { border-bottom-color: var(--line); }

/* HR nav now uses the app's standard two-level folder tabs (.tabs .btn.btn-xs +
   .tabs.subtabs) like every other module — no bespoke component. */
.tab-more { position: relative; }
.tab-more-btn { display: inline-flex; align-items: center; gap: 5px; }
.tab-more-btn.is-active-parent { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.tab-more-caret { display: inline-flex; transition: transform .15s ease; }
.tab-more.open .tab-more-caret { transform: rotate(180deg); }
.tab-more-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 45;
  min-width: 200px; padding: 5px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--overlay-shadow);
}
.tab-more.open .tab-more-menu { display: flex; flex-direction: column; gap: 2px; }
.tab-more-menu > .btn, .tab-more-menu > .btn.btn-secondary { justify-content: flex-start; border: 0; background: transparent; color: var(--text-2); width: 100%; }
.tab-more-menu > .btn:hover { background: var(--panel); color: var(--text); filter: none; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: 12px; min-width: 0; }
/* Inside a form field the control fills its column: a grid of half-width
   inputs with full-width labels above them reads as a ragged edge. */
.field > input, .field > select, .field > textarea { width: 100%; box-sizing: border-box; }
.field > label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.field ul { list-style: none; }
.field ul li label { font-weight: 400; display: flex; gap: 6px; align-items: center; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="search"], input[type="url"], input[type="tel"],
select, textarea {
  font: 13px var(--font); color: var(--text);
  background: var(--input-bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 5px 9px; transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 22%, transparent);
}
input[disabled], select[disabled], textarea[disabled] { opacity: .55; }
/* ── Selection controls ───────────────────────────────────────────────────
   Minimal tick box: a 16px square, thin border, filled with the accent and a
   white check only when it is on. Nothing else — no gradient, no inner shadow,
   no oversized native chrome.

   The control used to be forced to 24x24 to satisfy the WCAG 2.5.8 target
   floor, which is what made it look heavy. The floor is now met by an
   invisible 24px pseudo-element centred on the box, so the tick box is small
   to LOOK at without being small to HIT.

   `appearance:none` also stops the browser drawing the indeterminate state, so
   it is painted here explicitly — four bulk-select tables depend on it (RCA
   Drafts, For Approval, the RCA form, and mobile Approvals). */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: 0 0 16px;
  width: 16px; height: 16px; min-width: 16px; min-height: 16px;
  margin: 0; padding: 0;
  border: 1.5px solid var(--line); border-radius: 4px;
  background-color: var(--input-bg);
  background-repeat: no-repeat; background-position: center;
  cursor: pointer; vertical-align: middle;
  transition: background-color .12s ease, border-color .12s ease;
}
/* Invisible hit target — keeps the 24px WCAG floor without painting anything. */
input[type="checkbox"]::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px; transform: translate(-50%, -50%);
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--accent-bright); }
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
  background-color: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-5.9'/%3E%3C/svg%3E");
}
input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.6' y='7.1' width='8.8' height='1.8' rx='.9' fill='%23ffffff'/%3E%3C/svg%3E");
}
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* Radios keep the native control (accent-coloured) but match the tick box's
   size and hit area so a form mixing the two stays visually even. */
input[type="radio"] {
  accent-color: var(--accent); position: relative;
  width: 16px; height: 16px; min-width: 16px; min-height: 16px; margin: 0;
  cursor: pointer; vertical-align: middle;
}
input[type="radio"]::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px; transform: translate(-50%, -50%);
}
label:has(> input[type="radio"]), label:has(> input[type="checkbox"]) { min-height: 24px; }

/* Backgrounds are dropped by default when printing, which would print every
   ticked box as an empty square. */
@media print {
  input[type="checkbox"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Standalone "view more" / drill links inside cards fill a 24px hit area. */
.card-body > a, .card-header > a, .card-footer > a, .kpi a, td > a.gl-drill { min-height: 24px; display: inline-flex; align-items: center; }
.card-footer { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 14px 12px; }

/* ── Reskin: surfaces, headings and focus ─────────────────────────────────
   Cards sit on white against the tinted canvas, with a slightly larger radius
   and the brand-tinted hairline. Section headings pick up the small-caps,
   letter-spaced treatment the reference uses for its eyebrow labels, which is
   what makes a dense screen scannable without adding rules and boxes. */
.card { border-radius: var(--radius-lg); border-color: var(--line); }
.card-header h2, .card-header h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2);
}
.card-header .subtitle { font-size: 12px; color: var(--muted); }
/* KPI figures carry the weight instead — the label above them is quiet. */
.kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.kpi-value { letter-spacing: -.02em; }
.kpi { border-radius: var(--radius-lg); border-color: var(--line); }

/* One focus treatment everywhere, tinted like the rest. */
:where(a, button, .btn, input, select, textarea):focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 26%, transparent);
  border-radius: var(--radius-sm);
}
.errors, .errorlist { color: var(--danger); font-size: 12px; margin: 3px 0; list-style: none; }
.messages { list-style: none; margin-bottom: 14px; }
.msg { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 6px; border: 1px solid var(--line); background: var(--panel); }
.msg-success { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); color: var(--ok); }
.msg-error { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); color: var(--danger); }
.msg-warning { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); color: var(--warn); }
.msg-info { border-color: color-mix(in srgb, var(--link) 30%, transparent); background: color-mix(in srgb, var(--link) 8%, var(--bg)); color: var(--link); }

/* ── States ─────────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 36px 20px; color: var(--muted); }
.empty-state .empty-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.empty-state .btn { margin-top: 10px; }
.skeleton-row td { color: transparent; }
.skeleton-row td::after { content: ""; display: block; height: 10px; border-radius: 4px; background: var(--row-line); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.loading-note { color: var(--muted); font-size: 12px; padding: 10px 0; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination-bar { display: flex; align-items: center; gap: 10px; padding: 10px 2px; flex-wrap: wrap; }
.pg-info { flex: 1; }
.pg-nav { display: flex; gap: 4px; }
.pg-size { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

/* ── Charts (deck_charts.py inline SVG) ─────────────────────────────────── */
/* SVG <text> has no font-family of its own → force the system stack (kills the
   Arial drift) and floor the smallest labels to 11px. */
svg.chart text, svg.chart tspan { font-family: var(--font); }
svg.chart text[font-size="9.5"], svg.chart text[font-size="10"] { font-size: 11px; }

/* ── GL drill / je popover / refs ───────────────────────────────────────── */
.gl-drill { border-bottom: 1px dotted var(--link); color: var(--link); cursor: pointer; }
.gl-drill code { font-family: var(--mono); font-size: 12px; }
.gl-drill:hover { border-bottom-style: solid; text-decoration: none; }
.je-ref { color: var(--link); }
.je-ref .je-ref-code { font-family: var(--mono); font-weight: 600; font-size: 12px; }
.je-ref:hover .je-ref-code { text-decoration: underline; text-underline-offset: 2px; }
.je-ref-tag { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.je-ref-jv a { color: var(--link); font-family: var(--mono); font-size: 12px; }
.je-hover-wrap { position: relative; }
.je-popover {
  display: none; position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  min-width: 330px; max-width: 460px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--overlay-shadow); font-size: 12px;
}
.je-hover-wrap.open .je-popover { display: block; }
.je-hover-trigger[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-text); }
.je-popover-head { font-weight: 650; margin-bottom: 6px; }
.je-popover-meta { color: var(--muted); margin-bottom: 8px; }
.je-popover-meta strong { color: var(--text-2); }
.je-popover-table { width: 100%; border-collapse: collapse; }
.je-popover-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: left; padding: 3px 8px 3px 0; }
.je-popover-table th.num { text-align: right; }
.je-popover-table td { padding: 3px 8px 3px 0; border-top: 1px solid var(--row-line); }
.je-popover-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.je-popover-table .acct-code { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.je-popover-block + .je-popover-block { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }

/* ── ⌘K palette ─────────────────────────────────────────────────────────── */
#cmdk-backdrop { position: fixed; inset: 0; background: rgba(10, 12, 18, .45); z-index: 98; display: none; }
#cmdk {
  position: fixed; z-index: 99; top: 12vh; left: 50%; transform: translateX(-50%);
  width: min(540px, calc(100vw - 32px)); display: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--overlay-shadow); overflow: hidden;
}
#cmdk input { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 14px; font-size: 13px; background: var(--bg); }
#cmdk input:focus { box-shadow: none; }
#cmdk-list { max-height: 320px; overflow-y: auto; padding: 6px; }
#cmdk-list .cmdk-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--radius-sm); color: var(--text-2); cursor: pointer; font-size: 13px; }
#cmdk-list .cmdk-item .sec { margin-left: auto; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
#cmdk-list .cmdk-item.sel { background: var(--accent-soft); color: var(--text); }
#cmdk-list .cmdk-none { padding: 14px; color: var(--muted); font-size: 13px; }

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--panel); padding: 20px; }
.login-card {
  width: min(380px, 100%); background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px; padding: 26px 26px 22px;
}
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.login-brand .sq {
  width: 38px; height: 38px; border-radius: var(--radius);
  background: var(--sb-bg); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.login-brand .who { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.login-brand .who .sub { font-size: 11px; font-weight: 400; color: var(--muted); }
.login-card .field input { width: 100%; padding: 7px 10px; }
.login-card .btn { width: 100%; justify-content: center; padding: 8px 12px; font-size: 13px; margin-top: 4px; }

/* ── 24px list avatar: photo, or the shield placeholder at the same size ── */
.avatar-24 { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--slate-200); flex-shrink: 0; }
.avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--panel); color: var(--muted); }
.avatar-ph svg { width: 14px; height: 14px; }

/* ── hanai wordmark (trademark of HANAI Systems; reference hanai.dev) ─────── */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2");   /* SIL OFL 1.1, see fonts/SpaceGrotesk-OFL.txt */
}
.hanai-mark {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  color: #39ff14 !important; font-size: 22px; display: inline-block;
  -webkit-font-smoothing: antialiased; text-decoration: none;
}
.hanai-mark.chip {                          /* on a light surface: keep the neon on its navy ground */
  background: #0b1326; padding: .18em .42em .22em; border-radius: 6px;
}
.hanai-mark.sm { font-size: 14px; }
.hanai-mark.lg { font-size: 28px; }
html[data-theme="dark"] .hanai-mark.chip { background: transparent; padding: 0; border-radius: 0; }
@media print { .hanai-mark, .hanai-mark.chip { color: #000 !important; background: transparent; padding: 0; } }

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* Pinned to the bottom of the window like the topbar is to the top, so the
   brand line and copyright stay in view while a long page scrolls. */
.footer-bar {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px var(--gutter); border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11px;
  position: sticky; bottom: 0; z-index: 30; background: var(--bg);
}

/* ── Reports / print ────────────────────────────────────────────────────── */
.report-header { text-align: center; margin-bottom: 16px; }
.report-header h1 { font-size: 15px; font-weight: 700; }
.report-header h2 { font-size: 13px; font-weight: 600; color: var(--text-2); }
.report-header .subtitle { font-size: 12px; color: var(--muted); }
.print-area { background: #fff; color: #000; }
.print-area table { font-size: 12px; }
.print-area table th { background: #fff; color: #000; position: static; }
@media print {
  :root, html[data-theme="dark"] {
    --bg: #fff; --panel: #fff; --text: #000; --text-2: #000; --muted: #000;
    --line: #bbb; --row-line: #ddd; --link: #000;
  }
  /* Every printable form / report prints in pure black ink. */
  .page, .page *, .print-area, .print-area *,
  .report-header, .report-header * { color: #000 !important; }
  .page a, .page .btn, .page button, .page code, .page .badge,
  .print-area a, .print-area .btn, .print-area code,
  .print-form a, .print-form .btn, .print-form code { color: #000 !important; }
  body { background: #fff !important; font-size: 12px; }
  .sidebar, .topbar, .footer-bar, .sidebar-toggle, .sb-backdrop, .mobile-nav-toggle,
  .page-actions, .pagination-bar, .no-print, .messages, .theme-toggle, .cmdk-hint,
  /* Tab bars are navigation, never content — they were previously only
     un-stuck for print, so every printable page printed its nav above the
     letterhead. */
  .tabs, .subtabs, .sm-tabbar, .hr-tabbar, .hr-subbar,
  #cmdk, #cmdk-backdrop { display: none !important; }
  .page { padding: 0; max-width: none; }
  .page table thead th { position: static; }
  .card { border: 0; }
  /* The gold block at the head of a card bar is a screen accent. In print it
     lands as a grey slab over the first letter of the heading, so drop it and
     take back the space it reserved. */
  .card-header { padding-left: 0; background: transparent; }
  .card-header::before { display: none; }
  .tab-more { display: none !important; }
  .gl-drill { border-bottom: 0; color: #000 !important; }
  a { color: #000 !important; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media screen and (max-width: 860px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 60; height: 100vh;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  html.sb-mobile-open .sidebar { transform: translateX(0); }
  html.sb-collapsed .sidebar { display: flex; }
  .sidebar-toggle { display: none; }
  .sb-backdrop { position: fixed; inset: 0; background: rgba(10, 12, 18, .5); z-index: 55; }
  html:not(.sb-mobile-open) .sb-backdrop { display: none; }
  html.sb-mobile-open .sb-backdrop { display: block; }
  .mobile-nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text-2); cursor: pointer;
  }
  .mobile-nav-toggle svg { width: 16px; height: 16px; }
  .cmdk-hint { min-width: 0; }
  .cmdk-hint .cmdk-placeholder { display: none; }
  .topbar { padding: 8px 14px; }
  .page { padding: 14px 14px 40px; }
  .footer-bar { padding: 10px 14px; }
  .page table thead th { top: 45px; }
}
@media screen and (max-width: 620px) {
  /* Collapse the topbar to icons so nothing overflows the viewport. */
  .logout-btn span { display: none; }
  .logout-btn { padding: 5px; }
  .cmdk-hint .cmdk-placeholder { display: none; }
  .cmdk-hint { min-width: 0; padding: 5px 8px; }
}
@media screen and (max-width: 520px) {
  .topbar-user .who { display: none; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-actions { justify-content: flex-start; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Optional electronic signature offered beside a Fund Request's submit button.
   Deliberately quiet: signing is a choice, not a step, so it must not read as
   a required field or compete with the submit action. */
.e-sign-opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--slate-600); cursor: pointer;
  user-select: none; white-space: nowrap;
}
.e-sign-opt input { margin: 0; cursor: pointer; }
.e-sign-opt:hover { color: var(--slate-800); }
.e-sign-inline { font-size: 11px; margin-right: 4px; }
/* Recorded signature, shown once a request carries one. */
.e-signed {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--emerald-700);
}

/* ── Sign-in front door ───────────────────────────────────────────────────
   A brand panel beside the form. The layout vocabulary — eyebrow label with a
   short rule, display heading with one accented line, pill button — is the
   pattern modern product sites use, in FLMFI's own navy and gold. It applies
   to this page ONLY: the ledger screens behind it stay dense on purpose,
   because a trial balance is read, not browsed. */
.signin {
  min-height: calc(100vh - 40px);
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  align-items: center; gap: 64px;
  max-width: 1140px; margin: 0 auto; padding: 40px 28px;
  /* A soft wash rather than flat grey, so the page has some depth behind the card. */
  background:
    radial-gradient(60rem 40rem at 8% 12%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%),
    radial-gradient(52rem 34rem at 92% 88%, color-mix(in srgb, var(--navy) 10%, transparent), transparent 60%);
}
.signin-brand .eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-strong); margin-bottom: 18px;
}
.signin-brand .eyebrow .rule { width: 26px; height: 2px; background: var(--gold-strong); flex: 0 0 26px; }
.signin-brand h1 {
  margin: 0 0 18px; font-size: clamp(30px, 4vw, 46px); line-height: 1.1;
  font-weight: 700; letter-spacing: -0.02em; color: var(--navy);
}
.signin-brand h1 .accent { color: var(--gold-strong); }
.signin-brand p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.signin-facts {
  display: flex; gap: 34px; margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.signin-facts strong { display: block; font-size: 17px; color: var(--navy); }
.signin-facts span { font-size: 12px; color: var(--muted); }

.signin-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 26px 28px; box-shadow: 0 18px 40px -24px rgba(41, 74, 112, .35);
}
.signin-mark { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.signin-mark img { border-radius: 8px; object-fit: contain; }
.signin-mark .who { font-weight: 700; font-size: 14px; line-height: 1.15; color: var(--text); }
.signin-mark .sub { font-weight: 500; font-size: 11px; color: var(--muted); }
.signin-card h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
/* The two credential fields fill the card. They were falling back to the
   browser's default input width — about 177px inside a 430px card — which left
   them floating beside a full-width Sign in button. Bigger type and a taller
   box too: this is the one form every user meets, often on a phone. */
.signin-card .field { margin-bottom: 14px; }
.signin-card .field > label { font-size: 13px; margin-bottom: 6px; }
.signin-card .field > input {
  width: 100%; display: block;
  padding: 10px 12px; font-size: 15px; border-radius: var(--radius);
}
/* Icon-only row action: a square tap target the same height as the text
   buttons it replaces, so an actions column keeps its rhythm. Every use must
   carry a title and aria-label — the glyph is not the label. */
/* Hover label for an icon-only control. The native `title` tooltip takes about
   a second to appear and renders in the OS style; this shows at once and reads
   as part of the app. The accessible name stays on aria-label — this is a
   visual affordance, not a replacement for it. */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent);
  font: 600 11px/1 var(--font); letter-spacing: .01em;
  padding: 4px 7px; border-radius: var(--radius-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
  z-index: 30;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tip::after { transition: none; } }

.btn-icon-xs {
  padding: 4px; width: 24px; height: 24px; min-width: 24px;
  justify-content: center; border-radius: var(--radius-pill);
}
.btn-icon-xs svg { width: 14px; height: 14px; }
/* Flex rather than inline: inline elements inherit the whitespace between the
   tags as a real gap, which was spreading three icons across ~90px. Flex drops
   that and lets the spacing be stated once. */
.actions-cell {
  white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.actions-cell form { display: inline-flex; margin: 0; }

.btn-pill {
  width: 100%; justify-content: center; padding: 11px 20px;
  border-radius: 999px; font-weight: 600;
}
/* --navy and --gold-strong are fixed brand colours, not theme tokens, so on the
   dark canvas the heading rendered near-black on near-black. The type flips to
   the theme's own text colour; the gold accent reads on both and stays. */
html[data-theme="dark"] .signin-brand h1,
html[data-theme="dark"] .signin-facts strong { color: var(--text); }
html[data-theme="dark"] .signin-brand .eyebrow,
html[data-theme="dark"] .signin-brand h1 .accent { color: var(--gold); }
html[data-theme="dark"] .signin-brand .eyebrow .rule { background: var(--gold); }

@media (max-width: 900px) {
  /* Phone and tablet: the form is what you came for, so it leads. */
  .signin { grid-template-columns: 1fr; gap: 30px; padding: 26px 18px; min-height: 0; }
  .signin-card { order: -1; }
  .signin-facts { gap: 22px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HANAI skin — the shell as it stands on :8560.
   Navy sidebar with a gold-filled active row, a 56px white topbar, a bolder
   page title, white cards with a gold block at the head of every card bar,
   and pill buttons in the navy. Everything here re-points existing selectors;
   no template markup changes, so all 500+ pages restyle in place.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar { width: 256px; flex: 0 0 256px; border-right: 0; }
.sb-nav { padding: 4px 8px 8px; }

.sb-link {
  gap: 10px;
  padding: 2.5px 12px;
  margin-bottom: 2.5px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  transition: background 120ms, color 120ms;
}
.sb-link:hover { background: var(--sb-hover-bg); color: #fff; }
/* Gold fill, navy type — the site's active nav item. No inset bar: the fill
   already carries the state, and the bar only muddied the gold. */
.sb-link.active,
.sb-link.active:hover,
.sb-link.active:focus {
  background: var(--sb-active-bg); color: var(--sb-active-text);
  font-weight: 600; box-shadow: none;
}
.sb-link.active svg { opacity: 1; }

/* A band label is scaffolding, not a destination: findable when the eye goes
   looking, quiet the rest of the time. */
.sb-section-label {
  font: 500 10px var(--font);
  text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255, 255, 255, .34);
  padding: 10px 12px 6px; margin: 0;
}
/* The collapsible groups (Donations, Accounting, Administration) are
   destinations — you tap them — so they read bold and white. */
.sb-group { margin-top: 0; }
.sb-group-header {
  width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left;
  font: 700 11px var(--font); text-transform: uppercase; letter-spacing: .06em;
  color: #fff; padding: 10px 12px 6px; margin: 0;
}
.sb-group-header:hover { color: #fff; background: var(--sb-hover-bg); }
.sb-avatar { background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-seal) 55%, var(--gold-600) 100%); color: var(--navy-seal); }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
  height: 56px; padding: 0 24px; gap: 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 0 var(--slate-100), 0 1px 3px 0 rgba(0, 0, 0, .04);
}

/* ── Page heading ────────────────────────────────────────────────────────── */
.page-title h1 {
  font-family: var(--font);
  font-size: 21px; font-weight: 750; letter-spacing: -.02em;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border-radius: var(--radius-lg); }
/* Gold block at the left of the bar, as on the section headings. The bar
   rounds to follow the card's top corners — do NOT clip it with
   `overflow: hidden` on .card, which becomes a scroll container and silently
   kills every sticky table header inside. */
.card-header {
  position: relative;
  padding: 10px 14px 10px 18px;
  background: var(--panel);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.card-header::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--gold-400);
  border-top-left-radius: var(--radius-lg);
}
.card-header h2 { color: var(--primary-700); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.page table { background: var(--surface); }
.page table th { background: var(--panel); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { padding: 6px 11px; font: 600 12px/1.4 var(--font); gap: 5px; }
.btn-secondary { background: var(--surface); color: var(--slate-700); border-color: var(--line); font-weight: 500; }
.btn-xs { padding: 3px 8px; font-size: 11px; gap: 4px; box-shadow: none; }

/* The selected folder tab sits on white, like the card it fronts. */
.sm-tab.active, .tabs .btn.btn-secondary {
  background: var(--surface); border-bottom-color: var(--surface);
  color: var(--primary-700);
}

/* Dark theme keeps the navy shell but drops the paper-white surfaces. */
html[data-theme="dark"] .card-header h2,
html[data-theme="dark"] .tabs .btn.btn-secondary { color: var(--text); }

/* ── Tabs: :8560's metrics exactly — small, plain labels on a gold rule ───── */
.tabs { padding-top: 8px; }
.sm-tab, .tabs .btn, .tabs > .btn {
  padding: 3px 8px; gap: 4px;
  font-size: 11px; font-weight: 600;
}
.tabs .btn svg { width: 11px; height: 11px; }
/* Hover lifts the label onto a quiet slate fill — the cue :8560 gives when the
   cursor lands on an unselected tab. */
.tabs .btn:not(.btn-secondary):hover {
  background: var(--slate-100); color: var(--slate-800);
}
.tabs.subtabs .btn { font-size: 11px; padding: 4px 9px; }

/* ── Cards and tables at :8560's metrics ─────────────────────────────────── */
.card { border-radius: 14px; }
.card-header { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.card-header::before { border-top-left-radius: 14px; }
.card-header h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.page table th { background: var(--bg); padding: 6px 12px; }
.page table td { padding: 6px 12px; }
.page table th:first-child, .page table td:first-child { padding-left: 14px; }
.page table th:last-child,  .page table td:last-child  { padding-right: 14px; }

/* ── Page heading: the title leads the page again, as it does on :8560 ────── */
.page-title { display: flex !important; flex-direction: column; gap: 1px; }
.page-title h1 { font-size: 21px; font-weight: 750; letter-spacing: -.02em; }



/* The view switch at the foot of the sidebar. An approver chose "Approvals
   only" at the door; this is how they change their mind without signing out,
   so it reads as a quiet link rather than an action they must take. */
.sb-focus { margin: 10px 12px 4px; }
.sb-focus-btn {
  width: 100%; background: none; border: 1px dashed rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.78); font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; min-height: 34px;
}
.sb-focus-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }