/* ============================================
   BACKOFFICE - OPERATIONS CONTROL
   Dark, professional, editorial-trading aesthetic
   ============================================ */

:root {
  /* Fonts — theme-agnostic */
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;

  /* DARK theme is the default (unchanged values from launch) */
  --bg: #0a0b0e;
  --bg-1: #11131a;
  --bg-2: #161924;
  --bg-3: #1d2130;
  --bg-panel: #11131a;
  --bg-soft: #161924;
  --line: #232838;
  --line-soft: #1a1e2a;
  --border: #232838;
  --text: #e8eaf0;
  --text-mute: #8a92a8;
  --text-dim: #565e75;
  --ink: #e8eaf0;
  --ink-mute: #8a92a8;
  --ink-faint: #565e75;
  --accent: #d4ff3a;        /* electric lime — dark theme signature */
  --accent-dim: #8aa825;
  --accent-soft: rgba(212, 255, 58, 0.10);
  --accent-on: #0a0b0e;     /* readable on the accent */
  --primary: #d4ff3a;
  --primary-text: #0a0b0e;
  --success: #2dd4a0;
  --success-bg: rgba(45, 212, 160, 0.14);
  --danger: #ff5a6a;
  --danger-bg: rgba(255, 90, 106, 0.14);
  --warn: #ffa64d;
  --warn-bg: rgba(255, 166, 77, 0.14);
  --info: #5dc7ff;
  --info-bg: rgba(93, 199, 255, 0.14);
  --grid-line: #1c2030;
  --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.22);
  --shadow-pop:  0 2px 8px rgba(0,0,0,.42), 0 18px 44px rgba(0,0,0,.36);
  --shadow-glow: 0 0 0 1px rgba(212,255,58,.12), 0 0 22px rgba(212,255,58,.10);
  --color-scheme: dark;
}

/* DARK theme — explicit body class (same values, future-proof for overrides) */
body.theme-dark {
  --bg: #0a0b0e;
  --bg-1: #11131a;
  --bg-2: #161924;
  --bg-3: #1d2130;
  --bg-panel: #11131a;
  --bg-soft: #161924;
  --line: #232838;
  --line-soft: #1a1e2a;
  --border: #232838;
  --text: #e8eaf0;
  --text-mute: #8a92a8;
  --text-dim: #565e75;
  --ink: #e8eaf0;
  --ink-mute: #8a92a8;
  --ink-faint: #565e75;
  --accent: #d4ff3a;
  --accent-dim: #8aa825;
  --accent-soft: rgba(212, 255, 58, 0.10);
  --accent-on: #0a0b0e;
  --primary: #d4ff3a;
  --primary-text: #0a0b0e;
  --success: #2dd4a0;
  --success-bg: rgba(45, 212, 160, 0.14);
  --danger: #ff5a6a;
  --danger-bg: rgba(255, 90, 106, 0.14);
  --warn: #ffa64d;
  --warn-bg: rgba(255, 166, 77, 0.14);
  --info: #5dc7ff;
  --info-bg: rgba(93, 199, 255, 0.14);
  --grid-line: #1c2030;
  --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.22);
  --shadow-pop:  0 2px 8px rgba(0,0,0,.42), 0 18px 44px rgba(0,0,0,.36);
  --shadow-glow: 0 0 0 1px rgba(212,255,58,.12), 0 0 22px rgba(212,255,58,.10);
  --color-scheme: dark;
}

/* LIGHT theme — Stripe-inspired (electric indigo on near-white canvas) */
body.theme-light {
  --bg: #f6f9fc;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #eef2f7;
  --bg-panel: #ffffff;
  --bg-soft: #f6f9fc;
  --line: #e3e8ee;
  --line-soft: #eef2f7;
  --border: #e3e8ee;
  --text: #0d253d;
  --text-mute: #64748d;
  --text-dim: #8694ac;
  --ink: #0d253d;
  --ink-mute: #64748d;
  --ink-faint: #8694ac;
  --accent: #533afd;        /* Stripe indigo */
  --accent-dim: #4434d4;
  --accent-soft: rgba(83, 58, 253, 0.10);
  --accent-on: #ffffff;
  --primary: #1c1e54;       /* brand-dark navy — solid buttons */
  --primary-text: #ffffff;
  --success: #0a9657;
  --success-bg: #e6f9f0;
  --danger: #cf1d2e;
  --danger-bg: #fff0f1;
  --warn: #ad6800;
  --warn-bg: #fef6df;
  --info: #2563eb;
  --info-bg: #dbeafe;
  --grid-line: #eef2f7;
  --shadow-card: 0 1px 2px rgba(28,30,84,.04), 0 4px 14px rgba(28,30,84,.06);
  --shadow-pop:  0 2px 6px rgba(28,30,84,.08), 0 14px 36px rgba(28,30,84,.12);
  --shadow-glow: 0 0 0 1px rgba(83,58,253,.10), 0 0 22px rgba(83,58,253,.10);
  --color-scheme: light;
}

html { color-scheme: var(--color-scheme); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  max-width: 100vw;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  /* Mobile: kill double-tap zoom + iOS text-size auto-bumping */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body.theme-dark, body:not(.theme-light):not(.theme-linear):not(.theme-notion):not(.theme-airtable):not(.theme-airtable-dark) {
  background-image:
    radial-gradient(circle at 10% 0%, rgba(212,255,58,0.04), transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(93,199,255,0.03), transparent 40%);
}

/* LIGHT theme atmospheric gradient — Stripe top-third mesh */
body.theme-light {
  background-image:
    radial-gradient(ellipse 60% 60% at 15% 8%, rgba(83,58,253,.10), transparent 65%),
    radial-gradient(ellipse 50% 60% at 88% 14%, rgba(249,107,238,.07), transparent 65%),
    radial-gradient(ellipse 55% 65% at 60% 0%, rgba(234,34,97,.05), transparent 65%);
}

/* Scrollbars + selection — theme-aware */
::selection { background: var(--accent); color: var(--accent-on, #000); text-shadow: none; }
::-moz-selection { background: var(--accent); color: var(--accent-on, #000); text-shadow: none; }
html, body { -webkit-user-select: text; user-select: text; }
.view-container, .view-container *, .panel, .panel *, .tbl, .tbl *,
.bank-card, .bank-card .bank-card-name, .bank-card .bank-card-balance,
.bb-strip, .bb-strip * { -webkit-user-select: text; user-select: text; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 99px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

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

button { cursor: pointer; background: none; border: none; }

.hidden { display: none !important; }

/* ============================================
   LOGIN
============================================ */
.login-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 100;
}

.login-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(212,255,58,0.08), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(93,199,255,0.06), transparent 50%);
  pointer-events: none;
}

.login-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 40px 40px;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 56px 48px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.02);
}

.login-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.login-brand { margin-bottom: 40px; text-align: center; }
.login-logo {
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 16px;
  text-shadow: 0 0 20px rgba(212,255,58,0.4);
}
.login-brand h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 4px;
}
.login-brand p {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 6px;
}

.login-form { display: flex; flex-direction: column; gap: 20px; }

.login-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-form label span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
}

.login-form input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 14px 16px;
  border-radius: 2px;
  font-family: var(--mono);
  transition: border-color 0.15s;
}

.login-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212,255,58,0.1);
}

.login-form button[type="submit"] {
  padding: 14px;
  background: var(--accent);
  color: #0a0b0e;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 12px;
  border-radius: 2px;
  margin-top: 8px;
  transition: all 0.15s;
}

.login-form button[type="submit"]:hover {
  background: #e6ff5a;
  box-shadow: 0 0 30px rgba(212,255,58,0.3);
}

.login-err {
  color: var(--danger);
  font-size: 12px;
  text-align: center;
  min-height: 16px;
}

.login-hint {
  text-align: center;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

/* ============================================
   LAYOUT
============================================ */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100vh;
  max-width: 100vw;
  overflow: hidden;
}

.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  height: 100vh;          /* anchor so children can scroll within */
  overflow: hidden;       /* container clips; .nav handles the scroll */
}

.brand {
  padding: 0 24px 24px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  font-size: 24px;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(212,255,58,0.5);
}

.brand-title {
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 14px;
}

.brand-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 2px;
  margin-top: 2px;
}

.nav {
  flex: 1;
  min-height: 0;          /* required so flex:1 + overflow-y:auto actually scrolls
                             inside a flex column — without this the nav expands
                             past the sidebar and items below the viewport vanish */
  display: flex;
  flex-direction: column;
  padding: 24px 12px;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 3px;
  color: var(--text-mute);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: all 0.12s;
  font-family: var(--sans);
}

.nav-item i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 14px;
  width: 18px;
  text-align: center;
  color: var(--text-dim);
}

.nav-item:hover {
  background: var(--bg-2);
  color: var(--text);
}

.nav-item.active {
  background: var(--bg-3);
  color: var(--text);
  position: relative;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.nav-item.active i {
  color: var(--accent);
}

.sidebar-footer {
  padding: 16px 16px 0;
  border-top: 1px solid var(--line-soft);
  margin: 0 8px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--info));
  flex-shrink: 0;
}

.user-name { font-weight: 600; font-size: 13px; }
.user-role {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.logout-btn {
  width: 100%;
  padding: 8px;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 2px;
  color: var(--text-mute);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.15s;
}

.logout-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ============================================
   MAIN AREA
============================================ */
.main {
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  min-width: 0;
  max-width: 100%;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}

.topbar-crumb {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-dim);
}

.topbar h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-top: 0;
  line-height: 1.2;
}

/* Right side of the topbar — chips laid out in a single compact row instead
   of stacking. Pre-fix this was undeclared, so children stacked vertically
   and pushed the topbar to ~150px tall. */
.topbar-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.server-time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 1px;
}

.server-time::before {
  content: '●';
  color: var(--success);
  margin-right: 8px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.view-container {
  /* Generous bottom buffer so paginators / dropdowns near the bottom of long
     pages aren't clipped by the viewport's last row of pixels (especially when
     a sticky modal / dropdown opens). */
  padding: 32px 32px 64px;
  min-width: 0;
  max-width: 100%;
}

/* ============================================
   DASHBOARD CARDS
============================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.kpi {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.kpi-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.kpi-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
  font-family: var(--mono);
}

.kpi-sub {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 8px;
  font-family: var(--mono);
}

.kpi-accent .kpi-value { color: var(--accent); }
.kpi-success .kpi-value { color: var(--success); }
.kpi-danger .kpi-value { color: var(--danger); }
.kpi-warn .kpi-value { color: var(--warn); }
.kpi-info .kpi-value { color: var(--info); }

.kpi::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at top right, currentColor, transparent 70%);
  opacity: 0.03;
}

/* ============================================
   PANELS
============================================ */
.panel-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.panel-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ============================================
   TABLES
============================================ */
.table-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Safety net — every element that directly hosts a `.tbl` gets horizontal
   scroll if the table overflows. Covers 20+ pages where the render code
   drops a bare <table class="tbl"> without a named `.table-wrap` /
   `.report-table-wrap` / `.bs-table-wrap` around it. Those named wrappers
   already set overflow themselves; this rule is idempotent for them and
   the fallback for everyone else. `:has()` is baseline in every browser
   from 2023 onwards, matches every prod user's current version. */
*:has(> table.tbl) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-toolbar {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.toolbar-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tbl thead th {
  background: var(--bg-2);
  padding: 16px 24px;
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  color: var(--text-dim);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl thead th:first-child,
.tbl tbody td:first-child,
.tbl tfoot td:first-child { padding-left: 28px; }
.tbl thead th:last-child,
.tbl tbody td:last-child,
.tbl tfoot td:last-child { padding-right: 28px; }

.tbl tbody td {
  padding: 14px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  white-space: nowrap;
}

.tbl tbody tr:nth-child(even) td { background: rgba(255,255,255,0.014); }
.tbl tbody tr:hover td { background: rgba(212, 255, 58, 0.035); }
.tbl tbody tr:last-child td { border-bottom: 0; }

.tbl tfoot td {
  padding: 14px 24px;
}

.tbl .num { font-family: var(--mono); text-align: right; }
.tbl .pos { color: var(--success); font-weight: 600; }
.tbl .neg { color: var(--danger);  font-weight: 600; }
.tbl .num.muted { color: var(--text-mute); font-weight: 400; }

/* Compact variant — keep dense tables (Settings sub-pages with many cols) tight */
.tbl.tbl-compact thead th { padding: 10px 14px; font-size: 9px; letter-spacing: 1.2px; }
.tbl.tbl-compact thead th:first-child,
.tbl.tbl-compact tbody td:first-child,
.tbl.tbl-compact tfoot td:first-child { padding-left: 14px; }
.tbl.tbl-compact thead th:last-child,
.tbl.tbl-compact tbody td:last-child,
.tbl.tbl-compact tfoot td:last-child { padding-right: 14px; }
.tbl.tbl-compact tbody td { padding: 10px 14px; font-size: 11.5px; }
.tbl.tbl-compact tfoot td { padding: 10px 14px; }

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.badge.success { background: rgba(45,212,160,0.15); color: var(--success); }
.badge.danger  { background: rgba(255,90,106,0.15); color: var(--danger); }
.badge.warn    { background: rgba(255,166,77,0.15); color: var(--warn); }
.badge.info    { background: rgba(93,199,255,0.15); color: var(--info); }
.badge.mute    { background: var(--bg-3); color: var(--text-mute); }

/* ============================================
   BUTTONS / INPUTS
============================================ */
.btn {
  padding: 9px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:hover { border-color: var(--text-dim); }

.btn-primary {
  background: var(--accent);
  color: #0a0b0e;
  border-color: var(--accent);
  font-weight: 700;
}

.btn-primary:hover {
  background: #e6ff5a;
  box-shadow: 0 0 20px rgba(212,255,58,0.2);
}

.btn-danger:hover { border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: 5px 10px; font-size: 11px; }

.input, .select {
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--mono);
  min-width: 120px;
}

.input:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Game Providers inline grid — every D/W cell is a number input. */
.prov-grid td { padding: 6px 10px !important; vertical-align: middle; }
.prov-grid .prov-cell {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--mono);
  text-align: right;
  color: var(--text);
  transition: background-color 80ms, border-color 80ms;
}
.prov-grid .prov-cell:hover {
  background: var(--bg-2);
  border-color: var(--line);
}
.prov-grid .prov-cell:focus {
  outline: none;
  background: var(--bg-1);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Unclaim "Quick Entry" — Excel-style inline row for fast CS data entry.
   Inputs sit flush in cells with minimal chrome until focused, so CS can Tab
   through the row like a spreadsheet column. */
.unclaim-grid {
  table-layout: fixed;
}
.unclaim-grid td {
  padding: 4px 6px !important;
  vertical-align: middle;
}
.unclaim-grid .cell-input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text);
  transition: background-color 80ms, border-color 80ms;
}
.unclaim-grid .cell-input:hover {
  background: var(--bg-2);
  border-color: var(--line);
}
.unclaim-grid .cell-input:focus {
  outline: none;
  background: var(--bg-1);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.unclaim-grid .cell-input.num { text-align: right; font-weight: 600; }
.unclaim-grid select.cell-input { padding: 6px 4px; }
.unclaim-entry-row { background: rgba(212, 255, 58, 0.03); }
.unclaim-entry-row td { border-top: 2px solid var(--accent) !important; }

/* Bank Balance strip — compact at-a-glance balance check shown at the top of
   Transactions / Deposits / Withdrawals. Per-company pills with click-to-
   expand bank breakdown. Tenant + company-scoped on the backend, so staff
   only see balances of companies they have access to. */
.bb-strip {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  position: sticky;
  top: 52px;
  z-index: 8;
  /* Dropped the ambient shadow — on light themes it rendered as a fuzzy
     halo bleeding into surrounding rows. Border alone is enough to delimit. */
}
.bb-strip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bb-strip-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-mute);
}
.bb-strip-grand {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  flex: 1;
}
.bb-strip-grand.pos { color: var(--success); }
.bb-strip-grand.neg { color: var(--danger); }
.bb-refresh {
  background: none;
  border: 1px solid var(--line);
  color: var(--text-mute);
  width: 26px;
  height: 26px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}
.bb-refresh:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.bb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.bb-pill:hover {
  border-color: var(--accent);
  background: var(--bg-3, var(--bg-2));
}
.bb-pill.open {
  border-color: var(--accent);
  background: rgba(212, 255, 58, 0.06);
}
.bb-pill .bb-code {
  font-weight: 700;
  letter-spacing: 0.5px;
}
.bb-pill.pos .bb-total { color: var(--success); }
.bb-pill.neg .bb-total { color: var(--danger); }
.bb-pill .bb-caret {
  font-size: 9px;
  color: var(--text-mute);
}
.bb-details {
  margin-top: 10px;
  padding: 8px 0 8px 10px;
  background: transparent;         /* was --bg-2 · nested light-on-light looked odd */
  border-radius: 0;
  border-left: 2px solid var(--accent);
}
.bb-details-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 6px;
}
.bb-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 14px;
}
.bb-bank {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
}
.bb-bank-name { color: var(--text-mute); }
.bb-bank-amt.pos { color: var(--success); font-weight: 600; }
.bb-bank-amt.neg { color: var(--danger); font-weight: 600; }

/* Sync coverage panel on the Transactions page — one card per company so CS
   can see at a glance which companies are pulling fresh from upstream. */
.sync-coverage {
  padding: 12px 16px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1, var(--bg));
}
.sync-coverage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.sync-coverage-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-mute);
}
.sync-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.sync-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-mute);
  border-radius: 4px;
  padding: 10px 12px;
  background: var(--bg-2);
  position: relative;
}
.sync-card.sync-fresh    { border-left-color: #34d399; }   /* green */
.sync-card.sync-warn     { border-left-color: #fbbf24; }   /* yellow */
.sync-card.sync-stale    { border-left-color: #ef4444; }   /* red */
.sync-card.sync-disabled { border-left-color: #6b7280; opacity: 0.6; }
.sync-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.sync-card-co {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.sync-pending-pill {
  background: var(--danger, #ef4444);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
  font-weight: 700;
}
.sync-card-age {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.sync-card.sync-fresh .sync-card-age { color: #34d399; }
.sync-card.sync-warn  .sync-card-age { color: #fbbf24; }
.sync-card.sync-stale .sync-card-age { color: #ef4444; font-weight: 700; }
.sync-card-counts {
  display: flex;
  gap: 8px;
  font-size: 11px;
  align-items: baseline;
}
.sync-card-counts strong {
  font-family: var(--mono);
  font-size: 13px;
}
.sync-resync-btn {
  margin-top: 8px;
  width: 100%;
  font-size: 10px;
  padding: 4px 6px;
}

/* PG Login — per-company quick-login cards. Grid auto-fits so 1 column on
   mobile and up to 3 on wide desktops without manual breakpoints. */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
}
.pg-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, transform 0.1s;
}
.pg-card:hover {
  border-color: var(--accent);
}
.pg-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.pg-card-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.pg-card-company {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
  font-family: var(--mono);
}
.pg-card-actions {
  display: flex;
  gap: 4px;
}
.pg-card-meta {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text);
}
.pg-card-meta code {
  font-family: var(--mono);
  font-size: 11px;
}

/* Per-row layout for URL / User / Pass — label on the left, value in middle,
   copy button on the right. Lets CS grab any single value with one tap. */
.pg-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pg-field .muted {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-mute);
  flex-shrink: 0;
  min-width: 38px;
}
.pg-copy {
  flex-shrink: 0;
  font-size: 13px;
  padding: 3px 8px;
  line-height: 1;
  border-color: var(--line);
}
.pg-copy:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pg-card-notes {
  font-size: 11px;
  color: var(--text-mute);
  font-style: italic;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
}
.pg-login-btn {
  width: 100%;
  font-size: 13px;
  padding: 10px;
  margin-top: auto;
}

/* Sidebar / mobile-tab unread badge — appears on Transactions nav when there
   are deposits/withdrawals still waiting for CS confirmation. */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  color: #0a0a0a;
  background: var(--accent, #c6f24a);
  border-radius: 999px;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
  animation: nav-badge-pulse 1.6s ease-in-out infinite;
}
.nav-badge[hidden] { display: none; }

/* Withdrawals badge uses a warning orange/amber so it visually separates from
   the Transactions accent — staff can tell at a glance which queue is full. */
.nav-badge-warn {
  background: #fbbf24;
  color: #0a0a0a;
  animation: nav-badge-pulse-warn 1.6s ease-in-out infinite;
}
@keyframes nav-badge-pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.0); }
}

/* Mobile bottom-tab variant: anchored to top-right of the tab icon so it
   doesn't blow up the tab layout. */
.nav-badge-mobile {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
  margin-left: 0;
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  padding: 0 4px;
}

@keyframes nav-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 242, 74, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(198, 242, 74, 0.0); }
}

/* Multi-tag input widget — used for fields where one bank/record can hold
   several upstream identifiers (e.g. banks.upstream_name with comma-joined
   values like "ABA,ACLEDA,ThbAutoPay321"). Chips render existing values;
   typing then Enter / comma adds a new chip. */
.mtag-root {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: text;
  min-height: 36px;
}
.mtag-root:focus-within { border-color: var(--accent); }
.mtag-chips { display: contents; }
.mtag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(212, 255, 58, 0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 4px 3px 8px;
  border-radius: 12px;
  line-height: 1.2;
}
.mtag-x {
  background: none; border: 0; color: var(--accent);
  font-size: 16px; line-height: 1; cursor: pointer;
  padding: 0 4px; border-radius: 50%; opacity: 0.7;
}
.mtag-x:hover { opacity: 1; background: rgba(212, 255, 58, 0.2); }
.mtag-input {
  flex: 1; min-width: 100px; background: none; border: 0;
  outline: none; padding: 4px 2px;
  font-family: var(--mono); font-size: 12px; color: var(--text);
}

/* Inline select used inside table cells (Deposits bank reassign). Looks like
   normal text until hovered so the table doesn't get visually noisy. */
.select-inline {
  min-width: 110px;
  padding: 4px 6px;
  font-size: 11px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.select-inline:hover,
.select-inline:focus {
  background: var(--bg-2);
  border-color: var(--line);
}

label.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label.field > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ============================================
   MODAL
============================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-head h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.modal-close {
  font-size: 24px;
  color: var(--text-mute);
  width: 30px;
  height: 30px;
  border-radius: 3px;
}

.modal-close:hover { background: var(--bg-3); color: var(--text); }

.modal-body {
  padding: 24px;
  overflow-y: auto;
  /* Let the body grow inside the flex-column modal-card so the sticky footer
     anchors against the modal's bottom edge regardless of content height. */
  flex: 1;
  min-height: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid .full { grid-column: 1 / -1; }

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  /* Pin to the bottom of the scrolling modal-body so the user never has to
     scroll to reach Save/Cancel — works on tall forms (Users with 17
     permission checkboxes, etc.). Negative side margins cancel modal-body's
     24px padding so the sticky bar spans the full width with a clean border. */
  position: sticky;
  bottom: 0;
  margin: 24px -24px 0;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg-1);
  border-top: 1px solid var(--line-soft);
  z-index: 1;
}

/* ============================================
   TOAST
============================================ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 14px 20px;
  border-radius: 3px;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  animation: slideIn 0.2s ease-out;
}

.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--success); }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   STATUS / EMPTY
============================================ */
.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
}

.section-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.section-title:first-child { margin-top: 0; }

/* Status dot */
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
}
.status-dot.active { background: var(--success); box-shadow: 0 0 8px var(--success); }
.status-dot.inactive { background: var(--text-dim); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--line); }

/* Bank grid */
.bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ─── Perf: Bank page section-level lazy render + collapse ─── */
.bank-co-section {
  /* Even off-screen sections skip layout/paint until scrolled near */
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
  margin-bottom: 20px;
}
.bank-co-section.is-collapsed .bank-co-body {
  display: none;
}
.bank-co-section .bank-co-header {
  cursor: pointer;
  user-select: none;
}
.bank-co-caret {
  display: inline-block;
  width: 16px;
  color: var(--text-dim, #94a3b8);
  font-size: 10px;
  margin-right: 4px;
  transition: transform 0.15s ease;
}
.bank-co-section.is-open  .bank-co-caret { transform: rotate(0deg); }
.bank-co-section.is-collapsed .bank-co-caret { transform: rotate(-90deg); }

.bank-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 16px;
  position: relative;
}

.bank-card-name {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}

.bank-card-company {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.bank-card-balance {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.bank-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 12px;
}

/* ============================================
   Banks page — Grand Total + per-company headers
============================================ */
.bank-grand-card {
  background: linear-gradient(180deg, rgba(212,255,58,0.10) 0%, rgba(212,255,58,0.02) 100%);
  border: 1px solid rgba(212,255,58,0.35);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 4px 0 20px;
  flex-wrap: wrap;
}
.bank-grand-left { display: flex; flex-direction: column; gap: 4px; }
.bank-grand-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}
.bank-grand-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.5px;
}
.bank-grand-right { text-align: right; }
.bank-grand-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bank-grand-amount {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
  text-shadow: 0 0 14px rgba(212, 255, 58, 0.15);
}
.bank-grand-amount.pos { color: var(--accent); }
.bank-grand-amount.neg { color: var(--danger); }

.bank-co-header {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 18px 0 10px;
  flex-wrap: wrap;
  border-left: 3px solid var(--accent);
}
.bank-co-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bank-co-code {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}
.bank-co-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.4px;
}
.bank-co-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-left: 6px;
}
.bank-co-right { text-align: right; }
.bank-co-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.bank-co-amount {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1;
}
.bank-co-amount.pos { color: var(--success); }
.bank-co-amount.neg { color: var(--danger); }

@media (max-width: 600px) {
  .bank-grand-card { padding: 16px 18px; }
  .bank-grand-amount { font-size: 22px; }
  .bank-co-header { padding: 14px 16px; }
  .bank-co-amount { font-size: 18px; }
  .bank-co-right, .bank-grand-right { text-align: left; }
}

/* + / - quick-transfer buttons on each bank card */
.bank-trf-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--line);
  background: var(--bg-2);
  cursor: pointer;
  transition: transform 0.08s, border-color 0.15s, color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bank-trf-btn:hover { transform: translateY(-1px); }
.bank-trf-btn:active { transform: scale(0.94); }
.bank-trf-in {
  color: var(--success);
  border-color: rgba(45, 212, 160, 0.35);
}
.bank-trf-in:hover {
  background: rgba(45, 212, 160, 0.12);
  border-color: var(--success);
  box-shadow: 0 0 12px rgba(45, 212, 160, 0.35);
}
.bank-trf-out {
  color: var(--danger);
  border-color: rgba(255, 90, 106, 0.35);
}
.bank-trf-out:hover {
  background: rgba(255, 90, 106, 0.12);
  border-color: var(--danger);
  box-shadow: 0 0 12px rgba(255, 90, 106, 0.35);
}

/* ============================================
   IMPERSONATION BANNER
   Shown when admin is "Login As"-ed into a staff/viewer account.
   Bright red, fixed top, impossible to miss.
============================================ */
#impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(90deg, #ff5a6a 0%, #ff3344 50%, #ff5a6a 100%);
  color: #ffffff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 2px 18px rgba(255, 51, 68, 0.55);
  border-bottom: 1px solid #ff8a99;
  flex-wrap: wrap;
}
#impersonation-banner .ib-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  animation: ib-blink 1.2s ease-in-out infinite;
}
@keyframes ib-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.85); }
}
#impersonation-banner .ib-text { letter-spacing: 1.4px; }
#impersonation-banner .ib-back {
  background: #fff;
  color: #ff3344;
  border: 0;
  padding: 6px 14px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
#impersonation-banner .ib-back:hover {
  transform: scale(1.04);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
}
body.has-impersonation-banner .app,
body.has-impersonation-banner .m-app {
  padding-top: 42px;   /* push everything below the banner */
}

@media (max-width: 600px) {
  #impersonation-banner {
    font-size: 10px;
    letter-spacing: 1px;
    padding: 8px 10px;
    gap: 8px;
  }
  #impersonation-banner .ib-back {
    padding: 5px 10px;
    font-size: 10px;
  }
}

/* ============================================
   MOBILE APP SHELL  (≤ 900px)
   A standalone mobile UI with bottom tab bar, mini header,
   and card-based content. Hidden on desktop.
============================================ */
.m-app {
  display: none;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  background: var(--bg);
  position: relative;
}

@media (max-width: 900px) {
  .app { display: none !important; }
  .m-app { display: flex !important; }
  /* If the desktop sidebar drawer is somehow visible, suppress it */
  .sidebar, .sidebar-backdrop { display: none !important; }
}

/* ---------- Mobile Header ---------- */
.m-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.m-header-mid {
  flex: 1;
  min-width: 0;
}
.m-header-crumb {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.m-header-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.m-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  font-family: var(--mono);
  transition: transform 0.15s, border-color 0.15s;
}
.m-icon-btn:active { transform: scale(0.92); border-color: var(--accent); }
#m-menu-btn { gap: 3px; flex-direction: column; }
#m-menu-btn .m-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text);
}

/* ---------- Meta Strip (region + time) ---------- */
.m-meta-strip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-meta-strip::-webkit-scrollbar { display: none; }
.m-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(212, 255, 58, 0.08);
  flex-shrink: 0;
}
.m-meta-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: var(--accent);
}
.m-meta-select {
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  outline: none;
  max-width: 130px;
}
.m-meta-select option { background: var(--bg-2); color: var(--text); }
.m-meta-time {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  flex-shrink: 0;
}
.m-meta-time::before {
  content: '●';
  color: var(--success);
  margin-right: 5px;
  animation: pulse 2s infinite;
}

/* ---------- View Area ---------- */
.m-view {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Bottom padding clears the fixed .m-tabbar:
     - tabbar content ≈ 50px (icon + label + paddings)
     - iPhone home indicator safe-area can add another 34px
     - extra 24px breathing room so the LAST item never grazes the bar */
  padding: 12px 12px calc(110px + env(safe-area-inset-bottom));
  min-height: 0;
}

/* ---------- Bottom Tab Bar ---------- */
.m-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
.m-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  color: var(--text-dim);
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 8px;
  transition: color 0.15s;
}
.m-tab-icon {
  font-size: 22px;
  font-family: var(--mono);
  line-height: 1;
  font-weight: 500;
}
.m-tab.active {
  color: var(--accent);
}
.m-tab.active .m-tab-icon {
  text-shadow: 0 0 8px rgba(212, 255, 58, 0.4);
}
.m-tab:active { background: var(--bg-2); }

/* ---------- "More" Sheet ---------- */
.m-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.m-sheet.hidden { display: none; }
.m-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.m-sheet-card {
  position: relative;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: m-sheet-up 0.25s ease-out;
}
@keyframes m-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.m-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--text-dim);
  margin: 10px auto 6px;
  opacity: 0.5;
}
.m-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.m-sheet-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.m-sheet-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--info));
  flex-shrink: 0;
}
.m-sheet-name { font-weight: 600; font-size: 14px; }
.m-sheet-role {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.m-sheet-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  transition: background 0.12s;
}
.m-sheet-item:active { background: var(--bg-3); }
.m-sheet-item.active { background: var(--bg-3); color: var(--accent); }
.m-sheet-item > span:first-child {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--text-dim);
  width: 20px;
  text-align: center;
}
.m-sheet-item.active > span:first-child { color: var(--accent); }
.m-sheet-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 8px 4px;
}
.m-sheet-logout {
  margin: 12px 16px calc(16px + env(safe-area-inset-bottom));
  padding: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--danger);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}
.m-sheet-logout:active { background: rgba(255, 90, 106, 0.12); }

/* ============================================
   MOBILE COMPONENTS — cards, lists, KPI rail
============================================ */

/* KPI horizontal snap rail */
/* KPI rail — 2-column grid on mobile (was horizontal scroll). All cards
   visible at once, no hidden content behind a swipe. Cards are compact so
   6+ KPIs still fit on screen without overwhelming the user. */
.m-kpi-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
}
/* Wider phones (≥ 480px) → 3 columns; tablets get the full 4. */
@media (min-width: 480px) {
  .m-kpi-rail { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (min-width: 720px) {
  .m-kpi-rail { grid-template-columns: repeat(4, 1fr); }
}
.m-kpi {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.m-kpi-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-kpi-value {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-kpi-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-mute);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-kpi.pos .m-kpi-value { color: var(--success); }
.m-kpi.neg .m-kpi-value { color: var(--danger); }
.m-kpi.warn .m-kpi-value { color: var(--warn); }
.m-kpi.info .m-kpi-value { color: var(--info); }
.m-kpi.accent .m-kpi-value { color: var(--accent); }

/* Bank page hero — Total Operations Fund. One big card, the headline number
   of the page, then the per-company tile grid below. */
.m-bank-summary {
  background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 4px;
}
.m-bank-summary.neg { border-left-color: var(--danger); }
.m-bank-summary-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.m-bank-summary-value {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--accent);
}
.m-bank-summary.neg .m-bank-summary-value { color: var(--danger); }
.m-bank-summary-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  margin-top: 4px;
}

/* Compact per-bank tiles — 2-col grid on phones, 3 on wider screens.
   Balance is the headline; everything else (set / status / upstream) is
   tucked into the action sheet that opens on tap. */
.m-bank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
@media (min-width: 480px) {
  .m-bank-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (min-width: 720px) {
  .m-bank-grid { grid-template-columns: repeat(4, 1fr); }
}
.m-bank-tile {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 12px 14px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s, transform 0.08s;
  min-width: 0;
}
.m-bank-tile:active {
  transform: scale(0.98);
  border-color: var(--accent);
}
.m-bank-tile.inactive {
  background: var(--bg-2);
  border-style: dashed;
}
.m-bank-tile.inactive .m-bank-tile-name { color: var(--text-dim); }
.m-bank-tile-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-bank-tile-balance {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-bank-tile-balance.pos { color: var(--success); }
.m-bank-tile-balance.neg { color: var(--danger); }
.m-bank-tile-flag {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 1px;
  background: var(--bg-2);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Section headers — tighter vertical rhythm so more content fits per screen. */
.m-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 6px;
}
.m-section-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.m-section-action {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 1px;
}

/* Card list — compact on mobile so more rows fit per viewport. The old
   14px padding made each card ~80px tall; 10/12 brings that down to ~60px
   without sacrificing legibility. */
.m-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s, border-color 0.15s;
}
.m-card:active { transform: scale(0.99); }
.m-card.pos { border-left: 3px solid var(--success); }
.m-card.neg { border-left: 3px solid var(--danger); }
.m-card.warn { border-left: 3px solid var(--warn); }
.m-card.info { border-left: 3px solid var(--info); }
.m-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.m-card-amount {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.m-card-amount.pos { color: var(--success); }
.m-card-amount.neg { color: var(--danger); }
.m-card-bank {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
}
.m-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
}
.m-card-meta-dot { color: var(--text-dim); }
.m-card-tag {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Filter bar (Date / Company / Search) */
.m-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.m-filter-bar > * {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
}
.m-filter-bar .m-input,
.m-filter-bar .m-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}
.m-filter-bar .m-input:focus,
.m-filter-bar .m-select:focus { border-color: var(--accent); }

/* Day chips */
.m-day-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 6px;
  scroll-snap-type: x proximity;
  margin: 0 -12px 14px;
  padding-left: 12px;
  padding-right: 12px;
  scrollbar-width: none;
}
.m-day-chips::-webkit-scrollbar { display: none; }
.m-day-chip {
  flex-shrink: 0;
  scroll-snap-align: center;
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-day-chip.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Summary line */
.m-summary {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.m-summary strong {
  color: var(--accent);
  font-weight: 600;
}

/* Action button (primary CTA) */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform 0.08s;
}
.m-btn:active { transform: scale(0.97); }
.m-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.m-btn-danger { color: var(--danger); border-color: var(--line); }
.m-btn-full { width: 100%; }

/* Empty state */
.m-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
}

/* Bank/Company group header */
.m-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 6px;
  padding: 0 4px;
}
.m-group-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-transform: uppercase;
}
.m-group-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
}

/* ============================================
   MOBILE / TABLET RESPONSIVE
============================================ */

/* Hamburger button — hidden on desktop, shown on mobile */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-2);
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s;
}
.hamburger-btn:hover { border-color: var(--accent); }
.hamburger-btn span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
  transform-origin: center;
}
.hamburger-btn.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); background: var(--accent); }
.hamburger-btn.is-active span:nth-child(2) { opacity: 0; }
.hamburger-btn.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background: var(--accent); }

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

/* Backdrop for mobile drawer */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* ---------- TABLET (≤ 1100px) ---------- */
@media (max-width: 1100px) {
  .panel-grid { grid-template-columns: 1fr; }
  .view-container { padding: 24px 24px 56px; }
  .topbar { padding: 18px 24px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ---------- MOBILE BREAKPOINT (≤ 900px) ---------- */
@media (max-width: 900px) {
  html, body { font-size: 13px; }

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

  /* Defensive: no element should be wider than the viewport */
  .main, .view-container, .topbar, .topbar-meta { max-width: 100vw; }
  .topbar-left { min-width: 0; flex: 1; }
  .topbar-left > div:last-child { min-width: 0; overflow: hidden; }
  .topbar-left h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Inline widths set in app.js for desktop break mobile layout — override them */
  .table-toolbar input,
  .table-toolbar select,
  .table-toolbar .input,
  .table-toolbar .select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    flex: 1 1 auto !important;
  }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .hamburger-btn { display: flex; }

  /* Topbar — compact */
  .topbar {
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .topbar h2 { font-size: 18px; }
  .topbar-crumb { font-size: 9px; letter-spacing: 2px; }
  .topbar-meta {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }
  .tenant-switcher { padding: 3px 8px; }
  .tenant-switcher-label { font-size: 8px; }
  .tenant-switcher .select { font-size: 11px; min-width: 90px; padding: 4px 6px; }
  .last-reconcile, .server-time { font-size: 10px; }

  .view-container { padding: 16px 16px 48px; }

  /* KPI grid → 2 columns */
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
  }
  .kpi { padding: 14px; }
  .kpi-value { font-size: 20px !important; }
  .kpi-label { font-size: 9px !important; }

  /* Tables — wrap container scrolls horizontally with right-edge shadow hint */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--bg-1) 30%, rgba(17,19,26,0)) left center / 20px 100% no-repeat,
      linear-gradient(to right, rgba(17,19,26,0), var(--bg-1) 70%) right center / 20px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.4), rgba(0,0,0,0)) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.4), rgba(0,0,0,0)) right center / 12px 100% no-repeat,
      var(--bg-1);
    background-attachment: local, local, scroll, scroll, local;
  }
  .table-toolbar {
    padding: 12px 14px;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
  }
  .toolbar-filters { width: 100%; }
  .tbl thead th, .tbl tbody td { padding: 10px 12px; font-size: 11px; }

  /* Day tabs (Deposits/Withdrawals) */
  .day-tabs { padding: 8px 10px; gap: 3px; }
  .day-tab { min-width: 30px; height: 26px; padding: 0 6px; font-size: 11px; }

  /* Modal — full screen-ish on mobile. 100dvh (dynamic viewport) instead of
     100vh so the bottom doesn't get hidden behind the iOS URL bar / gesture
     area. Without this the sticky-action bar sits under the browser chrome. */
  .modal-card {
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .modal-head { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .form-grid { grid-template-columns: 1fr !important; }

  /* Per-company sections (Daily Reports / Reconcile / Loans) */
  .report-company {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .report-company-head,
  .report-company > .head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* User assignment grids — single column */
  .user-companies-grid,
  .user-regions-grid { grid-template-columns: 1fr !important; }

  /* Login card */
  .login-card { padding: 36px 24px; max-width: 100%; margin: 0 16px; }

  /* Settings tabs */
  /* Settings on mobile: tabs scroll horizontally instead of wrapping into a
     tall multi-line nav; form grids collapse to single column. */
  .settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px;
    scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tab {
    padding: 10px 12px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .settings-wrap { padding: 12px; }
  .form-grid { grid-template-columns: 1fr !important; }
  .settings-card { padding: 0; }
  .settings-head { padding: 14px 14px 8px; }
  .settings-body { padding: 12px 14px 16px; }
  /* The bank-config-grid is per-company side-scrolling columns on desktop —
     keep it scrollable on mobile too */
  .bank-config-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Bank cards grid — narrower cards */
  .bank-config-grid > * { min-width: 220px !important; }

  /* Buttons in form row */
  .btn { padding: 8px 12px; font-size: 11px; }
}

/* ---------- SMALL PHONES (≤ 480px) ---------- */
@media (max-width: 480px) {
  .view-container { padding: 12px 12px 40px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .topbar h2 { font-size: 16px; }
  .login-card { padding: 28px 18px; }
  .nav-item { padding: 13px 14px; font-size: 14px; }
  .nav-item i { font-size: 16px; }
}

/* ---------- Day tabs (1-31) for Deposits / Withdrawals ---------- */
.day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}

.day-tab {
  min-width: 36px;
  height: 30px;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
}

.day-tab:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}

.day-tab.today {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.day-tab.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.day-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.5px;
}

/* ===== Transaction pagination ===== */
.tx-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
}
.tx-pager-btn {
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}
.tx-pager-btn:hover:not(:disabled):not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}
.tx-pager-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 700;
  cursor: default;
}
.tx-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tx-pager-gap {
  color: var(--text-mute);
  padding: 0 2px;
  font-family: var(--mono);
}
.tx-pager-info {
  margin-left: auto;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* ===== Dashboard "By Company" panel — total row ===== */
.dash-total-row td {
  background: linear-gradient(180deg, rgba(212,255,58,0.07) 0%, rgba(212,255,58,0.02) 100%);
  border-top: 1px solid var(--accent);
  border-bottom: none;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  vertical-align: middle;
}
.dash-total-row td:first-child {
  border-top-left-radius: 0;
}
.dash-total-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(212, 255, 58, 0.25);
}
.dash-total-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  margin-top: 3px;
  text-transform: uppercase;
}
.dash-total-row .num strong {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.dash-total-wl {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1;
}
.dash-total-wl.pos { color: var(--success); }
.dash-total-wl.neg { color: var(--danger); }
.dash-total-pct {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 3px;
  letter-spacing: 0.4px;
}

/* ===== Big Withdrawals — visible inline editable inputs ===== */
.bw-input {
  width: 100%;
  min-width: 130px;
  padding: 7px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bw-input::placeholder {
  color: var(--text-dim);
  font-style: italic;
}
.bw-input:hover {
  border-color: var(--text-dim);
  background: var(--bg-3);
}
.bw-input:focus {
  border-color: var(--accent);
  background: var(--bg-1);
  box-shadow: 0 0 0 2px rgba(212, 255, 58, 0.15);
}
.bw-input:not(:placeholder-shown) {
  color: var(--accent);
  font-weight: 600;
}

/* ============================================
   CUSTOM DIALOG (replaces native confirm/alert)
   Centered card, dark+lime theme, Esc/Enter keyboard,
   stacks above form modals.
============================================ */
.dlg-root {
  position: fixed;
  inset: 0;
  z-index: 1100;        /* above .modal (z-index: 200) + impersonation banner */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dlg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.dlg-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 100%;
  max-width: 460px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(212, 255, 58, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transform: translateY(10px) scale(0.97);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease-out;
}
.dlg-root.dlg-open .dlg-backdrop { opacity: 1; }
.dlg-root.dlg-open .dlg-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.dlg-root.dlg-closing .dlg-backdrop { opacity: 0; }
.dlg-root.dlg-closing .dlg-card {
  transform: translateY(8px) scale(0.97);
  opacity: 0;
}

.dlg-head {
  padding: 22px 24px 6px;
  border-bottom: 0;
}
.dlg-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text);
}
.dlg-variant-danger .dlg-head h3 { color: var(--danger); }
.dlg-variant-accent .dlg-head h3 { color: var(--accent); }
.dlg-variant-warn   .dlg-head h3 { color: var(--warn); }
.dlg-variant-info   .dlg-head h3 { color: var(--info); }

.dlg-body {
  padding: 12px 24px 22px;
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.55;
}
.dlg-body strong { color: var(--text); font-weight: 600; }

.dlg-actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px 20px;
  justify-content: flex-end;
  border-top: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0 0 12px 12px;
}
.dlg-actions .btn {
  min-width: 96px;
  justify-content: center;
}
.dlg-confirm-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 700;
}
.dlg-confirm-primary:hover {
  background: #e6ff5a;
  box-shadow: 0 0 18px rgba(212, 255, 58, 0.25);
}
.dlg-confirm-danger {
  background: rgba(255, 90, 106, 0.12);
  color: var(--danger);
  border-color: var(--danger);
  font-weight: 700;
}
.dlg-confirm-danger:hover {
  background: var(--danger);
  color: var(--text);
  box-shadow: 0 0 18px rgba(255, 90, 106, 0.35);
}
.dlg-confirm-warn {
  background: rgba(255, 166, 77, 0.12);
  color: var(--warn);
  border-color: var(--warn);
  font-weight: 700;
}
.dlg-confirm-warn:hover {
  background: var(--warn);
  color: var(--bg);
}

@media (max-width: 480px) {
  .dlg-actions { flex-direction: column-reverse; }
  .dlg-actions .btn { width: 100%; }
}

/* ===== Company reorder drag handles ===== */
.co-drag-handle {
  cursor: grab;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 16px;
  text-align: center;
  user-select: none;
  width: 34px;
}
.co-drag-handle:hover { color: var(--accent); }
tr.co-row { transition: background 0.12s; }
tr.co-row:active { cursor: grabbing; }
tr.co-dragging {
  opacity: 0.45;
  background: var(--bg-3) !important;
}
tr.co-drag-over {
  outline: 1px dashed var(--accent);
  outline-offset: -2px;
}

/* ===== Daily Reports — per-company sections (redesign) ===== */
.reports-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.report-toolbar {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 24px;
  margin: 0;
}
.report-month-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-transform: uppercase;
  margin-right: 4px;
}

/* Shared card frame for both the Grand Total + each company section */
.report-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.report-card:hover { border-color: var(--line); }

/* ----- Grand Total card ----- */
.report-total {
  background: linear-gradient(180deg, rgba(212,255,58,0.04) 0%, var(--bg-1) 60%);
  border-color: rgba(212,255,58,0.25);
}
.report-total-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 30px 22px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.report-total-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.report-total-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.report-total-kpis {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.rt-kpi {
  text-align: right;
}
.rt-kpi-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rt-kpi-value {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1;
}
.rt-kpi-value.pos { color: var(--success); }
.rt-kpi-value.neg { color: var(--danger); }
.rt-kpi-value.accent { color: var(--accent); }

/* ----- Company chips (4x2 grid) ----- */
.report-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.report-chip {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
  font-family: var(--sans);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.report-chip:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(212,255,58,0.12);
}
.report-chip:active { transform: scale(0.98); }
.report-chip.is-empty {
  opacity: 0.5;
  cursor: default;
}
.report-chip.is-empty:hover { transform: none; border-color: var(--line); box-shadow: none; }
.report-chip-code {
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 13px;
}
.report-chip-wl {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1;
  margin-top: 2px;
}
.report-chip-wl.pos { color: var(--success); }
.report-chip-wl.neg { color: var(--danger); }
.report-chip-dw {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
}
.report-chip-empty {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
}
@media (max-width: 1000px) {
  .report-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .report-chips { grid-template-columns: 1fr 1fr; gap: 8px; }
  .report-chip-wl { font-size: 16px; }
}

/* ----- Companies list spacing ----- */
.report-companies-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ----- Per-company section ----- */
.report-company .report-company-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  background: var(--bg-1);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.report-company .report-company-head:hover { background: var(--bg-2); }
.report-company-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.report-collapse-caret {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  transition: transform 0.2s;
}
.report-company.is-collapsed .report-collapse-caret {
  transform: rotate(-90deg);
}
.report-company.is-collapsed .report-collapsible {
  display: none;
}
.report-company-head h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.8px;
  color: var(--text);
  font-weight: 700;
}
.report-company-head .muted {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.4px;
  margin-left: 4px;
}
.report-company-kpi {
  display: flex;
  gap: 22px;
  font-size: 12px;
  font-family: var(--mono);
  align-items: baseline;
}
.report-company-kpi > span {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}
.rk-label {
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.report-company-kpi strong {
  margin-left: 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.3px;
}
@media (max-width: 720px) {
  .report-company-kpi { gap: 14px; flex-wrap: wrap; }
}

.report-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----- Total row (footer) ----- */
.report-total-row td {
  background: linear-gradient(180deg, rgba(212,255,58,0.06) 0%, var(--bg-1) 100%);
  border-top: 2px solid var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--text);
  letter-spacing: 0.4px;
}
.report-total-row td:first-child {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;
}
.report-total-row td strong {
  font-weight: 700;
  font-size: 14px;
}

/* ----- Spacious table variant — used in Daily Reports ----- */
.tbl-spacious thead th {
  padding: 16px 24px;
  font-size: 10px;
  letter-spacing: 1.8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
}
.tbl-spacious thead th:first-child,
.tbl-spacious tbody td:first-child,
.tbl-spacious tfoot td:first-child {
  padding-left: 28px;
}
.tbl-spacious thead th:last-child,
.tbl-spacious tbody td:last-child,
.tbl-spacious tfoot td:last-child {
  padding-right: 28px;
}
.tbl-spacious tbody td {
  padding: 14px 24px;
  font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.tbl-spacious tfoot td {
  padding-left: 24px;
  padding-right: 24px;
}
.tbl-spacious tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.014);
}
.tbl-spacious tbody tr:hover td {
  background: rgba(212, 255, 58, 0.035);
}
.tbl-spacious .dt-cell {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.tbl-spacious .num.muted { color: var(--text-mute); }
.tbl-spacious .num.pos   { color: var(--success); font-weight: 600; }
.tbl-spacious .num.neg   { color: var(--danger); font-weight: 600; }

/* ===== Settings page ===== */
.settings-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  max-width: 900px;
}
.settings-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.settings-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.settings-head h3 {
  margin: 0 0 4px;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text);
}
.settings-head .muted {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.3px;
  line-height: 1.5;
}
.settings-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-info {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.info-label {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.info-value {
  color: var(--text);
}
.info-value.mono {
  font-family: var(--mono);
  font-size: 12px;
}
.settings-actions {
  display: flex;
  justify-content: flex-end;
}

/* ============================================
   LAST RECONCILE CARD  (Settings > General)
============================================ */
.lr-card {
  margin-top: 12px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.lr-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.lr-card-empty {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lr-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lr-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lr-head-right {
  text-align: right;
}
.lr-head-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lr-head-time {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}
.lr-relative {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}
.lr-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 3px;
  letter-spacing: 0.5px;
}
.lr-meta strong {
  color: var(--text-mute);
  font-weight: 600;
}

.lr-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 10px rgba(45, 212, 160, 0.7);
  animation: lr-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.lr-dot-off {
  background: var(--text-dim);
  box-shadow: none;
  animation: none;
}
@keyframes lr-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

/* Stats row — 4 cells split by thin dividers */
.lr-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.lr-stat {
  text-align: center;
}
.lr-stat-num {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
}
.lr-stat-num.pos { color: var(--success); }
.lr-stat-num.neg { color: var(--danger); }
.lr-stat-num.accent { color: var(--accent); }
.lr-stat-num.mute { color: var(--text-dim); }
.lr-stat-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 5px;
}
.lr-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--line-soft);
}

/* Per-company badge grid */
.lr-section-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.lr-co-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lr-co {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  transition: transform 0.1s;
}
.lr-co:hover { transform: translateY(-1px); }
.lr-co-code {
  font-weight: 700;
  letter-spacing: 0.5px;
}
.lr-co-num {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
.lr-co-zero { color: var(--text-mute); }
.lr-co-zero .lr-co-num {
  background: var(--bg-3);
  color: var(--text-dim);
}
.lr-co-hit {
  color: var(--text);
  border-color: rgba(212, 255, 58, 0.4);
  background: rgba(212, 255, 58, 0.06);
}
.lr-co-hit .lr-co-num {
  background: var(--accent);
  color: var(--bg);
}

@media (max-width: 720px) {
  .lr-stats {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .lr-stat-divider { display: none; }
  .lr-head-right { text-align: left; }
}

/* topbar last-reconcile badge */
.last-reconcile {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: nowrap;
}

/* Realtime LIVE indicator — sits between last-reconcile and server-time. */
.live-indicator {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-right: 8px;
  white-space: nowrap;
}
.live-indicator.live-on    { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); animation: pulseLive 2.5s ease-in-out infinite; }
.live-indicator.live-off   { color: var(--text-dim); }
.live-indicator.live-err   { color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
.live-indicator.live-paused { color: var(--text-mute); }
@keyframes pulseLive { 50% { opacity: 0.55; } }

/* Mobile: smaller dot */
.m-live-indicator {
  font-size: 12px;
  padding: 2px 4px;
}
.m-live-indicator.live-on  { animation: pulseLive 2.5s ease-in-out infinite; }

/* Floating "X new updates — click to refresh" pill for views that opt OUT of
   auto-refresh (Transactions / Reconcile). Sits below the topbar so it's
   visible without covering the page header. */
.sse-pill {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 18px;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.95), rgba(34, 197, 94, 0.95));
  color: #0a0e14;
  border: 0;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(74, 222, 128, 0.35), 0 2px 6px rgba(0,0,0,0.2);
  animation: pillSlide 0.3s cubic-bezier(0.22, 1, 0.32, 1);
}
.sse-pill:hover { filter: brightness(1.08); transform: translateX(-50%) translateY(-1px); }
@keyframes pillSlide {
  from { transform: translateX(-50%) translateY(-12px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

/* Reconcile (Transactions) page — when SSE delivers a new ticket, this row
   class is added briefly. The row fades in from above + flashes a soft
   green band so CS notices it without the page actually scrolling. */
.rc-newrow {
  transform: translateY(-6px);
  opacity: 0;
}
.rc-newrow-flash {
  transform: translateY(0);
  opacity: 1;
  background: rgba(74, 222, 128, 0.16);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.32, 1),
              opacity   0.4s ease-out,
              background-color 1.6s ease-out;
}

/* Same fade-in animation reused for Deposits/Withdrawals/etc. when SSE
   delivers a new tx — class is added briefly so the row pops in without
   re-rendering the table. */
.tx-newrow {
  transform: translateY(-6px);
  opacity: 0;
}
.tx-newrow-flash {
  transform: translateY(0);
  opacity: 1;
  background: rgba(74, 222, 128, 0.16);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.32, 1),
              opacity   0.4s ease-out,
              background-color 1.6s ease-out;
}

/* Dashboard KPI value flash when a number changes. Green = went up,
   red = went down. The card itself is not re-rendered. */
.kpi-flash-up   { animation: kpiFlashUp   1.4s ease-out; }
.kpi-flash-down { animation: kpiFlashDown 1.4s ease-out; }
@keyframes kpiFlashUp {
  0%   { color: #16a34a; text-shadow: 0 0 10px rgba(34, 197, 94, 0.55); transform: translateY(-2px); }
  60%  { color: #16a34a; text-shadow: 0 0 4px  rgba(34, 197, 94, 0.30); transform: translateY(0); }
  100% { text-shadow: none; }
}
@keyframes kpiFlashDown {
  0%   { color: #dc2626; text-shadow: 0 0 10px rgba(239, 68, 68, 0.55); transform: translateY(2px); }
  60%  { color: #dc2626; text-shadow: 0 0 4px  rgba(239, 68, 68, 0.30); transform: translateY(0); }
  100% { text-shadow: none; }
}

/* Stale rows — in-flight tickets (PENDING/PROCESSING) older than 24h. Subtle
   red tint + sorted to the bottom by backend. Tells CS the upstream pipeline
   is stuck on this one and may need outreach. */
.rc-stale {
  background: rgba(239, 68, 68, 0.06) !important;
}
.rc-stale td:first-child {
  border-left: 3px solid rgba(239, 68, 68, 0.5);
}
.rc-stale:hover {
  background: rgba(239, 68, 68, 0.12) !important;
}

/* ===== Settings: tabs ===== */
.settings-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.settings-tab {
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-family: var(--mono);
}
.settings-tab:hover {
  color: var(--text);
}
.settings-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===== Settings: bank config grid ===== */
.bank-config-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  /* Custom scrollbar — visible but subtle */
  scrollbar-color: var(--accent) var(--bg-1);
  scrollbar-width: thin;
}
.bank-config-grid::-webkit-scrollbar { height: 8px; }
.bank-config-grid::-webkit-scrollbar-track { background: var(--bg-1); border-radius: 4px; }
.bank-config-grid::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 4px; }
.bank-config-grid::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.bank-config-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 320px;     /* fixed width, no shrink */
  max-width: 320px;
}
.bank-config-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.bank-config-head h4 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text);
}
.bank-config-head .muted {
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--text-mute);
  font-size: 11px;
}
.bank-config-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bank-config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  gap: 10px;
  transition: background 0.12s, opacity 0.12s;
}
.bank-config-item:last-child {
  border-bottom: none;
}
/* Drag handle + drag states for the bank list — mirrors the Companies pattern. */
.bank-drag-handle {
  cursor: grab;
  color: var(--text-dim);
  font-size: 16px;
  user-select: none;
  padding: 0 4px;
}
.bank-drag-handle:hover { color: var(--accent); }
.bank-sort-item:active { cursor: grabbing; }
.bank-sort-item.bank-dragging { opacity: 0.4; }
.bank-sort-item.bank-drag-over { background: rgba(212, 255, 58, 0.06); }
.bank-config-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.bank-config-info strong {
  font-size: 13px;
  color: var(--text);
}
.bank-config-upstream {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.5px;
}
.bank-config-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}
.bank-config-actions {
  display: flex;
  gap: 4px;
}
.bank-config-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
}

/* ===== Banks page: Under No Bank ===== */
.unbanked-section {
  border-top: 2px solid var(--danger);
  margin-top: 24px;
  padding-top: 0;
  background: rgba(255, 90, 106, 0.04);
}
.unbanked-head {
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.unbanked-head h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--danger);
  text-transform: uppercase;
}
.unbanked-head .muted {
  font-size: 11px;
  color: var(--text-mute);
}
.unbanked-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.unbanked-table th, .unbanked-table td {
  padding: 10px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
}
.unbanked-table th {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-mute);
  text-transform: uppercase;
  background: var(--bg-1);
}
.unbanked-table .num {
  text-align: right;
}

/* ===== Tenant switcher (superadmin topbar) ===== */
.tenant-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: rgba(212, 255, 58, 0.06);
  white-space: nowrap;
}
.tenant-switcher-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--accent);
  font-weight: 700;
}
.tenant-switcher .select {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg-2);     /* was var(--bg-panel) which doesn't exist — text became invisible */
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 3px;
  font-family: var(--mono);
}
/* Some browsers (esp. dark-mode Chrome on mobile / Linux) ignore the parent
   color and render <option> with OS defaults, making the text near-invisible.
   Force explicit colors on the option itself. */
.tenant-switcher .select option {
  background: var(--bg-1);
  color: var(--text);
  padding: 4px 8px;
}

/* ===== Reconcile time editor (Settings General) ===== */
.reconcile-time-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.reconcile-time-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.reconcile-time-tag {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
}

/* Full-width Settings wrap variant — used by the Banks tab so the per-company
   grid can stretch across the entire main area and scroll only on overflow. */
.settings-wrap--full {
  max-width: none;
}

/* ===== Bank Reconcile page ===== */
.reconcile-wrap {
  display: flex;
  flex-direction: column;
}
.reconcile-wrap > .table-toolbar {
  border-bottom: 1px solid var(--line);
}
.rc-bank-sel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 3px;
  padding: 4px 6px;
  font-family: var(--mono);
}

/* ===== Reconcile pagination ===== */
.rc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-1);
}
.rc-pager button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ===== Users · company assignment ===== */
.user-companies-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.user-companies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 16px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  background: var(--bg-2);
}
.user-company-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  cursor: pointer;
}
.user-company-row input { accent-color: var(--accent); }
.user-company-row strong { font-family: var(--mono); color: var(--accent); }

/* Topbar last-reconcile badge — clickable for admin */
.last-reconcile:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== Daily Report — Excel grid ===== */
.dr-wrap { padding: 0; }

.dr-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.dr-toolbar-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dr-toolbar-right { display: flex; gap: 12px; align-items: center; }
.dr-legend {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
  border: 1px solid var(--line);
}
.dr-legend.dr-auto { background: var(--bg-2); }
.dr-legend.dr-manual-legend { background: var(--bg); }

.dr-banner {
  background: linear-gradient(180deg, #b91c1c, #991b1b);
  color: #fff;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 6px 6px 0 0;
  border: 1px solid #7f1d1d;
  border-bottom: 0;
  font-family: var(--mono);
}

.dr-table-wrap {
  overflow-x: auto;
  border: 1px solid #7f1d1d;
  border-radius: 0 0 6px 6px;
  background: var(--bg-1);
}

.dr-grid {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11px;
  min-width: 1100px;
}
.dr-grid thead th {
  background: #b91c1c;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 6px;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  border: 1px solid #7f1d1d;
  vertical-align: middle;
  line-height: 1.2;
}
.dr-grid tbody td {
  padding: 4px 6px;
  border: 1px solid var(--line);
  text-align: right;
  font-size: 11px;
  color: var(--text);
  background: var(--bg-1);
  white-space: nowrap;
}
.dr-grid tbody td.dr-col-date {
  text-align: center;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--text);
}
.dr-grid tbody td.dr-cell-auto {
  background: var(--bg-2);
  color: var(--text-dim);
}
.dr-grid tbody td.dr-cell-auto.pos { color: var(--success); }
.dr-grid tbody td.dr-cell-auto.neg { color: var(--danger); }

.dr-grid tbody td.dr-cell-manual {
  padding: 0;
  background: var(--bg-1);
}
.dr-cell-input {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: background 200ms ease, outline 100ms ease;
}
.dr-cell-input:hover { background: rgba(255,255,255,0.04); }
.dr-cell-input:focus { background: rgba(80,160,220,0.08); outline: 1px solid var(--accent); }
/* Hide spinner buttons — keeps the cell visually clean like a spreadsheet */
.dr-cell-input::-webkit-outer-spin-button,
.dr-cell-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dr-cell-input[type=number] { -moz-appearance: textfield; }

.dr-grid tfoot tr.dr-total td {
  background: #b91c1c;
  color: #fff;
  font-weight: 800;
  padding: 8px 6px;
  border: 1px solid #7f1d1d;
  font-size: 12px;
}
.dr-grid tfoot tr.dr-total td.dr-col-date { text-align: center; }
.dr-grid tfoot tr.dr-total td.pos,
.dr-grid tfoot tr.dr-total td.neg { color: #fff; }

/* Position-sticky first column on horizontal scroll */
.dr-grid thead th.dr-col-date,
.dr-grid tbody td.dr-col-date,
.dr-grid tfoot td.dr-col-date {
  position: sticky;
  left: 0;
  z-index: 2;
}
.dr-grid thead th.dr-col-date { z-index: 3; }

/* Inline-edit cells embedded in the original per-company Daily Report tables */
.dr-edit-cell {
  padding: 0 !important;
}
.dr-inline-input {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: background 200ms ease, outline 100ms ease;
}
.dr-inline-input:hover  { background: rgba(255,255,255,0.04); }
.dr-inline-input:focus  { background: rgba(80,160,220,0.08); outline: 1px solid var(--accent); }
.dr-inline-input::-webkit-outer-spin-button,
.dr-inline-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dr-inline-input[type=number] { -moz-appearance: textfield; }

/* ============================================================
   BANK STATUS — redesigned page (grouped + table toggle)
   ============================================================ */

/* KPI strip */
.bs-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.bs-kpi {
  background: var(--bg-panel, #161620);
  border: 1px solid var(--border, #2a2a35);
  border-radius: 10px;
  padding: 18px 22px;
  transition: border-color .15s;
}
.bs-kpi-lbl {
  font-size: 11px;
  color: var(--text-mute, #8b8b95);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.bs-kpi-val {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text, #fff);
  font-variant-numeric: tabular-nums;
  margin: 6px 0 4px;
}
.bs-kpi-sub {
  font-size: 12px;
  color: var(--text-mute, #8b8b95);
  font-weight: 500;
}
.bs-kpi-warn { border-left: 3px solid #d97706; }
.bs-kpi-warn .bs-kpi-val { color: #d97706; }
.bs-kpi-danger {
  border-left: 3px solid #dc2626;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, .15) inset;
}
.bs-kpi-danger .bs-kpi-val { color: #dc2626; }

/* Toolbar */
.bs-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg-panel, #161620);
  border: 1px solid var(--border, #2a2a35);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.bs-toolbar input,
.bs-toolbar select {
  background: var(--bg-soft, #1c1c25);
  border: 1px solid var(--border, #2a2a35);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text, #fff);
  font-size: 13px;
  font-family: inherit;
}
.bs-toolbar input { flex: 1; min-width: 240px; }
.bs-toolbar input:focus,
.bs-toolbar select:focus { outline: none; border-color: var(--accent, #d4ff3d); }

.bs-view-toggle {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--border, #2a2a35);
  border-radius: 6px;
  overflow: hidden;
}
.bs-view-toggle button {
  background: var(--bg-soft, #1c1c25);
  color: var(--text-mute, #8b8b95);
  border: none;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .3px;
}
.bs-view-toggle button:hover { color: var(--text, #fff); }
.bs-view-toggle button.active {
  background: var(--accent, #d4ff3d);
  color: #0a0a12;
}

/* Section (company group) */
.bs-section {
  background: var(--bg-panel, #161620);
  border: 1px solid var(--border, #2a2a35);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.bs-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-soft, #1c1c25);
  border-bottom: 1px solid var(--border, #2a2a35);
  transition: background .15s;
}
.bs-section-head:hover { background: #21212d; }
.bs-section-caret {
  font-size: 13px;
  color: var(--text-mute, #8b8b95);
  transition: transform .15s;
  width: 14px;
  text-align: center;
}
.bs-section.bs-collapsed .bs-section-caret { transform: rotate(-90deg); }
.bs-section.bs-collapsed .bs-section-body { display: none; }
.bs-section.bs-collapsed .bs-section-head { border-bottom: none; }

.bs-section-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #fff);
  letter-spacing: .3px;
}
.bs-section-meta {
  margin-left: auto;
  display: flex;
  gap: 16px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.bs-section-count { color: var(--text-mute, #8b8b95); }
.bs-section-warn { color: #d97706; }
.bs-section-ok { color: #16a34a; opacity: .7; }
.bs-section-body { padding: 14px 18px 16px; }

/* Card grid (inside each section) */
.bs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}
.bs-card {
  background: var(--bg-soft, #1c1c25);
  border: 1px solid var(--border, #2a2a35);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.bs-card:hover {
  border-color: var(--accent, #d4ff3d);
  background: #22222e;
}
.bs-card-attention {
  border-left: 3px solid var(--bs-accent);
}
.bs-card-overdue {
  box-shadow: 0 0 0 1px rgba(220, 38, 38, .35);
}
.bs-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.bs-card-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.bs-card-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.bs-card-lbl {
  color: var(--text-mute, #8b8b95);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.bs-card-val {
  color: var(--text, #fff);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bs-card-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #2a2a35);
  font-size: 12px;
  color: var(--text-mute, #8b8b95);
  line-height: 1.5;
}

/* Table view */
.bs-table-wrap {
  background: var(--bg-panel, #161620);
  border: 1px solid var(--border, #2a2a35);
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.bs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bs-table thead th {
  background: var(--bg-soft, #1c1c25);
  color: var(--text-mute, #8b8b95);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #2a2a35);
}
.bs-table .bs-num { text-align: right; font-variant-numeric: tabular-nums; }
.bs-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #2a2a35);
  color: var(--text, #fff);
}
.bs-table tbody tr { cursor: pointer; transition: background .12s; }
.bs-table tbody tr:hover { background: #22222e; }
.bs-row-overdue { box-shadow: inset 3px 0 0 #dc2626; }
.bs-bank-cell strong { color: var(--text, #fff); font-weight: 700; }
.bs-muted { color: var(--text-mute, #8b8b95); opacity: .65; }

/* Mobile responsive */
@media (max-width: 760px) {
  .bs-kpi-row { grid-template-columns: 1fr; gap: 10px; }
  .bs-kpi-val { font-size: 28px; }
  .bs-toolbar { gap: 8px; padding: 10px; }
  .bs-toolbar input,
  .bs-toolbar select { font-size: 14px; padding: 10px 12px; }
  .bs-view-toggle { width: 100%; margin-left: 0; }
  .bs-view-toggle button { flex: 1; }
  .bs-card-grid { grid-template-columns: 1fr; gap: 8px; }
  .bs-section-head { padding: 12px 14px; }
  .bs-section-meta { font-size: 10.5px; gap: 10px; }
  .bs-table thead { display: none; }
  .bs-table tbody td { display: block; padding: 4px 16px; border: none; }
  .bs-table tbody tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border, #2a2a35);
  }
}

/* ============================================================
   BANK STATUS — Edit modal tabs (General / Usage / History)
   ============================================================ */
.bs-modal {
  max-width: 920px !important;
  width: calc(100% - 32px);
}
.bs-modal-body {
  max-height: 72vh;
  overflow-y: auto;
  padding: 0;
}
.bs-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-mute, #8b8b95);
  font-size: 22px; line-height: 1;
  width: 32px; height: 32px;
  border-radius: 6px;
  margin-left: auto;
}
.bs-modal-close:hover { background: var(--bg-soft, #1c1c25); color: var(--text, #fff); }

.bs-tabs {
  display: flex;
  border-bottom: 1px solid var(--border, #2a2a35);
  background: var(--bg-panel, #161620);
}
.bs-tab {
  background: none; border: none;
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--text-mute, #8b8b95);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.bs-tab:hover { color: var(--text, #fff); }
.bs-tab.active {
  color: var(--accent, #d4ff3d);
  border-bottom-color: var(--accent, #d4ff3d);
}

.bs-tab-panel { display: none; padding: 22px 26px; }
.bs-tab-panel.active { display: block; }

/* General form grid */
.bs-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bs-form-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px;
  color: var(--text-mute, #8b8b95);
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.bs-form-grid .bs-span2 { grid-column: 1 / -1; }
.bs-form-grid input,
.bs-form-grid select,
.bs-form-grid textarea {
  background: var(--bg-soft, #1c1c25);
  border: 1px solid var(--border, #2a2a35);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--text, #fff);
  font-size: 13px;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
}
.bs-form-grid textarea { resize: vertical; min-height: 60px; }
.bs-form-grid input:focus,
.bs-form-grid select:focus,
.bs-form-grid textarea:focus { outline: none; border-color: var(--accent, #d4ff3d); }

.bs-hint {
  font-size: 10.5px;
  color: var(--text-mute, #8b8b95);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}
.bs-hint a { color: var(--accent, #d4ff3d); cursor: pointer; }
.bs-hint a:hover { text-decoration: underline; }
.bs-hint-inline {
  font-size: 11px;
  color: var(--text-mute, #8b8b95);
  font-weight: 500;
  margin-left: 4px;
}

/* Usage header */
.bs-usage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 14px;
}
.bs-usage-started-lbl {
  font-size: 11px;
  color: var(--text-mute, #8b8b95);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.bs-usage-started-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #fff);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.bs-usage-period {
  display: inline-flex;
  border: 1px solid var(--border, #2a2a35);
  border-radius: 6px;
  overflow: hidden;
}
.bs-usage-period-btn {
  background: var(--bg-soft, #1c1c25);
  color: var(--text-mute, #8b8b95);
  border: none;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .3px;
}
.bs-usage-period-btn:hover { color: var(--text, #fff); }
.bs-usage-period-btn.active {
  background: var(--accent, #d4ff3d);
  color: #0a0a12;
}

.bs-usage-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 12px 16px;
  background: var(--bg-soft, #1c1c25);
  border: 1px solid var(--border, #2a2a35);
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text, #fff);
  font-variant-numeric: tabular-nums;
}
.bs-usage-totals b { color: var(--text-mute, #8b8b95); font-weight: 600; }
.bs-num-in   { color: #16a34a; font-weight: 700; }
.bs-num-out  { color: #dc2626; font-weight: 700; }
.bs-num-balance { color: var(--accent, #d4ff3d); font-weight: 700; }

.bs-usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.bs-usage-table thead th {
  background: var(--bg-soft, #1c1c25);
  color: var(--text-mute, #8b8b95);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #2a2a35);
}
.bs-usage-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #2a2a35);
  color: var(--text, #fff);
}
.bs-usage-table .bs-num { text-align: right; }
.bs-tx-split {
  color: var(--text-mute, #8b8b95);
  font-weight: 500;
  font-size: 11px;
  margin-left: 2px;
}

/* Timeline (History tab) */
.bs-timeline {}
.bs-tl-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #2a2a35);
}
.bs-tl-item:last-child { border-bottom: none; }
.bs-tl-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text, #fff);
  font-size: 13px;
  flex-wrap: wrap;
}
.bs-tl-notes {
  margin-top: 6px;
  color: var(--text-mute, #8b8b95);
  font-size: 12.5px;
  line-height: 1.5;
}
.bs-tl-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-mute, #8b8b95);
  opacity: .8;
}
.bs-tl-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-mute, #8b8b95);
  font-size: 12.5px;
}

@media (max-width: 760px) {
  .bs-modal { max-width: 100% !important; width: 100%; }
  .bs-tab { padding: 12px 14px; font-size: 12.5px; }
  .bs-tab-panel { padding: 16px 16px; }
  .bs-form-grid { grid-template-columns: 1fr; gap: 10px; }
  .bs-usage-header { flex-direction: column; align-items: flex-start; }
  .bs-usage-period { width: 100%; }
  .bs-usage-period-btn { flex: 1; }
  .bs-usage-totals { gap: 10px; font-size: 12px; }
  .bs-usage-table { font-size: 11.5px; }
  .bs-usage-table thead th,
  .bs-usage-table tbody td { padding: 8px 8px; }
  .bs-tx-split { display: none; }
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  position: relative;
  width: 32px; height: 28px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: background .15s, border-color .15s;
}
.theme-toggle:hover { border-color: var(--accent); background: var(--bg-3); }
.theme-toggle-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text);
  transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .2s;
}
.theme-toggle-sun  { transform: translateY(120%); opacity: 0; }
.theme-toggle-moon { transform: translateY(0);   opacity: 1; }
body.theme-light .theme-toggle-sun, body.theme-notion .theme-toggle-sun  { transform: translateY(0);   opacity: 1; color: #f5a623; }
body.theme-light .theme-toggle-moon, body.theme-notion .theme-toggle-moon { transform: translateY(-120%); opacity: 0; }

/* ============================================================
   LIGHT THEME — global overrides for non-tokenized elements
   ============================================================ */
body.theme-light a, body.theme-notion a { color: var(--accent); }
body.theme-light a:hover, body.theme-notion a:hover { color: var(--accent-dim); }
body.theme-light code, body.theme-notion code,body.theme-light pre, body.theme-notion pre {
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line);
}
/* Inputs / selects / textareas — fight Chrome's autofill yellow */
body.theme-light input, body.theme-notion input,body.theme-light select, body.theme-notion select,body.theme-light textarea, body.theme-notion textarea {
  background: var(--bg-1);
  color: var(--text);
  border-color: var(--line);
}
body.theme-light input:focus, body.theme-notion input:focus,body.theme-light select:focus, body.theme-notion select:focus,body.theme-light textarea:focus, body.theme-notion textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
body.theme-light input::placeholder, body.theme-notion input::placeholder,body.theme-light textarea::placeholder, body.theme-notion textarea::placeholder { color: var(--text-dim); }
body.theme-light input:-webkit-autofill, body.theme-notion input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 30px var(--bg-1) inset;
}

/* Pill / badge bg coloring for light */
body.theme-light .pill.success, body.theme-notion .pill.success,body.theme-light .badge.success, body.theme-notion .badge.success,body.theme-light .pill.active, body.theme-notion .pill.active   { background: var(--success-bg); color: var(--success); }
body.theme-light .pill.danger, body.theme-notion .pill.danger,body.theme-light .badge.danger, body.theme-notion .badge.danger,body.theme-light .pill.failed, body.theme-notion .pill.failed   { background: var(--danger-bg);  color: var(--danger); }
body.theme-light .pill.warn, body.theme-notion .pill.warn,body.theme-light .badge.warn, body.theme-notion .badge.warn    { background: var(--warn-bg);    color: var(--warn); }
body.theme-light .pill.info, body.theme-notion .pill.info,body.theme-light .badge.info, body.theme-notion .badge.info,body.theme-light .pill.pending, body.theme-notion .pill.pending  { background: var(--info-bg);    color: var(--info); }
body.theme-light .pill.inactive, body.theme-notion .pill.inactive,body.theme-light .pill.mute, body.theme-notion .pill.mute,body.theme-light .badge.mute, body.theme-notion .badge.mute    { background: var(--bg-3); color: var(--text-mute); }

/* Bank Status card hover in light */
body.theme-light .bs-card:hover, body.theme-notion .bs-card:hover { border-color: var(--accent); background: var(--bg-soft); }
body.theme-light .bs-section-head:hover, body.theme-notion .bs-section-head:hover { background: var(--bg-3); }

/* View toggle button (light) */
body.theme-light .bs-view-toggle button.active, body.theme-notion .bs-view-toggle button.active,body.theme-light .bs-usage-period-btn.active, body.theme-notion .bs-usage-period-btn.active {
  background: var(--accent);
  color: var(--accent-on);
}

/* Sidebar styling differences in light */
body.theme-light .sidebar, body.theme-notion .sidebar { background: var(--bg-1); border-right: 1px solid var(--line); }
body.theme-light .nav-item, body.theme-notion .nav-item { color: var(--text-mute); }
body.theme-light .nav-item:hover, body.theme-notion .nav-item:hover { background: var(--bg-3); color: var(--text); }
body.theme-light .nav-item.active, body.theme-notion .nav-item.active { background: var(--accent-soft); color: var(--accent); }

/* Topbar in light */
body.theme-light .topbar, body.theme-notion .topbar { background: var(--bg-1); border-bottom: 1px solid var(--line); }
body.theme-light .topbar-crumb, body.theme-notion .topbar-crumb { color: var(--text-mute); }

/* Cards in light */
body.theme-light .card, body.theme-notion .card,body.theme-light .panel, body.theme-notion .panel { background: var(--bg-panel); border: 1px solid var(--line); box-shadow: var(--shadow-card); }

/* Buttons in light — use brand-dark navy as primary */
body.theme-light .btn, body.theme-notion .btn,body.theme-light .m-btn, body.theme-notion .m-btn { background: var(--bg-panel); color: var(--text); border: 1px solid var(--line); }
body.theme-light .btn:hover, body.theme-notion .btn:hover,body.theme-light .m-btn:hover, body.theme-notion .m-btn:hover { border-color: var(--accent); color: var(--accent); }
body.theme-light .btn-primary, body.theme-notion .btn-primary,body.theme-light .m-btn-primary, body.theme-notion .m-btn-primary { background: var(--primary); color: var(--primary-text); border: none; }
body.theme-light .btn-primary:hover, body.theme-notion .btn-primary:hover,body.theme-light .m-btn-primary:hover, body.theme-notion .m-btn-primary:hover { background: #000e3a; color: #fff; }
body.theme-light .btn-danger, body.theme-notion .btn-danger,body.theme-light .m-btn-danger, body.theme-notion .m-btn-danger { background: var(--bg-panel); color: var(--danger); border: 1px solid var(--danger-bg); }

/* Table hover in light */
body.theme-light tr:hover, body.theme-notion tr:hover { background: var(--bg-soft); }

/* Bank Status KPI cards in light */
body.theme-light .bs-kpi, body.theme-notion .bs-kpi { background: var(--bg-panel); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
body.theme-light .bs-kpi-val, body.theme-notion .bs-kpi-val { color: var(--ink); }
body.theme-light .bs-kpi-warn, body.theme-notion .bs-kpi-warn { border-left: 3px solid var(--warn); }
body.theme-light .bs-kpi-danger, body.theme-notion .bs-kpi-danger { border-left: 3px solid var(--danger); box-shadow: 0 0 0 1px var(--danger-bg) inset, var(--shadow-card); }

/* Bank Status table in light */
body.theme-light .bs-table-wrap, body.theme-notion .bs-table-wrap { background: var(--bg-panel); border: 1px solid var(--line); }
body.theme-light .bs-table thead th, body.theme-notion .bs-table thead th { background: var(--bg-soft); color: var(--text-mute); border-bottom: 1px solid var(--line); }
body.theme-light .bs-table tbody td, body.theme-notion .bs-table tbody td { border-bottom: 1px solid var(--line); color: var(--text); }
body.theme-light .bs-table tbody tr:hover, body.theme-notion .bs-table tbody tr:hover { background: var(--bg-soft); }
body.theme-light .bs-muted, body.theme-notion .bs-muted { color: var(--text-dim); }

/* Bank Status modal in light */
body.theme-light .bs-tabs, body.theme-notion .bs-tabs { background: var(--bg-panel); border-bottom: 1px solid var(--line); }
body.theme-light .bs-tab, body.theme-notion .bs-tab { color: var(--text-mute); }
body.theme-light .bs-tab:hover, body.theme-notion .bs-tab:hover { color: var(--text); }
body.theme-light .bs-tab.active, body.theme-notion .bs-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
body.theme-light .bs-usage-totals, body.theme-notion .bs-usage-totals { background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); }
body.theme-light .bs-usage-table thead th, body.theme-notion .bs-usage-table thead th { background: var(--bg-soft); color: var(--text-mute); }
body.theme-light .bs-usage-table tbody td, body.theme-notion .bs-usage-table tbody td { border-bottom: 1px solid var(--line); color: var(--text); }
body.theme-light .bs-num-balance, body.theme-notion .bs-num-balance { color: var(--accent); }
body.theme-light .bs-section, body.theme-notion .bs-section,body.theme-light .bs-toolbar, body.theme-notion .bs-toolbar { background: var(--bg-panel); border: 1px solid var(--line); }
body.theme-light .bs-section-head, body.theme-notion .bs-section-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
body.theme-light .bs-section-head:hover, body.theme-notion .bs-section-head:hover { background: var(--bg-3); }

/* dlg modal — light */
body.theme-light .dlg-backdrop, body.theme-notion .dlg-backdrop { background: rgba(13, 37, 61, .35); backdrop-filter: blur(4px); }
body.theme-light .dlg-card, body.theme-notion .dlg-card { background: var(--bg-panel); border: 1px solid var(--line); color: var(--text); }
body.theme-light .dlg-head, body.theme-notion .dlg-head { border-bottom: 1px solid var(--line); }
body.theme-light .dlg-actions, body.theme-notion .dlg-actions { border-top: 1px solid var(--line); background: var(--bg-soft); }


/* ============================================================
   THEME · LINEAR — lavender on charcoal (dark variant)
   ============================================================ */
body.theme-linear {
  --bg: #010102;
  --bg-1: #0e0e15;
  --bg-2: #16161e;
  --bg-3: #1c1c25;
  --bg-panel: #16161e;
  --bg-soft: #0e0e15;
  --line: #2a2a35;
  --line-soft: #1c1c25;
  --border: #2a2a35;
  --text: #f0f1f5;
  --text-mute: #b1b2b8;
  --text-dim: #6f717b;
  --ink: #f0f1f5;
  --ink-mute: #b1b2b8;
  --ink-faint: #6f717b;
  --accent: #5e6ad2;
  --accent-dim: #4a55b3;
  --accent-soft: rgba(94, 106, 210, 0.14);
  --accent-on: #ffffff;
  --primary: #5e6ad2;
  --primary-text: #ffffff;
  --success: #4cb782;
  --success-bg: rgba(76, 183, 130, 0.14);
  --danger: #f25a5a;
  --danger-bg: rgba(242, 90, 90, 0.14);
  --warn: #e8a13c;
  --warn-bg: rgba(232, 161, 60, 0.14);
  --info: #6cb5f0;
  --info-bg: rgba(108, 181, 240, 0.14);
  --grid-line: #1c1c25;
  --shadow-card: 0 1px 2px rgba(0,0,0,.32), 0 4px 14px rgba(0,0,0,.22);
  --shadow-pop:  0 2px 8px rgba(0,0,0,.44), 0 18px 44px rgba(0,0,0,.38);
  --shadow-glow: 0 0 0 1px rgba(94,106,210,.16), 0 0 22px rgba(94,106,210,.16);
  --color-scheme: dark;
  background-image:
    radial-gradient(circle at 10% 0%, rgba(94,106,210,0.07), transparent 42%),
    radial-gradient(circle at 90% 100%, rgba(94,106,210,0.04), transparent 42%);
}

/* ============================================================
   THEME · NOTION — teal on cream (light variant)
   ============================================================ */
body.theme-notion {
  --bg: #ffffff;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f1efea;
  --bg-panel: #ffffff;
  --bg-soft: #f7f6f3;
  --line: #e9e8e3;
  --line-soft: #f1efea;
  --border: #dcdad5;
  --text: #37352f;
  --text-mute: #888379;
  --text-dim: #b3aea2;
  --ink: #37352f;
  --ink-mute: #888379;
  --ink-faint: #b3aea2;
  --accent: #2b8e85;
  --accent-dim: #226b65;
  --accent-soft: rgba(43, 142, 133, 0.12);
  --accent-on: #ffffff;
  --primary: #37352f;
  --primary-text: #ffffff;
  --success: #4f8c64;
  --success-bg: #ebf5ee;
  --danger: #b94a48;
  --danger-bg: #fbecec;
  --warn: #b07e30;
  --warn-bg: #fbf3e3;
  --info: #4a78b3;
  --info-bg: #ecf2fa;
  --grid-line: #f1efea;
  --shadow-card: none;
  --shadow-pop:  0 1px 3px rgba(15,15,15,.08), 0 8px 22px rgba(15,15,15,.10);
  --shadow-glow: 0 0 0 1px rgba(43,142,133,.14);
  --color-scheme: light;
  background-image: none;
}

/* ============================================================
   Theme: Airtable · Editorial workflow (sober white + near-black)
   Source: /root/design-md/design-md/airtable/DESIGN.md
   Design voice: pure white canvas, generous whitespace, near-black
   primary CTA, hairline borders, no shadow theatre. Voltage lives in
   full-bleed signature cards (coral / forest / dark navy) — those
   are optional accents; the core system is quietly monochrome.
   Applied together with `theme-notion` class so all existing light-
   mode overrides (sidebar / inputs / pills / topbar) apply
   automatically; this block only overrides the token variables.
   ============================================================ */
body.theme-airtable {
  --bg: #ffffff;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f8fafc;
  --bg-panel: #ffffff;
  --bg-soft: #f8fafc;
  --line: #dddddd;
  --line-soft: #e6e8ec;
  --border: #9297a0;
  --text: #181d26;
  --text-mute: #333840;
  --text-dim: #41454d;
  --ink: #181d26;
  --ink-mute: #333840;
  --ink-faint: #9297a0;
  --accent: #181d26;
  --accent-dim: #0d1218;
  --accent-soft: rgba(24, 29, 38, 0.08);
  --accent-on: #ffffff;
  --primary: #181d26;
  --primary-text: #ffffff;
  --success: #006400;
  --success-bg: rgba(57, 191, 69, 0.12);
  --danger: #aa2d00;
  --danger-bg: rgba(170, 45, 0, 0.10);
  --warn: #d9a441;
  --warn-bg: rgba(217, 164, 65, 0.14);
  --info: #254fad;
  --info-bg: rgba(69, 143, 255, 0.12);
  --grid-line: #eef0f3;
  --shadow-card: none;
  --shadow-pop:  0 1px 2px rgba(24,29,38,.06), 0 6px 20px rgba(24,29,38,.09);
  --shadow-glow: 0 0 0 2px rgba(69,143,255,.35);
  --color-scheme: light;
  background: #ffffff;
  background-image: none;
}

/* Airtable also carries a signature link blue for anchor text —
   different from the primary CTA color (which is near-black).
   These override the light-family `a` rules that live further down. */
body[class*="theme-airtable"] a { color: #1b61c9; }
body[class*="theme-airtable"] a:hover { color: #1a3866; }

/* ============================================================
   UTILITIES — generic .muted .mono .switch .rule-row
   ============================================================ */
.muted { color: var(--text-mute); }
small.muted { font-size: 11.5px; }
.mono { font-family: var(--mono); font-size: 13px; }
.input.mono { font-family: var(--mono); font-size: 13px; }

.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch.sm { width: 38px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0; background: var(--bg-3); border-radius: 999px;
  cursor: pointer; transition: background .15s;
}
.switch-slider::before {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch.sm .switch-slider::before { width: 16px; height: 16px; left: 3px; top: 3px; }
.switch input:checked + .switch-slider { background: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }
.switch.sm input:checked + .switch-slider::before { transform: translateX(16px); }
.switch input:disabled + .switch-slider { opacity: .55; cursor: default; }

.rule-list { display: flex; flex-direction: column; }
.rule-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.rule-row:first-child { padding-top: 4px; }
.rule-row:last-child { border-bottom: none; padding-bottom: 4px; }
.rule-info { flex: 1; min-width: 0; }
.rule-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule-meta { font-size: 12px; margin-top: 3px; }

.settings-body code, .settings-head code, .lr-head-time code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--bg-1); padding: 1px 6px; border-radius: 4px;
  color: var(--text);
}

/* ============================================================
   SETTINGS · APPEARANCE — theme picker cards
   ============================================================ */
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.theme-card {
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 0; text-align: left; cursor: pointer; overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  font-family: inherit; color: var(--text);
}
.theme-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-preview { aspect-ratio: 16/9; display: flex; flex-direction: column; padding: 10px; gap: 6px; }
.theme-preview-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 4px; flex-shrink: 0; }
.theme-preview-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.theme-preview-line { display: block; height: 4px; border-radius: 2px; width: 60%; }
.theme-preview-panel { flex: 1; border-radius: 4px; padding: 10px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.theme-preview-pill { position: absolute; top: 8px; right: 8px; font-size: 9px; font-weight: 700; letter-spacing: .4px; padding: 2px 7px; border-radius: 99px; }
.theme-card-meta { padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.theme-card-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; }
.theme-card-blurb { font-size: 12.5px; color: var(--text-mute); margin-top: 4px; line-height: 1.5; }

/* Multi-select company picker — used by Add/Edit Bank modal */
.company-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px; padding: 8px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px;
  max-height: 240px; overflow-y: auto;
}
.company-pick {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  font-size: 12.5px;
  transition: background .12s, border-color .12s;
}
.company-pick:hover { background: var(--bg-3); border-color: var(--accent); }
.company-pick input { margin: 0; cursor: pointer; }
.company-pick-code { font-family: var(--mono); font-weight: 700; font-size: 11.5px; color: var(--accent); }
.company-pick-name { color: var(--text-mute); font-size: 11px; }

/* Shared-bank visual hint on bank-config list item */
.bank-config-item.bank-shared { border-left: 3px solid var(--info); }

/* ============================================
   ↓↓↓ Cherry-pick from staging — new feature CSS
============================================ */

/* Bank direction chip (🟢/🔴/🔵). Used on Banks page card + mobile tile + modal. */
.bank-dir-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.bank-card > .bank-dir-chip {
  position: absolute;
  top: 8px;
  right: 8px;
}
.bank-dir-chip.dep  { background: rgba(46, 196, 92, 0.18);  color: #2ec45c; border: 1px solid rgba(46, 196, 92, 0.35); }
.bank-dir-chip.wd   { background: rgba(255, 75, 75, 0.18);  color: #ff5b5b; border: 1px solid rgba(255, 75, 75, 0.35); }
.bank-dir-chip.both { background: rgba(60, 145, 255, 0.18); color: #5ba6ff; border: 1px solid rgba(60, 145, 255, 0.35); }
.bank-dir-chip.off  { background: rgba(160, 160, 160, 0.18); color: #b0b0b0; border: 1px solid rgba(160, 160, 160, 0.35); }

/* Direction picker (modal). */
.bank-dir-pick { display: flex; gap: 10px; margin-top: 4px; }
.bank-dir-opt {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; background: var(--bg);
  transition: border-color 120ms ease, background 120ms ease;
}
.bank-dir-opt input { margin: 0; }
.bank-dir-opt.on    { border-color: var(--accent); background: rgba(212,255,58,0.06); }
.bank-dir-opt:hover { border-color: var(--accent); }

/* Per-bank daily-limit progress bars + tier color on the card itself. */
.bank-card.bank-card-warn {
  border-color: rgba(255, 175, 25, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 175, 25, 0.15) inset;
}
.bank-card.bank-card-over {
  border-color: rgba(255, 75, 75, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 75, 75, 0.25) inset;
  background: linear-gradient(180deg, rgba(255, 75, 75, 0.06) 0%, var(--bg-1) 60%);
}
.bank-lim-block {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.bank-lim-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
}
.bank-lim-row.warn .bank-lim-fill { background: #ffaf19; }
.bank-lim-row.over .bank-lim-fill { background: #ff5b5b; }
.bank-lim-row.over .bank-lim-num  { color: #ff5b5b; font-weight: 700; }
.bank-lim-label { letter-spacing: 0.5px; }
.bank-lim-track { height: 6px; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; }
.bank-lim-fill { height: 100%; background: #2ec45c; border-radius: 999px; transition: width 200ms ease; }
.bank-lim-num { white-space: nowrap; }

.m-bank-tile-warn { border-color: rgba(255, 175, 25, 0.55); box-shadow: 0 0 0 1px rgba(255, 175, 25, 0.15) inset; }
.m-bank-tile-over { border-color: rgba(255, 75, 75, 0.7); background: linear-gradient(180deg, rgba(255,75,75,0.07) 0%, var(--bg-1) 70%); }
.m-bank-tile > .bank-dir-chip { position: absolute; top: 6px; right: 6px; }

/* Transfer-modal kind radios (5-type picker). */
.tf-kind-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; font-size: 12px; background: var(--bg);
  transition: border-color 120ms ease, background 120ms ease;
}
.tf-kind-row:hover { border-color: var(--accent); }
.tf-kind-row input { margin: 0; }
.tf-kind-row:has(input:checked) { border-color: var(--accent); background: rgba(212,255,58,0.06); }

/* Bank-status fixed-height card layout. Override prod's old loose card. */
.bs-card {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 168px; padding: 12px 14px;
}
.bs-card-balance {
  font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
}
.bs-card-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px;
  padding: 6px 0; border-top: 1px dashed var(--border, #2a2a35);
  border-bottom: 1px dashed var(--border, #2a2a35); min-height: 38px;
}
.bs-card-meta-cell {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; min-width: 0;
}
.bs-card-fu {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-mute, #8b8b95);
  min-height: 22px; overflow: hidden;
}
.bs-card-fu-empty { color: var(--text-mute); font-style: italic; }
.bs-card-fu-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 4px;
  font-weight: 700; font-size: 10px; letter-spacing: 0.3px;
  white-space: nowrap; flex-shrink: 0;
}
.bs-card-fu-when { font-family: var(--mono); font-size: 10px; color: var(--text-dim); flex-shrink: 0; }
.bs-card-fu-notes { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.bs-show-inactive {
  margin-top: 8px; background: transparent;
  border: 1px dashed var(--border, #2a2a35); border-radius: 6px;
  padding: 6px 12px; color: var(--text-mute);
  font-size: 11px; font-family: var(--mono); cursor: pointer;
  width: 100%; letter-spacing: 0.3px;
  transition: border-color .15s, color .15s;
}
.bs-show-inactive:hover { border-color: var(--accent, #d4ff3d); color: var(--accent, #d4ff3d); }

/* Bank-status modal — Follow-ups tab + Usage range row + Status-log hint. */
.bs-tab-hint { font-size: 11px; color: var(--text-mute); margin-bottom: 10px; font-style: italic; }
.bs-fu-add {
  background: var(--bg-2, #161620); border: 1px solid var(--line, #2a2a35);
  border-radius: 8px; padding: 14px; margin-bottom: 16px;
}
.bs-fu-add-head { font-weight: 700; font-size: 13px; margin-bottom: 10px; color: var(--accent); }
.bs-fu-add-grid { display: flex; flex-direction: column; gap: 10px; }
.bs-fu-action-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-fu-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text-mute); font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms;
}
.bs-fu-action-btn:hover { border-color: var(--act-c); color: var(--act-c); }
.bs-fu-action-btn.on { background: var(--act-bg); border-color: var(--act-c); color: var(--act-c); }
.bs-fu-action-icon { font-size: 13px; }
#bs-fu-notes {
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 8px 10px; font-family: inherit; font-size: 12px;
  width: 100%; resize: vertical;
}
.bs-fu-add-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bs-fu-when-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: var(--text-mute); font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase;
}
.bs-fu-when-label input {
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 6px 8px; font-family: var(--mono); font-size: 11px;
}
.bs-fu-add-actions .btn-primary { margin-left: auto; }

.bs-fu-timeline { display: flex; flex-direction: column; gap: 8px; }
.bs-fu-entry {
  display: flex; gap: 10px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.bs-fu-entry-rail { width: 3px; flex-shrink: 0; }
.bs-fu-entry-body { flex: 1; padding: 10px 12px; min-width: 0; }
.bs-fu-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.bs-fu-action-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  font-weight: 700; font-size: 10px; letter-spacing: 0.3px;
}
.bs-fu-entry-when { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.bs-fu-entry-by { font-size: 11px; color: var(--text-dim); }
.bs-fu-del {
  margin-left: auto; background: transparent; border: none;
  color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 0 6px; line-height: 1;
}
.bs-fu-del:hover { color: var(--danger); }
.bs-fu-entry-notes { font-size: 12px; color: var(--text); line-height: 1.5; word-break: break-word; }

/* Bank-status usage Range mode picker. */
.bs-usage-range-row {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--bg-soft, #1c1c25); border: 1px solid var(--border, #2a2a35); border-radius: 8px;
}
.bs-usage-range-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: var(--text-mute); font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase;
}
.bs-usage-range-row input[type="date"] {
  background: var(--bg, #0a0a12); border: 1px solid var(--border, #2a2a35); border-radius: 4px;
  color: var(--text); padding: 6px 8px; font-family: var(--mono); font-size: 12px;
}
.bs-usage-range-row .btn { padding: 8px 14px; font-size: 12px; }
.bs-usage-range-presets { display: flex; gap: 4px; margin-left: auto; }
.bs-usage-range-presets button {
  background: transparent; border: 1px solid var(--border, #2a2a35); border-radius: 4px;
  color: var(--text-mute); padding: 5px 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.3px;
  cursor: pointer; transition: border-color 120ms, color 120ms;
}
.bs-usage-range-presets button:hover { border-color: var(--accent); color: var(--accent); }

/* Company Loans N×N matrix. */
.ln-matrix-wrap {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.ln-matrix-scroll { overflow-x: auto; overflow-y: visible; }
.ln-matrix {
  border-collapse: separate; border-spacing: 0;
  font-family: var(--mono); font-size: 11px; min-width: 100%;
}
.ln-matrix th, .ln-matrix td {
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 0; min-width: 92px; background: var(--bg-1);
}
.ln-matrix thead th {
  position: sticky; top: 0; background: var(--bg-2); z-index: 3;
  font-weight: 600; letter-spacing: 1px; color: var(--text-mute);
}
.ln-matrix-corner {
  position: sticky; left: 0; z-index: 5 !important;
  min-width: 160px; background: var(--bg-2); border-right: 2px solid var(--accent);
}
.ln-matrix-corner-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 10px 12px; font-size: 10px; color: var(--text-dim); gap: 2px;
}
.ln-corner-row, .ln-corner-col { color: var(--accent); }
.ln-matrix-col-head { padding: 10px 8px !important; text-align: center; vertical-align: middle; }
.ln-col-code { font-weight: 700; font-size: 11px; color: var(--text); }
.ln-matrix-row-head {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg-2) !important; border-right: 2px solid var(--accent) !important;
  padding: 10px 12px !important; min-width: 160px;
  text-align: left; vertical-align: middle;
}
.ln-row-code { font-weight: 700; color: var(--text); font-size: 12px; }
.ln-row-name {
  font-size: 9px; color: var(--text-dim); letter-spacing: 0.5px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.ln-matrix-cell {
  text-align: center; vertical-align: middle; height: 56px; padding: 6px 8px !important;
  cursor: pointer; transition: background 100ms ease;
}
.ln-matrix-cell:hover { background: var(--bg-3, #22222e); }
.ln-cell-diag {
  background: repeating-linear-gradient(-45deg, var(--bg-2) 0px, var(--bg-2) 4px, var(--bg-1) 4px, var(--bg-1) 8px) !important;
  cursor: default; pointer-events: none;
}
.ln-cell-empty { color: var(--text-dim); }
.ln-cell-empty::after { content: '—'; display: block; color: var(--text-dim); font-size: 14px; }
.ln-cell-owed { background: linear-gradient(180deg, rgba(212,255,58,0.10) 0%, rgba(212,255,58,0.02) 100%); color: var(--accent); }
.ln-cell-owed:hover { background: linear-gradient(180deg, rgba(212,255,58,0.20) 0%, rgba(212,255,58,0.04) 100%); }
.ln-cell-amt { font-weight: 700; font-size: 13px; letter-spacing: -0.3px; }
.ln-cell-tx { font-size: 9px; color: var(--text-dim); margin-top: 2px; letter-spacing: 0.5px; }
.ln-matrix-row-total {
  position: sticky; right: 0; background: var(--bg-2) !important;
  border-left: 2px solid var(--accent); text-align: right; padding: 10px 12px !important;
  letter-spacing: 0.5px; font-size: 10px; color: var(--text-mute); z-index: 3;
}
.ln-matrix-row-total-cell {
  position: sticky; right: 0; background: var(--bg-2) !important;
  border-left: 2px solid var(--accent) !important; text-align: right; padding: 10px 12px !important;
  font-weight: 700; font-family: var(--mono); color: var(--text-dim); z-index: 1;
}
.ln-matrix-row-total-cell.pos { color: var(--accent); }
.ln-legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 10px 16px; background: var(--bg-2); border-top: 1px solid var(--line);
  font-size: 11px; color: var(--text-mute);
}
.ln-legend-item { display: flex; align-items: center; gap: 6px; }
.ln-legend-swatch {
  display: inline-block; width: 16px; height: 12px; border-radius: 2px; border: 1px solid var(--line);
}
.ln-pair-summary { display: flex; gap: 12px; margin-bottom: 4px; }
.ln-pair-stat {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
}
.ln-pair-stat-label {
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.ln-pair-stat-val { font-family: var(--mono); font-size: 18px; font-weight: 700; margin-top: 4px; }
.ln-pair-stat-val.pos { color: var(--accent); }
.ln-pair-stat-val.neg { color: var(--danger); }

/* ============================================================
   Withdrawal split modal (multi-bank payout)
   Shown when CS clicks 🔀 on a withdrawal row. Each row = one bank
   + amount. Sum bar reports gap vs the withdrawal total.
   Uses :has() to widen the modal card when this content is inside.
   ============================================================ */
.modal-card:has(.split-modal) { max-width: 760px; }

.split-modal {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%;
}
.split-summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 12px 16px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px;
}
.split-summary > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.split-summary .muted {
  color: var(--text-mute); font-size: 11px;
  font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
}
.split-summary strong { font-family: var(--mono); font-size: 16px; }
.split-rows { display: flex; flex-direction: column; gap: 8px; }
.split-rows-head {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.4fr 40px;
  gap: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-mute);
  padding: 0 4px 4px;
}
.split-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.4fr 40px;
  gap: 10px; align-items: center;
}
.split-row .split-amount { text-align: right; font-family: var(--mono); font-weight: 600; }
.split-row .split-del {
  padding: 0; width: 40px; height: 36px;
  font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.split-row .split-del:disabled { opacity: 0.3; cursor: not-allowed; }
.split-actions {
  display: flex; gap: 8px; padding: 4px 0;
  flex-wrap: wrap;
}
.split-total {
  padding: 14px 16px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--line); background: var(--bg-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.split-total strong { font-family: var(--mono); font-size: 15px; }
.split-total.ok    { border-color: rgba(74, 222, 128, 0.5); background: rgba(74, 222, 128, 0.10); color: rgb(120, 220, 150); }
.split-total.warn  { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.10); color: rgb(240, 190, 90); }
.split-total.bad   { border-color: rgba(239, 68, 68, 0.5);  background: rgba(239, 68, 68, 0.10);  color: rgb(240, 130, 130); }
.split-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 14px 0 0 0;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

/* Mobile — stack the row so bank / amount / note wrap cleanly */
@media (max-width: 720px) {
  .modal-card:has(.split-modal) { max-width: 96vw; }
  .split-rows-head { display: none; }
  .split-row {
    grid-template-columns: 1fr 40px;
    grid-template-rows: auto auto auto;
    row-gap: 4px;
  }
  .split-row .split-bank   { grid-column: 1 / 2; grid-row: 1; }
  .split-row .split-del    { grid-column: 2 / 3; grid-row: 1 / 4; align-self: start; }
  .split-row .split-amount { grid-column: 1 / 2; grid-row: 2; }
  .split-row .split-note   { grid-column: 1 / 2; grid-row: 3; }
  .split-row + .split-row  { padding-top: 8px; border-top: 1px dashed var(--line); }
}

/* SPLIT chip shown on withdrawal rows. Clickable → opens modal. */
.badge.badge-split {
  display: inline-block;
  padding: 2px 8px; margin-left: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--accent); background: rgba(212, 255, 58, 0.15);
  border: 1px solid rgba(212, 255, 58, 0.4); border-radius: 4px;
  cursor: pointer; font-family: var(--mono);
}
.badge.badge-split:hover { background: rgba(212, 255, 58, 0.25); }

/* ============================================================
   Bank Statement page
   ============================================================ */
.bs-controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px;
}
.bs-controls label { font-size: 11.5px; color: var(--text-mute); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.bs-controls .select, .bs-controls .input { min-width: 160px; }
.bs-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 16px;
}
.bs-kpi {
  padding: 14px 16px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px;
}
.bs-kpi-label { font-size: 11px; color: var(--text-mute); font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
.bs-kpi-value { font-size: 20px; font-weight: 700; font-family: var(--mono); margin-top: 4px; }
.bs-kpi.pos .bs-kpi-value { color: var(--accent); }
.bs-kpi.neg .bs-kpi-value { color: var(--danger); }
.bs-tbl .num { font-family: var(--mono); text-align: right; }
.bs-tbl tr.in-row  td.amt-in  { color: var(--accent); font-weight: 700; }
.bs-tbl tr.out-row td.amt-out { color: var(--danger); font-weight: 700; }

/* ============================================================================
   ═════════════════ AIRTABLE THEME — COMPREHENSIVE OVERRIDES ═════════════════
   Source: /root/design-md/design-md/airtable/DESIGN.md
   Design voice: sober editorial workflow software — white canvas, generous
   whitespace, near-black ink, hairline borders, Haas-style typography at
   modest weights (400 display, 500 sub-titles/buttons). No shadow theatre;
   depth comes from color contrast between white canvas and signature cards.
   All selectors are scoped `body.theme-airtable` so they override the
   `theme-notion` alias overrides (both classes are applied together).
   These rules are placed at the END of the stylesheet so they win by
   cascade order over any earlier same-specificity light-family rules.
   ========================================================================= */

/* ---------- Typography base ---------- */
body.theme-airtable {
  font-family: 'Inter Display', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
body[class*="theme-airtable"] h1, body[class*="theme-airtable"] h2, body[class*="theme-airtable"] h3,
body[class*="theme-airtable"] h4, body[class*="theme-airtable"] h5, body[class*="theme-airtable"] h6,
body[class*="theme-airtable"] .page-title, body[class*="theme-airtable"] .brand-title {
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ink);
}
body[class*="theme-airtable"] .page-title { font-size: 26px; line-height: 1.25; }
body[class*="theme-airtable"] .topbar-crumb, body[class*="theme-airtable"] .m-header-crumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Layout: topbar + sidebar ---------- */
body[class*="theme-airtable"] .topbar {
  height: 68px;
  padding: 0 32px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
}
body[class*="theme-airtable"] .sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
}
body[class*="theme-airtable"] .brand {
  padding: 6px 10px 20px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}
body[class*="theme-airtable"] .brand-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}
body[class*="theme-airtable"] .brand-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[class*="theme-airtable"] .nav-item {
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ink-mute);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 2px;
  border: 1px solid transparent;
}
body[class*="theme-airtable"] .nav-item i {
  color: var(--ink-faint);
  font-size: 15px;
  width: 20px;
  margin-right: 10px;
}
body[class*="theme-airtable"] .nav-item:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
body[class*="theme-airtable"] .nav-item.active {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--ink);
}
body[class*="theme-airtable"] .nav-item.active i { color: var(--accent-on); }
body[class*="theme-airtable"] .nav-badge {
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
body[class*="theme-airtable"] .nav-item.active .nav-badge {
  background: rgba(255,255,255,0.18);
  color: var(--accent-on);
}
body[class*="theme-airtable"] .sidebar-footer {
  border-top: 1px solid var(--line);
  padding: 14px 12px;
}
body[class*="theme-airtable"] .user-name { font-size: 14px; font-weight: 600; }
body[class*="theme-airtable"] .user-role { font-size: 11.5px; color: var(--ink-faint); }
body[class*="theme-airtable"] .logout-btn {
  background: transparent;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
}
body[class*="theme-airtable"] .logout-btn:hover { background: var(--bg-soft); }

/* ---------- Cards / panels ---------- */
body[class*="theme-airtable"] .view-container { padding: 28px 32px; }
body[class*="theme-airtable"] .panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
  padding: 24px 28px;
  margin-bottom: 24px;
}
body[class*="theme-airtable"] .panel-head {
  padding: 0 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
body[class*="theme-airtable"] .panel-title {
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body[class*="theme-airtable"] .panel-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
body[class*="theme-airtable"] .panel-grid { gap: 24px; }

/* ---------- Buttons ---------- */
body[class*="theme-airtable"] .btn {
  border-radius: 10px;
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  padding: 10px 18px;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
body[class*="theme-airtable"] .btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--ink);
}
body[class*="theme-airtable"] .btn-primary:hover { background: #0d1218; border-color: #0d1218; }
body[class*="theme-airtable"] .btn-primary:active { background: #000000; }
body[class*="theme-airtable"] .btn-secondary,
body[class*="theme-airtable"] .btn-ghost {
  background: var(--bg-panel);
  color: var(--ink);
  border-color: var(--line);
}
body[class*="theme-airtable"] .btn-secondary:hover,
body[class*="theme-airtable"] .btn-ghost:hover {
  background: var(--bg-soft);
  border-color: var(--border);
}
body[class*="theme-airtable"] .btn-danger {
  background: var(--bg-panel);
  color: #aa2d00;
  border-color: rgba(170, 45, 0, 0.35);
}
body[class*="theme-airtable"] .btn-danger:hover {
  background: rgba(170, 45, 0, 0.08);
  border-color: #aa2d00;
}
body[class*="theme-airtable"] .btn-sm {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 8px;
}

/* ---------- Tables ---------- */
body[class*="theme-airtable"] .tbl {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-panel);
}
body[class*="theme-airtable"] .tbl thead th {
  background: var(--bg-soft);
  color: var(--ink-mute);
  font-family: 'Inter Display', Inter, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
body[class*="theme-airtable"] .tbl tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--ink);
  vertical-align: middle;
}
body[class*="theme-airtable"] .tbl tbody tr:last-child td { border-bottom: none; }
body[class*="theme-airtable"] .tbl tbody tr:hover { background: var(--bg-soft); }
body[class*="theme-airtable"] .tbl .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-align: right;
}
body[class*="theme-airtable"] .tbl .num.pos { color: #0a2e0e; font-weight: 600; }
body[class*="theme-airtable"] .tbl .num.neg { color: #aa2d00; font-weight: 600; }
body[class*="theme-airtable"] .day-summary {
  background: var(--bg-soft);
  padding: 14px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body[class*="theme-airtable"] .day-summary strong { color: var(--ink); font-weight: 600; }

/* Pager buttons */
body[class*="theme-airtable"] .tx-pager { padding-top: 16px; }
body[class*="theme-airtable"] .tx-pager-btn {
  background: var(--bg-panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 500;
  font-size: 13px;
}
body[class*="theme-airtable"] .tx-pager-btn:hover { background: var(--bg-soft); }
body[class*="theme-airtable"] .tx-pager-btn.active {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--ink);
}
body[class*="theme-airtable"] .tx-pager-info { color: var(--ink-faint); font-size: 12px; }

/* ---------- Badges / pills ---------- */
body[class*="theme-airtable"] .badge, body[class*="theme-airtable"] .pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
body[class*="theme-airtable"] .badge.success, body[class*="theme-airtable"] .pill.success,
body[class*="theme-airtable"] .badge.active,  body[class*="theme-airtable"] .pill.active {
  background: rgba(0, 100, 0, 0.10);
  color: #006400;
  border-color: rgba(0, 100, 0, 0.25);
}
body[class*="theme-airtable"] .badge.danger, body[class*="theme-airtable"] .pill.danger,
body[class*="theme-airtable"] .badge.failed, body[class*="theme-airtable"] .pill.failed {
  background: rgba(170, 45, 0, 0.10);
  color: #aa2d00;
  border-color: rgba(170, 45, 0, 0.30);
}
body[class*="theme-airtable"] .badge.warn, body[class*="theme-airtable"] .pill.warn {
  background: rgba(217, 164, 65, 0.16);
  color: #8a5a20;
  border-color: rgba(217, 164, 65, 0.45);
}
body[class*="theme-airtable"] .badge.info, body[class*="theme-airtable"] .pill.info,
body[class*="theme-airtable"] .badge.pending, body[class*="theme-airtable"] .pill.pending {
  background: rgba(37, 79, 173, 0.10);
  color: #254fad;
  border-color: rgba(37, 79, 173, 0.28);
}
body[class*="theme-airtable"] .badge.mute, body[class*="theme-airtable"] .pill.mute,
body[class*="theme-airtable"] .pill.inactive {
  background: var(--bg-soft);
  color: var(--ink-mute);
  border-color: var(--line);
}
body[class*="theme-airtable"] .badge-split {
  background: rgba(37, 79, 173, 0.10);
  color: #254fad;
  border-color: rgba(37, 79, 173, 0.28);
}

/* ---------- Inputs ---------- */
body[class*="theme-airtable"] .input, body[class*="theme-airtable"] .select,
body[class*="theme-airtable"] input[type="text"], body[class*="theme-airtable"] input[type="number"],
body[class*="theme-airtable"] input[type="date"], body[class*="theme-airtable"] input[type="search"],
body[class*="theme-airtable"] input[type="password"], body[class*="theme-airtable"] textarea,
body[class*="theme-airtable"] select {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  height: 40px;
  line-height: 1.4;
  box-shadow: none;
}
body[class*="theme-airtable"] textarea { height: auto; min-height: 80px; padding: 10px 12px; }
body[class*="theme-airtable"] .input:focus, body[class*="theme-airtable"] .select:focus,
body[class*="theme-airtable"] input:focus, body[class*="theme-airtable"] textarea:focus,
body[class*="theme-airtable"] select:focus {
  border-color: #458fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(69, 143, 255, 0.20);
}

/* ---------- KPI cards (Dashboard) ---------- */
body[class*="theme-airtable"] .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
body[class*="theme-airtable"] .kpi {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
body[class*="theme-airtable"] .kpi::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--line);
  transition: background 200ms ease;
}
body[class*="theme-airtable"] .kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
body[class*="theme-airtable"] .kpi-value {
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
body[class*="theme-airtable"] .kpi-sub {
  font-size: 12.5px;
  color: var(--ink-mute);
  font-weight: 500;
}
/* Signature accent stripe per KPI type */
body[class*="theme-airtable"] .kpi.kpi-success::before { background: #0a2e0e; }
body[class*="theme-airtable"] .kpi.kpi-danger::before  { background: #aa2d00; }
body[class*="theme-airtable"] .kpi.kpi-accent::before  { background: var(--accent); }
body[class*="theme-airtable"] .kpi.kpi-info::before    { background: #254fad; }
body[class*="theme-airtable"] .kpi.kpi-warn::before    { background: #d9a441; }
body[class*="theme-airtable"] .kpi.kpi-success .kpi-value { color: #0a2e0e; }
body[class*="theme-airtable"] .kpi.kpi-danger  .kpi-value { color: #aa2d00; }
body[class*="theme-airtable"] .kpi.kpi-info    .kpi-value { color: #254fad; }

/* ---------- Modal ---------- */
body[class*="theme-airtable"] .modal-backdrop { background: rgba(24, 29, 38, 0.35); backdrop-filter: blur(3px); }
body[class*="theme-airtable"] .modal-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(24,29,38,.06), 0 24px 60px rgba(24,29,38,.14);
}
body[class*="theme-airtable"] .modal-head {
  padding: 22px 28px;
  border-bottom: 1px solid var(--line-soft);
}
body[class*="theme-airtable"] .modal-head h3 {
  font-family: 'Inter Display', Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
body[class*="theme-airtable"] .modal-body { padding: 24px 28px; }
body[class*="theme-airtable"] .modal-close { color: var(--ink-faint); }
body[class*="theme-airtable"] .modal-close:hover { background: var(--bg-soft); color: var(--ink); }

/* ---------- Bank Statement / Bank Status specific polish ---------- */
body[class*="theme-airtable"] .bs-controls, body[class*="theme-airtable"] .bs-kpi {
  background: var(--bg-panel);
  border-color: var(--line);
  border-radius: 12px;
}
body[class*="theme-airtable"] .bs-kpi-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-faint);
}
body[class*="theme-airtable"] .bs-kpi-value {
  font-family: 'Inter Display', Inter, sans-serif;
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.02em;
}
body[class*="theme-airtable"] .bs-kpi.pos .bs-kpi-value { color: #0a2e0e; }
body[class*="theme-airtable"] .bs-kpi.neg .bs-kpi-value { color: #aa2d00; }

/* ---------- Live indicator + server time ---------- */
body[class*="theme-airtable"] .live-indicator,
body[class*="theme-airtable"] .last-reconcile,
body[class*="theme-airtable"] .server-time {
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
}
body[class*="theme-airtable"] .theme-toggle {
  border: 1px solid var(--line);
  background: var(--bg-panel);
}

/* ---------- Split modal already styled generically; airtable polish ---------- */
body[class*="theme-airtable"] .split-summary { background: var(--bg-soft); }
body[class*="theme-airtable"] .split-total.ok    { background: rgba(0, 100, 0, 0.06);   color: #006400; border-color: rgba(0, 100, 0, 0.35); }
body[class*="theme-airtable"] .split-total.warn  { background: rgba(217,164,65, 0.10);  color: #8a5a20; border-color: rgba(217,164,65, 0.50); }
body[class*="theme-airtable"] .split-total.bad   { background: rgba(170, 45, 0, 0.08);  color: #aa2d00; border-color: rgba(170, 45, 0, 0.40); }

/* ---------- Bigger, more readable text sitewide ---------- */
body[class*="theme-airtable"] .muted { font-size: 12.5px; color: var(--ink-mute); }
body[class*="theme-airtable"] .mono, body[class*="theme-airtable"] .input.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
}
body[class*="theme-airtable"] .empty-state {
  color: var(--ink-faint);
  padding: 40px 20px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Airtable — Dashboard trend chart polish */
body[class*="theme-airtable"] .trend-panel { padding: 24px 28px 20px; }
body[class*="theme-airtable"] .trend-panel .panel-head {
  border-bottom: none;
  padding: 0 0 8px;
  margin-bottom: 0;
}
body[class*="theme-airtable"] .trend-panel .panel-title { font-size: 20px; }
body[class*="theme-airtable"] .trend-panel .panel-meta {
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
body[class*="theme-airtable"] .trend-wrap {
  padding: 8px 4px 0;
  scrollbar-color: var(--line) transparent;
}
body[class*="theme-airtable"] .trend-wrap::-webkit-scrollbar { height: 8px; }
body[class*="theme-airtable"] .trend-wrap::-webkit-scrollbar-track { background: transparent; }
body[class*="theme-airtable"] .trend-wrap::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 8px;
}

/* ============================================================================
   AIRTABLE — LAYOUT TIGHTENING
   Fixes: uneven KPI grid (7 items → 4+3 with orphan gap), over-generous
   panel padding, panel-grid ratio squishing the right pane, table cells
   too breezy on wider screens.
   ========================================================================= */

/* KPI grid — force exactly 4 columns on desktop so 7 items lay out as 4+3
   without a stretched last row. Below 1200px collapses to 3, 2, 1. */
body[class*="theme-airtable"] .kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1200px) {
  body[class*="theme-airtable"] .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body[class*="theme-airtable"] .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body[class*="theme-airtable"] .kpi-grid { grid-template-columns: 1fr; }
}
body[class*="theme-airtable"] .kpi { padding: 18px 20px; gap: 4px; }
body[class*="theme-airtable"] .kpi-value { font-size: 28px; }
body[class*="theme-airtable"] .kpi-sub { font-size: 12px; }

/* Panel grid — even columns instead of 2:1 (which squished the right table) */
body[class*="theme-airtable"] .panel-grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) {
  body[class*="theme-airtable"] .panel-grid { grid-template-columns: 1fr; }
}

/* Panel body — tighter, less air */
body[class*="theme-airtable"] .panel { padding: 20px 22px; margin-bottom: 16px; }
body[class*="theme-airtable"] .panel-head { padding-bottom: 14px; margin-bottom: 14px; }
body[class*="theme-airtable"] .view-container { padding: 22px 26px; }

/* Table cells — reduce breathing to look like Airtable's actual grid density */
body[class*="theme-airtable"] .tbl thead th {
  padding: 10px 12px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}
body[class*="theme-airtable"] .tbl tbody td { padding: 10px 12px; font-size: 13px; }
body[class*="theme-airtable"] .tbl tfoot td { padding: 10px 12px; font-size: 13px; }

/* Right-align numeric columns aggressively and give them tabular-nums so the
   money columns line up decimal-by-decimal. Airtable's own grid does this. */
body[class*="theme-airtable"] .tbl th.num,
body[class*="theme-airtable"] .tbl td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}
/* Force first column (usually a name) to shrink less than numeric columns */
body[class*="theme-airtable"] .tbl thead th:first-child,
body[class*="theme-airtable"] .tbl tbody td:first-child { width: auto; }
body[class*="theme-airtable"] .tbl thead th.num,
body[class*="theme-airtable"] .tbl tbody td.num { width: 1%; }

/* Dashboard "By Company" totals row — align labels with body cells */
body[class*="theme-airtable"] .dash-total-row td {
  padding: 12px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}
body[class*="theme-airtable"] .dash-total-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
body[class*="theme-airtable"] .dash-total-sub {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
  font-weight: 500;
}
body[class*="theme-airtable"] .dash-total-wl {
  font-family: 'Inter Display', Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
}
body[class*="theme-airtable"] .dash-total-wl.pos { color: #0f9d6c; }
body[class*="theme-airtable"] .dash-total-wl.neg { color: #d64a20; }
body[class*="theme-airtable"] .dash-total-pct {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Inline "10px muted" sub-labels inside table cells — bump for readability */
body[class*="theme-airtable"] .tbl td div[style*="font-size:10px"] {
  font-size: 11px !important;
  color: var(--ink-faint) !important;
  margin-top: 2px;
}

/* Empty-state / loading blocks — less padding, cleaner */
body[class*="theme-airtable"] .empty-state {
  padding: 28px 20px;
  font-size: 13px;
}

/* Trend panel — a little tighter now that layout is denser */
body[class*="theme-airtable"] .trend-panel { padding: 18px 22px 16px; margin-bottom: 16px; }
body[class*="theme-airtable"] .trend-panel .panel-title { font-size: 18px; }

/* Day summary bar (Deposits/Withdrawals list header) — cleaner rhythm */
body[class*="theme-airtable"] .day-summary { padding: 10px 16px; font-size: 12.5px; }

/* Pager — pull closer to the table above it */
body[class*="theme-airtable"] .tx-pager { padding-top: 10px; gap: 4px; }

/* Bank-summary strip on Deposits/Withdrawals — align with panel padding */
body[class*="theme-airtable"] [id^="bb-strip-"] { margin-bottom: 12px; }

/* ============================================================================
   AIRTABLE — SIDEBAR NAV UNIFICATION
   The mixed-family unicode icons (▦ ↓ ↑ ! ▢ ◐ ≣ ✓ ⇄ ⇆ ✗ ⟲ ≡ ◈ $ ⚡ ✦ ◉ ⚙)
   render at wildly different weights and widths — no font can normalize them.
   Airtable's own product sidebar goes iconless; text alone is enough for a
   short vocabulary. Active state gets a single 3px accent bar on the left as
   the only visual language.
   ========================================================================= */

/* Hide the varied unicode "icons" — they were the problem */
body[class*="theme-airtable"] .nav-item i,
body[class*="theme-airtable"] .nav-item > i:first-child {
  display: none;
}

/* Base row — uniform padding, weight, and spacing across every item */
body[class*="theme-airtable"] .nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px 9px 20px;
  border-radius: 8px;
  color: var(--ink-mute);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin-bottom: 1px;
  border: 1px solid transparent;
  position: relative;
  transition: background 120ms, color 120ms;
}

body[class*="theme-airtable"] .nav-item:hover {
  background: var(--bg-soft);
  color: var(--ink);
}

/* Active row — 3px black bar on the left as the only "symbol", subtle bg */
body[class*="theme-airtable"] .nav-item.active {
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 600;
  border-color: transparent;
}
body[class*="theme-airtable"] .nav-item.active::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px;
}

/* Nav badge — align to the right consistently, don't push the label */
body[class*="theme-airtable"] .nav-badge {
  flex-shrink: 0;
  margin-left: auto;
  background: rgba(170, 45, 0, 0.10);
  color: #aa2d00;
  border: 1px solid rgba(170, 45, 0, 0.25);
  font-family: 'Inter Display', Inter, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
body[class*="theme-airtable"] .nav-item.active .nav-badge {
  background: var(--bg-panel);
  color: var(--ink);
  border-color: var(--line);
}
body[class*="theme-airtable"] .nav-badge-warn {
  background: rgba(217, 164, 65, 0.14);
  color: #8a5a20;
  border-color: rgba(217, 164, 65, 0.40);
}

/* Brand block — quieter, matches the reduced iconography */
body[class*="theme-airtable"] .brand {
  padding: 6px 16px 20px;
  gap: 10px;
}
body[class*="theme-airtable"] .brand-mark { display: none; }  /* was a diamond glyph — also inconsistent */

/* Sidebar overall — a touch narrower now that there's no icon column */
body[class*="theme-airtable"] .sidebar { padding: 18px 10px; }

/* ============================================================================
   AIRTABLE — TOPBAR RIGHT CLUSTER + DASHBOARD BY-COMPANY TABLES
   1. Every pill on the topbar (region · reconcile · live · time · theme)
      is the same height, same border-radius, same font — one visual unit.
   2. The By Company panels shrink their panel-head gap and force numeric
      column widths so the money lines up regardless of row content height.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   Topbar right cluster
   ------------------------------------------------------------------------- */
body[class*="theme-airtable"] .topbar-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* One universal pill baseline for every topbar chip */
body[class*="theme-airtable"] .topbar-meta > *,
body[class*="theme-airtable"] .tenant-switcher,
body[class*="theme-airtable"] #region-switcher,
body[class*="theme-airtable"] .last-reconcile,
body[class*="theme-airtable"] .live-indicator,
body[class*="theme-airtable"] .server-time {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--ink-mute);
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Region selector — label + select in one pill */
body[class*="theme-airtable"] #region-switcher { padding: 0 4px 0 12px; gap: 8px; }
body[class*="theme-airtable"] .tenant-switcher-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
body[class*="theme-airtable"] #region-switcher .select,
body[class*="theme-airtable"] .tenant-switcher .select {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  min-width: 120px;
}

/* Reconcile chip — small caps label + timestamp */
body[class*="theme-airtable"] .last-reconcile {
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
body[class*="theme-airtable"] .last-reconcile::before {
  content: "RECONCILE";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--ink-faint);
}
body[class*="theme-airtable"] .last-reconcile > * { color: var(--ink); font-size: 12px; }

/* Live status chip */
body[class*="theme-airtable"] .live-indicator {
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[class*="theme-airtable"] .live-indicator.live-on {
  color: #0f9d6c;
  border-color: rgba(15, 157, 108, 0.35);
  background: rgba(15, 157, 108, 0.06);
}
body[class*="theme-airtable"] .live-indicator.live-off,
body[class*="theme-airtable"] .live-indicator.live-paused {
  color: var(--ink-faint);
}
body[class*="theme-airtable"] .live-indicator.live-err {
  color: #d64a20;
  border-color: rgba(214, 74, 32, 0.35);
  background: rgba(214, 74, 32, 0.06);
}

/* Server clock — mono numbers */
body[class*="theme-airtable"] .server-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Theme toggle sun/moon — same height, square instead of pill */
body[class*="theme-airtable"] .theme-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[class*="theme-airtable"] .theme-toggle-icon { font-size: 14px; }

/* Language switch (EN/中文) — same visual family */
body[class*="theme-airtable"] .lang-switch,
body[class*="theme-airtable"] [id^="lang-"] { height: 28px; font-size: 12px; }

/* ----------------------------------------------------------------------------
   Dashboard: By Company (Today) + Pick Date panels
   ------------------------------------------------------------------------- */
body[class*="theme-airtable"] .panel-grid .panel { padding: 18px 20px; }

/* Panel head — tighter gap before the table starts */
body[class*="theme-airtable"] .panel-grid .panel-head {
  padding: 0 0 12px;
  margin-bottom: 12px;
}
body[class*="theme-airtable"] .panel-grid .panel-title { font-size: 15px; }
body[class*="theme-airtable"] .panel-grid .panel-meta {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
body[class*="theme-airtable"] .panel-grid .panel-head input[type="date"] {
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
}

/* By-Company table — fixed column widths so money always aligns */
body[class*="theme-airtable"] .panel-grid .tbl { table-layout: fixed; }
body[class*="theme-airtable"] .panel-grid .tbl thead th:nth-child(1),
body[class*="theme-airtable"] .panel-grid .tbl tbody td:nth-child(1) { width: 34%; }
body[class*="theme-airtable"] .panel-grid .tbl thead th:nth-child(2),
body[class*="theme-airtable"] .panel-grid .tbl tbody td:nth-child(2),
body[class*="theme-airtable"] .panel-grid .tbl thead th:nth-child(3),
body[class*="theme-airtable"] .panel-grid .tbl tbody td:nth-child(3) { width: 24%; }
body[class*="theme-airtable"] .panel-grid .tbl thead th:nth-child(4),
body[class*="theme-airtable"] .panel-grid .tbl tbody td:nth-child(4) { width: 18%; }

/* Row layout — money on top line, tickets caption below in the same cell.
   Keeps row heights consistent whether the cell has a sub-line or not. */
body[class*="theme-airtable"] .panel-grid .tbl tbody td {
  padding: 9px 12px;
  vertical-align: middle;
  font-size: 13px;
}
body[class*="theme-airtable"] .panel-grid .tbl tbody td strong { font-weight: 600; }
body[class*="theme-airtable"] .panel-grid .tbl tbody td div:first-child {
  line-height: 1.35;
}
body[class*="theme-airtable"] .panel-grid .tbl tbody td div[style*="font-size:10px"] {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: var(--ink-faint) !important;
  margin-top: 1px;
  letter-spacing: 0.02em;
}

/* Company code + full-name stacked cell */
body[class*="theme-airtable"] .panel-grid .tbl tbody td:first-child strong {
  font-family: 'Inter Display', Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}
body[class*="theme-airtable"] .panel-grid .tbl tbody td:first-child div {
  font-size: 10.5px !important;
  color: var(--ink-faint) !important;
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Totals footer row — subtle gray band, not a heavy re-emphasis */
body[class*="theme-airtable"] .panel-grid .dash-total-row td {
  padding: 12px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: none;
}
body[class*="theme-airtable"] .panel-grid .dash-total-row strong { font-weight: 600; }

/* ============================================================
   Theme: Airtable · Dark variant
   Same layout as Airtable Light (shared via [class*="theme-airtable"])
   just inverted color tokens. Sun/moon toggle in top-bar swaps between
   the two so structure/spacing/typography stay identical.
   ============================================================ */
body.theme-airtable-dark {
  --bg: #0d1116;
  --bg-1: #16191f;
  --bg-2: #1a1e26;
  --bg-3: #22262e;
  --bg-panel: #16191f;
  --bg-soft: #1e222b;
  --line: #262c36;
  --line-soft: #1e222a;
  --border: #313847;
  --text: #eaecef;
  --text-mute: #b0b6c0;
  --text-dim: #7c8290;
  --ink: #eaecef;
  --ink-mute: #b0b6c0;
  --ink-faint: #7c8290;
  --accent: #eaecef;
  --accent-dim: #ffffff;
  --accent-soft: rgba(234, 236, 239, 0.10);
  --accent-on: #0d1116;
  --primary: #eaecef;
  --primary-text: #0d1116;
  --success: #39bf45;
  --success-bg: rgba(57, 191, 69, 0.14);
  --danger: #f97561;
  --danger-bg: rgba(249, 117, 97, 0.14);
  --warn: #f4d35e;
  --warn-bg: rgba(244, 211, 94, 0.14);
  --info: #6a95ff;
  --info-bg: rgba(106, 149, 255, 0.14);
  --grid-line: #262c36;
  --shadow-card: 0 1px 2px rgba(0,0,0,.35);
  --shadow-pop:  0 1px 3px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.5);
  --shadow-glow: 0 0 0 3px rgba(106, 149, 255, 0.28);
  --color-scheme: dark;
  background: #0d1116;
  background-image: none;
  color: var(--ink);
}

/* Sun/moon icon swap for airtable-dark (dark family → show sun to switch back) */
body.theme-airtable-dark .theme-toggle-sun  { transform: translateY(120%); opacity: 0; }
body.theme-airtable-dark .theme-toggle-moon { transform: translateY(0);    opacity: 1; color: #a0a6b0; }
body.theme-airtable .theme-toggle-sun       { transform: translateY(0);    opacity: 1; color: #f5a623; }
body.theme-airtable .theme-toggle-moon      { transform: translateY(-120%); opacity: 0; }

/* Numeric column colors — light/dark variant tuning */
body.theme-airtable .tbl .num.pos, body.theme-airtable-dark .tbl .num.pos { color: #0f9d6c; }
body.theme-airtable .tbl .num.neg, body.theme-airtable-dark .tbl .num.neg { color: #d64a20; }
body.theme-airtable-dark .tbl .num.pos { color: #4ade80; }  /* lighter green for dark bg */
body.theme-airtable-dark .tbl .num.neg { color: #ff8161; }
body.theme-airtable-dark .kpi.kpi-success .kpi-value { color: #4ade80; }
body.theme-airtable-dark .kpi.kpi-danger  .kpi-value { color: #ff8161; }
body.theme-airtable-dark .kpi.kpi-info    .kpi-value { color: #6a95ff; }

/* Modal backdrop — subtle for dark */
body.theme-airtable-dark .modal-backdrop { background: rgba(0, 0, 0, 0.55); }

/* ============================================================================
   Bank cell + Split button — placed inline with the Assigned Bank dropdown
   so CS sees the split action right next to the bank selector (that's the
   logical "pick banks" spot). Applies to all themes.
   ========================================================================= */
.rc-bank-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.rc-bank-cell .select,
.rc-bank-cell .rc-bank-sel { flex: 1 1 auto; min-width: 0; }
.rc-split-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Status cell — flex so multiple badges (⚙ PROCESSING + ⚠ STALE + SPLIT)
   line up in a single row with consistent gap. Prevents the older
   inconsistent look where each badge stacked or jittered based on width. */
.rc-status-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 26px;
}

/* Actions cell — fixed min-width so every row's action column starts at the
   same x-coordinate regardless of button count (Confirm alone vs
   Confirm + Override + Borrow). Flex row keeps buttons on one line with a
   consistent 6px gap. */
.rc-actions-cell { min-width: 300px; white-space: nowrap; }
.rc-actions-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.rc-actions-row .btn { flex: 0 0 auto; }

/* Airtable theme — tighten the split button to sit as a text pill next to
   the bank dropdown, sharing the same 40px control height. */
body[class*="theme-airtable"] .rc-bank-cell { gap: 6px; }
body[class*="theme-airtable"] .rc-split-btn {
  padding: 0 12px;
  height: 32px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--ink);
}
body[class*="theme-airtable"] .rc-split-btn:hover {
  background: var(--bg-soft);
  border-color: var(--border);
}

/* Pager buttons — unambiguously clickable across all themes.
   Explicit pointer-events + z-index so no accidental overlay blocks clicks. */
.tx-pager-btn:not(:disabled) {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}
.tx-pager-btn:not(:disabled):active { transform: translateY(1px); }

/* ⚡ Current-receiving bank flag — visible on Banks page. Only one bank per
   (company, upstream_name) group can be ON at a time. */
.bank-card.is-receiving {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 255, 214, 0), 0.14);
}
.bank-current-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--accent);
  color: var(--bg-panel);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  z-index: 2;
}
.btn-current-on {
  background: var(--accent) !important;
  color: var(--bg-panel) !important;
  border-color: var(--accent) !important;
  font-weight: 700;
}
.btn-current-off {
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  color: var(--text-dim);
}
.btn-current-off:hover {
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
}

/* ============================================================
   PROFESSIONAL v2 THEME · staging preview
   Data-Dense Dashboard × Financial Dashboard hybrid
   Slate + Emerald + JetBrains Mono for numbers
   ============================================================ */

/* Inter loaded via <link> in index.html; declared here for CSS-only reference */
body.theme-pro-dark, body.theme-pro-light {
  --sans: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --row-height: 36px;
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --card-pad: 12px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
}

body.theme-pro-dark {
  --bg: #020617;
  --bg-1: #0E1223;
  --bg-2: #1A1E2F;
  --bg-3: #1E293B;
  --bg-panel: #0E1223;
  --bg-soft: #1A1E2F;
  --line: #1E293B;
  --line-soft: #172033;
  --border: #334155;
  --text: #F8FAFC;
  --text-mute: #94A3B8;
  --text-dim: #64748B;
  --ink: #F8FAFC;
  --ink-mute: #94A3B8;
  --ink-faint: #64748B;
  --accent: #22C55E;
  --accent-dim: #15803D;
  --accent-soft: rgba(34, 197, 94, 0.12);
  --accent-on: #020617;
  --primary: #0F172A;
  --primary-text: #F8FAFC;
  --success: #22C55E;
  --success-bg: rgba(34, 197, 94, 0.14);
  --danger: #EF4444;
  --danger-bg: rgba(239, 68, 68, 0.14);
  --warn: #F59E0B;
  --warn-bg: rgba(245, 158, 11, 0.14);
  --info: #3B82F6;
  --info-bg: rgba(59, 130, 246, 0.14);
  --grid-line: #172033;
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.28);
  --shadow-pop:  0 4px 12px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.40);
  --shadow-glow: 0 0 0 1px rgba(34,197,94,.14), 0 0 24px rgba(34,197,94,.10);
  --color-scheme: dark;
}

body.theme-pro-light {
  --bg: #F8FAFC;
  --bg-1: #FFFFFF;
  --bg-2: #F1F5F9;
  --bg-3: #E2E8F0;
  --bg-panel: #FFFFFF;
  --bg-soft: #F1F5F9;
  --line: #E2E8F0;
  --line-soft: #F1F5F9;
  --border: #CBD5E1;
  --text: #0F172A;
  --text-mute: #475569;
  --text-dim: #64748B;
  --ink: #0F172A;
  --ink-mute: #475569;
  --ink-faint: #64748B;
  --accent: #15803D;
  --accent-dim: #14532D;
  --accent-soft: rgba(21, 128, 61, 0.10);
  --accent-on: #FFFFFF;
  --primary: #0F172A;
  --primary-text: #FFFFFF;
  --success: #15803D;
  --success-bg: rgba(21, 128, 61, 0.10);
  --danger: #B91C1C;
  --danger-bg: rgba(185, 28, 28, 0.10);
  --warn: #B45309;
  --warn-bg: rgba(180, 83, 9, 0.10);
  --info: #1D4ED8;
  --info-bg: rgba(29, 78, 216, 0.10);
  --grid-line: #E2E8F0;
  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.06);
  --shadow-pop:  0 4px 12px rgba(15,23,42,.10), 0 20px 48px rgba(15,23,42,.14);
  --shadow-glow: 0 0 0 1px rgba(21,128,61,.14), 0 0 20px rgba(21,128,61,.10);
  --color-scheme: light;
}

/* Force tabular figures on numeric cells + monospaced data columns */
body.theme-pro-dark .num,
body.theme-pro-light .num,
body.theme-pro-dark td.num,
body.theme-pro-light td.num,
body.theme-pro-dark .mono,
body.theme-pro-light .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Row height + minimal padding for tables */
body.theme-pro-dark .tbl td,
body.theme-pro-dark .tbl th,
body.theme-pro-light .tbl td,
body.theme-pro-light .tbl th {
  height: var(--row-height);
  padding: 6px var(--space-md);
  font-size: var(--font-size-sm);
}

body.theme-pro-dark .tbl thead th,
body.theme-pro-light .tbl thead th {
  background: var(--bg-2);
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
}

/* Sidebar icons — inline SVG · slate stroke · consistent 18px */
body.theme-pro-dark .nav-item i, body.theme-pro-light .nav-item i,
body.theme-pro-dark .nav-item svg, body.theme-pro-light .nav-item svg {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  flex-shrink: 0;
}
body.theme-pro-dark .nav-item.active i, body.theme-pro-light .nav-item.active i,
body.theme-pro-dark .nav-item.active svg, body.theme-pro-light .nav-item.active svg {
  color: var(--accent);
}

/* Micro-interactions · low motion */
body.theme-pro-dark *, body.theme-pro-light * {
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  body.theme-pro-dark *, body.theme-pro-light * { transition: none !important; }
}

/* ============================================================
   Phase 1 Fix · un-scoped sidebar SVG + bumped font sizes
   ============================================================ */

/* Sidebar SVG icons — applies for ALL themes so users with old bo_theme
   still see them correctly. Overrides browser default fill (black) so
   the outlined stroke actually shows. */
.nav-item i,
.nav-item svg,
.m-sheet-item i,
.m-sheet-item svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  vertical-align: middle;
}
.nav-item svg path,
.m-sheet-item svg path {
  fill: none;
  stroke: currentColor;
}
.nav-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 8px 12px;
  min-height: 34px;
}
.nav-item.active svg { color: var(--accent); }

/* Bump readable font sizes — user said current 12px is too small. */
.tbl { font-size: 13px !important; }
.tbl th { font-size: 11px !important; letter-spacing: 0.06em; }
.tbl td { font-size: 13px !important; }
.tbl td.num, .tbl th.num { font-variant-numeric: tabular-nums; }
.panel-meta, .muted { font-size: 12px; }
.bank-card-name { font-size: 14px !important; }
.bank-card-balance { font-size: 20px !important; font-weight: 700; }


/* ============================================================
   PHASE 2 · LINEAR DESIGN SYSTEM · Rollout
   Based on approved mockup at /mockups/*
   Overrides ALL prior theme styles when loaded last.
   Uses scope to keep other themes intact.
   ============================================================ */

body {
  --bg:            #08090A;
  --bg-1:          #0F1013;
  --bg-2:          #16171B;
  --bg-3:          #1F2126;
  --bg-panel:      #0F1013;
  --bg-panel-alt:  #16171B;
  --bg-soft:       #16171B;
  --bg-hover:      rgba(255,255,255,0.03);
  --line:          rgba(255,255,255,0.06);
  --line-soft:     rgba(255,255,255,0.04);
  --border:        rgba(255,255,255,0.10);
  --text:          #F7F8F8;
  --text-mute:     #8A8F98;
  --text-dim:      #62666D;
  --ink:           #F7F8F8;
  --ink-mute:      #8A8F98;
  --ink-faint:     #62666D;
  --accent:        #5E6AD2;
  --accent-strong: #7B87E8;
  --accent-soft:   rgba(94,106,210,0.12);
  --success:       #4CB782;
  --success-bg:    rgba(76,183,130,0.12);
  --danger:        #E5484D;
  --danger-bg:     rgba(229,72,77,0.12);
  --warn:          #E5A73C;
  --warn-bg:       rgba(229,167,60,0.12);
  --info:          #4CADE9;
  --info-bg:       rgba(76,173,233,0.12);
  --shadow-card:   none;
  --shadow-pop:    0 20px 40px -12px rgba(0,0,0,0.30);
}

/* ============ SIDEBAR (Linear) ============ */
.sidebar {
  background: var(--bg) !important;
  border-right: 1px solid var(--line) !important;
  padding: 16px 12px !important;
}
.brand {
  padding: 4px 8px 20px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 16px !important;
  gap: 10px !important;
}
.brand-mark {
  width: 28px; height: 28px;
  border-radius: 7px !important;
  background: linear-gradient(135deg, var(--accent), #4C58C4) !important;
  display: grid !important; place-items: center !important;
  color: white !important;
  font-weight: 700 !important; font-size: 14px !important;
  box-shadow: 0 0 0 1px rgba(94,106,210,0.3) !important;
  text-shadow: none !important;
}
.brand-title {
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: -0.1px !important;
}
.brand-sub {
  font-size: 11px !important; color: var(--text-mute) !important;
  letter-spacing: 0.02em !important;
}
.nav {
  padding: 8px 0 !important;
  gap: 1px !important;
}
.nav-section-label {
  padding: 12px 10px 6px !important;
  font-size: 11px !important; font-weight: 500 !important;
  color: var(--text-dim) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.nav-item {
  display: flex !important; align-items: center !important;
  gap: 10px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  color: var(--text-mute) !important;
  font-size: 13px !important; font-weight: 500 !important;
  background: transparent !important;
  min-height: 30px !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.nav-item svg {
  width: 16px !important; height: 16px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  fill: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.nav-item svg path { stroke: currentColor; fill: none; }
.nav-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}
.nav-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
}
.nav-item.active svg { color: var(--accent-strong) !important; }
.nav-item.active::before { display: none !important; }
.nav-badge {
  background: var(--bg-panel-alt) !important;
  color: var(--text-mute) !important;
  border: 1px solid var(--line) !important;
  font-size: 10px !important; font-weight: 500 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  animation: none !important;
  min-width: 0 !important;
}
.nav-badge-warn {
  background: var(--warn-bg) !important;
  color: var(--warn) !important;
  border-color: transparent !important;
}

.sidebar-footer {
  padding: 12px 8px 0 !important;
  border-top: 1px solid var(--line) !important;
}
.user-info {
  display: flex !important; align-items: center !important; gap: 10px !important;
}
.user-avatar {
  width: 28px !important; height: 28px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #4A5085, #6875C2) !important;
  color: white !important; font-weight: 600 !important; font-size: 11px !important;
}
.user-name { font-size: 12px !important; font-weight: 500 !important; color: var(--text) !important; }
.user-role { font-size: 10px !important; color: var(--text-dim) !important; }
.logout-btn {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--text-mute) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  border-radius: 5px !important;
}
.logout-btn:hover {
  background: var(--bg-hover) !important; color: var(--text) !important;
}

/* ============ TOPBAR ============ */
.topbar {
  background: rgba(8,9,10,0.7) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 24px !important;
  box-shadow: none !important;
}
.topbar-crumb {
  font-size: 15px !important; font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.2px !important;
}
.topbar-meta {
  font-size: 12px !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.live-indicator {
  background: var(--success-bg) !important;
  color: var(--success) !important;
  border: 1px solid rgba(76,183,130,0.28) !important;
  border-radius: 5px !important;
  padding: 4px 8px !important;
  font-size: 12px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  font-family: var(--mono) !important;
}
.tenant-switcher,
.theme-toggle {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  box-shadow: none !important;
  color: var(--text-mute) !important;
}
.tenant-switcher:hover,
.theme-toggle:hover {
  border-color: var(--border) !important;
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}
.last-reconcile {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
}

/* ============ KPI CARDS ============ */
.kpi-grid {
  gap: 12px !important;
  margin-bottom: 24px !important;
}
.kpi {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  transition: border-color 0.12s;
  box-shadow: none !important;
  background-image: none !important;
}
.kpi:hover {
  border-color: var(--border) !important;
  transform: none !important;
  box-shadow: none !important;
}
.kpi::after, .kpi::before { display: none !important; }
.kpi-label {
  font-size: 12px !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--sans) !important;
  opacity: 1 !important;
}
.kpi-value {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
  font-family: var(--sans) !important;
  text-shadow: none !important;
  color: var(--text) !important;
}
.kpi-sub {
  font-size: 12px !important;
  color: var(--text-mute) !important;
  margin-top: 6px !important;
  font-family: var(--sans) !important;
  opacity: 1 !important;
}
.kpi-success .kpi-value { color: var(--success) !important; }
.kpi-danger .kpi-value { color: var(--danger) !important; }
.kpi-warn .kpi-value { color: var(--warn) !important; }
.kpi-info .kpi-value { color: var(--info) !important; }
.kpi-accent .kpi-value { color: var(--accent-strong) !important; }

/* ============ PANELS ============ */
.panel {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
  background-image: none !important;
}
.panel::before, .panel::after { display: none !important; }
.panel-head {
  padding: 16px 18px 14px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.panel-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.1px !important;
}
.panel-meta {
  font-size: 12px !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: var(--sans) !important;
}
.panel > .tbl,
.panel > table.tbl { margin-bottom: 0 !important; }

/* Panel body wrapper for content that needs padding — apply to any non-table children */
.panel > *:not(.panel-head):not(.tbl):not(table):not(.trend-wrap) {
  padding: 16px 18px;
}
.trend-wrap { padding: 16px 18px !important; }

/* ============ BADGES / PILLS ============ */
.badge,
.pill {
  padding: 2px 8px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: none !important;
  line-height: 1.5 !important;
  display: inline-block;
}
.badge::before,
.pill::before { display: none !important; }
.badge.success, .pill.success,
.pill.active, .pill.completed {
  background: var(--success-bg) !important; color: var(--success) !important;
}
.badge.danger, .pill.danger,
.pill.failed, .pill.blocked {
  background: var(--danger-bg) !important; color: var(--danger) !important;
}
.badge.warn, .pill.warn,
.pill.pending, .pill.restricted {
  background: var(--warn-bg) !important; color: var(--warn) !important;
}
.badge.info, .pill.info {
  background: var(--info-bg) !important; color: var(--info) !important;
}
.badge.mute, .pill.mute,
.pill.inactive {
  background: var(--bg-panel-alt) !important; color: var(--text-mute) !important;
}

/* ============ TABLES ============ */
.tbl {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  background: transparent !important;
}
.tbl thead th {
  background: var(--bg-panel-alt) !important;
  color: var(--text-dim) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: none !important;
  height: auto !important;
}
.tbl tbody td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  height: auto !important;
}
.tbl tbody tr:last-child td { border-bottom: none !important; }
.tbl tbody tr:hover td { background: var(--bg-hover) !important; }
.tbl .num,
.tbl td.num,
.tbl th.num {
  font-variant-numeric: tabular-nums !important;
  font-family: var(--mono) !important;
  font-size: 12.5px !important;
  text-align: right !important;
}

/* ============ BUTTONS ============ */
.btn {
  padding: 5px 11px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-panel) !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  box-shadow: none !important;
  background-image: none !important;
}
.btn:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  transform: none !important;
}
.btn.primary,
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
  background-image: none !important;
}
.btn.primary:hover,
.btn-primary:hover {
  background: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
}
.btn.danger,
.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: white !important;
  background-image: none !important;
}
.btn.btn-secondary,
.btn-secondary {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}
.btn.btn-ghost,
.btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-mute) !important;
}
.btn.btn-ghost:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}
.btn.btn-sm { padding: 4px 10px !important; font-size: 12px !important; }

/* ============ INPUTS ============ */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  box-shadow: none !important;
}
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* ============ MODAL / DIALOG ============ */
.modal-card,
.dlg-card {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.4), 0 0 0 1px var(--line) !important;
}
.modal-card::before,
.modal-card::after,
.dlg-card::before,
.dlg-card::after { display: none !important; }
.modal-backdrop { backdrop-filter: blur(4px); background: rgba(0,0,0,0.4) !important; }
.modal-head {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.modal-body { padding: 20px !important; }
.modal-close {
  background: transparent !important;
  border: none !important;
  color: var(--text-mute) !important;
  border-radius: 5px !important;
  padding: 6px !important;
}
.modal-close:hover { background: var(--bg-hover) !important; color: var(--text) !important; }

/* ============ BANK STATUS CARDS (existing .bs-card class) ============ */
.bs-card,
.bank-status-card {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
  transition: border-color 0.12s;
}
.bs-card::before,
.bank-status-card::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: rgba(255,255,255,0.10);
}
.bs-card:hover,
.bank-status-card:hover {
  border-color: var(--border) !important;
  transform: none !important;
  box-shadow: none !important;
}
.bs-card[data-status="ACTIVE"]::before,
.bs-card.status-active::before,
.bank-status-card[data-status="ACTIVE"]::before,
.bank-status-card.status-active::before { background: var(--success); }
.bs-card[data-status="RESTRICTED"]::before,
.bs-card.status-restricted::before,
.bank-status-card[data-status="RESTRICTED"]::before,
.bank-status-card.status-restricted::before { background: var(--warn); }
.bs-card[data-status="BLOCKED"]::before,
.bs-card.status-blocked::before,
.bank-status-card[data-status="BLOCKED"]::before,
.bank-status-card.status-blocked::before { background: var(--danger); }
.bs-card[data-status="INACTIVE"]::before,
.bs-card.status-inactive::before,
.bank-status-card[data-status="INACTIVE"]::before,
.bank-status-card.status-inactive::before { background: var(--text-dim); }
.bs-card[data-status="INACTIVE"],
.bs-card.status-inactive,
.bank-status-card[data-status="INACTIVE"],
.bank-status-card.status-inactive { opacity: 0.55; }

/* Bank Status KPIs */
.bs-kpi {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}
.bs-num {
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  text-shadow: none !important;
  font-family: var(--sans) !important;
  font-size: 28px !important;
  letter-spacing: -0.5px !important;
}
.bs-num.bs-num-in { color: var(--success) !important; }
.bs-num.bs-num-out { color: var(--danger) !important; }
.bs-num.bs-num-balance { color: var(--text) !important; }
.bs-kpi.pos .bs-num { color: var(--success) !important; }
.bs-kpi.neg .bs-num { color: var(--danger) !important; }
.bs-kpi-warn .bs-num { color: var(--warn) !important; }

/* Bank Status tabs */
.bs-tab {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-mute) !important;
  border-radius: 0 !important;
}
.bs-tab.active {
  color: var(--accent-strong) !important;
  border-bottom-color: var(--accent-strong) !important;
  background: transparent !important;
}
.bs-usage-period-btn {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-mute) !important;
  border-radius: 5px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.bs-usage-period-btn.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent-strong) !important;
}

/* Bank direction chip */
.bank-dir-chip {
  padding: 3px 8px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.bank-dir-chip.dep { background: var(--success-bg) !important; color: var(--success) !important; }
.bank-dir-chip.wd { background: var(--danger-bg) !important; color: var(--danger) !important; }
.bank-dir-chip.both { background: var(--info-bg) !important; color: var(--info) !important; }
.bank-dir-chip.off { background: var(--bg-panel-alt) !important; color: var(--text-mute) !important; }

/* ============ LOAN MATRIX ============ */
.ln-matrix-cell {
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
}
.ln-cell-diag { background: var(--bg-panel-alt) !important; color: var(--text-mute) !important; }
.ln-cell-empty { background: var(--bg-panel) !important; color: var(--text-mute) !important; }
.ln-cell-owed { background: var(--warn-bg) !important; color: var(--warn) !important; border-color: transparent !important; }

.lr-card {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
}
.lr-card-empty {
  background: var(--bg-panel-alt) !important;
  color: var(--text-mute) !important;
  border-style: dashed !important;
}
.lr-stat-num {
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  text-shadow: none !important;
}
.lr-stat-num.accent { color: var(--accent-strong) !important; }

/* ============ LOGIN SCREEN ============ */
.login-screen {
  background: var(--bg-panel-alt) !important;
  background-image: none !important;
}
.login-bg { display: none !important; }
.login-card {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.4) !important;
  padding: 28px !important;
}
.login-brand,
.login-logo {
  color: var(--accent-strong) !important;
  text-shadow: none !important;
}
.login-err {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
  border-radius: 5px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  border: none !important;
}

/* ============ TOAST ============ */
.toast {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: var(--text) !important;
}

/* ============ DEFAULT THEME · make pro-dark default ============ */
body:not([class*="theme-"]) { /* no theme set → fall back gracefully */ }

/* ============================================================
   PHASE 2b · Real-app custom classes to match mockup Banks page
   ============================================================ */

/* Grand total strip (top of Banks page) */
.bank-grand-card {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 20px 22px !important;
  margin-bottom: 24px !important;
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 20px !important;
  box-shadow: none !important;
}
.bank-grand-left { padding-right: 20px; }
.bank-grand-right {
  border-left: 1px solid var(--line);
  padding-left: 20px;
}
.bank-grand-eyebrow, .bank-grand-label {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.bank-grand-amount {
  font-size: 36px !important;
  font-weight: 600 !important;
  letter-spacing: -0.8px !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-shadow: none !important;
}
.bank-grand-right .bank-grand-amount { font-size: 18px !important; }
.bank-grand-meta {
  font-size: 12px !important;
  color: var(--text-mute) !important;
  margin-top: 4px !important;
}

/* Per-company section header */
.bank-co-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 4px !important;
  margin-bottom: 10px !important;
  background: transparent !important;
  border: none !important;
}
.bank-co-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.bank-co-name, .bank-co-code {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
}
.bank-co-meta {
  font-size: 12px !important;
  color: var(--text-dim) !important;
  font-weight: 500;
}
.bank-co-right {
  margin-left: auto !important;
  text-align: right;
}
.bank-co-label {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-right: 4px;
}
.bank-co-amount {
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.bank-co-amount.pos { color: var(--text) !important; }
.bank-co-amount.neg { color: var(--danger) !important; }

/* Bank grid */
.bank-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
}

/* Bank card */
.bank-card {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  transition: border-color 0.12s;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  min-height: auto !important;
}
.bank-card:hover { border-color: var(--border) !important; }
.bank-card.bank-card-warn { border-color: rgba(229,167,60,0.32) !important; }
.bank-card.bank-card-over { border-color: rgba(229,72,77,0.32) !important; }
.bank-card.is-receiving {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(94,106,210,0.20) !important;
}

.bank-card-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 4px !important;
  letter-spacing: 0 !important;
}
.bank-card-company {
  font-size: 11px !important;
  color: var(--text-dim) !important;
  font-family: var(--mono) !important;
  margin-bottom: 10px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bank-card-balance {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  font-variant-numeric: tabular-nums;
  color: var(--text) !important;
  margin-bottom: 10px !important;
  text-shadow: none !important;
  font-family: var(--sans) !important;
}
.bank-card-actions {
  display: flex !important;
  gap: 4px !important;
  margin-top: 10px !important;
  flex-wrap: wrap;
}
.bank-card-actions .btn.btn-sm {
  padding: 3px 8px !important;
  font-size: 11px !important;
}

.bank-current-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* Bank direction chip inside card (top-left corner marker) */
.bank-card > .bank-dir-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.bank-card:has(.bank-current-badge) > .bank-dir-chip {
  right: 90px;
}

/* Status dot */
.status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block;
  background: var(--text-dim);
}
.status-dot.active { background: var(--success) !important; }
.status-dot.inactive { background: var(--text-dim) !important; opacity: 0.6; }

/* Bank limit usage bars */
.bank-lim-block {
  padding-top: 10px !important;
  border-top: 1px solid var(--line) !important;
  margin-top: 10px !important;
}
.bank-lim-row {
  display: grid !important;
  grid-template-columns: 30px 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-family: var(--mono) !important;
  margin-bottom: 4px;
}
.bank-lim-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.bank-lim-track {
  height: 3px !important;
  background: var(--bg-panel-alt) !important;
  border-radius: 2px !important;
  overflow: hidden;
}
.bank-lim-fill {
  height: 100% !important;
  background: var(--success) !important;
  border-radius: 2px !important;
  transition: width 0.2s;
}
.bank-lim-row.warn .bank-lim-fill { background: var(--warn) !important; }
.bank-lim-row.over .bank-lim-fill { background: var(--danger) !important; }
.bank-lim-row.over .bank-lim-fill { animation: bank-lim-pulse 1.4s ease-in-out infinite; }
.bank-lim-row.over .bank-lim-num  { color: var(--danger) !important; font-weight: 700 !important; }
.bank-lim-row.over .bank-lim-label { color: var(--danger) !important; }
@keyframes bank-lim-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,91,91,0.55); }
  50%     { box-shadow: 0 0 0 4px rgba(255,91,91,0);   }
}
.bank-lim-num {
  font-size: 10px !important;
  font-family: var(--mono) !important;
  color: var(--text-mute) !important;
  font-variant-numeric: tabular-nums;
}

/* ============ BANK STATUS PAGE (real app classes) ============ */
.bs-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
}
.bs-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}
.bs-card-balance {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px !important;
  text-shadow: none !important;
  font-family: var(--sans) !important;
}
.bs-card-fu {
  padding-top: 8px !important;
  margin-top: 8px !important;
  border-top: 1px solid var(--line) !important;
  font-size: 11px !important;
  color: var(--text-mute) !important;
}
.bs-card-fu-empty { color: var(--text-dim) !important; font-style: italic; }
.bs-card-fu-chip {
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  background: var(--bg-panel-alt) !important;
  color: var(--text-mute) !important;
  border: none !important;
}
.bs-card-fu-when {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: var(--text-dim) !important;
}
.bs-card-fu-notes {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  margin-top: 4px;
}
.bs-bank-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Balance-bar strip on Dashboard */
.bb-strip {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  box-shadow: none !important;
}
.bb-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.bb-strip-label {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.bb-strip-grand {
  font-size: 20px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  text-shadow: none !important;
}
.bb-bank {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: 5px;
  background: transparent;   /* was --bg-panel-alt · flattened per user request */
}
.bb-bank-name { font-size: 12px; font-weight: 500; }
.bb-bank-amt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-mute); }
.bb-pill {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-panel-alt);
  color: var(--text-mute);
}
.bb-pill.active { background: var(--accent-soft); color: var(--accent-strong); }

/* Bank config cards (Settings > Banks) */
.bank-config-card {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
}
.bank-config-grid { gap: 12px !important; }
.bank-config-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.bank-config-info {
  font-size: 13px;
  font-weight: 600;
}
.bank-config-meta,
.bank-config-upstream,
.bank-config-empty {
  font-size: 11px !important;
  color: var(--text-mute) !important;
}
.bank-config-empty {
  color: var(--text-dim) !important;
  padding: 20px !important;
  text-align: center;
  border: 1px dashed var(--line) !important;
  border-radius: 10px;
}

/* ============================================================
   PHASE 2c · Kill the blue background (specificity fix)
   Earlier body.theme-* blocks were beating our new tokens.
   Redeclare tokens with higher specificity + force background.
   ============================================================ */

/* Dark theme classes only — apply Linear dark palette */
body.theme-pro-dark,
body.theme-dark,
body.theme-linear,
body.theme-airtable-dark {
  --bg:            #08090A !important;
  --bg-1:          #0F1013 !important;
  --bg-2:          #16171B !important;
  --bg-3:          #1F2126 !important;
  --bg-panel:      #0F1013 !important;
  --bg-panel-alt:  #16171B !important;
  --bg-soft:       #16171B !important;
  --bg-hover:      rgba(255,255,255,0.03) !important;
  --line:          rgba(255,255,255,0.06) !important;
  --line-soft:     rgba(255,255,255,0.04) !important;
  --border:        rgba(255,255,255,0.10) !important;
  --text:          #F7F8F8 !important;
  --text-mute:     #8A8F98 !important;
  --text-dim:      #62666D !important;
  --ink:           #F7F8F8 !important;
  --ink-mute:      #8A8F98 !important;
  --ink-faint:     #62666D !important;
  --accent:        #5E6AD2 !important;
  --accent-strong: #7B87E8 !important;
  --accent-soft:   rgba(94,106,210,0.12) !important;
  --success:       #4CB782 !important;
  --success-bg:    rgba(76,183,130,0.12) !important;
  --danger:        #E5484D !important;
  --danger-bg:     rgba(229,72,77,0.12) !important;
  --warn:          #E5A73C !important;
  --warn-bg:       rgba(229,167,60,0.12) !important;
  --info:          #4CADE9 !important;
  --info-bg:       rgba(76,173,233,0.12) !important;
  --grid-line:     rgba(255,255,255,0.06) !important;
  --primary:       #0F1013 !important;
  --primary-text:  #F7F8F8 !important;
}

/* Light theme classes — Linear light palette */
body.theme-pro-light,
body.theme-light,
body.theme-notion,
body.theme-airtable {
  --bg:            #F6F9FC !important;
  --bg-1:          #FFFFFF !important;
  --bg-2:          #F1F5F9 !important;
  --bg-3:          #E2E8F0 !important;
  --bg-panel:      #FFFFFF !important;
  --bg-panel-alt:  #F8FAFC !important;
  --bg-soft:       #F1F5F9 !important;
  --bg-hover:      rgba(15,23,42,0.03) !important;
  --line:          #E3E8EE !important;
  --line-soft:     #EEF2F6 !important;
  --border:        #CBD5E1 !important;
  --text:          #0A2540 !important;
  --text-mute:     #4B5563 !important;
  --text-dim:      #9CA3AF !important;
  --ink:           #0A2540 !important;
  --ink-mute:      #4B5563 !important;
  --ink-faint:     #9CA3AF !important;
  --accent:        #5E6AD2 !important;
  --accent-strong: #4C58C4 !important;
  --accent-soft:   rgba(94,106,210,0.10) !important;
  --success:       #059669 !important;
  --success-bg:    rgba(5,150,105,0.10) !important;
  --danger:        #DC2626 !important;
  --danger-bg:     rgba(220,38,38,0.10) !important;
  --warn:          #D97706 !important;
  --warn-bg:       rgba(217,119,6,0.10) !important;
  --info:          #0EA5E9 !important;
  --info-bg:       rgba(14,165,233,0.10) !important;
  --grid-line:     #E5E7EB !important;
  --primary:       #0A2540 !important;
  --primary-text:  #FFFFFF !important;
  color-scheme: light;
}

/* Force background paint · dark themes get near-black */
body.theme-pro-dark,
body.theme-dark,
body.theme-linear,
body.theme-airtable-dark {
  background: #08090A !important;
}
body.theme-pro-dark .sidebar,
body.theme-dark .sidebar,
body.theme-linear .sidebar,
body.theme-airtable-dark .sidebar { background: #08090A !important; }
body.theme-pro-dark .app,
body.theme-pro-dark .main,
body.theme-dark .app,
body.theme-dark .main,
body.theme-linear .app,
body.theme-linear .main,
body.theme-airtable-dark .app,
body.theme-airtable-dark .main { background: #08090A !important; }

/* Force background paint · light themes get soft-white */
body.theme-pro-light,
body.theme-light,
body.theme-notion,
body.theme-airtable {
  background: #F6F9FC !important;
}
body.theme-pro-light .sidebar,
body.theme-light .sidebar,
body.theme-notion .sidebar,
body.theme-airtable .sidebar { background: #FFFFFF !important; }
body.theme-pro-light .app,
body.theme-pro-light .main,
body.theme-light .app,
body.theme-light .main,
body.theme-notion .app,
body.theme-notion .main,
body.theme-airtable .app,
body.theme-airtable .main { background: #F6F9FC !important; }
.main, .content, #view-container { background: transparent !important; }

/* bb-strip Dashboard/Banks — flattened, no panel-alt haloing between rows. */
.bb-strip,
.bb-strip-head,
.bb-details,
.bb-details-grid,
.bb-details-head {
  background: transparent !important;
  border-color: transparent !important;
}
.bb-total {
  font-size: 24px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  text-shadow: none !important;
  letter-spacing: -0.4px;
}
.bb-code { font-size: 12px !important; font-weight: 500 !important; color: var(--text) !important; }
.bb-caret { color: var(--text-mute) !important; }
.bb-refresh { color: var(--text-mute) !important; background: transparent !important; border: none !important; }


/* ============================================================
   PHASE 2d · Font size fixes · shrink oversized text
   ============================================================ */

/* Balance-bar strip (BANK BALANCE + per-company chips row) */
.bb-strip {
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
}
.bb-strip-head {
  margin-bottom: 8px !important;
  gap: 10px;
}
.bb-strip-label {
  font-size: 10px !important;
  color: var(--text-dim) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.bb-strip-grand {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--success) !important;
}
.bb-total {
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--mono) !important;
  color: var(--success) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
.bb-code {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--text-mute) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.bb-bank {
  padding: 3px 8px !important;
  border-radius: 5px !important;
  gap: 6px !important;
}
.bb-bank-name { font-size: 11px !important; }
.bb-bank-amt { font-size: 11px !important; }
.bb-pill {
  font-size: 10px !important;
  padding: 1px 6px !important;
}
.bb-details-head {
  font-size: 11px !important;
  padding: 8px 12px !important;
}

/* Grand-total card — was 36px, too heavy */
.bank-grand-amount {
  font-size: 22px !important;
  letter-spacing: -0.3px !important;
}
.bank-grand-right .bank-grand-amount {
  font-size: 14px !important;
  letter-spacing: 0 !important;
}
.bank-grand-eyebrow,
.bank-grand-label {
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.bank-grand-meta { font-size: 11px !important; }

/* Bank card body */
.bank-card-name { font-size: 12px !important; }
.bank-card-company { font-size: 10px !important; margin-bottom: 6px !important; }
.bank-card-balance {
  font-size: 18px !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 6px !important;
}
.bank-card {
  padding: 10px 12px !important;
}

/* Dashboard hero KPI number was 28px — pull to 22px */
.kpi { padding: 12px 14px !important; }
.kpi-value { font-size: 22px !important; }
.kpi-label { font-size: 10px !important; margin-bottom: 6px !important; letter-spacing: 0.06em; text-transform: uppercase; }
.kpi-sub { font-size: 11px !important; margin-top: 4px !important; }

/* Bank Status KPI */
.bs-kpi { padding: 12px 14px !important; }
.bs-num { font-size: 22px !important; }
.bs-card-balance { font-size: 16px !important; }

/* Per-company total on the right of section header */
.bank-co-amount { font-size: 12px !important; }
.bank-co-label { font-size: 10px !important; }
.bank-co-name, .bank-co-code { font-size: 12px !important; }
.bank-co-meta { font-size: 11px !important; }

/* Panel titles slightly tighter */
.panel-title { font-size: 13px !important; }
.panel-meta, .panel-sub { font-size: 11px !important; }

/* Topbar title */
.topbar-crumb { font-size: 13px !important; }
.topbar-meta { font-size: 11px !important; }

/* Numeric cells in tables */
.tbl td.num, .tbl th.num { font-size: 12px !important; }
.tbl td { font-size: 12.5px !important; padding: 10px 14px !important; }
.tbl thead th { padding: 8px 14px !important; }


/* ============================================================
   PHASE 2e · Banks page structural rewrite
   Compact date chip · 4-column grand card · hover-only actions
   ============================================================ */

/* Toolbar (top of page) */
.bank-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.bank-toolbar-l { display: flex; align-items: center; gap: 12px; }
.bank-toolbar-r { display: flex; align-items: center; gap: 8px; }
.bank-toolbar-meta {
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 500;
}
.bank-date-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.bank-date-chip:hover { border-color: var(--border); color: var(--text); }
.bank-date-chip svg { color: var(--text-mute); }

/* Collapsible date panel — month picker + day-tabs live inside */
.bank-date-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bank-date-panel[hidden] { display: none !important; }
.bank-date-panel .day-tabs {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  gap: 4px !important;
}
.bank-date-panel .day-tab {
  min-width: 30px !important;
  height: 26px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  background: var(--bg-panel-alt) !important;
  color: var(--text-mute) !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
}
.bank-date-panel .day-tab.active {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}
.bank-date-panel .day-tab.today { color: var(--accent-strong) !important; border-color: var(--accent-soft) !important; }

/* Grand total card — 4 columns */
.bank-grand-card {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 20px !important;
  padding: 18px 22px !important;
  margin-bottom: 20px !important;
  align-items: center;
}
.bank-grand-left { padding-right: 20px; border-right: 1px solid var(--line); }
.bank-grand-right { padding-left: 4px; border-left: none !important; }
.bank-grand-right + .bank-grand-right { border-left: 1px solid var(--line) !important; padding-left: 20px; }
.bank-grand-left .bank-grand-amount {
  font-size: 30px !important;
  letter-spacing: -0.6px !important;
  margin: 4px 0;
}
.bank-grand-right .bank-grand-amount {
  font-size: 18px !important;
  letter-spacing: -0.2px !important;
}
.bank-grand-eyebrow,
.bank-grand-label {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 4px !important;
}
.bank-grand-meta { font-size: 11px !important; color: var(--text-dim) !important; }
.bank-grand-amount.pos { color: var(--success) !important; }
.bank-grand-amount.neg { color: var(--danger) !important; }
.bank-grand-left .bank-grand-amount.pos { color: var(--text) !important; }

/* Bank card structure rewrite */
.bank-card {
  padding: 14px 16px !important;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Chips row above the bank name — BOTH / PINNED / etc. sit on their own
   line so the name below can use the FULL card width and wrap to 2 lines
   if it's long. Was previously position:absolute top-right which forced
   the name to squeeze around it. */
.bank-card-topright {
  position: static;
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bank-card-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 28px;
}
.bank-card-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-mute);
  flex-shrink: 0;
}
.bank-card-idents { min-width: 0; flex: 1; }
.bank-card-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 2px !important;
  /* Wrap long names to 2+ lines instead of truncating with an ellipsis —
     staff need to see the whole name to reconcile against the bank. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}
.bank-card-company {
  font-size: 11px !important;
  color: var(--text-dim) !important;
  font-family: var(--mono) !important;
  display: flex;
  align-items: center;
  gap: 5px;
}
.bank-card-balance {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 4px !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums;
}
.bank-card-delta {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

/* Hover-only actions */
.bank-card-hover-actions {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px 12px;
  background: linear-gradient(0deg, rgba(15,16,19,0.98) 0%, rgba(15,16,19,0.90) 60%, transparent 100%);
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
  border-radius: 0 0 10px 10px;
}
.bank-card:hover .bank-card-hover-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bank-card-hover-actions .btn.btn-sm,
.bank-card-hover-actions .bank-trf-btn {
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  min-height: auto !important;
  height: auto !important;
}
.bank-trf-btn {
  border-radius: 4px !important;
  background: var(--bg-panel-alt) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
}
.bank-trf-btn.bank-trf-in { color: var(--success) !important; border-color: rgba(76,183,130,0.28) !important; }
.bank-trf-btn.bank-trf-out { color: var(--danger) !important; border-color: rgba(229,72,77,0.28) !important; }

/* Direction chip + receiving badge · smaller in top-right cluster */
.bank-card-topright .bank-dir-chip {
  padding: 2px 6px !important;
  font-size: 10px !important;
  border-radius: 4px !important;
}
.bank-card-topright .bank-current-badge {
  position: static !important;
  font-size: 9px !important;
  padding: 1px 5px !important;
}


/* ============================================================
   PHASE 2f · Banks fixes
   Hover actions expand card down (no overlap) + bigger co-total
   ============================================================ */

/* PERF FIX (2026-09-14): the previous hover style animated max-height +
   margin-top + padding-top — all LAYOUT-inducing properties. Every hover
   forced a full reflow of the bank-grid (120 banks on HKD = 120 layout
   recalculations per mousemove). Result: page frozen while hovering.
   New approach: always reserve the vertical space, toggle only opacity +
   visibility (compositor-only, no layout). Zero cost per hover. */
.bank-card-hover-actions {
  position: static !important;
  background: none !important;
  padding: 10px 0 0 0 !important;
  margin-top: 10px !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  display: flex !important;
  gap: 6px;
  flex-wrap: wrap;
  transform: none !important;
  max-height: none !important;
  overflow: visible !important;
}
.bank-card:hover .bank-card-hover-actions,
.bank-card:focus-within .bank-card-hover-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Hint GPU/compositor so browser knows opacity change stays off the main thread */
.bank-card { contain: content; }
.bank-card-hover-actions { will-change: opacity; }

/* Company header — bigger + right-aligned total */
.bank-co-header {
  padding: 8px 6px !important;
  margin-bottom: 10px !important;
}
.bank-co-right {
  text-align: right;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.bank-co-label {
  font-size: 10px !important;
  color: var(--text-dim) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
}
.bank-co-amount {
  font-size: 18px !important;
  font-weight: 600 !important;
  font-family: var(--sans) !important;
  letter-spacing: -0.3px !important;
  font-variant-numeric: tabular-nums;
  color: var(--text) !important;
}
.bank-co-amount.pos { color: var(--text) !important; }
.bank-co-amount.neg { color: var(--danger) !important; }

/* ============================================================
   PHASE 2g · Dashboard hero KPI tier + section heads
   ============================================================ */
.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  margin-top: 4px;
}
.dash-section-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-section-hint {
  font-size: 12px;
  color: var(--text-mute);
}

/* Hero KPI row · 3 columns */
.kpi-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.kpi.kpi-h {
  padding: 18px 20px !important;
}
.kpi-h-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.kpi-h-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: var(--bg-panel-alt);
  color: var(--text-mute);
}
.kpi.kpi-h .kpi-label {
  margin-bottom: 0 !important;
  text-transform: none !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
}
.kpi.kpi-h .kpi-value {
  font-size: 28px !important;
  letter-spacing: -0.6px !important;
}
.kpi-h-dep .kpi-h-icon { background: var(--success-bg); color: var(--success); }
.kpi-h-dep .kpi-value { color: var(--success) !important; }
.kpi-h-wit .kpi-h-icon { background: var(--danger-bg); color: var(--danger); }
.kpi-h-wit .kpi-value { color: var(--danger) !important; }
.kpi-h-wl  .kpi-h-icon { background: var(--accent-soft); color: var(--accent-strong); }
.kpi-h-wl  .kpi-value { color: var(--accent-strong) !important; }

/* Secondary 4-column grid */
.kpi-grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

/* ============================================================
   PHASE 2h · Dashboard trend chart + By Company tables
   ============================================================ */

/* By Company table cells with color dot + hierarchy */
.co-cell {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.co-dot-inline {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.co-code-strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.co-name-sub {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: 1px;
}

/* Data cells with 2-line num + count */
.tbl td.num > div:first-child {
  font-weight: 600;
  font-size: 13px;
}
.tbl td.num > div:last-child {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 400;
  margin-top: 2px;
}

/* Total row — sticky look */
.tbl tfoot tr.dash-total-row td {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  border-top: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.02);
}
.tbl tfoot tr.dash-total-row td:first-child { border-radius: 0 0 0 6px; }
.tbl tfoot tr.dash-total-row td:last-child { border-radius: 0 0 6px 0; }
.dash-total-label {
  font-size: 11px;
  color: var(--accent-strong);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-total-sub {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: 2px;
}
.dash-total-wl {
  font-size: 14px !important;
  font-weight: 600 !important;
}
.dash-total-pct {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: 2px;
}

/* Trend chart panel — cleaner surroundings */
.trend-panel .panel-head {
  border-bottom: 1px solid var(--line) !important;
}
.trend-wrap {
  padding: 12px 8px 4px !important;
}
#trend-chart, canvas#trend-chart {
  background: transparent !important;
}

/* ============================================================
   PHASE 2i · Deposits/Withdrawals panel + Settings left nav
   ============================================================ */

/* Whole page panel wrapper for tx pages */
.tx-panel {
  padding: 0 !important;
  overflow: visible;
}

/* Summary strip (top of tx panel) */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.ss-item .ss-lbl {
  font-size: 11px;
  color: var(--text-mute);
  font-weight: 500;
  margin-bottom: 4px;
}
.ss-item .ss-val {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  color: var(--text);
}
.ss-item .ss-val.pos { color: var(--success); }
.ss-item .ss-val.neg { color: var(--danger); }
.ss-item .ss-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Toolbar with chip filters */
.tx-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.chip-filter-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.chip-filter {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.chip-filter:hover { color: var(--text); }
.chip-filter.on {
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.tx-searchbox {
  position: relative;
  min-width: 220px;
  flex: 1;
  max-width: 320px;
}
.tx-searchbox input {
  width: 100%;
  padding: 6px 10px 6px 30px !important;
}
.tx-searchbox svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-mute);
  pointer-events: none;
}

/* Compact day tabs inside tx panel */
.day-tabs-compact {
  padding: 8px 20px !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  gap: 3px !important;
}
.day-tabs-compact .day-tab {
  min-width: 28px !important;
  height: 24px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  background: var(--bg-panel-alt) !important;
  color: var(--text-mute) !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
}
.day-tabs-compact .day-tab.active {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}

/* Member cell inline (Deposits) */
.member-cell-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.member-avatar-inline {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-panel-alt);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-mute);
  flex-shrink: 0;
}
.member-id-sub {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: 1px;
}

/* Hover-only row actions */
.row-hover-actions {
  opacity: 0;
  transition: opacity 0.12s;
}
tr:hover .row-hover-actions { opacity: 1; }

/* tx-tbl (Deposits/Withdrawals) — fits inside tx-panel border */
.tx-tbl {
  border-radius: 0 !important;
}
.tx-panel .day-summary,
.tx-panel .empty-state {
  padding: 14px 20px !important;
}

/* ============ SETTINGS · left nav ============ */
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
}
.settings-nav {
  display: flex; flex-direction: column; gap: 1px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
  align-self: start;
  position: sticky; top: 80px;
}
.settings-nav-group {
  padding: 6px 10px 8px;
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.snav-item, .settings-tab {
  display: block;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  width: 100%;
}
.snav-item:hover, .settings-tab:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}
.snav-item.on, .snav-item.active, .settings-tab.active {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
}
.settings-content {
  min-width: 0;
}

/* Keep original horizontal-tabs class from being displayed anywhere else */
.settings-layout .settings-tabs { display: none; }

/* ============================================================
   PHASE 2j · Transactions/Reconcile · rounded company cards
   ============================================================ */
.report-company {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.report-company + .report-company { margin-top: 4px; }
.report-company-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.report-company-head h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.report-company-head .muted {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: 2px;
  display: block;
}
.report-company-kpi {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: var(--text-mute);
}
.report-company-kpi span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.report-company-kpi strong {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.report-company-kpi strong.pos { color: var(--success); }
.report-company-kpi strong.neg { color: var(--danger); }

/* Table inside · no radius, blends into card */
.report-company .tbl {
  border-radius: 0 !important;
}
.report-company .tbl thead th {
  background: var(--bg-panel-alt) !important;
}
.report-company .tbl tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}

/* Pager row inside company card */
.rc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.rc-pager .btn { padding: 4px 10px !important; font-size: 12px !important; }
.rc-pager .muted {
  color: var(--text-mute);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Bank picker cell inside reconcile row */
.rc-bank-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rc-bank-cell .rc-bank-sel {
  padding: 4px 8px !important;
  font-size: 12px !important;
  min-height: auto !important;
  height: auto !important;
}
.rc-split-btn {
  color: var(--text-mute) !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}

/* Empty state inside company section */
.report-company .bank-config-empty {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 24px !important;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
}

/* ============================================================
   PHASE 2k · Balance-bar strip · flattened, no frame
   Keeps a small horizontal padding so the BANK BALANCE label + pill
   don't collide with the surrounding page's left edge.
   ============================================================ */
.bb-strip {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 12px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Head row · label + Grand + refresh */
.bb-strip-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 !important;
  border: none !important;
}
.bb-strip-label {
  font-size: 10px !important;
  color: var(--text-dim) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.bb-strip-grand {
  font-size: 20px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  color: var(--success) !important;
  letter-spacing: -0.3px !important;
  margin-left: 2px;
}
.bb-strip-grand.pos { color: var(--success) !important; }
.bb-strip-grand.neg { color: var(--danger) !important; }
.bb-refresh {
  margin-left: auto;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--text-mute) !important;
  padding: 4px 8px !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  cursor: pointer;
}
.bb-refresh:hover { color: var(--text) !important; border-color: var(--border) !important; background: var(--bg-hover) !important; }

/* Pills row · roomy pills */
.bb-pills {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  padding: 0 !important;
}
.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: var(--bg-panel-alt) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: var(--sans) !important;
}
.bb-pill:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
}
.bb-pill.open {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}
.bb-pill.open .bb-code { color: var(--accent-strong) !important; }
.bb-code {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-mute) !important;
}
.bb-total {
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  color: var(--text) !important;
}
.bb-pill.pos .bb-total { color: var(--success) !important; }
.bb-pill.neg .bb-total { color: var(--danger) !important; }
.bb-caret {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 2px;
}

/* Expanded per-company details — was a nested light panel inside the outer
   strip (bg-panel outside, bg-panel-alt inside) which read as a weird
   floating box on light themes. Flatten it — same-plane visual, one accent
   line on the left to preserve grouping. */
.bb-details {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--accent) !important;
  border-radius: 0 !important;
  padding: 8px 0 8px 12px !important;
  margin-top: 4px !important;
}
.bb-details + .bb-details { margin-top: 10px !important; }
.bb-details-head {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 0 0 10px !important;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.bb-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 16px;
}
.bb-bank {
  background: transparent !important;
  border: none !important;
  padding: 6px 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 0 !important;
  min-height: 24px;
}
.bb-bank-name {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-mute) !important;
}
.bb-bank-amt {
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
}
.bb-bank-amt.pos { color: var(--success) !important; }
.bb-bank-amt.neg { color: var(--danger) !important; }

/* ============================================================
   PHASE 2l · bb-details cleaner chip layout
   ============================================================ */

/* Expanded panel — quieter, no border (blend into parent strip) */
.bb-details {
  background: rgba(255,255,255,0.02) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-top: 2px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bb-details + .bb-details { margin-top: 8px !important; }
.bb-details-head {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bb-details-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  margin-left: 8px;
}

/* Each bank as a compact chip · flex wrap · not grid */
.bb-details-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  grid-template-columns: unset !important;
}
.bb-bank {
  background: var(--bg-panel-alt) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  min-height: auto !important;
  min-width: 140px;
  justify-content: space-between;
  transition: border-color 0.12s;
}
.bb-bank:hover {
  border-color: var(--border) !important;
}
.bb-bank-name {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-mute) !important;
  letter-spacing: 0.02em;
}
.bb-bank-amt {
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
}
.bb-bank-amt.pos { color: var(--text) !important; }
.bb-bank-amt.neg { color: var(--danger) !important; }

/* ============================================================
   PHASE 2m · Modal · roomier default + better internal spacing
   ============================================================ */

/* Bump default modal width so form content isn't cramped */
.modal-card {
  max-width: 640px !important;
  max-height: 90vh !important;
  border-radius: 10px !important;
}
.modal-card:has(.split-modal) { max-width: 820px !important; }

/* Some modals have lots of form fields — allow wider on those */
.modal-card:has(#transfer-form),
.modal-card:has(#bank-form),
.modal-card:has(#user-form),
.modal-card:has(#company-form) {
  max-width: 720px !important;
}

/* Modal head: tighter padding */
.modal-head {
  padding: 16px 20px !important;
}
.modal-head h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
}
.modal-close {
  font-size: 20px !important;
  width: 26px !important; height: 26px !important;
  border-radius: 5px !important;
}

/* Modal body: more breathing room */
.modal-body {
  padding: 22px 24px !important;
  overflow-y: auto;
}
.modal-body label,
.modal-body .field-label {
  display: block;
  font-size: 11px !important;
  color: var(--text-dim) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  margin-top: 14px;
}
.modal-body > label:first-of-type,
.modal-body > .field-label:first-of-type { margin-top: 0; }
.modal-body input,
.modal-body select,
.modal-body textarea {
  width: 100%;
}

/* Radio group inside modal — tighter list, hover row */
.modal-body .radio-list, .modal-body .transfer-type-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.modal-body .radio-list label,
.modal-body .transfer-type-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px !important;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-panel-alt);
  cursor: pointer;
  font-size: 13px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  transition: background 0.12s, border-color 0.12s;
}
.modal-body .radio-list label:hover,
.modal-body .transfer-type-list label:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
.modal-body .radio-list label:has(input:checked),
.modal-body .transfer-type-list label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.modal-body .radio-list input[type="radio"],
.modal-body .transfer-type-list input[type="radio"] {
  width: auto !important;
  margin-top: 3px;
  accent-color: var(--accent);
}

/* Two-column form rows (Date/Time + Amount side by side) */
.modal-body .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Sticky footer with actions */
.modal-body + .modal-footer,
.modal-footer {
  padding: 14px 20px !important;
  border-top: 1px solid var(--line) !important;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: var(--bg-panel);
}

/* When modal-body has the buttons inline at bottom, indent them */
.modal-body > .btn-group,
.modal-body > .form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}


/* ============================================================
   PHASE 2n · Transfer modal type-picker · pretty cards
   ============================================================ */
.tf-kind-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tf-kind-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.tf-kind-card {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-panel-alt) !important;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-weight: normal !important;
  font-size: 13px !important;
}
.tf-kind-card:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
}
.tf-kind-card:has(input:checked) {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.tf-kind-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0 !important;
}
.tf-kind-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.tf-kind-body { min-width: 0; flex: 1; }
.tf-kind-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}
.tf-kind-card:has(input:checked) .tf-kind-title { color: var(--accent-strong); }
.tf-kind-hint {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 1px;
  line-height: 1.35;
}

/* On narrow modals fall back to single column */
@media (max-width: 600px) {
  .tf-kind-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 2o · Polished selects + inputs everywhere
   ============================================================ */

/* Base polish · rounder, more padding, custom arrow */
select,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="search"],
textarea {
  background: var(--bg-panel-alt) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-height: 36px;
}
select:hover,
input:hover,
textarea:hover {
  border-color: var(--border) !important;
  background: var(--bg-panel) !important;
}
select:focus,
input:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  background: var(--bg-panel) !important;
}

/* Native select arrow — kept · keeps behavior consistent + no chevron tiling bugs */
select {
  cursor: pointer;
}

/* Style the option list backing surface (browsers vary — best effort) */
select option {
  background: var(--bg-panel-alt) !important;
  color: var(--text) !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: 6px !important;
}
select option:checked,
select option:hover {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
}
select option:disabled {
  color: var(--text-dim) !important;
}

/* Firefox / Chrome native option list backdrop (best effort — most vendors
   don't fully expose the popup styling, but this helps in some UAs) */
select {
  color-scheme: dark;
}

/* Number spinner arrows — hide the ugly default (webkit) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

/* Date/datetime picker calendar icon color */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
  transition: filter 0.15s;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
  color: var(--text-dim) !important;
  opacity: 1;
}

/* Disabled state */
select:disabled,
input:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-panel-alt) !important;
}

/* External company toggle inside Transfer modal was oversized · normalize */
.modal-body label[style*="dashed"],
#tf-loan-fields > label:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: var(--bg-panel-alt) !important;
  border: 1px dashed var(--line) !important;
  border-radius: 8px !important;
  margin: 8px 0 !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
  font-weight: normal !important;
}
#tf-loan-fields > label:first-child input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  min-height: auto !important;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* Style checkbox globally (Webkit + Firefox accepts accent-color) */
input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  min-height: auto !important;
}
input[type="radio"] {
  accent-color: var(--accent);
}

/* ============================================================
   PHASE 2p · Sidebar title size bump
   ============================================================ */
.nav-section-label {
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}
.nav-item {
  font-size: 14px !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
}
.nav-item svg {
  width: 17px !important;
  height: 17px !important;
}
.brand-title {
  font-size: 14px !important;
}
.brand-sub {
  font-size: 11px !important;
}

/* ============================================================
   PHASE 2q · Light theme detail fixes
   ============================================================ */

/* Sidebar brand gradient · keep purple */
body.theme-pro-light .brand-mark,
body.theme-light .brand-mark,
body.theme-notion .brand-mark,
body.theme-airtable .brand-mark {
  background: linear-gradient(135deg, var(--accent), #4C58C4) !important;
  color: white !important;
}

/* Topbar in light — no blur, soft border */
body.theme-pro-light .topbar,
body.theme-light .topbar,
body.theme-notion .topbar,
body.theme-airtable .topbar {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line) !important;
}

/* Bank Statement / Bank card / KPI panels use var(--bg-panel) — should be white on light */
body.theme-pro-light .kpi,
body.theme-light .kpi,
body.theme-notion .kpi,
body.theme-airtable .kpi,
body.theme-pro-light .panel,
body.theme-light .panel,
body.theme-notion .panel,
body.theme-airtable .panel,
body.theme-pro-light .bank-card,
body.theme-light .bank-card,
body.theme-notion .bank-card,
body.theme-airtable .bank-card,
body.theme-pro-light .bs-card,
body.theme-light .bs-card,
body.theme-notion .bs-card,
body.theme-airtable .bs-card,
body.theme-pro-light .bs-kpi,
body.theme-light .bs-kpi,
body.theme-notion .bs-kpi,
body.theme-airtable .bs-kpi,
body.theme-pro-light .bank-grand-card,
body.theme-light .bank-grand-card,
body.theme-notion .bank-grand-card,
body.theme-airtable .bank-grand-card,
/* .bb-strip on light themes — user asked for the shadow/frame off entirely
   (2026-09-15). .report-company still keeps the framed look. */
body.theme-pro-light .report-company,
body.theme-light .report-company,
body.theme-notion .report-company,
body.theme-airtable .report-company {
  background: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}
body.theme-pro-light .bb-strip,
body.theme-light .bb-strip,
body.theme-notion .bb-strip,
body.theme-airtable .bb-strip {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Table header + hover · light */
body.theme-pro-light .tbl thead th,
body.theme-light .tbl thead th,
body.theme-notion .tbl thead th,
body.theme-airtable .tbl thead th {
  background: #F8FAFC !important;
  color: var(--text-mute) !important;
}
body.theme-pro-light .tbl tbody tr:hover td,
body.theme-light .tbl tbody tr:hover td,
body.theme-notion .tbl tbody tr:hover td,
body.theme-airtable .tbl tbody tr:hover td {
  background: rgba(15,23,42,0.02) !important;
}

/* Number pos/neg colors — light versions with better contrast */
body.theme-pro-light .num.pos, body.theme-light .num.pos, body.theme-notion .num.pos, body.theme-airtable .num.pos,
body.theme-pro-light .pos, body.theme-light .pos, body.theme-notion .pos, body.theme-airtable .pos {
  color: #059669 !important;
}
body.theme-pro-light .num.neg, body.theme-light .num.neg, body.theme-notion .num.neg, body.theme-airtable .num.neg,
body.theme-pro-light .neg, body.theme-light .neg, body.theme-notion .neg, body.theme-airtable .neg {
  color: #DC2626 !important;
}

/* Inputs + selects light bg */
body.theme-pro-light input, body.theme-pro-light select, body.theme-pro-light textarea,
body.theme-light input, body.theme-light select, body.theme-light textarea,
body.theme-notion input, body.theme-notion select, body.theme-notion textarea,
body.theme-airtable input, body.theme-airtable select, body.theme-airtable textarea {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.theme-pro-light input:hover, body.theme-pro-light select:hover, body.theme-pro-light textarea:hover,
body.theme-light input:hover, body.theme-light select:hover, body.theme-light textarea:hover,
body.theme-notion input:hover, body.theme-notion select:hover, body.theme-notion textarea:hover,
body.theme-airtable input:hover, body.theme-airtable select:hover, body.theme-airtable textarea:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

/* Buttons — light-theme secondary */
body.theme-pro-light .btn, body.theme-light .btn, body.theme-notion .btn, body.theme-airtable .btn {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.theme-pro-light .btn:hover, body.theme-light .btn:hover, body.theme-notion .btn:hover, body.theme-airtable .btn:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}
body.theme-pro-light .btn.primary, body.theme-pro-light .btn-primary,
body.theme-light .btn.primary, body.theme-light .btn-primary,
body.theme-notion .btn.primary, body.theme-notion .btn-primary,
body.theme-airtable .btn.primary, body.theme-airtable .btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
}
body.theme-pro-light .btn.danger, body.theme-light .btn.danger, body.theme-notion .btn.danger, body.theme-airtable .btn.danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: white !important;
}

/* Nav item · light */
body.theme-pro-light .nav-item, body.theme-light .nav-item, body.theme-notion .nav-item, body.theme-airtable .nav-item {
  color: var(--text-mute) !important;
}
body.theme-pro-light .nav-item:hover, body.theme-light .nav-item:hover, body.theme-notion .nav-item:hover, body.theme-airtable .nav-item:hover {
  background: rgba(15,23,42,0.03) !important;
  color: var(--text) !important;
}
body.theme-pro-light .nav-item.active, body.theme-light .nav-item.active, body.theme-notion .nav-item.active, body.theme-airtable .nav-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* Modal card · white bg + softer shadow */
body.theme-pro-light .modal-card, body.theme-light .modal-card, body.theme-notion .modal-card, body.theme-airtable .modal-card,
body.theme-pro-light .dlg-card, body.theme-light .dlg-card, body.theme-notion .dlg-card, body.theme-airtable .dlg-card {
  background: #FFFFFF !important;
  border-color: var(--line) !important;
  box-shadow: 0 20px 40px -12px rgba(15,23,42,0.15), 0 0 0 1px var(--line) !important;
}
body.theme-pro-light .modal-backdrop, body.theme-light .modal-backdrop, body.theme-notion .modal-backdrop, body.theme-airtable .modal-backdrop {
  background: rgba(15,23,42,0.30) !important;
}

/* bb-details expanded panel — flattened per user request (no nested box). */
body.theme-pro-light .bb-details, body.theme-light .bb-details, body.theme-notion .bb-details, body.theme-airtable .bb-details {
  background: transparent !important;
}
body.theme-pro-light .bb-bank, body.theme-light .bb-bank, body.theme-notion .bb-bank, body.theme-airtable .bb-bank {
  background: #FFFFFF !important;
  border-color: var(--line) !important;
}
body.theme-pro-light .bb-pill, body.theme-light .bb-pill, body.theme-notion .bb-pill, body.theme-airtable .bb-pill {
  background: #FFFFFF !important;
  border-color: var(--line) !important;
}
body.theme-pro-light .bb-pill.open, body.theme-light .bb-pill.open, body.theme-notion .bb-pill.open, body.theme-airtable .bb-pill.open {
  background: var(--accent-soft) !important;
}

/* Transfer type cards · light */
body.theme-pro-light .tf-kind-card, body.theme-light .tf-kind-card, body.theme-notion .tf-kind-card, body.theme-airtable .tf-kind-card {
  background: #F8FAFC !important;
  border-color: var(--line) !important;
}
body.theme-pro-light .tf-kind-card:hover, body.theme-light .tf-kind-card:hover, body.theme-notion .tf-kind-card:hover, body.theme-airtable .tf-kind-card:hover {
  background: #F1F5F9 !important;
}

/* Chip filter group (Deposits/Withdrawals) · light */
body.theme-pro-light .chip-filter-group, body.theme-light .chip-filter-group, body.theme-notion .chip-filter-group, body.theme-airtable .chip-filter-group {
  background: #F1F5F9 !important;
  border-color: var(--line) !important;
}
body.theme-pro-light .chip-filter.on, body.theme-light .chip-filter.on, body.theme-notion .chip-filter.on, body.theme-airtable .chip-filter.on {
  background: #FFFFFF !important;
  color: var(--text) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.08) !important;
}

/* Section labels · light */
body.theme-pro-light .nav-section-label, body.theme-light .nav-section-label, body.theme-notion .nav-section-label, body.theme-airtable .nav-section-label {
  color: var(--text-dim) !important;
}
body.theme-pro-light .brand-title, body.theme-light .brand-title, body.theme-notion .brand-title, body.theme-airtable .brand-title {
  color: var(--text) !important;
}

/* Bank Status card left-bar colors keep · but readable text */
body.theme-pro-light .bs-card-balance, body.theme-light .bs-card-balance, body.theme-notion .bs-card-balance, body.theme-airtable .bs-card-balance {
  color: var(--text) !important;
}

/* Login screen · light */
body.theme-pro-light .login-screen, body.theme-light .login-screen, body.theme-notion .login-screen, body.theme-airtable .login-screen {
  background: #F6F9FC !important;
}
body.theme-pro-light .login-card, body.theme-light .login-card, body.theme-notion .login-card, body.theme-airtable .login-card {
  background: #FFFFFF !important;
  border-color: var(--line) !important;
  box-shadow: 0 8px 32px -8px rgba(15,23,42,0.10), 0 0 0 1px var(--line) !important;
}

/* Trend chart bars stay green/red but grid softer on light */
body.theme-pro-light canvas, body.theme-light canvas, body.theme-notion canvas, body.theme-airtable canvas {
  background: transparent !important;
}

/* Settings sub-nav · light */
body.theme-pro-light .settings-nav, body.theme-light .settings-nav, body.theme-notion .settings-nav, body.theme-airtable .settings-nav {
  border-right-color: var(--line) !important;
}
body.theme-pro-light .snav-item, body.theme-light .snav-item, body.theme-notion .snav-item, body.theme-airtable .snav-item,
body.theme-pro-light .settings-tab, body.theme-light .settings-tab, body.theme-notion .settings-tab, body.theme-airtable .settings-tab {
  color: var(--text-mute) !important;
}
body.theme-pro-light .snav-item.on, body.theme-light .snav-item.on, body.theme-notion .snav-item.on, body.theme-airtable .snav-item.on,
body.theme-pro-light .settings-tab.active, body.theme-light .settings-tab.active, body.theme-notion .settings-tab.active, body.theme-airtable .settings-tab.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* ============================================================
   PHASE 2r · Light theme · darker bg + thicker fonts
   ============================================================ */

/* Darker page bg to reduce glare */
body.theme-pro-light,
body.theme-light,
body.theme-notion,
body.theme-airtable {
  --bg:            #EEF2F6 !important;  /* was #F6F9FC — deeper slate */
  --bg-panel-alt:  #F0F4F8 !important;  /* mild off-white */
  background: #EEF2F6 !important;
}
body.theme-pro-light .app,
body.theme-pro-light .main,
body.theme-light .app,
body.theme-light .main,
body.theme-notion .app,
body.theme-notion .main,
body.theme-airtable .app,
body.theme-airtable .main { background: #EEF2F6 !important; }

/* Cards stay pure white so they pop against the softer bg */
body.theme-pro-light .kpi, body.theme-light .kpi, body.theme-notion .kpi, body.theme-airtable .kpi,
body.theme-pro-light .panel, body.theme-light .panel, body.theme-notion .panel, body.theme-airtable .panel,
body.theme-pro-light .bank-card, body.theme-light .bank-card, body.theme-notion .bank-card, body.theme-airtable .bank-card,
body.theme-pro-light .bs-card, body.theme-light .bs-card, body.theme-notion .bs-card, body.theme-airtable .bs-card,
body.theme-pro-light .bs-kpi, body.theme-light .bs-kpi, body.theme-notion .bs-kpi, body.theme-airtable .bs-kpi,
body.theme-pro-light .bank-grand-card, body.theme-light .bank-grand-card, body.theme-notion .bank-grand-card, body.theme-airtable .bank-grand-card,
body.theme-pro-light .bb-strip, body.theme-light .bb-strip, body.theme-notion .bb-strip, body.theme-airtable .bb-strip,
body.theme-pro-light .report-company, body.theme-light .report-company, body.theme-notion .report-company, body.theme-airtable .report-company,
body.theme-pro-light .modal-card, body.theme-light .modal-card, body.theme-notion .modal-card, body.theme-airtable .modal-card,
body.theme-pro-light .login-card, body.theme-light .login-card, body.theme-notion .login-card, body.theme-airtable .login-card {
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 0 0 1px rgba(15,23,42,0.04) !important;
  border-color: #D5DDE5 !important;
}

/* Sidebar keeps white but slightly warmer border-right to separate from page bg */
body.theme-pro-light .sidebar, body.theme-light .sidebar, body.theme-notion .sidebar, body.theme-airtable .sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid #D5DDE5 !important;
}

/* Thicker text everywhere in light theme */
body.theme-pro-light, body.theme-light, body.theme-notion, body.theme-airtable {
  font-weight: 500 !important;
}
body.theme-pro-light .nav-item, body.theme-light .nav-item, body.theme-notion .nav-item, body.theme-airtable .nav-item {
  font-weight: 600 !important;
}
body.theme-pro-light .brand-title, body.theme-light .brand-title, body.theme-notion .brand-title, body.theme-airtable .brand-title {
  font-weight: 700 !important;
}
body.theme-pro-light .kpi-label, body.theme-light .kpi-label, body.theme-notion .kpi-label, body.theme-airtable .kpi-label,
body.theme-pro-light .panel-title, body.theme-light .panel-title, body.theme-notion .panel-title, body.theme-airtable .panel-title,
body.theme-pro-light .section-title, body.theme-light .section-title, body.theme-notion .section-title, body.theme-airtable .section-title,
body.theme-pro-light .dash-section-title, body.theme-light .dash-section-title, body.theme-notion .dash-section-title, body.theme-airtable .dash-section-title,
body.theme-pro-light .bank-co-name, body.theme-light .bank-co-name, body.theme-notion .bank-co-name, body.theme-airtable .bank-co-name,
body.theme-pro-light .bank-co-code, body.theme-light .bank-co-code, body.theme-notion .bank-co-code, body.theme-airtable .bank-co-code,
body.theme-pro-light .bb-strip-label, body.theme-light .bb-strip-label, body.theme-notion .bb-strip-label, body.theme-airtable .bb-strip-label,
body.theme-pro-light .bank-grand-eyebrow, body.theme-light .bank-grand-eyebrow, body.theme-notion .bank-grand-eyebrow, body.theme-airtable .bank-grand-eyebrow,
body.theme-pro-light .bank-grand-label, body.theme-light .bank-grand-label, body.theme-notion .bank-grand-label, body.theme-airtable .bank-grand-label {
  font-weight: 700 !important;
  color: #334155 !important;
}
body.theme-pro-light .kpi-value, body.theme-light .kpi-value, body.theme-notion .kpi-value, body.theme-airtable .kpi-value,
body.theme-pro-light .bank-card-balance, body.theme-light .bank-card-balance, body.theme-notion .bank-card-balance, body.theme-airtable .bank-card-balance,
body.theme-pro-light .bank-grand-amount, body.theme-light .bank-grand-amount, body.theme-notion .bank-grand-amount, body.theme-airtable .bank-grand-amount,
body.theme-pro-light .bs-num, body.theme-light .bs-num, body.theme-notion .bs-num, body.theme-airtable .bs-num,
body.theme-pro-light .bb-strip-grand, body.theme-light .bb-strip-grand, body.theme-notion .bb-strip-grand, body.theme-airtable .bb-strip-grand,
body.theme-pro-light .bb-total, body.theme-light .bb-total, body.theme-notion .bb-total, body.theme-airtable .bb-total {
  font-weight: 700 !important;
}
body.theme-pro-light .tbl thead th, body.theme-light .tbl thead th, body.theme-notion .tbl thead th, body.theme-airtable .tbl thead th {
  font-weight: 600 !important;
  color: #334155 !important;
}
body.theme-pro-light .tbl tbody td, body.theme-light .tbl tbody td, body.theme-notion .tbl tbody td, body.theme-airtable .tbl tbody td {
  font-weight: 500 !important;
  color: #0F172A !important;
}

/* Strong mute contrast — dim was too pale */
body.theme-pro-light, body.theme-light, body.theme-notion, body.theme-airtable {
  --text-mute: #334155 !important;
  --text-dim: #64748B !important;
}

/* Badges — thicker on light */
body.theme-pro-light .badge, body.theme-light .badge, body.theme-notion .badge, body.theme-airtable .badge,
body.theme-pro-light .pill, body.theme-light .pill, body.theme-notion .pill, body.theme-airtable .pill {
  font-weight: 600 !important;
}

/* Buttons — thicker + stronger border */
body.theme-pro-light .btn, body.theme-light .btn, body.theme-notion .btn, body.theme-airtable .btn {
  font-weight: 600 !important;
  border-color: #CBD5E1 !important;
}

/* Chip filter · active bolder */
body.theme-pro-light .chip-filter, body.theme-light .chip-filter, body.theme-notion .chip-filter, body.theme-airtable .chip-filter {
  font-weight: 600 !important;
}

/* ============================================================
   PHASE 2s · Fix .bs-num sizing bleed into usage table
   ============================================================ */

/* .bs-num inside the usage table is a table cell · not a hero KPI · shrink */
.bs-usage-table .bs-num,
body.theme-pro-dark .bs-usage-table .bs-num,
body.theme-pro-light .bs-usage-table .bs-num,
body.theme-light .bs-usage-table .bs-num,
body.theme-notion .bs-usage-table .bs-num,
body.theme-airtable .bs-usage-table .bs-num,
body.theme-airtable-dark .bs-usage-table .bs-num {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  font-family: var(--mono) !important;
  text-shadow: none !important;
}

/* Table header + first-column period label · tighten */
.bs-usage-table thead th {
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  padding: 8px 10px !important;
  line-height: 1.2;
}
.bs-usage-table tbody td {
  font-size: 12.5px !important;
  padding: 8px 10px !important;
  line-height: 1.35;
}
.bs-usage-table tbody td:first-child {
  font-weight: 600;
}

/* TX count sub-numbers (72x / 0x) · smaller mute */
.bs-usage-table .bs-tx-split {
  font-size: 10px !important;
  color: var(--text-dim) !important;
  margin-left: 3px;
}

/* Usage header top of tab · tighten */
.bs-usage-header {
  padding: 10px 0 12px !important;
}
.bs-usage-started-lbl { font-size: 10px !important; letter-spacing: 0.06em; }
.bs-usage-started-val { font-size: 13px !important; font-weight: 600; }
.bs-usage-period-btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
}
.bs-usage-totals {
  font-size: 12px !important;
  padding: 8px 12px !important;
}

/* Bank Status modal body padding + tab headers tighten */
.bs-modal-body { padding: 16px 20px !important; }
.bs-tab-panel { padding: 16px 0 !important; }

/* ============================================================
   PHASE 2t · More visible status badges (ACTIVE / etc.)
   ============================================================ */
.badge, .pill {
  padding: 3px 9px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border: 1px solid transparent !important;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* DARK theme · stronger tints so ACTIVE reads */
body.theme-pro-dark .badge.success, body.theme-pro-dark .pill.success, body.theme-pro-dark .pill.active, body.theme-pro-dark .pill.completed,
body.theme-dark .badge.success, body.theme-dark .pill.success, body.theme-dark .pill.active, body.theme-dark .pill.completed,
body.theme-linear .badge.success, body.theme-linear .pill.success, body.theme-linear .pill.active, body.theme-linear .pill.completed,
body.theme-airtable-dark .badge.success, body.theme-airtable-dark .pill.success, body.theme-airtable-dark .pill.active, body.theme-airtable-dark .pill.completed {
  background: rgba(76,183,130,0.22) !important;
  color: #6ED9A5 !important;
  border-color: rgba(76,183,130,0.35) !important;
}
body.theme-pro-dark .badge.danger, body.theme-pro-dark .pill.danger, body.theme-pro-dark .pill.failed, body.theme-pro-dark .pill.blocked,
body.theme-dark .badge.danger, body.theme-dark .pill.danger, body.theme-dark .pill.failed, body.theme-dark .pill.blocked,
body.theme-linear .badge.danger, body.theme-linear .pill.danger, body.theme-linear .pill.failed, body.theme-linear .pill.blocked,
body.theme-airtable-dark .badge.danger, body.theme-airtable-dark .pill.danger, body.theme-airtable-dark .pill.failed, body.theme-airtable-dark .pill.blocked {
  background: rgba(229,72,77,0.22) !important;
  color: #FF7A80 !important;
  border-color: rgba(229,72,77,0.35) !important;
}
body.theme-pro-dark .badge.warn, body.theme-pro-dark .pill.warn, body.theme-pro-dark .pill.pending, body.theme-pro-dark .pill.restricted,
body.theme-dark .badge.warn, body.theme-dark .pill.warn, body.theme-dark .pill.pending, body.theme-dark .pill.restricted,
body.theme-linear .badge.warn, body.theme-linear .pill.warn, body.theme-linear .pill.pending, body.theme-linear .pill.restricted,
body.theme-airtable-dark .badge.warn, body.theme-airtable-dark .pill.warn, body.theme-airtable-dark .pill.pending, body.theme-airtable-dark .pill.restricted {
  background: rgba(229,167,60,0.22) !important;
  color: #FFCB6A !important;
  border-color: rgba(229,167,60,0.35) !important;
}
body.theme-pro-dark .badge.info, body.theme-pro-dark .pill.info,
body.theme-dark .badge.info, body.theme-dark .pill.info,
body.theme-linear .badge.info, body.theme-linear .pill.info,
body.theme-airtable-dark .badge.info, body.theme-airtable-dark .pill.info {
  background: rgba(76,173,233,0.22) !important;
  color: #7FCBFA !important;
  border-color: rgba(76,173,233,0.35) !important;
}
body.theme-pro-dark .badge.mute, body.theme-pro-dark .pill.mute, body.theme-pro-dark .pill.inactive,
body.theme-dark .badge.mute, body.theme-dark .pill.mute, body.theme-dark .pill.inactive,
body.theme-linear .badge.mute, body.theme-linear .pill.mute, body.theme-linear .pill.inactive,
body.theme-airtable-dark .badge.mute, body.theme-airtable-dark .pill.mute, body.theme-airtable-dark .pill.inactive {
  background: rgba(148,163,184,0.16) !important;
  color: #B4BAC5 !important;
  border-color: rgba(148,163,184,0.28) !important;
}

/* LIGHT theme · stronger too */
body.theme-pro-light .badge.success, body.theme-pro-light .pill.success, body.theme-pro-light .pill.active, body.theme-pro-light .pill.completed,
body.theme-light .badge.success, body.theme-light .pill.success, body.theme-light .pill.active, body.theme-light .pill.completed,
body.theme-notion .badge.success, body.theme-notion .pill.success, body.theme-notion .pill.active, body.theme-notion .pill.completed,
body.theme-airtable .badge.success, body.theme-airtable .pill.success, body.theme-airtable .pill.active, body.theme-airtable .pill.completed {
  background: #D1FADF !important;
  color: #027A48 !important;
  border-color: #A6F4C5 !important;
}
body.theme-pro-light .badge.danger, body.theme-pro-light .pill.danger, body.theme-pro-light .pill.failed, body.theme-pro-light .pill.blocked,
body.theme-light .badge.danger, body.theme-light .pill.danger, body.theme-light .pill.failed, body.theme-light .pill.blocked,
body.theme-notion .badge.danger, body.theme-notion .pill.danger, body.theme-notion .pill.failed, body.theme-notion .pill.blocked,
body.theme-airtable .badge.danger, body.theme-airtable .pill.danger, body.theme-airtable .pill.failed, body.theme-airtable .pill.blocked {
  background: #FEE4E2 !important;
  color: #B42318 !important;
  border-color: #FDA29B !important;
}
body.theme-pro-light .badge.warn, body.theme-pro-light .pill.warn, body.theme-pro-light .pill.pending, body.theme-pro-light .pill.restricted,
body.theme-light .badge.warn, body.theme-light .pill.warn, body.theme-light .pill.pending, body.theme-light .pill.restricted,
body.theme-notion .badge.warn, body.theme-notion .pill.warn, body.theme-notion .pill.pending, body.theme-notion .pill.restricted,
body.theme-airtable .badge.warn, body.theme-airtable .pill.warn, body.theme-airtable .pill.pending, body.theme-airtable .pill.restricted {
  background: #FEF3D5 !important;
  color: #B54708 !important;
  border-color: #FEDF89 !important;
}
body.theme-pro-light .badge.info, body.theme-pro-light .pill.info,
body.theme-light .badge.info, body.theme-light .pill.info,
body.theme-notion .badge.info, body.theme-notion .pill.info,
body.theme-airtable .badge.info, body.theme-airtable .pill.info {
  background: #E0F2FE !important;
  color: #026AA2 !important;
  border-color: #B9E6FE !important;
}
body.theme-pro-light .badge.mute, body.theme-pro-light .pill.mute, body.theme-pro-light .pill.inactive,
body.theme-light .badge.mute, body.theme-light .pill.mute, body.theme-light .pill.inactive,
body.theme-notion .badge.mute, body.theme-notion .pill.mute, body.theme-notion .pill.inactive,
body.theme-airtable .badge.mute, body.theme-airtable .pill.mute, body.theme-airtable .pill.inactive {
  background: #F1F5F9 !important;
  color: #475467 !important;
  border-color: #CBD5E1 !important;
}

/* ============================================================
   PHASE 2u · Bank Statement claimed-unclaim row styling
   ============================================================ */
.bs-tbl tr.claimed-unclaim {
  opacity: 0.7;
  background: rgba(148,163,184,0.03);
}
.bs-tbl tr.claimed-unclaim td {
  color: var(--text-mute);
}
.bs-tbl tr.claimed-unclaim .amt-in {
  font-style: italic;
}

/* ============================================================
   PHASE 2v · Solid-color status badges · white text · no border
   ============================================================ */

/* Universal shape polish */
.badge, .pill {
  padding: 3px 10px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  line-height: 1.5;
  color: white !important;
  text-shadow: none !important;
}

/* SUCCESS · green solid (ACTIVE / RESOLVED / COMPLETED) */
.badge.success, .pill.success, .pill.active, .pill.completed {
  background: #10B981 !important;
  color: white !important;
}
body.theme-pro-light .badge.success, body.theme-pro-light .pill.success, body.theme-pro-light .pill.active, body.theme-pro-light .pill.completed,
body.theme-light .badge.success, body.theme-light .pill.success, body.theme-light .pill.active, body.theme-light .pill.completed,
body.theme-notion .badge.success, body.theme-notion .pill.success, body.theme-notion .pill.active, body.theme-notion .pill.completed,
body.theme-airtable .badge.success, body.theme-airtable .pill.success, body.theme-airtable .pill.active, body.theme-airtable .pill.completed {
  background: #10B981 !important;
  color: white !important;
  border-color: transparent !important;
}

/* DANGER · red solid (BLOCKED / FAILED) */
.badge.danger, .pill.danger, .pill.failed, .pill.blocked {
  background: #EF4444 !important;
  color: white !important;
}
body.theme-pro-light .badge.danger, body.theme-pro-light .pill.danger, body.theme-pro-light .pill.failed, body.theme-pro-light .pill.blocked,
body.theme-light .badge.danger, body.theme-light .pill.danger, body.theme-light .pill.failed, body.theme-light .pill.blocked,
body.theme-notion .badge.danger, body.theme-notion .pill.danger, body.theme-notion .pill.failed, body.theme-notion .pill.blocked,
body.theme-airtable .badge.danger, body.theme-airtable .pill.danger, body.theme-airtable .pill.failed, body.theme-airtable .pill.blocked {
  background: #EF4444 !important;
  color: white !important;
  border-color: transparent !important;
}

/* WARN · amber solid (RESTRICTED / PENDING / IN PROGRESS) */
.badge.warn, .pill.warn, .pill.pending, .pill.restricted {
  background: #F59E0B !important;
  color: white !important;
}
body.theme-pro-light .badge.warn, body.theme-pro-light .pill.warn, body.theme-pro-light .pill.pending, body.theme-pro-light .pill.restricted,
body.theme-light .badge.warn, body.theme-light .pill.warn, body.theme-light .pill.pending, body.theme-light .pill.restricted,
body.theme-notion .badge.warn, body.theme-notion .pill.warn, body.theme-notion .pill.pending, body.theme-notion .pill.restricted,
body.theme-airtable .badge.warn, body.theme-airtable .pill.warn, body.theme-airtable .pill.pending, body.theme-airtable .pill.restricted {
  background: #F59E0B !important;
  color: white !important;
  border-color: transparent !important;
}

/* INFO · blue solid (IN PROGRESS / PROCESSING) */
.badge.info, .pill.info {
  background: #3B82F6 !important;
  color: white !important;
}
body.theme-pro-light .badge.info, body.theme-pro-light .pill.info,
body.theme-light .badge.info, body.theme-light .pill.info,
body.theme-notion .badge.info, body.theme-notion .pill.info,
body.theme-airtable .badge.info, body.theme-airtable .pill.info {
  background: #3B82F6 !important;
  color: white !important;
  border-color: transparent !important;
}

/* MUTE · slate solid (INACTIVE / CLAIMED) */
.badge.mute, .pill.mute, .pill.inactive {
  background: #64748B !important;
  color: white !important;
}
body.theme-pro-light .badge.mute, body.theme-pro-light .pill.mute, body.theme-pro-light .pill.inactive,
body.theme-light .badge.mute, body.theme-light .pill.mute, body.theme-light .pill.inactive,
body.theme-notion .badge.mute, body.theme-notion .pill.mute, body.theme-notion .pill.inactive,
body.theme-airtable .badge.mute, body.theme-airtable .pill.mute, body.theme-airtable .pill.inactive {
  background: #94A3B8 !important;
  color: white !important;
  border-color: transparent !important;
}

/* Bank direction chip · same solid treatment */
.bank-dir-chip.dep { background: #10B981 !important; color: white !important; border: none !important; }
.bank-dir-chip.wd  { background: #EF4444 !important; color: white !important; border: none !important; }
.bank-dir-chip.both{ background: #3B82F6 !important; color: white !important; border: none !important; }
.bank-dir-chip.off { background: #64748B !important; color: white !important; border: none !important; opacity: 0.7; }

/* ============================================================
   PHASE 2w · Solid badges · higher-specificity override
   Earlier body.theme-pro-dark .badge.success (Phase 2t) was
   winning by specificity over Phase 2v's plain .badge.success.
   Re-declare with theme scope so solid colors actually apply.
   ============================================================ */

body.theme-pro-dark .badge.success, body.theme-pro-dark .pill.success, body.theme-pro-dark .pill.active, body.theme-pro-dark .pill.completed,
body.theme-dark .badge.success, body.theme-dark .pill.success, body.theme-dark .pill.active, body.theme-dark .pill.completed,
body.theme-linear .badge.success, body.theme-linear .pill.success, body.theme-linear .pill.active, body.theme-linear .pill.completed,
body.theme-airtable-dark .badge.success, body.theme-airtable-dark .pill.success, body.theme-airtable-dark .pill.active, body.theme-airtable-dark .pill.completed {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border: none !important;
}

body.theme-pro-dark .badge.danger, body.theme-pro-dark .pill.danger, body.theme-pro-dark .pill.failed, body.theme-pro-dark .pill.blocked,
body.theme-dark .badge.danger, body.theme-dark .pill.danger, body.theme-dark .pill.failed, body.theme-dark .pill.blocked,
body.theme-linear .badge.danger, body.theme-linear .pill.danger, body.theme-linear .pill.failed, body.theme-linear .pill.blocked,
body.theme-airtable-dark .badge.danger, body.theme-airtable-dark .pill.danger, body.theme-airtable-dark .pill.failed, body.theme-airtable-dark .pill.blocked {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  border: none !important;
}

body.theme-pro-dark .badge.warn, body.theme-pro-dark .pill.warn, body.theme-pro-dark .pill.pending, body.theme-pro-dark .pill.restricted,
body.theme-dark .badge.warn, body.theme-dark .pill.warn, body.theme-dark .pill.pending, body.theme-dark .pill.restricted,
body.theme-linear .badge.warn, body.theme-linear .pill.warn, body.theme-linear .pill.pending, body.theme-linear .pill.restricted,
body.theme-airtable-dark .badge.warn, body.theme-airtable-dark .pill.warn, body.theme-airtable-dark .pill.pending, body.theme-airtable-dark .pill.restricted {
  background: #F59E0B !important;
  color: #FFFFFF !important;
  border: none !important;
}

body.theme-pro-dark .badge.info, body.theme-pro-dark .pill.info,
body.theme-dark .badge.info, body.theme-dark .pill.info,
body.theme-linear .badge.info, body.theme-linear .pill.info,
body.theme-airtable-dark .badge.info, body.theme-airtable-dark .pill.info {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
  border: none !important;
}

body.theme-pro-dark .badge.mute, body.theme-pro-dark .pill.mute, body.theme-pro-dark .pill.inactive,
body.theme-dark .badge.mute, body.theme-dark .pill.mute, body.theme-dark .pill.inactive,
body.theme-linear .badge.mute, body.theme-linear .pill.mute, body.theme-linear .pill.inactive,
body.theme-airtable-dark .badge.mute, body.theme-airtable-dark .pill.mute, body.theme-airtable-dark .pill.inactive {
  background: #64748B !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Force text color on the span inner elements too, so no descendant color inheritance sabotages the badge label */
.badge, .badge *, .pill, .pill * { color: inherit !important; }

/* ============================================================
   PHASE 2x · Passed Banks section styling
   ============================================================ */
.passed-banks-card { opacity: 0.95; }
.bank-config-card--passed {
  background: rgba(148,163,184,0.04) !important;
  border-style: dashed !important;
}
.bank-config-item.bank-passed {
  opacity: 0.85;
  background: rgba(148,163,184,0.03);
}
.bank-config-item.bank-passed .bank-config-info strong {
  color: var(--text-mute);
}

/* Reactivate button subtle accent · light theme + dark theme */
.bank-passed .btn.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
}

/* ============================================================
   PHASE 2y · Wider Bank Config grid + Settings sub-nav
   ============================================================ */

/* Settings sub-nav narrower · content wider · extra gap between sidebar
   border and content panel so the panel doesn't visually touch the divider. */
.settings-layout {
  grid-template-columns: 170px 1fr !important;
  gap: 48px !important;
}

/* Bank config grid: switch from horizontal-scroll flex to responsive grid.
   Cards flow to multiple rows so many companies stay readable, and each card
   fills its column instead of being locked to 320px. */
.bank-config-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  overflow-x: visible !important;
  padding-bottom: 0 !important;
}
.bank-config-card {
  flex: initial !important;
  max-width: none !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Settings wrap · full · zero side padding · let card use every pixel */
.settings-wrap--full {
  padding: 4px 0 !important;
}
.settings-wrap--full .settings-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.settings-wrap--full .settings-head {
  padding: 0 4px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 16px;
}
.settings-wrap--full .settings-body {
  padding: 0 !important;
}

/* ============================================================
   PHASE 2z · Compact bank row · name + actions only
   ============================================================ */
.bank-item-compact {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--line);
  min-height: 36px;
}
.bank-item-compact:last-child { border-bottom: none; }
.bank-item-compact:hover { background: var(--bg-hover); }
.bank-item-compact .bank-drag-handle {
  cursor: grab;
  color: var(--text-dim);
  font-size: 12px;
  padding: 2px 4px;
}
.bank-item-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.bank-item-name strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bank-item-name .badge {
  padding: 1px 6px !important;
  font-size: 10px !important;
}
.bank-config-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.bank-config-actions .btn.btn-sm {
  padding: 3px 8px !important;
  font-size: 11px !important;
  min-height: auto !important;
}

/* ============================================================
   PHASE 2aa · Per-company Active/Inactive chip inside header
   ============================================================ */
.bank-co-status-chips {
  margin-left: auto;
  transform: scale(0.85);
  transform-origin: left center;
}
.bank-co-status-chips .chip-filter {
  padding: 3px 8px !important;
  font-size: 11px !important;
}
.bank-co-status-chips .chip-filter .cnt {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 4px;
  padding: 1px 5px;
  background: rgba(148,163,184,0.15);
  border-radius: 3px;
}
.bank-co-status-chips .chip-filter.on .cnt {
  background: rgba(255,255,255,0.15);
  color: white;
}
.bank-co-header .bank-co-left {
  flex: 1;
}
.bank-empty-state {
  padding: 20px 12px;
  text-align: center;
  color: var(--text-mute);
  font-size: 12px;
  font-style: italic;
  background: var(--bg-panel-alt);
  border-radius: 8px;
  margin-bottom: 12px;
}

/* ============================================================
   PHASE 2bb · Wider Bank Config cards · full bank names visible
   ============================================================ */
.bank-config-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 14px !important;
}
.bank-config-card {
  min-width: 0 !important;
}
.bank-item-name strong {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.3;
}
.bank-item-compact {
  padding: 8px 12px !important;
  align-items: center !important;
}
.bank-item-name {
  overflow: visible !important;
  min-width: 0;
  flex: 1;
}

/* ============================================================
   PHASE 2cc · Per-company Active/Inactive chip · bigger + inline
   ============================================================ */
.bank-co-status-chips {
  margin-left: 8px !important;
  transform: none !important;
}
.bank-co-status-chips .chip-filter {
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.bank-co-status-chips .chip-filter .cnt {
  font-size: 11px !important;
  padding: 1px 6px !important;
  margin-left: 5px !important;
}

/* ============================================================
   PHASE 3a · Bank card metadata chips (VPN · phone · notes)
   ============================================================ */
.bank-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 4px;
  padding: 4px 0;
  border-top: 1px dashed var(--line);
}
.bank-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-panel-alt);
  color: var(--text-mute);
  font-size: 10px;
  font-family: var(--mono);
  border: 1px solid var(--line);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   PHASE 3b · Security tab · 2FA UI
   ============================================================ */
.sec-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
.sec-status-on { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.06); }
.sec-status-off { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.04); }
.sec-status-title { font-size: 15px; font-weight: 600; color: var(--text); }
.sec-status-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.sec-actions { display: flex; gap: 8px; }

/* ============================================================
 * PHASE 3c · Settings → Access Control (IP whitelist)
 * ============================================================ */
.ipw-your-ip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-panel-alt);
  margin-bottom: 20px;
}
.ipw-your-ip-label { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.5px; }
.ipw-your-ip-value { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--text); margin: 4px 0 2px; }
.ipw-your-ip-status { font-size: 12px; font-weight: 500; }
.ipw-your-ip-status.on { color: #10B981; }
.ipw-your-ip-status.off { color: #F59E0B; }

.ipw-mode-block { margin-bottom: 24px; }
.ipw-mode-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.ipw-mode-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ipw-mode-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-panel-alt);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ipw-mode-opt:hover { border-color: var(--accent); }
.ipw-mode-opt.active { border-color: var(--accent); background: rgba(94,106,210,0.06); }
.ipw-mode-opt input[type=radio] { margin-top: 3px; accent-color: var(--accent); }
.ipw-mode-opt-title { font-size: 13px; font-weight: 600; color: var(--text); }
.ipw-mode-opt-hint { font-size: 11px; color: var(--text-mute); margin-top: 3px; line-height: 1.5; }
@media (max-width: 720px) {
  .ipw-mode-options { grid-template-columns: 1fr; }
  .ipw-your-ip { flex-direction: column; align-items: flex-start; }
}

.ipw-entries-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ipw-entries-head h4 { font-size: 14px; margin: 0; color: var(--text); }
.ipw-tbl code { font-family: var(--mono); font-size: 11px; background: var(--bg-panel-alt); padding: 1px 4px; border-radius: 3px; }

/* ============================================================
 * PHASE 3d · Settings mobile layout · stack + horizontal sub-nav
 * ============================================================ */
@media (max-width: 720px) {
  .settings-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .settings-nav {
    position: static !important;
    top: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 10px !important;
    margin: 0 -12px 4px !important;         /* let scroll bleed to screen edges */
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    gap: 4px !important;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-group {
    display: none !important;                /* CONFIGURATION label eats vertical space */
  }
  .settings-nav .snav-item,
  .settings-nav .settings-tab {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    border-radius: 999px !important;         /* pill chips */
    background: var(--bg-panel-alt) !important;
    border: 1px solid var(--line) !important;
    width: auto !important;
  }
  .settings-nav .snav-item.on,
  .settings-nav .snav-item.active,
  .settings-nav .settings-tab.active {
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    border-color: var(--accent) !important;
  }
  .settings-content { min-width: 0 !important; width: 100% !important; }
  .settings-wrap, .settings-wrap--full { padding: 4px !important; }
  .settings-card { padding: 14px !important; }
  .settings-head h3 { font-size: 15px !important; }
}

/* ============================================================
 * PHASE 3e · Daily Reports · month picker toolbar
 * ============================================================ */
.rp-month-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
}
.rp-month-picker .rp-month-input {
  width: 158px;
  font-family: var(--mono);
  font-size: 12px;
}
.rp-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  background: var(--bg-panel-alt);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  transition: border-color .12s, background .12s;
}
.rp-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.rp-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.rp-today-btn {
  margin-left: 4px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .rp-month-picker { margin-right: 0; margin-bottom: 6px; }
  .rp-month-picker .rp-month-input { width: 130px; }
}

/* Group toolbar actions so Expand-All sits next to + Manual Entry */
.report-toolbar .toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ============================================================
 * PHASE 4a · Pin yellow border + bank metadata block styling
 * ============================================================ */
.bank-card[data-pinned], .bank-card.pinned,
.bank-card.is-pinned {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 2px rgba(251,191,36,0.28) !important;
  background: linear-gradient(180deg, rgba(251,191,36,0.06) 0%, var(--bg-panel) 40%) !important;
}
.bank-card[data-pinned] .bank-card-name,
.bank-card.pinned .bank-card-name,
.bank-card.is-pinned .bank-card-name {
  color: #fbbf24 !important;
}

/* Collapsible bank metadata section */
.bank-meta-block {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  margin-top: 4px;
}
.bank-meta-summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
  user-select: none;
}
.bank-pg-block {
  border: 1px solid rgba(94,106,210,0.35);
  background: rgba(94,106,210,0.05);
  border-radius: 8px;
  padding: 10px 14px;
}

/* Finance page kind badge */
.badge.warn { background: #F59E0B; color: white; }

/* User requested: hide REGION switcher — no cross-currency merchants */
#region-switcher { display: none !important; }

/* ============================================================
 * PHASE 4b · Custom upstream-name suggestion dropdown (mtag)
 * Replaces native <datalist> which renders in browser-controlled
 * position with poor styling. This variant lives directly under
 * the input and matches the app's dark theme.
 * ============================================================ */
.mtag-sugg {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  z-index: 1000;
  padding: 4px 0;
}
.mtag-sugg-opt {
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--text);
  cursor: pointer;
  transition: background 0.08s;
}
.mtag-sugg-opt:hover {
  background: rgba(94,106,210,0.12);
  color: var(--accent-strong, #b3bcff);
}
.mtag-sugg::-webkit-scrollbar { width: 8px; }
.mtag-sugg::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ---------------------------------------------------------
   Direction (Deposits / Withdrawals) — toggle tiles
   Replaces the old chip+checkbox pair. Each option is a
   full-bleed tile: colored border + dot indicator + tick.
   --------------------------------------------------------- */
.bank-dir-field .bank-dir-pick {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
  margin-top: 6px !important;
}
.bank-dir-field .bank-dir-opt {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--line) !important;
  background: var(--bg-panel-alt, rgba(255,255,255,0.02)) !important;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  user-select: none;
}
.bank-dir-field .bank-dir-opt:hover {
  border-color: rgba(255,255,255,0.25) !important;
}
.bank-dir-field .bank-dir-opt:active { transform: scale(0.99); }
/* Kill the raw checkbox — the whole tile is the toggle */
.bank-dir-field .bank-dir-opt input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0; margin: 0;
}
.bank-dir-field .bank-dir-opt-body {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
}
.bank-dir-field .bank-dir-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04) inset;
  flex-shrink: 0;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.bank-dir-field .bank-dir-text {
  display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0;
}
.bank-dir-field .bank-dir-text b {
  font-size: 13px; font-weight: 600; color: var(--text);
  letter-spacing: 0.2px;
}
.bank-dir-field .bank-dir-text small {
  font-size: 11px; color: var(--text-mute); font-weight: 400;
}
.bank-dir-field .bank-dir-tick {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: transparent;
  background: transparent;
  transition: all 0.15s;
  flex-shrink: 0;
}

/* Color hooks — dep = green, wd = red */
.bank-dir-field .bank-dir-opt.dep { color: #22D98A; }
.bank-dir-field .bank-dir-opt.wd  { color: #FF5B5B; }

/* ON state — traffic-light glow */
.bank-dir-field .bank-dir-opt.on {
  border-width: 2px !important;
  border-color: currentColor !important;
  background: transparent !important;
}
.bank-dir-field .bank-dir-opt.dep.on {
  background: rgba(34, 217, 138, 0.12) !important;
  box-shadow:
    0 0 0 1px rgba(34, 217, 138, 0.45),
    0 0 18px rgba(34, 217, 138, 0.45),
    inset 0 0 20px rgba(34, 217, 138, 0.08) !important;
}
.bank-dir-field .bank-dir-opt.wd.on {
  background: rgba(255, 91, 91, 0.12) !important;
  box-shadow:
    0 0 0 1px rgba(255, 91, 91, 0.45),
    0 0 18px rgba(255, 91, 91, 0.45),
    inset 0 0 20px rgba(255, 91, 91, 0.08) !important;
}
.bank-dir-field .bank-dir-opt.on .bank-dir-dot {
  opacity: 1;
}
.bank-dir-field .bank-dir-opt.dep.on .bank-dir-dot {
  box-shadow:
    0 0 0 2px rgba(34, 217, 138, 0.35) inset,
    0 0 10px rgba(34, 217, 138, 0.9),
    0 0 20px rgba(34, 217, 138, 0.55);
}
.bank-dir-field .bank-dir-opt.wd.on .bank-dir-dot {
  box-shadow:
    0 0 0 2px rgba(255, 91, 91, 0.35) inset,
    0 0 10px rgba(255, 91, 91, 0.9),
    0 0 20px rgba(255, 91, 91, 0.55);
}
.bank-dir-field .bank-dir-opt.on .bank-dir-text b {
  color: var(--text);
}
.bank-dir-field .bank-dir-opt.on .bank-dir-tick {
  border-color: currentColor;
  background: currentColor;
  color: #0b0d1a;
}

.bank-dir-field .bank-dir-hint {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-mute);
}
.bank-dir-field .bank-dir-hint-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(59,130,246,0.15);
  color: #60A5FA;
  font-weight: 600;
  font-size: 10px;
  vertical-align: middle;
}

/* Small screens — stack vertically */
@media (max-width: 480px) {
  .bank-dir-field .bank-dir-pick { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Deposit / Withdrawal table — row overflow guardrails
   Any user-provided text field (account_name, remark, handler,
   member_id) is now escapeHtml'd + truncated. This CSS enforces
   the truncation and keeps every row at a consistent height so
   one weird cell can't blow up the row.
   --------------------------------------------------------- */
.tx-tbl tbody td {
  vertical-align: middle !important;
  line-height: 1.4 !important;
  overflow: hidden;
}
.tx-tbl tbody tr {
  height: 44px;
}
.cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-cell-body {
  min-width: 0;
  overflow: hidden;
  max-width: 200px;
}
.member-cell-name,
.member-id-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-cell-inline {
  max-width: 240px;
}

/* Unclaim pager — same visual language as tx-pager but scoped so we don't
   inherit any tx-tbl-specific styling. */
.uc-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
  font-family: var(--mono);
  font-size: 11px;
}
.uc-pager-info {
  color: var(--text-mute);
  letter-spacing: 0.5px;
}
.uc-pager-info b { color: var(--text); }
.uc-pager-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.uc-pager-btn {
  min-width: 30px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.1s;
}
.uc-pager-btn:hover:not(:disabled) {
  border-color: var(--accent, #d4ff3a);
  color: var(--text);
}
.uc-pager-btn.on {
  background: var(--accent, #d4ff3a);
  border-color: var(--accent, #d4ff3a);
  color: #0b0d1a;
  font-weight: 700;
}
.uc-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.uc-pager-gap {
  color: var(--text-mute);
  padding: 0 4px;
  align-self: center;
}

/* Unclaim filter bar — search box + status chips + clear button. Same
   visual language as the Deposits/Withdrawals toolbar (chip-filter + tx-searchbox)
   but scoped so it doesn't collide with those pages' widgets. */
.uc-filter-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  flex-wrap: wrap;
}
.uc-searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  flex: 1 1 300px;
  min-width: 260px;
  transition: border-color 0.12s;
}
.uc-searchbox:focus-within {
  border-color: var(--accent, #d4ff3a);
}
.uc-searchbox svg { color: var(--text-dim); flex-shrink: 0; }
.uc-searchbox input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  width: 100%;
}
.uc-searchbox input::placeholder { color: var(--text-dim); }
.uc-count {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-left: 6px;
}

/* ---------------------------------------------------------
   Payment / MC · Ledger — 2-column layout with side breakdown
   Left  : filters + KPIs + main ledger table (existing)
   Right : per-company + per-bank monthly rollup
   --------------------------------------------------------- */
.fin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.fin-main { min-width: 0; }
.fin-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 78px;
}
.fin-side-card {
  background: var(--bg-2, rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.fin-side-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.fin-side-head small {
  font-size: 10px;
  color: var(--text-mute);
  text-transform: none;
  letter-spacing: 0.5px;
}
.fin-side-empty {
  padding: 20px 8px;
  text-align: center;
  color: var(--text-mute);
  font-size: 11px;
}
.fin-side-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.fin-side-tbl th,
.fin-side-tbl td {
  padding: 6px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fin-side-tbl th {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 6px;
}
.fin-side-tbl td.num,
.fin-side-tbl th.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.fin-side-tbl .pos { color: var(--success, #22D98A); }
.fin-side-tbl .neg { color: var(--danger, #FF5B5B); }
.fin-side-tbl .muted { color: var(--text-mute); }
.fin-side-tbl tfoot td {
  border-top: 1.5px solid var(--line);
  border-bottom: none;
  padding-top: 8px;
  font-size: 12px;
}
.fin-side-tbl tbody tr:hover {
  background: rgba(255,255,255,0.02);
}

/* Today sub-row inside each monthly KPI card — quick daily glance */
.fin-today-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 11px;
}
.fin-today-label {
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10px;
}
.fin-today-val {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fin-today-val.pos { color: var(--success, #22d98a); }
.fin-today-val.neg { color: var(--danger, #ff5b5b); }
.fin-today-val.muted { color: var(--text-mute); }
.fin-today-sub {
  color: var(--text-mute);
  font-size: 10.5px;
  margin-left: auto;
}

/* Below 1200px the side breakdown drops under the main table */
@media (max-width: 1200px) {
  .fin-layout { grid-template-columns: 1fr; }
  .fin-side { position: static; }
}

/* ============================================================
   Bank Config settings — force a readable card width. Earlier rules
   at line ~10068 tried to responsive-grid the layout with 340px min
   columns but something in the cascade allowed columns to collapse to
   ~200px, causing bank names to break letter-by-letter. This block
   pins a clean 3-column layout on typical desktop widths, degrading
   to 2 columns then 1 column at narrower widths.
   ============================================================ */
.bank-config-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  overflow-x: visible !important;
  padding-bottom: 0 !important;
}
@media (max-width: 1300px) {
  .bank-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 780px) {
  .bank-config-grid { grid-template-columns: 1fr !important; }
}
/* Kill the flex-basis + max-width from earlier rules so cards flow. */
.bank-config-card {
  flex: initial !important;
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ============================================================
   Banks page — per-company remaining-capacity bar (sits under the
   company header + status chips). Aggregates across active banks.
   ============================================================ */
.bank-co-capacity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 16px;
  margin: 6px 0 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.bank-co-cap-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bank-co-cap-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bank-co-cap-val {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bank-co-cap-val.pos { color: var(--success, #22d98a); }
.bank-co-cap-val.exhausted { color: var(--danger, #ff5b5b); }
.bank-co-cap-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.3px;
}
.bank-co-cap-sub.muted { color: var(--text-dim); font-style: italic; }
@media (max-width: 900px) {
  .bank-co-capacity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Bank card AT-LIMIT / NEAR-LIMIT — quiet but obvious.
   Just a solid colored border + tiny corner chip. No glow, no
   pulse, no background flooding.
   ============================================================ */
.bank-card.bank-card-over {
  border: 1.5px solid rgba(255, 91, 91, 0.75) !important;
  box-shadow: inset 3px 0 0 rgba(255, 91, 91, 0.9) !important;
}
.bank-card.bank-card-warn {
  border: 1.5px solid rgba(255, 175, 25, 0.55) !important;
  box-shadow: inset 3px 0 0 rgba(255, 175, 25, 0.75) !important;
}
/* Balance row · big number on the left, limit chip on the right so it
   sits inline with the amount instead of hovering above the bank name. */
.bank-card-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bank-card-balance-row .bank-card-balance {
  flex: 1 1 auto;
  min-width: 0;
}

/* Limit-tier chip · lives inside .bank-card-balance-row on the right. */
.bank-lim-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.bank-lim-chip.bank-lim-over {
  background: rgba(255, 91, 91, 0.18);
  color: #ff8b8b;
  border-color: rgba(255, 91, 91, 0.45);
}
.bank-lim-chip.bank-lim-warn {
  background: rgba(255, 175, 25, 0.14);
  color: #ffc866;
  border-color: rgba(255, 175, 25, 0.4);
}
/* Bank name shouldn't break letter-by-letter — the earlier
   word-break:break-word made names go vertical when the card got
   squeezed. Allow normal word wrapping only. */
.bank-item-name strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  display: block !important;
  min-width: 0 !important;
}
.bank-item-name {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.bank-config-item.bank-item-compact {
  align-items: center !important;
}

/* tx-table-scroll */
#dep-table, #wit-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#dep-table > table, #wit-table > table {
  min-width: 960px;
}

/* bank-card-remark */
.bank-card-remark {
  width: 100%;
  margin-top: 8px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-1);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  resize: none;
  min-height: 24px;
  max-height: 72px;
  overflow-y: auto;
  transition: border-color 120ms, background 120ms;
  box-sizing: border-box;
}
.bank-card-remark:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-2);
}
.bank-card-remark::placeholder { color: var(--text-mute); opacity: 0.55; }
.bank-remark-status {
  display: block;
  font-size: 10px;
  min-height: 12px;
  margin-top: 2px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.bank-remark-status.saving { color: var(--warn, #d97706); }
.bank-remark-status.saved  { color: var(--success, #16a34a); }
.bank-remark-status.error  { color: var(--danger, #dc2626); }
.bank-remark-status.editing { color: var(--text-mute); }


/* bb-strip-sticky-hard-override */
.bb-strip {
  position: sticky !important;
  top: 52px !important;
  z-index: 8 !important;
}
/* Force text selection to work everywhere in the app shell — some
   nested elements or themes were inheriting a user-select:none. */
html body, html body #app, html body .main, html body .view-container,
html body .panel, html body .tbl,
html body .tbl td, html body .tbl th,
html body .bank-card, html body .bank-card-balance, html body .bank-card-name,
html body .bb-strip, html body .bb-strip * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default;
}

/* ============================================================
   bb-strip sticky — CORRECT FIX (v3, sticky-wrapper)
   Prior rounds stuck `.bb-strip` itself, but its wrapper
   (#bb-strip-dep / #bb-strip-wit) is only as tall as the strip, so the
   sticky element had ZERO scroll travel and scrolled off with its wrapper.
   The wrapper is a direct child of the tall .view-container, so sticking the
   WRAPPER pins the balance strip below the 52px topbar for the whole scroll.
   ============================================================ */
[id^="bb-strip-"] {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 52px !important;
  z-index: 8 !important;
}
.bb-strip {
  position: static !important;
  top: auto !important;
  box-shadow: none !important;
}

/* bank-cfg-btn-icon */
.bank-config-actions .bank-cfg-btn {
  padding: 2px 8px !important;
  font-size: 10.5px !important;
  min-height: auto !important;
  line-height: 1.4 !important;
}
.bank-config-actions .bank-cfg-btn-icon {
  padding: 2px !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
.bank-config-actions { gap: 3px !important; }

/* bank-hov-btn — PERF: dropped the max-height/margin/padding transitions
   here too (they were the same layout-thrash pattern). Opacity toggle
   from the base .bank-card-hover-actions rule is the only animation. */
.bank-card-hover-actions.bank-hover-icons {
  gap: 6px !important;
  transition: opacity 0.15s ease !important;
}
.bank-card:hover .bank-card-hover-actions.bank-hover-icons {
  transition: opacity 0.15s ease !important;
}
.bank-hov-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
  background: var(--bg-panel-alt, rgba(255,255,255,0.03)) !important;
  color: var(--text) !important;
  cursor: pointer;
  transition: transform 0.08s, border-color 0.12s, background 0.12s;
}
.bank-hov-btn:hover {
  border-color: var(--accent) !important;
  transform: translateY(-1px);
}
.bank-hov-btn:active { transform: scale(0.94); }
.bank-hov-btn.bank-trf-in  { color: var(--success) !important; border-color: rgba(76,183,130,0.32) !important; }
.bank-hov-btn.bank-trf-out { color: var(--danger)  !important; border-color: rgba(229,72,77,0.32) !important; }
.bank-hov-btn.bank-hov-danger { color: var(--danger) !important; border-color: rgba(229,72,77,0.32) !important; }
.bank-hov-btn.is-active {
  background: rgba(212,255,58,0.18) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* bank-cell-locked */
.bank-cell-locked-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.bank-cell-locked-wrap .select.bank-cell-locked {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-2, rgba(255,255,255,0.03)) !important;
  border-color: var(--line) !important;
  color: var(--text-mute) !important;
}
.bank-cell-locked-wrap .select.bank-cell-unlocked {
  opacity: 1;
  border-color: var(--warn, #d97706) !important;
  background: rgba(217,119,6,0.06) !important;
}
.bank-cell-unlock {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-panel-alt, rgba(255,255,255,0.03));
  color: var(--text-mute);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.bank-cell-unlock:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.bank-cell-unlock:disabled {
  opacity: 0.5;
  cursor: default;
}

/* bank-card-share */
.bank-card-share {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  margin-top: 6px;
  background: rgba(93,199,255,0.06);
  border: 1px solid rgba(93,199,255,0.18);
  border-radius: 4px;
  font-size: 10.5px;
  font-family: var(--mono);
  flex-wrap: wrap;
}
.bank-card-share-lbl {
  color: var(--info, #5dc7ff);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.bank-card-share-val {
  font-weight: 700;
  font-size: 11.5px;
}
.bank-card-share-val.pos { color: var(--success, #2dd4a0); }
.bank-card-share-val.neg { color: var(--danger, #ff5a6a); }
.bank-card-share-sub {
  color: var(--text-mute);
  font-size: 10px;
  margin-left: auto;
}

/* Company Loans · external borrower rename button (platform-owner only) */
.ln-borrower-edit {
  background: transparent;
  border: 0;
  color: var(--text-mute);
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  opacity: 0;
  transition: opacity .12s, background .1s, color .1s;
  vertical-align: middle;
  margin-left: 4px;
}
.tbl tr:hover .ln-borrower-edit { opacity: 1; }
.ln-borrower-edit:hover {
  color: var(--accent);
  background: var(--bg-3);
}

/* ============================================================
   CONTRAST BOOST · improve legibility of form fields, labels,
   and secondary text without redesigning the whole theme.
   Added 2026-07-20 per operator feedback (text too dim / hard
   to scan). Applied globally.
============================================================ */

/* Field labels — was --text-dim (#565e75, way too faint on dark bg).
   Bump to full --text + slightly more weight. Keep uppercase small-caps
   look via letter-spacing but drop the 1.5px which made letters spread
   out and become invisible. */
label.field > span {
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
}

/* Nested muted helpers inside a label (e.g. "OPTIONAL" hint) — keep
   them softer than the label itself but readable. */
label.field > span > small,
label.field > span > .muted {
  font-weight: 400;
  color: var(--text-mute);
  letter-spacing: 0.4px;
}

/* Input / select / textarea — explicit bright text + slightly brighter
   background so the value is scannable, not blending with the muted bg. */
.input, .select, textarea.input, textarea.bank-card-remark {
  color: var(--text);
  font-weight: 500;
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.input::placeholder, textarea.input::placeholder,
input::placeholder, textarea::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

/* Muted helper text: brighten a touch so it's still soft but readable.
   The full palette uses #8a92a8 which is fine on solid bg, but on the
   very dark modal bg it disappears. */
.muted {
  color: #a5adc0;
}

/* Modal / panel titles — main heading of a card. Was inheriting text-mute
   in a few spots which made the modal title itself hard to spot. */
.modal-body h2, .modal-body h3, .modal-header h3, .modal-title,
.panel-title, .section-title {
  color: var(--text);
  font-weight: 600;
}

/* Table body cells — ensure default text is not muted */
.tbl tbody td, .table-scroll table tbody td {
  color: var(--text);
}

/* ============================================================
   MODAL DENSITY · wider modals + tighter vertical rhythm.
   Added 2026-07-20 per operator feedback (Edit Bank modal
   requires scrolling; too much whitespace between fields).
============================================================ */

/* Wider modal card so long forms (Edit Bank, Add Bank, Companies)
   have room for 2-column layout without overflow. Confirm dialogs
   still cap to 420px via the .confirm-card override elsewhere. */
.modal-card {
  max-width: 820px;
  max-height: 90vh;
}

/* Tighter form grid — 12px gap instead of 16px, and shrink the
   per-label internal gap from 6 → 4. Makes the same content fit
   30-40% shorter vertically. */
.modal-body {
  padding: 18px 22px;
}
.modal-body .form-grid {
  gap: 10px 14px;
}
.modal-body label.field {
  gap: 3px;
}
.modal-body label.field > span {
  font-size: 10.5px;
  letter-spacing: 0.7px;
}
.modal-body .input,
.modal-body .select,
.modal-body textarea.input {
  padding: 7px 10px;
  font-size: 12px;
}
.modal-body textarea.input {
  min-height: 44px;
}

/* Compact the modal header + footer padding to match */
.modal-head { padding: 14px 22px; }
.modal-actions {
  padding: 12px 22px;
}

/* ============================================================
   MODAL DENSITY v2 · 2-column flow on wide viewports so long
   forms (Edit Bank etc.) fit in one screen without scrolling.
   Truly wide fields (.full — Companies grid, Notes textarea,
   multi-input rows) still span both columns via column-span.
   Falls back to single column below 900px viewport.
============================================================ */
@media (min-width: 900px) {
  /* Wider modal so 2-column form comfortably fits. Stick with the
     original CSS Grid (row-by-row) so logical field pairs like
     Status/Bank-Set and Fee-Rate/VPN stay side-by-side; the
     multi-column flow reshuffled them into columns which was
     surprising. Grid preserves DOM order. */
  .modal-card { max-width: 1000px; }
}
/* Hide the redundant sub-label under company code when the display
   name is just a lowercase copy of the code (WILDPOKIES / wildpokies).
   For merchants whose name is actually different from code (e.g.
   TWCHK / Taipei Chake), the sub-label still shows. */
.company-pick-name.hidden-dup { display: none; }

/* Bank metadata checkbox row — makes the Concession Account checkbox align
   with adjacent text inputs (label on top, "input" row below at same height
   and styling as regular inputs). */
.meta-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  min-height: 32px;
  font-family: var(--mono);
  font-size: 12px;
  user-select: none;
}
.meta-checkbox-row input[type=checkbox] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.meta-checkbox-row:hover { border-color: var(--border-hi, #2f3548); }
.meta-checkbox-row input:checked ~ .meta-checkbox-hint {
  color: var(--accent);
}
.meta-checkbox-hint {
  color: var(--text-mute);
  font-size: 11.5px;
  letter-spacing: 0.4px;
}

/* ---- Daily Reports · Sheet mode ---- */
/* Compact segmented toggle to switch between the classic table view and
   the x-spreadsheet sheet embed. Sits in the reports toolbar next to
   the "Expand All" button. */
.rp-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-2);
}
.rp-mode-btn {
  background: transparent;
  border: none;
  color: var(--text-mute);
  padding: 5px 12px;
  font: 500 12px/1 var(--mono, monospace);
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.rp-mode-btn:hover { color: var(--text); }
.rp-mode-btn.is-active {
  background: var(--accent, #dc2626);
  color: #fff;
}

/* Container for the mounted x-spreadsheet. Full width, tall enough to
   fit ~15 rows without inner scroll; internal scroll takes over past that.
   The vendor lib injects its own DOM inside this host. */
.daily-sheet-host {
  margin-top: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
/* x-spreadsheet's default light chrome clashes with our dark topbar/
   sidebar; keep its interior light but flatten the border-radius so
   it looks flush with our card frame. */
.daily-sheet-host .x-spreadsheet { border-radius: 0; }

/* ---------- Daily Sheet · Google Sheets-style HTML table renderer ---------- */
/* Design goals: proper sans-serif font (Inter, matches the rest of the
   backoffice), complete 1px grid lines (#dadce0 — Google Sheets' grey),
   right-aligned numbers, no zebra (grid does the visual separation),
   per-company theme color driven by --ds-theme (set inline on host).
   Font size mirrors Google Sheets defaults (~13px content, 11px header).
   Uses Inter for the body (falls back to Roboto/Arial). */
.daily-sheet-host {
  --ds-theme: #b91c1c;
  --ds-theme-dark: #7f1d1d;
  --ds-grid: #dadce0;         /* Google Sheets grid grey */
  --ds-grid-soft: #e8eaed;    /* slightly softer for internal rules */
  --ds-text: #202124;
  --ds-muted: #5f6368;
  --ds-hover: #f1f3f4;
  --ds-selected: #1a73e8;
  --ds-zero-bg: #f1f3f4;
  --ds-zero-fg: #9aa0a6;
  --ds-total-bg: #f8f9fa;
}
.ds-card {
  background: #fff;
  border: 1px solid var(--ds-grid);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.04);
}
.ds-title-bar {
  background: var(--ds-theme);
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  font: 700 15px/1.2 'Inter', 'Roboto', -apple-system, Arial, sans-serif;
  letter-spacing: 1.6px;
  border-bottom: 3px solid var(--ds-theme-dark);
}
.ds-scroll {
  overflow: auto;
  max-height: calc(100vh - 240px);
  background: #fff;
}
.ds-table {
  border-collapse: separate; /* separate so sticky borders can double-draw */
  border-spacing: 0;
  font: 13px/1.35 'Inter', 'Roboto', -apple-system, Arial, sans-serif;
  color: var(--ds-text);
  width: max-content;
  min-width: 100%;
}
/* Column header (row 1 of thead). Uses the company theme color; label
   text is white and centered, uppercased in the JS-produced label. */
.ds-table th.ds-hcell {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ds-theme-dark);
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.6px;
  padding: 10px 10px;
  border-right: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(0,0,0,0.15);
  text-align: center;
  min-width: 96px;
  white-space: normal;
  line-height: 1.2;
}
.ds-table th.ds-hcustom {
  background: #3c4043;
  border-right-color: rgba(255,255,255,0.14);
}
/* Data cells — every side gets a 1px grid line, right-aligned for
   numbers (Google Sheets default). */
.ds-table td {
  padding: 6px 10px;
  text-align: right;
  border-right: 1px solid var(--ds-grid);
  border-bottom: 1px solid var(--ds-grid);
  white-space: nowrap;
  background: #fff;
  height: 26px;
}
.ds-table td:first-child { border-left: 1px solid var(--ds-grid); }
/* Sticky first column (DATE) — center-aligned muted, matches sheets' row-number gutter. */
.ds-table td.ds-date {
  position: sticky;
  left: 0;
  z-index: 2;
  color: var(--ds-muted);
  font-weight: 500;
  text-align: center;
  background: #fff;
  border-right: 1px solid var(--ds-grid);
}
/* Alignment helpers */
.ds-num, .ds-int { text-align: right; font-variant-numeric: tabular-nums; }
.ds-pct          { text-align: right; font-variant-numeric: tabular-nums; }
/* Zero-value numeric cells — grey backdrop distinguishes "no data yet"
   from a real zero the user might have keyed in. */
.ds-table td.ds-zero { background: var(--ds-zero-bg); color: var(--ds-zero-fg); }
.ds-table td.ds-date.ds-zero { background: var(--ds-zero-bg); }
/* Override marker (user manually keyed a number) */
.ds-table td.ds-ov { color: var(--ds-theme); font-weight: 700; }
/* Drift — upstream now returns a different value than the manual one */
.ds-table td.ds-drift { background: #fef7e0 !important; color: #b06000; font-weight: 700; }
/* Editable cell hover — thin Google-Sheets-like blue outline */
.ds-table td.ds-edit { cursor: cell; }
.ds-table td.ds-edit:hover { box-shadow: inset 0 0 0 1px var(--ds-selected); background: var(--ds-hover); }
.ds-table td[contenteditable="true"] {
  box-shadow: inset 0 0 0 2px var(--ds-selected);
  background: #fff !important;
  color: var(--ds-text);
  outline: none;
  text-align: right;
}
.ds-table td.ds-date[contenteditable="true"] { text-align: center; }
/* TOTAL row */
.ds-table tfoot tr.ds-total td {
  background: var(--ds-total-bg) !important;
  color: var(--ds-text);
  font-weight: 700;
  font-size: 13px;
  border-top: 2px solid var(--ds-theme);
  padding: 10px;
}
.ds-table tfoot .ds-total-lbl {
  color: var(--ds-theme);
  letter-spacing: 1px;
  text-align: center;
}
/* Right-click cell-style popover */
.ds-cell-menu {
  position: fixed;
  z-index: 10000;
  background: #202124;
  border: 1px solid #3c4043;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 8px 3px rgba(60,64,67,0.15), 0 1px 3px rgba(60,64,67,0.3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  font: 13px 'Inter', 'Roboto', sans-serif;
}
.ds-menu-row { display: flex; gap: 4px; padding: 4px; }
.ds-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
}
.ds-swatch:hover { transform: scale(1.1); border-color: #fff; }
.ds-swatch-lg { width: 28px; height: 28px; }
.ds-menu-btn {
  background: transparent;
  border: none;
  color: #e8eaed;
  padding: 8px 10px;
  font: 500 13px 'Inter', 'Roboto', sans-serif;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
.ds-menu-btn:hover { background: #3c4043; }
.ds-theme-menu { min-width: 260px; }
.ds-theme-title {
  color: #9aa0a6;
  font-size: 10.5px;
  letter-spacing: 1px;
  padding: 4px 4px 2px;
  font-weight: 600;
}

/* Multi-block sheet layout — Total on top, one per company below. */
.ds-block { margin-bottom: 24px; }
.ds-block:last-child { margin-bottom: 0; }
.ds-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.ds-block-title {
  font: 600 13px/1.2 'Inter', 'Roboto', -apple-system, Arial, sans-serif;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text);
}
.ds-block-title .muted { text-transform: none; letter-spacing: 0; margin-left: 4px; }
.ds-block-actions { display: flex; gap: 8px; align-items: center; }
.ds-block-total .ds-block-title { color: var(--accent, #b91c1c); font-weight: 700; }
/* Slight visual gap between total and company blocks */
.ds-block-total { margin-bottom: 32px; }

/* ─────────────────────────────────────────────────────────────
   Bank-card AT-LIMIT / NEAR-LIMIT — light-theme override.
   The blanket "body.theme-light .bank-card { border-color: #D5DDE5 !important }"
   rule at line 9666 has higher specificity than the plain
   ".bank-card.bank-card-over" alert rule, so on white themes the red
   frame silently disappears. Restore it by matching that specificity
   for every white-ish theme, and use a soft pulse (~2s) so it catches
   the eye without being distracting. Respects prefers-reduced-motion.
   ───────────────────────────────────────────────────────────── */
/* Uses ::after overlay so we don't fight the theme-light rule's
   "!important" on the card's own border and box-shadow. The overlay
   is a fresh pseudo-element with no other CSS touching it, so the
   animation runs cleanly. Card has overflow:hidden so we stay
   inside with inset box-shadow. */
body.theme-light   .bank-card.bank-card-over,
body.theme-notion  .bank-card.bank-card-over,
body.theme-airtable .bank-card.bank-card-over,
body.theme-pro-light .bank-card.bank-card-over,
body.theme-light   .bank-card.bank-card-warn,
body.theme-notion  .bank-card.bank-card-warn,
body.theme-airtable .bank-card.bank-card-warn,
body.theme-pro-light .bank-card.bank-card-warn {
  position: relative;
}
body.theme-light   .bank-card.bank-card-over::after,
body.theme-notion  .bank-card.bank-card-over::after,
body.theme-airtable .bank-card.bank-card-over::after,
body.theme-pro-light .bank-card.bank-card-over::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  animation: bank-alert-overlay-red 1.4s ease-in-out infinite;
  z-index: 5;
}
body.theme-light   .bank-card.bank-card-warn::after,
body.theme-notion  .bank-card.bank-card-warn::after,
body.theme-airtable .bank-card.bank-card-warn::after,
body.theme-pro-light .bank-card.bank-card-warn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  animation: bank-alert-overlay-amber 1.8s ease-in-out infinite;
  z-index: 5;
}
@keyframes bank-alert-overlay-red {
  0%, 100% { box-shadow: inset 0 0 0 1.5px #dc2626; }
  50%      { box-shadow: inset 0 0 0 3px   #ef4444; }
}
@keyframes bank-alert-overlay-amber {
  0%, 100% { box-shadow: inset 0 0 0 1.5px #d97706; }
  50%      { box-shadow: inset 0 0 0 3px   #f59e0b; }
}
@media (prefers-reduced-motion: reduce) {
  .bank-card.bank-card-over::after,
  .bank-card.bank-card-warn::after { animation: none !important; }
  body.theme-light   .bank-card.bank-card-over::after,
  body.theme-notion  .bank-card.bank-card-over::after,
  body.theme-airtable .bank-card.bank-card-over::after,
  body.theme-pro-light .bank-card.bank-card-over::after {
    box-shadow: inset 0 0 0 2px #dc2626;
  }
  body.theme-light   .bank-card.bank-card-warn::after,
  body.theme-notion  .bank-card.bank-card-warn::after,
  body.theme-airtable .bank-card.bank-card-warn::after,
  body.theme-pro-light .bank-card.bank-card-warn::after {
    box-shadow: inset 0 0 0 2px #d97706;
  }
}

/* ─────────────────────────────────────────────────────────────
   🔒 LOCKED bank status — bank frozen by upstream. Grayed out
   with lock icon so it's obvious the money is not accessible.
   Balance is EXCLUDED from Grand Total / per-company total
   (handled in JS).
   ───────────────────────────────────────────────────────────── */
.bank-card.bank-locked {
  opacity: 0.6;
  filter: grayscale(0.7);
  position: relative;
}
.bank-card.bank-locked::before {
  content: '🔒 LOCKED';
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  background: rgba(148, 163, 184, 0.20);
  color: var(--text-dim, #94a3b8);
  border-radius: 4px;
  pointer-events: none;
}
.bank-card.bank-locked .bank-card-balance {
  text-decoration: line-through;
  text-decoration-color: rgba(148, 163, 184, 0.6);
  text-decoration-thickness: 2px;
}

/* ─────────────────────────────────────────────────────────────
   🔗 Physical Account Totals — Settings > Banks + Banks sidebar
   Read-only aggregation of per-bank balances by group_name.
   Gated by `bank_physical_totals` policy (rendering) + `bank_group_column`
   policy (input field).
   ───────────────────────────────────────────────────────────── */
.bank-groups-section { margin-bottom: 20px; }
.bank-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
/* Physical account group card — plain layout, no light box overlay. Earlier
   version used --surface-2 fallback that rendered as an odd light halo on
   dark-theme dashboards; keep the padding but drop the visible frame. */
.bank-group-card {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 12px 0;
}
.bank-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--border, rgba(255,255,255,0.08));
}
.bank-group-title { font-weight: 700; font-size: 14px; letter-spacing: 0.02em; }
.bank-group-total { font-weight: 700; font-size: 16px; font-family: var(--mono, ui-monospace); }
.bank-group-total.pos { color: var(--success, #10b981); }
.bank-group-total.neg { color: var(--danger, #ef4444); }
.bank-group-members { display: flex; flex-direction: column; gap: 4px; }
.bank-group-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  padding: 3px 0;
}
.bank-group-co { font-weight: 600; color: var(--text-dim, #94a3b8); font-size: 11px; letter-spacing: 0.03em; }
.bank-group-name { color: var(--text, #e2e8f0); }
.bank-group-bal { font-family: var(--mono, ui-monospace); font-size: 12px; font-weight: 600; }
.bank-group-bal.pos { color: var(--success, #10b981); }
.bank-group-bal.neg { color: var(--danger, #ef4444); }

/* Banks sidebar page — Physical Totals block above per-company sections.
   Frame removed (2026-09-15) — the --surface fallback rendered as an odd
   translucent halo on dark-theme dashboards; layout stays via padding + margin. */
.bank-physical-totals {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
  margin-bottom: 16px;
}
.bank-physical-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.bank-physical-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim, #94a3b8);
}