/* ==== app.css (9121 lines) ==== */
/* ============================================================
   Poonam Cargo Movers - UI styles (zero external deps, fully offline)
   ============================================================ */

:root {
  /* ---------------------------------------------------------------
     SINGLE SOURCE OF TRUTH - light-theme design tokens.
     Consolidated from 13 stacked :root layers (app.css, ui-refresh,
     premium-ui, fast-ui, cmd + shadcn passes). Values preserve the
     previously-winning cascade; the brand accent is pinned to the
     teal set. Dark theme lives in the html[data-theme="dark"] rules
     below and is untouched.
     --------------------------------------------------------------- */
  --accent-line: #5fbdb4;
  --bg: #f3f5f9;
  --surface-tint: #dbeafe;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
  --accent-strong: #1d4ed8;
  --info: #2563eb;
  --info-soft: #dbeafe;
  --erp-purple: #7c3aed;
  --erp-purple-soft: #ede9fe;
  --erp-cyan: #0891b2;
  --erp-cyan-soft: #cffafe;
  --erp-pink: #db2777;
  --erp-pink-soft: #fce7f3;
  --brand-grad: linear-gradient(135deg, #2563eb, #7c3aed);
  /* The three parts of a customer's bill format, on the "Check columns"
     screen: headings, trip rows, totals row. Tints rather than outlines - an
     outline there fights the sheet's own gridlines and both get harder to
     read. Tokens because a hex cannot answer the dark theme. */
  --format-head: #e8eefb;
  --format-trip: #f2f8f2;
  --format-total: #fdf3e3;
  --radius: 8px;
  --premium-bg: #f3f5f9;
  --premium-bg-soft: #eef1f6;
  --premium-panel: #ffffff;
  --premium-panel-2: #f8fafc;
  --premium-ink: #0f172a;
  --premium-muted: #475569;
  --premium-line: #e2e8f0;
  --premium-line-strong: #cbd5e1;
  --premium-accent: #2563eb;
  --premium-accent-2: #7c3aed;
  --premium-warn: #d97706;
  --premium-good: #16a34a;
  --premium-danger: #dc2626;
  --premium-shadow: 0 8px 30px rgba(15, 23, 42, .12);
  --premium-shadow-soft: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .05);
  --pcm-bg-fast: #f3f5f9;
  --pcm-panel-fast: #ffffff;
  --pcm-line-fast: #e2e8f0;
  --pcm-ink-fast: #0f172a;
  --pcm-muted-fast: #64748b;
  --pcm-teal-fast: #2563eb;
  --pcm-blue-fast: #2563eb;
  --pcm-shadow-fast: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .05);
  --m-ease: cubic-bezier(.2, .8, .2, 1);
  --teal: #0d9488;
  --teal-soft: #ccfbf1;
  --lime: #65a30d;
  --lime-soft: #ecfccb;
  --safety: #ea580c;
  --safety-soft: #ffedd5;
  --cta-grad: linear-gradient(135deg, var(--accent) 0%, var(--teal) 100%);
  --cta-grad-hover: linear-gradient(135deg, var(--accent-hover) 0%, #0f766e 100%);
  --map-grid: rgba(37, 99, 235, .045);
  --cmd-navy: #101a2b;
  --cmd-navy-2: #172337;
  --cmd-blue: #2563eb;
  --cmd-cyan: #06b6d4;
  --cmd-teal: #0d9488;
  --cmd-lime: #65a30d;
  --cmd-amber: #d97706;
  --cmd-red: #dc2626;
  --cmd-purple: #7c3aed;
  /* ONE CARD RADIUS. There were four - 8px on .card, 16px on .kpi, 12px on
     panels, 18px on the modal - so a KPI, the card under it and the panel
     round that were three different shapes on the same screen. Operations
     software should look built, not curated: 8px everywhere a surface has a
     corner, 12px reserved for the modal, which is the one thing that has to
     read as lifted off the page. */
  --cmd-radius-sm: 6px;
  --cmd-radius: 8px;
  --cmd-radius-lg: 8px;
  --radius-modal: 12px;
  --cmd-glow-blue: 0 16px 34px -24px rgba(37, 99, 235, .65);
  --cmd-glow-teal: 0 16px 34px -24px rgba(13, 148, 136, .62);
  --cmd-grid-strong: rgba(13, 148, 136, .065);
  --cmd-gradient: linear-gradient(135deg, #2563eb 0%, #0891b2 48%, #0d9488 100%);
  --cmd-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(13, 148, 136, .1));
  --radius-lg: var(--cmd-radius-lg);
  --cmd-bg: #f6f8fc;
  --cmd-bg-2: #eef2f8;
  --cmd-panel: rgba(255, 255, 255, .98);
  --cmd-panel-solid: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-alt: #eef3f9;
  --surface-subtle: #f4f7fb;
  /*
   * THE FAINT SURFACES, WHICH USED TO BE WRITTEN OUT AS LITERALS.
   *
   * Sixty-nine rules painted a light background as a hex value - #f8fafc,
   * #fbfcfe, #f0fdfa and twenty other near-identical whites. A literal cannot
   * answer the dark theme, so in dark mode those surfaces stayed white while
   * the text on them went pale: the Alerts page drew white panels with white
   * numbers, and "Service 0" was invisible. Seen in a browser, not deduced.
   *
   * These are the FAINT tints. They are deliberately separate from --ok-soft,
   * --warn-soft and --accent-soft, which are stronger and already spoken for -
   * folding the two sets together would visibly change the light theme, and
   * that is the owner's call rather than a side effect of a dark-theme repair.
   *
   * --surface-hover is the one exception to "faint": on a dark screen a hover
   * has to go LIGHTER than the card, not darker, which is exactly what a fixed
   * hex cannot do.
   */
  --surface-hover: #f8fafc;
  --tint-accent: #f0fdfa;
  --tint-ok: #f0fdf4;
  --tint-warn: #fff7ed;
  --tint-danger: #fff1f2;
  --tint-info: #eff6ff;
  --cmd-line: #e4eaf2;
  --cmd-line-strong: #cfd9e6;
  --border: var(--cmd-line);
  --border-strong: var(--cmd-line-strong);
  --border-soft: var(--border);
  --cmd-ink: #0c1626;
  --cmd-muted: #56657c;
  --ink: var(--cmd-ink);
  --ink-muted: var(--cmd-muted);
  /*
   * 4.95:1 on white, up from 3.24:1. WCAG AA for body text is 4.5.
   *
   * Chosen against the WORST background it can land on, not against white.
   * The first attempt cleared 4.5 on white and still failed at 4.19 on the
   * faint tints - the same grey sits on a mint ledger pill and an amber
   * balance as well as on a card, and a threshold met on the easiest
   * background is not met at all.
   *
   * This is the quietest ink in the system and it is used for the things
   * people squint at hardest: the field hints under every entry box, the date
   * scope under the company name, the role beside the user's name, the "N
   * entries" line under a total. Measured on all forty routes; it failed on
   * every one of them.
   *
   * Darkened along its own hue rather than replaced, so it is the same grey,
   * just readable. The dark theme's #859ab3 already passes at 6.29 and is
   * untouched.
   */
  --ink-subtle: #667181;
  --accent: #0f766e;
  --accent-hover: #0b615a;
  --accent-soft: #e3f5f2;
  --accent-2: var(--accent-hover);
  --accent-ink: #ffffff;
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --warn: #b25209;
  --warn-soft: #fdf0d5;
  --danger: #dc2626;
  --danger-soft: #fde4e4;
  --cmd-grid: rgba(15, 23, 42, .022);
  --cmd-glow-a: rgba(13, 148, 136, .07);
  --cmd-glow-b: rgba(37, 99, 235, .06);
  --elev-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
  --elev-2: 0 2px 6px rgba(15, 23, 42, .06), 0 12px 28px -10px rgba(15, 23, 42, .14);
  --elev-3: 0 20px 48px -18px rgba(15, 23, 42, .26);
  --cmd-shadow: 0 10px 30px -22px rgba(15, 23, 42, .35);
  --cmd-shadow-strong: 0 22px 56px -30px rgba(15, 23, 42, .5);
  --shadow: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-lg: 0 8px 18px rgba(15, 23, 42, .10);
  --sc-radius: 8px;
  --sc-radius-sm: 6px;
  /* The hairline highlight along the top inside edge of a form control. It is
     a light-theme device: on a white field it reads as a bevel, on a dark one
     it is just a white line. Tokenised so the dark theme can answer it. */
  --control-inset: 0 1px 0 rgba(255, 255, 255, .72) inset;
  --sc-ring: color-mix(in oklab, var(--accent) 42%, transparent);
  --sc-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --sc-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px -1px rgba(15, 23, 42, .08);
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  accent-color: var(--accent);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --format-head: #1b2947;
  --format-trip: #16301f;
  --format-total: #33270f;
  --premium-bg: #0b1220;
  --premium-bg-soft: #1e293b;
  --premium-panel: #111c30;
  --premium-panel-2: #16223a;
  --premium-ink: #e2e8f0;
  --premium-muted: #94a3b8;
  --premium-line: #1e293b;
  --premium-line-strong: #334155;
  --premium-accent: #3b82f6;
  --premium-accent-2: #a78bfa;
  --premium-warn: #fbbf24;
  --premium-good: #22c55e;
  --premium-danger: #f87171;
  --premium-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  --premium-shadow-soft: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --bg: #0b1220;
  --surface: #131f30;
  --surface-raised: #18263a;
  --surface-subtle: #101b2b;
  --surface-alt: #1d2d44;
  /*
   * The dark answers to the faint surfaces. See the note in the light block.
   *
   * The tints are alpha over whatever card they sit on, not fixed colours: a
   * fixed dark tint on a raised card reads as a hole punched in it. Hover goes
   * LIGHTER than both --surface and --surface-raised, because on a dark screen
   * that is the direction "lifted" reads in.
   */
  --surface-hover: #1b2b40;
  /*
   * THE INK THAT GOES ON THE ACCENT, and it is not white here.
   *
   * The light accent is a deep teal (#0f766e) and takes white text. The dark
   * accent is the opposite - #2dd4bf is a BRIGHT teal, and white on it is
   * 1.86:1, which is not text so much as a rumour of text. Four controls were
   * drawing white on it: the primary quick button, the active chart chip, the
   * dashboard's primary action and the integration step number.
   *
   * Same near-black as the dark primary button already uses.
   */
  --accent-ink: #04231f;
  --tint-accent: rgba(45, 212, 191, .10);
  --tint-ok: rgba(34, 197, 94, .10);
  --tint-warn: rgba(251, 191, 36, .10);
  --tint-danger: rgba(244, 63, 94, .12);
  --tint-info: rgba(59, 130, 246, .12);
  --surface-tint: #1e3a5f;
  --line: #1e293b;
  --border: var(--cmd-line);
  --border-strong: var(--cmd-line-strong);
  --line-strong: #334155;
  --text: #e2e8f0;
  --ink: var(--cmd-ink);
  --ink-muted: var(--cmd-muted);
  --muted: #94a3b8;
  --ink-subtle: #91a4ba;
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-strong: #60a5fa;
  --accent-soft: rgba(45, 212, 191, .15);
  /* Nearly nothing, rather than a white line drawn across the top of every
     select and textarea on a dark screen. */
  --control-inset: 0 1px 0 rgba(255, 255, 255, .05) inset;
  --info: #3b82f6;
  --info-soft: #1e3a5f;
  --ok: #4ade80;
  --ok-soft: rgba(34, 197, 94, .15);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .15);
  --danger: #fb7185;
  --danger-soft: rgba(244, 63, 94, .17);
  --erp-purple: #a78bfa;
  --erp-purple-soft: #2a1f4d;
  --erp-cyan: #22d3ee;
  --erp-cyan-soft: #0a3340;
  --erp-pink: #f472b6;
  --erp-pink-soft: #3d1228;
  --brand-grad: linear-gradient(135deg, #3b82f6, #a78bfa);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .5);
  --pcm-bg-fast: #0b1220;
  --pcm-panel-fast: #111c30;
  --pcm-line-fast: #1e293b;
  --pcm-ink-fast: #e2e8f0;
  --pcm-muted-fast: #94a3b8;
  --pcm-teal-fast: #3b82f6;
  --pcm-blue-fast: #3b82f6;
  --pcm-shadow-fast: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --teal: #2dd4bf;
  --teal-soft: #0a3b35;
  --lime: #a3e635;
  --lime-soft: #1f2e0a;
  --safety: #fb923c;
  --safety-soft: #3a1f0a;
  --cta-grad: linear-gradient(135deg, var(--accent) 0%, #2dd4bf 100%);
  --cta-grad-hover: linear-gradient(135deg, var(--accent-hover) 0%, #5eead4 100%);
  --elev-1: 0 1px 2px rgba(0, 0, 0, .45);
  --elev-2: 0 4px 12px rgba(0, 0, 0, .5), 0 14px 32px -12px rgba(0, 0, 0, .62);
  --elev-3: 0 22px 52px -16px rgba(0, 0, 0, .72);
  --map-grid: rgba(96, 165, 250, .06);
  --cmd-bg: #0a121e;
  --cmd-bg-2: #0e1826;
  --cmd-ink: #e9eff8;
  --cmd-muted: #a2b3c9;
  --cmd-panel: rgba(18, 28, 43, .94);
  --cmd-panel-solid: #131f30;
  --cmd-line: rgba(148, 173, 204, .18);
  --cmd-line-strong: rgba(148, 173, 204, .3);
  --cmd-grid: rgba(120, 170, 255, .05);
  --cmd-grid-strong: rgba(45, 212, 191, .08);
  --cmd-glow-a: rgba(45, 212, 191, .1);
  --cmd-glow-b: rgba(56, 120, 230, .12);
  --cmd-shadow: 0 16px 40px -28px rgba(0, 0, 0, .9);
  --cmd-shadow-strong: 0 26px 64px -30px rgba(0, 0, 0, .95);
  --sc-ring: color-mix(in oklab, var(--accent) 55%, transparent);
  --sc-shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --sc-shadow-sm: 0 1px 3px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  line-height: 1.5;
}

button { font-size: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font-size: inherit; }

.boot { padding: 60px; text-align: center; }

/* --- Login screen --- */
.login-page {
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.login-card {
  width: 100%;
  max-width: 380px;
}
.login-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.login-logo {
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px;
}
.login-name { font-size: 16px; }
.login-sub { font-size: 11.5px; }
.login-error {
  background: var(--danger-soft); color: var(--danger);
  padding: 8px 12px; border-radius: var(--radius); font-size: 12.5px;
  margin-bottom: 12px;
}
.login-creds {
  margin-top: 20px; padding: 12px;
  font-size: 11.5px; line-height: 1.7;
}
.login-creds b { font-weight: 600; }
.login-creds summary { cursor: pointer; color: var(--ink); }
.login-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  color: var(--accent);
  font-weight: 700;
  font-size: 12.5px;
  text-align: center;
}
.login-link:hover { color: var(--accent-strong); text-decoration: underline; }
.recovery-card { max-width: 430px; }
.login-recovery-title {
  margin: -8px 0 8px;
  color: var(--ink);
  font-weight: 800;
  font-size: 18px;
}
.login-recovery-note {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* --- App shell --- */
.shell {
  display: flex;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
.sidebar {
  height: 100vh;
  color: #cbd5e1;
  display: flex; flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-head {
  display: flex; align-items: center; gap: 10px;
}
.sidebar-logo {
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 14px;
}
.sidebar-name { color: white; }
.sidebar-sub { font-size: 10.5px; }
.nav-item {
  display: flex; align-items: center;
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
}
.nav-item.active { font-weight: 500; }
.nav-icon { flex-shrink: 0; }
.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 8px;
}
.sidebar-foot {
  margin-top: auto;
  flex-shrink: 0;
}
.user-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
}
.user-avatar {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.user-name { font-size: 11.5px; color: white; font-weight: 500; }
.user-role {
  font-size: 9.5px; color: #94a3b8;
  display: flex; align-items: center; gap: 4px;
}
.user-role::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%; background: #22c55e;
}
.btn-logout {
  margin-top: 8px; width: 100%;
  padding: 6px; font-size: 11px;
  border: 1px solid #1e293b;
  text-align: center;
}
.btn-logout:hover { color: white; border-color: #475569; }

/* --- Main content --- */
.main {
  flex: 1;
  min-height: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  position: relative;
}
.topbar-left {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}
#topbar-title {
  min-width: 0;
}
.topbar-back {
  flex: 0 0 auto;
  white-space: nowrap;
}
.crumb { margin-bottom: 2px; }
/*
 * The page name is now an <h1>, so it needs the browser's heading defaults
 * taken back off: a UA h1 is 2em and carries .67em of margin above and below,
 * and this element sits inside a flex topbar that was laid out around a div.
 *
 * font-size and font-weight INHERIT, which is what the div did - the size is
 * decided by the topbar, not here. The result is byte-identical to what it
 * replaced, which was checked with the fingerprint rather than assumed.
 */
.page-title {
  line-height: 1.2;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.scope-select {
  width: auto;
  min-width: 150px;
  max-width: 180px;
  font-weight: 700;
  background: var(--surface-raised);
}
.content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/* --- Cards & tables --- */
.card {
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
}
.card-title { font-size: 13.5px; }
.card-sub { font-size: 11.5px; margin-top: 2px; }

.kpi-grid {
  display: grid;
  margin-bottom: 16px;
}
.kpi-label { margin-bottom: 6px;
}
.kpi-sub {
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-sub.ok { color: var(--ok); }
.kpi-sub.danger { color: var(--danger); }
.kpi-sub.warn { color: var(--warn); }

.integration-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: start;
}
.integration-roadmap {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.integration-roadmap-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.integration-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.integration-provider-card {
  min-height: 0;
}
.integration-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.integration-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 600;
}
.integration-check.done {
  background: var(--ok-soft);
  border-color: var(--ok-soft);
  color: var(--ok);
}
.integration-check svg {
  width: 13px;
  height: 13px;
}
.integration-next {
  padding: 10px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 12.5px;
}
.integration-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.integration-guide-hero {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.integration-guide-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.55;
}
.integration-step-list {
  display: grid;
  gap: 8px;
}
.integration-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  font-size: 12.5px;
}
.integration-step-no {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .integration-overview,
  .integration-mini-grid {
    grid-template-columns: 1fr;
  }
  .integration-provider-grid {
    grid-template-columns: 1fr;
  }
  .integration-guide-hero {
    flex-direction: column;
  }
}

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead tr {
  border-bottom: 1px solid var(--border);
}
th {
  text-align: left;
  white-space: nowrap;
}
td {
  vertical-align: middle;
}
tbody tr.clickable { cursor: pointer; }
.tr-empty td { text-align: center; color: var(--ink-subtle); }
.right { text-align: right; }
.center { text-align: center; }
.bold { font-weight: 600; }
.dim { color: var(--ink-muted); }
.ok-num { color: var(--ok); }
.danger-num { color: var(--danger); }

/* --- Buttons --- */
/* ============================================================
   BUTTONS - single source of truth (premium system).
   This is the ONLY base .btn definition; the earlier stacked
   duplicate layers were removed. Responsive @media, reduced-motion,
   table-scoped (.data-table .btn-danger), and dark-theme rules
   layer on top of this by position / specificity.
   ============================================================ */
.btn {
  position: relative;               /* anchors the .is-loading spinner */
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  padding: 7px 13px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.btn:hover { background: var(--surface-alt); border-color: var(--border-strong); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }

/* Leading icon: optically aligned, consistent size + gap */
.btn svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Primary - confident teal fill with a subtle top highlight + accent-tinted
   shadow; clearly the main action. */
.btn-primary, .btn.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 90%, #fff) 0%, var(--accent) 58%);
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
              0 8px 18px -12px color-mix(in oklab, var(--accent) 70%, transparent);
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-color: var(--accent-hover);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset,
              0 10px 22px -12px color-mix(in oklab, var(--accent) 72%, transparent);
}
.btn-primary:active, .btn.btn-primary:active {
  background: var(--accent-hover);
  box-shadow: 0 2px 6px -3px color-mix(in oklab, var(--accent) 60%, transparent);
  transform: translateY(1px);
}

/* Danger - quiet by default (danger text + soft border, no loud fill); fills
   danger-soft only on hover so destructive actions never shout in tables. */
.btn-danger, .btn.btn-danger {
  color: var(--danger);
  background: var(--surface);
  background-image: none;
  border-color: var(--danger-soft);
  box-shadow: var(--shadow-sm);
}
.btn-danger:hover, .btn.btn-danger:hover {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in oklab, var(--danger) 42%, var(--danger-soft));
  box-shadow: var(--shadow);
}
.btn-danger:active, .btn.btn-danger:active { transform: translateY(1px); }

/* Ghost - borderless until hover, for low-emphasis actions */
.btn-ghost, .btn.btn-ghost {
  color: var(--ink-muted);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover, .btn.btn-ghost:hover {
  color: var(--ink);
  background: var(--surface-alt);
  border-color: transparent;
  box-shadow: none;
}

/* Icon-only: square, so a row of Edit/Delete/Download reads as a set of equal
   targets rather than three slightly different lozenges. UI.btn adds .btn-icon
   when it was given an icon and no label - it cannot be inferred here, because
   `:has(> svg:only-child)` counts element children and a label is a text node,
   so that selector matches icon-AND-text buttons too and squashes them. */
.btn-icon { width: 34px; padding-inline: 0; }
.btn-icon.btn-sm { width: 28px; }
.btn-icon.btn-lg { width: 38px; }

/* Sizes - comfortable default (~34px), sm (~28px), lg (~38px) */
.btn-sm { min-height: 28px; padding: 4px 10px; font-size: 11.5px; gap: 5px; border-radius: var(--sc-radius-sm); }
.btn-sm svg { width: 13px; height: 13px; }
.btn-lg { min-height: 38px; padding: 9px 17px; font-size: 13.5px; }

/* Disabled - clearly inert, still readable */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(.15);
}

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- Pills / badges --- */
.pill {
}
.role-pill-row {
  display: flex;
  flex-wrap: wrap;
}
.role-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.role-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
}
.role-check:hover {
  border-color: var(--border-strong);
  background: var(--surface-alt);
}

/* --- Forms --- */
.field {
  margin-bottom: 14px;
}
.field-label {
  display: block;
  margin-bottom: 4px;
}
.field-hint {
  font-size: 10.5px; margin-top: 3px;
}
.input, .select, .textarea {
  width: 100%;
  outline: none;
}
.input.mono { }
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.field-grid-3 { grid-template-columns: repeat(3, 1fr); }
.field.col-2 { grid-column: span 2; }
.field.col-3 { grid-column: span 3; }
.field-readonly {
  padding: 7px 10px;
  border-radius: var(--radius);
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
}

.suggest-menu {
  position: absolute;
  z-index: 180;
  max-height: 260px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}
.suggest-menu.hidden { display: none; }
.suggest-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
}

/* --- Modal --- */
.modal-bg {
  position: fixed; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 100;
  overflow-y: auto;
}
.modal {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
}
.modal-head {
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.modal-kicker {
  margin-bottom: 2px;
}
.modal-close {
  display: flex; align-items: center; justify-content: center;
}
.modal-body { padding: 20px; }
.modal-foot {
  padding: 12px 20px;
}
.modal-md { max-width: 720px; }

/* --- Toast --- */
.toast-stack {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  padding: 10px 14px;
  pointer-events: auto;
}
.toast.danger { }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Filters bar --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.filter-bar .input, .filter-bar .select {
  width: auto;
  max-width: 200px;
}
.search-box {
  flex: 1; min-width: 180px;
  position: relative;
}
.search-box input { padding-left: 30px; }
.search-box::before {
  content: '';
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat;
}
.spacer { flex: 1; }

/* --- Section --- */
.section-head {
  margin-bottom: 12px;
}
.section-title { font-size: 16px; }
.section-sub { margin-top: 2px; }

/* --- Tabs --- */
.tabs {
  display: flex;
  margin-bottom: 16px;
  overflow-x: auto;
}
.tab:hover { }
.tab .tab-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
  background: var(--surface-alt);
  color: var(--ink-subtle);
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}

/* --- Detail header --- */
.detail-head {
  display: flex; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.back-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); flex-shrink: 0;
}
.back-btn:hover { color: var(--ink); }
.detail-title { font-size: 22px; line-height: 1.2; }
.detail-meta {
  font-size: 12px; color: var(--ink-muted);
  margin-top: 6px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.detail-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* --- Outstanding bars --- */
.bar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font-size: 12px;
}
.bar-row .label { width: 130px; flex-shrink: 0; font-weight: 500; }
.bar-row .pill { flex-shrink: 0; }
.bar-track {
  flex: 1;
  height: 8px;
  overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%;
}
.bar-fill.warn { background: linear-gradient(90deg, var(--warn), #f59e0b); }
.bar-fill.danger { background: linear-gradient(90deg, var(--danger), #ef4444); }
.bar-fill.ok { background: linear-gradient(90deg, var(--ok), #22c55e); }
.bar-row .val {
  min-width: 100px; text-align: right;
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* --- Loading state --- */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { }
.loading-cell { padding: 30px; text-align: center; }

/* Advanced import */
.import-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.import-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.import-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-muted);
}
.import-options label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.import-drop {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.import-drop.drag {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.import-textarea {
  min-height: 220px;
  resize: vertical;
}
.import-field-list,
.import-chip-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.import-chip {
  display: inline-flex;
  padding: 3px 7px;
  font-size: 10.5px;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  background: var(--surface-alt);
  color: var(--ink-muted);
}
.import-chip.ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.import-chip.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

/* --- Mobile responsiveness --- */
@media (max-width: 768px) {
  .sidebar { position: fixed; transition: left 0.2s; z-index: 50; height: 100vh; }
  .sidebar.open { left: 0; }
  .field-grid-3 { }
        .menu-toggle { display: flex !important; }
}
.menu-toggle {
  display: none;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink);
}

/* --- Scrollbars --- */
::-webkit-scrollbar { }
::-webkit-scrollbar-thumb { border: 2px solid var(--bg); }

/* --- Utility --- */
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.hidden { display: none !important; }
.text-sm { font-size: 12px; } .text-xs { font-size: 11px; }
.text-lg { font-size: 16px; } .text-xl { font-size: 18px; }

/* Advanced UI polish: fast shared layer, no external assets */

html,
body,
#app {
  height: 100%;
  overflow: hidden;
}

body,
button,
input,
select,
textarea,
.sidebar-section,
th,
.modal-kicker,
.kpi-label {
  letter-spacing: 0;
}

::selection {
  color: var(--ink);
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Focus ring - single source of truth. Crisp 2px accent outline with offset
   on every interactive element (keyboard-only via :focus-visible). */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.input:focus-visible,
.select:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.nav-item:focus-visible,
.topnav-trigger:focus-visible,
.topnav-link:focus-visible,
.pill:focus-visible,
.section-hub-card:focus-visible,
.modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

.login-page {
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.login-logo,
.sidebar-logo {
}

.sidebar {
}

.sidebar-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-name {
}

.sidebar-nav {
  scrollbar-gutter: stable;
}

.nav-item {
  gap: 9px;
}

.nav-icon {
  width: 15px;
  height: 15px;
  opacity: 0.9;
}

.sidebar-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.user-avatar {
}

.btn-logout {
  border-color: rgba(255, 255, 255, 0.12);
  color: #c1c8d2;
}

.btn-logout:hover {
  background: rgba(255, 255, 255, 0.08);
}

.topbar {
  border-bottom-color: var(--border);
  flex-shrink: 0;
}

.page-title {
}

.topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.content {
  scroll-padding: 18px;
}

.card,
.kpi,
.filter-bar,
.back-btn {
  box-shadow: var(--shadow);
}

.card-pad {
}

.card-head {
  padding: 13px 16px;
}

.card-sub,
.section-sub {
}

.kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.kpi {
  padding: 16px 16px 15px;
}

.kpi:nth-child(3n + 2)::before {
  background: var(--info);
}

.kpi:nth-child(3n)::before {
  background: #b7791f;
}

.kpi-value {
}

.table-card {
  max-width: 100%;
}

.data-table thead tr,
thead tr {
}

.data-table th,
th {
  padding: 10px 12px;
  letter-spacing: 0;
}

.data-table td,
td {
  padding: 9px 12px;
  border-bottom-color: #edf1f5;
}

.data-table tbody tr:hover,
tbody tr:hover {
}

.data-table tbody tr.clickable:hover,
tbody tr.clickable:hover {
  background: var(--surface-hover);
}

.data-table th:first-child,
.data-table td:first-child {
  padding-left: 14px;
}

.data-table th:last-child,
.data-table td:last-child {
  padding-right: 14px;
}

.data-table-compact th,
.data-table-compact td {
  padding-top: 7px;
  padding-bottom: 7px;
}

.ledger-admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 92px;
}

.ledger-admin-actions .btn {
  white-space: nowrap;
}

.ledger-audit-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(220px, 1.2fr);
  gap: 10px;
  margin: 14px 0 18px;
}

.ledger-audit-item,
.ledger-audit-ok {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.ledger-audit-item span,
.ledger-audit-ok span {
  color: var(--ink-muted);
  font-size: 11.5px;
}

.ledger-audit-item strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: var(--ink);
}

.ledger-audit-item.strong {
  border-color: #99f6e4;
  background: var(--tint-accent);
}

.ledger-audit-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ok);
  background: var(--tint-ok);
  border-color: #bbf7d0;
}

.ledger-audit-ok svg {
  width: 16px;
  height: 16px;
}

.ledger-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 10px;
}

.ledger-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ledger-toolbar-actions .search {
  min-width: 320px;
}

.ledger-table {
  min-width: 1180px;
}

.ledger-source-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 116px;
}

.ledger-source-no {
  color: var(--ink-muted);
  font-size: 11px;
  max-width: 170px;
  overflow-wrap: anywhere;
}

.ledger-particulars {
  min-width: 300px;
  max-width: 560px;
}

.ledger-line-main {
  font-weight: 650;
  color: var(--ink);
  line-height: 1.35;
}

.ledger-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.ledger-chip {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid #dbe3ec;
  background: var(--surface-subtle);
  color: #334155;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.35;
  max-width: 100%;
}

.ledger-chip-label {
  color: #64748b;
  font-weight: 650;
}

.ledger-entity-stack {
  display: grid;
  gap: 4px;
  min-width: 140px;
}

.ledger-entity-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
}

.ledger-entity-label {
  color: var(--ink-subtle);
  font-size: 10.5px;
  text-transform: uppercase;
}

.ledger-index-page {
  display: grid;
  gap: 14px;
}

.ledger-index-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(520px, 1.7fr);
  gap: 14px;
  align-items: stretch;
  padding: 18px;
}

.ledger-index-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ledger-index-eyebrow {
  margin-bottom: 7px;
  color: #0f766e;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ledger-index-hero h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
}

.ledger-index-hero p {
  max-width: 620px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.ledger-index-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.ledger-index-stat {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 13px 14px;
  border-top: 3px solid #64748b;
}

.ledger-index-stat.accent { border-top-color: var(--accent); }
.ledger-index-stat.ok { border-top-color: var(--ok); }
.ledger-index-stat.warn { border-top-color: var(--warn); }
.ledger-index-stat.danger { border-top-color: var(--danger); }

.ledger-index-stat-value {
  margin-top: 9px;
  font-size: 21px;
  line-height: 1.1;
}

.ledger-index-stat-sub {
  margin-top: 8px;
  color: var(--ink-subtle);
  font-size: 11.5px;
}

.ledger-index-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.ledger-index-toolbar .search-box {
  min-width: min(360px, 100%);
}

.ledger-index-select {
  min-width: 150px;
}

.ledger-index-toolbar-note {
  max-width: 360px;
  color: var(--ink-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger-index-list {
  display: grid;
  gap: 8px;
}

.ledger-index-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 3px;
  color: var(--ink-muted);
  font-size: 12px;
}

.ledger-index-list-head strong {
  color: var(--ink);
}

.ledger-index-row {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(430px, 0.85fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #dbe4ee;
  border-left: 4px solid #94a3b8;
  cursor: pointer;
}

.ledger-index-row:hover,
.ledger-index-row:focus {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  outline: none;
}

.ledger-index-row.dr { border-left-color: #2563eb; }
.ledger-index-row.cr { border-left-color: #d97706; }
.ledger-index-row.zero { border-left-color: #10b981; }

.ledger-index-main {
  min-width: 0;
}

.ledger-index-name-line {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.ledger-index-name {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-index-activity-pill {
  flex: 0 0 auto;
  padding: 2px 8px;
  /* Was #047857 on a hard-coded mint. The background now follows the theme,
     so the ink has to as well - a light-theme green on a dark green wash came
     out at 2.13:1, worse than the white-on-white it replaced. */
  border: 1px solid var(--border);
  background: var(--tint-ok);
  color: var(--ok);
  font-size: 11px;
}

.ledger-index-activity-pill.muted {
  border-color: var(--border);
  background: var(--surface-subtle);
  color: var(--ink-muted);
}

.ledger-index-chips {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  max-height: 48px;
  overflow: hidden;
}

.ledger-index-chip {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  padding: 3px 8px;
  border: 1px solid #dbe5ef;
  background: var(--surface-subtle);
  color: #334155;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger-index-chip.ok {
  border-color: #bbf7d0;
  background: var(--tint-ok);
  color: #047857;
}

.ledger-index-chip.danger {
  border-color: #fecdd3;
  background: var(--tint-danger);
  color: #be123c;
}

.ledger-index-chip.muted {
  color: var(--ink-muted);
}

.ledger-index-muted {
  margin-top: 8px;
  color: var(--ink-subtle);
  font-size: 12px;
}

.ledger-index-last {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 9px;
  color: var(--ink-muted);
  font-size: 12px;
}

.ledger-index-last svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.ledger-index-last span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-index-amounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 8px;
}

.ledger-index-amount,
.ledger-index-balance {
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid #e0e8f0;
  border-radius: 8px;
  background: var(--surface-subtle);
}

.ledger-index-amount span,
.ledger-index-balance span {
  display: block;
  color: var(--ink-subtle);
  font-size: 10.5px;
  font-weight: 700;
}

.ledger-index-amount strong,
.ledger-index-balance strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.ledger-index-balance.dr {
  border-color: #bfdbfe;
  background: var(--tint-info);
}

.ledger-index-balance.cr {
  border-color: #fed7aa;
  background: var(--tint-warn);
}

.ledger-index-balance.zero {
  border-color: #bbf7d0;
  background: var(--tint-ok);
}

.ledger-index-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .ledger-audit-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ledger-audit-ok {
    grid-column: 1 / -1;
  }
  .ledger-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .ledger-toolbar-actions,
  .ledger-toolbar-actions .search {
    width: 100%;
  }
  .ledger-index-hero,
  .ledger-index-row {
    grid-template-columns: 1fr;
  }
  .ledger-index-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .ledger-index-toolbar .search-box,
  .ledger-index-select,
  .ledger-index-toolbar-note {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .ledger-index-list-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .ledger-index-amounts {
    grid-template-columns: 1fr;
  }
  .ledger-index-actions {
    justify-content: stretch;
  }
  .ledger-index-actions .btn {
    width: 100%;
  }
}

.tr-empty td {
  padding: 34px 16px;
  background: var(--surface-subtle);
}

/* (button restyle layer removed - consolidated into the single .btn system) */

.pill {
  min-height: 20px;
}

.field-label {
}

.textarea {
}

.field-readonly {
}

.filter-bar .input,
.filter-bar .select {
  min-width: 145px;
}

.search-box {
  max-width: 380px;
}

.search-box::before {
  opacity: 0.78;
}

.tabs {
  border-bottom-color: var(--border);
  scrollbar-width: thin;
}

.tab:hover {
}

.detail-head {
  align-items: center;
}

.back-btn:hover {
}

.modal-bg {
  padding: 24px 16px;
}

.modal-head {
  flex-shrink: 0;
}

.modal-body {
  overflow: auto;
}

.modal-foot {
  flex-shrink: 0;
}

.modal-close {
  border: 1px solid transparent;
}

.modal-close:hover {
  border-color: var(--border);
}

.bar-track {
}

.bar-fill {
  background: linear-gradient(90deg, var(--accent), #1d5f99);
}

.import-hero {
  align-items: flex-start;
}

.import-toolbar {
  justify-content: flex-end;
}

.import-options {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.import-drop {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--surface-subtle);
  border-color: var(--border-strong);
}

.import-drop.drag {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.import-textarea {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.55;
  background: var(--surface-subtle);
}

.import-chip {
  border: 1px solid rgba(23, 32, 51, 0.05);
  border-radius: 999px;
}

.menu-toggle {
  box-shadow: var(--shadow-sm);
}

::-webkit-scrollbar-thumb {
  border-color: var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #97a7b8;
}

@media (max-width: 1100px) {
  .topbar-actions {
    max-width: 58vw;
  }

  .field-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .field.col-3 {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .sidebar {
  }

  .topbar {
    min-height: 56px;
  }

  .page-title {
    font-size: 16px;
  }

  .topbar-actions {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .field-grid,
  .field-grid-3 {
    grid-template-columns: 1fr;
  }

  .field.col-2,
  .field.col-3 {
    grid-column: span 1;
  }

  .filter-bar {
    align-items: stretch;
  }

  .filter-bar .input,
  .filter-bar .select,
  .search-box {
    width: 100%;
    max-width: none;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .import-hero,
  .section-head,
  .detail-head {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Alerts workspace */
.alerts-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.alerts-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.alerts-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.alerts-subtitle {
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 12.5px;
}

.alerts-actions,
.alerts-search-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.alerts-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.alert-summary-card {
  position: relative;
  min-height: 96px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.alert-summary-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}

.alert-summary-card.warn::before {
  background: var(--warn);
}

.alert-summary-card.ok::before {
  background: var(--ok);
}

.alert-summary-label {
  color: var(--ink-muted);
  font-weight: 650;
  font-size: 11.5px;
}

.alert-summary-value {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 750;
  color: var(--ink);
}

.alert-summary-sub {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 11.5px;
}

.alerts-toolbar {
  display: grid;
  gap: 12px;
}

.alerts-toolbar .search-box {
  max-width: 520px;
  min-width: min(420px, 100%);
}

.alert-filter-block {
  display: grid;
  gap: 7px;
}

.alert-filter-label {
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 700;
}

.alert-chip-row {
  display: flex;
  flex-wrap: wrap;
}

.alert-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 12px;
  box-shadow: 0 1px 0 rgba(23, 32, 51, 0.03);
}

.alert-chip:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--ink);
}

.alert-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-hover);
}

.alert-chip.danger.active {
  background: var(--danger-soft);
  border-color: #eba2aa;
  color: var(--danger);
}

.alert-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(23, 32, 51, 0.07);
  color: inherit;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 11px;
}

.alerts-results {
  display: grid;
  gap: 14px;
}

.alerts-result-note {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 2px 2px 0;
  font-size: 12.5px;
}

.alert-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.alert-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}

.alert-panel-title {
  font-size: 14px;
  font-weight: 750;
  color: var(--ink);
}

.alert-panel-sub {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 12px;
}

.alert-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 12px;
}

.alert-card {
  display: grid;
  gap: 10px;
  text-align: left;
  width: 100%;
  padding: 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04);
}

.alert-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 6px 18px -16px rgba(23, 32, 51, 0.65);
}

.alert-card.danger {
  border-left-color: var(--danger);
}

.alert-card.warn {
  border-left-color: var(--warn);
}

.alert-card.ok {
  border-left-color: var(--ok);
}

.alert-card-head,
.alert-card-foot,
.alert-line,
.alert-mini-row {
  display: flex;
  align-items: center;
}

.alert-card-head,
.alert-line,
.alert-mini-row {
  justify-content: space-between;
  gap: 10px;
}

.alert-card-title {
  font-size: 14px;
  font-weight: 750;
  color: var(--ink);
}

.alert-card-meta {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 11.5px;
}

.alert-card-lines {
  display: grid;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid #edf1f5;
}

.alert-line {
  font-size: 12px;
}

.alert-line span {
  color: var(--ink-muted);
}

.alert-line b {
  font-weight: 750;
}

.alert-card-foot {
  justify-content: flex-end;
  gap: 6px;
  padding-top: 2px;
}

.alert-mini-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.alert-mini-row {
  width: 100%;
  min-height: 52px;
  text-align: left;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}

.alert-mini-row:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.alert-mini-row.danger {
  border-left-color: var(--danger);
}

.alert-mini-row.warn {
  border-left-color: var(--warn);
}

.alert-mini-row.accent {
  border-left-color: var(--accent);
}

.alert-mini-main {
  min-width: 0;
}

.alert-mini-title {
  font-weight: 750;
  color: var(--ink);
}

.alert-mini-meta {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-mini-value {
  flex-shrink: 0;
  color: var(--ink);
  font-weight: 750;
  font-size: 12px;
}

.alert-empty {
  padding: 22px 16px;
  color: var(--ink-muted);
  background: var(--surface-subtle);
  font-size: 12.5px;
}

.alert-more {
  padding: 0 16px 14px;
  font-size: 11.5px;
}

.warn-num {
  color: var(--warn);
}

.document-import-box {
  display: grid;
  gap: 12px;
}

.document-import-template {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.document-import-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 12.5px;
}

.document-import-status {
  padding: 10px 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px;
}

.document-import-preview {
  display: grid;
  gap: 10px;
}

@media (max-width: 1000px) {
  .alerts-summary {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 768px) {
  .alerts-hero,
  .alert-panel-head,
  .alert-mini-row {
    align-items: stretch;
    flex-direction: column;
  }

  .alerts-actions,
  .alerts-search-row {
    width: 100%;
  }

  .alerts-search-row .search-box,
  .alerts-search-row .btn,
  .alerts-actions .btn {
    width: 100%;
  }

  .alerts-summary {
    grid-template-columns: 1fr;
  }

  .alert-card-grid {
    grid-template-columns: 1fr;
  }

  .alert-mini-meta {
    white-space: normal;
  }

  .alert-mini-value {
    align-self: flex-start;
  }
}

/* Advanced dashboard */
.dashboard-page {
  display: grid;
  gap: 16px;
}

.dashboard-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
}

.dashboard-hero-main {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
}

.dashboard-eyebrow {
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-title {
  font-size: 24px;
  font-weight: 850;
  line-height: 1.15;
}

.dashboard-subtitle {
  font-size: 13px;
  line-height: 1.45;
}

.dashboard-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 10px;
  min-width: 360px;
}

.dashboard-hero-stat {
  display: grid;
  gap: 7px;
  align-content: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(216, 224, 232, 0.9);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.86);
}

.dashboard-hero-stat span {
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 650;
}

.dashboard-hero-stat b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.dash-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(170px, 1fr));
  gap: 12px;
}

.dash-metric {
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 134px;
  padding: 14px;
  border-top: 3px solid var(--accent);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.dash-metric:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 22px -18px rgba(23, 32, 51, 0.65);
  transform: translateY(-1px);
}

.dash-metric:disabled {
  cursor: default;
  transform: none;
}

.dash-metric.accent { border-top-color: var(--accent); }
.dash-metric.ok { border-top-color: var(--ok); }
.dash-metric.warn { border-top-color: var(--warn); }
.dash-metric.danger { border-top-color: var(--danger); }

.dash-metric-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.dash-metric-label {
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.dash-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--accent-hover);
}

.dash-metric-value {
  color: var(--ink);
  font-size: 22px;
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.dash-metric-sub {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
  min-height: 32px;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.dashboard-main-col,
.dashboard-side-col {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.dashboard-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.dash-panel {
  min-width: 0;
  overflow: hidden;
}

.dash-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
}

.dash-panel-title {
  font-size: 14px;
}

.dash-panel-sub {
  color: var(--ink-muted);
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.35;
}

.dash-panel-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.dash-empty {
  padding: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-size: 12.5px;
  text-align: center;
  background: var(--surface-subtle);
}

.dash-progress-row,
.dash-activity-row {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.dash-progress-row {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
}

.dash-progress-row:hover,
.dash-activity-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.dash-progress-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dash-progress-title,
.dash-activity-title {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-progress-sub,
.dash-activity-sub {
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}

.dash-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.dash-progress-fill.ok { background: var(--ok); }
.dash-progress-fill.warn { background: var(--warn); }
.dash-progress-fill.danger { background: var(--danger); }

.dash-progress-value,
.dash-activity-value {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.dash-activity-row {
  grid-template-columns: 74px minmax(0, 1fr) max-content;
  align-items: center;
}

.dash-activity-date {
  color: var(--ink-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.dash-activity-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dash-trend {
  display: grid;
  gap: 10px;
}

.dash-trend-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 78px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.dash-trend-label,
.dash-trend-value {
  color: var(--ink-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.dash-trend-value {
  text-align: right;
  color: var(--ink);
  font-weight: 750;
}

.dash-trend-bars {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dash-trend-bar {
  height: 8px;
  min-width: 3px;
  border-radius: 999px;
}

.dash-trend-bar.billing { background: var(--accent); }
.dash-trend-bar.expense { background: var(--warn); }

.dash-legend {
  display: flex;
  gap: 14px;
  color: var(--ink-muted);
  font-size: 11.5px;
  padding-top: 2px;
}

.dash-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-legend span::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.dash-legend .billing { color: var(--accent); }
.dash-legend .expense { color: var(--warn); }

.dashboard-master-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
}

.dashboard-master-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  color: var(--ink);
  cursor: pointer;
}

.dashboard-master-pill:hover {
  background: var(--surface-hover);
}

.dashboard-master-pill span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-master-pill b {
  font-size: 18px;
  color: var(--ink);
}

@media (max-width: 1400px) {
  .dash-metric-grid {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
  }
}

@media (max-width: 1180px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-side-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dashboard-hero {
    flex-direction: column;
  }

  .dashboard-hero-stats,
  .dashboard-two-col,
  .dashboard-side-col,
  .dashboard-master-strip {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .dash-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .dashboard-title {
    font-size: 20px;
  }

  .dashboard-hero-stats,
  .dash-metric-grid {
    grid-template-columns: 1fr;
  }

  .dash-activity-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .dash-activity-date,
  .dash-activity-value {
    white-space: normal;
  }

  .dash-trend-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .dash-trend-value {
    grid-column: 2;
    text-align: left;
  }
}

/* Whole-app refinement: faster scanning, safer clicks, cleaner mobile tables */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #0f766e, #2563eb, #f59e0b);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  z-index: 2000;
}

body.api-busy::before {
  opacity: 1;
  animation: apiProgress 1.1s ease-in-out infinite;
}

@keyframes apiProgress {
  0% { transform: scaleX(0.08); }
  45% { transform: scaleX(0.72); }
  100% { transform: scaleX(0.98); }
}

.topbar-right {
  min-width: 0;
}

.card:hover,
.table-card:hover {
}

.data-table th {
}

.data-table .table-heading-row th {
  top: 0;
  z-index: 4;
  height: 38px;
}

.table-sort-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.data-table th.right .table-sort-button {
  justify-content: flex-end;
}

.table-sort-button:hover .table-sort-label,
.table-sort-button.is-active .table-sort-label {
  color: var(--accent);
}

.table-sort-arrow {
  position: relative;
  display: inline-flex;
  width: 9px;
  height: 14px;
  flex: 0 0 9px;
  opacity: 0.55;
}

.table-sort-arrow::before,
.table-sort-arrow::after {
  content: '';
  position: absolute;
  left: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.table-sort-arrow::before {
  top: 1px;
  border-bottom: 5px solid #8a99ac;
}

.table-sort-arrow::after {
  bottom: 1px;
  border-top: 5px solid #8a99ac;
}

.table-sort-button[data-sort="asc"] .table-sort-arrow::before {
  border-bottom-color: var(--accent);
}

.table-sort-button[data-sort="asc"] .table-sort-arrow::after {
  opacity: 0.12;
}

.table-sort-button[data-sort="desc"] .table-sort-arrow::before {
  opacity: 0.12;
}

.table-sort-button[data-sort="desc"] .table-sort-arrow::after {
  border-top-color: var(--accent);
}

.data-table .table-filter-row th {
  top: 38px;
  z-index: 3;
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--border);
}

.table-filter-input {
  width: 100%;
  min-width: 78px;
  height: 28px;
  border: 1px solid #dbe3ee;
  color: var(--ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  outline: none;
}

.table-filter-input::placeholder {
  color: #9aa8ba;
  font-weight: 500;
}

.table-filter-input.is-active {
  border-color: var(--accent);
  background: var(--tint-accent);
  color: #0f766e;
}

.table-filter-empty td {
  padding: 26px 14px;
  text-align: center;
}

.data-table tbody tr:hover {
}

.table-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
}

.table-meta .spacer {
  flex: 1 1 auto;
}

.table-pager {
  display: inline-flex;
  align-items: center;
  padding-left: 6px;
  border-left: 1px solid var(--border);
}

.table-pager-label {
  min-width: 112px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.table-page-size {
  width: auto;
  min-width: 86px;
  padding: 4px 24px 4px 8px;
  font-size: 11.5px;
  font-weight: 650;
}

.empty-state {
  justify-items: center;
}

.empty-state-icon {
  place-items: center;
}

.empty-state-sub {
  max-width: 360px;
  text-align: center;
  font-size: 12px;
}

.loading-state,
.loading-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 84px;
  color: var(--ink-muted);
  font-weight: 600;
}

.loading-spinner {
  border: 2px solid var(--border);
  border-top-color: var(--accent);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 999px;
  animation: spin 0.75s linear infinite;
}

.btn-primary.is-loading::after {
  border-color: #ffffff;
  border-top-color: transparent;
}

.btn-danger.is-loading::after {
  border-color: var(--danger);
  border-top-color: transparent;
}

.modal-head,
.modal-foot {
}

body.modal-open {
  overflow: hidden;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--border-strong);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--surface-subtle);
  color: var(--ink-subtle);
}

.revenue-fill-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #99d7d0;
  border-left: 4px solid var(--accent);
  border-radius: 7px;
  background: var(--tint-accent);
  color: #0f3f3a;
  font-size: 12.5px;
  font-weight: 650;
}

.input.revenue-fill-empty,
.select.revenue-fill-empty,
.textarea.revenue-fill-empty {
  border-color: #7dd3c7;
  background: var(--tint-accent);
}

.input.revenue-locked-filled,
.select.revenue-locked-filled,
.textarea.revenue-locked-filled {
  border-style: dashed;
  background: var(--surface-subtle);
  color: #64748b;
  cursor: not-allowed;
}

/* The note that explains the grey boxes above. Quiet, not a warning: nobody
   has done anything wrong, and the first line says what they CAN do. */
.fill-only-note {
  border: 1px solid #b8e0d8;
  background: var(--tint-accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.fill-only-title {
  font-weight: 700;
  font-size: 13px;
  color: #0f766e;
  margin-bottom: 4px;
}
.fill-only-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: #475569;
}
.fill-only-body + .fill-only-body { margin-top: 5px; }
.fill-only-hindi {
  font-size: 12.5px;
  line-height: 1.6;
  color: #64748b;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #d7ece8;
}

.filter-bar {
}

.sidebar-head,
.sidebar-foot {
  border-color: rgba(255, 255, 255, 0.08);
}

.nav-item.active {
  border-left-color: #2dd4bf;
}

@media (max-width: 760px) {
  .topbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .data-table thead {
    display: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table tr {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 0;
    text-align: right;
  }

  .data-table td::before {
    content: attr(data-label);
    color: var(--ink-muted);
    font-weight: 700;
    text-align: left;
  }

  .data-table .tr-empty td {
    display: block;
    text-align: center;
  }

  .data-table .tr-empty td::before {
    content: '';
  }
}

/* UI simplification pass - daily office use */

body {
}

.sidebar {
  width: 236px;
  background: #17202b;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.sidebar-head {
  min-height: 62px;
  padding: 14px 14px;
}

.sidebar-logo {
  border-radius: 8px;
}

.sidebar-name {
  font-size: 13.5px;
  font-weight: 750;
}

.sidebar-sub {
  color: #aeb8c5;
  font-weight: 600;
}

.sidebar-nav {
  padding: 8px 8px 12px;
}

.sidebar-section {
  padding: 12px 10px 5px;
  color: #97a3b3;
  font-size: 10.5px;
  font-weight: 750;
  text-transform: none;
}

.nav-item {
  min-height: 34px;
  margin: 1px 0;
  padding: 8px 10px;
  border-radius: 7px;
  color: #d7dde6;
  border: 1px solid transparent;
  border-left: 0;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.nav-item.active {
  background: rgba(13, 148, 136, 0.18);
  border-color: rgba(95, 189, 180, 0.24);
  box-shadow: inset 3px 0 0 var(--accent-line);
  color: #ffffff;
}

.sidebar-foot {
  padding: 12px;
  background: rgba(0, 0, 0, 0.14);
}

.user-pill {
  min-width: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.topbar {
}

.crumb {
}

.content {
}

.card,
.kpi,
.table-card,
.filter-bar,
.dash-panel,
.dash-metric,
.dashboard-master-pill,
.dashboard-hero,
.dash-action-card,
.dash-work-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.card:hover,
.table-card:hover,
.dash-panel:hover {
  border-color: #d2dce8;
}

.card-head,
.dash-panel-head {
  min-height: 50px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}

.card-title,
.dash-panel-title,
.section-title {
  font-weight: 800;
}

/* (button restyle layer removed - consolidated into the single .btn system) */

.input,
.select,
.textarea,
.table-filter-input {
  border-color: #d6e0ea;
  border-radius: 7px;
}

.input:focus,
.select:focus,
.textarea:focus,
.table-filter-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.13);
}

.field-grid {
  gap: 12px 14px;
}

.field-readonly {
  min-height: 34px;
  display: flex;
  align-items: center;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

/* Payments split workspace */
.payment-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.payment-summary-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  padding: 13px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.payment-summary-card.warn { border-top-color: var(--warn); }
.payment-summary-card.ok { border-top-color: var(--ok); }
.payment-summary-card.accent { border-top-color: var(--accent); }
.payment-summary-label {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
}
.payment-summary-value {
  margin-top: 7px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
}
.payment-summary-sub {
  margin-top: 5px;
  color: var(--ink-subtle);
  font-size: 11.5px;
}
.payment-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.payment-tab {
  display: grid;
  gap: 5px;
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
}
.payment-tab:hover,
.payment-tab.active {
  border-color: var(--accent-line);
  background: var(--tint-accent);
}
.payment-tab span {
  color: var(--ink);
  font-weight: 800;
}
.payment-tab b {
  /*
   * THE FIGURE ON THIS CARD HAS ALWAYS BEEN INVISIBLE.
   *
   * --accent-ink is the ink for text sitting ON the accent colour - white, for
   * a teal button. This card is not teal: it is --surface-raised, or
   * --tint-accent when it is the chosen one. So the total was white on white,
   * and on the selected card white on the faintest mint. Both headline figures
   * on the Payments screen, ₹3.12 Cr and ₹1.17 Cr, rendered as nothing.
   *
   * Nobody reported it because the same two totals appear in the KPI row a few
   * inches above, so the screen looked complete. Found by measuring contrast,
   * then confirmed in a browser - the "Maintenance Payments" card is blank
   * where its figure should be.
   */
  color: var(--accent);
  font-size: 18px;
}
.payment-tab em {
  color: var(--ink-muted);
  font-style: normal;
  font-size: 11.5px;
}
.payment-form-note {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--ink-muted);
  font-size: 12px;
}
.payment-form-note b {
  color: var(--ink);
}
.payment-quick-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.payment-chip {
  background: var(--surface-raised);
  color: var(--ink);
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
}
.payment-chip:hover {
  border-color: var(--accent-line);
  background: var(--surface-hover);
}
.payment-entry-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.payment-entry-title {
  font-size: 16px;
  font-weight: 850;
  color: var(--ink);
}
.payment-entry-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-muted);
}
.payment-ledger-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--ink-muted);
}
.payment-ledger-badge.ok {
  color: #047857;
  border-color: #a7f3d0;
  background: var(--tint-ok);
}
.payment-ledger-badge.warn {
  color: #92400e;
  border-color: #fde68a;
  background: var(--tint-warn);
}
.payment-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
  margin-bottom: 10px;
}
.payment-mode-tab {
  border: 0;
  border-radius: 6px;
  padding: 9px 10px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 850;
  cursor: pointer;
}
.payment-mode-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.payment-ledger-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-subtle);
  margin-bottom: 12px;
}
.payment-ledger-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.payment-ledger-preview-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  font-size: 12px;
  color: var(--ink);
}
.payment-form-section-title {
  margin: 12px 0 7px;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.payment-form-section-title.compact {
  margin-top: 10px;
}
.payment-main-fields {
  align-items: start;
}
.payment-quick-cats-inline {
  margin-top: 0;
  margin-bottom: 10px;
}
.payment-more-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.payment-more-details summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 850;
  color: var(--ink);
  background: var(--surface-subtle);
}
.payment-more-details summary::-webkit-details-marker {
  display: none;
}
.payment-more-details summary::after {
  content: "+";
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
}
.payment-more-details[open] summary::after {
  content: "-";
}
.payment-advanced-fields {
  padding: 12px;
}

@media (max-width: 760px) {
  .payment-entry-hero {
    display: block;
  }
  .payment-ledger-badge {
    display: inline-flex;
    margin-top: 8px;
  }
  .payment-mode-tabs,
  .payment-ledger-preview-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .payment-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payment-tabs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .payment-summary-grid {
    grid-template-columns: 1fr;
  }
}

.filter-bar .input,
.filter-bar .select,
.scope-select {
  min-height: 34px;
}

.data-table th {
}

.data-table tbody tr:nth-child(even) {
}

.table-meta {
  min-height: 36px;
}

.suggest-menu {
  border-color: #cfd9e6;
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.2);
}

.suggest-item {
  font-weight: 650;
}

.hisab-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.hisab-context-note {
  min-height: 0;
}

.suggest-item:hover,
.suggest-item.active {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.modal-head,
.modal-foot {
}

.toast {
}

.dashboard-v2 {
  gap: 14px;
}

.dashboard-v2 .dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.85fr);
  align-items: stretch;
  gap: 14px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(13, 148, 136, 0.08), rgba(37, 99, 235, 0.05)),
    #ffffff;
}

.dashboard-v2 .dashboard-title {
  font-size: 23px;
  letter-spacing: 0;
}

.dashboard-v2 .dashboard-subtitle {
  max-width: 780px;
  color: var(--ink-muted);
}

.dashboard-v2 .dashboard-hero-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.dashboard-v2 .dashboard-hero-stat {
  min-height: 84px;
  border-color: #d8e3ee;
  background: rgba(255, 255, 255, 0.88);
  text-align: left;
  cursor: pointer;
}

.dashboard-v2 .dashboard-hero-stat:hover {
  border-color: var(--accent-line);
  background: var(--surface);
}

.dash-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

.dash-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 74px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.dash-action-card:hover {
  background: var(--surface-hover);
}

.dash-action-card.primary {
  border-color: rgba(13, 148, 136, 0.38);
  background: var(--tint-accent);
}

.dash-action-card.warn {
  border-color: rgba(163, 90, 0, 0.26);
  background: var(--tint-warn);
}

.dash-action-card.ok {
  border-color: rgba(22, 131, 74, 0.24);
  background: var(--tint-ok);
}

.dash-action-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.dash-action-copy {
  min-width: 0;
}

.dash-action-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.dash-action-sub {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.dashboard-v2 .dash-metric-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

.dashboard-v2 .dash-metric {
  min-height: 124px;
  padding: 13px;
  border-top-width: 0;
  border-left: 4px solid var(--accent);
}

.dashboard-v2 .dash-metric.ok {
  border-left-color: var(--ok);
}

.dashboard-v2 .dash-metric.warn {
  border-left-color: var(--warn);
}

.dashboard-v2 .dash-metric.danger {
  border-left-color: var(--danger);
}

.dashboard-v2 .dash-metric-label {
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: 0;
}

.dashboard-v2 .dash-metric-value {
  font-size: 21px;
}

.dashboard-v2 .dash-metric-icon {
  background: var(--surface-subtle);
}

.dash-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
}

.dash-work-card {
  min-height: 94px;
  padding: 12px;
  text-align: left;
  border-left: 4px solid var(--border-strong);
}

.dash-work-card:hover {
  border-left-color: var(--accent);
  background: var(--surface-hover);
}

.dash-work-card.ok {
  border-left-color: var(--ok);
}

.dash-work-card.warn {
  border-left-color: var(--warn);
}

.dash-work-card.danger {
  border-left-color: var(--danger);
}

.dash-work-label {
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 800;
}

.dash-work-value {
  margin-top: 4px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.dash-work-sub {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 11.5px;
}

.dashboard-v2 .dashboard-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.9fr);
  gap: 14px;
}

.dashboard-v2 .dashboard-main-col,
.dashboard-v2 .dashboard-side-col,
.dashboard-v2 .dashboard-two-col {
  gap: 14px;
}

.dashboard-v2 .dash-panel-body {
  padding: 11px;
}

.dashboard-v2 .dash-progress-row,
.dashboard-v2 .dash-activity-row {
  border-color: #e2e8f0;
  background: var(--surface);
}

.dashboard-v2 .dash-progress-row:hover,
.dashboard-v2 .dash-activity-row:hover {
  border-color: var(--accent-line);
  background: var(--surface-hover);
}

.dashboard-v2 .dashboard-master-strip {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.dashboard-v2 .dashboard-master-pill {
  min-height: 58px;
}

@media (max-width: 1500px) {
  .dashboard-v2 .dash-metric-grid {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
  }
}

@media (max-width: 1180px) {
  .dashboard-v2 .dashboard-hero,
  .dashboard-v2 .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dash-action-grid,
  .dash-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-v2 .dashboard-side-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .topbar {
    align-items: flex-start;
  }

  .dashboard-v2 .dashboard-hero-stats,
  .dashboard-v2 .dash-metric-grid,
  .dashboard-v2 .dashboard-two-col,
  .dashboard-v2 .dashboard-side-col,
  .dashboard-v2 .dashboard-master-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 236px;
    left: -236px;
  }

  .content {
    padding: 14px;
  }

  .topbar {
    padding: 12px 14px;
  }
}

@media (max-width: 620px) {
  .dash-action-grid,
  .dash-work-grid,
  .dashboard-v2 .dash-metric-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-v2 .dashboard-title {
    font-size: 20px;
  }

  .dashboard-v2 .dashboard-hero {
    padding: 13px;
  }

  .dash-action-card,
  .dash-work-card,
  .dashboard-v2 .dash-metric {
    min-height: 0;
  }
}

/* Compact control-room dashboard */
.dashboard-v3 {
  gap: 12px;
}

.dash-command {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(520px, 1.1fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid #d8e3ee;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(14, 116, 144, 0.08), rgba(13, 148, 136, 0.06) 55%, rgba(245, 158, 11, 0.08)),
    #ffffff;
  box-shadow: 0 10px 28px -26px rgba(15, 23, 42, 0.8);
}

.dash-command-main {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.dash-command-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dash-command-brand img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.85);
}

.dash-command-kicker {
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.dash-command-title {
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

.dash-command-sub {
  color: var(--ink-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.dash-command-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.dash-command-stat {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 82px;
  padding: 11px;
  border: 1px solid #d8e3ee;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  text-align: left;
}

.dash-command-stat:hover {
  background: var(--surface);
}

.dash-command-stat span,
.dash-focus-label {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.dash-command-stat b {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.dash-command-stat em {
  color: var(--ink-muted);
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.25;
}

.dash-command-stat.ok,
.dash-focus-card.ok,
.dash-info-row.ok {
  border-left-color: var(--ok);
}

.dash-command-stat.warn,
.dash-focus-card.warn,
.dash-info-row.warn {
  border-left-color: var(--warn);
}

.dash-command-stat.danger,
.dash-focus-card.danger,
.dash-info-row.danger {
  border-left-color: var(--danger);
}

.dash-focus-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(170px, 1fr));
  gap: 9px;
}

.dash-focus-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 90px;
  padding: 11px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.dash-focus-card:hover {
  background: var(--surface-hover);
}

.dash-focus-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  background: var(--tint-accent);
  color: var(--accent-hover);
}

.dash-focus-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dash-focus-value {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.dash-focus-sub {
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.3;
}

.dash-quickbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.dash-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid #d8e3ee;
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
}

.dash-quick-btn:hover {
  border-color: var(--accent-line);
  background: var(--surface-hover);
}

.dash-quick-btn.primary {
  border-color: rgba(13, 148, 136, 0.35);
  background: var(--accent);
  color: var(--accent-ink);
}

.dash-quick-btn.warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: var(--tint-warn);
}

.dash-quick-btn.ok {
  border-color: rgba(22, 131, 74, 0.26);
  background: var(--tint-ok);
}

.dash-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.9fr);
  gap: 12px;
  align-items: start;
}

.dash-board-main,
.dash-board-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.dashboard-v3 .dashboard-two-col {
  gap: 12px;
}

.dashboard-v3 .dash-panel {
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.dashboard-v3 .dash-panel-head {
  padding: 11px 12px;
}

.dashboard-v3 .dash-panel-body {
  gap: 8px;
  padding: 10px;
}

.dash-money-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dash-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-left: 4px solid #cbd5e1;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.dash-info-row.clickable:hover {
  border-color: var(--accent-line);
  background: var(--surface-hover);
}

.dash-info-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dash-info-title {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-info-sub {
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-info-value {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 900;
  white-space: nowrap;
}

.dash-info-track {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-subtle);
  overflow: hidden;
}

.dash-info-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.dash-info-fill.ok { background: var(--ok); }
.dash-info-fill.warn { background: var(--warn); }
.dash-info-fill.danger { background: var(--danger); }

.dash-health-grid {
  display: grid;
  gap: 8px;
}

.dash-health-row {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
}

.dash-health-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
}

.dash-health-top b {
  color: var(--ink);
}

.dash-health-track {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-subtle);
  overflow: hidden;
}

.dash-health-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.dash-health-fill.ok { background: var(--ok); }
.dash-health-fill.warn { background: var(--warn); }
.dash-health-fill.danger { background: var(--danger); }
.dash-health-fill.accent { background: var(--accent); }

.dash-empty.compact {
  min-height: 58px;
  padding: 12px;
}

.dashboard-master-strip-v3 {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
}

@media (max-width: 1500px) {
  .dash-focus-grid {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
  }
}

@media (max-width: 1220px) {
  .dash-command,
  .dash-board-grid {
    grid-template-columns: 1fr;
  }

  .dash-board-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dash-command-stat-grid,
  .dash-focus-grid,
  .dash-money-grid,
  .dash-board-side,
  .dashboard-master-strip-v3,
  .dashboard-v3 .dashboard-two-col {
    grid-template-columns: 1fr;
  }

  .dash-command-title {
    font-size: 21px;
  }
}

@media (max-width: 620px) {
  .dash-command {
    padding: 11px;
  }

  .dash-command-brand img {
    width: 42px;
    height: 42px;
  }

  .dash-info-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .dash-info-value {
    white-space: normal;
  }
}

/* Dashboard v4 - accounting-led control room */
.dashboard-v4 {
  gap: 14px;
}

.dash-v4-hero {
  display: grid;
  grid-template-columns: minmax(340px, 1.2fr) minmax(360px, 0.8fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
}

.dash-v4-hero-main,
.dash-v4-hero-side {
  min-width: 0;
}

.dash-v4-brandline {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.dash-v4-brandline img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 10px;
  box-shadow: 0 12px 24px -18px rgba(15, 23, 42, 0.75);
}

.dash-v4-kicker {
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.dash-v4-brandline h2 {
  margin: 3px 0 5px;
  color: var(--ink);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

.dash-v4-brandline p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.dash-v4-hero-side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dash-v4-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px;
}

.dash-v4-metric {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  min-height: 118px;
  padding: 13px;
  border-left: 5px solid var(--accent);
  color: var(--ink);
  text-align: left;
}

.dash-v4-metric:hover {
  border-color: var(--accent-line);
  background: var(--surface-hover);
}

.dash-v4-metric-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: var(--tint-accent);
  color: var(--accent-hover);
}

.dash-v4-metric-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dash-v4-metric-label,
.dash-v4-fact span,
.dash-v4-mini-title {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.dash-v4-metric-value {
  font-size: 24px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.dash-v4-metric-sub {
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.dash-v4-metric.ok,
.dash-v4-fact.ok,
.dash-v4-alert.ok {
  border-left-color: var(--ok);
}

.dash-v4-metric.warn,
.dash-v4-fact.warn,
.dash-v4-alert.warn {
  border-left-color: var(--warn);
}

.dash-v4-metric.danger,
.dash-v4-fact.danger,
.dash-v4-alert.danger {
  border-left-color: var(--danger);
}

.dash-v4-metric.accent,
.dash-v4-fact.accent,
.dash-v4-alert.accent {
  border-left-color: var(--accent);
}

.dash-v4-flow-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 9px;
}

.dash-v4-fact {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 76px;
  padding: 10px 11px;
  border-left: 4px solid #94a3b8;
  color: var(--ink);
  text-align: left;
}

.dash-v4-fact:hover {
  border-color: var(--accent-line);
  background: var(--surface-hover);
}

.dash-v4-fact b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.dash-v4-fact em {
  color: var(--ink-muted);
  font-size: 11.2px;
  font-style: normal;
  line-height: 1.25;
}

.dash-v4-alert-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 9px;
}

.dash-v4-alert {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px;
  border-left: 4px solid var(--accent);
  color: var(--ink);
  text-align: left;
}

.dash-v4-alert:hover {
  border-color: var(--accent-line);
  background: var(--surface-hover);
}

.dash-v4-alert-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--accent-hover);
}

.dash-v4-alert-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dash-v4-alert-copy b {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-v4-alert-copy span {
  color: var(--ink-muted);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-v4-alert strong {
  color: var(--ink);
  font-size: 12.5px;
  white-space: nowrap;
}

.dash-v4-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.82fr);
  gap: 12px;
  align-items: start;
}

.dash-v4-main,
.dash-v4-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.dashboard-v4 .dash-panel {
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.dashboard-v4 .dash-panel-head {
  padding: 11px 12px;
}

.dashboard-v4 .dash-panel-body {
  gap: 10px;
  padding: 10px;
}

.dash-v4-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dash-v4-mini-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.dash-v4-mini-title {
  padding: 0 2px;
}

.dash-v4-mini-body {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.dash-v4-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dash-v4-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dash-v4-actions .dash-quick-btn {
  justify-content: flex-start;
  width: 100%;
}

.dash-v4-master-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (max-width: 1500px) {
  .dash-v4-metric-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }

  .dash-v4-flow-grid {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
  }
}

@media (max-width: 1220px) {
  .dash-v4-hero,
  .dash-v4-layout {
    grid-template-columns: 1fr;
  }

  .dash-v4-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .dash-v4-hero-side,
  .dash-v4-metric-grid,
  .dash-v4-flow-grid,
  .dash-v4-mini-grid,
  .dash-v4-side,
  .dash-v4-health-grid,
  .dash-v4-actions {
    grid-template-columns: 1fr;
  }

  .dash-v4-brandline h2 {
    font-size: 21px;
  }
}

@media (max-width: 620px) {
  .dash-v4-hero,
  .dash-v4-metric,
  .dash-v4-fact,
  .dash-v4-alert {
    padding: 10px;
  }

  .dash-v4-brandline {
    align-items: flex-start;
  }

  .dash-v4-brandline img {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .dash-v4-metric-value {
    font-size: 21px;
  }

  .dash-v4-alert {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .dash-v4-alert strong {
    grid-column: 2;
  }
}

/* Compact top navigation for daily office use */
.shell-topnav {
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

.shell-topnav .main {
  width: 100%;
  height: auto;
  flex: 1;
  min-height: 0;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  /* var(--ink), not the #dbe7f3 left over from when this bar was deep navy.
     The bar became var(--surface) - white in the light theme - several layers
     later, and this pale blue-grey stayed behind as the inherited colour:
     1.25:1 against its own background. Every text child happens to set its own
     colour, so nothing is invisible today; add one span that does not and it
     would be. A container's ink has to be readable on the container. */
  color: var(--ink);
}

.topnav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}

.topnav-logo {
  font-weight: 800;
}

.brand-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-logo,
.sidebar-logo,
.topnav-logo {
  padding: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.7);
}

.topnav-logo {
  flex: 0 0 36px;
}

.sidebar-logo {
  width: 36px;
  height: 36px;
}

.topnav-brand-copy,
.topnav-user-copy,
.section-hub-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topnav-name,
.topnav-user-name {
  font-size: 12.5px;
  line-height: 1.1;
}

.topnav-sub,
.topnav-user-role {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.1;
}

.topnav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  /* NOWRAP, and it is App.fitNav's job to make that true rather than to hide
     things. Anything that does not fit is moved into the overflow group, so
     the bar is exactly one row high at 1920 and at 360.

     NO overflow:hidden here, however tempting it looks as a belt-and-braces
     against a transient one-frame overflow: the dropdown panels are absolutely
     positioned children of this element, so hiding the overflow clips every
     one of them and the menus simply stop appearing. (Phones hid the symptom -
     their panels are position:fixed, which escapes the clip.) fitNav runs
     synchronously after mount and on the next frame after a resize, so there
     is nothing to clip anyway. */
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}

.topnav-group {
  position: relative;
}

.topnav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topnav-trigger .nav-icon {
  width: 13px;
  height: 13px;
  opacity: 0.75;
}

.topnav-dropdown {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  display: none;
  width: 258px;
  max-height: min(540px, calc(100vh - 130px));
  overflow: auto;
  color: var(--ink);
  z-index: 90;
}

/* :focus-within is what makes these reachable by keyboard. .is-closed suppresses
   it after Escape - returning focus to the trigger leaves focus inside the
   group, so without this the panel would spring straight back open. .is-open is
   the explicit state the overflow trigger toggles, which is also the only way
   the menu opens on a touch screen, where there is no hover. */
.topnav-group:hover .topnav-dropdown,
.topnav-group.is-open .topnav-dropdown,
.topnav-group:focus-within:not(.is-closed) .topnav-dropdown {
  display: grid;
  gap: 3px;
}

.topnav-group:nth-last-child(-n+2) .topnav-dropdown {
  right: 0;
  left: auto;
}

.topnav-link {
  text-decoration: none;
  border: 1px solid transparent;
}

.topnav-link:hover,
.topnav-link.active {
  box-shadow: none;
}

.topnav-link .nav-icon {
  width: 15px;
  height: 15px;
}

.topnav-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  justify-content: flex-end;
}

.topnav-avatar {
  flex: 0 0 28px;
}

.topnav-logout:hover {
}

.shell-topnav .page-title {
  font-size: 16px;
}

.section-hub {
  display: grid;
  gap: 12px;
}

.section-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.section-hub-title {
  font-size: 18px;
}

.section-hub-sub {
  margin-top: 2px;
  font-size: 12px;
}

.section-hub-grid {
  display: grid;
}

.section-hub-card {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
}

.section-hub-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  border-radius: 8px;
}

.section-hub-card-title {
  color: var(--ink);
}

.section-hub-card-sub {
  margin-top: 2px;
  font-size: 11.5px;
}

@media (max-width: 1180px) {
  /* The menu no longer drops to its own row here. It used to, which is what
     made the bar two rows tall on a 1366 laptop before anything had even
     wrapped; the overflow group now absorbs the shortfall on the same line. */
  .topnav-menu {
    justify-content: flex-start;
  }

  .topnav-user {
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  .primary-nav {
    padding: 8px 10px;
  }

  .topnav-brand {
    min-width: 0;
  }

  .topnav-brand-copy,
  .topnav-user-copy {
    display: none;
  }

  .topnav-user {
    min-width: 0;
    gap: 6px;
  }

  .topnav-trigger {
    padding: 6px 8px;
  }

  .topnav-dropdown {
    position: fixed;
    /* Clears the bar, which is now one row at every width. It was 88px, set
       when the bar was two rows tall here. */
    top: 62px;
    right: 10px !important;
    left: 10px !important;
    width: auto;
    max-height: calc(100vh - 78px);
  }

  .shell-topnav .topbar {
    gap: 8px;
  }

  .shell-topnav .content {
    padding: 12px;
  }
}

.complete-export-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
}

.complete-export-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.complete-export-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, #0f766e, #2563eb);
}

.complete-export-title {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.complete-export-sub {
  max-width: 980px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.template-field-head,
.template-field-row {
  display: grid;
  grid-template-columns: minmax(128px, 1.15fr) minmax(150px, 1.25fr) 72px 72px 72px 72px 86px 68px 72px 92px;
  gap: 8px;
  align-items: center;
}

.template-field-head {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.template-field-row {
  padding: 8px 10px;
  border-inline: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.template-field-row:last-child {
  border-radius: 0 0 8px 8px;
}

.template-field-row .input,
.template-field-row .select {
  min-width: 0;
}

.template-note.warn {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(180, 83, 9, .26);
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  background: rgba(245, 158, 11, .08);
  color: var(--text);
  font-size: 13px;
}

.access-control-wrap {
  max-height: 68vh;
  overflow: auto;
}

.access-control-table {
  min-width: 980px;
}

.access-control-table th,
.access-control-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.access-control-table td:first-child {
  min-width: 230px;
  white-space: normal;
}

.access-control-table .select {
  min-width: 96px;
  padding: 6px 8px;
}

@media (max-width: 980px) {
  .template-field-head,
  .template-field-row {
    grid-template-columns: minmax(130px, 1fr) minmax(170px, 1fr) repeat(4, 70px) 86px 68px 72px 92px;
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  .complete-export-card {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .complete-export-card .btn {
    width: 100%;
    justify-content: center;
  }
}

.tracking-fast-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.tracking-fast-toolbar .select {
  width: 150px;
}

.tracking-fast-scroll {
  overflow: auto;
  max-height: calc(100vh - 330px);
  isolation: isolate;
}

.tracking-fast-table {
  width: 100%;
  min-width: 1440px;
}

.tracking-fast-table th {
  padding: 10px 8px;
  background-clip: padding-box;
  text-align: left;
}

.tracking-fast-table th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--border-strong);
}

.tracking-fast-table td {
  padding: 7px 8px;
  vertical-align: middle;
}

.tracking-fast-table .input,
.tracking-fast-table .select {
  height: 34px;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
}

.tracking-fast-table td:nth-child(5) .input,
.tracking-fast-table td:nth-child(12) .input {
  min-width: 190px;
}

@media (max-width: 760px) {
  .tracking-fast-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .tracking-fast-toolbar .btn,
  .tracking-fast-toolbar .select {
    flex: 1 1 160px;
  }

  .tracking-fast-scroll {
    max-height: calc(100vh - 380px);
  }
}

/* Advanced audit log */
.audit-dashboard {
  display: grid;
  gap: 14px;
}

/* Grid items default to min-width:auto, which means "never narrower than my
   content". .audit-summary-grid is an item of THIS grid, so it happily grew to
   1222px inside a 1024px page and dragged the whole content area into a
   sideways scroll. Letting the row shrink is what makes the tiles below reflow
   instead of overflow. */
.audit-dashboard > * {
  min-width: 0;
}

.audit-summary-grid {
  display: grid;
  /* auto-fit, and the items are allowed to shrink.
     `repeat(5, ...)` insisted on five columns whatever the width, and a grid
     item's default min-width is auto - it will not go narrower than its own
     content - so a long figure in one tile pushed the whole grid to 1222px
     inside a 1024px page. That made #content itself scroll sideways, taking
     the filters and the toolbar out of view along with it: the one thing a
     register must never do. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.audit-summary-grid > * {
  min-width: 0;
}

.audit-summary-grid .kpi {
  min-height: 104px;
}

.audit-filter-panel {
  border-left: 4px solid var(--accent);
}

.audit-filter-title,
.audit-filter-actions,
.audit-accuracy-head,
.audit-pager,
.audit-inline-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.audit-filter-title {
  flex-wrap: wrap;
}

.audit-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
}

.audit-filter-grid .col-2 {
  grid-column: span 2;
}

.audit-filter-actions {
  flex-wrap: wrap;
}

.audit-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.audit-pager {
  padding: 10px 12px;
}

.audit-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.audit-detail-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.audit-detail-title {
  margin-bottom: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.audit-kv {
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}

.audit-kv:last-child {
  border-bottom: 0;
}

.audit-kv-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.audit-kv-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
}

.audit-json {
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
  color: #0f172a;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.audit-raw summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
}

.audit-accuracy-list {
  display: grid;
  gap: 10px;
}

.audit-accuracy-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.audit-accuracy-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.audit-changed-table td {
  max-width: 340px;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .audit-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audit-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .audit-summary-grid,
  .audit-detail-grid,
  .audit-filter-grid {
    grid-template-columns: 1fr;
  }

  .audit-filter-grid .col-2 {
    grid-column: span 1;
  }

  .audit-kv {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* ==== ui-refresh.css (639 lines) ==== */
/* Global UI refresh layer.
   Loaded after app.css so the business logic stays untouched. */


body {
}

/* Navigation */
.shell-topnav,
.shell,
.main,
.shell-topnav .main {
  background: var(--bg);
}

.primary-nav {
  min-height: 54px;
  padding: 8px 16px;
}

.topnav-brand {
  min-width: 238px;
}

.topnav-logo {
  border: 1px solid rgba(255, 255, 255, .14);
}

.topnav-sub,
.topnav-user-role {
}

.topnav-trigger {
}

.topnav-dropdown {
}

.topnav-link:hover,
.topnav-link.active {
  border-color: rgba(15, 118, 110, .18);
}

.topnav-user {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
}

.topnav-logout,
.btn-logout {
  border-radius: 7px;
}

/* Page frame */
.shell-topnav .topbar,
.topbar {
  min-height: 58px;
  border-bottom: 1px solid var(--border);
}

.topbar-left {
  gap: 10px;
}

.crumb {
  font-weight: 800;
}

.page-title,
#topbar-title {
  color: var(--text);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
}

.shell-topnav .content,
.content {
  padding: 16px 18px 24px;
}

.back-btn,
.topbar-back {
  min-height: 34px;
  border-radius: 8px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}

.back-btn:hover,
.topbar-back:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* Common surfaces */
.card,
.table-card,
.filter-bar,
.bulk-actions,
.section-head,
.detail-head,
.import-zone,
.empty-state,
.section-hub-card,
.complete-export-card,
.ledger-index-hero,
.ledger-index-list,
.tracking-fast-card,
.dash-v4-card,
.dash-v4-hero,
.dash-v4-panel,
.dash-v4-alert,
.dash-v4-metric,
.dash-v4-fact {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.card,
.table-card,
.tracking-fast-card {
  overflow: hidden;
}

.card-pad,
.section-head,
.detail-head {
  padding: 16px;
}

.card-title,
.section-title,
.detail-title,
.modal-title {
  color: var(--text);
  font-weight: 850;
}

.card-sub,
.section-sub,
.detail-sub,
.modal-kicker {
  color: var(--muted);
}

.kpi-grid,
.dashboard-grid,
.section-hub-grid,
.ledger-index-stats {
  gap: 12px;
}

.kpi,
.ledger-index-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0, #fbfdff 100%);
}

.kpi-value,
.ledger-index-stat-value,
.dash-v4-metric-value {
  color: var(--text);
}

/* Forms */
.input,
.select,
textarea,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="password"],
input[type="search"],
select {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background-color: var(--surface);
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.input:hover,
.select:hover,
textarea:hover,
input:hover,
select:hover {
  border-color: var(--border-strong);
}

.input[disabled],
.select[disabled],
textarea[disabled],
input[disabled],
select[disabled] {
}

.filter-bar {
  align-items: end;
  padding: 10px 12px;
}

.search-box {
  border-radius: 8px;
}

.field label,
.form-group label,
label {
  color: #334155;
  font-weight: 800;
}

/* Tags (button styling lives in the single .btn system above) */
.pill,
.badge,
.tag,
.ledger-index-activity-pill,
.ledger-index-chip {
  border-radius: 999px;
  font-weight: 800;
}

/* Tables */
.table-scroll,
.tracking-fast-scroll,
.access-control-wrap {
  border-radius: var(--radius-lg);
  scrollbar-color: #aab8c8 #eef3f8;
}

.table-card table,
.data-table,
.tracking-fast-table,
.access-control-table {
  border-collapse: separate;
  border-spacing: 0;
}

.data-table thead tr,
.tracking-fast-table thead tr,
thead tr {
  background: var(--surface-subtle);
}

.data-table th,
.tracking-fast-table th,
th {
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.data-table tbody tr:nth-child(even),
.tracking-fast-table tbody tr:nth-child(even) {
}

.data-table tbody tr:has(input[data-bulk-id]:checked),
.tracking-fast-table tr.is-dirty td {
  background: var(--tint-warn);
}

.data-table .input,
.data-table .select,
.tracking-fast-table .input,
.tracking-fast-table .select {
  min-height: 32px;
}

/* Modals */
.modal-bg {
}

.modal-head {
}

.modal-foot {
}

/* Section hub pages */
.section-hub-card {
}

.section-hub-card-icon {
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* Dashboard and ledger pages */
.dash-v4-hero,
.ledger-index-hero {
}

.dash-v4-alert {
  box-shadow: var(--shadow-sm);
}

.ledger-index-row {
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform .1s ease, border-color .14s ease, background .14s ease;
}

.ledger-index-row:hover,
.ledger-index-row:focus {
  border-color: rgba(15, 118, 110, .28);
  transform: translateY(-1px);
}

/* Daily tracking keeps headers readable while scrolling. */
.tracking-fast-scroll {
}

.tracking-fast-table th {
  z-index: 12;
}

/* Print/export screens should stay crisp. */


/* Mobile/tablet polish */
@media (max-width: 980px) {
  .primary-nav {
    padding: 8px 10px;
  }

  .topnav-brand {
    min-width: 0;
  }

  .shell-topnav .content,
  .content {
    padding: 12px;
  }

  .kpi-grid,
  .dashboard-grid,
  .ledger-index-stats {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    background: var(--bg);
    font-size: 13px;
  }

  .primary-nav {
    gap: 8px;
  }

  .topnav-menu {
    padding-top: 3px;
  }

  .shell-topnav .topbar,
  .topbar {
    padding: 10px;
  }

  .page-title,
  #topbar-title {
    font-size: 16px;
  }

  .filter-bar,
  .card-pad,
  .section-head,
  .detail-head {
    padding: 12px;
  }

  .btn,
  .input,
  .select,
  input,
  select {
    min-height: 38px;
  }

  .modal-body {
  }
}

/* ==== fast-ui.css (180 lines) ==== */
/* Fast UI layer for the production PCM website. Keep this lightweight. */

html,
body {
}

.main,
.content {
  min-width: 0;
}

.content {
  contain: layout style;
}

.card,
.section-hub,
.section-hub-card,
.filter-bar,
.table-card {
}

.section-hub-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.table-scroll {
  overflow: auto;
  overscroll-behavior-y: auto;
}

.data-table th,
.data-table td {
  vertical-align: middle;
}

.data-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Do NOT expand cells on hover (the old rule set white-space:normal on
   td:hover, so a long cell under the cursor wrapped, the row grew, the cell
   slid out from under the pointer, un-hovered, shrank back, re-hovered...
   an endless grow/shrink loop = the table "flickering" seen on every page.
   Full cell text now shows via the native title tooltip instead. */

.data-table thead th {
}

.table-heading-row th {
  top: 0;
}

.table-filter-row th {
  top: 38px;
}

.table-filter-input {
  min-height: 28px;
  padding: 4px 8px;
}

.table-meta {
  /* OPAQUE, and from a token. This bar is position:sticky at the bottom of a
     register (a deliberate rule - the Columns button and the pager must never
     scroll out of sight), so at 96% alpha with a 6px blur every row passing
     underneath it showed through as a smear. No row is ever LOST behind it -
     the scroller reserves the height, measured - but a strip of half-legible
     data at the bottom of the screen reads as a rendering fault.
     The literal white was also wrong in the dark theme and was being patched
     by a second dark-only rule further down. */
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.table-pager,
.table-meta {
  gap: 8px;
}

.table-pager .btn,
.table-pager button,
.table-page-size {
  min-height: 30px;
}

.btn,
button,
select,
input,
textarea {
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.btn:hover,
button:hover {
  transform: none;
}

.topnav-dropdown {
  will-change: auto;
}

.topbar,
.primary-nav {
  transform: translateZ(0);
}

.modal-body {
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
  }
}

@media (max-width: 760px) {
  .table-scroll {
  }

  .section-hub-grid {
  }
}

/* ==== premium-ui.css (878 lines) ==== */
/* Premium UI layer: visual/customization only, no business logic. */


html[data-theme="dark"] body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .content {
}

body {
  accent-color: var(--premium-accent);
}

/* :not(.btn-sm) matters. This rule sets a 34px comfortable touch target and it
   sits several layers below `.btn-sm { min-height: 28px }`, at the same
   specificity - so it won, and the small button size has never actually been
   any shorter than the default one. It changed the padding and the type size
   and nothing else. Phones are unaffected either way: the pointer:coarse block
   in mobile.css gives .btn-sm a 36px target regardless. */
.topnav-trigger,
.topnav-link,
.topnav-tool,
.topnav-logout,
.btn:not(.btn-sm),
button:not(.btn-sm) {
  min-height: 34px;
}

.topnav-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.topnav-tool:hover,
.topnav-tool:focus-visible {
  background: rgba(255, 255, 255, .14);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .modal-head,
html[data-theme="dark"] .modal-foot {
  background: rgba(23, 32, 51, .94);
}

/* .table-meta is NOT in the list above any more. It is sticky at the bottom of
   a register, and at .94 alpha every row that passed under it showed through.
   The light rule already takes var(--surface), which the dark theme answers -
   so this needed removing, not re-tinting. */

.card,
.kpi,
.table-card,
.filter-bar,
.section-hub,
.section-hub-card,
.dash-panel,
.dashboard-hero,
.dashboard-master-pill {
  background: var(--premium-panel);
  border-color: var(--premium-line);
  box-shadow: var(--premium-shadow-soft);
}

.card-title,
.section-title,
.page-title,
.kpi-value,
.dashboard-title,
.dash-panel-title {
  color: var(--premium-ink);
}

.card-sub,
.section-sub,
.crumb,
.kpi-label,
.kpi-sub,
.field-hint,
.empty-state-sub,
.dashboard-subtitle {
  color: var(--premium-muted);
}

.input,
input,
select,
textarea {
  background: var(--premium-panel);
  color: var(--premium-ink);
}

.data-table {
}

.data-table tbody tr:nth-child(even) td {
}

html[data-theme="dark"] .data-table tbody tr:hover td {
}

.table-filter-input {
  background: var(--premium-panel);
}

.table-count {
  color: var(--premium-ink);
  font-weight: 700;
}

.is-column-hidden {
  display: none;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--premium-line);
  border-radius: 8px;
  background: var(--premium-panel-2);
  font-size: 12px;
  line-height: 1.45;
}

.column-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.column-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--premium-line);
  border-radius: 8px;
  background: var(--premium-panel-2);
  color: var(--premium-ink);
  cursor: pointer;
}

.column-choice:hover {
  border-color: var(--premium-line-strong);
}

.modal {
  color: var(--premium-ink);
}

.toast {
}

.login-card {
  border-color: var(--premium-line);
}

html[data-density="compact"] .content {
  padding-top: 10px;
}

html[data-density="compact"] .card-pad,
html[data-density="compact"] .modal-body {
  padding: 14px;
}

html[data-density="compact"] .filter-bar {
  padding: 10px 12px;
  gap: 8px;
}

html[data-density="compact"] .data-table th,
html[data-density="compact"] .data-table td {
  padding-top: 7px;
  padding-bottom: 7px;
}

html[data-density="compact"] .table-filter-input {
  min-height: 26px;
}

html[data-density="compact"] .kpi {
  padding: 12px;
}

@media (max-width: 860px) {
  .settings-grid,
  .column-choice-grid {
    grid-template-columns: 1fr;
  }

  .topnav-tool span {
    display: none;
  }

  .topnav-tool {
    width: 36px;
    justify-content: center;
    padding-inline: 8px;
  }
}

@media (max-width: 640px) {
  .topbar {
    position: relative;
  }

  .table-meta {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .table-pager {
    width: 100%;
    justify-content: space-between;
  }
}

/* Premium dashboard command center */
.dashboard-v5 {
  display: grid;
  gap: 16px;
  color: var(--premium-ink);
}

.dash-v5-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 16px;
  padding: 18px;
}

.dash-v5-kicker {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.dash-v5-hero h1 {
  margin: 8px 0 6px;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: 0;
}

.dash-v5-hero p {
  max-width: 760px;
  margin: 0;
  line-height: 1.5;
}

.dash-v5-search {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 560px;
  margin-top: 16px;
}

.dash-v5-search .input {
  min-width: 0;
  flex: 1;
}

.dash-v5-hero-controls {
  display: grid;
  align-content: start;
}

.dash-v5-view-select,
.dash-v5-period-select {
  width: 100%;
}

.dash-v5-command-numbers {
  display: grid;
  grid-template-columns: 1fr;
}

.dash-v5-actions {
  display: flex;
  flex-wrap: wrap;
}

.dash-v5-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}

.dash-v5-action.primary {
}

.dash-v5-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dash-v5-stat {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--premium-line);
  color: var(--premium-ink);
  text-align: left;
}

button.dash-v5-stat {
  cursor: pointer;
}

button.dash-v5-stat:hover {
  border-color: var(--premium-line-strong);
  transform: translateY(-1px);
}

.dash-v5-stat-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.dash-v5-stat-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dash-v5-stat-copy b {
}

.dash-v5-stat-copy em {
  font-size: 12px;
  font-style: normal;
}

.dash-v5-stat.accent,
.dash-v5-alert.accent {
  border-left: 4px solid #2563eb;
}

.dash-v5-stat.ok,
.dash-v5-alert.ok {
  border-left: 4px solid #0f766e;
}

.dash-v5-stat.warn,
.dash-v5-alert.warn {
  border-left: 4px solid #d97706;
}

.dash-v5-stat.danger,
.dash-v5-alert.danger {
  border-left: 4px solid #dc2626;
}

.dash-v5-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dash-v5-panel {
  min-width: 0;
  overflow: hidden;
}

.dash-v5-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--premium-panel-2);
}

.dash-v5-panel-title {
  font-size: 15px;
}

.dash-v5-panel-sub {
  margin-top: 3px;
  font-size: 12px;
}

.dash-v5-panel-body {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
}

.dash-v5-alert {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  color: var(--premium-ink);
  text-align: left;
}

button.dash-v5-alert {
  cursor: pointer;
}

.dash-v5-alert-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.dash-v5-alert-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dash-v5-alert-copy span {
  color: var(--premium-muted);
  font-size: 12px;
}

.dash-v5-alert strong {
  font-size: 13px;
}

.dash-v5-split,
.dash-v5-finance-grid,
.dash-v5-compliance-grid {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
}

.dash-v5-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dash-v5-ring-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 162px;
  padding: 14px;
  color: var(--premium-ink);
  text-align: left;
  cursor: pointer;
}

.dash-v5-ring {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  position: relative;
}

.dash-v5-ring::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--premium-panel);
}

.dash-v5-ring span,
.dash-v5-ring em {
  position: relative;
  z-index: 1;
}

.dash-v5-ring span {
  font-weight: 900;
  font-size: 22px;
}

.dash-v5-ring em {
  margin-top: 22px;
  color: var(--premium-muted);
  font-size: 11px;
  font-style: normal;
}

.dash-v5-ring-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.dash-v5-ring-list div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  color: var(--premium-muted);
  font-size: 12px;
}

.dash-v5-ring-list i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dash-v5-bars {
  display: grid;
  gap: 10px;
}

.dash-v5-bar-row {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--premium-line);
  border-radius: 10px;
  background: var(--premium-panel-2);
  color: var(--premium-ink);
  text-align: left;
}

.dash-v5-bar-label,
.dash-v5-bar-sub {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
}

.dash-v5-bar-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.dash-v5-bar-sub {
  color: var(--premium-muted);
}

.dash-v5-bar-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .23);
  overflow: hidden;
}

.dash-v5-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #2563eb);
}

.dash-v5-table-wrap {
  overflow: auto;
  border: 1px solid var(--premium-line);
  border-radius: 10px;
}

.dash-v5-table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.dash-v5-table th,
.dash-v5-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--premium-line);
  background: var(--premium-panel);
  text-align: left;
  white-space: nowrap;
}

.dash-v5-table th {
  color: var(--premium-muted);
  font-size: 11px;
  text-transform: uppercase;
  background: var(--premium-panel-2);
}

.dash-v5-table tr:last-child td {
  border-bottom: 0;
}

.dash-v5-table tr:hover td {
  background: rgba(15, 118, 110, .07);
}

.dash-v5-table .right {
  text-align: right;
}

.dash-v5-master-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.dash-v5-master-pill {
  min-height: 72px;
}

.dash-v5-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.dash-v5-widget-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--premium-line);
  border-radius: 8px;
  background: var(--premium-panel-2);
  cursor: pointer;
}

.dash-v5-error {
  max-width: 620px;
}

html[data-density="compact"] .dash-v5-kpis {
  gap: 8px;
}

html[data-density="compact"] .dash-v5-stat {
  min-height: 86px;
  padding: 11px;
}

html[data-density="compact"] .dash-v5-panel-body {
  padding: 11px;
}

@media (max-width: 1240px) {
  .dash-v5-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dash-v5-grid,
  .dash-v5-three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .dash-v5-hero,
  .dash-v5-split,
  .dash-v5-finance-grid,
  .dash-v5-compliance-grid {
    grid-template-columns: 1fr;
  }

  .dash-v5-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-v5-master-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .dash-v5-hero {
    padding: 14px;
  }

  .dash-v5-hero h1 {
    font-size: 23px;
  }

  .dash-v5-search,
  .dash-v5-actions {
    align-items: stretch;
  }

  .dash-v5-search,
  .dash-v5-actions,
  .dash-v5-action {
    width: 100%;
  }

  .dash-v5-kpis,
  .dash-v5-master-strip,
  .dash-v5-widget-grid {
    grid-template-columns: 1fr;
  }

  .dash-v5-stat {
    min-height: 88px;
  }

  .dash-v5-ring-card {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* ==== erp-theme.css (608 lines) ==== */
/* ============================================================
   ERP THEME - Poonam Cargo Movers
   Applies the PCM-ERP design system (blue/slate, gradient brand,
   14px cards, chip pills, sticky table heads, ERP dark mode).
   Visual layer only - loaded LAST, overrides app/ui-refresh/fast/premium.
   Backup of previous UI: /erp-ui-backup-20260611-042223
   ============================================================ */

/* --- 1. Design tokens (light) --- */

/* --- 2. Design tokens (dark) - ERP dark palette --- */

/* --- 3. Base --- */
html { background: var(--bg); }
body {
  background: var(--bg);
}
::selection { }
html[data-theme="dark"] ::selection { background: rgba(96, 165, 250, .3); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }
.boot { color: var(--muted); }

/* --- 4. Primary nav -> ERP white sticky topbar --- */
.primary-nav {
  position: sticky;
  top: 0;
  z-index: 80;
}
.topnav-brand { background: none; }
.topnav-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.topnav-logo .brand-logo-img { width: 100%; height: 100%; border-radius: 10px; }
.topnav-name {
  font-weight: 800;
  font-size: .92rem;
  line-height: 1.1;
  white-space: nowrap;
}
.topnav-sub {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.topnav-trigger {
  border: 1px solid transparent;
  border-bottom: 2.5px solid transparent;
  background: none;
  font-size: .88rem;
  padding: 9px 13px;
  white-space: nowrap;
}
.topnav-trigger:hover,
.topnav-group:hover .topnav-trigger,
.topnav-group:focus-within .topnav-trigger {
  border-color: transparent;
  border-bottom-color: transparent;
}
.topnav-group.active .topnav-trigger {
  border-color: transparent;
  border-bottom-color: var(--accent);
}
.topnav-dropdown-head {
  padding: 7px 11px 4px;
}
.topnav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  font-size: .88rem;
  font-weight: 500;
  white-space: nowrap;
}
.topnav-link.active { font-weight: 700; }
.topnav-tool,
.topnav-logout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 11px;
  color: var(--ink-muted);
  font-size: .85rem;
  font-weight: 600;
}
.topnav-tool:hover,
.topnav-logout:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}
.topnav-user-name { font-weight: 700; }
.user-avatar,
.topnav-avatar {
}

/* --- 5. Page header bar --- */
.topbar {
  border-bottom: 1px solid var(--border);
}
.page-title {
  color: var(--ink);
}
.section-title { font-weight: 800; letter-spacing: 0; }

/* --- 6. Buttons: consolidated into the single .btn system --- */
.back-btn { border-radius: 9px; }

/* --- 7. Inputs & forms --- */
.input, .select, .textarea,
input[type="text"], input[type="number"], input[type="date"], input[type="month"],
input[type="search"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
  border: 1px solid var(--border-strong);
}
.field-label, .label {
  color: var(--ink-muted);
}
.field-hint { color: var(--ink-subtle); }
.search-box input { background: var(--surface-alt); }
.search-box input:focus { background: var(--surface); }

/* --- 8. Cards & KPIs --- */
.card, .table-card, .section-hub-card {
}
.kpi-grid { }
.kpi:hover { }
.kpi::before {
  left: 0;
  top: 0;
  bottom: 0;
  height: auto;
  border-radius: 4px 0 0 4px;
}
.kpi:nth-child(6n+2)::before { background: var(--ok); }
.kpi:nth-child(6n+3)::before { background: var(--warn); }
.kpi:nth-child(6n+4)::before { background: var(--erp-purple); }
.kpi:nth-child(6n+5)::before { background: var(--erp-cyan); }
.kpi:nth-child(6n)::before { background: var(--erp-pink); }
.kpi-value {
}
.kpi-sub { font-size: .73rem; }

/* --- 9. Pills -> ERP chips --- */
.pill {
}
.pill.warn { }
.pill.accent { }
.user-pill { border-radius: 99px; }

/* --- 10. Tables --- */
table { font-variant-numeric: tabular-nums; }
table th {
  border-bottom: 1px solid var(--border);
}
table td { border-bottom: 1px solid var(--border); }
.table-sort-arrow { color: var(--accent); }
.tr-empty { color: var(--ink-subtle); }
.table-meta, .table-pager-label { color: var(--ink-muted); }
.table-pager button {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
}

/* --- 11. Tabs --- */
.tabs { border-bottom: 1px solid var(--border); gap: 4px; }
.tab {
  padding: 8px 15px;
  font-size: .87rem;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-radius: 0;
  white-space: nowrap;
}
.tab.active {
  background: none;
}

/* --- 12. Modals --- */
.modal-bg {
}
@keyframes erp-pop {
  from { transform: scale(.97); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-kicker {
  font-size: .7rem;
  text-transform: uppercase;
}
.modal-close { }

/* --- 13. Toasts --- */
.toast {
  background: var(--ink);
  color: var(--surface);
  font-weight: 600;
}
.toast.ok { background: var(--ok); color: #fff; }
.toast.danger { background: var(--danger); color: #fff; }
.toast.warn { background: var(--warn); color: #fff; }

/* --- 14. Login --- */
.login-page {
}
.login-card {
  padding: 34px 30px;
}
.login-logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
}
.login-sub { }
.login-creds { background: var(--surface-alt); color: var(--ink-muted); border-radius: 10px; }
.login-creds b { color: var(--ink); }

/* --- 15. Misc --- */
.empty-state { }
.filter-bar {
}
.bar-track { background: var(--surface-alt); border-radius: 99px; }
.bar-fill { border-radius: 99px; }
.loading-state { }

/* --- 16. Dark-mode hard overrides (rules that hardcode light colors) --- */
html[data-theme="dark"] body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .content {
  background: var(--bg);
  color: var(--ink);
}
html[data-theme="dark"] body {
  background:
    linear-gradient(180deg, #0f172a 0, var(--bg) 260px),
    var(--bg);
}
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .section-hub-card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .filter-bar {
  background: var(--surface-raised);
}
html[data-theme="dark"] .modal,
html[data-theme="dark"] .topnav-dropdown {
  background: var(--surface-raised);
}
html[data-theme="dark"] .toast { background: #e2e8f0; color: #0f172a; }
html[data-theme="dark"] .toast.ok { background: var(--ok); color: #052e12; }
html[data-theme="dark"] .toast.danger { background: var(--danger); color: #3f1515; }
html[data-theme="dark"] .toast.warn { background: var(--warn); color: #3a2c0a; }

/* --- 16b. Input focus ring - accent-tinted (buttons/nav use the single
   :focus-visible rule above; this covers mouse + keyboard focus on fields) --- */
.input:focus,
input:focus,
select:focus,
textarea:focus {
  outline-offset: 2px;
}
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] .btn:focus-visible {
  outline: 2px solid rgba(96, 165, 250, .4);
}
.data-table thead th {
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .data-table tbody tr:hover td {
}

/* --- 17. Print --- */


/* ==== modern-ui.css (2263 lines) ==== */
/* ============================================================
   MODERN UI LAYER - Poonam Cargo Movers
   Faithful port of the PCM-ERP reference design
   (Downloads/PCM ERP/PCM-ERP.html): flat instant buttons,
   15px type scale, zero-latency hover, command palette,
   solid primary/danger, reference modal & toast timing.
   Visual layer only - loaded LAST, overrides every other sheet.
   Backups: /modern-ui-backup-20260611-113553 (gradient UI)
            /erp-copy-backup-20260611-120502 (pre-ERP-copy)
   ============================================================ */

/* --- 1. Reference type scale: 15px root, 13.5px compact --- */
html { font-size: 15px; }
html[data-density="compact"] { font-size: 13.5px; }
body { font-size: 1rem; }
html[data-density="compact"] body { font-size: 1rem; }


/* Instant tap response, thin standard scrollbars */
.btn, button, a, .tab, .topnav-trigger, .topnav-link, select, input, label {
  touch-action: manipulation;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* --- 2. Buttons - exact reference design (flat, solid, instant) --- */
/* (button restyle layer removed - consolidated into the single .btn system) */

.table-pager button { border-radius: 7px; padding: 3px 9px; font-size: .8rem; min-height: 26px; }
.table-pager button:active, .back-btn:active { transform: scale(.96); }

/* Ripple ink (spawned by speed.js - pure feedback, adds no latency) */
.btn:has(.ui-ripple),
.tab:has(.ui-ripple),
.topnav-trigger:has(.ui-ripple),
.topnav-link:has(.ui-ripple) {
  position: relative;
  overflow: hidden;
}
.ui-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 70%);
  transform: scale(0);
  animation: ui-ripple .4s var(--m-ease) forwards;
}
.btn-primary .ui-ripple, .btn-danger .ui-ripple {
  background: radial-gradient(circle, rgba(255, 255, 255, .4) 0%, transparent 70%);
}
@keyframes ui-ripple { to { transform: scale(1); opacity: 0; } }

/* --- 3. Inputs - reference spec, instant focus --- */
.input, .select, .textarea,
input[type="text"], input[type="number"], input[type="date"], input[type="month"],
input[type="search"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
  font-size: .92rem;
  padding: 7px 10px;
}
.field-label, .label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* --- 4. Page head - reference scale --- */
.page-title { font-size: 1.45rem; font-weight: 800; }
.crumb, .section-sub { font-size: .86rem; }

/* --- 5. Instant hover everywhere (reference has zero hover latency) --- */
.topnav-trigger, .topnav-link, .topnav-tool, .topnav-logout,
.tab, .nav-item, .section-hub-card, .kpi, .pill, .chip,
table tbody tr, .data-table tbody td {
  transition: none;
}
.section-hub-card:hover { }

/* --- 6. Perceived speed - loading bar + fast page-in --- */
#content:not(.content-loading) { animation: page-in .14s var(--m-ease) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.content-loading {
  cursor: progress;
  pointer-events: none;
  opacity: .72;
}
.content-loading::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 38%;
  z-index: 200;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--accent), var(--erp-purple));
  animation: load-bar .8s var(--m-ease) infinite;
}
@keyframes load-bar {
  from { transform: translateX(-100%); }
  to   { transform: translateX(280vw); }
}

/* Skeleton shimmer (reference .skel) for any loading placeholders */
.skel {
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--border) 50%, var(--surface-alt) 75%);
  background-size: 200% 100%;
  animation: sk 1.3s infinite;
}
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.page-skeleton {
  display: grid;
  gap: 14px;
  min-height: 320px;
  padding-block: 4px;
}
.page-skeleton-heading { width: min(360px, 58%); height: 34px; }
.page-skeleton-toolbar { display: flex; gap: 10px; flex-wrap: wrap; }
.page-skeleton-control { width: 180px; height: 38px; }
.page-skeleton-control.short { width: 110px; }
.page-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.page-skeleton-dashboard .page-skeleton-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-skeleton-block { min-height: 112px; border: 1px solid var(--border); }
.page-skeleton-dashboard .page-skeleton-block { min-height: 132px; }
.page-skeleton-detail .page-skeleton-block:first-child { grid-column: 1 / -1; min-height: 180px; }
@media (max-width: 760px) {
  .page-skeleton-grid,
  .page-skeleton-dashboard .page-skeleton-grid { grid-template-columns: 1fr; }
  .page-skeleton-block { min-height: 92px; }
  .page-skeleton-dashboard .page-skeleton-block:nth-child(n + 4) { display: none; }
}

/* --- 7. Modals + toasts - reference timing (pop .15s) --- */
.modal { animation: erp-pop .15s ease; }
.toast { animation: erp-pop .18s ease; max-width: 360px; font-size: .88rem; }

/* --- 8. Tables - reference details --- */
table.data-table { font-size: .84rem; }
.data-table tfoot td {
  font-weight: 800;
  background: var(--surface-subtle);
  border-top: 2px solid var(--border-strong);
}
/* Sticky header shadow once the table scrolls (scroll-driven, zero JS) */
@supports (animation-timeline: scroll()) {
  .table-scroll th {
    animation: head-shadow linear both;
    animation-timeline: scroll(nearest);
    animation-range: 0 40px;
  }
  @keyframes head-shadow {
    to { box-shadow: 0 4px 10px -4px color-mix(in oklab, var(--ink) 22%, transparent); }
  }
}

/* --- 9. Command palette (Ctrl+K) - reference design --- */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 24, .45);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
}
.search-overlay-card {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  animation: erp-pop .12s ease;
}
html[data-theme="dark"] .search-overlay-card { background: var(--surface-raised); }
.search-overlay-card .search-palette-input {
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 18px;
  font-size: 1rem;
  box-shadow: none;
  outline: none;
  background: transparent;
  width: 100%;
}
.search-results-scroll { overflow: auto; padding: 6px; flex: 1; }
.search-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 9px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--ink);
}
.search-result-row:hover,
.search-result-row.sel {
  background: var(--accent-soft);
  color: var(--accent);
}
.search-result-row .palette-label { font-weight: 600; }
.search-result-row .palette-group {
  margin-left: auto;
  font-size: .68rem;
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}
.search-result-row .result-sub { font-size: .73rem; color: var(--ink-subtle); }
.search-result-row:hover .result-sub,
.search-result-row.sel .result-sub { color: var(--accent); opacity: .75; }
.search-palette-hint {
  padding: 7px 16px;
  font-size: .72rem;
  color: var(--ink-subtle);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
}
.search-palette-hint kbd {
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 0 5px;
  background: var(--surface-subtle);
  font-family: inherit;
  font-size: .68rem;
}

/* --- 10. Focus ring: consolidated into the single :focus-visible rule --- */

/* --- 11. Dark mode --- */
html[data-theme="dark"] .btn { background: var(--surface-raised); }
html[data-theme="dark"] .btn:hover { background: var(--surface-alt); }
html[data-theme="dark"] .btn.btn-danger,
html[data-theme="dark"] .btn-danger { background: var(--danger); color: #3f1515; border-color: var(--danger); }
html[data-theme="dark"] .btn.btn-ghost,
html[data-theme="dark"] .btn-ghost { background: transparent; }
html[data-theme="dark"] .content-loading::before { opacity: .9; }

/* --- 12. Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  #content:not(.content-loading),
  .modal, .toast, .search-overlay-card { animation: none; }
  .ui-ripple { display: none; }
}

/* ============================================================
   Dashboard v6 - period filter, SVG charts, drill-down modal
   ============================================================ */

/* Period filter toolbar */
.v6-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.v6-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.v6-chip {
  padding: 5px 13px;
  font-size: .8rem;
  cursor: pointer;
  white-space: nowrap;
}
.v6-chip.active {
}
.v6-custom-row {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.v6-custom-row.open { display: flex; }
.v6-date-input { width: 150px; }

/* Charts grid */
.v6-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.v6-charts-grid > [data-widget-id="charts-trend"],
.v6-charts-grid > [data-widget-id="charts-daily"] { grid-column: 1 / -1; }
.v6-chart { width: 100%; height: auto; display: block; }
.v6-grid { stroke: var(--border); stroke-width: 1; }
.v6-axis { fill: var(--ink-subtle); font-size: 10px; font-family: inherit; }
.v6-click { cursor: pointer; }
.v6-click:hover rect[fill="transparent"] { fill: color-mix(in oklab, var(--accent) 7%, transparent); }
.v6-legend-inline { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.v6-leg { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--ink-muted); font-weight: 600; }
.v6-leg i, .v6-legend-row i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.v6-chart-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

/* Donuts */
.v6-donut { display: flex; align-items: center; gap: 14px; }
.v6-donut-svg { width: 150px; height: 150px; flex-shrink: 0; }
.v6-donut-svg path.v6-click:hover { opacity: .82; }
.v6-donut-center { fill: var(--ink); font-size: 17px; font-weight: 800; font-family: inherit; }
.v6-donut-sub { fill: var(--ink-subtle); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; font-family: inherit; }
.v6-donut-legend { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.v6-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: .8rem;
  color: var(--ink-muted);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.v6-legend-row:hover { background: var(--surface-alt); color: var(--ink); }
.v6-legend-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v6-legend-row b { font-size: .76rem; white-space: nowrap; }
.v6-two-donuts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v6-expense-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }

/* Drill-down modal */
.v6-drill-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.v6-drill-search { max-width: 260px; }
.v6-drill-totals { display: flex; gap: 6px; flex-wrap: wrap; }
.v6-total-chip { font-size: .74rem; }
.v6-drill-scroll {
  overflow: auto;
  max-height: 52vh;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.v6-drill-table { width: 100%; border-collapse: collapse; font-size: .82rem; white-space: nowrap; }
.v6-drill-table th {
  background: var(--surface-subtle);
  color: var(--ink-muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.v6-drill-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.v6-drill-table tbody tr:hover { background: var(--surface-alt); }
.v6-drill-table .right, .v6-drill-table th.right { text-align: right; }
.v6-drill-meta { margin-top: 8px; font-size: .76rem; color: var(--ink-subtle); }

/* Responsive: tablet & mobile */
@media (max-width: 980px) {
  .v6-charts-grid { grid-template-columns: 1fr; }
  .v6-two-donuts, .v6-expense-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .v6-donut { flex-direction: column; align-items: flex-start; }
  .v6-chip { padding: 4px 10px; font-size: .76rem; }
  .v6-drill-search { max-width: 100%; width: 100%; }
  .v6-drill-scroll { max-height: 60vh; }
}

/* --- 13. Dashboard v6 - period chips, KPI sections, charts, drill modal --- */
.dash-v6-period {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
}
.dash-v6-chip {
  padding: 5px 13px;
  font-size: .8rem;
  cursor: pointer;
}
.dash-v6-chip.active {
}
.dash-v6-sec-title {
  font-size: .78rem;
  text-transform: uppercase;
}

/* Charts grid */
.dash-v6-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.dash-v6-chart-card {
  min-width: 0;
}
html[data-theme="dark"] .dash-v6-chart-card { background: var(--surface-raised); }
.dash-v6-chart-head { display: flex; flex-direction: column; gap: 1px; }
.dash-v6-chart-head b { font-weight: 800; }
.dash-v6-chart-head span { font-size: .73rem; }

/* Column chart */
.dash-v6-colchart {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 170px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.dash-v6-colchart.dense { gap: 3px; }
.dash-v6-colgroup {
  flex: 1 1 0;
  min-width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dash-v6-colchart.dense .dash-v6-colgroup { min-width: 14px; }
.dash-v6-colgroup.clickable { cursor: pointer; }
.dash-v6-colgroup.clickable:hover .dash-v6-colbars { background: var(--surface-alt); border-radius: 6px; }
.dash-v6-colbars {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding: 0 1px;
}
.dash-v6-col {
  width: 100%;
  max-width: 16px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}
.dash-v6-col:hover { filter: brightness(1.15); }
.dash-v6-collabel {
  font-size: .62rem;
  font-weight: 700;
  color: var(--ink-subtle);
  white-space: nowrap;
}
.c-accent { background: var(--accent); }
.c-danger { background: var(--danger); }
.c-ok { background: var(--ok); }
.c-warn { background: var(--warn); }
.c-purple { background: var(--erp-purple); }
.c-cyan { background: var(--erp-cyan); }
.c-pink { background: var(--erp-pink); }
.c-muted { background: var(--ink-subtle); }

.dash-v6-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; }
.dash-v6-legend > span { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: var(--ink-muted); }
.dash-v6-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* Donut */
.dash-v6-donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-v6-donut {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.dash-v6-donut::before {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: var(--surface);
}
html[data-theme="dark"] .dash-v6-donut::before { background: var(--surface-raised); }
.dash-v6-donut > span { position: relative; font-size: 1.25rem; font-weight: 800; }
.dash-v6-donut > em { position: relative; font-style: normal; font-size: .64rem; color: var(--ink-subtle); font-weight: 700; text-transform: uppercase; }
.dash-v6-donut-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.dash-v6-donut-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  font-size: .82rem;
  color: var(--ink);
  text-align: left;
  width: 100%;
}
button.dash-v6-donut-row { cursor: pointer; }
button.dash-v6-donut-row:hover { background: var(--accent-soft); color: var(--accent); }
.dash-v6-donut-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-v6-donut-row b { font-weight: 800; }
.dash-v6-donut-row em { font-style: normal; font-size: .72rem; color: var(--ink-subtle); }

/* Drill-down modal */
.modal-lg { max-width: 980px; width: calc(100vw - 40px); }
.dash-v6-drill-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 10px; }
.dash-v6-drill-dates { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dash-v6-drill-dates input { width: 150px; }
.dash-v6-drill-search { flex: 1; min-width: 200px; }
.dash-v6-drill-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dash-v6-drill-tablewrap { overflow: auto; max-height: 52vh; }
.dash-v6-drill-table { width: 100%; white-space: nowrap; }
.dash-v6-drill-table th {
  background: var(--surface-subtle);
  color: var(--ink-muted);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  text-align: left; padding: 8px 10px;
}
.dash-v6-drill-table th.right { text-align: right; }
.dash-v6-drill-table td { padding: 6px 10px; font-variant-numeric: tabular-nums; }
.dash-v6-drill-table td.right { text-align: right; }
.dash-v6-drill-table tbody tr { cursor: pointer; }
.dash-v6-drill-table tbody tr:hover { background: var(--surface-alt); }
.dash-v6-drill-table tfoot td {
  background: var(--surface-subtle);
  font-weight: 800;
  border-top: 2px solid var(--border-strong);
}
.dash-v6-drill-empty { padding: 36px 16px; text-align: center; }

@media (max-width: 760px) {
  .dash-v6-colchart { height: 130px; }
  .dash-v6-donut { width: 104px; height: 104px; }
  .dash-v6-drill-dates input { width: 128px; }
}

/* Print: drill modal prints clean - page behind is hidden */


/* --- 14. Forms v2 - fast, clear, advanced data entry --- */

/* Modal becomes a column so the footer can stick while the body scrolls. */
.modal {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
.modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
}
.modal-head { flex: 0 0 auto; }
.modal-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
}
html[data-theme="dark"] .modal-foot { background: var(--surface-raised); }

/* Inputs: comfortable tap targets + crisp focus everywhere. */
.modal .input,
.modal .select,
.modal .textarea,
.modal input, .modal select, .modal textarea {
  min-height: 36px;
}

/* Invalid field state - red border, message, gentle shake. */
.input.bad, .select.bad, .textarea.bad,
input.bad, select.bad, textarea.bad {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
  animation: field-shake .28s var(--m-ease);
}
.field-error {
  color: var(--danger);
  font-size: .72rem;
  font-weight: 600;
  margin-top: 3px;
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Required-asterisk emphasis. */
.field-label .req, label .req { color: var(--danger); font-weight: 800; }

/* Section dividers inside long forms (when a form uses .sec-title). */
.modal .sec-title {
  grid-column: 1 / -1;
  font-size: .72rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  margin: 6px 0 2px;
}

/* Live-calculation strip (totals shown while typing). */
.calc-strip {
  background: var(--surface-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.calc-strip .ci .l { font-size: .66rem; color: var(--ink-subtle); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.calc-strip .ci .v { font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }

/* Keyboard hint in the footer so staff learn the fast keys. */
.modal-foot .kbd-hint {
  font-size: .7rem;
  color: var(--ink-subtle);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.modal-foot .kbd-hint kbd {
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 0 5px;
  background: var(--surface-subtle);
  font-family: inherit;
  font-size: .66rem;
  font-weight: 700;
}
@media (max-width: 760px) { .modal-foot .kbd-hint { display: none; } }

/* Mobile: forms go full-height for thumb-friendly entry. */
@media (max-width: 640px) {
  .modal-bg { padding: 0; align-items: stretch; }
  .modal {
    max-height: 100vh;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
  .modal .frm { grid-template-columns: 1fr; }
  .modal .field { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .input.bad, input.bad, select.bad, textarea.bad { animation: none; }
}

/* ============================================================
   --- 15. PREMIUM FLEET DESIGN SYSTEM (applies app-wide) ---
   One consistent command-center language across every internal
   page & component. Visual layer only - no JS/logic touched.
   Uses existing tokens (--accent/--ok/--warn/--danger/--surface...)
   and adds fleet accents (teal, lime, safety orange) + gradients.
   Selectors match earlier compound rules (.btn.btn-primary...) so
   they win by source order. Dark-mode + reduced-motion safe.
   ============================================================ */

/* --- 15.1 Fleet accent tokens + premium elevation --- */

/* Faint command-center grid behind the app shell (cards sit on top). */
body {
}

/* --- 15.2 Buttons: consolidated into the single .btn system above --- */

/* --- 15.3 Cards, KPIs, hub tiles - premium elevation + hover lift --- */
.card, .table-card, .section-hub-card, .filter-bar {
  transition: box-shadow .2s var(--m-ease), transform .2s var(--m-ease), border-color .2s var(--m-ease);
}
.section-hub-card { }
.section-hub-card:active { transform: translateY(0) scale(.99); }
.kpi:hover {
}

/* --- 15.4 Tables - crisp headers, readable rows (instant hover kept) --- */
.data-table thead th, table th {
  background: var(--surface-subtle);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .7rem;
  font-weight: 800;
  color: var(--ink-muted);
}
.data-table tbody tr:hover td, table tbody tr:hover { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
html[data-theme="dark"] .data-table tbody tr:hover td,
html[data-theme="dark"] table tbody tr:hover { background: color-mix(in oklab, var(--accent) 14%, var(--surface)); }
.table-card { overflow: hidden; }
.table-pager button { box-shadow: var(--elev-1); }

/* --- 15.5 Inputs - consistent radius + soft hover --- */
.input, .select, .textarea,
input[type="text"], input[type="number"], input[type="date"], input[type="month"],
input[type="search"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
  transition: border-color .15s var(--m-ease), box-shadow .15s var(--m-ease), background-color .15s var(--m-ease);
}
.input:hover:not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus),
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border-strong));
}

/* --- 15.6 Status chips / pills - consistent fleet status colors --- */
.pill, .chip {
  letter-spacing: .01em;
}
.pill.dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  display: inline-block; margin-right: 5px; flex-shrink: 0; opacity: .9;
}
.pill.warn, .chip.amber { }
.pill.accent, .chip.blue { }
.pill.teal, .chip.teal { background: var(--teal-soft); color: var(--teal); }
.pill.safety, .chip.orange { background: var(--safety-soft); color: var(--safety); }
.pill.lime { background: var(--lime-soft); color: var(--lime); }

/* --- 15.7 Modals - premium framing --- */
.modal {
}
.modal-head { border-bottom: 1px solid var(--border); }
.modal-kicker { color: var(--accent); font-weight: 800; letter-spacing: .06em; }

/* --- 15.8 Navbar - premium sticky with subtle blur --- */
.primary-nav {
}
.topnav-group.active .topnav-trigger::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px;
  border-radius: 3px 3px 0 0; background: var(--cta-grad);
}
.topnav-trigger { position: relative; }

/* --- 15.9 Empty states --- */
.empty-state {
  text-align: center; color: var(--ink-subtle);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.empty-state::before {
  content: ''; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 6px;
  background:
    radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%),
    linear-gradient(var(--map-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
  background-size: cover, 12px 12px, 12px 12px;
  border: 1px solid var(--border);
}
.empty-state-title { font-weight: 800; }

/* --- 15.10 Loading - gradient spinner + skeleton shimmer --- */
.loading-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px; color: var(--ink-subtle); }
.loading-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--accent), var(--teal));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: pcm-spin .8s linear infinite;
}
@keyframes pcm-spin { to { transform: rotate(360deg); } }

/* --- 15.11 Login - premium command-center entry --- */
.login-page {
}
.login-card { border-radius: 20px; }

/* --- 15.12 Tabs - accent active state --- */
.tab.active { }

/* --- 15.13 Responsive safety --- */
@media (max-width: 640px) {
  .kpi-grid, .section-hub-grid { gap: 10px; }
  .card, .table-card, .kpi { border-radius: var(--radius); }
}

/* --- 15.14 Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .table-card, .section-hub-card, .kpi { transition: none; }
  .btn:hover, .card:hover, .table-card:hover, .section-hub-card:hover, .kpi:hover { transform: none; }
  .loading-spinner { animation-duration: 1.4s; }
}

/* --- 15.15 Dark-mode primary CTA ---
   THE INK IS DARK HERE, NOT WHITE, AND THAT IS THE WHOLE POINT.

   --accent is teal-700 (#0f766e) in the light theme and teal-400 (#2dd4bf) in
   the dark one, because an accent has to lift off whatever it sits on. The
   button fill followed the token; the label did not, so the main action on
   every screen was white on bright teal - measured at 1.86:1, and 1.5:1 on
   hover, against a 4.5:1 floor. It was the least readable control in the app
   and it was the one everybody presses.

   Dark ink on the bright fill reads at about 9:1 and keeps the button
   unmistakably the primary one. Do not "fix" this back to #fff. */
html[data-theme="dark"] .btn.btn-primary,
html[data-theme="dark"] .btn-primary {
  background: var(--cta-grad);
  background-color: var(--accent);
  color: #04231f;
  border-color: transparent;
}
html[data-theme="dark"] .btn.btn-primary:hover,
html[data-theme="dark"] .btn-primary:hover {
  background: var(--cta-grad-hover);
  color: #04231f;
  filter: brightness(1.06);
}
/* The busy spinner drew itself in hard white for the same reason the label
   did. currentColor makes it follow whichever ink the theme settled on. */
html[data-theme="dark"] .btn-primary.is-loading::after {
  border-color: currentColor;
  border-top-color: transparent;
}

/* --- 16. Dashboard Chart.js canvases (premium chart boxes) --- */
.dash-chart-box { position: relative; width: 100%; }
.dash-chart-box canvas { max-width: 100%; }
@media (max-width: 640px) { .dash-chart-box { height: 230px; } }

/* ==========================================================================
   17. Enterprise fleet command center UI layer
   Visual-only upgrade: improves shell, cards, tables, forms, dashboard,
   modals, alerts, empty/loading states, and mobile layout without touching
   business logic or data flow.
   ========================================================================== */


html {
}

body {
  min-height: 100vh;
  font-family: Inter, "Plus Jakarta Sans", Manrope, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
}

#content,
.content,
.shell-topnav .content {
  background: transparent;
}

.shell-topnav .main,
.shell-topnav .topbar,
.shell-topnav .content {
  max-width: none;
}

.shell-topnav > .main,
.shell-topnav > header.primary-nav {
  background: transparent;
}

.topnav-logo,
.login-logo,
.section-hub-icon,
.dash-v5-stat-icon,
.dash-v5-alert-icon {
  background: var(--cmd-gradient);
  color: #ffffff;
  box-shadow: var(--cmd-glow-teal);
}

.topnav-name,
.topnav-user-name {
  letter-spacing: 0;
}

.topnav-menu {
  gap: 8px;
}

.topnav-trigger,
.topnav-link,
.topnav-logout {
  border-radius: var(--radius);
}

.topnav-group.active .topnav-trigger {
}

.topnav-dropdown-head {
}

.topnav-dropdown .topnav-link:hover,
.topnav-dropdown .topnav-link.active {
}

.shell-topnav .topbar,
.topbar {
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin: 12px 18px 14px;
  padding: 10px 12px;
}

.page-title {
  letter-spacing: 0;
}

.page-title h1,
.page-title .title,
.section-hub-title,
.card-title,
.dash-v5-panel-title,
.dash-v6-sec-title,
.modal-title {
  color: var(--ink);
  font-weight: 850;
  letter-spacing: 0;
}

.page-title small,
.section-hub-sub,
.card-sub,
.dash-v5-panel-sub {
  color: var(--ink-muted);
}

/* (button restyle layer removed - consolidated into the single .btn system) */

.topnav-trigger svg,
.topnav-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.card,
.table-card,
.filter-bar,
.section-hub,
.section-hub-card,
.kpi,
.dash-v5-panel,
.dash-v6-chart-card,
.tracking-fast-card,
.dashboard-master-pill {
  border: 1px solid var(--cmd-line);
  background: var(--cmd-panel);
  box-shadow: var(--cmd-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.card,
.table-card,
.filter-bar,
.section-hub,
.dash-v5-panel,
.dash-v6-chart-card,
.tracking-fast-card {
  border-radius: var(--cmd-radius-lg);
}

.card:hover,
.table-card:hover,
.dash-v6-chart-card:hover,
.dash-v5-panel:hover,
.tracking-fast-card:hover {
  border-color: color-mix(in oklab, var(--accent) 28%, var(--cmd-line));
  box-shadow: var(--cmd-shadow-strong);
}

.section-hub {
  padding: 18px;
}

.section-hub-grid,
.kpi-grid {
  gap: 14px;
}

.section-hub-card {
  padding: 18px;
  min-height: 94px;
}

.section-hub-card-title {
  font-weight: 850;
}

.kpi,
.dash-v5-stat {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  border-radius: var(--radius);
}

.kpi::before,
.dash-v5-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--cmd-gradient);
  opacity: .9;
}

.kpi-label,
.dash-v5-stat-copy span {
  color: var(--ink-muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .065em;
  font-weight: 850;
}

.kpi-value,
.dash-v5-stat-copy b {
  color: var(--ink);
  /* Fixed, not clamp(_, 2vw, _). A KPI tied to viewport width is a different
     size on every machine in the office and changes height as a window is
     dragged, so the row below it moves. Breakpoints below step it down where
     the space genuinely runs out. */
  font-size: 1.75rem;
  line-height: 1.04;
  letter-spacing: 0;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.kpi-sub,
.dash-v5-stat-copy em {
  color: var(--ink-muted);
}

.dash-v5-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 22px;
  color: #ffffff;
}

.dash-v5-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 48%, rgba(45, 212, 191, .16) 49%, transparent 51% 100%),
    linear-gradient(35deg, transparent 0 58%, rgba(59, 130, 246, .12) 59%, transparent 61% 100%);
}

.dash-v5-hero > * {
  position: relative;
  z-index: 1;
}

.dash-v5-hero h1,
.dash-v5-hero .dash-v5-kicker,
.dash-v5-hero p {
  color: #ffffff;
}

.dash-v5-kicker {
  color: rgba(167, 243, 208, .95);
}

.dash-v5-search {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(226, 232, 240, .2);
  border-radius: 16px;
  padding: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dash-v5-search .input {
  /* var(--surface), not hard white. The dashboard search box was painted
     rgba(255,255,255,.96) in both themes while its text followed --ink, so on
     a dark screen it was pale grey type on a white field - 1.16:1, which is
     not "low contrast", it is invisible. */
  background: var(--surface);
}

.dash-v5-command-numbers .dash-v5-stat,
.dash-v5-hero-controls .dash-v5-stat {
  min-height: 88px;
  padding-block: 12px;
  color: #0f172a;
  border-color: rgba(255, 255, 255, .28);
}

.dash-v5-hero-controls {
  gap: 8px;
}

.dash-v5-command-numbers {
  gap: 8px;
}

.dash-v5-command-numbers .dash-v5-stat-copy b,
.dash-v5-hero-controls .dash-v5-stat-copy b {
  font-size: 1.5rem;
}

.dash-v5-view-select,
.dash-v5-period-select,
.dash-v6-chip,
.v6-chip {
  border-radius: 999px;
}

.dash-v5-actions {
  gap: 10px;
}

.dash-v5-action {
  border-radius: 14px;
  border: 1px solid var(--cmd-line);
  background: var(--cmd-panel);
  color: var(--ink);
  box-shadow: var(--cmd-shadow);
}

.dash-v5-action:hover {
  border-color: color-mix(in oklab, var(--accent) 42%, var(--cmd-line));
  transform: translateY(-2px);
}

.dash-v5-action.primary {
  background: var(--cmd-gradient);
  color: #ffffff;
  border-color: transparent;
}

.dash-v6-sec-title {
  margin: 22px 2px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.dash-v6-sec-title::before {
  content: "";
  width: 9px;
  height: 24px;
  border-radius: 999px;
  background: var(--cmd-gradient);
  box-shadow: var(--cmd-glow-teal);
}

.dash-v5-kpis {
  gap: 14px;
}

.dash-v6-period {
  background: rgba(244, 247, 251, .72);
  border: 1px solid var(--cmd-line);
  box-shadow: var(--cmd-shadow);
  border-radius: 16px;
  padding: 10px;
}

html[data-theme="dark"] .dash-v6-period {
  background: rgba(9, 17, 31, .78);
}

.dash-v6-chip,
.v6-chip {
  border: 1px solid var(--cmd-line);
  background: var(--cmd-panel-solid);
  color: var(--ink-muted);
  font-weight: 780;
}

.dash-v6-chip:hover,
.v6-chip:hover,
.dash-v6-chip.active,
.v6-chip.active {
  background: var(--cmd-gradient);
  border-color: transparent;
  color: #ffffff;
}

.dash-v6-charts-grid {
  gap: 16px;
}

.dash-v6-chart-card {
  padding: 18px;
  min-height: 340px;
}

.dash-v6-chart-head {
  border-bottom: 1px solid var(--cmd-line);
  padding-bottom: 11px;
  margin-bottom: 14px;
}

.dash-v6-chart-head b {
  font-size: 1rem;
  letter-spacing: 0;
}

.dash-v6-chart-head span {
  color: var(--ink-muted);
}

.dash-chart-box {
  height: 280px;
}

.dash-chart-box.tall {
  height: 330px;
}

.dash-chart-box canvas {
  filter: saturate(1.04);
}

.dash-v6-donut {
  box-shadow: inset 0 0 0 1px var(--cmd-line), var(--cmd-shadow);
}

.dash-v6-donut-row {
  border-radius: 10px;
  padding: 7px 8px;
}

.dash-v5-panel {
  padding: 18px;
}

.dash-v5-panel-head {
  border-bottom: 1px solid var(--cmd-line);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.dash-v5-alert {
  border-radius: 14px;
  border: 1px solid var(--cmd-line);
  background: color-mix(in oklab, var(--cmd-panel-solid) 92%, var(--warn-soft) 8%);
}

.dash-v5-alert:hover {
  transform: translateY(-1px);
  box-shadow: var(--cmd-shadow);
}

.dash-v5-ring-card {
  border: 1px solid var(--cmd-line);
  background: var(--cmd-panel-solid);
  border-radius: 15px;
}

.dash-v5-ring {
  box-shadow: inset 0 0 0 1px var(--cmd-line);
}

.dashboard-master-pill {
  border-radius: 14px;
  min-height: 76px;
}

.dashboard-master-pill:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 38%, var(--cmd-line));
}

.data-table,
.tracking-fast-table,
.dash-v6-drill-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .86rem;
}

.table-scroll,
.data-table-wrap,
.tracking-fast-scroll,
.dash-v6-drill-tablewrap {
  border: 1px solid var(--cmd-line);
  border-radius: 15px;
  background: var(--cmd-panel-solid);
  box-shadow: var(--cmd-shadow);
}

.table-scroll .data-table thead th,
.data-table-wrap .data-table thead th,
.ledger-scroll .data-table thead th,
.table-responsive .data-table thead th,
.tracking-fast-scroll .tracking-fast-table thead th,
.dash-v5-table-wrap .dash-v5-table thead th,
.dash-v6-drill-tablewrap .dash-v6-drill-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, #f7fbfd, #edf4f7);
  color: #1f2d3d;
  border-bottom: 1px solid var(--cmd-line-strong);
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: .69rem;
  font-weight: 900;
}

html[data-theme="dark"] .data-table thead th,
html[data-theme="dark"] .tracking-fast-table th,
html[data-theme="dark"] .dash-v6-drill-table th {
  background: linear-gradient(180deg, #152237, #111c2d);
  color: #dbe7f4;
}

.data-table .table-filter-row th,
.data-table .table-filter-row input,
.data-table .table-filter-row select {
  background: color-mix(in oklab, var(--cmd-panel-solid) 94%, var(--cmd-bg) 6%);
}

.data-table th,
.data-table td,
.tracking-fast-table th,
.tracking-fast-table td,
.dash-v6-drill-table th,
.dash-v6-drill-table td {
  border-bottom: 1px solid color-mix(in oklab, var(--cmd-line) 78%, transparent);
}

.data-table tbody tr:nth-child(even) td,
.tracking-fast-table tbody tr:nth-child(even) td {
  background: color-mix(in oklab, var(--cmd-bg) 28%, transparent);
}

.data-table tbody tr:hover td,
.tracking-fast-table tbody tr:hover td,
.dash-v6-drill-table tbody tr:hover td {
  background: color-mix(in oklab, var(--accent) 9%, var(--cmd-panel-solid));
}

.data-table input,
.data-table select,
.tracking-fast-table input,
.tracking-fast-table select {
  min-height: 32px;
  border-radius: 9px;
}

.input,
.select,
.textarea,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
  min-height: 38px;
  border-radius: 11px;
  box-shadow: var(--control-inset);
}

.input:focus,
.select:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
  outline: none;
}

.field-label,
label,
.modal .field-label {
  color: #243247;
  font-weight: 800;
}

html[data-theme="dark"] .field-label,
html[data-theme="dark"] label,
html[data-theme="dark"] .modal .field-label {
  color: #dce8f7;
}

.field-help,
.help,
.settings-note {
  color: var(--ink-muted);
}

.frm,
.filter-grid {
  gap: 14px;
}

.modal-bg {
  background: rgba(3, 7, 18, .62);
}

.modal,
.modal-md,
.modal-lg {
  border-radius: var(--radius-modal);
  border: 1px solid var(--cmd-line);
  background: var(--cmd-panel-solid);
  box-shadow: 0 28px 80px -38px rgba(2, 6, 23, .9);
}

.modal-head,
.modal-foot {
  border-color: var(--cmd-line);
}

.modal-title {
  font-size: 1.05rem;
}

.modal-foot {
}

.pill,
.chip,
.badge,
.payment-chip,
.alert-chip,
.lr-multi-chip {
  border-radius: 999px;
  border: 1px solid currentColor;
  font-weight: 800;
}

.pill.ok,
.chip.green,
.pill.paid,
.pill.completed,
.pill.active {
  background: var(--ok-soft);
  color: var(--ok);
}

.pill.warn,
.chip.amber,
.pill.pending,
.pill.maintenance {
  background: var(--warn-soft);
  color: var(--warn);
}

.pill.danger,
.chip.red,
.pill.cancelled,
.pill.delayed,
.pill.unpaid {
  background: var(--danger-soft);
  color: var(--danger);
}

.pill.accent,
.chip.blue,
.pill.info,
.pill.progress {
  background: var(--accent-soft);
  color: var(--accent);
}

.toast {
  border-radius: 14px;
  box-shadow: var(--cmd-shadow-strong);
  border: 1px solid rgba(255, 255, 255, .2);
}

.empty-state {
  border: 1px dashed var(--cmd-line-strong);
  border-radius: 16px;
  background-size: 28px 28px, 28px 28px, 100% 100%;
}

.empty-state::before {
  display: none;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--cmd-gradient);
  box-shadow: var(--cmd-glow-teal);
}

.empty-state-title {
  color: var(--ink);
}

.loading-state {
  min-height: 140px;
}

.loading-spinner {
  box-shadow: var(--cmd-glow-blue);
}

.skel,
.skeleton {
  border-radius: 12px;
}

.login-page {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(135deg, #07111f 0%, #122038 46%, #12383c 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}

.login-card {
  border: 1px solid rgba(226, 232, 240, .2);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 30px 80px -42px rgba(0, 0, 0, .85);
}

.login-name {
  color: #0f172a;
  font-weight: 900;
}

.login-sub {
  color: #64748b;
}

.alert-chip,
.payment-chip {
  min-height: 32px;
}

.tracking-fast-toolbar {
  border-radius: 14px;
  background: color-mix(in oklab, var(--cmd-panel-solid) 92%, var(--cmd-bg) 8%);
  border: 1px solid var(--cmd-line);
  padding: 10px;
}

.tracking-fast-table th {
  box-shadow: 0 1px 0 var(--cmd-line);
}

.tracking-fast-table tr.is-dirty td {
  background: color-mix(in oklab, var(--warn-soft) 50%, var(--cmd-panel-solid) 50%);
}

.column-choice-grid,
.ledger-index-chips,
.role-pill-row,
.alert-chip-row {
  gap: 8px;
}

.search-overlay-card {
  border-radius: var(--radius-modal);
  border: 1px solid var(--cmd-line);
  box-shadow: var(--cmd-shadow-strong);
}

.dashboard-master-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .dash-v5-hero {
    grid-template-columns: 1fr;
  }
  .dash-v5-command-numbers {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .dash-v6-period {
    top: 108px;
  }
}

@media (max-width: 900px) {
  .shell-topnav .topbar,
  .topbar {
    margin: 10px;
    border-radius: 14px;
  }
  .dash-v5-kpis,
  .dash-v6-charts-grid,
  .dash-v5-grid,
  .dash-v5-finance-grid,
  .dash-v5-compliance-grid,
  .dash-v5-three,
  .section-hub-grid,
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dash-v5-command-numbers {
    grid-template-columns: 1fr;
  }
  .dash-v6-period {
    position: static;
  }
}

@media (max-width: 760px) {
  body {
    background-size: 36px 36px, 36px 36px, 100% 100%;
  }
  .shell-topnav {
    position: sticky;
    top: 0;
    z-index: 50;
  }
  /* No overflow-x here: it clips the dropdown panels, which are absolutely
     positioned inside this element. The menu is fitted, not scrolled. */
  .topnav-menu {
    padding-bottom: 4px;
  }
  .topnav-trigger {
    min-height: 38px;
  }
  .topnav-dropdown {
    max-height: min(72vh, 420px);
    overflow: auto;
  }
  .shell-topnav .content,
  .content {
    padding-left: 10px;
    padding-right: 10px;
  }
  .dash-v5-hero {
    border-radius: 18px;
    padding: 18px;
  }
  .dash-v5-hero h1 {
    font-size: 2.2rem;
  }
  .dash-v5-search {
    display: grid;
    grid-template-columns: 1fr;
  }
  .dash-v5-actions {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .dash-v5-action {
    min-width: max-content;
  }
  .dash-v5-kpis,
  .dash-v6-charts-grid,
  .dash-v5-grid,
  .dash-v5-finance-grid,
  .dash-v5-compliance-grid,
  .dash-v5-three,
  .section-hub-grid,
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  .dash-chart-box,
  .dash-chart-box.tall {
    height: 245px;
  }
  .table-scroll,
  .data-table-wrap,
  .tracking-fast-scroll,
  .dash-v6-drill-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table,
  .tracking-fast-table {
    min-width: 860px;
  }
  .modal-bg {
    padding: 0;
  }
  .modal,
  .modal-md,
  .modal-lg {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .modal-body {
    padding: 16px;
  }
  .modal-foot {
    flex-wrap: wrap;
  }
  .modal-foot .btn {
    flex: 1 1 150px;
  }
  .frm,
  .modal .frm,
  .filter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  html {
    font-size: 14px;
  }
  /* Buttons keep their own width and their labels stay on one line.
     `width: 100%` here made every button in every toolbar its own row, and
     `white-space: normal` then let a long label ("Export Website CSV") break
     across two lines, so that one button stood 41px tall next to 34px
     neighbours and the row looked broken. Toolbars now flow: each button is as
     wide as its text and the row wraps when it must, which keeps every button
     the same height. A page's single primary action is still given the full
     width, deliberately, in mobile.css. */
  .btn {
    white-space: nowrap;
  }
  .topnav-menu .btn,
  .topnav-menu button,
  .topnav-trigger,
  .topnav-link,
  .data-table .btn,
  .tracking-fast-table .btn {
    width: auto;
    white-space: nowrap;
  }
  .dash-v6-chip,
  .v6-chip {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
  }
}

/* --- 17. Granular data-cleanup picker --- */
.cleanup-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.cleanup-item { padding: 7px 9px; border-radius: 9px; border: 1px solid transparent; }
.cleanup-item:hover { background: var(--surface-alt); border-color: var(--border); }
.cleanup-item.is-empty { opacity: .5; }
.cleanup-item input[disabled] { cursor: default; }
@media (max-width: 640px) { .cleanup-item-grid { grid-template-columns: 1fr; } }

/* ==== theme-system.css (368 lines) ==== */
/* ============================================================
   THEME SYSTEM LAYER - Poonam Cargo Movers
   Loaded LAST (after modern-ui.css) - refines the light/dark
   theme so:
     - the LIGHT theme is genuinely light, clean and modern
       (was dominated by an always-dark navbar + tinted body),
     - every piece of text adapts to the active theme,
     - the DARK theme reads as a refined deep-slate, not flat black.
   Visual-only. Toggle via pcm_view_prefs.theme -> html[data-theme].
   Backup: /theme-system-backup-20260617-183322
   ============================================================ */

/* --- 1. Token palette - LIGHT (clean, bright, high-contrast text) --- */

/* --- 2. Token palette - DARK (refined deep slate, bright readable text) --- */

/* --- 3. Body backdrop - clean & airy in light, deep in dark --- */
body {
  background-color: var(--cmd-bg);
  background-image:
    radial-gradient(1200px 620px at 100% -8%, var(--cmd-glow-a), transparent 56%),
    radial-gradient(1020px 560px at -6% 104%, var(--cmd-glow-b), transparent 56%),
    linear-gradient(var(--cmd-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cmd-grid) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 52px 52px, 52px 52px;
  background-attachment: fixed;
}
body::selection { background: color-mix(in oklab, var(--accent) 26%, transparent); }
::selection { background: color-mix(in oklab, var(--accent) 26%, transparent); }

/* --- 4. Top navigation - theme-aware (LIGHT default) ---
   modern-ui.css hard-codes a dark command bar in both themes; here we
   restore a clean light glass bar in light mode and keep the deep navy
   only for dark mode. */
.shell-topnav {
  /* This selector is the WHOLE APP SHELL - height:100vh, nav and main inside
     it - not a bar. It was given a translucent "glass bar" treatment plus a
     16px backdrop blur, which means the browser blurs whatever is behind a
     full-viewport element on every frame, for an effect nothing can see: the
     nav bar on top of it paints its own opaque surface, and the content area
     covers the rest. Opaque now, and no blur. The bar look belongs to
     .primary-nav, which already has it. */
  background: linear-gradient(180deg, var(--surface), var(--surface-subtle));
  border-bottom: 1px solid var(--cmd-line);
  box-shadow: 0 8px 26px -22px rgba(15, 23, 42, .3);
}
.topnav-brand,
.topnav-user { color: var(--ink); }
.topnav-name,
.topnav-user-name { color: var(--ink); }
.topnav-sub,
.topnav-user-role { color: var(--ink-muted); }

.topnav-trigger,
.topnav-link,
.topnav-logout { color: var(--ink-muted); }

.topnav-trigger:hover,
.topnav-trigger:focus-visible,
.topnav-group:focus-within .topnav-trigger,
.topnav-group:hover .topnav-trigger,
.topnav-link:hover,
.topnav-link.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.topnav-logout:hover {
}

.topnav-dropdown {
  background: var(--surface);
  border: 1px solid var(--cmd-line);
}
.topnav-dropdown .topnav-link { color: var(--ink-muted); }

/* ============================================================
   NAV / MENU - premium polish (authoritative light-theme layer on
   top of the consolidated topnav system). Structure (radius, entrance,
   left active bar, tap sizes) applies in both themes; colours use tokens
   so the html[data-theme="dark"] overrides below still win in dark.
   ============================================================ */
/* Trigger: crisper active-section indicator - accent pill + underline */
.topnav-trigger {
  border-radius: 8px;
  font-weight: 600;
  transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.topnav-group.active .topnav-trigger {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* Dropdown: premium floating card + subtle entrance (fade + 4px rise) */
.topnav-dropdown {
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 40px -22px rgba(15, 23, 42, .5);
}
.topnav-group:hover .topnav-dropdown,
.topnav-group:focus-within .topnav-dropdown {
  animation: topnav-drop-in .16s var(--m-ease) both;
}
@keyframes topnav-drop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section head: quiet uppercase label */
.topnav-dropdown-head {
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--ink-subtle);
}

/* Dropdown links: comfortable rows, aligned icons, unmistakable active
   state (accent text + soft accent bg + left accent bar, no layout shift) */
.topnav-dropdown .topnav-link {
  min-height: 36px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  font-weight: 500;
}
.topnav-dropdown .topnav-link:hover {
  background: var(--surface-alt);
  color: var(--ink);
}
.topnav-dropdown .topnav-link.active,
.topnav-dropdown .topnav-link.active:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 650;
}

/* User area: cohesive teal avatar + calm logout */
.topnav-avatar,
.user-avatar {
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 62%, #0891b2));
  color: #fff;
  border-radius: 9px;
  font-weight: 800;
}
.topnav-logout {
  border-radius: 8px;
  font-weight: 600;
}
.topnav-logout:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger-soft);
}

@media (prefers-reduced-motion: reduce) {
  .topnav-group:hover .topnav-dropdown,
  .topnav-group:focus-within .topnav-dropdown { animation: none; }
  .btn, .btn:hover, .btn:active,
  .section-hub-card, .section-hub-card:hover, .kpi, .kpi:hover,
  .floating-add, .floating-add:hover,
  .topnav-trigger, .topnav-link { transition: none; transform: none; }
}

/* ============================================================
   TABS, PILLS + CARDS - aligned with the button/nav language.
   ============================================================ */
.tab {
  font-weight: 550;
  border-bottom: 2px solid transparent;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}
.tab:hover { color: var(--ink); background: var(--surface-alt); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

.section-hub-card,
.kpi {
  border-radius: var(--radius-lg);
}

/* ============================================================
   OVERLAY COMPONENTS - floating quick-add + live-sync banner.
   Colours moved here from inline JS so they follow the accent
   token and work in both light and dark themes.
   ============================================================ */
.floating-add {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 6px 20px -4px color-mix(in oklab, var(--accent) 55%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.floating-add:hover {
  box-shadow: 0 10px 26px -4px color-mix(in oklab, var(--accent) 62%, transparent);
}
.floating-add-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.live-sync-banner { background: var(--accent); color: #fff; }

/* --- 4b. Top navigation - DARK overrides (deep navy, light text) --- */
html[data-theme="dark"] .shell-topnav {
  /* Opaque, for the same reason as the light rule above. */
  background:
    linear-gradient(180deg, rgb(11, 19, 31), rgb(14, 24, 38));
  border-bottom: 1px solid rgba(148, 173, 204, .14);
  box-shadow: 0 16px 36px -28px rgba(0, 0, 0, .92);
}
html[data-theme="dark"] .topnav-brand,
html[data-theme="dark"] .topnav-user,
html[data-theme="dark"] .topnav-name,
html[data-theme="dark"] .topnav-user-name { color: #f1f6fc; }
html[data-theme="dark"] .topnav-sub,
html[data-theme="dark"] .topnav-user-role { color: rgba(226, 232, 240, .72); }
html[data-theme="dark"] .topnav-trigger,
html[data-theme="dark"] .topnav-link,
html[data-theme="dark"] .topnav-logout { color: rgba(226, 232, 240, .88); }
html[data-theme="dark"] .topnav-trigger:hover,
html[data-theme="dark"] .topnav-trigger:focus-visible,
html[data-theme="dark"] .topnav-group:focus-within .topnav-trigger,
html[data-theme="dark"] .topnav-group:hover .topnav-trigger,
html[data-theme="dark"] .topnav-link:hover,
html[data-theme="dark"] .topnav-link.active,
html[data-theme="dark"] .topnav-group.active .topnav-trigger {
  background: rgba(45, 212, 191, .15);
  color: #ffffff;
}
html[data-theme="dark"] .topnav-dropdown {
  background: rgba(15, 23, 42, .98);
  border: 1px solid rgba(148, 173, 204, .22);
}
html[data-theme="dark"] .topnav-dropdown-head { color: rgba(226, 232, 240, .6); }
html[data-theme="dark"] .topnav-dropdown .topnav-link { color: rgba(226, 232, 240, .9); }
html[data-theme="dark"] .topnav-dropdown .topnav-link:hover,
html[data-theme="dark"] .topnav-dropdown .topnav-link.active {
  background: rgba(37, 99, 235, .2);
  color: #ffffff;
}

/* --- 5. Page sub-bar (breadcrumb/topbar) - follow the theme --- */
.shell-topnav .topbar,
.topbar {
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  border: 1px solid var(--cmd-line);
  box-shadow: var(--elev-1);
}
html[data-theme="dark"] .shell-topnav .topbar,
html[data-theme="dark"] .topbar {
  background: color-mix(in oklab, var(--surface) 80%, transparent);
}

/* --- 6. Text safety net - anything generic inherits theme ink --- */
body,
.content,
#content,
p, li, td, dd, dt { color: var(--ink); }

.muted, .text-muted, .subtle, .help, .hint,
.form-hint, .field-help, .help-text, .note, small.muted,
.crumb, .section-sub, .card-sub, .page-title small,
.section-hub-card-sub, .kpi-label, .kpi-sub { color: var(--ink-muted); }

h1, h2, h3, h4, h5, h6,
.page-title h1, .card-title, .section-title,
.section-hub-title, .modal-title, .dash-v6-sec-title { color: var(--ink); }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* Inputs read on the active surface with theme-aware text */
.input, .select, .textarea,
input[type="text"], input[type="number"], input[type="date"], input[type="month"],
input[type="search"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--cmd-line-strong);
}
::placeholder { color: color-mix(in oklab, var(--ink-muted) 68%, transparent); }

/* --- 7. KPI / stat tiles - clean panel in each theme --- */
.kpi,
.dash-v5-stat {
  background:
    linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--surface) 94%, var(--accent) 4%));
}
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .dash-v5-stat {
  background:
    linear-gradient(180deg, var(--surface-raised), color-mix(in oklab, var(--surface-raised) 90%, var(--accent) 6%));
}

/* --- 8. Dashboard hero - bright brand banner in light, deep navy in dark ---
   modern-ui.css hard-codes a deep-navy hero in both themes; in light mode we
   make it an on-brand teal->blue banner so the light dashboard reads as light
   (one vivid feature panel, not a dark slab). Text stays white on both. */
.dash-v5-hero {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 24px 56px -34px rgba(13, 148, 136, .7);
}
html[data-theme="dark"] .dash-v5-hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(135deg, #0b1324 0%, #13233a 52%, #0f2f34 100%);
  background-size: 38px 38px, 38px 38px, 100% 100%;
  border-color: rgba(148, 173, 204, .18);
  box-shadow: 0 28px 70px -44px rgba(2, 6, 23, .96);
}

/* --- 9. Re-theme legacy hard-coded surfaces (ui-refresh.css) to TOKENS ---
   These were fixed to light-only values, so their TEXT and BACKGROUNDS did
   not follow the theme (dark-on-dark table cells, white modal bodies in dark
   mode, etc). Mapping to tokens makes a single rule adapt to both themes. */

/* Tables - cells, headers, stripes, hover */
thead tr { background: var(--surface-subtle); }
.data-table th,
.tracking-fast-table th,
th {
  background: var(--surface-subtle);
  color: var(--ink-muted);
  border-bottom: 1px solid var(--cmd-line-strong);
}
.data-table td,
.tracking-fast-table td,
td {
  color: var(--ink);
  border-bottom: 1px solid var(--cmd-line);
}
.data-table tbody tr:nth-child(even),
.tracking-fast-table tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--ink) 3%, transparent);
}
.data-table tbody tr:hover,
.tracking-fast-table tbody tr:hover,
tbody tr:hover {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.tracking-fast-scroll { background: var(--surface); }
.tracking-fast-table th { background: var(--surface-subtle); }

/* Disabled inputs */
.input[disabled], .select[disabled], textarea[disabled],
input[disabled], select[disabled] {
  background: var(--surface-alt);
  color: var(--ink-subtle);
}

/* Modals - frame, header, body, footer follow the theme */
.modal { background: var(--surface); }
.modal-body { background: var(--surface); }
.modal-foot { border-top-color: var(--cmd-line); }

/* Ledger index rows + legacy heroes */
.ledger-index-row { background: var(--surface); }
.ledger-index-row:hover,
.ledger-index-row:focus { background: var(--surface-alt); }
.dash-v4-hero,
.ledger-index-hero {
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, transparent), transparent),
    var(--surface);
}

/* --- 10. Dark-mode polish for light-only chips / code blocks ---
   (dark-scoped only - light mode keeps its original look) */
html[data-theme="dark"] .ledger-chip,
html[data-theme="dark"] .ledger-index-chip {
  background: color-mix(in oklab, var(--surface-alt) 70%, transparent);
  border-color: var(--cmd-line);
  color: var(--ink-muted);
}
html[data-theme="dark"] .audit-json {
  background: var(--surface-subtle);
  color: var(--ink);
}

/* LR / builty print sheets stay white paper in BOTH themes (for printing). */

/* ==== responsive.css (199 lines) ==== */
/* ============================================================
   RESPONSIVE LAYER - Poonam Cargo Movers
   Loaded LAST. Makes the whole ERP adapt to any device:
   big monitors, laptops, tablets and phones. CSS-only (fast,
   no JS), token-based, and respects the View Settings density
   (Comfortable / Compact) and theme.
   Breakpoints: >=1680 (big), 1366, 1180, 1024 (tablet),
                768 (large phone), 480 (small phone).
   ============================================================ */

/* --- 0. Universal safety nets --- */
img { max-width: 100%; height: auto; }

/* Grid/flex children may not shrink below content -> overflow. Allow shrink. */
.kpi-grid > *, .section-hub-grid > *, .dash-v6-charts-grid > *,
.dash-v5-grid > *, .field-grid > *, .filter-bar > *,
.driver-hisab-workspace > *, .dh-facts > *, .dh-break > * { min-width: 0; }

/* Every data table stays scroll-contained at ANY width (not just phones),
   so wide tables never blow out the page on laptops/tablets. */
.table-scroll, .data-table-wrap, .tracking-fast-scroll,
.dash-v6-drill-tablewrap, .ledger-scroll, .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Promote each scroller to its own GPU layer so momentum scrolling (both
     axes) runs on the compositor thread instead of repainting the page every
     frame -> noticeably smoother/faster flings on phones and heavy tables. */
  will-change: scroll-position;
  transform: translateZ(0);
}
/* Subtle scrollbar so the "scroll me" affordance is visible on touch. */
/* --- 0b. WIDE TABLES - Excel-like full data + clear slider ---
   Goal: every cell shows its data fully; if the table is wider than the screen
   you get an obvious horizontal slider. Columns scroll naturally with the data. */

/* Columns size to their content (Excel-like); each cell shows on one line so
   no data is hidden. Table grows past the card when needed -> slider appears.
   min-width:100% keeps narrow tables filling the card nicely. */
.data-table { }
.data-table th, .data-table td { white-space: nowrap; }
/* Opt-in wrapping for genuinely long free text via a .wrap-cell class. */
.data-table td.wrap-cell, .data-table th.wrap-cell { white-space: normal; overflow-wrap: anywhere; min-width: 180px; }

/* Big, obviously-grabbable horizontal slider on every table scroller. */
.table-scroll, .tracking-fast-scroll, .data-table-wrap, .dash-v6-drill-tablewrap {
  scrollbar-gutter: stable;
  scrollbar-color: color-mix(in oklab, var(--accent) 65%, var(--border-strong)) var(--surface-subtle);
}
.table-scroll::-webkit-scrollbar,
.tracking-fast-scroll::-webkit-scrollbar,
.data-table-wrap::-webkit-scrollbar,
.dash-v6-drill-tablewrap::-webkit-scrollbar { height: 12px; }
.table-scroll::-webkit-scrollbar-track,
.tracking-fast-scroll::-webkit-scrollbar-track { background: var(--surface-subtle); border-radius: 8px; }
.table-scroll::-webkit-scrollbar-thumb,
.tracking-fast-scroll::-webkit-scrollbar-thumb,
.data-table-wrap::-webkit-scrollbar-thumb,
.dash-v6-drill-tablewrap::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--accent) 60%, var(--border-strong));
  border-radius: 8px; border: 2px solid var(--surface-subtle);
}
.table-scroll::-webkit-scrollbar-thumb:hover,
.tracking-fast-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Opaque rows so the frozen columns blend perfectly (light + dark). */
.data-table tbody tr { background-color: var(--surface); }
.data-table tbody tr:nth-child(even) { background-color: var(--surface-subtle); }
.data-table tbody tr:hover { background-color: color-mix(in oklab, var(--accent) 7%, var(--surface)); }

/* --- 1. Big screens (>=1680px): use the space, a touch more air --- */
@media (min-width: 1680px) {
  html:not([data-density="compact"]) { font-size: 16px; }
  .shell-topnav .content, .content { padding-left: 26px; padding-right: 26px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .section-hub-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
/* Ultra-wide (>=2200px): keep content readable, don't stretch edge to edge. */
@media (min-width: 2200px) {
  .shell-topnav .main, main.main { max-width: 2100px; margin-inline: auto; }
}

/* ==== button-layout.css (81 lines) ==== */
/* ============================================================
   BUTTON LAYOUT LAYER - Poonam Cargo Movers
   Loaded LAST. Smart, consistent placement of action buttons
   across every page: primary action prominent and to the right,
   secondary/ghost buttons grouped, even spacing, tidy wrapping.
   CSS-only - no buttons are added, removed, or relabelled.
   ============================================================ */

/* 1. Toolbar / filter rows: even spacing + wrap on small screens. */
.filter-bar { gap: 10px; row-gap: 10px; }

/* 2. Filter bars: controls on the left, action buttons grouped on the RIGHT.
      UI.filterBar wraps the buttons in .filter-actions; this aligns that group
      to the right and lets it wrap as one unit. Bulk-action bars (.bulk-bar)
      keep their own counts-left / delete-right layout. */
.filter-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* 3. Section headings: title on the left, action(s) on the right. */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* 4. Page top-bar action cluster: right side, even gaps, wraps if needed. */
.topbar-right, #topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 5. Modal / form footers: buttons right-aligned (primary ends up far right by
      markup order); the keyboard hint stays on the left. */
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.modal-foot .kbd-hint { margin-right: auto; }

/* 6. Primary action gets a consistent, prominent footprint in the main toolbars
      and footers (table/inline small primaries stay compact). */
#topbar-actions .btn-primary:not(.btn-sm),
.modal-foot .btn-primary:not(.btn-sm),
.filter-bar .btn-primary:not(.btn-sm) { min-width: 124px; justify-content: center; }

/* 6b. Close (X) button - clearly visible & obviously clickable on EVERY detail
       window (all popups use UI.modal, which already renders this button). */
.modal-close {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 7%, transparent);
}
.modal-close svg { width: 18px; height: 18px; }
.modal-close:hover,
.modal-close:focus-visible { background: var(--danger-soft); color: var(--danger); }
@media (pointer: coarse) { .modal-close { width: 40px; height: 40px; } }

/* 7. Inline / table-row action clusters keep a tight, even rhythm. */
.data-table td:last-child .flex { gap: 6px; }
.detail-head .flex, .section-head .flex { gap: 8px; }

/* 8. Small screens: footer + toolbar buttons stretch for easy tapping. */
@media (max-width: 768px) {
  .modal-foot { justify-content: stretch; }
  .modal-foot .btn { flex: 1 1 auto; }
  .modal-foot .kbd-hint { margin-right: 0; width: 100%; }
  /* filter action group goes full-width and its buttons stretch for easy tapping */
  .filter-actions { margin-left: 0; width: 100%; }
  .filter-actions .btn { flex: 1 1 auto; }
}

/* ---- Multi-select filter dropdown (UI.multiSelect) ---- */
.multi-select { position: relative; display: inline-block; }
.multi-select-btn { text-align: left; min-width: 150px; cursor: pointer; }
.multi-select-btn.has-selection { border-color: var(--accent, #0f8f8a); color: var(--accent, #0f766e); font-weight: 700; }
.multi-select-panel {
  display: none; position: absolute; z-index: 60; top: calc(100% + 4px); left: 0;
  min-width: 210px; max-height: 260px; overflow: auto; padding: 6px;
  background: var(--surface, #fff); border: 1px solid var(--cmd-line, #d8e1ee);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
}
.multi-select.open .multi-select-panel { display: block; }
.multi-select-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink, #111827);
}
.multi-select-row:hover { background: var(--surface-subtle, #f1f5f9); }
.multi-select-row input { width: 15px; height: 15px; accent-color: var(--accent, #0f8f8a); }

/* ==== app-native.css (76 lines) ==== */
/* ============================================================
   app-native.css  - loads LAST.
   Two jobs:
   1. Style the "Get the Android app" dashboard banner (all browsers).
   2. When running INSIDE the PCM Fleet Android app (the wrapper adds
      <html class="pcm-app">), apply native-feel tweaks and hide things
      that only make sense in a desktop browser.
   Nothing here changes the normal desktop/website look except the new banner.
   ============================================================ */

/* ---- Dashboard "Get the app" banner ---- */
.dash-app-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 4px 0 16px;
  padding: 14px 18px;
  border: 1px solid color-mix(in oklab, var(--accent, #1366d6) 30%, transparent);
  border-radius: 16px;
  background: linear-gradient(135deg,
              color-mix(in oklab, var(--accent, #1366d6) 14%, var(--surface, #fff)),
              var(--surface, #fff));
  color: var(--ink, #11203a);
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, box-shadow .12s ease;
}
.dash-app-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(19,102,214,.18); }
.dash-app-cta-ic { font-size: 26px; line-height: 1; }
.dash-app-cta-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dash-app-cta-tx b { font-size: 15px; }
.dash-app-cta-tx small { color: var(--ink-muted, #56627a); font-size: 12.5px; }
.dash-app-cta-go {
  font-weight: 700; color: var(--accent, #1366d6);
  white-space: nowrap; font-size: 14px;
}

/* ---- "Get the app" button on the login card ---- */
.login-app-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 14px; padding: 11px 14px;
  border: 1px solid color-mix(in oklab, var(--accent, #1366d6) 35%, transparent);
  border-radius: 12px; background: transparent;
  color: var(--accent, #1366d6); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background .12s ease;
}
.login-app-cta:hover { background: color-mix(in oklab, var(--accent, #1366d6) 10%, transparent); }
.login-app-cta-ic { font-size: 17px; }

/* ============================================================
   IN-APP ONLY (html.pcm-app) - make the WebView feel like an app
   ============================================================ */

/* Hide things that are pointless inside the installed app. */
.pcm-app .pcm-app-hide { display: none; }

/* No browser-style tap flash / long-press text callout on chrome/content,
   but keep selection + paste working in real input fields. */
.pcm-app, .pcm-app * { -webkit-tap-highlight-color: transparent; }
.pcm-app *:not(input):not(textarea):not([contenteditable]) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.pcm-app input, .pcm-app textarea, .pcm-app [contenteditable] {
  -webkit-user-select: text; user-select: text;
}

/* Smooth momentum scrolling and notch-safe padding so it reads as native. */
.pcm-app body { -webkit-overflow-scrolling: touch; }
.pcm-app .app-shell, .pcm-app .topbar, .pcm-app .app-topbar {
  padding-top: env(safe-area-inset-top);
}
.pcm-app { padding-bottom: env(safe-area-inset-bottom); }

/* ==== performance.css (101 lines) ==== */
/* PCM performance layer
   Final override loaded after the older theme files. It keeps the UI clean
   while removing costly scroll-linked blur/shadow effects on large data pages. */

html, body { scroll-behavior: auto; }

*, *::before, *::after {
  animation-duration: .001ms;
  animation-iteration-count: 1;
  transition-property: color, background-color, border-color, opacity, box-shadow;
  transition-duration: .08s;
}

.primary-nav,
.topbar,
.filter-bar,
.dash-v6-period,
.dashboard-period-bar,
.dashboard-filter-bar,
.modal,
.modal-bg,
.search-overlay-card,
.topnav-dropdown,
.card,
.table-card,
.section-hub-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card,
.table-card,
.section-hub-card,
.kpi,
.dash-v5-stat,
.dash-v5-panel,
.dash-v6-panel,
.filter-bar {
  box-shadow: var(--shadow);
}


.data-table th,
.table-card thead th,
.modal-head,
.modal-foot {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@supports (animation-timeline: scroll()) {
  .primary-nav,
  .topbar,
  .table-card thead th {
    animation: none;
    animation-timeline: auto;
  }
}

@media (max-width: 760px) {
  .table-card,
  .table-wrap,
  .table-scroll,
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table,
  .table-card table {
    min-width: 760px;
  }
}

/* ==== shadcn-ui.css (302 lines) ==== */
/* ============================================================
   SHADCN-STYLE UI LAYER — Poonam Cargo Movers
   Loaded LAST (after every other stylesheet) so it wins on
   equal specificity. Visual-only, token-based, theme-aware.

   Adopts shadcn/ui patterns on top of the EXISTING brand
   (teal --accent + blue), without a framework or build step:
     - consistent button variants + focus rings
     - calm, non-shouty destructive actions inside tables
     - full-width, centred empty states
     - reachable mobile navigation (all sections visible)
     - a floating quick-add that no longer covers row actions
   Every rule reuses the app's own CSS variables, so light and
   dark themes and the Comfortable/Compact density all follow.
   ============================================================ */

/* --- 0. shadcn-flavoured tokens (additive; brand kept) --- */

/* --- 1. Focus rings: consolidated into the single :focus-visible rule --- */

/* --- 2. Buttons: consolidated into the single .btn system.
   Danger is quiet-by-default there (soft border + danger text, filling
   danger-soft on hover), so armed actions stay calm in tables. --- */

/* Row-level delete/edit INSIDE a table become calm ghost buttons.
   This removes the "wall of solid red" running down list pages while
   keeping delete unmistakably red on hover. */
.data-table .btn.btn-danger,
.data-table td .btn-danger {
  background: transparent;
  background-image: none;
  border-color: transparent;
  color: var(--danger);
  box-shadow: none;
  opacity: .85;
}
.data-table .btn.btn-danger:hover,
.data-table td .btn-danger:hover {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
  opacity: 1;
  box-shadow: none;
  transform: none;
}
/* Non-destructive row actions (View/Edit) read as one quiet group. */
.data-table td .btn:not(.btn-primary):not(.btn-danger) {
  box-shadow: none;
}
/* Dark theme ships its own solid `html[data-theme="dark"] .btn.btn-danger`
   (specificity 0,3,1) that outranks the calm rule above; match it with a
   dark-scoped, higher-specificity calm rule so row deletes stay quiet in
   dark mode too. */
html[data-theme="dark"] .data-table .btn.btn-danger,
html[data-theme="dark"] .data-table td .btn-danger {
  background: transparent;
  background-image: none;
  border-color: transparent;
  color: var(--danger);
  box-shadow: none;
  opacity: .9;
}
html[data-theme="dark"] .data-table .btn.btn-danger:hover,
html[data-theme="dark"] .data-table td .btn-danger:hover {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
  opacity: 1;
}

/* --- 3. Inputs / selects — consistent radius ---
   `.textarea` (the class) was missing from this list while `textarea` (the
   element) was in it, so a textarea written as <div class="textarea"> kept the
   older 11px corner while every other control sat at 6px. */
.input, .select, .textarea, select,
input[type="text"], input[type="number"], input[type="date"],
input[type="month"], input[type="search"], input[type="password"],
input[type="email"], input[type="tel"], textarea {
  border-radius: var(--radius);
}

/* --- 4. Cards — consistent border + soft elevation --- */
.card, .table-card {
  border-radius: var(--sc-radius);
}

/* --- 5. Empty states — span the full card and centre properly.
   When a table has no rows it collapses to header width, which used
   to strand the "No records" block on the left with a blank void to
   the right. Force the empty table (and its single colspan cell) to
   full width so the message centres across the whole card. --- */
.data-table:has(> tbody > tr.tr-empty),
.data-table:has(> tbody > tr.table-filter-empty) {
  width: 100%;
  min-width: 100%;
}
.tr-empty > td,
.table-filter-empty > td {
  width: 100%;
  text-align: center;
}
/* Keep the empty cell on the theme surface. A non-theme-aware rule left the
   empty row's cell near-white, which flashed as a bright panel in dark mode
   once the empty state spanned the full width. Pin it to the surface token so
   it is white on light and deep-slate on dark. */
html .data-table .tr-empty > td,
html .data-table .table-filter-empty > td {
  background: var(--surface);
}
.empty-state {
  width: 100%;
  padding: 40px 16px;
  background: transparent;
}
.empty-state-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}
.empty-state-icon .nav-icon {
  width: 22px;
  height: 22px;
  opacity: 1;
}

/* --- 6. Badges / status pills — crisper shadcn chip --- */
.pill {
  letter-spacing: .01em;
}

/* --- 7. Floating quick-add (FAB) --- */
/* On desktop every list page already has a header "+ Add" button and
   Ctrl+K search, and the FAB floated over the last row's action column.
   Hide it on desktop (declutter + no overlap); keep it on touch/mobile
   where the header action scrolls out of reach. */
@media (min-width: 1024px) {
  .floating-add,
  .floating-add-menu { display: none; }
}
/* On mobile, give scrollable content room so the FAB never sits on the
   last row, and lift the FAB above the safe-area inset. */
@media (max-width: 1023px) {
  .shell-topnav .content, .content { padding-bottom: 92px; }
  .floating-add { bottom: max(20px, env(safe-area-inset-bottom)); }
}


/* --- 11. Dashboard hero refinement ---
   The light-theme hero (theme-system.css) used a vivid royal-blue → cyan →
   teal gradient with a harsh diagonal streak — visually loud. Refine it into
   a deeper, more premium blue→teal that keeps the exact brand family, with a
   soft top-right light source and a gentle bottom vignette for depth. The
   dark hero (html[data-theme="dark"] .dash-v5-hero, higher specificity) keeps
   its own refined navy; only the shared streak + card polish reach it. */
.dash-v5-hero {
  background:
    radial-gradient(1100px 480px at 86% -30%, rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(900px 620px at -4% 128%, rgba(2, 6, 23, .30), transparent 56%),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(120deg, #1e40af 0%, #0e7490 54%, #0f766e 100%);
  background-size: cover, cover, 40px 40px, 40px 40px, 100% 100%;
}
/* Soften the diagonal light streaks in both themes (were a hard band). */
.dash-v5-hero::before { opacity: .38; }

/* Hero KPI cards: crisp white glass instead of the murky pale-mint tint,
   with a lighter, more refined shadow. Light theme only — the dark rule
   (html[data-theme="dark"] .dash-v5-stat) outranks this and is left intact. */
.dash-v5-command-numbers .dash-v5-stat,
.dash-v5-hero-controls .dash-v5-stat {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 12px 30px -18px rgba(2, 6, 23, .5);
}

/* --- 12. Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ============================================================
   CORRECTIVE LAYER (2026-07-17): full-width registers + header filters
   pcm.css is a stack of concatenated redesign layers - this one is LAST so
   it wins ties. Root cause being fixed: the "WIDE TABLES" layer set
   `.data-table { width: auto; min-width: 100% }` (specificity 0,1,0), but the
   base layer's compound `.table-card table` selector (0,1,1) kept overriding
   min-width back to 760px, so width:auto tables shrank to their content and
   sat in the left half of the card on wide screens. Matching the compound
   selector here restores true full-width tables. table-layout:auto undoes an
   older `fixed + min-width:1040px` layer so columns size to content again
   (fixed layout with equal columns crushed descriptive columns).
   ============================================================ */
.table-card table,
.data-table {
  width: 100%;
  min-width: 100%;
  table-layout: auto;
}

/* The register grid should own most of the viewport: compact chrome above,
   one intentional vertical scroll area inside the table. */
.table-scroll {
  max-height: calc(100vh - 220px);
  min-height: 260px;
}
.server-table-controls {
  margin-bottom: 8px;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.server-table-controls .input[type="search"] {
  max-width: 260px;
}
.server-table-summary:empty {
  display: none;
}
.server-table-page-info {
  white-space: nowrap;
}
.server-table-filter-badge:empty {
  display: none;
}
.server-table-filter-badge {
  color: #0f766e;
  font-weight: 700;
  white-space: nowrap;
}

/* Header filter row: typed inputs must stay compact, aligned and opaque under
   the sticky heading. The generic sticky rule `.table-scroll .data-table thead
   th { top: 0 }` (0,2,2) outranks the old `.data-table .table-filter-row th`
   offset (0,2,1), which parked the filter row UNDER the heading - restate the
   offset at winning specificity. */
.table-scroll .data-table thead .table-filter-row th,
.data-table-wrap .data-table thead .table-filter-row th,
.table-responsive .data-table thead .table-filter-row th {
  top: 38px;
  z-index: 3;
  background: var(--surface-subtle);
}
.data-table .table-filter-row th.table-filter-range {
  min-width: 118px;
}
.data-table .table-filter-row .table-filter-range-stack,
.data-table .table-filter-row th.table-filter-range {
  vertical-align: top;
}
.data-table .table-filter-row th.table-filter-range .table-filter-input {
  display: block;
  min-width: 0;
}
.data-table .table-filter-row th.table-filter-range .table-filter-input + .table-filter-input {
  margin-top: 4px;
}
.table-filter-select {
  appearance: auto;
  padding: 3px 4px;
  min-width: 86px;
}
.table-filter-input[type="date"] {
  padding: 3px 6px;
  font-size: 11px;
}
.table-filter-input[type="number"]::-webkit-outer-spin-button,
.table-filter-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.table-filter-input[type="number"] {
  -moz-appearance: textfield;
}

/* Never let the empty-state row stretch the table into a horizontal scroll. */
.data-table .tr-empty td {
  white-space: normal;
}

/* Mobile: the filter row would eat half the screen inside the card fallback -
   the card layout already linearizes rows, so hide the in-table filter row and
   rely on the page-level filter bar + search (the Filters affordance). */
@media (max-width: 760px) {
  .data-table .table-filter-row {
    display: none;
  }
  .table-scroll {
    max-height: none;
    min-height: 0;
  }
}

/* ============================================================
   QUICK-ADD LAYER (2026-07-18) - the "+ Add new ..." row at the
   bottom of suggest dropdowns (components.js + ui-quick-add.js).
   ============================================================ */
.suggest-menu .suggest-add {
  border-top: 1px solid #e2e8f0;
  color: #0f766e;
  font-weight: 600;
}
.suggest-menu .suggest-add.active,
.suggest-menu .suggest-add:hover {
  background: var(--surface-hover);
  color: #115e59;
}

/* ─── WORKSPACE (2026-07-21): card home matching the phone app design ─── */
.ws-page { max-width: 900px; margin: 0 auto; }
.ws-head { display: flex; align-items: center; gap: 12px; margin: 4px 2px 12px; }
.ws-brand { font-size: 22px; font-weight: 800; color: #0a1c30; }
.ws-sub { font-size: 12px; color: #5b7089; margin-top: 2px; }
.ws-pill { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 6px 14px; border-radius: 999px; background: #0f766e; color: #fff; }
.ws-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ws-actions .btn { flex: 1 1 auto; min-height: 44px; border-radius: 14px; font-weight: 800; }
.ws-caps { font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #0a1c30; margin: 16px 2px 8px; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ws-alert, .ws-reg { background: var(--surface); border: 1px solid #e3e9f1; border-radius: 16px; padding: 13px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ws-tap { cursor: pointer; transition: transform .06s; }
.ws-tap:active { transform: scale(.98); background: var(--surface-hover); border-color: #99ccc4; }
.ws-alert-title { font-size: 14.5px; font-weight: 800; color: #0a1c30; }
.ws-alert-big { font-size: 30px; font-weight: 800; margin: 4px 0 2px; }
.ws-alert-big.ok { color: #15803d; }
.ws-alert-big.warn { color: #b45309; }
.ws-alert-sub { font-size: 12px; color: #5b7089; }
.ws-link { font-size: 12.5px; font-weight: 800; color: #0f766e; margin-top: 7px; }
.ws-reg-name { font-size: 15.5px; font-weight: 800; color: #0a1c30; }
.ws-reg-count { font-size: 12.5px; font-weight: 700; color: #0f766e; margin-top: 4px; }
@media (max-width: 480px) { .ws-grid { grid-template-columns: 1fr 1fr; } }

/* Workspace briefing (morning digest) */
.ws-brief-card { background: var(--surface); border: 1px solid #e3e9f1; border-radius: 16px; padding: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ws-brief-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ws-brief-val { font-size: 18px; font-weight: 800; color: #0a1c30; }
.ws-brief-key { font-size: 11.5px; color: #5b7089; font-weight: 700; }
.ws-brief-sub { font-size: 12.5px; font-weight: 800; color: #0a1c30; margin: 12px 0 6px; }
.ws-brief-party { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px;
  border: 1px solid #eef2f6; border-radius: 12px; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #0a1c30; }
.ws-brief-amt { color: #b45309; white-space: nowrap; }
.ws-share-btn { margin-top: 10px; width: 100%; color: #0f766e; font-weight: 800; }

/* ==== premium-polish.css - sharper, more premium rendering site-wide ====
   A website has no single "resolution"; crispness comes from a good typeface,
   the browser's best text rendering, and DPI-aware details. This final layer
   (loaded last, so it wins) delivers all three with zero new network deps:
   Geist is the modern variable font already bundled for the dashboard, so it
   is self-hosted + offline-safe (no CDN/CSP issue). Latin + Latin-Ext subsets
   only - the Rupee sign (U+20B9) lives in Latin-Ext; Devanagari and other
   scripts fall back gracefully to the system font. */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/dashboard/assets/geist-latin-wght-normal-BgDaEnEv.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/dashboard/assets/geist-latin-ext-wght-normal-DC-KSUi6.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Premium type: Geist first, then the exact system fallback already in use.
   Set on the body (every later body layer is same-or-lower specificity, so this
   wins) + form controls, and let it INHERIT everywhere. We deliberately do NOT
   target table/td/card directly so nothing with its own font (below) is
   clobbered - the whole page still gets Geist via inheritance. */
:root,
html body,
button, input, select, textarea, .btn {
  font-family: 'Geist Variable', -apple-system, 'Segoe UI', 'Segoe UI Variable', system-ui, sans-serif;
}
/* Keep genuinely monospaced surfaces monospaced (IDs, code, aligned figures). */
.mono, .input.mono, code, kbd, pre, samp {
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
}
/* The LR / Builty print sheets must stay pixel-identical to the physical pads:
   force their original Arial so the site-wide Geist never reaches them. */
.lr-print-sheet, .lr-print-sheet *,
.lr-classic, .lr-classic *,
.lr-copy-page, .lr-copy-page *,
.lr-preview-wrap .lr-print-sheet, .lr-preview-wrap .lr-print-sheet * {
  font-family: Arial, Helvetica, sans-serif;
}

/* Sharpest text rendering across the whole site (overrides the fast layer's
   optimizeSpeed): grayscale AA on mac, kerning + ligatures everywhere. */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}
/* Lining + tabular figures so every amount/number column is even and crisp. */
.data-table, .data-table td, .data-table th,
.kpi-value, .money, .amount, .num, .mono,
[class*='-val'], [class*='-amt'], [class*='-value'] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* A touch of optical tightening on large display text - Geist reads crisper
   and more premium set slightly tight at big sizes (small text untouched). */
h1, h2, .kpi-value, .dash-v5-hero, .hero-title, .ws-hero, .section-caps {
  letter-spacing: 0;
}

/* ============================================================
   PREMIUM TOP NAVIGATION (final layer - wins over the older nav
   passes). Token-based so it adapts to light AND dark themes:
   a clean surface bar with a hairline + soft lift, quiet triggers
   with a refined soft-teal active pill + accent ring, a caret that
   rotates open, and an elevated dropdown card.
   ============================================================ */
.shell-topnav > header.primary-nav,
.primary-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -22px rgba(15, 23, 42, .30);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Brand + user text read correctly on the surface bar (override the older
   command-deck layer that hardcoded near-white text). */
.primary-nav .topnav-brand,
.primary-nav .topnav-user { color: var(--ink); }
.primary-nav .topnav-name,
.primary-nav .topnav-user-name { color: var(--ink); letter-spacing: 0; }
.primary-nav .topnav-sub,
.primary-nav .topnav-user-role { color: var(--ink-subtle); }

.primary-nav .topnav-menu { gap: 3px; }

/* Quiet, refined triggers */
.primary-nav .topnav-trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-muted);
  background: transparent;
  transition: color .16s var(--m-ease, ease), background .16s var(--m-ease, ease), box-shadow .16s var(--m-ease, ease);
}
.primary-nav .topnav-trigger:hover,
.primary-nav .topnav-group:hover .topnav-trigger,
.primary-nav .topnav-group:focus-within .topnav-trigger {
  color: var(--ink);
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
}
/* Active section: soft teal pill + accent text + a hairline accent ring, plus
   a short centered underline as a crisp "you are here" cue. */
.primary-nav .topnav-group.active .topnav-trigger {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 24%, transparent);
}
.primary-nav .topnav-group.active .topnav-trigger::after {
  content: '';
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 3px; width: 18px; height: 2px;
  border-radius: 2px; background: var(--accent);
}
/* Caret: smaller, muted, rotates when its menu opens */
.primary-nav .topnav-trigger .nav-icon {
  width: 14px; height: 14px; opacity: .5;
  transition: transform .18s var(--m-ease, ease), opacity .16s ease;
}
.primary-nav .topnav-group:hover .topnav-trigger .nav-icon,
.primary-nav .topnav-group:focus-within .topnav-trigger .nav-icon,
.primary-nav .topnav-group.active .topnav-trigger .nav-icon { opacity: .85; transform: rotate(180deg); }

/* Elevated dropdown card */
.primary-nav .topnav-dropdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 22px 50px -26px rgba(15, 23, 42, .42), 0 2px 8px -5px rgba(15, 23, 42, .14);
  padding: 8px;
}
.primary-nav .topnav-dropdown-head {
  color: var(--ink-subtle);
  letter-spacing: .04em;
}
.primary-nav .topnav-link {
  border-radius: 9px;
  font-weight: 600;
  color: var(--ink-muted);
}
.primary-nav .topnav-link:hover,
.primary-nav .topnav-link.active {
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  color: var(--accent);
}
/* Tool + logout buttons match the refined pill language */
.primary-nav .topnav-tool,
.primary-nav .topnav-logout {
  border-radius: 10px;
  color: var(--ink-muted);
  transition: color .16s ease, background .16s ease;
}
.primary-nav .topnav-tool:hover { color: var(--ink); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
.primary-nav .topnav-logout:hover { color: var(--danger); background: var(--danger-soft, color-mix(in oklab, var(--danger) 10%, var(--surface))); }

/* ============================================================
   PREMIUM CARDS, KPI TILES & BUTTONS (final layer, token-based,
   light+dark aware) - cohesive with the refined nav: softer
   layered elevation, a gentle hover-lift on INTERACTIVE cards/
   tiles (data + table cards stay put), crisper KPI typography,
   and subtle button polish.
   ============================================================ */
/* Softer, layered resting elevation + smooth transitions. */
.card, .table-card, .section-hub-card, .complete-export-card,
.tracking-fast-card, .dash-v4-card, .dash-v4-panel, .dash-v4-hero,
.ledger-index-list, .ledger-index-hero {
  box-shadow: var(--elev-1);
  transition: box-shadow .18s var(--m-ease, ease), transform .18s var(--m-ease, ease), border-color .18s ease;
}
/* Modals get a richer, more premium depth. */
.modal, .modal-card { box-shadow: var(--elev-3); }

/* Interactive cards gently lift + pick up an accent-tinted edge on hover.
   (Plain .card / .table-card that wrap data are deliberately excluded.) */
.section-hub-card, .dash-v4-card, .dash-action-card, .dash-work-card,
.dash-focus-card, .dash-command-stat {
  cursor: pointer;
}
.section-hub-card:hover, .dash-v4-card:hover, .dash-action-card:hover,
.dash-work-card:hover, .dash-focus-card:hover, .dash-command-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
}

/* KPI tiles: refined resting elevation + hover lift. */
.kpi, .ledger-index-stat, .dash-v5-stat {
  box-shadow: var(--elev-1);
  transition: box-shadow .18s var(--m-ease, ease), transform .18s var(--m-ease, ease), border-color .18s ease;
}
.kpi:hover, .ledger-index-stat:hover, .dash-v5-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: color-mix(in oklab, var(--accent) 24%, var(--border));
}
/* Big numbers read crisp + premium: Geist, tight, tabular. */
.kpi-value, .ledger-index-stat-value, .dash-v4-metric-value, .dash-v5-stat b {
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
/* Micro-labels: quiet uppercase caption - a classic premium dashboard cue. */
.kpi-label, .ledger-index-stat-label, .dash-v4-metric-label {
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-subtle);
}

/* Buttons: keep the existing system; add cohesive polish + a soft accent glow
   and a subtle lift on the primary action. */
/* 8px, the same corner as the input beside it. A button at 11px next to a
   search box at 6px is the single most visible inconsistency in a filter bar,
   and every page has a filter bar. */
.btn { border-radius: var(--radius); }
.btn-primary {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08),
              0 8px 20px -10px color-mix(in oklab, var(--accent) 60%, transparent);
  transition: transform .15s var(--m-ease, ease), box-shadow .15s var(--m-ease, ease), filter .15s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .10),
              0 12px 26px -10px color-mix(in oklab, var(--accent) 72%, transparent);
}
.btn-primary:active { transform: translateY(0); }

/* Respect reduced-motion: no lifts/transforms for users who opt out. */
@media (prefers-reduced-motion: reduce) {
  .section-hub-card:hover, .dash-v4-card:hover, .dash-action-card:hover,
  .dash-work-card:hover, .dash-focus-card:hover, .dash-command-stat:hover,
  .kpi:hover, .ledger-index-stat:hover, .dash-v5-stat:hover,
  .btn-primary:hover { transform: none; }
}

/* --- Premium fixes found in visual review --- */
/* KPI numbers must never wrap (the Rupee sign was dropping onto its own line). */
.kpi-value, .ledger-index-stat-value, .dash-v4-metric-value {
  white-space: nowrap;
}
/* Status badges/pills: soft tinted, padded chips - not a bare currentColor oval
   (the old `.badge{border:1px solid currentColor}` with no padding rendered an
   ellipse cutting through the label). */
.badge, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.55;
  white-space: nowrap;
  border: 1px solid transparent;
  background: color-mix(in oklab, var(--ink) 6%, var(--surface));
  color: var(--ink-muted);
}
.badge.ok, .pill.ok, .badge.green, .badge.success, .badge.delivered, .badge.received, .badge.paid {
  background: var(--ok-soft); color: var(--ok);
  border-color: color-mix(in oklab, var(--ok) 22%, transparent);
}
.badge.warn, .pill.warn, .badge.amber, .badge.pending, .badge.transit {
  background: var(--warn-soft); color: var(--warn);
  border-color: color-mix(in oklab, var(--warn) 26%, transparent);
}
.badge.danger, .pill.danger, .badge.red, .badge.overdue, .badge.cancelled {
  background: color-mix(in oklab, var(--danger) 12%, var(--surface));
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 26%, transparent);
}
/* Card/section headers were a hardcoded WHITE gradient - invisible title text
   in dark mode. Make them theme-aware (token surface + hairline). */
.card-head, .section-head, .detail-head, .modal-head, .modal-foot {
  background: var(--surface);
  border-bottom-color: var(--border);
}

/* ==== workspace v2 (2026-07-23) - premium, detailed, space-smart ====
   Later-wins layer over the 2026-07-21 ws- block: token-driven (auto dark),
   hairline cards with soft elevation, tabular numerals, a compact KPI band,
   semantic-striped alerts, dense count-first register tiles, slim filterable
   chips for downloads/ledgers, and a 2-column split on wide screens. */
.ws-page.ws2 { margin: 0 auto; }
.ws2 .ws-hero { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px 12px; box-shadow: var(--elev-1); margin-bottom: 4px; }
.ws2 .ws-head { margin: 0 0 10px; }
.ws2 .ws-brand { font-size: 21px; font-weight: 800; letter-spacing: 0; color: var(--ink); }
.ws2 .ws-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ws2 .ws-pill { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  font-size: 10.5px; letter-spacing: .08em; padding: 5px 12px; }
.ws2 .ws-actions { margin-bottom: 0; gap: 8px; }
.ws2 .ws-actions .btn { flex: 0 1 auto; min-height: 40px; border-radius: 10px; }
.ws2 .ws-caps { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--muted);
  font-variant-numeric: tabular-nums; margin: 18px 2px 8px; }

/* KPI band */
.ws2 .ws-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ws2 .ws-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 13px; box-shadow: var(--elev-1); min-width: 0; }
.ws2 .ws-kpi-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); }
.ws2 .ws-kpi-big { font-size: 21px; font-weight: 800; color: var(--ink); margin: 3px 0 1px;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws2 .ws-kpi-sub { font-size: 11px; color: var(--muted); }

/* 2-column zone: main + rail on wide screens, stacked on phones */
.ws2 .ws-cols { display: grid; grid-template-columns: 1fr; gap: 0 18px; align-items: start; }
@media (min-width: 1000px) {
  .ws2 .ws-cols { grid-template-columns: minmax(0, 1fr) 340px; }
  .ws2 .ws-col-rail .ws-caps:first-child { margin-top: 18px; }
}

/* Alerts: hairline cards with a semantic left stripe */
.ws2 .ws-grid { gap: 10px; }
.ws2 .ws-grid-alerts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ws2 .ws-alert { border-radius: 12px; padding: 11px 13px 10px; box-shadow: var(--elev-1);
  border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden; }
.ws2 .ws-alert::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.ws2 .ws-alert.ws-tone-warn::before { background: var(--warn); }
.ws2 .ws-alert.ws-tone-ok::before { background: transparent; }
.ws2 .ws-alert-title { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); }
.ws2 .ws-alert-big { font-size: 26px; margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.ws2 .ws-alert-big.ok { color: var(--ok); }
.ws2 .ws-alert-big.warn { color: var(--warn); }
.ws2 .ws-alert-sub { font-size: 11.5px; color: var(--muted); }
.ws2 .ws-link { font-size: 12px; color: var(--accent); margin-top: 6px; }

/* Registers: dense count-first tiles */
.ws2 .ws-grid-regs { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
.ws2 .ws-reg { border-radius: 12px; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--elev-1); }
.ws2 .ws-reg-count { font-size: 19px; font-weight: 800; color: var(--ink); margin: 0;
  font-variant-numeric: tabular-nums; }
.ws2 .ws-reg-name { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: 1px; }
.ws2 .ws-tap { transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease; }
.ws2 .ws-tap:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.ws2 .ws-tap:active { transform: scale(.985); background: var(--accent-soft); }

/* Briefing (rail) */
.ws2 .ws-brief-card { border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--elev-1); padding: 13px; }
.ws2 .ws-brief-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 9px; }
.ws2 .ws-brief-val { color: var(--ink); font-variant-numeric: tabular-nums; }
.ws2 .ws-brief-key { color: var(--muted); }
.ws2 .ws-brief-sub { color: var(--ink); }
.ws2 .ws-brief-party { border-color: var(--border); color: var(--ink); border-radius: 10px; }
.ws2 .ws-brief-amt { color: var(--warn); }
.ws2 .ws-share-btn { color: var(--accent); border: 1px solid var(--border); border-radius: 10px; }

/* Chips: downloads + ledgers in a few lines instead of 34 full cards */
.ws2 .ws-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ws2 .ws-chip { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px;
  cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.ws2 .ws-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ws2 .ws-chip:active { transform: scale(.97); }
.ws2 .ws-chip-dl::after { content: ' \2193'; color: var(--muted); font-weight: 800; }
.ws2 .ws-chip-dl:hover::after { color: var(--accent); }
.ws2 .ws-filter { width: 100%; max-width: 320px; margin-bottom: 9px; min-height: 36px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink);
  padding: 7px 12px; font-size: 13px; }
.ws2 .ws-filter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 480px) {
  .ws2 .ws-grid-regs { grid-template-columns: repeat(2, 1fr); }
  .ws2 .ws-kpis { grid-template-columns: repeat(2, 1fr); }
  .ws2 .ws-grid-alerts { grid-template-columns: repeat(2, 1fr); }
}

/* ws2.1: fill the screen - no fixed page cap. Wide monitors get more
   columns and a wider rail instead of empty side margins; the auto-fill
   grids adapt to any width. Plus the focused drill-modal pieces. */
.ws-page.ws2 { max-width: none; }
@media (min-width: 1400px) {
  .ws2 .ws-cols { grid-template-columns: minmax(0, 1fr) 400px; }
}
@media (min-width: 1700px) {
  .ws2 .ws-kpis { grid-template-columns: repeat(4, 1fr); }
  .ws2 .ws-grid-alerts { grid-template-columns: repeat(4, 1fr); }
  .ws2 .ws-grid-regs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.ws-drill-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.ws-drill-chip { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: 999px; padding: 4px 11px;
  font-variant-numeric: tabular-nums; }
/* One container scrolls BOTH axes, so the sideways scrollbar is always
   visible at the bottom of the box - no need to scroll past every row to
   reach it. The table's own inner scroller is neutralised, and the header
   row sticks while scrolling down. */
.ws-drill-table { max-height: 60vh; overflow: auto; margin-top: 9px;
  border: 1px solid var(--border); overscroll-behavior: contain; }
.ws-drill-table .table-scroll { overflow: visible !important; max-height: none !important; border: 0; }
.ws-drill-table table { min-width: max-content; }
.ws-drill-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); }

/* =================================================================
   PINNED TABLE FOOTER (2026-07-23) - the strip with row counts, the
   Columns button and the pager must never scroll out of sight.
   1) Workspace drill modal: the footer is moved OUTSIDE the both-axes
      scroller (.ws-drill-foot, built in pages-workspace.js) so neither
      vertical nor sideways panning can hide it.
   2) Site-wide: .table-meta sticks to the bottom of whatever scrolls
      (the page or a modal body), so on a tall register the row counts
      and pager float at the screen edge until their natural place
      scrolls into view. No effect when the footer is already visible.
   ================================================================= */
.table-meta { position: sticky; bottom: 0; z-index: 5; }
.ws-drill-table { border-radius: 10px 10px 0 0; border-bottom: 0; }
.ws-drill-foot { border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 10px 10px; }
.ws-drill-foot .table-meta { border-radius: 0 0 9px 9px; }
.ws-drill-foot:empty { display: none; }
/* Inside the drill scroller the card must NOT clip (.card/.table-card set
   overflow:hidden for corner rounding) - clipping here swallowed every
   column past the viewport (no sideways scrollbar could ever appear) and
   broke the sticky header, because the card became the nearest clipping
   box. Let the card grow to the table's width so row backgrounds cover
   the whole scrollable area. */
.ws-drill-table .table-card { overflow: visible; width: max-content; min-width: 100%; }
/* Dark theme: the sticky filter row pinned background: #f8fafc at (0,3,2)
   specificity (see the sticky-offset restatement above) - nothing in the
   dark block outranked it, so dark mode showed a white band across every
   filterable table, most visibly in the workspace drill. Override at the
   same shape plus the theme prefix. */
html[data-theme="dark"] .data-table .table-filter-row th,
html[data-theme="dark"] .table-scroll .data-table thead .table-filter-row th,
html[data-theme="dark"] .data-table-wrap .data-table thead .table-filter-row th,
html[data-theme="dark"] .table-responsive .data-table thead .table-filter-row th {
  background: var(--surface);
}
/* The sticky footer only engages if no box between it and the real
   scroller owns a scrollport. .card/.table-card used overflow:hidden for
   corner rounding, which made the (never-scrolling) card the sticky's
   scrollport - a silent no-op on every register and modal. overflow:clip
   keeps the exact same corner crop but creates NO scroll container, so
   the strip now sticks to the page or modal-body scroller.
   (Also outranks the mobile-layer ".table-card { overflow-x: auto }" -
   the inner .table-scroll already owns sideways panning.) */
.card.table-card { overflow: clip; }

/*
 * THE ROWS SCROLL INSIDE THE CARD, AND THE STRIP SITS UNDER THEM.
 *
 * Owner, 2026-08-08: "there is a footer which is attached to main screen not
 * table itself, when we slide down or up in that table, i can see the data
 * moving behind it up to down."
 *
 * Both of his rules are true at once and were in conflict. The 2026-07-24 rule
 * is that the row-count and pager must NEVER scroll out of sight, which is why
 * the strip was `position: sticky; bottom: 0`. But sticky means the PAGE
 * scrolls while the strip stays put, so rows pass beneath it. Measured before
 * this change: two rows overlapping the strip, with one fully visible BELOW it.
 * Making the strip opaque (an earlier fix) stopped the smear and did nothing
 * about the overlap.
 *
 * The answer is to give the rows their own scroller. The card becomes a
 * column: `.table-scroll` takes the remaining height and scrolls, the strip
 * sits beneath it and never moves. Always visible, and nothing can pass under
 * it, because the rows now END where the strip begins.
 *
 * OPT-IN by class, not on `.card.table-card` at large. The workspace drill has
 * a documented exception - its table deliberately SPILLS out of the card into
 * an outer scroller, and its meta strip is moved into `.ws-drill-foot`
 * entirely - and a blanket rule would swallow that spill and cut its columns
 * off again. ui-table.js adds the class; anything hand-rolled is untouched.
 *
 * `min-height: 0` on the scroller is load-bearing: a flex child refuses to
 * shrink below its content without it, so the card would grow to the full
 * table height and nothing would scroll at all.
 */
/*
 * ONLY WHEN THE CARD IS ACTUALLY BOUNDED - `--bounded`, set by ui-table.js
 * when it has applied a height, and removed when it has not.
 *
 * This matters and was got wrong first time. On a narrow screen there is not
 * enough room below the filters to make a scroller worth having, so the height
 * is deliberately not applied - and the strip must then go back to being
 * sticky, or it sits at the bottom of a 2,861 px card and scrolls out of sight
 * entirely. Measured on a 412x915 viewport: the strip was off-screen, which is
 * exactly the rule this whole area exists to keep.
 *
 * So: bounded, and the rows scroll inside the card with the strip beneath
 * them. Unbounded, and everything falls back to the sticky behaviour that was
 * there before, which is right for a phone.
 */
.card.table-card.table-card--framed.table-card--bounded {
  display: flex;
  flex-direction: column;
}

.table-card--framed.table-card--bounded > .table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.table-card--framed.table-card--bounded > .table-meta {
  position: static;
  flex: 0 0 auto;
}

/*
 * THE WORKSPACE DRILL KEEPS ITS EXCEPTION, EXPLICITLY.
 *
 * Its table deliberately SPILLS out of the card into the `.ws-drill-table`
 * scroller - that spill is the only reason sideways scrolling works there, and
 * an earlier change that made the card a scrollport swallowed it and cut
 * columns 5 and beyond off the screen. Its meta strip is moved out into
 * `.ws-drill-foot` by pages-workspace.js, so it does not need framing either.
 *
 * ui-table.js adds `--framed` to every table it builds, including this one, so
 * the exception is undone here rather than left to depend on which selector
 * happens to win. Stated as a rule instead of relying on the class not being
 * applied: the next person to touch ui-table.js should not have to know.
 */
.ws-drill-table .card.table-card.table-card--framed {
  display: block;
  max-height: none;
}
/* Except inside the workspace drill: there the card must SPILL so the
   wide table reaches the .ws-drill-table scroller (clip would swallow
   the sideways overflow and cut columns off again). */
.ws-drill-table .card.table-card { overflow: visible; }
/* Drill modal footers: pin to the modal-body scroller on short screens. */
.ws-drill-foot { position: sticky; bottom: 0; z-index: 5; background: var(--surface); }
.v6-drill-meta { position: sticky; bottom: 0; z-index: 5; background: var(--surface); padding: 6px 2px; }
/* Reports drill: the money-totals row pins to the bottom of the both-axes
   scroller (this layer's border-collapse:separate makes tfoot sticky
   work); its own background is already opaque (surface-subtle). */
.dash-v6-drill-tablewrap tfoot td { position: sticky; bottom: 0; z-index: 2; }
.dash-v6-drill-notebar { margin-top: 8px; }
.dash-v6-drill-notebar:empty { display: none; }
/* Print: strips render once, at their natural place after the table. */
@media print {
  .table-meta, .ws-drill-foot, .v6-drill-meta { position: static; }
}

/* ============================================================
   DASHBOARD CONTROL ROOM (2026-07-25)
   Final, route-scoped presentation layer for #dashboard only.
   Functional markup, data contracts and shared page styling stay unchanged.
   ============================================================ */

body.dashboard-route-active .topbar {
  /* Inset by exactly the padding `.content` uses, so this bar lines up with the
     cards below it. It used to carry the same 1600px cap the shell did; with
     that cap gone from the shell, leaving it here would have left the title bar
     visibly narrower than everything under it. MEASURED, not read off the
     stylesheet: `.content` is restyled in several later layers, and its
     effective horizontal padding is 18px here and 26px past 1680. */
  width: calc(100% - 36px);
  min-height: 62px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

/* `.content` widens its padding to 26px past this breakpoint - follow it. */
@media (min-width: 1680px) {
  body.dashboard-route-active .topbar { width: calc(100% - 52px); }
}

body.dashboard-route-active .topbar-left,
body.dashboard-route-active .topbar-right {
  gap: 10px;
}

body.dashboard-route-active #topbar-pagename {
  font-size: 20px;
  line-height: 1.15;
}

body.dashboard-route-active #topbar-crumb {
  font-size: 12px;
}

body.dashboard-route-active #content {
  padding-top: 12px;
}

.dashboard-shell.dashboard-v6 {
  width: 100%;
  /* No width cap of its own. The app already decides how wide a page may get -
     full width, and only past 2200px does `main.main` hold it to 2100 so an
     ultra-wide monitor does not stretch a line of text across a metre. A
     1600px cap here made the dashboard NARROWER than every other page in the
     ERP: on a 1920 screen it left about 160px of empty margin down each side
     while the registers beside it ran full width. */
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
}

.dashboard-shell.dashboard-v6 *,
.dashboard-shell.dashboard-v6 *::before,
.dashboard-shell.dashboard-v6 *::after {
  box-sizing: border-box;
}

/* Compact date scope: every preset remains visible and keyboard reachable. */
.dashboard-shell .v6-toolbar {
  gap: 8px;
  margin: 0;
}

.dashboard-shell .v6-chips {
  gap: 6px;
}

.dashboard-shell .v6-chip {
  min-height: 36px;
  padding: 7px 12px;
  border-color: var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 12px;
}

.dashboard-shell .v6-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.dashboard-shell .v6-custom-row {
  min-height: 36px;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
}

.dashboard-shell .v6-custom-row label {
  font-size: 12px;
  font-weight: 700;
}

/* Calm white/slate command header: no marketing gradient or decorative grid. */
.dashboard-shell.dashboard-v6 .dash-v5-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(500px, .85fr);
  align-items: stretch;
  gap: 16px;
  min-height: 176px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  background-image: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.dashboard-shell.dashboard-v6 .dash-v5-hero::before {
  display: none;
}

.dashboard-shell .dash-v5-hero-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.dashboard-shell .dash-v5-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
}

.dashboard-shell .dash-v5-hero h1 {
  margin: 4px 0;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: 0;
}

.dashboard-shell .dash-v5-hero p {
  max-width: 760px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

.dashboard-shell .dash-v5-search {
  max-width: 650px;
  margin-top: 12px;
}

.dashboard-shell .dash-v5-search .input,
.dashboard-shell .dash-v5-search .btn,
.dashboard-shell .dash-v5-view-select {
  min-height: 36px;
}

.dashboard-shell .dash-v5-hero-controls {
  grid-template-rows: 36px 1fr;
  gap: 8px;
}

.dashboard-shell .dash-v5-command-numbers {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-shell .dash-v5-command-numbers .dash-v5-stat {
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 7px;
  background: var(--surface-subtle);
  box-shadow: none;
}

.dashboard-shell .dash-v5-command-numbers .dash-v5-stat-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.dashboard-shell .dash-v5-command-numbers .dash-v5-stat-copy span,
.dashboard-shell .dash-v5-command-numbers .dash-v5-stat-copy em {
  font-size: 11px;
}

.dashboard-shell .dash-v5-command-numbers .dash-v5-stat-copy b {
  font-size: 20px;
}

/* Quick commands form one compact operational rail. */
.dashboard-shell .dash-v5-actions {
  display: grid;
  grid-template-columns: repeat(8, minmax(112px, 1fr));
  gap: 6px;
}

.dashboard-shell .dash-v5-action {
  justify-content: center;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: none;
  font-size: 13px;
}

.dashboard-shell .dash-v5-action:hover {
  transform: none;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.dashboard-shell .dash-v5-action.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* KPI hierarchy: exactly the first eight existing indicators form priority. */
.dashboard-shell .dash-v6-kpi-section {
  display: grid;
  gap: 8px;
}

.dashboard-shell .dash-v6-section-head {
  display: flex;
  min-height: 36px;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.dashboard-shell .dash-v6-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
}

.dashboard-shell .dash-v6-section-head p {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.25;
}

.dashboard-shell .dash-v6-section-count {
  color: var(--ink-muted);
  font-size: 12px;
  white-space: nowrap;
}

.dashboard-shell .dash-v5-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-shell .dash-v5-kpis .dash-v5-stat {
  min-height: 82px;
  padding: 10px;
  gap: 9px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 7px;
  background: var(--surface);
  background-image: none;
  box-shadow: none;
}

.dashboard-shell .dash-v5-kpis .dash-v5-stat:hover {
  transform: none;
  border-color: var(--border-strong);
  background: var(--surface-subtle);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}

.dashboard-shell .dash-v5-kpis .dash-v5-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--accent-soft);
}

.dashboard-shell .dash-v5-kpis .dash-v5-stat-copy {
  gap: 2px;
}

.dashboard-shell .dash-v5-kpis .dash-v5-stat-copy span {
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.dashboard-shell .dash-v5-kpis .dash-v5-stat-copy b {
  color: var(--ink);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.dashboard-shell .dash-v5-kpis .dash-v5-stat-copy em {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flat, readable sections and secondary data. */
.dashboard-shell .dash-v5-panel {
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: none;
}

.dashboard-shell .dash-v5-panel-head {
  min-height: 54px;
  padding: 10px 12px;
  border-color: var(--border);
  background: var(--surface-subtle);
}

/* The whole heading is the open/close control, so the target is the width of
   the section rather than a small chevron somebody has to aim at. It is a
   button, but it must not LOOK like one - it is a heading that happens to be
   pressable, and a row of eight bordered buttons down the page would read as
   a toolbar. */
.dash-v5-panel-toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dash-v5-panel-titles {
  min-width: 0;
}

.dash-v5-panel-toggle .nav-icon {
  flex: 0 0 auto;
  color: var(--ink-subtle);
  transition: transform .15s var(--m-ease, ease);
}

/* Chevron points down when closed, up when open - the usual meaning. */
.dash-v5-panel.is-open .dash-v5-panel-toggle .nav-icon {
  transform: rotate(180deg);
}

.dash-v5-panel-toggle:hover .nav-icon {
  color: var(--ink);
}

/* NO FRAME AROUND A FRAME.
   Data Health and Backups both drew a card inside a card with the SAME
   background and a border on each, so the eye is offered two boxes where there
   is one thing. Neither nesting is wrong - a table does belong inside its
   section, and a status tile does belong inside its panel - what is wrong is
   repeating the frame instead of showing the depth.

   A table inside a card: the card is already the frame, so drop the second. */
.card .table-card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* A card inside a card: a sub-panel, so recess it rather than re-outline it. */
.card .card:not(.table-card) {
  background: var(--surface-subtle);
  box-shadow: none;
}

/* THE `hidden` ATTRIBUTE NEEDS HELP HERE, and this is the whole reason the
   first attempt at collapsing did nothing at all.
   `hidden` works through the browser's own `[hidden] { display: none }`, and an
   author rule beats the browser's stylesheet no matter how weak its selector.
   `.dash-v5-panel-body { display: grid }` is such a rule, so every "hidden"
   panel body carried on being a grid and the page never got shorter. Anything
   that sets `display` on an element you also intend to hide has to say so. */
.dash-v5-panel-body[hidden] {
  display: none;
}

/* A closed section is a heading and nothing else, so it should not also carry
   the border and padding meant to frame a body. */
.dash-v5-panel:not(.is-open) .dash-v5-panel-head {
  border-bottom: 0;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dash-v5-panel-toggle .nav-icon { transition: none; }
}

.dashboard-shell .dash-v5-panel-title {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.dashboard-shell .dash-v5-panel-sub {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.3;
}

.dashboard-shell .dash-v5-panel-body {
  gap: 10px;
  padding: 12px;
}

.dashboard-shell .dash-v5-alert {
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--surface);
}

.dashboard-shell .dash-v5-alert strong {
  font-size: 13px;
}

.dashboard-shell .dash-v5-alert-copy span {
  font-size: 12px;
}

.dashboard-shell .v6-charts-grid {
  gap: 12px;
  margin: 0;
}

/* No max-height here.
 *
 * These charts are a fixed-aspect viewBox (660x230 and 660x190) with the
 * default preserveAspectRatio, so capping the HEIGHT does not crop them - it
 * letterboxes them. MEASURED at 1600px: the box stayed 1502px wide but the
 * chart drew itself 861px wide and sat in the middle, leaving 321px of blank
 * panel on each side; the daily chart drew 1042px and left 230px a side. It
 * bites on every desktop wider than about 860px.
 *
 * A fixed-aspect drawing cannot both fill a fluid width and honour a fixed
 * height - one of the two has to give, and width is what the reader is short
 * of. If these need to be shorter, the lever is the viewBox aspect in
 * v6BarTrend / v6DailyChart, not a height cap out here. */

.dashboard-shell .v6-donut-svg {
  width: 138px;
  height: 138px;
}

.dashboard-shell .v6-legend-inline {
  margin-top: 4px;
}

.dashboard-shell .dash-v5-grid {
  gap: 12px;
}

.dashboard-shell .dash-v5-table {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.dashboard-shell .dash-v5-table th {
  font-size: 11px;
}

.dashboard-shell .dash-v5-table th,
.dashboard-shell .dash-v5-table td {
  padding: 8px 9px;
}

.dashboard-shell .dash-v5-bar-row,
.dashboard-shell .dash-v5-ring-card {
  border-radius: 7px;
  background: var(--surface-subtle);
}

.dashboard-shell .dash-v5-master-strip {
  gap: 8px;
}

.dashboard-shell .dash-v5-master-pill {
  min-height: 56px;
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
}

.dashboard-shell .dash-empty,
.dashboard-shell .dash-v5-error {
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--surface-subtle);
}

.dashboard-shell.dashboard-v6[aria-busy="true"] {
  min-height: 560px;
}

/* Dashboard-only focus language for cards, charts and controls. */
.dashboard-shell :where(button, input, select, [role="button"], .dash-v5-row-click):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent) 42%, transparent);
  outline-offset: 2px;
  border-color: var(--accent);
}
/* A clickable mini-table row keeps the pointer it used to get from its role. */
.dashboard-shell .dash-v5-row-click { cursor: pointer; }

/* A chart bar is a real tab stop - the daily chart alone adds one per day, up
   to 40, and the whole page carries 73. `outline: none` plus a 2px drop-shadow
   left a keyboard reader with no perceptible idea of where they were on a 3px
   wide bar. The outline is kept and the glow is added on top of it. */
.dashboard-shell .v6-click:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  filter: drop-shadow(0 0 3px var(--accent));
}

@media (min-width: 1680px) {
  .dashboard-shell .dash-v6-kpi-priority .dash-v5-kpis {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .dashboard-shell .dash-v6-kpi-secondary .dash-v5-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .dashboard-shell.dashboard-v6 .dash-v5-hero {
    grid-template-columns: minmax(0, 1fr) minmax(430px, .95fr);
  }

  .dashboard-shell .dash-v5-actions {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }

  .dashboard-shell .dash-v5-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  body.dashboard-route-active .topbar {
    width: calc(100% - 20px);
    margin-top: 10px;
  }

  .dashboard-shell.dashboard-v6 .dash-v5-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-shell .dash-v5-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-shell .dash-v5-grid,
  .dashboard-shell .dash-v5-three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body.dashboard-route-active #content {
    padding-top: 10px;
  }

  body.dashboard-route-active .topbar {
    align-items: flex-start;
    min-height: 0;
    padding: 10px;
  }

  .dashboard-shell.dashboard-v6 {
    gap: 12px;
  }

  .dashboard-shell .v6-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 1px 6px;
    scroll-snap-type: x proximity;
  }

  .dashboard-shell .v6-chip {
    min-height: 44px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .dashboard-shell .v6-custom-row.open {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dashboard-shell .v6-custom-row .v6-date-input,
  .dashboard-shell .v6-custom-row .btn {
    width: 100%;
    min-height: 44px;
  }

  .dashboard-shell.dashboard-v6 .dash-v5-hero {
    min-height: 0;
    padding: 14px;
  }

  .dashboard-shell .dash-v5-hero h1 {
    font-size: 22px;
  }

  .dashboard-shell .dash-v5-hero p {
    font-size: 13px;
  }

  .dashboard-shell .dash-v5-search {
    display: grid;
    grid-template-columns: 1fr;
  }

  .dashboard-shell .dash-v5-search .input,
  .dashboard-shell .dash-v5-search .btn,
  .dashboard-shell .dash-v5-view-select {
    min-height: 44px;
  }

  .dashboard-shell .dash-v5-command-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-shell .dash-v5-command-numbers .dash-v5-stat {
    min-height: 86px;
  }

  .dashboard-shell .dash-v5-actions {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
    scroll-snap-type: x proximity;
  }

  .dashboard-shell .dash-v5-action {
    width: auto;
    min-width: 132px;
    min-height: 44px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .dashboard-shell .dash-v6-section-head {
    align-items: start;
  }

  .dashboard-shell .dash-v6-section-count {
    display: none;
  }

  .dashboard-shell .dash-v5-kpis {
    grid-template-columns: 1fr;
  }

  .dashboard-shell .dash-v5-kpis .dash-v5-stat {
    min-height: 88px;
  }

  .dashboard-shell .dash-v5-kpis .dash-v5-stat-copy em {
    white-space: normal;
  }

  .dashboard-shell .dash-v5-panel-head {
    align-items: flex-start;
  }

  .dashboard-shell .dash-v5-split,
  .dashboard-shell .dash-v5-finance-grid,
  .dashboard-shell .dash-v5-compliance-grid,
  .dashboard-shell .v6-two-donuts,
  .dashboard-shell .v6-expense-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-shell .dash-v5-master-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-shell *,
  .dashboard-shell *::before,
  .dashboard-shell *::after {
    scroll-behavior: auto;
    transition: none;
  }
}

/* A document's text, read back from a PDF or a workbook and shown as it sits
   on the page - so long lines scroll rather than forcing the modal wide. */
.doc-text {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
}