/* finance.css — Finance tab styles
   Mirrors analytics.css conventions (.an-* tokens, .fin-* prefix).
   The 50-column table preserves the Apps Script's column-group color banding. */

#view-finance { flex: 1; overflow-y: auto; background: var(--bg); }
.fin-wrap { padding: 24px; }

/* Orders-style page header: fixed "Finance" title + subtitle (left), folder tabs
   (right) docked on the header's 1px baseline. The pagehead carries the rail. */
#view-finance .pv2-pagehead { border-bottom: 1px solid var(--line-strong); padding-bottom: 0; }
#view-finance .pv2-pagehead > div:first-child { padding-bottom: 14px; }
#view-finance .pv2-pagehead .pv2-sub { max-width: 620px; }

/* Folder page-tabs (Summary / Orders / …) — Orders io-subnav mechanic. The header
   owns the 1px baseline; each tab dips -1px over it with no bottom border. Active =
   --green-bg fill, which paints over the rail so the line is "cut" under the tab.
   Scoped to #view-finance so it beats the older .pv2-root .fin-subtab underline
   rules in design-bridge.css / v9-finance.css (loaded later, same class-specificity);
   position:static/top:auto neutralize the top:1px nudge those base rules leak in. */
#view-finance .fin-subtabs {
  display: inline-flex; align-items: flex-end; gap: 4px;
  margin-bottom: -1px;
  /* neutralize design-bridge .pv2-root .fin-subtabs (own rail / padding / bg) */
  border-bottom: 0; padding: 0; background: transparent;
}
#view-finance .fin-subtab {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent; border-bottom: 0; background: transparent;
  padding: 10px 18px 12px; border-radius: 11px 11px 0 0;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink-2); text-decoration: none; cursor: pointer; white-space: nowrap;
  position: static; top: auto;
  margin-bottom: -1px; transition: background .14s, color .14s, border-color .14s;
}
#view-finance .fin-subtab svg { width: 16px; height: 16px; flex: none; }
#view-finance .fin-subtab:hover { color: var(--ink); }
#view-finance .fin-subtab.active { background: var(--green-bg); color: var(--green-2); border-color: var(--line-strong); }

/* Refresh status card on Summary sub-tab */
.fin-sync-card {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.fin-sync-cell { display: flex; flex-direction: column; gap: 3px; min-width: 180px; }
.fin-sync-label {
  font-size: 10px; color: var(--text-faint); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.fin-sync-value {
  font-size: 13px; color: var(--text); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.fin-sync-sub { font-size: 10px; color: var(--text-faint); font-family: var(--font); }
.fin-sync-schedule-select {
  padding: 3px 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-dim); font-size: 11px;
  font-family: var(--font-sans); outline: none; cursor: pointer;
}
.fin-sync-schedule-select:focus { border-color: var(--accent); }
.fin-sync-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fin-sync-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.fin-sync-dot-ok      { background: var(--green); }
.fin-sync-dot-err     { background: var(--red); }
.fin-sync-dot-pending { background: var(--yellow); animation: finPulse 1.4s ease-in-out infinite; }
.fin-sync-dot-stale   { background: var(--yellow); }
@keyframes finPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.fin-sync-stale-note { color: var(--yellow); font-weight: 600; }

@media (max-width: 768px) {
  .fin-sync-card { flex-direction: column; gap: 12px; }
  .fin-sync-actions { margin-left: 0; }
}

/* KPI cards on Summary sub-tab */
.fin-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px;
}
.fin-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.fin-kpi-label {
  font-size: 11px; color: var(--text-faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.fin-kpi-value {
  font-family: var(--font); font-size: 26px; font-weight: 700;
  color: var(--text); line-height: 1.1;
}
.fin-kpi-sub {
  font-size: 11px; color: var(--text-dim); margin-top: 4px; font-family: var(--font);
}
.fin-kpi-value.pos { color: var(--green); }
.fin-kpi-value.neg { color: var(--red); }

/* Section block (matches .an-section) */
.fin-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.fin-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 12px;
}
.fin-section-head h3 { font-size: 14px; font-weight: 700; margin: 0; color: var(--text); }
.fin-section-note { font-size: 11px; color: var(--text-faint); font-weight: 500; }

/* Monthly table */
.fin-monthly-wrap { overflow-x: auto; }
.fin-monthly-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.fin-monthly-table th, .fin-monthly-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left;
}
.fin-monthly-table th {
  font-size: 10px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .5px; background: var(--surface2);
  white-space: nowrap;
}
.fin-monthly-table td.num, .fin-monthly-table th.num {
  text-align: right; font-family: var(--font);
}
.fin-monthly-table tbody tr:hover { background: var(--surface2); }
/* Reconciliation deep links — muted, themed (not default blue) */
.fin-monthly-table a { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--text-faint); }
.fin-monthly-table a:hover { color: var(--green); border-bottom-color: var(--green); }
/* Vendor scorecard name — a real <a href> so ctrl/cmd-click opens a new tab.
   Inherits the muted link treatment above; just keep the row's own weight. */
.fin-monthly-table a.rvendor-link { font-weight: inherit; cursor: pointer; }
/* Click-to-sort headers */
.fin-monthly-table th { cursor: pointer; }
.fin-monthly-table th:hover { color: var(--text); }
.fin-monthly-table th.sort-asc::after  { content: ' \25B2'; font-size: 8px; }
.fin-monthly-table th.sort-desc::after { content: ' \25BC'; font-size: 8px; }
.fin-monthly-table .month-cell {
  font-family: var(--font); font-weight: 600; color: var(--text);
}
.fin-monthly-table .cancelled-sub {
  display: block; font-size: 10px; color: var(--text-faint); font-weight: 400;
}
.fin-monthly-table td.margin-pos { color: var(--green); font-weight: 600; }
.fin-monthly-table td.margin-neg { color: var(--red); font-weight: 600; }
.fin-monthly-table tr.fin-monthly-total td {
  border-top: 2px solid var(--border-light);
  background: var(--surface2);
  font-weight: 700;
}

/* Cash Flow — owner-distribution add-back rows */
.fin-monthly-table tr.fin-cf-addback td { font-style: italic; color: var(--text-faint); border-top: 1px dashed var(--border-light); }
.fin-monthly-table tr.fin-cf-predist td { border-top: 2px solid var(--accent); }

/* P&L monthly trends chart */
.fin-chart-wrap { position: relative; height: 320px; width: 100%; padding: 6px 2px 2px; }

/* Forecast view — assumptions panel + seasonal chips */
.fin-fc-assumptions { padding: 4px 2px 2px; }
.fin-fc-drivers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 18px;
  margin-bottom: 14px;
}
.fin-fc-drivers > div { display: flex; flex-direction: column; gap: 2px; }
.fin-fc-k { font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.fin-fc-v { font-size: 13px; color: var(--text); font-weight: 600; }
.fin-fc-seasonal { border-top: 1px solid var(--border-light); padding-top: 10px; }
.fin-fc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fin-fc-chip {
  font-size: 12px;
  background: var(--surface2);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 3px 8px;
}
.fin-fc-chip b { font-weight: 700; color: var(--text-faint); margin-right: 4px; }
.fin-fc-chip-on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.fin-fc-chip-on b { color: var(--bg); }

/* Tax sub-tab — expandable state → county tree (reuses .fin-monthly-table) */
.fin-monthly-table tr.fin-tax-state { cursor: pointer; }
.fin-monthly-table tr.fin-tax-state td { font-weight: 600; color: var(--text); }
.fin-monthly-table tr.fin-tax-state.open td { background: var(--surface2); }
.fin-monthly-table .fin-tax-caret {
  display: inline-block; width: 12px; color: var(--text-faint); font-size: 10px;
}
.fin-monthly-table .fin-tax-sub {
  font-size: 10px; color: var(--text-faint); font-weight: 400; margin-left: 6px;
}
.fin-monthly-table tr.fin-tax-county td { font-weight: 400; color: var(--text-muted, var(--text-faint)); }
.fin-monthly-table .fin-tax-indent { padding-left: 34px; }

/* Tax: period / state toggle buttons (Breakdown view) */
.fin-tax-toggles { display: flex; flex-direction: column; gap: 6px; margin: 4px 2px 10px; }
.fin-tax-togglerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-tax-togglelabel {
  font-size: 10px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .5px; min-width: 48px;
}
.fin-btnset { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.fin-btnset .fin-toggle { border: none; border-right: 1px solid var(--border); border-radius: 0; }
.fin-btnset .fin-toggle:last-child { border-right: none; }
.fin-toggle, .fin-chip {
  font: inherit; font-size: 11px; padding: 3px 10px; cursor: pointer;
  background: var(--surface); color: var(--text-muted, var(--text-faint));
  border: 1px solid var(--border); border-radius: 6px;
}
.fin-toggle:hover, .fin-chip:hover { color: var(--text); }
.fin-toggle.active, .fin-chip.active {
  background: var(--green, #2e7d32); color: #fff; border-color: var(--green, #2e7d32); font-weight: 600;
}
.fin-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Tax: Compliance tracker */
#fin-comp-table td { vertical-align: middle; }
.comp-freq { font: inherit; font-size: 11px; padding: 2px 4px; }
.comp-yes { color: var(--green, #2e7d32); font-weight: 600; }
.comp-no  { color: var(--text-faint); }
.comp-badge {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 2px 6px; border-radius: 4px; margin-left: 6px;
}
.comp-needsreview { background: #fff3cd; color: #8a6d3b; }
.comp-ignore {
  font: inherit; font-size: 10px; margin-left: 6px; padding: 1px 5px; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-faint);
}
.comp-chip {
  display: inline-block; font: inherit; font-size: 10px; font-weight: 600;
  padding: 2px 7px; margin: 1px 2px; border-radius: 4px; cursor: pointer; border: 1px solid transparent;
}
.comp-filed    { background: #d4edda; color: #1e6b2e; border-color: #b7dfc0; }
.comp-upcoming { background: var(--surface2); color: var(--text-muted, #666); border-color: var(--border); }
.comp-pastdue  { background: #f8d7da; color: #a12a36; border-color: #f0b6bc; }
#fin-comp-table th, #fin-filing-table th { text-align: center; }

/* Exemption-certificate cards (Tax Data) — fill the section, one per exempt state */
.fin-exempt-panel { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin: 4px 2px 10px; background: var(--surface); }
.fin-exempt-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.fin-exempt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fin-exempt-card { border: 1px solid var(--border); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface2); }
.fin-exempt-card-head { font-weight: 600; font-size: 13px; }
.fin-exempt-card input { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; }
.filing-file-cell { white-space: nowrap; }
.filing-file-cell .fin-tax-sub { display: block; margin-top: 2px; }
.comp-row-flagged td { background: #fff1e0 !important; }   /* orange: registered but under-collecting */
.comp-row-ok td { background: #eaf7ec; }                   /* light green: registered + collecting cleanly */
.comp-row-norev td { background: #f4f4f5; color: var(--text-faint); }   /* light gray: no revenue this year */
.comp-row-notax td { color: var(--text-muted, var(--text-faint)); }
.comp-notax { background: #e7eef7; color: #3a5a86; }
.comp-legend-green { background: #eaf7ec; color: #1e6b2e; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.comp-flag-btn {
  font: inherit; font-size: 10px; font-weight: 700; color: #c05a00; cursor: pointer;
  background: #ffe6cc; border: 1px solid #e0a36a; border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
.comp-flag-btn:hover { background: #ffd9b3; }
.comp-row-exempt td { opacity: .92; }
.comp-row-unspec td { color: var(--text-faint); font-style: italic; }
.comp-flag { font-size: 10px; font-weight: 700; color: #c05a00; font-style: normal; margin-left: 6px; }
.comp-legend-orange { background: #fff1e0; color: #c05a00; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.comp-regid { font: inherit; font-size: 11px; padding: 2px 5px; width: 110px; border: 1px solid var(--border); border-radius: 4px; }
.comp-idcell { white-space: nowrap; }
.comp-sst { margin-left: 4px; }

/* Tax home: potential-errors metric + exemption generator */
.fin-tax-home { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin: 4px 2px 10px; }
.fin-tax-errorbox {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; min-width: 150px;
  background: var(--surface); text-align: center;
}
.fin-tax-errorbox.has-errors { border-color: #e0a36a; background: #fff7ef; }
.fin-tax-errnum { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text); }
.fin-tax-errorbox.has-errors .fin-tax-errnum { color: #c05a00; }
.fin-tax-errlabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); margin-top: 4px; }
.fin-tax-errsub { font-size: 11px; color: var(--text-muted, var(--text-faint)); margin-top: 4px; max-width: 240px; }
.fin-tax-exempt { flex: 1; min-width: 320px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; background: var(--surface); }
.fin-tax-exempt > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.fin-tax-exempt-body { margin-top: 10px; }
.fin-exempt-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }

@media (max-width: 1100px) { .fin-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .fin-kpis { grid-template-columns: 1fr; } }

.fin-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.fin-header h2 { font-size: 20px; font-weight: 700; margin: 0 0 2px; }
.fin-sub { font-size: 12px; color: var(--text-dim); margin: 0; }
.fin-sub span { font-family: var(--font); font-weight: 600; color: var(--text); }

/* Filter row */
.fin-filters {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.fin-ctrl { display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; color: var(--text-faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
}
.fin-ctrl select, .fin-ctrl input[type="date"], .fin-ctrl input[type="text"] {
  padding: 6px 8px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 13px;
  font-family: var(--font); outline: none; min-width: 120px;
}
.fin-ctrl select:focus, .fin-ctrl input:focus { border-color: var(--accent); }
.fin-ctrl-search input { min-width: 180px !important; }

.fin-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.fin-count { font-size: 12px; color: var(--text-dim); font-family: var(--font); }

/* Table */
.fin-table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.fin-table-scroll {
  overflow: auto;
  max-height: calc(100vh - 280px);
}

table.fin-table {
  width: max-content; min-width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font);
}
.fin-table thead tr { position: sticky; top: 0; z-index: 5; }
.fin-table th {
  padding: 8px 10px; border-bottom: 2px solid var(--border-light);
  border-right: 1px solid var(--border);
  text-align: left; white-space: nowrap; user-select: none; cursor: pointer;
  font-size: 10px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .3px;
}
.fin-table th:hover { filter: brightness(0.95); }
.fin-table th.sorted-asc::after  { content: " ▲"; color: var(--accent); }
.fin-table th.sorted-desc::after { content: " ▼"; color: var(--accent); }

.fin-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap; vertical-align: top; color: var(--text);
}
.fin-table td.num, .fin-table th.num { text-align: right; }
.fin-table tbody tr:hover td { background: rgba(92,168,92,0.05); }

/* Column-group color banding — matches Apps Script headerColors exactly.
   Header row gets the saturated tint; body cells get a much paler version
   so the eye groups them without overpowering the data. */

/* identity gray */
.fin-table th.g-id { background: #e0e0e0; }
.fin-table td.g-id { background: rgba(224,224,224,0.18); }

/* status slate */
.fin-table th.g-st { background: #cfd8dc; }
.fin-table td.g-st { background: rgba(207,216,220,0.20); }

/* charged green */
.fin-table th.g-ch { background: #c8e6c9; }
.fin-table td.g-ch { background: rgba(200,230,201,0.22); }

/* refunded pink */
.fin-table th.g-rf { background: #ffcdd2; }
.fin-table td.g-rf { background: rgba(255,205,210,0.20); }

/* net revenue blue */
.fin-table th.g-nt { background: #bbdefb; }
.fin-table td.g-nt { background: rgba(187,222,251,0.22); }

/* supplier cost amber */
.fin-table th.g-cs { background: #ffe0b2; }
.fin-table td.g-cs { background: rgba(255,224,178,0.22); }

/* margin purple */
.fin-table th.g-mg { background: #d1c4e9; }
.fin-table td.g-mg { background: rgba(209,196,233,0.22); font-weight: 600; }

/* Cancellation rows: subtle red wash overrides the column tints */
.fin-table tr.is-cancelled td {
  background: rgba(192,57,43,0.05) !important;
  color: var(--text-dim);
}
.fin-table tr.is-cancelled td.g-cs.has-cancelled-cost {
  color: var(--red); font-weight: 600;
}

/* Pagination */
.fin-pagination {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--surface2); border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim); font-family: var(--font);
}
.fin-pagination button {
  padding: 4px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); cursor: pointer;
  font-family: var(--font); font-size: 12px;
}
.fin-pagination button:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.fin-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.fin-pagination .fin-page-info { margin: 0 6px; }

/* Empty / loading / error states */
.fin-loading, .fin-empty, .fin-error {
  padding: 32px 20px; text-align: center; font-size: 13px; color: var(--text-dim);
}
.fin-loading .spinner { margin-right: 8px; vertical-align: middle; }
.fin-error { background: var(--red-dim); color: var(--red); }

/* Sync badge in the header */
.fin-sync-info {
  font-size: 11px; color: var(--text-faint); font-family: var(--font);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 10px;
}
.fin-sync-info strong { color: var(--text); font-weight: 700; }

/* Mobile */
@media (max-width: 768px) {
  .fin-wrap { padding: 12px; }
  .fin-filters { padding: 10px; }
  .fin-table-scroll { max-height: calc(100vh - 240px); }
}

/* ───── Reconciliation: Close cockpit ───── */

/* Tabular numerals so money columns scan cleanly */
.fin-monthly-table td.num, .fin-monthly-table th.num,
.fin-kpi-value { font-variant-numeric: tabular-nums; }

/* Readiness banner + close progress */
.rbanner { padding: 12px 14px; border-radius: 8px; margin: 0 0 14px; }
.rbanner-line { font-size: 13px; }
.rbanner-chips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.rprog {
  height: 6px; border-radius: 100px; background: rgba(0,0,0,.08);
  margin-top: 10px; overflow: hidden;
}
.rprog-fill {
  height: 100%; border-radius: 100px; background: var(--green);
  transition: width .4s ease;
}

/* Month strip: trailing-month chips (✓ closed · ● open · current dimmed) */
.rmonths { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rmonth-chip {
  font: inherit; font-size: 12px; font-weight: 700; padding: 4px 12px;
  border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface); color: var(--text-dim); cursor: pointer;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rmonth-chip:hover { border-color: var(--accent); color: var(--accent); }
.rmonth-chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.rmonth-chip.dim { opacity: .55; }
.rmonth-chip.on.dim { opacity: 1; }

/* Explainer: three sentences of orientation, dismissible */
.rexplainer {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 12px 14px; margin: 0 0 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--surface2);
}
.rexplainer-txt { font-size: 13px; line-height: 1.55; color: var(--text); }
.rexplainer-x {
  white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--text-dim);
  text-decoration: none; border: 1px solid var(--border); border-radius: 100px; padding: 2px 9px;
}
.rexplainer-x:hover { color: var(--red); border-color: var(--red); }

/* Order lookup — header search box + inline result card */
#recon-order-lookup {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface); color: var(--text); font-size: 12px; width: 200px;
}
#recon-order-lookup:focus { border-color: var(--accent); outline: none; }
.rlookup-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin: 0 0 12px; font-size: 13px;
  border: 1px solid var(--accent); border-radius: 8px; background: var(--surface);
}
.rlookup-card a { color: var(--text); }

/* Open-disputes rows */
.rdisp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 9px 2px; border-top: 1px solid var(--border); font-size: 13px;
}
.rdisp-row:first-child { border-top: none; }
.rdisp-main { flex: 1; min-width: 240px; }

/* Status chips (freshness, aging, dup, rule…) */
.rchip {
  display: inline-block; font-size: 10px; font-weight: 700; line-height: 1.5;
  padding: 1px 8px; border-radius: 100px; vertical-align: 1px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim);
}
.rchip-green { color: var(--green);  border-color: var(--green);  background: rgba(92,168,92,.08); }
.rchip-warn  { color: var(--yellow); border-color: var(--yellow); background: rgba(184,134,11,.08); }
.rchip-bad   { color: var(--red);    border-color: var(--red);    background: rgba(192,57,43,.08); }
.rchip-dim   { color: var(--text-faint); border-color: var(--border); background: transparent; font-weight: 600; }

/* Memo / account subtext under the vendor name */
.rmemo {
  font-size: 10px; color: var(--text-faint); max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rmemo-inline { font-size: 11px; color: var(--text-dim); margin: 0 6px 0 6px; }

/* Decision pills */
.rdec-cell { white-space: nowrap; }
.fin-monthly-table a.rdec-pill, .rdec-pill {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px;
  margin-right: 4px; border: 1px solid var(--border); border-radius: 100px;
  cursor: pointer; color: var(--text-dim); text-decoration: none; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.fin-monthly-table a.rdec-pill:hover, .rdec-pill:hover {
  border-color: var(--accent); color: var(--accent); border-bottom-color: var(--accent);
}
.fin-monthly-table a.rdec-pill.on, .rdec-pill.on {
  background: var(--green); border-color: var(--green); border-bottom-color: var(--green); color: #fff;
}
.fin-monthly-table a.rdec-pill.on:hover { color: #fff; }
.rdec-aux { font-size: 11px; margin-left: 4px; }

/* ── Manual match: selection, link bar, suggestions, matched groups ── */
.rsel-box { cursor: pointer; }
.fin-monthly-table tr.rsel-on > td { background: rgba(46,125,50,.10); }

.rselbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 0 0 12px; padding: 9px 14px; border-radius: 8px;
  background: rgba(46,125,50,.10); border: 1px solid var(--green);
}
.rselbar-txt { font-size: 13px; color: var(--text); }
.rselbar-actions { display: flex; align-items: center; gap: 6px; }

.rsugg-list { padding: 2px 0; }
.rsugg-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px;
  border-top: 1px solid var(--border);
}
.rsugg-row:first-child { border-top: none; }
.rsugg-conf { align-self: center; font-size: 12px; padding: 3px 10px; }
.rsugg-main { flex: 1; min-width: 0; }
.rsugg-head { font-size: 13px; font-weight: 600; }
.rsugg-date { font-weight: 400; color: var(--text-dim); font-size: 12px; }
.rsugg-nums { display: flex; align-items: flex-end; gap: 22px; margin: 7px 0 4px; flex-wrap: wrap; }
.rsugg-num { display: flex; flex-direction: column; line-height: 1.3; }
.rsugg-lbl { font-size: 11px; color: var(--text-faint); }
.rsugg-lbl a { color: var(--accent); text-decoration: none; }
.rsugg-val { font-size: 16px; font-weight: 700; font-family: var(--mono, monospace); }
.rsugg-arrow { align-self: center; color: var(--text-faint); font-size: 15px; padding-bottom: 2px; }
.rsugg-over .rsugg-val { color: var(--red); }
.rsugg-under .rsugg-val { color: var(--green); }
.rsugg-zero .rsugg-val { color: var(--text-dim); }
.rsugg-reason { font-size: 12px; color: var(--text-dim); }
.rsugg-actions { white-space: nowrap; display: flex; align-items: center; gap: 6px; align-self: center; }
/* dismiss: a muted ghost pill matching the confirm pill, hover→red */
.rsugg-dismiss {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px;
  border: 1px solid var(--border); border-radius: 100px; cursor: pointer;
  color: var(--text-dim); text-decoration: none; background: var(--surface);
}
.rsugg-dismiss:hover { border-color: var(--red); color: var(--red); }
.rsugg-restore { font-size: 12px; color: var(--text-faint); padding: 8px 4px 2px; }
.rsugg-restore a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* "What's left" residual buckets — <button>s that jump to their section */
.rbuckets { display: flex; gap: 10px; flex-wrap: wrap; padding: 2px 0; }
.rbucket {
  flex: 1 1 130px; min-width: 130px; padding: 10px 12px;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px;
  background: var(--surface);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
button.rbucket:hover {
  border-top-color: var(--accent); border-right-color: var(--accent); border-bottom-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.rbucket-amt { font-size: 18px; font-weight: 700; }
.rbucket-label { font-size: 12px; margin-top: 2px; }
.rbucket-n { color: var(--text-dim); font-weight: 400; }
.rbucket-hint { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.rbucket-good { border-left-color: var(--green); }
.rbucket-bad  { border-left-color: var(--red); }
.rbucket-warn { border-left-color: var(--yellow); }
.rbucket-info { border-left-color: var(--accent); }

.rmm-list { padding: 2px 0; }
.rmm-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 9px 2px; border-top: 1px solid var(--border); font-size: 13px;
}
.rmm-row:first-child { border-top: none; }
.rmm-body { flex: 1; min-width: 0; }
.rmm-body code { font-family: var(--mono, monospace); font-size: 12px; }

/* Inline note editor (replaces prompt()) */
.rnote-input {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 12px; width: 240px; background: var(--surface); color: var(--text);
}
.rnote-input:focus { border-color: var(--accent); outline: none; }

/* Collapsible worklist sections */
.fin-collapse-head { cursor: pointer; user-select: none; }
.fin-collapse-head:hover h3 { color: var(--accent); }
.rcaret { display: inline-block; width: 14px; color: var(--text-faint); }

/* Long worklists scroll with sticky headers */
.fin-scrolly { max-height: 460px; overflow-y: auto; }
.fin-scrolly thead th { position: sticky; top: 0; z-index: 2; }

/* Auto-rules add form */
.rrule-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 10px 2px 2px; }
.rrule-form label {
  font-size: 11px; color: var(--text-faint); font-weight: 600;
  display: flex; flex-direction: column; gap: 3px;
}
.rrule-form input, .rrule-form select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 12px;
}
.rrule-form input:focus, .rrule-form select:focus { border-color: var(--accent); outline: none; }

/* Inline-editable rule table cells */
.rrule-cell {
  padding: 4px 7px; border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: var(--text); font-size: 12px; font-family: inherit;
}
.rrule-cell:hover { border-color: var(--border); background: var(--surface); }
.rrule-cell:focus { border-color: var(--accent); background: var(--surface); outline: none; }

/* Trends chart cards */
.fin-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 1100px) { .fin-chart-grid { grid-template-columns: 1fr; } }
.fin-chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.fin-chart-title {
  font-size: 13px; font-weight: 700; margin-bottom: 8px;
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.fin-chart-wrap { position: relative; height: 260px; }

/* ───── Vendors tab: mapping workbench ───── */

#vmap-search, .vmap-input {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 12px;
}
#vmap-search { width: 200px; font-size: 13px; }
.vmap-input { width: 170px; padding: 5px 8px; }
#vmap-search:focus, .vmap-input:focus { border-color: var(--accent); outline: none; }

#vmap-queue { max-height: 540px; overflow-y: auto; }
.vq-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 4px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.vq-row:last-child { border-bottom: none; }
.vq-row:hover { background: var(--surface2); }
.vq-main { min-width: 230px; flex: 1; }
.vq-name { font-weight: 700; font-size: 13px; color: var(--text); }
.vq-meta {
  font-size: 11px; color: var(--text-dim); font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
.vq-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Suggestion chips — one click maps the vendor */
.vq-chip {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 100px; border: 1px solid var(--green); color: var(--green);
  background: rgba(92,168,92,.07); text-decoration: none; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.vq-chip:hover { background: var(--green); color: #fff; }

.vq-opex {
  font-size: 11px; color: var(--text-faint); text-decoration: none;
  border-bottom: 1px dotted var(--text-faint); margin-left: 2px; white-space: nowrap;
}
.vq-opex:hover { color: var(--red); border-bottom-color: var(--red); }

/* This-session undo strip (a log of saved mappings, NOT filters) */
.vq-recent { margin: 0 0 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vq-recent-label {
  font-size: 10px; color: var(--text-faint); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.vq-recent .rchip { font-size: 11px; padding: 3px 10px; }
.vq-recent .rchip a { color: var(--text-dim); text-decoration: underline; font-weight: 600; }
.vq-recent .rchip a:hover { color: var(--red); }

@media (max-width: 768px) {
  .vq-main { min-width: 100%; }
  #vmap-search { width: 140px; }
}

/* ═══════════ Profit & Loss statement (Financials sub-tab, rebuilt 2026-07-22) ═══════════
   Statement layout: line items down, months across, Total on the right.
   All colors are tokens — the prior finance styles hardcoded hex and went
   theme-blind under .pv2-dark. Note design-bridge.css overrides `.fin-*`
   selectors, so these use a `pnl` namespace to stay out of its way. */
.pnl-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px 20px;
  overflow-x: auto;          /* months scroll horizontally; the page never does */
}
.pnl {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;   /* columns line up digit-for-digit */
  font-size: 13px;
}
.pnl th,
.pnl td { padding: 7px 10px; white-space: nowrap; }

.pnl thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  padding-bottom: 9px;
}
.pnl .pnl-label {
  text-align: left;
  color: var(--text);
  min-width: 168px;
  position: sticky;          /* line item stays visible while months scroll */
  left: 0;
  background: var(--surface);
}
.pnl .pnl-num { text-align: right; color: var(--text); }
.pnl .pnl-tot {
  border-left: 1px solid var(--border);
  font-weight: 600;
  color: var(--ink);
}

/* Subtotal rows — Gross Profit, Net Income */
.pnl tr.pnl-strong td { font-weight: 700; color: var(--ink); }
.pnl tr.pnl-rule td { border-top: 1px solid var(--line-strong); }
.pnl tr.pnl-headline td { font-size: 15px; padding-top: 9px; }

/* Indented margin lines under their subtotal */
.pnl tr.pnl-marginrow td {
  color: var(--text-faint);
  font-size: 12px;
  padding-top: 1px;
  padding-bottom: 9px;
}
.pnl tr.pnl-marginrow .pnl-label { padding-left: 24px; font-style: italic; }

/* Breathing room above Operating Expenses */
.pnl tr.pnl-gap td { padding-top: 20px; }

/* `tr td.x` (0,2,2) so this outranks `.pnl tr.pnl-strong td` above — otherwise a
   negative Net Income inherits the subtotal's --ink and never turns red. */
.pnl tr td.pnl-neg { color: var(--red); }
.pnl .pnl-nil { color: var(--text-faint); opacity: .55; }

.pnl-loading,
.pnl-empty,
.pnl-error { padding: 28px 4px; text-align: center; color: var(--text-faint); }
.pnl-error { color: var(--red); }

/* Section headings + indented account lines (detail statement) */
.pnl tr.pnl-heading td {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  padding-top: 20px;
  padding-bottom: 2px;
}
.pnl tr.pnl-account .pnl-label { padding-left: 18px; color: var(--text); }
.pnl tr.pnl-account td { padding-top: 4px; padding-bottom: 4px; }

/* ═══════════ Sales Tax → Nexus Check ═══════════
   One horizontal bar per state = progress to that state's own economic-nexus
   threshold. Two tracks when the state also has a transaction-count test. */

.nx-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
}
.nx-kpis { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; flex: 1 1 460px; }
.nx-kpis .fin-kpi { padding: 10px 12px; }
.nx-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nx-mult input { width: 68px; }

.nx-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 2px 10px; }
.nx-legend-note { font-size: 11px; color: var(--text-faint); margin-left: 6px; }
.nx-warn { color: var(--yellow); }

.nx-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid transparent;
}
/* Two brand greens, no second hue: Mulch Mound green for states that are at or
   heading over a threshold, a lighter tint of the same green for everything
   under it. Deriving the tint by mixing toward white (rather than toward the
   surface) keeps it genuinely LIGHTER in both light and dark themes. Urgency
   is carried by bar length + the status chip; colour just has to stay on brand. */
#view-finance {
  --nx-green:    var(--green);
  --nx-green-lt: color-mix(in srgb, var(--green) 55%, #fff);
}

/* Solid green fill → Pine text. --green-deep is the design system's designated
   "text on green fills" token and is deliberately theme-independent, so it
   clears 5:1 on both the light (#5ca85c) and dark (#74c274) brand greens.
   var(--bg) does NOT work here: it is near-white in light mode, which lands at
   2.7:1 on the green. */
.nx-chip.nx-over,
.nx-chip.nx-proj  { background: var(--nx-green); color: var(--green-deep, #1e3b2a);
                    border-color: var(--nx-green); font-weight: 700; }
/* Tinted chip → green mixed toward the theme's own text colour, which resolves
   dark on light and pale on dark. (--green-2 is not redefined by the dark
   bridge, so it stays deep pine and disappears on the dark tint.) */
.nx-chip.nx-appr,
.nx-chip.nx-watch { background: color-mix(in srgb, var(--nx-green) 16%, var(--surface));
                    color: color-mix(in srgb, var(--nx-green) 55%, var(--text));
                    border-color: color-mix(in srgb, var(--nx-green) 40%, var(--surface)); }
.nx-chip.nx-clear { background: var(--surface2);   color: var(--text-faint); border-color: var(--border); }
.nx-chip.nx-none  { background: var(--surface2);   color: var(--text-faint); border-color: var(--border); }

.nx-grid { display: flex; flex-direction: column; gap: 6px; }

.nx-row {
  display: grid; grid-template-columns: 160px 1fr 130px;
  align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px;
}
.nx-row .nx-state { font-size: 13px; font-weight: 600; color: var(--text); }
.nx-row.nx-none { opacity: .6; }
.nx-right { text-align: right; }

.nx-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border-light);
  color: var(--text-faint); font-size: 9px; font-weight: 700; cursor: help;
  vertical-align: 1px;
}

.nx-bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nx-track {
  position: relative; height: 20px; border-radius: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  overflow: hidden;
}
.nx-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  border-radius: 3px 0 0 3px; transition: width .25s ease;
  background: var(--text-faint);
}
.nx-fill.nx-over,
.nx-fill.nx-proj  { background: var(--nx-green); }
.nx-fill.nx-appr,
.nx-fill.nx-watch,
.nx-fill.nx-clear { background: var(--nx-green-lt); }
.nx-fill.nx-none  { background: var(--border); }
/* second (transaction) track reads as a lighter sibling of the dollar track */
.nx-fill.nx-fill-txn { opacity: .55; }
/* past 100% — notch the leading edge in the page bg so it reads as overflow
   without introducing a second hue */
.nx-fill-over { box-shadow: inset -2px 0 0 0 var(--bg); }

/* Labels sit ON the bar, and the bar can be either brand green or the light
   tint — no single text colour is readable over both plus the empty track. So
   each label carries its own translucent surface backing and keeps the normal
   text colour, which works over any fill in either theme. */
.nx-track-label, .nx-track-pct {
  position: absolute; top: 2px; line-height: 16px;
  padding: 0 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  font-size: 11px; white-space: nowrap;
}
.nx-track-label { left: 5px; font-weight: 600; color: var(--text); }
.nx-track-thr { color: var(--text-faint); font-weight: 400; }
.nx-track-pct {
  right: 5px; font-weight: 700; color: var(--text-dim);
  font-family: var(--mono-font, monospace);
}
.nx-meta { font-size: 10.5px; color: var(--text-faint); line-height: 1.45; }
.nx-flat { font-size: 11px; color: var(--text-faint); padding: 4px 0; }

@media (max-width: 900px) {
  .nx-row { grid-template-columns: 1fr; gap: 6px; }
  .nx-right { text-align: left; }
  .nx-kpis { grid-template-columns: 1fr; }
}

.nx-group {
  display: flex; align-items: baseline; gap: 8px;
  margin: 14px 2px 2px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.nx-group:first-child { margin-top: 2px; }
.nx-group-n { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.nx-group-sub { font-size: 11px; color: var(--text-faint); }

/* ═══════════ Sales Tax → State Desk ═══════════
   Rail of states on the left, one state's whole filing world on the right. */

.nx-click { cursor: pointer; }
.nx-click:hover { border-color: var(--nx-green); background: color-mix(in srgb, var(--nx-green) 5%, var(--surface)); }
.nx-open { font-size: 10px; color: var(--text-faint); margin-left: 6px; opacity: 0; transition: opacity .12s; }
.nx-click:hover .nx-open { opacity: 1; }

.sd-layout { display: grid; grid-template-columns: 232px 1fr; gap: 14px; align-items: start; }

.sd-rail {
  position: sticky; top: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.sd-rail-head { padding: 8px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.sd-rail-head input { width: 100%; }
.sd-railfilters { width: 100%; }
.sd-railfilters .fin-toggle { flex: 1; font-size: 10px; padding: 3px 4px; }
.sd-list { max-height: calc(100vh - 260px); overflow-y: auto; padding: 4px; }

.sd-item {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius);
  background: none; text-align: left; cursor: pointer; color: var(--text-dim); font-size: 12px;
}
.sd-item:hover { background: var(--surface2); color: var(--text); }
.sd-item.active {
  background: color-mix(in srgb, var(--nx-green) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--nx-green) 40%, var(--surface));
  color: var(--text); font-weight: 600;
}
.sd-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-item-flags { display: flex; gap: 3px; align-items: center; }
.sd-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--border-light); }
.sd-dot.nx-over, .sd-dot.nx-proj { background: var(--nx-green); }
.sd-dot.nx-appr, .sd-dot.nx-watch { background: var(--nx-green-lt); }
.sd-dot.nx-clear, .sd-dot.nx-none { background: var(--border-light); }
.sd-flag {
  font-size: 8.5px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 3px; border-radius: 3px;
  background: color-mix(in srgb, var(--nx-green) 20%, var(--surface));
  color: color-mix(in srgb, var(--nx-green) 55%, var(--text));
}
.sd-flag-key { background: none; padding: 0; font-size: 10px; }
.sd-flag-warn { background: var(--yellow-dim); color: var(--yellow); }

.sd-main { min-width: 0; }
.sd-empty, .sd-empty-sm { color: var(--text-faint); font-size: 13px; padding: 40px 20px; text-align: center; }
.sd-empty-sm { padding: 14px 8px; font-size: 12px; }

.sd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sd-title { font-size: 20px; margin: 0 0 5px; color: var(--text); }
.sd-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.sd-head-actions { display: flex; gap: 6px; align-items: center; }

.sd-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; white-space: nowrap;
  background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border);
}
.sd-chip-on {
  background: color-mix(in srgb, var(--nx-green) 16%, var(--surface));
  color: color-mix(in srgb, var(--nx-green) 55%, var(--text));
  border-color: color-mix(in srgb, var(--nx-green) 40%, var(--surface));
}
.sd-chip-warn { background: var(--yellow-dim); color: var(--yellow); border-color: var(--yellow); }

.sd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.sd-kpis .fin-kpi { padding: 10px 12px; }

.sd-banner {
  background: var(--yellow-dim); border: 1px solid var(--yellow);
  border-radius: var(--radius); padding: 9px 12px; margin-bottom: 10px;
  font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
}
.sd-banner strong { color: var(--text); }

.sd-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px; align-items: start; margin-top: 12px;
}

.sd-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}
.sd-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.sd-card-head h4 { margin: 0; font-size: 13px; color: var(--text); font-weight: 700; }
.sd-card-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sd-note { margin: 8px 0 0; font-size: 10.5px; }
.sd-regnote {
  margin: 8px 0 0; font-size: 10.5px; color: var(--text-faint);
  border-left: 2px solid color-mix(in srgb, var(--nx-green) 45%, var(--surface)); padding-left: 7px;
}

/* The ledger is wide by nature (7 columns incl. action buttons). Give it its
   own horizontal scroller so it can never push the page sideways. */
.sd-tablewrap { overflow-x: auto; }
.sd-ledger { width: 100%; }
.sd-ledger th, .sd-ledger td { white-space: nowrap; }
.sd-actions { text-align: right; }
.sd-actions .btn { margin-left: 4px; }

.sd-form { display: flex; flex-direction: column; gap: 8px; }
.sd-field { display: flex; flex-direction: column; gap: 3px; }
.sd-field > label { font-size: 10px; font-weight: 700; color: var(--text-dim); letter-spacing: .02em; }
.sd-field input, .sd-field select, .sd-field textarea {
  width: 100%; font-size: 12px; padding: 5px 7px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
}
.sd-field textarea { resize: vertical; font-family: inherit; }
.sd-hint { font-size: 10px; color: var(--text-faint); line-height: 1.5; }
.sd-hint code { font-family: var(--mono-font, monospace); font-size: 9.5px; background: var(--surface2); padding: 0 3px; border-radius: 3px; }
.sd-check { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); cursor: pointer; }

.sd-creds { display: flex; flex-direction: column; gap: 5px; }
.sd-cred-row { display: flex; align-items: center; gap: 8px; }
.sd-cred-label { font-size: 10px; font-weight: 700; color: var(--text-faint); width: 66px; flex: none; }
.sd-cred-val {
  flex: 1; font-family: var(--mono-font, monospace); font-size: 12px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-cred-plain { color: var(--text); }
.sd-copy { padding: 1px 6px; font-size: 10px; }
.sd-cred-notes {
  font-size: 11px; color: var(--text-dim); background: var(--surface2);
  border-radius: var(--radius); padding: 6px 8px; white-space: pre-wrap; margin-top: 3px;
}
.sd-cred-warn { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.sd-portal-link { font-size: 11px; color: var(--nx-green); }

.sd-nxwin { margin-bottom: 9px; }
.sd-nxwin:last-of-type { margin-bottom: 0; }
.sd-nxwin-label { font-size: 10px; color: var(--text-faint); margin-bottom: 3px; }
.sd-nxwin .nx-track { margin-bottom: 3px; }

@media (max-width: 1200px) {
  .sd-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .sd-layout { grid-template-columns: 1fr; }
  .sd-rail { position: static; }
  .sd-list { max-height: 220px; }
}
.sd-banner-warn { margin: 8px 0 0; }
.sd-ledger th, .sd-ledger td { padding-left: 7px; padding-right: 7px; }
.sd-ledger .btn { padding: 2px 7px; font-size: 10.5px; }
.nx-split { font-weight: 400; }