/* ═══════════════════════════════════════════════════════════════
   ReconAssure – Component Styles
═══════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.15s;
  font-family: inherit;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

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

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

.btn-danger {
  background: var(--color-danger);
  color: #ffffff;
  border-color: var(--color-danger);
}
.btn-danger:hover { filter: brightness(0.9); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.btn-success {
  background: var(--color-success);
  color: #ffffff;
  border-color: var(--color-success);
}
.btn-success:hover { filter: brightness(0.9); }

.btn-sm {
  padding: 5px 10px;
  font-size: 0.8125rem;
  border-radius: 6px;
}

.btn-lg {
  padding: 11px 24px;
  font-size: 1rem;
  border-radius: 10px;
}

.btn-icon {
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.btn-icon:hover { background: var(--color-surface-2); color: var(--color-text); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow:hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
}

.card-body { padding: 20px; }

.card.panel-collapsed .card-body { display: none; }

.panel-toggle-btn { flex-shrink: 0; }
.panel-toggle-btn svg { transition: transform 0.15s ease; }
.card.panel-collapsed .panel-toggle-btn svg { transform: rotate(180deg); }

.card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  border-radius: 0 0 12px 12px;
}

/* ── Stat Cards ───────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.stat-card.stat-danger  .stat-value { color: var(--color-danger); }
.stat-card.stat-success .stat-value { color: var(--color-success); }
.stat-card.stat-warning .stat-value { color: var(--color-warning); }
.stat-card.stat-info    .stat-value { color: var(--color-info); }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}

.badge-wallet  { background: var(--color-wallet-badge-bg);  color: var(--color-wallet-badge-text); }
.badge-bank    { background: var(--color-bank-badge-bg);    color: var(--color-bank-badge-text); }
.badge-success { background: var(--color-success-subtle);   color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-subtle);   color: var(--color-warning-text); }
.badge-danger  { background: var(--color-danger-subtle);    color: var(--color-danger-text); }
.badge-info    { background: var(--color-info-subtle);      color: var(--color-info-text); }
.badge-neutral { background: var(--color-surface-2);        color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--color-text);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.form-control::placeholder { color: var(--color-text-subtle); }

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  margin-top: 4px;
}

.form-error {
  font-size: 0.75rem;
  color: var(--color-danger);
  margin-top: 4px;
}

/* ── Table ────────────────────────────────────────────────── */
.table-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.table-toolbar {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  background: var(--color-surface);
}

.table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: var(--table-max-height, 520px);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

table.data-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-2);
}

table.data-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  user-select: none;
  position: relative;
}

table.data-table thead th.sortable { cursor: pointer; }
table.data-table thead th.sortable:hover { color: var(--color-text); }

/* Column alignment classes must override the default header/cell text-align so
   that headers line up with their detail cells (text left, dates centred, numbers right). */
table.data-table thead th.text-left,
table.data-table tbody td.text-left   { text-align: left; }
table.data-table thead th.text-center,
table.data-table tbody td.text-center { text-align: center; }
table.data-table thead th.text-right,
table.data-table tbody td.text-right  { text-align: right; }

.sort-indicator { display: inline-flex; margin-left: 4px; opacity: 0.5; vertical-align: middle; }
th.sort-asc  .sort-indicator,
th.sort-desc .sort-indicator { opacity: 1; color: var(--color-primary); }

table.data-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
  cursor: pointer;
}

table.data-table tbody tr:last-child { border-bottom: none; }

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

table.data-table tbody tr.selected {
  background: var(--color-primary-subtle);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Alternating background colors for recon groups (grouped by recon_id) */
table.data-table tbody tr.rr-group-odd {
  background: transparent;
}

table.data-table tbody tr.rr-group-even {
  background: var(--color-surface);
}

/* Override hover to maintain group background */
table.data-table tbody tr.rr-group-odd:hover {
  background: var(--color-surface-2);
}

table.data-table tbody tr.rr-group-even:hover {
  background: var(--color-surface-2);
}

table.data-table tbody td {
  padding: 10px 14px;
  color: var(--color-text);
  vertical-align: middle;
  white-space: nowrap;
}

table.data-table tbody td.text-wrap { white-space: normal; max-width: 240px; }

.amount-positive { color: var(--color-positive); font-weight: 600; font-family: 'Cascadia Code','Consolas',monospace; }
.amount-negative { color: var(--color-negative); font-weight: 600; font-family: 'Cascadia Code','Consolas',monospace; }
.amount-neutral  { font-family: 'Cascadia Code','Consolas',monospace; }

.table-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-muted);
}

.table-empty-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  opacity: 0.3;
}

.table-footer {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  gap: 12px;
  flex-wrap: wrap;
  background: var(--color-surface);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 4px;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
}
.page-btn:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-text); }
.page-btn.active { background: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Drill-down links ─────────────────────────────────────── */
.drill-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.drill-link:hover {
  text-decoration: underline;
}

.drill-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.8;
}

/* ── Match score link ─────────────────────────────────────── */
.rr-match-score-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background 0.15s;
}

.rr-match-score-link:hover {
  background: var(--color-primary-subtle);
  text-decoration: underline;
}

/* ── Action buttons: tick and X ──────────────────────────── */
.rr-btn-tick,
.rr-btn-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.15s;
}

.rr-btn-tick {
  color: #10b981; /* green */
}

.rr-btn-tick:hover {
  background: #d1fae5;
  border-color: #10b981;
}

.rr-btn-x {
  color: #ef4444; /* red */
}

.rr-btn-x:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

@media print {
  .drill-link {
    color: inherit !important;
    text-decoration: none !important;
    font-weight: inherit;
  }

  .drill-icon {
    display: none !important;
  }
}
/* ── Column resize handle ─────────────────────────────────── */
.th-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 1;
}
.th-resize-handle:hover,
.th-resize-handle:active {
  background: var(--color-primary);
  opacity: 0.5;
  border-radius: 2px;
}

/* ── Column config modal ──────────────────────────────────── */
.col-config-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.col-config-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  width: 420px;
  max-width: 95vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}

.col-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 0.9375rem;
}

.col-config-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1rem;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  font-family: inherit;
}
.col-config-close:hover { background: var(--color-surface-2); color: var(--color-text); }

.col-config-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.col-config-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

.col-config-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.col-config-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  user-select: none;
  transition: background 0.1s;
}
.col-config-item:hover { background: var(--color-surface-2); }
.col-config-item.col-cfg-dragging { opacity: 0.45; }
.col-config-item.drag-above { border-top: 2px solid var(--color-primary); }
.col-config-item.drag-below { border-bottom: 2px solid var(--color-primary); }

.col-cfg-handle {
  cursor: grab;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
}
.col-cfg-handle:active { cursor: grabbing; }

.col-config-item label {
  flex: 1;
  cursor: pointer;
  font-size: 0.875rem;
}

.col-config-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.col-cfg-sort-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.col-config-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Recon Panel ──────────────────────────────────────────── */
.recon-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
  overflow: hidden;
}

.recon-panel-header {
  padding: 12px 16px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recon-panel-body { padding: 0; }

.recon-balance-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.match-panel-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  max-height: 70vh;
}

table.data-table.match-panel-table {
  width: auto;
  table-layout: auto;
  margin: 0;
  white-space: nowrap;
}

.match-panel-table td,
.match-panel-table th {
  padding: 8px 12px;
  text-overflow: ellipsis;
}

.balance-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.balance-amount {
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Cascadia Code','Consolas',monospace;
}

.balance-zero    { color: var(--color-success); }
.balance-nonzero { color: var(--color-danger); }

.recon-panel-empty {
  padding: 24px;
  text-align: left;
  color: var(--color-text-subtle);
  font-size: 0.875rem;
}

.recon-panel-actions {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-top: 1px solid var(--color-border);
  gap: 12px;
}

/* ── Recon/Reversals viewport-bounded layout ─────────────── */
/* .recon-root fills the flex column #page-content.recon-page  */
.recon-root {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* tab-nav is fixed height; tab-content takes the rest */
.recon-root .tab-nav    { flex-shrink: 0; }

.recon-root #tab-content {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* workspace fills tab-content */
.recon-workspace {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* panel + filterbar are auto-height; table region takes remaining */
.recon-panel      { flex-shrink: 0; min-width: 0; }
.recon-filter-bar { flex-shrink: 0; min-width: 0; }

.recon-workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.recon-filter-bar {
  flex-shrink: 0;
}

.recon-table-region {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* DataTable host: flex column so scroll area grows, footer pins */
.recon-table-host {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.recon-table-host .table-scroll {
  flex: 1;
  min-height: 0;
  max-height: none;   /* override the CSS variable; height comes from flex */
  overflow-x: auto;
  overflow-y: auto;
}

.recon-table-host .table-footer {
  flex-shrink: 0;
}

/* Reconcile Transactions tab: let the whole page scroll vertically instead of
   locking the viewport chain; the table region only handles horizontal overflow. */
body.recon-page.recon-page-scroll,
body.recon-page.recon-page-scroll #app {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

body.recon-page.recon-page-scroll #main-wrapper {
  height: auto;
  overflow: visible;
}

body.recon-page.recon-page-scroll #page-content {
  overflow: visible;
}

body.recon-page.recon-page-scroll .recon-root,
body.recon-page.recon-page-scroll .recon-root #tab-content,
body.recon-page.recon-page-scroll .recon-workspace,
body.recon-page.recon-page-scroll .recon-table-region,
body.recon-page.recon-page-scroll .recon-table-host {
  flex: none;
  min-height: 0;
  overflow: visible;
}

/* Hard safety net: the scroll container itself can never exceed the width
   actually available beside the fixed sidebar, regardless of how wide the
   table content wants to be. #page-content contributes 24px padding each side. */
body.recon-page.recon-page-scroll .recon-table-host {
  max-width: calc(100vw - 240px - 48px);
}

body.sidebar-collapsed.recon-page.recon-page-scroll .recon-table-host {
  max-width: calc(100vw - 64px - 48px);
}

body.recon-page.recon-page-scroll .recon-table-host .table-scroll {
  flex: none;
  max-width: 100%;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

/* Keep the toolbars and the table header pinned in view while the page
   scrolls. Offsets are supplied by JS (recon.js) as CSS custom properties
   since the toolbars' heights can vary (chip wrapping, narrow viewports). */
body.recon-page.recon-page-scroll .recon-root > .filter-bar.recon-filter-bar {
  position: static;
  z-index: 45;
  background: var(--color-bg);
}



body.recon-page.recon-page-scroll .recon-workspace > .filter-bar.recon-filter-bar {
  position: sticky;
  top: 50px;
  z-index: 35;
  background: var(--color-bg);
}

/* `position: sticky` on a <thead> stops tracking page scroll once an
   ancestor uses `overflow-x: auto` (needed above for horizontal scroll) —
   the browser confines it to that ancestor's own (non-scrolling) box
   instead of the viewport. So the real header is left static here, and
   recon.js maintains a floating clone (`.recon-sticky-thead`, styled below)
   that mirrors it once scrolled past the toolbars. */
body.recon-page.recon-page-scroll .recon-table-host table.data-table thead {
  position: static;
}

.recon-sticky-thead {
  position: fixed;
  overflow: hidden;
  z-index: 25;
  box-shadow: var(--shadow-sm);
}

.recon-sticky-thead table.data-table {
  border-collapse: collapse;
  margin: 0;
}

.recon-sticky-thead table.data-table thead {
  position: static;
}

/* ── Modal ────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 16px;
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modal-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.modal-header {
  padding: 20px 24px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
}

.modal-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-icon.info    { background: var(--color-info-subtle); color: var(--color-info); }
.modal-icon.warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.modal-icon.danger  { background: var(--color-danger-subtle); color: var(--color-danger); }
.modal-icon.success { background: var(--color-success-subtle); color: var(--color-success); }

.modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.modal-subtitle { font-size: 0.875rem; color: var(--color-text-muted); }

.modal-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.modal-close:hover { background: var(--color-surface-2); color: var(--color-text); }

.modal-body { padding: 20px 24px; }

.modal-footer {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--color-border);
}

/* ── Alert Items (used inside alert modal) ───────────────── */
.alert-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  margin-bottom: 8px;
}
.alert-item:last-child { margin-bottom: 0; }

.alert-item-subject {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.alert-item-message {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.alert-item-meta {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Toast Notifications ──────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 72px;
  right: 16px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 380px;
  pointer-events: all;
  animation: toast-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast.out {
  animation: toast-out 0.2s ease forwards;
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(16px); }
}

.toast-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-content { flex: 1; }
.toast-title { font-size: 0.875rem; font-weight: 600; color: var(--color-text); margin-bottom: 2px; }
.toast-message { font-size: 0.8125rem; color: var(--color-text-muted); }

.toast-success .toast-icon { color: var(--color-success); }
.toast-error   .toast-icon { color: var(--color-danger); }
.toast-info    .toast-icon { color: var(--color-info); }
.toast-warning .toast-icon { color: var(--color-warning); }

.toast-close {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-subtle); padding: 0; margin-left: 4px;
  display: flex; align-items: center; font-family: inherit;
}
.toast-close:hover { color: var(--color-text); }

/* ── File Upload ──────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--color-border-strong);
  border-radius: 12px;
  padding: 24px 24px;
  text-align: center;
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}
.upload-zone-icon { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--color-text-subtle); }
.upload-zone-label { font-size: 0.9375rem; font-weight: 500; color: var(--color-text); margin-bottom: 4px; }
.upload-zone-hint  { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ── Already-uploaded-today file banner (upload page) ────────────────────── */
.upload-existing-file {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  font-size: 0.8125rem;
}
.upload-existing-file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.upload-existing-file-ts   { color: var(--color-text-muted); margin-left: auto; white-space: nowrap; }

/* ── Processing alerts panel (upload page) ───────────────────────────────── */
.process-alert-item {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8125rem;
}
.process-alert-item:last-child { border-bottom: none; }
.process-alert-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.process-alert-subject { font-weight: 600; color: var(--color-text); }
.process-alert-ts      { margin-left: auto; color: var(--color-text-muted); font-size: 0.75rem; white-space: nowrap; }
.process-alert-message {
  margin-top: 4px;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Progress ─────────────────────────────────────────────── */
.progress-bar-wrap {
  height: 6px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.3s;
}

/* ── Export progress panel (shown for long-running exports) ─ */
.export-progress-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 14px 16px;
  z-index: 700;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.export-progress-panel.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.export-progress-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.export-progress-detail {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* ── Theme Switcher ───────────────────────────────────────── */
.theme-picker {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px;
  background: var(--color-surface-2);
  border-radius: 10px;
  border: 1px solid var(--color-border);
}

.theme-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.theme-swatch:hover { transform: scale(1.15); }
.theme-swatch.active { border-color: var(--color-text); }

.theme-swatch[data-theme="light"]    { background: linear-gradient(135deg, #f0f4f8 50%, #2563eb 50%); }
.theme-swatch[data-theme="dark"]     { background: linear-gradient(135deg, #1a1d27 50%, #60a5fa 50%); }
.theme-swatch[data-theme="colorful"] { background: linear-gradient(135deg, #fdf4ff 50%, #7c3aed 50%); }
.theme-swatch[data-theme="neutral"]  { background: linear-gradient(135deg, #f5f0eb 50%, #57534e 50%); }

/* ── Filter Bar ───────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--color-primary);
}

.tx-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 0 2px;
}

.filter-chip-remove {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  padding: 0;
  line-height: 1;
}
.filter-chip-remove:hover { background: rgba(0,0,0,0.1); }

/* ── Divider ──────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: 16px 0;
}

/* ── Empty State ──────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  color: var(--color-text-subtle);
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}

.empty-state-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  max-width: 320px;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 20px;
  flex-shrink: 0;
  background: var(--color-bg);
  position: relative;
  z-index: 46;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

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

.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 9px;
  background: var(--color-primary);
  color: #fff;
  line-height: 1;
}

/* ── Type Toggle ──────────────────────────────────────────── */
.type-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.type-toggle-btn {
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
  white-space: nowrap;
}
.type-toggle-btn:last-child { border-right: none; }
.type-toggle-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.type-toggle-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* ── Group header rows ────────────────────────────────────── */
table.data-table tbody tr.group-header-row {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
table.data-table tbody tr.group-header-row td {
  padding: 6px 14px;
}
.group-header-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.group-header-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 10px;
  background: var(--color-border-strong);
  color: var(--color-text-muted);
  vertical-align: middle;
}

/* ── Keyboard-focused row ─────────────────────────────────── */
table.data-table tbody tr.kb-focused {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: var(--color-primary-subtle);
}
table.data-table tbody tr.kb-focused:hover {
  background: var(--color-primary-subtle);
}

/* ── Trust Report Summary (per-bank statutory summary card) ──── */
.trust-summary-report {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.trust-summary-report .proSummary {
  width: 100%;
  max-width: 800px;
  border-collapse: collapse;
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
  background: #fff;
  margin-bottom: 1.5em;
}
.trust-summary-report .proSummary tr {
  border-bottom: 1px solid #e0e0e0;
}
.trust-summary-report .proSummary th {
  text-align: left;
  vertical-align: top;
  padding: 2px 4px;
  color: #333;
  font-weight: bold;
  width: 30%;
  font-size: 12px;
}
.trust-summary-report .proSummarySub {
  font-size: 16px;
  font-weight: normal;
}
.trust-summary-report .proSummary td {
  padding: 2px 8px;
  background-color: #fff;
  color: #222;
  border-right: 1px solid #AEAEAE;
}
.trust-summary-report .proSummary .highlight {
  font-weight: bold;
}
.trust-summary-report .proSummary .total {
  background-color: #e6f2ff;
  font-weight: bold;
}
.trust-summary-report .proSummary .subtotal {
  background-color: #f0f8ff;
  font-weight: 500;
}
.trust-summary-report .proSummary .alert td {
  background-color: #ffe5e5;
  color: #b30000;
  font-weight: bold;
}
.trust-summary-report .proSummary .info td {
  background-color: #e6f7ff;
  color: #0077cc;
}


/* ── File upload queue ─────────────────────────────────────────────────────── */
.file-queue {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.file-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-surface-2);
  border-radius: 6px;
  font-size: 0.8125rem;
  transition: background 0.15s;
}
.file-queue-item[data-status="invalid"] {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}
.file-queue-item[data-status="done"] {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}
.fq-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fq-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fq-size {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.fq-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  max-width: 260px;
}
.fq-progress-wrap {
  width: 100px;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.fq-progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.2s ease;
}
.fq-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.fq-badge.fq-pending { background: var(--color-border); color: var(--color-text-muted); }
.fq-badge.fq-done    { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }
.fq-badge.fq-fail    { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.fq-error-msg {
  font-size: 0.75rem;
  color: var(--color-danger);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fq-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: 4px;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.fq-remove:hover {
  background: var(--color-border);
  color: var(--color-danger);
}

/* ── Upload history status badges ──────────────────────────────────────────── */
.badge-status-uploaded   { background: color-mix(in srgb, var(--color-info, #3b82f6) 15%, transparent); color: var(--color-info, #3b82f6); }
.badge-status-processing { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.badge-status-processed  { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.badge-status-error      { background: color-mix(in srgb, var(--color-danger)  15%, transparent); color: var(--color-danger);  }

/* ── Alert list ────────────────────────────────────────────────────────────────── */
.alert-unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-warning);
}
table.data-table tbody tr.alert-row {
  cursor: pointer;
}
table.data-table tbody tr.alert-row.is-read > td {
  opacity: 0.6;
}
table.data-table tbody tr.alert-row.is-expanded > td {
  background: var(--color-primary-subtle);
  opacity: 1;
}
table.data-table tbody tr.alert-detail-row > td {
  padding: 0 16px 14px 16px;
  background: var(--color-surface-2);
  border-top: none;
}
.alert-subject {
  font-weight: 600;
  color: var(--color-text);
}
.alert-preview {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  max-width: 420px;
  white-space: normal;
}
.alert-detail-body {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  padding: 10px 0;
  max-width: 800px;
}

/* ── Overview dashboard ─────────────────────────────────────── */
.ov-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.ov-kpi {
  text-align: left;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--accent, var(--color-primary));
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ov-kpi:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.ov-kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ov-kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 4px;
  line-height: 1.1;
}
.ov-kpi-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Percentage shown beside a figure in a table cell. Sits on its own line so it
   never competes with the number it qualifies, and stays muted so the raw
   figure remains the primary read. */
.pct-note {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.ov-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}
.ov-card { margin-bottom: 0; }
.ov-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ov-card-body { padding: 12px 16px; }

.ov-target-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  overflow: hidden;
}
.ov-target-btn {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  border: none;
}
.ov-target-btn + .ov-target-btn { border-left: 1px solid var(--color-border-strong); }
.ov-target-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.ov-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 6px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.ov-bar-row:hover { background: var(--color-surface-2); }
.ov-bar-label {
  font-size: 0.8125rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-card[style*="grid-column: span 2"] .ov-bar-label {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}
.ov-bar-track {
  height: 12px;
  border-radius: 6px;
  background: var(--color-surface-2);
  overflow: hidden;
}
.ov-bar-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  min-width: 2px;
  transition: width 0.3s ease;
}
.ov-bar-val {
  text-align: right;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ov-bar-amt { font-size: 0.8125rem; font-weight: 600; color: var(--color-text); }
.ov-bar-cnt { font-size: 0.6875rem; color: var(--color-text-muted); }

.ov-donut-body {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ov-donut {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ov-donut-hole {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--color-surface);
}
.ov-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 160px;
}
.ov-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  flex: 0 1 auto;
}
.ov-legend-row:hover { background: var(--color-surface-2); }
.ov-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ov-legend-label { font-size: 0.8125rem; color: var(--color-text); flex-shrink: 1; min-width: 0; }
.ov-legend-val { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }

.ov-empty {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  padding: 24px 8px;
  text-align: center;
}

/* ── Overview / Aging controls ───────────────────────────────── */

/* Page-level switches (Figures, Drill to) sit on their own row under the
   filters, so the filter bar keeps its shape. */
.ov-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.ov-control-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ov-control-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* The By Value / By Count pair reuses the segmented-toggle styling the drill
   target used, so the two read as the same kind of control. */
.ov-metric-toggle { flex-shrink: 0; }

/* Card headers now carry a sort control and a metric toggle together. */
.ov-header-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ov-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ov-sort-select {
  font-size: 0.6875rem;
  font-family: inherit;
  padding: 3px 4px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  max-width: 110px;
}
.ov-sort-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
}
.ov-sort-dir:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

/* Options strip between a card header and its body (the By Bank checkbox). */
.ov-card-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.ov-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
}
.ov-checkbox input { cursor: pointer; }

.ov-card-note {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.ov-truncated { padding-top: 8px; }

/* Currency labelling: stated once per page, and again on any card that is
   showing money, so no figure on the screen is an unlabelled number. */
.ov-currency-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  vertical-align: 1px;
}
.ov-currency-badge.is-warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.ov-currency-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  vertical-align: 1px;
}

/* A tile that is a read-out rather than a link does not pretend to be one. */
.ov-kpi.is-static {
  cursor: default;
  display: block;
}
.ov-kpi.is-static:hover {
  box-shadow: none;
  transform: none;
}

/* Split bar: a bank's reconciled share against its unreconciled remainder,
   filling the whole track so the two read against each other. */
/* Only the split variant lays its two segments out side by side; the shared
   .ov-bar-track rule is left alone so single-fill bars are unaffected. */
.ov-bar-track-split { display: flex; }
.ov-bar-fill-split, .ov-bar-fill-rest { flex: 0 0 auto; }
.ov-bar-fill-split { border-radius: 6px 0 0 6px; }
.ov-bar-fill-rest  { border-radius: 0 6px 6px 0; }

.ov-bar-key {
  display: flex;
  gap: 14px;
  padding: 8px 6px 0;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* 100% stacked share bar (bank weighting, match types, age brackets). */
.ov-share-bar {
  display: flex;
  width: 100%;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-2);
}
.ov-share-bar-sm { height: 18px; margin-bottom: 10px; }
.ov-share-seg {
  border: none;
  padding: 0;
  min-width: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 0.15s ease;
  overflow: hidden;
}
.ov-share-seg:hover { filter: brightness(1.12); }
.ov-share-seg.is-static { cursor: default; }
.ov-share-seg.is-static:hover { filter: none; }
.ov-share-seg-label {
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.ov-share-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 12px;
}
.ov-share-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--color-text);
}
.ov-share-legend-item:hover { background: var(--color-surface-2); }
.ov-share-legend-name { color: var(--color-text); }
.ov-share-legend-pct {
  font-weight: 700;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Legend rows that are read-outs, not drill-downs. */
.ov-legend-row.is-static { cursor: default; }
.ov-legend-row.is-static:hover { background: transparent; }

/* One number that carries a card (the automated rate). */
.ov-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.ov-headline-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}
.ov-headline-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ov-card-link {
  margin-top: 10px;
  padding-left: 6px;
  padding-right: 6px;
}

/* ── Aging Dashboard ─────────────────────────────────────────── */

.ag-bracket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.ag-bracket {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
  background: var(--color-surface);
}
.ag-bracket-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.ag-bracket-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ag-bracket-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.ag-bracket-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* The bank x bracket matrix can be wider than the card, so it scrolls inside
   itself rather than pushing the page sideways. */
.ag-table-scroll {
  overflow-x: auto;
  width: 100%;
  min-width: 0;
}
.ag-table { min-width: 780px; }

.ag-th, .mq-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.ag-th:hover, .mq-th:hover { color: var(--color-primary); }
.ag-th.is-sorted, .mq-th.is-sorted { color: var(--color-primary); }
.ag-sort-icon { display: inline-flex; vertical-align: -1px; }

/* Cells are tinted by how much of that bank's own backlog they hold, so an
   old-heavy bank stands out along its row without reading the numbers. */
.ag-cell {
  position: relative;
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--cell-color, transparent) calc(var(--cell-share, 0) * 22%), transparent),
    color-mix(in srgb, var(--cell-color, transparent) calc(var(--cell-share, 0) * 22%), transparent)
  );
}

/* ── Match Quality report ────────────────────────────────────── */

.mq-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  padding: 16px;
}
.mq-bar-wrap { padding: 0 16px 16px; }
.mq-table { min-width: 820px; }
.mq-rate {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.mq-rate.is-good { background: var(--color-success-subtle); color: var(--color-success-text); }
.mq-rate.is-ok   { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.mq-rate.is-bad  { background: var(--color-danger-subtle);  color: var(--color-danger-text); }

/* ── Manual match approval queue ─────────────────────────────── */

/* Modifier on the shared .tab-badge: a count of requests waiting on somebody
   reads as a warning, not as branding. */
.tab-badge-pending {
  margin-left: 6px;
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning);
}

.ap-banner {
  margin: 12px 16px 0;
  padding: 8px 12px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.ap-banner.is-warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.ap-banner code {
  font-size: 0.75rem;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--color-surface);
}

.ap-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.ap-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
}

.ap-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  padding: 12px 14px;
}
/* A request still waiting on somebody is marked down its edge. */
.ap-card.is-pending { border-left: 4px solid var(--color-warning); }

.ap-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.ap-card-id {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.ap-card-bank {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}
.ap-card-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-left: auto;
}

/* The two sides of the proposed match, laid out identically so a mismatch in
   amount, date or reference is visible without reading carefully. */
.ap-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
}
.ap-side {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
  background: var(--color-surface-2);
  min-width: 0;
}
.ap-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ap-side-type {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.ap-side-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.ap-side-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: 0.75rem;
}
.ap-side-meta dt {
  color: var(--color-text-muted);
  white-space: nowrap;
}
.ap-side-meta dd {
  margin: 0;
  color: var(--color-text);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ap-desc {
  max-height: 3.4em;
  overflow: hidden;
}
.ap-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.ap-warn {
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  font-size: 0.8125rem;
}
.ap-warn.is-danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}
.ap-note-shown {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.ap-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.ap-actions .ap-note {
  flex: 1;
  min-width: 180px;
}

@media (max-width: 720px) {
  .ap-sides { grid-template-columns: 1fr; }
  .ap-link-icon { transform: rotate(90deg); }
  .ap-card-meta { margin-left: 0; }
}

/* Time-series charts (History) */
.ov-chart {
  display: block;
  width: 100%;
  height: auto;
}
.ov-grid {
  stroke: var(--color-border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 3;
}
.ov-axis {
  font-size: 11px;
  fill: var(--color-text-subtle);
}
.ov-legend-top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.ov-legend-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ov-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* ── Reconciliation Workspace ────────────────────────── */
.recon-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.recon-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.recon-table-region {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* ── Unmatched Transactions: Match Group (in-table, sticky) ─── */
.recon-match-sticky {
  position: sticky;
  z-index: 1;
}

.recon-match-group-row {
  background: var(--color-primary-subtle);
  border-top: 2px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

.recon-match-group-row td {
  padding: 8px 14px !important;
  vertical-align: middle;
}

.recon-match-group-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.recon-match-group-title {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.875rem;
  white-space: nowrap;
}

.recon-match-group-balance {
  font-weight: 600;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.recon-match-group-buttons {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.recon-match-group-footer-row {
  background: var(--color-primary-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-primary);
}

.recon-match-group-footer-row td {
  padding: 8px 14px !important;
  vertical-align: middle;
}

.recon-match-group-footer-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.recon-match-row {
  background: var(--color-primary-subtle) !important;
}

.balance-zero {
  color: var(--color-success);
}

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

/* ── Recon Group Headers ─────────────────────────────────── */
.recon-group-header-row {
  background: var(--color-surface-2);
  border-top: 2px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  height: auto;
}

.recon-group-header-row td {
  padding: 12px 16px !important;
  vertical-align: middle;
}

.recon-group-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.group-name {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
}

.group-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.group-count {
  color: var(--color-text-muted);
}

.group-total {
  color: var(--color-text);
  font-weight: 600;
  font-family: 'Cascadia Code', 'Consolas', monospace;
}

/* ─── Bulk Upload ─────────────────────────────────────────────────────────── */
.bulk-upload-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.bulk-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px;
  border: 2px dashed var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-surface-2);
  cursor: pointer;
  transition: all 0.2s;
}

.bulk-upload-zone.dragover {
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.05);
}

.bulk-upload-icon {
  font-size: 48px;
}

.bulk-upload-text {
  text-align: center;
}

.bulk-upload-text p {
  margin: 0;
  color: var(--color-text-secondary);
}

.bulk-upload-text p:first-child {
  font-weight: 500;
  color: var(--color-text);
}

.bulk-upload-select-link {
  color: var(--color-primary);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

.bulk-upload-hint {
  font-size: 0.8rem;
  margin-top: 8px !important;
}

.bulk-upload-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.bulk-upload-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}

.bulk-upload-table thead {
  background: var(--color-surface-2);
  border-bottom: 2px solid var(--color-border-strong);
  position: sticky;
  top: 0;
}

.bulk-upload-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
}

.bulk-upload-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.bulk-upload-table tbody tr.even {
  background: var(--color-surface);
}

.bulk-upload-table tbody tr.odd {
  background: rgba(59, 130, 246, 0.03);
}

.bulk-upload-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.08);
}

.bulk-upload-table td {
  padding: 6px 12px;
  vertical-align: middle;
  font-size: 0.85rem;
}

.col-bank {
  font-weight: 600;
  color: var(--color-text);
  width: 14%;
  min-width: 90px;
  vertical-align: middle !important;
}

.bank-name {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
  font-size: 0.85rem;
}

.col-status {
  width: 6%;
  text-align: center;
  font-size: 1.05rem;
  min-width: 40px;
}

.col-file {
  width: 55%;
  min-width: 320px;
}

.col-text {
  width: 25%;
  min-width: 100px;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.file-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.file-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.file-type-label {
  flex: 0 0 auto;
  padding: 2px 6px;
  background: var(--color-surface-3);
  border: 1px solid rgba(0,0,0,0); /* fallback for transparent border */
  /* 
    border: 1px solid var(--color-border); 
    border-radius: 3px;
  */
  
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  min-width: 40px;
  text-align: center;
}

.filename-pill {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 10px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mask-hint {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.25;
  pointer-events: none;     /* disables clicks, hovers, etc. */
  user-select: none;        /* prevents text selection */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-btn {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text);
  transition: all 0.15s;
}

.cell-btn:hover {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

.cell-btn.file-ready {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 180px;
  background: transparent;
  border-color: var(--color-success);
  color: #000;
}

.file-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip-x {
  flex: 0 0 auto;
  opacity: 0.6;
}

.cell-btn.add-btn {
  min-width: 26px;
  text-align: center;
}

.bulk-rejected-section {
  padding: 16px;
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 8px;
}

.bulk-rejected-section h3 {
  margin: 0 0 12px 0;
  color: var(--color-danger);
  font-size: 0.95rem;
}

.bulk-rejected-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rejected-item {
  padding: 8px 12px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-danger);
  border-radius: 4px;
  font-size: 0.875rem;
}

.rejected-reason {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

.bulk-upload-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.bulk-progress-panel {
  padding: 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  border-left: 4px solid var(--color-info);
}

.bulk-progress-panel h3 {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
}

.bulk-progress-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-surface);
  border-radius: 6px;
  font-size: 0.875rem;
}

.progress-filename {
  flex: 0 0 auto;
  min-width: 120px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.progress-bar-wrapper {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--color-info);
  transition: width 0.15s;
}

.progress-status {
  flex: 0 0 60px;
  text-align: right;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.progress-item.success .progress-bar {
  background: var(--color-success);
}

.progress-item.error .progress-bar {
  background: var(--color-danger);
}


/* ── Bank Setup (bankConfig.js) ──────────────────────────────────────────── */
/* A configuration screen, not a dashboard: wide fields, a readable raw grid,
   and banners that say plainly when a choice is wrong. */

.bc-root                { display: flex; flex-direction: column; gap: 16px; }
.bc-root.bc-busy        { opacity: 0.6; pointer-events: none; }

.bc-intro .card-body    { padding: 18px 20px; }
.bc-intro-title         { font-size: 16px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.bc-intro-text          { font-size: 13px; color: var(--color-text-muted); line-height: 1.55; margin: 0 0 12px; max-width: 78ch; }
.bc-intro-stats         { display: flex; gap: 8px; flex-wrap: wrap; }

.bc-lead                { max-width: 82ch; line-height: 1.55; margin: 0 0 14px; }

/* Banners – the page's main way of telling the truth about a choice. */
.bc-banner              { border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 14px;
                          font-size: 13px; line-height: 1.5; border: 1px solid transparent; }
.bc-banner code         { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.bc-banner-info         { background: var(--color-info-subtle);    color: var(--color-info-text);    border-color: var(--color-info); }
.bc-banner-success      { background: var(--color-success-subtle); color: var(--color-success-text); border-color: var(--color-success); }
.bc-banner-warning      { background: var(--color-warning-subtle); color: var(--color-warning-text); border-color: var(--color-warning); }
.bc-banner-danger       { background: var(--color-danger-subtle);  color: var(--color-danger-text);  border-color: var(--color-danger); }

.bc-idle                { font-size: 13px; color: var(--color-text-subtle); font-style: italic; }

/* Chosen file */
.bc-file-row            { display: flex; align-items: center; justify-content: space-between;
                          gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.bc-file-name           { font-size: 14px; font-weight: 600; color: var(--color-text); }
.bc-file-meta           { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* Layout controls */
.bc-controls            { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.bc-inline              { margin-bottom: 0; min-width: 150px; }
.bc-inline .form-control { min-width: 150px; }

/* The raw grid, shown as it is in the file. */
.bc-grid-scroll         { overflow-x: auto; border: 1px solid var(--color-border);
                          border-radius: var(--radius-md); background: var(--color-surface); }
.bc-grid                { border-collapse: collapse; font-size: 12px; width: max-content; min-width: 100%; }
.bc-grid th,
.bc-grid td             { border: 1px solid var(--color-border); padding: 4px 8px; white-space: nowrap;
                          color: var(--color-text); }
.bc-grid thead th       { background: var(--color-surface-2); color: var(--color-text-muted);
                          font-weight: 600; text-align: center; position: sticky; top: 0; z-index: 1; }
.bc-rowno,
.bc-colno               { cursor: pointer; user-select: none; }
.bc-rowno               { background: var(--color-surface-2); color: var(--color-text-muted);
                          text-align: right; font-weight: 600; position: sticky; left: 0; z-index: 2; }
.bc-rowno:hover,
.bc-colno:hover         { background: var(--color-primary-subtle); color: var(--color-primary); }
.bc-dim                 { opacity: 0.35; }

.bc-header-row td,
.bc-header-row .bc-rowno { background: var(--color-primary-subtle); font-weight: 600; }
.bc-preamble-row td     { color: var(--color-text-subtle); font-style: italic; }

.bc-legend              { display: flex; align-items: center; gap: 16px; margin-top: 8px;
                          font-size: 12px; color: var(--color-text-muted); flex-wrap: wrap; }
.bc-legend .form-hint   { margin: 0; }
.bc-key                 { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
                          margin-right: 6px; vertical-align: -1px; border: 1px solid var(--color-border-strong); }
.bc-key-header          { background: var(--color-primary-subtle); }
.bc-key-preamble        { background: var(--color-surface-2); }

/* Bank details and format fields */
.bc-field-grid          { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; }
.bc-check-row           { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.bc-check               { display: flex; align-items: flex-start; gap: 9px; font-size: 13px;
                          color: var(--color-text); cursor: pointer; }
.bc-check input         { margin-top: 2px; flex: none; }
.bc-check-hint          { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* Column mapping */
.bc-map                 { display: flex; flex-direction: column; }
.bc-map-row             { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(200px, 320px);
                          gap: 16px; align-items: start; padding: 11px 0;
                          border-bottom: 1px solid var(--color-border); }
.bc-map-row:last-child  { border-bottom: none; }
.bc-map-label           { font-size: 13px; font-weight: 600; color: var(--color-text); }
.bc-map-help            { font-size: 12px; font-weight: 400; color: var(--color-text-muted);
                          margin-top: 3px; line-height: 1.45; }
.bc-req                 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
                          color: var(--color-danger); margin-left: 6px; }

/* Parse test */
.bc-stats               { margin-bottom: 14px; }
.bc-stat                { font-size: 17px; }
.bc-preview-table td    { max-width: 280px; }
.bc-num                 { text-align: right; font-variant-numeric: tabular-nums; }

/* Export */
.bc-export-actions      { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.bc-issues              { margin: 8px 0 0; padding-left: 20px; }
.bc-issues li           { margin-bottom: 3px; }
.bc-json                { background: var(--color-surface-2); border: 1px solid var(--color-border);
                          border-radius: var(--radius-md); padding: 14px; overflow: auto; max-height: 460px;
                          font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
                          line-height: 1.5; color: var(--color-text); margin: 0; }

@media (max-width: 720px) {
  .bc-map-row           { grid-template-columns: 1fr; gap: 8px; }
}