/* RandLedger - spreadsheet-inspired UI
   Navy primary, dense grid layouts, keyboard-driven */

:root {
  /* RandLedger brand palette.
     Variable names kept generic (--navy*) so the rest of the CSS doesn't have to change.
     The values are RandLedger emerald + warm gold. */
  --navy: #0a5c42;        /* primary brand — deep emerald */
  --navy-dark: #063d2b;   /* hover / sidebar background */
  --navy-light: #1a7a5e;  /* gradients, focus rings */
  --accent: #d4a017;      /* gold — Krugerrand reference, ledger underline */
  --bg: #f4f4f0;
  --bg-panel: #ffffff;
  --bg-alt: #fafaf7;
  --border: #d0d0cc;
  --border-dark: #b5b5af;
  --text: #1a1a1a;
  --text-muted: #666;
  --text-dim: #999;
  --success: #1e7e34;
  --danger: #c83232;
  --warning: #d68910;
  --row-hover: #f0f4f8;
  --row-active: #e3edf7;
  --grid-header: #e8e6de;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; font-size: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ===== LOGIN ===== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-light));
}
.login-card {
  background: white;
  border-radius: 10px;
  padding: 40px;
  width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-logo {
  text-align: center;
  margin-bottom: 24px;
}
.login-logo .mark {
  position: relative;
  display: inline-block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -1px;
  line-height: 1;
  padding-bottom: 10px;
}
.login-logo .mark .mark-bar {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--accent);
  border-radius: 1px;
}
.login-logo .name {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 3px;
  font-weight: 600;
}
.login-card h2 {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--navy);
  text-align: center;
  font-weight: 600;
}
.login-field {
  margin-bottom: 12px;
}
.login-field label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.login-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.login-field input:focus { outline: 2px solid var(--navy-light); border-color: var(--navy); }
.login-btn {
  width: 100%;
  padding: 11px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  margin-top: 4px;
}
.login-btn:hover { background: var(--navy-dark); }
.login-err {
  background: #fee;
  color: var(--danger);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 12px;
  display: none;
}

/* ===== COMPANY PICKER ===== */
.picker-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-light));
  padding: 40px 20px;
}
.picker-card {
  background: white;
  border-radius: 10px;
  padding: 40px;
  width: 520px;
  max-width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.picker-card h2 { margin: 0 0 4px; color: var(--navy); font-size: 18px; }
.picker-card .sub { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }
.company-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 16px;
}
.company-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.company-item:hover { border-color: var(--navy); background: var(--row-hover); }
/* The text block must claim the free space, or the Delete button overlaps the
   business name. min-width:0 lets a long name ellipsize instead of pushing out. */
.company-item > div:first-child { flex: 1; min-width: 0; }
.company-item .name { font-weight: 600; color: var(--navy); }
.company-item .meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.company-item .arrow { color: var(--text-dim); font-size: 18px; }

/* ===== APP SHELL ===== */
.app { display: flex; height: 100vh; }

.sidebar {
  width: 210px;
  background: var(--navy-dark);
  color: #d0dae8;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--border-dark);
}
.sidebar-brand {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-brand .mark {
  position: relative;
  display: inline-block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 700;
  color: white;
  letter-spacing: -1px;
  line-height: 1;
  padding-bottom: 6px;
  width: 28px;
  text-align: center;
}
.sidebar-brand .mark .mark-bar {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 22px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.sidebar-brand .sub {
  font-size: 12px;
  color: white;
  letter-spacing: 2.5px;
  font-weight: 700;
}
.company-switcher {
  padding: 10px 14px;
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}
.company-switcher:hover { background: rgba(0,0,0,0.3); }
.company-switcher .label { font-size: 10px; color: #8ea3bd; text-transform: uppercase; letter-spacing: 0.8px; }
.company-switcher .name { font-size: 12px; color: white; font-weight: 600; margin-top: 2px; }
.company-switcher .chev { color: #8ea3bd; font-size: 12px; margin-left: auto; }

.nav { flex: 1; overflow-y: auto; padding: 6px 0; }
.nav-group { margin-top: 10px; }
.nav-group-label { padding: 4px 16px; font-size: 9px; color: #637a94; text-transform: uppercase; letter-spacing: 1px; }
.nav-item {
  padding: 7px 16px;
  color: #d0dae8;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 3px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,0.05); color: white; }
.nav-item.active {
  background: var(--navy);
  color: white;
  border-left-color: var(--accent);
}
.nav-item .icon { width: 14px; font-size: 12px; opacity: 0.7; }

.sidebar-footer {
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-footer .user { color: #d0dae8; }
.sidebar-footer .logout { color: #8ea3bd; cursor: pointer; text-decoration: underline; }
.sidebar-footer .logout:hover { color: white; }

/* ===== MAIN ===== */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }

.topbar {
  height: 44px;
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  flex-shrink: 0;
}
.topbar .page-title { font-size: 14px; font-weight: 600; color: var(--navy); }
.topbar .period-badge {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.topbar .spacer { flex: 1; }
.topbar select {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: white;
}

.content { flex: 1; overflow: auto; padding: 14px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text);
}
.btn:hover { background: var(--bg-alt); }
.btn.primary { background: var(--navy); color: white; border-color: var(--navy); }
.btn.primary:hover { background: var(--navy-dark); }
.btn.success { background: var(--success); color: white; border-color: var(--success); }
.btn.danger { background: var(--danger); color: white; border-color: var(--danger); }
.btn.sm { padding: 3px 8px; font-size: 11px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== PAGES & TABS ===== */
.page { display: none; }
.page.active { display: block; }

.page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.page-header h1 { font-size: 16px; color: var(--navy); margin: 0; font-weight: 600; }
.page-header .spacer { flex: 1; }

.tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 12px;
}
.tab {
  padding: 7px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
}
.tab.active { background: var(--navy); color: white; border-color: var(--navy); }
.tab:hover:not(.active) { background: white; color: var(--text); }

/* ===== DATA GRIDS (the legacy system style) ===== */
.grid-wrap {
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: auto;
  max-height: calc(100vh - 200px);
}
table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
table.grid thead th {
  background: var(--grid-header);
  color: var(--navy-dark);
  font-weight: 600;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 2px solid var(--border-dark);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
table.grid tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #f0f0f0;
  vertical-align: middle;
}
table.grid tbody tr:hover { background: var(--row-hover); }
table.grid tbody tr.selected { background: var(--row-active); }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid .ctr { text-align: center; }
table.grid .category-row td {
  background: var(--bg-alt);
  font-weight: 600;
  color: var(--navy);
  padding: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
table.grid .total-row td {
  background: var(--grid-header);
  font-weight: 700;
  border-top: 2px solid var(--navy);
  border-bottom: 2px double var(--navy);
}
table.grid tfoot td {
  padding: 6px 8px;
  background: var(--bg-alt);
  font-weight: 600;
  border-top: 2px solid var(--border-dark);
}

/* Editable grid cells */
table.grid tbody td.editable {
  padding: 0;
}
table.grid tbody td.editable input,
table.grid tbody td.editable select {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
}
table.grid tbody td.editable input:focus,
table.grid tbody td.editable select:focus {
  outline: 2px solid var(--navy);
  background: white;
}
table.grid tbody tr.posted td.editable input,
table.grid tbody tr.posted td.editable select { background: #f5f5f5; color: var(--text-muted); }

/* ===== CARDS (dashboard) ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
}
.card-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.card-value { font-size: 22px; font-weight: 700; color: var(--navy); margin-top: 4px; }
.card-value.red { color: var(--danger); }
.card-value.green { color: var(--success); }
.card-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ===== MODAL ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: white;
  border-radius: 6px;
  width: 500px;
  max-width: 95vw;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal.wide { width: 800px; }
.modal-header {
  padding: 12px 16px;
  background: var(--navy);
  color: white;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.modal-header .close {
  margin-left: auto;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.8;
}
.modal-header .close:hover { opacity: 1; }
.modal-body { padding: 16px; }
.modal-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.form-row { margin-bottom: 10px; }
.form-row label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
}
.form-row input:focus, .form-row select:focus { outline: 2px solid var(--navy-light); border-color: var(--navy); }
.form-row .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--navy);
  color: white;
  padding: 10px 16px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-size: 13px;
  z-index: 2000;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.danger { background: var(--danger); }
.toast.success { background: var(--success); }

/* ===== STATUS BADGES ===== */
.badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.badge.posted { background: #d4edda; color: #155724; }
.badge.draft { background: #fff3cd; color: #856404; }
.badge.locked { background: #f8d7da; color: #721c24; }

/* ===== KEYBOARD HINTS ===== */
.key-hint {
  font-family: Consolas, Monaco, monospace;
  font-size: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ===== UTIL ===== */
.hidden { display: none !important; }
.muted { color: var(--text-muted); }
.mono { font-family: Consolas, Monaco, monospace; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ===== PAGE PADDING ===== */
.page-pad { padding: 20px 24px; }

/* ===== DASHBOARD ===== */
.dash-welcome { margin-bottom: 18px; }
.dash-welcome h2 { margin: 0 0 4px; color: var(--navy); font-size: 22px; font-weight: 600; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.dash-grid.two-col { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.dash-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  border-left: 4px solid var(--navy);
}
.dash-card.income   { border-left-color: var(--success); }
.dash-card.expense  { border-left-color: var(--warning); }
.dash-card.profit   { border-left-color: var(--navy); }
.dash-card.vat      { border-left-color: var(--accent); }

.dash-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.dash-value { font-size: 24px; font-weight: 600; color: var(--navy); margin: 6px 0 4px; font-family: Consolas, Monaco, monospace; }
.dash-value.danger { color: var(--danger); }
.dash-sub { font-size: 11px; }

/* ===== PANELS ===== */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.panel-head h3 { margin: 0; color: var(--navy); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.panel-body { padding: 14px 16px; }
.panel-body .kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.panel-body .kv:last-child { border-bottom: none; }
.panel-body .kv b { font-family: Consolas, Monaco, monospace; color: var(--navy); font-weight: 600; }
.panel-body .kv b.danger { color: var(--danger); }

.btn-small {
  background: transparent;
  border: 1px solid var(--border-dark);
  color: var(--navy);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.btn-small:hover { background: var(--navy); color: white; border-color: var(--navy); }

/* ===== DATA TABLE ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table.compact { font-size: 12px; }
.data-table th {
  background: var(--grid-header);
  color: var(--navy);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border-dark);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.data-table tr:hover { background: var(--row-hover); }
.data-table td.num, .data-table th.num { text-align: right; font-family: Consolas, Monaco, monospace; }

/* ===== QUICK ACTIONS ===== */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.12s;
}
.qa-btn:hover { background: var(--navy); color: white; border-color: var(--navy); transform: translateY(-1px); }
.qa-icon { font-size: 22px; line-height: 1; }

/* ===== STUB PAGES ===== */
.stub-hero {
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-light));
  color: white;
  border-radius: 8px;
  margin-bottom: 18px;
}
.stub-hero h2 { margin: 6px 0 8px; font-size: 22px; font-weight: 600; }
.stub-hero p { margin: 0; color: rgba(255,255,255,0.85); font-size: 13px; max-width: 720px; }
.stub-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--navy-dark);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.stub-list { margin: 0; padding-left: 20px; }
.stub-list li { padding: 4px 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.stub-note { margin-top: 14px; font-size: 12px; font-style: italic; }

/* ===== BADGES (status) ===== */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.badge-draft    { background: #eee8c9; color: #7a5900; }
.badge-posted   { background: #d4edda; color: var(--success); }
.badge-locked   { background: #d6d6d6; color: #444; }
.badge-paid     { background: #d4edda; color: var(--success); }
.badge-unpaid   { background: #f8d7da; color: var(--danger); }
.badge-partial  { background: #fff3cd; color: #7a5900; }
.badge-overdue  { background: #f8d7da; color: var(--danger); }

/* Alt form: .badge.posted / .badge.draft etc. — used by journals.js */
.badge.draft    { background: #eee8c9; color: #7a5900; }
.badge.posted   { background: #d4edda; color: var(--success); }
.badge.locked   { background: #d6d6d6; color: #444; }
.badge.paid     { background: #d4edda; color: var(--success); }
.badge.unpaid   { background: #f8d7da; color: var(--danger); }
.badge.partial  { background: #fff3cd; color: #7a5900; }
.badge.overdue  { background: #f8d7da; color: var(--danger); }

.danger { color: var(--danger); }

/* ===== PAGE ACTIONS (right-aligned button row in page-header) ===== */
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ===== CASHBOOK — list view (cards) ===== */
.cashbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.cashbook-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
}
.cashbook-card:hover {
  border-color: var(--navy);
  box-shadow: 0 2px 6px rgba(10,92,66,0.10);
  transform: translateY(-1px);
}
.cb-icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
  flex-shrink: 0;
}
.cb-icon.bank  { background: rgba(10,92,66,0.10);  color: var(--navy); }
.cb-icon.petty { background: rgba(212,160,23,0.18); color: #8a6d10; }
.cb-body { flex: 1; min-width: 0; }
.cb-name { font-weight: 600; color: var(--navy); font-size: 14px; }
.cb-sub  { font-family: Consolas, Monaco, monospace; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cb-type { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); margin-top: 4px; font-weight: 600; }
.cb-arrow { font-size: 22px; color: var(--text-dim); flex-shrink: 0; }
.cashbook-card:hover .cb-arrow { color: var(--navy); }

/* ===== CASHBOOK — editor (the big keyboard-driven grid) ===== */
.cb-editor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 90px);   /* fill viewport below topbar */
  background: var(--bg);
}
.cb-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.cb-edit-head h2 { color: var(--navy); margin: 0; font-size: 16px; font-weight: 600; }
.cb-edit-head a { color: var(--navy); text-decoration: none; }
.cb-edit-head a:hover { text-decoration: underline; }
#cbSaveStatus { transition: color 0.2s; }

/* The grid wrapper scrolls when many lines are captured */
.cb-grid-wrap {
  flex: 1;
  overflow: auto;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.cb-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: Consolas, Monaco, "Segoe UI", sans-serif;
}
.cb-grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--grid-header);
  color: var(--navy);
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  padding: 7px 8px;
  border-bottom: 2px solid var(--border-dark);
  border-right: 1px solid var(--border);
}
.cb-grid thead th.num { text-align: right; }
.cb-grid thead th.active { box-shadow: inset 0 -3px 0 var(--accent); }
.cb-grid thead th.inactive { color: var(--text-dim); font-weight: 500; }
.cb-grid tbody td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0;                      /* inputs span the full cell */
  background: var(--bg-panel);
}
.cb-grid tbody td.rowno {
  padding: 0 8px;
  text-align: right;
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  -webkit-user-select: none;
  user-select: none;
}
.cb-grid tbody tr:hover td { background: var(--row-hover); }
.cb-grid tbody tr:hover td.rowno { background: var(--bg-alt); }
.cb-grid tbody tr.err td { background: #fef0f0; }

/* All inputs sit flush inside cells — no padding around the input itself */
.cb-grid input,
.cb-grid select {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 6px 7px;
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
  height: 28px;
}
.cb-grid input:focus,
.cb-grid select:focus {
  background: #fff8d8;             /* warm focus highlight, like Excel */
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cb-grid input.num,
.cb-grid input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.cb-grid input:disabled.calc {
  color: var(--text-muted);
  font-style: italic;
  background: var(--bg-alt);
}
.cb-grid input:disabled {
  color: var(--text-muted);
  background: var(--bg-alt);
}
.cb-grid select.type-PMT { color: var(--danger); font-weight: 700; }
.cb-grid select.type-RCT { color: var(--success); font-weight: 700; }
.row-del {
  width: 22px; height: 22px;
  border: none; background: transparent;
  color: var(--text-dim);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  border-radius: 3px;
}
.row-del:hover { background: var(--danger); color: white; }

/* ===== CASHBOOK — bottom status bar ===== */
.cb-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.cb-stat-group { display: flex; gap: 22px; flex-wrap: wrap; }
.cb-stat { display: flex; flex-direction: column; gap: 2px; }
.cb-stat .lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); font-weight: 600;
}
.cb-stat .val {
  font-family: Consolas, Monaco, monospace;
  font-size: 14px; font-weight: 600;
  color: var(--navy);
}
.cb-stat .val.ok   { color: var(--success); }
.cb-stat .val.warn { color: var(--danger); }
.cb-validation { font-size: 12px; }
.cb-validation .good { color: var(--success); font-weight: 600; }
.cb-validation .bad  { color: var(--danger);  font-weight: 600; }
.cb-validation .muted { color: var(--text-muted); }

/* ===== CASHBOOK — keyboard hint chips row ===== */
.cb-keyhints {
  padding: 8px 18px 10px;
  background: var(--bg-panel);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.cb-keyhints .key-hint { margin-right: 4px; }

/* ===== INVOICE / CREDIT NOTE EDITOR (Stage 3) ===== */

/* Soft-dim rows for inactive customers/items in list views */
.data-table tbody tr.inactive-row td { opacity: 0.55; font-style: italic; }

/* Header meta strip (customer + dates + reference) */
.inv-meta {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr));
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.inv-meta-block { display: flex; flex-direction: column; gap: 4px; }
.inv-meta-block label {
  font-size: 10px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.inv-meta-block input,
.inv-meta-block select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  height: 30px;
  background: var(--bg-panel);
}
.inv-meta-block input:focus,
.inv-meta-block select:focus {
  outline: 2px solid var(--navy-light);
  border-color: var(--navy);
}
.inv-meta-block input:disabled,
.inv-meta-block select:disabled {
  background: var(--bg-alt);
  color: var(--text-muted);
}

/* Line-item grid wrapper (scrolls when many lines) */
.inv-grid-wrap {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  max-height: 50vh;
  overflow: auto;
}
.inv-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: Consolas, Monaco, "Segoe UI", sans-serif;
}
.inv-grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--grid-header);
  color: var(--navy);
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  padding: 7px 8px;
  border-bottom: 2px solid var(--border-dark);
  border-right: 1px solid var(--border);
}
.inv-grid thead th.num { text-align: right; }
.inv-grid tbody td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0;
  background: var(--bg-panel);
}
.inv-grid tbody td.rowno {
  padding: 0 8px;
  text-align: right;
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  -webkit-user-select: none;
  user-select: none;
}
.inv-grid tbody tr:hover td { background: var(--row-hover); }
.inv-grid tbody tr:hover td.rowno { background: var(--bg-alt); }
.inv-grid input,
.inv-grid select {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 6px 7px;
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
  height: 28px;
}
.inv-grid input:focus,
.inv-grid select:focus {
  background: #fff8d8;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.inv-grid input.num,
.inv-grid input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.inv-grid td.calc-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 6px 8px;
  color: var(--navy);
  font-weight: 500;
  font-style: italic;
  background: var(--bg-alt);
}
.inv-grid input:disabled { color: var(--text-muted); background: var(--bg-alt); }

/* Footer row: notes on the left, totals on the right */
.inv-footer-row {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: 18px;
  padding: 14px 18px;
  background: var(--bg-panel);
}
.inv-notes label {
  display: block;
  font-size: 10px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.inv-notes textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  resize: vertical;
  background: var(--bg-panel);
}
.inv-notes textarea:focus {
  outline: 2px solid var(--navy-light);
  border-color: var(--navy);
}
.inv-notes textarea:disabled {
  background: var(--bg-alt);
  color: var(--text-muted);
}
.inv-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inv-totals .t-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  padding: 4px 12px;
}
.inv-totals .t-row span { color: var(--text-muted); }
.inv-totals .t-row b {
  font-family: Consolas, Monaco, monospace;
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.inv-totals .t-row.total {
  border-top: 1px solid var(--border-dark);
  padding-top: 8px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
}
.inv-totals .t-row.total span { color: var(--navy); font-weight: 600; }
.inv-totals .t-row.total b { font-size: 16px; }

/* ===== PAYMENT ALLOCATION (Stage 4) ===== */
.alloc-block {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.alloc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.alloc-head h4 {
  margin: 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.data-table.compact { font-size: 12px; }
.data-table.compact th,
.data-table.compact td { padding: 5px 8px; }
.text-right { text-align: right; }

/* ===== STAGE 5 — VAT 201 ===== */

.vat-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 14px;
}
.vat-sum-head { display: flex; flex-direction: column; gap: 2px; }
.vat-sum-net {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--bg-alt);
  border-left: 4px solid var(--navy);
}
.vat-sum-net.payable { border-left-color: var(--danger); }
.vat-sum-net.refund  { border-left-color: var(--success); }
.vat-sum-net .lbl {
  font-size: 10px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.vat-sum-net .val {
  font-size: 22px; font-weight: 600;
  font-family: Consolas, Monaco, monospace;
  margin-top: 4px;
}
.vat-sum-net.payable .val { color: var(--danger); }
.vat-sum-net.refund  .val { color: var(--success); }

.vat-box-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}
.vat-box-table th {
  background: var(--grid-header);
  color: var(--navy);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border-dark);
}
.vat-box-table th.num { text-align: right; }
.vat-box-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.vat-box-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: Consolas, Monaco, monospace; }
.vat-box-table td.box-num {
  width: 60px;
  text-align: center;
  font-family: Consolas, Monaco, monospace;
  color: var(--navy);
  font-weight: 600;
  background: var(--bg-alt);
}
.vat-box-table tr.expanded td { background: var(--row-active); }
.vat-box-table tfoot td {
  padding: 8px 12px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: none;
}
.vat-box-table tfoot tr.grand td {
  border-top: 2px solid var(--border-dark);
  font-size: 14px;
}
.vat-box-table tfoot tr.grand td.num { color: var(--navy); }

.vat-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  gap: 16px;
  flex-wrap: wrap;
}
.vat-drill { margin-top: 14px; }
.vat-drill .data-table td { font-size: 12px; padding: 6px 8px; }

/* ===== STAGE 5 — Bank Reconciliation ===== */

.rec-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.rec-stat {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rec-stat.action-stat { justify-content: center; align-items: flex-end; }
.rec-stat .lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rec-stat .val {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.rec-stat .val.ok   { color: var(--success); }
.rec-stat .val.warn { color: var(--danger); }

.rec-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  height: calc(100vh - 280px);
  min-height: 400px;
}
.rec-col {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rec-col-head {
  padding: 10px 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rec-col-head h3 {
  margin: 0;
  font-size: 12px;
  color: var(--navy);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rec-col-body {
  flex: 1;
  overflow-y: auto;
}
.rec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  gap: 12px;
  transition: background 0.1s;
}
.rec-row:hover {
  background: var(--row-hover);
}
.rec-row.selected {
  background: #fff8d8;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.rec-row.matched {
  opacity: 0.55;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 6px, rgba(10,92,66,0.04) 6px, rgba(10,92,66,0.04) 12px
  );
}
.rec-row-left { flex: 1; min-width: 0; }
.rec-row-date {
  font-size: 11px;
  color: var(--text-muted);
  font-family: Consolas, Monaco, monospace;
}
.rec-row-desc {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 2px 0;
}
.rec-row-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.rec-row-amt {
  font-family: Consolas, Monaco, monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rec-row-amt.pos { color: var(--success); }
.rec-row-amt.neg { color: var(--danger); }
.rec-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ===== STAGE 6 — Tabs (used inside modals like the employee editor) ===== */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.tab {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.12s;
}
.tab:hover { color: var(--navy); }
/* The active tab keeps the dark-green background set by the earlier `.tab.active` rule
   (line ~357) — this rule must NOT set `color: var(--navy)` or the label becomes
   green-on-green and is completely unreadable. Keep the text white. */
.tab.active {
  color: #fff;
  border-bottom-color: var(--accent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===== STAGE 6 — Segmented buttons (budget view toggle) ===== */
.seg-btns {
  display: inline-flex;
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  overflow: hidden;
}
.seg {
  background: var(--bg-panel);
  color: var(--navy);
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.seg:last-child { border-right: none; }
.seg.on { background: var(--navy); color: white; }

/* ===== STAGE 6 — Pay run editor ===== */
.pr-grid-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: auto;
  max-height: 55vh;
  margin-top: 10px;
}
.pr-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: Consolas, Monaco, "Segoe UI", sans-serif;
}
.pr-grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--grid-header);
  color: var(--navy);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid var(--border-dark);
  border-right: 1px solid var(--border);
}
.pr-grid thead th.num { text-align: right; }
.pr-grid tbody td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.pr-grid tbody td.mono,
.pr-grid tbody td:not(:has(input)):not(.calc-cell) {
  padding: 8px 10px;
}
.pr-grid tbody td.num.calc-cell {
  padding: 8px 10px;
  text-align: right;
  background: var(--bg-alt);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pr-grid tbody tr:hover td { background: var(--row-hover); }
.pr-grid tbody tr:hover td.calc-cell { background: var(--bg-alt); }
.pr-grid input {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  padding: 7px 10px;
  outline: none;
  box-sizing: border-box;
  height: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pr-grid input:focus {
  background: #fff8d8;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.pr-grid input:disabled {
  color: var(--text-muted);
  background: var(--bg-alt);
}
.pr-grid tfoot td {
  padding: 10px;
  background: var(--bg-alt);
  border-top: 2px solid var(--border-dark);
  font-variant-numeric: tabular-nums;
}
.pr-grid tfoot tr.sub td { background: var(--bg-panel); border-top: 1px solid var(--border); padding: 6px 10px; }

.pr-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.pr-sum-block {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
}
.pr-sum-block.highlight {
  border-left: 4px solid var(--accent);
  background: var(--bg-alt);
}
.pr-sum-block .lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pr-sum-block .val {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  font-family: Consolas, Monaco, monospace;
  margin-top: 4px;
}

/* ===== STAGE 6 — Budget matrix ===== */
.budget-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: auto;
  max-height: 65vh;
}
.budget-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.budget-grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--grid-header);
  color: var(--navy);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  padding: 8px;
  text-align: center;
  border-bottom: 2px solid var(--border-dark);
  border-right: 1px solid var(--border);
}
.budget-grid thead th.num { text-align: right; }
.budget-grid thead th:first-child,
.budget-grid thead th:nth-child(2) { text-align: left; }
.budget-grid tbody td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 11px;
  font-family: Consolas, Monaco, monospace;
}
.budget-grid tbody td.num { text-align: right; }
.budget-grid tr.cat-row td {
  background: var(--bg-alt);
  color: var(--navy);
  font-size: 11px;
  padding: 6px 8px;
  border-right: none;
}
.budget-grid tr.budget-row td { border-bottom: none; }
.budget-grid tr.actual-row td { border-bottom: 2px solid var(--border); }
.budget-grid input.budget-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 11px;
  padding: 3px 5px;
  text-align: right;
  outline: none;
  border-radius: 2px;
}
.budget-grid input.budget-input:hover { border-color: var(--border); }
.budget-grid input.budget-input:focus {
  background: #fff8d8;
  border-color: var(--accent);
}
.budget-grid td.calc-cell {
  padding: 4px 8px;
  background: var(--bg-alt);
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.budget-grid td.variance-bad  { color: var(--danger); }
.budget-grid td.variance-good { color: var(--success); }

/* ===== STAGE 7 — Income Statement ===== */
.is-summary { margin-bottom: 14px; }
.is-sum-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: 6px;
  padding: 16px 20px;
  display: inline-block;
  min-width: 260px;
}
.is-sum-card.profit { border-left-color: var(--success); }
.is-sum-card.loss   { border-left-color: var(--danger);  }
.is-sum-card .lbl {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.is-sum-card .val {
  font-size: 26px;
  font-weight: 600;
  font-family: Consolas, Monaco, monospace;
  color: var(--navy);
  margin: 4px 0;
}
.is-sum-card.profit .val { color: var(--success); }
.is-sum-card.loss   .val { color: var(--danger);  }
.is-sum-card .sub { font-size: 11px; }

.is-wrap, .bs-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: auto;
  max-height: 68vh;
}
.is-table, .bs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.is-table thead th, .bs-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--grid-header);
  color: var(--navy);
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border-dark);
}
.is-table thead th.num, .bs-table thead th.num { text-align: right; }
.is-table tbody td, .bs-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.is-table tbody td.num, .bs-table tbody td.num {
  text-align: right;
  font-family: Consolas, Monaco, monospace;
}
.is-table .section-head td, .bs-table .section-head td {
  background: var(--navy);
  color: white;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 12px;
  border-bottom: none;
}
.is-table .cat-row td, .bs-table .cat-row td {
  background: var(--bg-alt);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.is-table .acc-row td, .bs-table .acc-row td {
  font-size: 12px;
  padding: 5px 12px;
}
.is-table .indent, .bs-table .indent {
  padding-left: 24px !important;
  color: var(--text-muted);
}
.is-table .section-total td, .bs-table .section-total td {
  background: var(--bg-alt);
  padding: 8px 12px;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  font-size: 13px;
}
.is-table .gross-profit td {
  background: #eef8f1;
  padding: 10px 12px;
  border-top: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  color: var(--success);
  font-size: 13px;
}
.is-table tfoot .net-profit td {
  padding: 12px;
  border-top: 3px double var(--navy);
  font-size: 15px;
  background: var(--bg-alt);
}
.is-table tfoot .net-profit.profit td { color: var(--success); }
.is-table tfoot .net-profit.loss td   { color: var(--danger);  }

.is-table .variance-good, .budget-grid td.variance-good { color: var(--success); font-weight: 600; }
.is-table .variance-bad,  .budget-grid td.variance-bad  { color: var(--danger);  font-weight: 600; }

/* ===== STAGE 7 — Balance Sheet ===== */
.bs-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.bs-sum-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: 6px;
  padding: 14px 18px;
}
.bs-sum-card.balanced   { border-left-color: var(--success); }
.bs-sum-card.unbalanced { border-left-color: var(--danger);  }
.bs-sum-card .lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.bs-sum-card.balanced   .lbl { color: var(--success); }
.bs-sum-card.unbalanced .lbl { color: var(--danger);  }
.bs-sum-card .val {
  font-size: 22px;
  font-weight: 600;
  font-family: Consolas, Monaco, monospace;
  color: var(--navy);
  margin: 4px 0 2px;
}
.bs-sum-card.balanced   .val { color: var(--success); }
.bs-sum-card.unbalanced .val { color: var(--danger);  }
.bs-sum-card .sub { font-size: 11px; }

.bs-table .grand-total td {
  padding: 12px;
  background: var(--navy);
  color: white;
  font-size: 14px;
  border-top: 2px solid var(--navy-dark);
  border-bottom: 2px solid var(--navy-dark);
}
.bs-table .grand-total.assets td { background: var(--navy); }
.bs-table .grand-total.equity-liab td {
  background: var(--navy);
  border-top: 3px double var(--navy-dark);
}

/* ===== STAGE 7 — Print preparation =====
   Hide navigation and action buttons when the user prints a financial report */
@media print {
  .sidebar, .topbar, .page-actions, .btn, .tabs, .seg-btns { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; }
  .page-pad { padding: 0 !important; }
  .is-wrap, .bs-wrap { max-height: none !important; overflow: visible !important; border: none !important; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; page-break-after: auto; }
  thead { display: table-header-group; }
}

/* ===== SETTINGS — Default Template editor ===== */
.tpl-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.tpl-toolbar input[type="text"] {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
}
.tpl-toolbar input[type="text"]:focus {
  outline: 2px solid var(--navy-light);
  border-color: var(--navy);
}
.tpl-scroll {
  max-height: 55vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.tpl-scroll .data-table thead th {
  position: sticky; top: 0; z-index: 2;
}
.tpl-scroll .data-table input,
.tpl-scroll .data-table select {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 11px;
  padding: 4px 6px;
  outline: none;
  border-radius: 2px;
  box-sizing: border-box;
}
.tpl-scroll .data-table input:hover,
.tpl-scroll .data-table select:hover { border-color: var(--border); }
.tpl-scroll .data-table input:focus,
.tpl-scroll .data-table select:focus {
  background: #fff8d8;
  border-color: var(--accent);
}
.tpl-scroll .data-table input.mono {
  font-family: Consolas, Monaco, monospace;
}
.tpl-scroll .data-table td {
  padding: 2px 4px;
}
.text-center { text-align: center; }

/* ===== UX — typeable account picker inputs ===== */
.acc-picker {
  width: 100%;
  padding: 6px 7px;
  border: none;
  background: transparent;
  font: inherit;
  outline: none;
  box-sizing: border-box;
}
.cb-grid input.acc-picker:focus,
.inv-grid input.acc-picker:focus,
table input.acc-picker:focus {
  background: #fff8d8;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.picker-err {
  box-shadow: inset 0 0 0 2px var(--danger) !important;
  background: #fef0f0 !important;
}

/* ===== UX — company card with actions ===== */
.company-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;   /* keep the actions hard right, away from the name */
  flex-shrink: 0;
}
.btn-small.danger {
  color: var(--danger);
  border-color: var(--danger);
}
.btn-small.danger:hover {
  background: var(--danger);
  color: white;
}
.float-right { float: right; }

.date-pick-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  padding: 0;
  line-height: 1;
}
.date-pick-btn:hover { color: var(--navy); }

/* ===== DATE PICKER CALENDAR ===== */
#date-picker-cal {
  display: none;
  position: absolute;
  z-index: 10000;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  padding: 8px;
  min-width: 210px;
  -webkit-user-select: none;
  user-select: none;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13px;
}
.cal-nav {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.3;
  padding: 1px 7px;
}
.cal-nav:hover { background: var(--bg-alt); }
.cal-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.cal-grid th { text-align: center; padding: 2px 3px; color: var(--text-muted); font-weight: 500; font-size: 11px; }
.cal-day { text-align: center; padding: 4px 3px; cursor: pointer; border-radius: 3px; }
.cal-day:hover { background: var(--bg-alt); }
.cal-today { font-weight: 700; color: var(--navy); }
.cal-sel { background: var(--navy) !important; color: white !important; border-radius: 3px; }
.cal-foot { margin-top: 6px; text-align: center; }
.cal-today-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  padding: 2px 10px;
  font-size: 11px;
  color: var(--text-muted);
}
.cal-today-btn:hover { background: var(--bg-alt); color: var(--navy); }