/* ── Self-hosted webfonts ──────────────────────────────────────────────────── */
/* Inter + JetBrains Mono served locally from /fonts so the strict CSP
   (default-src 'self') is satisfied — no Google Fonts CDN dependency. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-500.woff2') format('woff2'); }

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Accent (indigo) ─────────────────────────────────────────── */
  --accent:        #4f46e5;   /* indigo-600 — primary actions, links, focus */
  --accent-hover:  #4338ca;   /* indigo-700 */
  --accent-soft:   #eef2ff;   /* indigo-50 — selected row, subtle active bg */
  --accent-text:   #3730a3;   /* indigo-800 — info badge text */
  --accent-ring:   rgba(99, 102, 241, 0.2);

  /* ── Surfaces ────────────────────────────────────────────────── */
  --bg:            #fafafa;   /* zinc-50 — warm off-white page bg */
  --surface:       #ffffff;
  --surface-alt:   #f4f4f5;   /* zinc-100 — alt rows, code blocks */

  /* ── Borders ─────────────────────────────────────────────────── */
  --border:        #e4e4e7;   /* zinc-200 — cards, dividers, table cells */
  --border-subtle: #f4f4f5;   /* zinc-100 — between table rows */
  --border-strong: #d4d4d8;   /* zinc-300 — inputs, button outlines */

  /* ── Text ────────────────────────────────────────────────────── */
  --text:          #18181b;   /* zinc-900 — primary text, headings */
  --text-body:     #3f3f46;   /* zinc-700 — body text in dense areas */
  --text-muted:    #71717a;   /* zinc-500 — secondary/captions */
  --text-subtle:   #a1a1aa;   /* zinc-400 — disabled, placeholders */

  /* ── Status colours ──────────────────────────────────────────── */
  --success:       #16a34a;   /* green-600 — success icons */
  --success-bg:    #dcfce7;   /* green-100 — success badge bg */
  --success-text:  #166534;   /* green-800 — success badge text */
  --warn:          #d97706;   /* amber-600 — warning icons */
  --warn-bg:       #fef3c7;   /* amber-100 — warning badge bg */
  --warn-text:     #92400e;   /* amber-800 — warning badge text */
  --danger:        #dc2626;   /* red-600 — destructive icons/buttons */
  --danger-bg:     #fee2e2;   /* red-100 — danger badge bg */
  --danger-text:   #991b1b;   /* red-800 — danger badge text */

  /* ── Sidebar (deep warm near-black) ──────────────────────────── */
  --sidebar-bg:         #18181b;   /* zinc-900 */
  --sidebar-hover:      #27272a;   /* zinc-800 */
  --sidebar-text:       #d4d4d8;   /* zinc-300 */
  --sidebar-text-muted: #71717a;   /* zinc-500 */
  --sidebar-divider:    rgba(255, 255, 255, 0.06);

  /* ── Layout ──────────────────────────────────────────────────── */
  --sidebar-w:   240px;
  --context-h:   56px;

  /* ── Radius ──────────────────────────────────────────────────── */
  --radius-sm:   6px;   /* buttons, inputs, badges-square */
  --radius:      8px;   /* cards, default */
  --radius-lg:   12px;  /* modals */

  /* ── Spacing scale (4px base) ────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-subtle:   0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-card:     0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-elevated: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-modal:    0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

  font-size: 14px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Login page ────────────────────────────────────────────────────────────── */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  background: var(--bg);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: 36px 40px;
  width: 100%; max-width: 400px;
}
.login-logo {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.login-logo svg { margin-bottom: 4px; }
.logo-text   { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.logo-sub    { font-size: 13px; color: var(--text-muted); letter-spacing: 0.02em; }
.login-title {
  font-size: 16px; font-weight: 600;
  color: var(--text);
  text-align: center;
  margin-bottom: 20px;
}

/* ── Form elements ─────────────────────────────────────────────────────────── */
/* Bare input/select/textarea — picks up the same look whether wrapped in
   .field or used standalone (e.g. inside tables, inline forms). */
/* All text-like inputs share visual styling. Checkboxes, radios, file inputs,
   and submit/button inputs are deliberately excluded from these rules. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="color"]),
select,
textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  /* background-color (not the `background` shorthand) so a combobox input
     can layer its chevron via background-image without being reset. */
  background-color: var(--surface);
  color: var(--text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  /* Never overflow the containing layout — a <select> otherwise sizes itself
     to its widest <option>, which can push past flex siblings. */
  max-width: 100%;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="color"]):disabled,
select:disabled,
textarea:disabled {
  background-color: var(--bg);
  color: var(--text-muted);
  cursor: not-allowed;
}
/* Native checkbox/radio in our accent colour */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
input[type="file"] {
  font-size: 13px;
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }

/* Field wrapper — flex-column with tight gap to the label */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.field > label,
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea { width: 100%; }
.field-hint  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.field-error { font-size: 12px; color: var(--danger-text); margin-top: 2px; }
.error-msg   { color: var(--danger); font-size: 13px; margin-bottom: 12px; }

/* Checkbox / radio + text label (one row, cursor:pointer, tight gap) */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}

/* ── Combobox (searchable dropdown) ────────────────────────────────────────── */
.combobox { position: relative; }
.combobox-input {
  width: 100%;
  /* !important: the base input rule's chained :not()s give it a very high
     specificity that would otherwise win the padding shorthand. */
  padding-right: 32px !important;            /* room for the chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.combobox-panel {
  /* position:fixed + JS positioning so the panel escapes modal / table-wrap
     overflow clipping. z-index sits above modals (200). */
  position: fixed;
  z-index: 250;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-elevated);
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.combobox-option {
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combobox-option:hover,
.combobox-option.active {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.combobox-empty {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Journal-item line rows: top-align cells so the Amount / Side / remove
   controls line up with the account combobox — the account cell is taller
   because it stacks the tracking-category dropdown beneath it. */
#m-gji-lines td { vertical-align: top; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 500; line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease,
              color 150ms ease, box-shadow 150ms ease;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Variants */
.btn-primary  { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary {
  background: var(--surface); color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border-strong);
}

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; /* red-700 */ }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover:not(:disabled) { background: #15803d; /* green-700 */ }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 6px 10px;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-alt);
  color: var(--text);
}

/* Sizes */
.btn-sm   { padding: 5px 10px; font-size: 12px; }
.btn-xs   { padding: 3px 8px;  font-size: 11px; }
.btn-icon { padding: 8px; }
.btn-icon.btn-sm { padding: 6px; }
.btn-icon.btn-xs { padding: 4px; }
.btn-full { width: 100%; padding: 10px 14px; }

/* Lucide icons inside buttons */
.btn svg                              { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm svg, .btn-xs svg   { width: 14px; height: 14px; }

/* Icon buttons centre the LABEL, not the icon+label group: an invisible
   spacer the width of the icon is placed on the side opposite the icon.
   Leading-icon buttons get the spacer after; .btn-trailing-icon before. */
.btn:not(.btn-icon):not(.btn-trailing-icon):has(svg)::after,
.btn-trailing-icon:has(svg)::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
}
.btn-sm:not(.btn-icon):not(.btn-trailing-icon):has(svg)::after,
.btn-xs:not(.btn-icon):not(.btn-trailing-icon):has(svg)::after,
.btn-sm.btn-trailing-icon:has(svg)::before,
.btn-xs.btn-trailing-icon:has(svg)::before {
  width: 14px;
}

/* ── App shell ─────────────────────────────────────────────────────────────── */
.app-layout { display: flex; min-height: 100vh; }

/* Legacy .sidebar / .nav-item / .sidebar-* rules removed in Step 13a along
   with their markup. The new .sidebar (defined further down in this
   file) is now the only sidebar. */

/* ── Main content ──────────────────────────────────────────────────────────── */
.main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Context bar — breadcrumb trail + active period, sits above page-header */
.context-bar {
  height: var(--context-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex; align-items: center; gap: 8px;
  position: sticky; top: 0; z-index: 50;
}
.breadcrumb { display: flex; align-items: center; gap: 6px; }
.crumb-link {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 1;
  color: var(--text-muted);
  padding: 4px 6px; border-radius: var(--radius-sm);
  transition: color 150ms ease, background-color 150ms ease;
}
.crumb-link:hover { color: var(--text); background: var(--surface-alt); }
.crumb-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.crumb-sep     { color: var(--text-subtle); font-size: 13px; }
.crumb-muted   { color: var(--text-muted); font-size: 13px; }
.crumb-current { color: var(--text); font-weight: 600; font-size: 13px; }
/* When the root crumb is itself the current page (Dashboard), it keeps the
   "current" weight/colour and stops behaving like a hoverable link. */
.crumb-link.crumb-current { cursor: default; }
.crumb-link.crumb-current:hover { background: none; color: var(--text); }
.context-bar .context-period {
  margin-left: auto;
  background: var(--accent-soft); color: var(--accent);
  padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}

.page-header {
  padding: 24px 28px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.page-header h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.page-header .subtitle { color: var(--text-muted); font-size: 13px; margin-top: 3px; }
.page-header-actions { display: flex; align-items: center; gap: 8px; }

.page-body { padding: 24px 28px 48px; }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 0;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 12px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 500; line-height: 1;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
  border-radius: 4px 4px 0 0;
}
.tab-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-padded { padding: 24px; }
.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card-header h2,
.card-title {
  font-size: 16px; font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.card-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.card-body { padding: 24px; }

/* Danger Zone — destructive-action card (e.g. permanent company delete). */
.card.danger-zone { border-color: #fca5a5; }            /* red-300 */
.card.danger-zone .card-header h2 { color: var(--danger); }

/* ── Grid / layout helpers ─────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.flex    { display: flex; }
.flex-center { display: flex; align-items: center; }

/* The utility classes below share names with Tailwind CDN defaults but
   use different pixel values. !important keeps the project-local values
   authoritative regardless of injection order between the Tailwind <style>
   element and this stylesheet. Later steps will retire these in favour of
   Tailwind utilities or the new spacing tokens. */
.gap-8  { gap: 8px !important; }
.gap-12 { gap: 12px !important; }
.mt-12  { margin-top: 12px !important; }
.mt-20  { margin-top: 20px !important; }
.mb-16  { margin-bottom: 16px !important; }

/* ── Stat tiles ────────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-tile.stat-success { border-left-color: var(--success); }
.stat-tile.stat-warn    { border-left-color: var(--warn);    }
.stat-tile.stat-danger  { border-left-color: var(--danger);  }
.stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-size: 26px; font-weight: 700; margin-top: 4px; color: var(--text); }

/* ── Dashboard company cards ───────────────────────────────────────────────── */
.company-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.company-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.company-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}
.company-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-elevated);
  transform: translateY(-1px);
}
.company-card.is-archived { opacity: 0.65; }
.company-card-header { padding: 18px 20px 14px; display: flex; align-items: flex-start; justify-content: space-between; }
.company-card-header h3 { font-size: 16px; font-weight: 600; letter-spacing: -.005em; color: var(--text); }
.company-card-header .sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.company-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0 12px 12px; gap: 4px; }
.company-metric { text-align: center; padding: 10px 8px; background: var(--bg); border-radius: 6px; }
.company-metric .cm-label { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.company-metric .cm-value { font-size: 17px; font-weight: 600; color: var(--text); margin-top: 2px; }
.company-metric .cm-value.positive { color: var(--success); }
.company-metric .cm-value.negative { color: var(--danger); }
.company-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Skeleton loading ──────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--bg) 50%, var(--surface-alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
  display: inline-block;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--surface-alt); }
}

/* Mobile-sidebar rules removed in Step 13a. The legacy off-canvas drawer
   was tied to the legacy .sidebar markup which no longer exists. Mobile
   responsiveness for the new sidebar is deferred (audit decision). */

/* ── Tables ────────────────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
th {
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
  vertical-align: middle;
}
tbody tr:hover { background: var(--bg); }
tbody tr:last-child td { border-bottom: none; }

/* Numeric column alignment with tabular figures */
.num       { text-align: right; font-variant-numeric: tabular-nums; }
.num-muted { color: var(--text-muted); }

/* Action-button cells inside tables */
.cell-actions { display: flex; flex-wrap: wrap; gap: 4px; }

/* Empty-state row inside a table body */
.empty-row td {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 500; line-height: 1.4;
  border-radius: 9999px;
  white-space: nowrap;
}
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warn-bg);    color: var(--warn-text);    }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text);  }
.badge-info    { background: #e0e7ff;           color: var(--accent-text);  }
.badge-neutral { background: var(--surface-alt); color: var(--text-body);   }
.badge svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ── Progress / SSE ────────────────────────────────────────────────────────── */
.progress-log {
  background: var(--sidebar-bg);
  color: #d4d4d8;                  /* zinc-300 */
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  max-height: 320px;
  overflow-y: auto;
  line-height: 1.6;
}
.progress-log .log-ok   { color: #86efac; }    /* green-300 */
.progress-log .log-err  { color: #fca5a5; }    /* red-300 */
.progress-log .log-info { color: #a5b4fc; }    /* indigo-300 */

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(24, 24, 27, 0.4);      /* zinc-900 / 40% */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn 150ms ease;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);        /* 12px */
  box-shadow: var(--shadow-modal);
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  overflow: hidden;                       /* clip rounded corners */
  animation: scaleIn 150ms ease;
}
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1100px; }

/* Flat modal (legacy structure: <h2> + fields + .modal-footer directly inside
   .modal, no explicit .modal-body wrapper) — apply the padding here and let
   the modal itself scroll when content exceeds its max-height. */
.modal:not(:has(.modal-body)) {
  padding: 24px;
  overflow-y: auto;
}
.modal > h2 {
  font-size: 16px; font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  margin-bottom: 16px;
}

/* Structured modal — header + scrollable body + sticky footer */
.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.modal-title    { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4; }
.modal-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.modal-close {
  background: transparent; border: none; cursor: pointer;
  padding: 6px; border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease;
}
.modal-close:hover { background: var(--surface-alt); color: var(--text); }
.modal-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.modal-close svg { width: 18px; height: 18px; }

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.modal-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  flex-shrink: 0;
  background: var(--bg);
}
/* Inside flat modals, the footer no longer needs its own border/bg because
   the modal itself provides the surrounding chrome — but the top margin
   below preserves separation from the form content above it. */
.modal:not(:has(.modal-body)) > .modal-footer {
  background: transparent;
  border-top: 0;
  padding: 0;
  margin-top: 20px;
}

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal { animation: none; }
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }
.empty-state p { margin-top: 8px; font-size: 13px; }

/* ── Utilities ─────────────────────────────────────────────────────────────── */
/* Type scale — the body default is 14px (set on :root). These are the only
   sanctioned text sizes; use them instead of inline `font-size` so every tab
   stays consistent. 11 label · 12 caption · 13 secondary · 14 body · 16 title. */
.text-muted  { color: var(--text-muted); }
.text-xs     { font-size: 11px; }
.text-sm     { font-size: 12px; }
.text-md     { font-size: 13px; }
.text-base   { font-size: 14px; }
.text-lg     { font-size: 16px; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.font-mono   { font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace; }
/* Identifier columns are monospaced for digit alignment, at one consistent
   compact size across every table — regardless of whether an individual cell
   was written with `.font-mono` alone or `.font-mono .text-sm`. */
td.font-mono, th.font-mono { font-size: 12px; white-space: nowrap; }
.hidden      { display: none !important; }
.loading     { color: var(--text-muted); font-style: italic; }

/* Layout / spacing utilities — these replace the equivalents that the
   Tailwind CDN used to provide (the CDN is gone; CSP stays strict). */
.w-full          { width: 100%; }
.shrink-0        { flex-shrink: 0; }
.ml-auto         { margin-left: auto; }
.align-center    { align-items: center; }
.whitespace-nowrap { white-space: nowrap; }
.uppercase       { text-transform: uppercase; }
.cursor-pointer  { cursor: pointer; }
.font-normal     { font-weight: 400; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.text-indigo-600 { color: var(--accent); }
.text-amber-600  { color: var(--warn); }
.mr-2   { margin-right: 8px; }
.ml-2   { margin-left: 8px; }
.mt-0\.5 { margin-top: 2px; }
.mt-2   { margin-top: 8px; }
.mt-3   { margin-top: 12px; }
.mt-8   { margin-top: 8px; }
.mt-16  { margin-top: 16px; }

/* ───────────────────────────────────────────────────────────────────────── */
/* ── New sidebar (sidebar-nav migration, Step 2) ────────────────────────── */
/*                                                                            */
/* Namespaced under .sidebar so it can co-exist with the existing legacy   */
/* sidebar above during Steps 2–12. Activated only when ?newsidebar=1 is in   */
/* the URL (see inline reveal script in app.html). Temporarily positioned     */
/* fixed on the RIGHT edge of the viewport while the legacy left sidebar      */
/* stays put, so both can be compared without overlap. Step 13 will swap to   */
/* the canonical layout, drop ?newsidebar=1, and remove the legacy sidebar.   */
/*                                                                            */
/* All colours/spacing/radius/shadow values use existing CSS variables so the */
/* new surface stays in lockstep with the rest of the app palette.            */
/* Collapsed-state polish (Step 10) only touches label/chrome visibility here */
/* — pixel-perfect 56px alignment is finalised in Step 10.                    */
/* ───────────────────────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100vh;
  z-index: 100;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  border-right: 1px solid var(--sidebar-divider);
  transition: width 150ms ease;
}
/* When the sidebar is collapsed the main content area shrinks its left
   margin to match (modern browsers support :has). */
body:has(.sidebar.collapsed) .main-content { margin-left: 56px; }

.sidebar.collapsed { width: 56px; }
.sidebar.collapsed .sidebar-link span,
.sidebar.collapsed .sidebar-group-header,
.sidebar.collapsed .context-text,
.sidebar.collapsed .context-chevron,
.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .fetch-button-label,
.sidebar.collapsed .fetch-chevron,
.sidebar.collapsed .sidebar-fetch-status { display: none; }

/* In collapsed mode the nav's content fits the viewport (icons only, no
   labels). Switching to overflow: visible here lets the leftward-extending
   tooltips escape the nav box - with overflow-y: auto the browser also
   treats overflow-x as auto, which silently clipped tooltips for every
   item except the bottom-most group (Admin) where the tooltip happened to
   sit below the clipped scroll region. */
.sidebar.collapsed .sidebar-nav { overflow: visible; }

/* Header */
.sidebar-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--sidebar-divider);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.sidebar-logo {
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 0;
}
.sidebar-logo svg { flex-shrink: 0; }
.sidebar-brand { display: flex; flex-direction: column; min-width: 0; }
.sidebar-app-name {
  font-size: 16px; font-weight: 600; color: #fff;
  letter-spacing: -0.01em; line-height: 1.2;
}
.sidebar-tagline {
  font-size: 12px; color: var(--sidebar-text-muted);
  margin-top: 2px; line-height: 1.2;
}
.sidebar-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--sidebar-text-muted);
  padding: 4px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 150ms ease, background 150ms ease;
}
.sidebar-toggle:hover { color: #fff; background: var(--sidebar-hover); }
.sidebar-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.sidebar-toggle i[data-lucide] { width: 16px; height: 16px; }

/* Context section (company + period switchers) */
.sidebar-context {
  padding: var(--space-3);
  border-bottom: 1px solid var(--sidebar-divider);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.context-button {
  width: 100%;
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-divider);
  color: var(--sidebar-text);
  padding: var(--space-2) 10px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: background 150ms ease;
}
.context-button:hover { background: #3f3f46; }
.context-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.context-button i[data-lucide] {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--sidebar-text-muted);
}
.context-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.context-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--sidebar-text-muted);
}
.context-value {
  font-size: 13px; color: #fff; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.context-chevron { width: 14px; height: 14px; color: var(--sidebar-text-muted); flex-shrink: 0; }

/* Data Fetch section */
.sidebar-fetch-section {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--sidebar-divider);
}
.sidebar-fetch-button {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 13px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease;
}
.sidebar-fetch-button:hover:not(:disabled) { background: var(--accent-hover); }
.sidebar-fetch-button:disabled { background: var(--accent); opacity: 0.7; cursor: wait; }
.sidebar-fetch-button.error { background: var(--danger); }
.sidebar-fetch-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }
.sidebar-fetch-button i[data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-fetch-button .fetch-chevron { margin-left: auto; width: 14px; height: 14px; }
.sidebar-fetch-status {
  font-size: 11px;
  color: var(--sidebar-text-muted);
  margin: var(--space-2) 0 0;
  text-align: center;
}

/* Nav */
.sidebar-nav {
  flex: 1; overflow-y: auto;
  padding: var(--space-2) var(--space-3);
}
.sidebar-group { margin-bottom: var(--space-3); }
.sidebar-group:last-child { margin-bottom: 0; }
.sidebar-group-header {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--sidebar-text-muted);
}

/* Links (nav + footer share this) */
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background 150ms ease, color 150ms ease;
}
.sidebar-link:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-link.active { background: var(--sidebar-hover); color: #fff; }
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.sidebar-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.sidebar-link i[data-lucide] {
  width: 16px; height: 16px; flex-shrink: 0;
  color: #a1a1aa;
}
.sidebar-link.active i[data-lucide],
.sidebar-link:hover i[data-lucide] { color: #fff; }

/* Footer */
.sidebar-footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--sidebar-divider);
}
.sidebar-user-info {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: 11px;
  color: var(--sidebar-text-muted);
  line-height: 1.3;
  word-break: break-word;
}
.sidebar.collapsed .sidebar-user-info { display: none; }

/* Collapsed-state hover tooltips. Sidebar is on the LEFT edge as of Step 13a,
   so tooltips open to the RIGHT (out of the collapsed icon column into the
   main content area). The context buttons (Company / Period) and Data Fetch
   button get position: relative only in collapsed state so the absolutely-
   positioned tooltip anchors to the button rather than to the sidebar itself. */
.sidebar.collapsed .context-button,
.sidebar.collapsed .sidebar-fetch-button { position: relative; }

.sidebar.collapsed .sidebar-link::after,
.sidebar.collapsed .context-button::after,
.sidebar.collapsed .sidebar-fetch-button::after {
  content: attr(data-label);
  position: absolute;
  left: 100%; top: 50%;
  transform: translateY(-50%);
  background: var(--sidebar-hover);
  color: #fff;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 10;
  margin-left: var(--space-2);
}
.sidebar.collapsed .sidebar-link:hover::after,
.sidebar.collapsed .context-button:hover::after,
.sidebar.collapsed .sidebar-fetch-button:hover::after { opacity: 1; }

/* Dropdowns + menus (company switcher, period switcher, fetch menu).
   JS in Steps 4/5/9 appends these to <body> and positions them via inline
   top/right. position: fixed keeps them anchored to the viewport when the
   main-content area scrolls. */
.context-dropdown,
.fetch-menu {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  min-width: 260px;
  max-height: 400px;
  overflow: hidden;
  display: flex; flex-direction: column;
  z-index: 200;
}
.company-list, .period-list { flex: 1; overflow-y: auto; padding: 4px; }
.company-item, .period-item {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: none; border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text);
  font-family: inherit; text-align: left;
}
.company-item:hover, .period-item:hover { background: var(--surface-alt); }
.company-item.active, .period-item.active { color: var(--accent); font-weight: 500; }
.company-item i[data-lucide],
.period-item i[data-lucide] { width: 14px; height: 14px; color: var(--accent); }
.company-dropdown-footer {
  border-top: 1px solid var(--border);
  padding: 4px;
}
.company-dropdown-footer button {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: none; border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-muted);
  font-family: inherit; text-align: left;
}
.company-dropdown-footer button:hover { background: var(--surface-alt); color: var(--text); }
.company-dropdown-footer button i[data-lucide] { width: 14px; height: 14px; }

.fetch-menu { padding: 4px; }
.fetch-menu-item {
  width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: none; border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: inherit; text-align: left;
}
.fetch-menu-item:hover { background: var(--surface-alt); }
.fetch-menu-item i[data-lucide] {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--text-muted);
  margin-top: 2px;
}
.fetch-menu-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fetch-menu-label { font-size: 13px; font-weight: 500; color: var(--text); }
.fetch-menu-detail { font-size: 12px; color: var(--text-muted); }
.fetch-menu-separator { height: 1px; background: var(--border); margin: 4px 8px; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* ── Module header pattern (Step 14) ────────────────────────────────────── */
/*                                                                            */
/* Standard wrapper for module-level content (Consolidation, Substantiation, */
/* etc.). Available for module adoption - existing modules still use their   */
/* card-based card-header pattern; future per-module restructure can opt in  */
/* by wrapping content in .module-header + .module-body. Off-global-hint     */
/* styles already defined above (Step 6).                                     */
/*                                                                            */
/* Structure when adopted:                                                    */
/*   <div class="module-header">                                              */
/*     <div class="module-header-top">                                        */
/*       <h1 class="module-title">Module Name</h1>                            */
/*       <div class="module-period-picker">                                   */
/*         <select id="..."></select>                                         */
/*         <span class="off-global-hint">Viewing non-current period</span>    */
/*       </div>                                                               */
/*     </div>                                                                 */
/*     <div class="module-tabs">  <!-- only if module has sub-tabs -->        */
/*       <button class="module-tab active">...</button>                       */
/*     </div>                                                                 */
/*   </div>                                                                   */
/*   <div class="module-body">...module content cards...</div>                */
/* ─────────────────────────────────────────────────────────────────────────── */

.module-header {
  /* Step 14 (lightweight): sits inside page-body padding rather than as an
     edge-to-edge header bar. Just a separator below the title/picker row,
     optionally followed by tabs (.module-tabs uses margin-bottom: -1px to
     overlap this border for the merged-underline active-tab look). */
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.module-header-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);  /* internal spacing before border-bottom */
}

.module-title {
  font-size: 22px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
}

.module-period-picker {
  display: flex; align-items: center; gap: var(--space-2);
}

.module-tabs {
  display: flex; gap: var(--space-1);
  margin-bottom: -1px;  /* overlap the module-header border-bottom */
}

.module-tab {
  background: none; border: none;
  padding: var(--space-2) var(--space-4);
  color: var(--text-muted);
  font-size: 13px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.module-tab:hover         { color: var(--text); }
.module-tab.active        { color: var(--accent); border-bottom-color: var(--accent); }
.module-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

.module-body {
  padding: var(--space-6);
}

/* Off-global period indicator (Step 6). Injected next to each in-module
   period picker when its value differs from the sidebar's global period. */
.off-global-hint {
  font-size: 12px;
  color: var(--warn);
  margin-left: var(--space-2);
  font-style: italic;
}

/* TB-dependency banner (Step 7). Prepended to each period-aware module's
   tab content when the selected period has no fetched trial balances. */
.tb-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--warn-bg);
  border: 1px solid #fbd38d;
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) var(--space-5);
}
.tb-banner i[data-lucide] {
  width: 20px; height: 20px;
  color: var(--warn);
  flex-shrink: 0;
}
.tb-banner-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tb-banner-text strong { font-size: 13px; color: var(--text); font-weight: 600; }
.tb-banner-text span { font-size: 12px; color: var(--text-muted); }
.mb-4   { margin-bottom: 4px; }
.mb-8   { margin-bottom: 8px; }
.mb-12  { margin-bottom: 12px; }

.amt-positive { color: var(--success); }
.amt-negative { color: var(--danger); }
.amt-warning  { color: var(--warn); }

/* ── Toast notifications ───────────────────────────────────────────────────── */
#toastContainer, .toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 12px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevated);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 500; line-height: 1.4;
  display: flex; align-items: center; gap: 10px;
  min-width: 280px; max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  animation: slideIn 200ms ease;
  pointer-events: auto;
}
.toast-success {
  border-color: #86efac;             /* green-300 */
  background:   #f0fdf4;             /* green-50 */
  color:        var(--success-text);
}
.toast-success svg { color: var(--success); }

.toast-error {
  border-color: #fca5a5;             /* red-300 */
  background:   #fef2f2;             /* red-50 */
  color:        var(--danger-text);
}
.toast-error svg { color: var(--danger); }

.toast-warning {
  border-color: #fcd34d;             /* amber-300 */
  background:   #fffbeb;             /* amber-50 */
  color:        var(--warn-text);
}
.toast-warning svg { color: var(--warn); }

.toast-info svg { color: var(--accent); }

.toast svg { width: 18px; height: 18px; flex-shrink: 0; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* ── Accessibility: respect prefers-reduced-motion globally ────────────────── */
/* Catch-all for any transitions/animations not already disabled by the
   scoped rules above. 0.01ms (instead of 0) keeps Web Animations API
   reliable and avoids layout glitches that hard "none" can introduce. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}