/* Hide Frappe website chrome — finance portal owns the full viewport
   (matches sales-portal). Without this, Website Settings shows the
   email signup bar + "Powered by ERPNext" under the app, and the
   website sidebar (Analytics / Sales Portal / …) sits beside it. */
body[data-path="portal"] nav.navbar,
body[data-path="portal"] header.navbar,
body[data-path="portal"] footer,
body[data-path="portal"] .web-footer,
body[data-path="portal"] .page-breadcrumbs,
body[data-path="portal"] .page-header-wrapper,
body[data-path="portal"] .page-header,
body[data-path="portal"] .website-sidebar,
body[data-path="portal"] .web-sidebar,
body[data-path="portal"] .sidebar-column,
body[data-path="portal"] .from-markdown > .page-header-wrapper,
nav.navbar, header.navbar, footer, .web-footer,
.page-breadcrumbs, .page-header-wrapper, .website-sidebar, .web-sidebar {
  display: none !important;
}
body[data-path="portal"] .page_content,
body[data-path="portal"] .page-content,
body[data-path="portal"] .main-section,
body[data-path="portal"] main.container,
body[data-path="portal"] .container,
body[data-path="portal"] .page-container,
.page_content, .page-content, .main-section, main.container,
.container.page-body, .page-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Also kill the footer-signup form if Website Settings still enables it */
.footer-subscribe, .web-footer-col, .footer-logo-extension {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Salvia-kit Dashboard v2 theme — glass shell, light sidebar, soft cards
   Reference: /home/minstr/Downloads/angular-dashboards-main/dashboard-v2
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ink: #1f2937;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --line: rgba(107, 114, 128, 0.22);
  --line-soft: rgba(107, 114, 128, 0.12);
  --card: rgba(255, 255, 255, 0.72);
  --card-solid: #ffffff;
  --glass: rgba(255, 255, 255, 0.31);
  --sidebar-bg: transparent;
  --sidebar-mobile: #e5e7eb;
  --accent: #1d4ed8;          /* blue-700 salvia CTA */
  --accent-soft: #dbeafe;
  --active-edge: #6b7280;     /* gray-500 active rail */
  --active-edge-strong: #22c55e; /* green-500 mobile active */
  --credit: #15803d;
  --debit: #b91c1c;
  --warn: #a16207;
  --warn-bg: #fef9c3;
  --live: #16a34a;
  --live-bg: #dcfce7;
  --err-bg: #fee2e2;
  --chip-bg: #e5e7eb;
  --radius: 1rem;             /* rounded-2xl */
  --radius-sm: 0.75rem;
  --f-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --shadow-soft: 0 8px 30px rgba(15, 23, 42, 0.06);

  /* Type scale — Desk-like hierarchy (readable, not micro-caps) */
  --fs-2xs: 0.6875rem; /* 11px — uppercase eyebrows/kickers, badges, chips */
  --fs-xs: 0.8125rem;  /* 13px — hints, table meta, secondary */
  --fs-sm: 0.875rem;   /* 14px — labels, compact UI */
  --fs-base: 0.9375rem;/* 15px — default body / table cells */
  --fs-md: 1rem;       /* 16px — emphasized body, inputs */
  --fs-lg: 1.125rem;   /* 18px — section titles */
  --fs-xl: 1.375rem;   /* 22px — page / modal titles */
  --fs-2xl: 1.5rem;    /* KPI figures */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;     /* extra-bold accents — badges, standout figures */
  --lh-tight: 1.35;
  --lh-body: 1.5;
}

body[data-path="portal"],
body:has(#fin-portal) {
  margin: 0 !important;
  background: #0f172a;
}
html[data-fin-theme="dark"] body[data-path="portal"],
html[data-fin-theme="dark"] body:has(#fin-portal) {
  background: #000000;
}

#fin-portal *,
#fin-portal *::before,
#fin-portal *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#fin-portal {
  font-family: var(--f-body);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  /* Soft gradient stand-in for salvia mac wallpaper + frosted overlay */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(241, 245, 249, 0.55) 100%),
    radial-gradient(1200px 700px at 10% -10%, #bfdbfe 0%, transparent 55%),
    radial-gradient(900px 600px at 90% 0%, #fbcfe8 0%, transparent 50%),
    radial-gradient(800px 500px at 50% 100%, #a7f3d0 0%, transparent 55%),
    #cbd5e1;
  -webkit-backdrop-filter: saturate(1.4);
  backdrop-filter: saturate(1.4);
  color-scheme: light;
}

/* ── Dark mode — true near-black (Ycode-style), high contrast ──
   Surfaces: app #09090b · elevated #111113 · input #0a0a0a · hover #1a1a1c
   Borders: soft white alpha (no slate-blue wash). Text: #fafafa / #a1a1aa. */
html[data-fin-theme="dark"] #fin-portal {
  color-scheme: dark;
  --ink: #fafafa;
  --muted: #a1a1aa;
  --muted-2: #71717a;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);
  --card: #111113;
  --card-solid: #111113;
  --glass: #09090b;
  --sidebar-bg: #09090b;
  --sidebar-mobile: #09090b;
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.18);
  --active-edge: #52525b;
  --active-edge-strong: #22c55e;
  --credit: #4ade80;
  --debit: #f87171;
  --warn: #fbbf24;
  --warn-bg: rgba(234, 179, 8, 0.12);
  --live: #4ade80;
  --live-bg: rgba(34, 197, 94, 0.12);
  --err-bg: rgba(239, 68, 68, 0.15);
  --chip-bg: #1a1a1c;
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.55);
  --dm-app: #09090b;
  --dm-elevated: #111113;
  --dm-input: #0a0a0a;
  --dm-hover: #1a1a1c;
  --dm-border: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  background: #000000;
}
@media (min-width: 1024px) {
  html[data-fin-theme="dark"] #fin-portal .fin-shell {
    background: var(--dm-app);
    box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
html[data-fin-theme="dark"] #fin-portal .sidebar {
  background: var(--dm-app);
  border-right: 1px solid var(--line-soft);
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .sidebar.sb-collapsed.sb-peek {
  background: var(--dm-app);
}
html[data-fin-theme="dark"] #fin-portal .sidebar-head {
  border-bottom-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .brand .wordmark {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .sb-toggle {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .sb-toggle:hover {
  background: var(--dm-hover);
  color: #fff;
}
html[data-fin-theme="dark"] #fin-portal .nav-group {
  color: var(--muted-2);
}
html[data-fin-theme="dark"] #fin-portal .nav-item {
  color: var(--muted) !important;
  background: transparent !important;
}
html[data-fin-theme="dark"] #fin-portal .nav-item:hover {
  color: #93c5fd !important;
  background: var(--accent-soft) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}
html[data-fin-theme="dark"] #fin-portal .nav-item:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
html[data-fin-theme="dark"] #fin-portal .nav-item.active {
  color: #fff !important;
  background: var(--accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--accent), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
html[data-fin-theme="dark"] #fin-portal .nav-branch[aria-expanded="true"] {
  background: var(--accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}
html[data-fin-theme="dark"] #fin-portal .nav-branch[aria-expanded="true"] .n-lbl {
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] #fin-portal .side-foot,
html[data-fin-theme="dark"] #fin-portal .side-foot a {
  color: var(--muted-2);
}
html[data-fin-theme="dark"] #fin-portal .main {
  background: #000000;
}
html[data-fin-theme="dark"] #fin-portal .content {
  background: transparent;
}
html[data-fin-theme="dark"] #fin-portal .topbar {
  background: rgba(9, 9, 11, 0.85);
  border-bottom: 1px solid var(--line-soft);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}
html[data-fin-theme="dark"] #fin-portal .tb-title {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .tb-eyebrow {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .menu-btn {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .role-pill {
  background: var(--dm-elevated);
  border-color: var(--line-soft);
  color: var(--ink);
  box-shadow: none;
}
html[data-fin-theme="dark"] #fin-portal .tb-icon-btn,
html[data-fin-theme="dark"] #fin-portal .tb-logout-btn {
  background: var(--dm-elevated);
  border-color: var(--line-soft);
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .role-name {
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .banner {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] #fin-portal .banner .dot {
  background: var(--muted-2);
}
html[data-fin-theme="dark"] #fin-portal .banner.live {
  background: var(--live-bg);
  color: var(--live);
  border-color: rgba(34, 197, 94, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .banner.sample {
  background: var(--warn-bg);
  border-color: rgba(234, 179, 8, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .banner.sample .dot {
  background: var(--warn);
}
html[data-fin-theme="dark"] #fin-portal .tb-icon-btn:hover,
html[data-fin-theme="dark"] #fin-portal .tb-logout-btn:hover {
  background: var(--dm-hover);
  border-color: var(--dm-border);
  color: #fff;
}
html[data-fin-theme="dark"] #fin-portal .tb-search {
  background: linear-gradient(180deg, #141416 0%, #0c0c0e 100%) !important;
  border: 1px solid var(--dm-border) !important;
  color: var(--ink) !important;
  opacity: 1;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .tb-search:hover {
  background: linear-gradient(180deg, #1a1a1c 0%, #111113 100%) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
html[data-fin-theme="dark"] #fin-portal .tb-search:focus {
  background: #0a0a0a !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45);
}
html[data-fin-theme="dark"] #fin-portal .tb-search-kbd {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .tb-search-wrap .tb-search-ico {
  color: var(--muted);
}

/* Filter bar */
html[data-fin-theme="dark"] #fin-portal .filter-bar {
  background: var(--dm-elevated);
  border: 1px solid var(--line-soft);
  box-shadow: none;
}
html[data-fin-theme="dark"] #fin-portal .filter-bar label,
html[data-fin-theme="dark"] #fin-portal .filter-bar .field > label {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .filter-bar select,
html[data-fin-theme="dark"] #fin-portal .filter-bar input[type="search"],
html[data-fin-theme="dark"] #fin-portal .filter-bar input[type="text"],
html[data-fin-theme="dark"] #fin-portal .filter-bar input[type="date"],
html[data-fin-theme="dark"] #fin-portal .filter-bar .field input,
html[data-fin-theme="dark"] #fin-portal .filter-bar .field select,
html[data-fin-theme="dark"] #fin-portal .filter-bar input {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  color: var(--ink) !important;
  color-scheme: dark;
}
html[data-fin-theme="dark"] #fin-portal .filter-bar select:focus,
html[data-fin-theme="dark"] #fin-portal .filter-bar input:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
  border-color: var(--accent) !important;
}
html[data-fin-theme="dark"] #fin-portal .filter-bar .chk {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .state-chip {
  background: var(--dm-input);
  border: 1px solid var(--line-soft);
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .state-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
html[data-fin-theme="dark"] #fin-portal .state-chip:hover:not(.active) {
  background: var(--dm-hover);
  color: var(--ink);
}

/* Cards + KPIs */
html[data-fin-theme="dark"] #fin-portal .card,
html[data-fin-theme="dark"] #fin-portal details.card,
html[data-fin-theme="dark"] #fin-portal details.card.fin-collapsible,
html[data-fin-theme="dark"] #fin-portal .fp-form-body.card {
  background: var(--dm-elevated) !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: none !important;
  color: var(--ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-fin-theme="dark"] #fin-portal .card-h h3,
html[data-fin-theme="dark"] #fin-portal .fin-titles h3 {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-sub,
html[data-fin-theme="dark"] #fin-portal .card-h .hint {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-sum {
  background: var(--dm-elevated);
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .kpi {
  background: var(--dm-elevated);
  border: 1px solid var(--line-soft);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-fin-theme="dark"] #fin-portal .kpi:first-child {
  border-left: 1px solid var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .kpi .k-fig {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .kpi .k-label,
html[data-fin-theme="dark"] #fin-portal .kpi .k-sub {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-warn {
  background: var(--dm-elevated);
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-warn .k-fig { color: #fbbf24 !important; }
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-ok {
  background: var(--dm-elevated);
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-ok .k-fig { color: #4ade80 !important; }

/* Tables */
html[data-fin-theme="dark"] #fin-portal .fin-scroll,
html[data-fin-theme="dark"] #fin-portal .mod-table-shell,
html[data-fin-theme="dark"] #fin-portal .mod-table-scroll {
  background: var(--dm-input);
}
html[data-fin-theme="dark"] #fin-portal table.ledger {
  background: transparent;
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal table.ledger thead th,
html[data-fin-theme="dark"] #fin-portal .ledger th {
  background: var(--dm-app) !important;
  color: var(--muted) !important;
  border-bottom-color: var(--line) !important;
}
html[data-fin-theme="dark"] #fin-portal table.ledger td,
html[data-fin-theme="dark"] #fin-portal .ledger td {
  color: var(--ink) !important;
  border-bottom-color: var(--line-soft) !important;
  background: transparent;
}
html[data-fin-theme="dark"] #fin-portal .ledger tr:hover td,
html[data-fin-theme="dark"] #fin-portal table.ledger tr.row-click:hover td {
  background: var(--dm-hover) !important;
}
html[data-fin-theme="dark"] #fin-portal .ledger tfoot td {
  background: var(--dm-elevated) !important;
  border-top-color: var(--line);
}
html[data-fin-theme="dark"] #fin-portal .ledger .mono,
html[data-fin-theme="dark"] #fin-portal .ledger .col-id,
html[data-fin-theme="dark"] #fin-portal .ledger td.col-id {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal .ledger .sub {
  color: var(--muted-2) !important;
}
html[data-fin-theme="dark"] #fin-portal .ledger .cell-main {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .empty {
  color: var(--muted) !important;
}

/* Chips + buttons */
html[data-fin-theme="dark"] #fin-portal .chip {
  color: #e4e4e7;
  background: var(--dm-hover);
}
html[data-fin-theme="dark"] #fin-portal .chip.overdue {
  color: #fecaca;
  background: rgba(185, 28, 28, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .chip.ok {
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.4);
}
html[data-fin-theme="dark"] #fin-portal .chip.plain {
  color: #d4d4d8;
  background: var(--dm-hover);
}
html[data-fin-theme="dark"] #fin-portal .chip.warn {
  color: #fde68a;
  background: rgba(180, 83, 9, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .chip.ol-st-draft {
  color: #93c5fd;
  background: rgba(29, 78, 216, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .chip.ol-st-submitted {
  color: #fde68a;
  background: rgba(180, 83, 9, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .chip.ol-st-approved {
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.4);
}
html[data-fin-theme="dark"] #fin-portal .chip.ol-st-rejected {
  color: #fecaca;
  background: rgba(185, 28, 28, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .chip.ol-st-cancelled {
  color: #fef08a;
  background: rgba(133, 77, 14, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .btn {
  box-shadow: none;
}
html[data-fin-theme="dark"] #fin-portal .btn.ghost {
  background: var(--dm-elevated);
  border: 1px solid var(--dm-border);
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .btn.ghost:hover {
  background: var(--dm-hover);
}
html[data-fin-theme="dark"] #fin-portal .btn.primary,
html[data-fin-theme="dark"] #fin-portal .btn:not(.ghost) {
  background: var(--accent);
  color: #fff;
  border: 0;
  box-shadow: none;
}
html[data-fin-theme="dark"] #fin-portal .fin-count {
  background: var(--dm-input);
  color: var(--muted);
  border-color: var(--line-soft);
}

/* Forms / toolbars / panels */
html[data-fin-theme="dark"] #fin-portal .mod-body,
html[data-fin-theme="dark"] #fin-portal .mod-panel,
html[data-fin-theme="dark"] #fin-portal .mod-kv,
html[data-fin-theme="dark"] #fin-portal .fp-form-root,
html[data-fin-theme="dark"] #fin-portal .mod-toolbar,
html[data-fin-theme="dark"] #fin-portal .fp-form-body {
  background: var(--dm-elevated) !important;
  color: var(--ink);
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .fp-form-title,
html[data-fin-theme="dark"] #fin-portal .fp-form-kicker {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-doc-name {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-doc-name.mono {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-sec-title,
html[data-fin-theme="dark"] #fin-portal .ff-sec-title {
  color: #e4e4e7 !important;
  border-bottom-color: var(--line-soft) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-kv-label,
html[data-fin-theme="dark"] #fin-portal .ff-fld label {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-kv-value {
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-tab,
html[data-fin-theme="dark"] #fin-portal .ff-tab {
  color: var(--muted);
  background: transparent;
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .mod-tab.on,
html[data-fin-theme="dark"] #fin-portal .ff-tab.on {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  border-bottom-color: var(--accent);
}
html[data-fin-theme="dark"] #fin-portal .mod-callout {
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .mod-callout.warn {
  background: rgba(234, 179, 8, 0.12);
  color: #fde68a;
  border-color: rgba(234, 179, 8, 0.3);
}
html[data-fin-theme="dark"] #fin-portal .mod-callout.ok {
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}
html[data-fin-theme="dark"] #fin-portal .mod-callout.info {
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
}
html[data-fin-theme="dark"] #fin-portal .mod-callout.ol-banner-draft {
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.3);
}
html[data-fin-theme="dark"] #fin-portal .mod-callout.ol-banner-submitted {
  background: rgba(234, 179, 8, 0.12);
  color: #fde68a;
  border-color: rgba(234, 179, 8, 0.3);
}
html[data-fin-theme="dark"] #fin-portal .mod-callout.ol-banner-approved {
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.3);
}
html[data-fin-theme="dark"] #fin-portal .mod-callout.ol-banner-rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.3);
}
html[data-fin-theme="dark"] #fin-portal .mod-callout.ol-banner-cancelled {
  background: rgba(161, 98, 7, 0.16);
  color: #fef08a;
  border-color: rgba(161, 98, 7, 0.35);
}

/* ALL form controls — kill residual white inputs (SI Customer Name etc.) */
html[data-fin-theme="dark"] #fin-portal input,
html[data-fin-theme="dark"] #fin-portal select,
html[data-fin-theme="dark"] #fin-portal textarea {
  color-scheme: dark;
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal input:disabled,
html[data-fin-theme="dark"] #fin-portal select:disabled,
html[data-fin-theme="dark"] #fin-portal textarea:disabled,
html[data-fin-theme="dark"] #fin-portal input[readonly],
html[data-fin-theme="dark"] #fin-portal select[readonly],
html[data-fin-theme="dark"] #fin-portal textarea[readonly] {
  background: var(--dm-elevated) !important;
  color: var(--muted) !important;
  opacity: 1;
}
html[data-fin-theme="dark"] #fin-portal .ff-fld input,
html[data-fin-theme="dark"] #fin-portal .ff-fld select,
html[data-fin-theme="dark"] #fin-portal .ff-fld textarea,
html[data-fin-theme="dark"] #fin-portal .ff-table input,
html[data-fin-theme="dark"] #fin-portal .ff-table select {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-link-box,
html[data-fin-theme="dark"] #fin-portal .ff-link.has-value .ff-link-box,
html[data-fin-theme="dark"] #fin-portal .ff-link.is-ro .ff-link-box {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-link-input {
  background: transparent !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-link-input:disabled {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-link-ico {
  color: #60a5fa !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-link.has-value .ff-link-ico {
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-link-clear,
html[data-fin-theme="dark"] #fin-portal .ff-link-open {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-link-clear:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-link-open:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-check {
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-desc {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-desc strong,
html[data-fin-theme="dark"] #fin-portal .ff-desc b {
  color: #d4d4d8 !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-sec {
  color: var(--ink);
}

/* SI totals / in-words / money strip */
html[data-fin-theme="dark"] #fin-portal .si-tot,
html[data-fin-theme="dark"] #fin-portal .si-totals-strip .si-tot {
  background: var(--dm-input) !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .si-tot b {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .si-in-words {
  background: var(--dm-input) !important;
  border-color: var(--line-soft) !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .si-in-words b,
html[data-fin-theme="dark"] #fin-portal .si-in-words [data-si-in-words] {
  color: #93c5fd !important;
}

/* Link dropdown (portaled to body) */
html[data-fin-theme="dark"] .ff-link-drop-portal,
html[data-fin-theme="dark"] #fin-portal .ff-link-drop {
  background: var(--dm-elevated) !important;
  border: 1px solid var(--dm-border) !important;
  color: var(--ink) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-opt,
html[data-fin-theme="dark"] #fin-portal .ff-link-opt {
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-opt:hover,
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-opt.is-active,
html[data-fin-theme="dark"] #fin-portal .ff-link-opt:hover,
html[data-fin-theme="dark"] #fin-portal .ff-link-opt.is-active {
  background: var(--dm-hover) !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-opt-id,
html[data-fin-theme="dark"] #fin-portal .ff-link-opt-id {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-opt-lab,
html[data-fin-theme="dark"] #fin-portal .ff-link-opt-lab {
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-empty,
html[data-fin-theme="dark"] #fin-portal .ff-link-empty {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-empty.err-row {
  color: var(--debit) !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-create,
html[data-fin-theme="dark"] #fin-portal .ff-link-create {
  background: var(--accent-soft) !important;
  border-top-color: var(--dm-border) !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-create:hover,
html[data-fin-theme="dark"] #fin-portal .ff-link-create:hover {
  background: var(--dm-hover) !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-create-lab,
html[data-fin-theme="dark"] #fin-portal .ff-link-create-lab {
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-create-hint,
html[data-fin-theme="dark"] #fin-portal .ff-link-create-hint {
  color: var(--muted) !important;
}

/* Menus */
html[data-fin-theme="dark"] #fin-portal .mod-menu {
  background: var(--dm-elevated) !important;
  border: 1px solid var(--dm-border) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-menu-item {
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-menu-item:hover {
  background: var(--dm-hover) !important;
}

/* Modals (body-mounted) */
html[data-fin-theme="dark"] #fin-portal .rc-modal-overlay,
html[data-fin-theme="dark"] body .rc-modal-overlay {
  background: rgba(0, 0, 0, 0.72);
}
html[data-fin-theme="dark"] #fin-portal .rc-modal-overlay .rc-modal,
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-modal,
html[data-fin-theme="dark"] body .fin-dlg,
html[data-fin-theme="dark"] .fin-dlg {
  background: var(--dm-elevated) !important;
  color: #fafafa !important;
  border: 1px solid var(--dm-border) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7) !important;
}

/* Making Reconciliation modal (rc-*) — body-mounted, dark */
html[data-fin-theme="dark"] body .rc-modal-overlay .mod-callout {
  background: var(--dm-hover);
  border-color: var(--dm-border);
  color: var(--muted);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .mod-callout.warn {
  background: var(--warn-bg);
  border-color: rgba(251, 191, 36, 0.4);
  color: var(--warn);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .mod-callout.ok {
  background: var(--live-bg);
  border-color: rgba(74, 222, 128, 0.4);
  color: var(--live);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .mod-callout.info {
  background: var(--accent-soft);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}
html[data-fin-theme="dark"] body .rc-modal-overlay .mod-table-shell {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] body .rc-modal-hd {
  background: var(--dm-elevated);
  border-bottom-color: var(--dm-border);
}
html[data-fin-theme="dark"] body .rc-modal-hd .fp-form-kicker {
  color: #93c5fd;
}
html[data-fin-theme="dark"] body .rc-modal-hd h3 {
  color: var(--ink);
}
html[data-fin-theme="dark"] body .rc-modal-hd .rc-note {
  color: var(--muted);
}
html[data-fin-theme="dark"] body .rc-modal-hd .blade-x {
  background: var(--dm-hover);
  color: var(--muted);
}
html[data-fin-theme="dark"] body .rc-modal-hd .blade-x:hover {
  background: var(--dm-border);
  color: var(--ink);
}
html[data-fin-theme="dark"] body .rc-modal-ft {
  background: var(--dm-elevated);
  border-top-color: var(--dm-border);
}
html[data-fin-theme="dark"] body .rc-modal-ft .btn.ghost,
html[data-fin-theme="dark"] body .rc-modal-overlay .btn.ghost {
  color: var(--ink);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .btn.tiny {
  background: var(--dm-hover);
  color: var(--ink);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-rate-bar {
  background: var(--dm-hover);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-rate-bar label {
  color: var(--muted);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-rate-bar input {
  background: var(--dm-input);
  border-color: var(--dm-border);
  color: var(--ink);
  color-scheme: dark;
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-rate-banner {
  background: var(--accent-soft);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bank-card {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
  box-shadow: none;
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bank-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bank-card.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bc-id {
  color: #93c5fd;
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bc-st.st-none {
  background: var(--dm-hover);
  color: var(--muted);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bc-st.st-partial {
  background: var(--warn-bg);
  color: var(--warn);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bc-st.st-complete {
  background: var(--live-bg);
  color: var(--live);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bc-client,
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bc-amt,
html[data-fin-theme="dark"] body .rc-modal-overlay .mg-fin-item .v,
html[data-fin-theme="dark"] body .rc-modal-overlay .summary-value {
  color: var(--ink);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bc-unit,
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bc-foot .lbl,
html[data-fin-theme="dark"] body .rc-modal-overlay .mg-fin-item .l,
html[data-fin-theme="dark"] body .rc-modal-overlay .summary-label,
html[data-fin-theme="dark"] body .rc-modal-overlay .mg-autobar,
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-inv-panel .empty,
html[data-fin-theme="dark"] body .rc-modal-overlay .sub-line {
  color: var(--muted);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-bc-foot {
  border-top-color: var(--dm-border);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-inv-panel {
  background: var(--dm-hover);
  border-color: var(--dm-border);
  box-shadow: none;
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-inv-panel .empty.ok {
  color: var(--live);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .mg-fin-item {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
  box-shadow: none;
}
html[data-fin-theme="dark"] body .rc-modal-overlay .mg-fin-item .v.due {
  color: var(--debit);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .mg-fin-item .v.paid {
  color: var(--live);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .summary-bar {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .mg-badge.rent {
  background: rgba(3, 105, 161, 0.25);
  color: #7dd3fc;
}
html[data-fin-theme="dark"] body .rc-modal-overlay .mg-badge.mi {
  background: rgba(126, 34, 206, 0.28);
  color: #d8b4fe;
}
html[data-fin-theme="dark"] body .rc-modal-overlay .ledger {
  background: var(--dm-elevated);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .ledger th {
  color: var(--muted);
  background: var(--dm-hover);
  border-bottom-color: var(--dm-border);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .ledger td {
  border-bottom-color: var(--line-soft);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .rc-amt {
  background: var(--dm-input);
  border-color: var(--dm-border);
  color: var(--ink);
  color-scheme: dark;
}
html[data-fin-theme="dark"] body .rc-modal-overlay .chip {
  background: var(--chip-bg);
  color: var(--muted);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .chip.overdue {
  background: var(--err-bg);
  color: var(--debit);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .chip.ok {
  background: var(--live-bg);
  color: var(--live);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .chip.plain {
  background: var(--chip-bg);
  color: var(--muted);
}
html[data-fin-theme="dark"] body .rc-modal-overlay .empty.err-row {
  color: var(--debit);
}
html[data-fin-theme="dark"] body .fin-dlg-field input,
html[data-fin-theme="dark"] body .fin-dlg-field select,
html[data-fin-theme="dark"] body .fin-dlg-field textarea,
html[data-fin-theme="dark"] .fin-dlg-field input,
html[data-fin-theme="dark"] .fin-dlg-field select,
html[data-fin-theme="dark"] .fin-dlg-field textarea {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  color: #fafafa !important;
  color-scheme: dark;
}
html[data-fin-theme="dark"] body .fin-dlg-field label,
html[data-fin-theme="dark"] .fin-dlg-field label {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-overlay,
html[data-fin-theme="dark"] .fin-dlg-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-hd,
html[data-fin-theme="dark"] .fin-dlg-hd {
  background: var(--dm-hover) !important;
  border-bottom-color: var(--dm-border) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-kicker,
html[data-fin-theme="dark"] .fin-dlg-kicker {
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] body .fin-dlg-hd h3,
html[data-fin-theme="dark"] .fin-dlg-hd h3 {
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-x,
html[data-fin-theme="dark"] .fin-dlg-x {
  background: var(--dm-elevated) !important;
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] body .fin-dlg-x:hover,
html[data-fin-theme="dark"] .fin-dlg-x:hover {
  background: var(--dm-hover) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-body,
html[data-fin-theme="dark"] .fin-dlg-body {
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-banner,
html[data-fin-theme="dark"] .fin-dlg-banner {
  background: var(--accent-soft) !important;
  border-color: var(--dm-border) !important;
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] body .fin-dlg-banner.warn,
html[data-fin-theme="dark"] .fin-dlg-banner.warn {
  background: var(--warn-bg) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: var(--warn) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-banner.ok,
html[data-fin-theme="dark"] .fin-dlg-banner.ok {
  background: var(--live-bg) !important;
  border-color: rgba(74, 222, 128, 0.4) !important;
  color: var(--live) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-banner.error,
html[data-fin-theme="dark"] .fin-dlg-banner.error {
  background: var(--err-bg) !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
  color: var(--debit) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-banner.info,
html[data-fin-theme="dark"] .fin-dlg-banner.info {
  background: var(--accent-soft) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] body .fin-dlg-banner.neutral,
html[data-fin-theme="dark"] .fin-dlg-banner.neutral {
  background: var(--card-bg, #1e293b) !important;
  border-color: var(--dm-border) !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-field .fin-dlg-hint,
html[data-fin-theme="dark"] .fin-dlg-field .fin-dlg-hint,
html[data-fin-theme="dark"] body .fin-dlg-field-bool .fin-dlg-field-label,
html[data-fin-theme="dark"] .fin-dlg-field-bool .fin-dlg-field-label {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-bool,
html[data-fin-theme="dark"] .fin-dlg-bool {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-bool:hover,
html[data-fin-theme="dark"] .fin-dlg-bool:hover {
  background: var(--dm-hover) !important;
  border-color: var(--accent) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-bool input[type="checkbox"],
html[data-fin-theme="dark"] .fin-dlg-bool input[type="checkbox"] {
  border-color: var(--dm-border) !important;
  background: var(--dm-input) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-bool-text,
html[data-fin-theme="dark"] .fin-dlg-bool-text {
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-ft,
html[data-fin-theme="dark"] .fin-dlg-ft {
  background: var(--dm-hover) !important;
  border-top-color: var(--dm-border) !important;
}
html[data-fin-theme="dark"] body .fin-dlg-ft .btn.ghost,
html[data-fin-theme="dark"] .fin-dlg-ft .btn.ghost {
  color: var(--ink) !important;
  border-color: var(--dm-border) !important;
}

/* GRN-from-PO qty-only dialog — dark */
html[data-fin-theme="dark"] body .pr-qty-only-table .pr-qty-col {
  color: #93c5fd;
}
html[data-fin-theme="dark"] body .pr-qty-only-table .pr-qty-cell input.pr-qty-input {
  background: var(--dm-input) !important;
  border-color: #60a5fa !important;
  color: var(--ink);
}
html[data-fin-theme="dark"] body .pr-qty-only-row:hover td {
  background: var(--dm-hover);
}

/* Pay Supplier Bills — bank withdrawal filter card — dark */
html[data-fin-theme="dark"] body .psb-bt-filters {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] body .psb-bt-fld .lbl,
html[data-fin-theme="dark"] body .psb-bt-filter-meta {
  color: var(--muted);
}
html[data-fin-theme="dark"] body .psb-bt-filter-meta b {
  color: var(--ink);
}
html[data-fin-theme="dark"] body .psb-bt-fld input,
html[data-fin-theme="dark"] body .psb-bt-fld select {
  background: var(--dm-input);
  border-color: var(--dm-border);
  color: var(--ink);
  color-scheme: dark;
}

html[data-fin-theme="dark"] #fin-portal .funnel-track {
  background: var(--dm-hover);
}
html[data-fin-theme="dark"] #fin-portal .funnel-meta b {
  color: #fafafa;
}

/* ── Dark v2 — list card headers, form kv values, doc sidebar (no white leftovers) ── */
html[data-fin-theme="dark"] #fin-portal details.card.fin-collapsible > summary.fin-sum,
html[data-fin-theme="dark"] #fin-portal details.card.fin-collapsible[open] > summary.fin-sum {
  background: var(--dm-elevated) !important;
  border-bottom-color: var(--line-soft) !important;
}
html[data-fin-theme="dark"] #fin-portal details.card.fin-collapsible > summary.fin-sum:hover {
  background: var(--dm-hover) !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-titles h3 {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-sub {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-chev {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal details.card.fin-collapsible[open] > summary .fin-chev {
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-count {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal details.card.fin-collapsible > summary.fin-sum:hover .fin-count {
  border-color: var(--line) !important;
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .card-h {
  background: transparent;
  border-bottom-color: var(--line-soft);
}

/* Read-only form values (Supplier Info etc.) — were white pills */
html[data-fin-theme="dark"] #fin-portal .mod-kv {
  background: transparent !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-kv-value {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-sales-note p {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  border-left-color: var(--accent) !important;
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-kv-value.linkish,
html[data-fin-theme="dark"] #fin-portal .linklike {
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-sec,
html[data-fin-theme="dark"] #fin-portal .mod-sec-title {
  color: #e4e4e7 !important;
  border-bottom-color: var(--line-soft) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-hint {
  color: var(--muted) !important;
}

/* Detail tables inside forms */
html[data-fin-theme="dark"] #fin-portal .mod-table-shell {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  box-shadow: none !important;
}
html[data-fin-theme="dark"] #fin-portal table.mod-table thead th {
  background: var(--dm-app) !important;
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal table.mod-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02) !important;
}
html[data-fin-theme="dark"] #fin-portal table.mod-table tbody tr:hover td {
  background: var(--dm-hover) !important;
}
html[data-fin-theme="dark"] #fin-portal table.mod-table td.empty {
  background: var(--dm-input) !important;
  color: var(--muted-2) !important;
}
html[data-fin-theme="dark"] #fin-portal table.mod-table .col-inv {
  color: var(--muted) !important;
}

/* Document form sidebar (Assigned To / Share / Tags / Attachments) */
html[data-fin-theme="dark"] #fin-portal .mod-form-sidebar {
  background: var(--dm-elevated) !important;
  border-color: var(--dm-border) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-rail {
  background: var(--dm-app) !important;
  border-right-color: var(--line-soft) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-rail-btn {
  color: var(--muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-rail-btn:hover {
  background: var(--dm-hover) !important;
  color: #93c5fd !important;
  border-color: var(--dm-border) !important;
  box-shadow: none !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-form-sidebar-body {
  background: var(--dm-elevated) !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-panel-hd {
  border-bottom-color: var(--line-soft) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-panel-title {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-title {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-item {
  border-bottom-color: var(--line-soft) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-avatar {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-name {
  color: #fafafa !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-sub {
  color: var(--muted) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-side-sec .btn,
html[data-fin-theme="dark"] #fin-portal .mod-form-sidebar .btn.ghost {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
  color: var(--ink) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-form-sidebar .btn.primary {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Tabs on detail views */
html[data-fin-theme="dark"] #fin-portal .mod-tabs {
  border-bottom-color: var(--line-soft) !important;
}
html[data-fin-theme="dark"] #fin-portal .mod-tab:hover {
  color: #fafafa !important;
  background: var(--dm-hover) !important;
}

/* Status / Active chips already themed; ensure green Active on dark lists */
html[data-fin-theme="dark"] #fin-portal .chip.active,
html[data-fin-theme="dark"] #fin-portal .chip.ok,
html[data-fin-theme="dark"] #fin-portal span.chip {
  border-color: transparent;
}

/* Catch-all: any residual pure-white surfaces inside portal when dark */
html[data-fin-theme="dark"] #fin-portal .card-h .right,
html[data-fin-theme="dark"] #fin-portal .mod-panel,
html[data-fin-theme="dark"] #fin-portal .mod-body.card {
  background: var(--dm-elevated) !important;
}
html[data-fin-theme="dark"] #fin-portal [class*="bg-white"],
html[data-fin-theme="dark"] #fin-portal .bg-white {
  background: var(--dm-elevated) !important;
}

#fin-portal a { color: var(--accent); text-decoration: none; }
#fin-portal a:hover { text-decoration: underline; }
#fin-portal button { font: inherit; cursor: pointer; }
#fin-portal :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Outer pad + inner glass panel (layout.component: base + content) */
#fin-portal .fin-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  /* allow edge collapse pill (sidebar right:-17px) to paint over main */
  overflow: visible;
}
@media (min-width: 1024px) {
  #fin-portal {
    padding: 1rem;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
  }
  #fin-portal .fin-shell {
    min-height: calc(100vh - 2rem);
    height: calc(100vh - 2rem);
    border-radius: 1rem;
    overflow: visible;
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-soft);
  }
}

/* ─── Sidebar (Salvia v2 — compact, no Bootstrap .nav collision) ───
   Root cause of the “huge gaps”: Frappe/Bootstrap `.nav` is a flex row
   that stretches children. We use `.fin-nav` instead and hard-reset flex. */
#fin-portal .sidebar {
  width: 16rem;
  flex: 0 0 16rem;
  max-width: 16rem;
  /* Was fully transparent — the sidebar showed the exact same gradient as the
     main content behind it, so it read as one flat surface instead of a rail.
     Frosted glass panel + right edge gives it the "light sidebar" separation
     the theme header comment already promised but never implemented. */
  background: var(--card);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-right: 1px solid var(--line);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5) inset, 4px 0 24px rgba(15, 23, 42, 0.05);
  color: var(--ink);
  position: relative;
  z-index: 40;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  /* visible so the edge collapse pill (right:-17px) is not clipped */
  overflow: visible;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: width 0.2s ease, flex-basis 0.2s ease, transform 0.2s ease;
}

/* Head: brand + collapse on one row */
#fin-portal .sidebar-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto !important;
  height: 3.75rem;
  min-height: 3.75rem;
  max-height: 3.75rem;
  padding: 0 0.75rem 0 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
/* Brand mark (traffic-light dots + wordmark) + edge collapse pill */
#fin-portal .sidebar-head {
  justify-content: space-between;
}
#fin-portal .brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}
/* Official M-Group Finance wordmark (inline SVG) — replaces traffic-light dots */
#fin-portal .brand-logo {
  display: block;
  height: 3.35rem;
  width: auto;
  max-width: 17.5rem;
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
}
#fin-portal .brand-logo text {
  font-family: var(--f-body);
}
#fin-portal .brand-mark {
  display: none;
  height: 2.15rem;
  width: auto;
  flex: 0 0 auto;
}
/* Dark theme: SVG is pure black/grey — invert so it reads on dark rails */
html[data-fin-theme="dark"] #fin-portal .brand-logo,
html[data-fin-theme="dark"] #fin-portal .brand-mark {
  filter: invert(1) brightness(1.08);
  opacity: 0.96;
}
/* Collapsed sidebar: show chevron mark only */
#fin-portal .sidebar.sb-collapsed .brand-logo {
  display: none !important;
}
#fin-portal .sidebar.sb-collapsed .brand-mark {
  display: block !important;
  height: 1.75rem;
  width: auto;
  margin: 0 auto;
}
#fin-portal .sidebar.sb-collapsed.sb-peek .brand-logo {
  display: block !important;
  height: 2.75rem;
  max-width: 14rem;
}
#fin-portal .sidebar.sb-collapsed.sb-peek .brand-mark {
  display: none !important;
}
/* Legacy traffic-light dots kept as fallback if logo assets fail to load */
#fin-portal .brand-dots {
  display: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #f96057;
  box-shadow: 12px 0 0 0 #f8ce52, 24px 0 0 0 #5fcf65;
  flex: 0 0 2.15rem;
  margin: 0 !important;
}
#fin-portal .brand-text {
  display: none; /* wordmark is inside the SVG logo */
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15;
}
#fin-portal .brand .wordmark {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
  color: #111827;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fin-portal .brand .wordmark b { color: var(--accent); font-weight: var(--fw-bold); }
#fin-portal .brand .sub {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 2px;
}

/* Sales-portal style edge pill: collapses the rail and can expand it again */
#fin-portal .sb-toggle {
  position: absolute !important;
  top: 50%;
  right: -17px;
  transform: translateY(-50%);
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.35rem !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.95);
  color: #6b7280;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
  z-index: 62;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, max-width 0.2s;
  overflow: hidden;
  white-space: nowrap;
}
#fin-portal .sb-toggle:hover {
  background: var(--accent, #1d4ed8);
  color: #fff;
  border-color: var(--accent, #1d4ed8);
}
#fin-portal .sb-toggle .sb-chev {
  width: auto;
  font-size: var(--fs-md);
  line-height: 1;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
#fin-portal .sb-toggle .sb-txt {
  display: inline-block !important;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  transition: max-width 0.2s ease, opacity 0.15s ease, padding 0.15s;
  padding-right: 0;
}
#fin-portal .sb-toggle:hover .sb-txt {
  max-width: 110px;
  opacity: 1;
  padding-right: 0.35rem;
  padding-left: 0.25rem;
}
html[data-fin-theme="dark"] #fin-portal .sb-toggle {
  background: #1e293b;
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .sb-toggle:hover {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-color: var(--accent, #3b82f6);
}

/* Navigation list — block layout, no flex-grow on items */
#fin-portal .fin-nav {
  display: block !important;
  flex: 1 1 auto !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  min-height: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  /* keep nav scrolling inside the rail even when sidebar overflow is visible */
  padding: 0.65rem 0 0.75rem !important;
  margin: 0 !important;
  list-style: none !important;
  gap: 0 !important;
  /* kill Bootstrap .nav flex distribution if it ever matches */
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  scrollbar-width: thin;
}
#fin-portal .fin-nav::-webkit-scrollbar { width: 4px; }
#fin-portal .fin-nav::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.3);
  border-radius: 4px;
}

#fin-portal .nav-section {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 0 0.85rem !important;
  padding: 0 !important;
}
#fin-portal .nav-section:last-child { margin-bottom: 0.25rem !important; }

#fin-portal .nav-group {
  display: block !important;
  flex: 0 0 auto !important;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 0.15rem 1.15rem 0.4rem !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1.3;
}

/* Nested tree: Bank / Income / Expenses collapsible branches */
#fin-portal .nav-branch {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.7rem;
  width: 100% !important;
  text-align: left;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #1f2937 !important;
  padding: 0.55rem 0.75rem 0.55rem 1.05rem !important;
  margin: 0 !important;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  cursor: pointer;
  appearance: none;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
#fin-portal .nav-branch:hover { background: var(--accent-soft) !important; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important; }
#fin-portal .nav-branch:active { box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.16) !important; }
#fin-portal .nav-branch[aria-expanded="true"] { background: rgba(29, 78, 216, 0.06) !important; box-shadow: inset 3px 0 0 var(--accent) !important; }
#fin-portal .nav-branch[aria-expanded="true"] .n-lbl { color: var(--accent) !important; }
#fin-portal .nav-branch .tick {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  opacity: 0.78;
}
#fin-portal .nav-branch .tick svg { width: 1.2rem; height: 1.2rem; display: block; }
#fin-portal .nav-branch .n-lbl { flex: 1 1 auto; min-width: 0; }
#fin-portal .nav-caret {
  font-size: var(--fs-2xs);
  opacity: 0.5;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
  margin-right: 0.15rem;
  transform: rotate(-90deg);
}
#fin-portal .nav-branch[aria-expanded="true"] .nav-caret { transform: rotate(0deg); opacity: 0.7; }
#fin-portal .nav-branch[aria-expanded="false"] .nav-caret { transform: rotate(-90deg); }
#fin-portal .nav-branch:not([aria-expanded]) .nav-caret { transform: rotate(-90deg); }
#fin-portal .nav-branch.nav-depth-1 {
  padding-left: 1.55rem !important;
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  color: #374151 !important;
}
#fin-portal .nav-leaves { display: block; }
#fin-portal .nav-leaves[hidden] { display: none !important; }
#fin-portal .nav-item.nav-depth-1 { padding-left: 1.85rem !important; font-size: var(--fs-xs); }
#fin-portal .nav-item.nav-depth-2 { padding-left: 2.55rem !important; font-size: var(--fs-xs); font-weight: var(--fw-medium); }
#fin-portal .nav-item.nav-depth-2 .tick { width: 1.15rem; height: 1.15rem; flex-basis: 1.15rem; opacity: 0.7; }
#fin-portal .nav-item.nav-depth-2 .tick svg { width: 1.05rem; height: 1.05rem; }

/* Cash New receipt modal */
.fin-cash-modal {
  max-width: 34rem;
  width: min(96vw, 34rem);
  max-height: 90vh;
  overflow: auto;
  background: var(--card, #fff);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
.fin-cash-modal .mod-kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
.fin-cash-modal .mod-kv { display: flex; flex-direction: column; gap: 0.25rem; }
.fin-cash-modal .mod-kv-value {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
html[data-fin-theme="dark"] .fin-cash-modal .mod-kv-value {
  background: var(--dm-input);
  border-color: var(--dm-border);
  color: var(--ink);
}
.fin-cash-modal .mod-kv:nth-child(4),
.fin-cash-modal .mod-kv:nth-child(5) { grid-column: 1 / -1; }

/* Invoice / party hub switcher — compact pill, RIGHT-aligned, NEVER full-width
 * (general .mod-tabs comes later in this file and would stretch it) */
#fin-portal .fin-switcher-row {
  display: flex !important;
  width: 100%;
  margin: 0 0 0.55rem;
  justify-content: flex-end;
  align-items: center;
}
#fin-portal .fin-switcher-row-right {
  justify-content: flex-end !important;
}
#fin-portal .fin-inv-switcher,
#fin-portal .fin-inv-switcher.mod-tabs {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 0.18rem;
  margin: 0 0 0 !important;
  padding: 0.28rem !important;
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: 0 !important;
  border-bottom: 0 !important; /* kill .mod-tabs underline track */
  /* Bland outer shade — soft slate shell, not loud blue */
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255,255,255,0.75);
}
#fin-portal .fin-inv-switcher .mod-tab {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  text-align: center;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  background: transparent !important;
  padding: 0.3rem 0.7rem !important;
  border-radius: 999px !important;
  font-size: var(--fs-2xs) !important;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  color: #64748b;
  cursor: pointer;
  margin: 0 !important;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
#fin-portal .fin-inv-switcher .mod-tab:hover {
  color: #334155;
  background: rgba(255,255,255,0.7) !important;
  border-color: #e2e8f0 !important;
}
#fin-portal .fin-inv-switcher .mod-tab.on {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}
/* Party hub: 4 snug tabs, still right-aligned via row */
#fin-portal .fin-inv-switcher.fin-party-switcher {
  max-width: min(100%, 34rem) !important;
  border-radius: 14px;
  padding: 0.32rem !important;
}
#fin-portal .fin-inv-switcher.fin-party-switcher .mod-tab {
  padding: 0.3rem 0.55rem !important;
  font-size: var(--fs-2xs) !important;
  border-radius: 10px !important;
}

/* ── Pay Supplier Bills: unmistakable bill selection ─────────────── */
#fin-portal .psb-bills-table tbody tr.psb-bill-row {
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
#fin-portal .psb-bills-table tbody tr.psb-bill-row:hover {
  background: rgba(99, 102, 241, 0.06);
}
#fin-portal .psb-bills-table tbody tr.psb-bill-row.is-selected {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.06)) !important;
  box-shadow: inset 4px 0 0 #4f46e5;
  outline: 1px solid rgba(99, 102, 241, 0.35);
  outline-offset: -1px;
}
#fin-portal .psb-bills-table th.psb-col-sel,
#fin-portal .psb-bills-table td.psb-col-sel {
  width: 5.75rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#fin-portal .psb-sel-radio {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: #64748b;
}
#fin-portal .psb-sel-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#fin-portal .psb-sel-radio-ui {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 2px solid #94a3b8;
  background: #fff;
  box-shadow: inset 0 0 0 0 #4f46e5;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
#fin-portal tr.is-selected .psb-sel-radio-ui {
  border-color: #4f46e5;
  background: #4f46e5;
  box-shadow: inset 0 0 0 3px #fff;
}
#fin-portal .psb-sel-tag {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
#fin-portal tr.is-selected .psb-sel-tag {
  color: #4f46e5;
}
#fin-portal .psb-sel-tag.muted { font-weight: var(--fw-semibold); opacity: 0.85; }
#fin-portal .psb-row-selected-chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.04em;
  color: #fff;
  background: #4f46e5;
  vertical-align: middle;
}
#fin-portal .psb-selected-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.65rem 0 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
#fin-portal .psb-selected-banner.is-on {
  border-color: #a5b4fc;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #fff 100%);
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.12);
}
#fin-portal .psb-selected-banner.is-empty {
  border-style: dashed;
}
#fin-portal .psb-sel-ico {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-heavy);
  font-size: var(--fs-md);
  background: #e2e8f0;
  color: #64748b;
}
#fin-portal .psb-selected-banner.is-on .psb-sel-ico {
  background: #4f46e5;
  color: #fff;
}
#fin-portal .psb-sel-body { flex: 1 1 auto; min-width: 0; }
#fin-portal .psb-sel-title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.2rem;
}
#fin-portal .psb-selected-banner.is-on .psb-sel-title { color: #4f46e5; }
#fin-portal .psb-sel-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
#fin-portal .psb-sel-ref {
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  color: #0f172a;
  letter-spacing: -0.01em;
}
#fin-portal .psb-sel-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.05em;
  color: #fff;
  background: #4f46e5;
}
#fin-portal .psb-sel-sub {
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: #334155;
  line-height: 1.4;
}
#fin-portal .psb-sel-hint {
  margin-top: 0.35rem;
  font-size: var(--fs-xs);
  color: #4f46e5;
  font-weight: var(--fw-semibold);
}

/* Sales Agent form — important info summary strip */
#fin-portal .sa-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.55rem;
  margin: 0 0 1rem;
}
#fin-portal .sa-sum-card {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 4.1rem;
}
#fin-portal .sa-sum-card.sa-violet {
  background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
  border-color: #ddd6fe;
}
#fin-portal .sa-sum-card.sa-warn {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fde68a;
}
#fin-portal .sa-sum-card .sa-lab {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
}
#fin-portal .sa-sum-card .sa-val {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: #0f172a;
  line-height: 1.2;
  word-break: break-word;
}
#fin-portal .sa-sum-card .sa-val-sm { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
#fin-portal .sa-sum-card .sa-sub {
  font-size: var(--fs-2xs);
  color: #7c3aed;
  font-weight: var(--fw-semibold);
}
#fin-portal .sa-sum-card.sa-warn .sa-val { color: #b45309; }

/* Party hub KPI tones — agent violet / staff teal-amber (not all red AP) */
#fin-portal .kpi.kpi-violet {
  background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
  border-color: #c4b5fd;
}
#fin-portal .kpi.kpi-violet .k-fig { color: #6d28d9; }
#fin-portal .kpi.kpi-teal {
  background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
  border-color: #5eead4;
}
#fin-portal .kpi.kpi-teal .k-fig { color: #0f766e; }
#fin-portal .kpi.kpi-amber {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fcd34d;
}
#fin-portal .kpi.kpi-amber .k-fig { color: #b45309; }
#fin-portal .kpi.kpi-cyan {
  background: linear-gradient(180deg, #ecfeff 0%, #cffafe 100%);
  border-color: #67e8f9;
}
#fin-portal .kpi.kpi-cyan .k-fig { color: #0e7490; }
html[data-fin-theme="dark"] #fin-portal .nav-branch { color: #e5e7eb !important; }
html[data-fin-theme="dark"] #fin-portal .nav-branch:hover { background: var(--accent-soft) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; }
html[data-fin-theme="dark"] #fin-portal .nav-branch:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important; }
html[data-fin-theme="dark"] #fin-portal .nav-branch.nav-depth-1 { color: var(--muted) !important; }

/* Pay Supplier Bills selection — dark */
html[data-fin-theme="dark"] #fin-portal .psb-sel-radio,
html[data-fin-theme="dark"] #fin-portal .psb-sel-tag {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .psb-sel-radio-ui {
  border-color: var(--dm-border);
  background: var(--dm-input);
}
html[data-fin-theme="dark"] #fin-portal tr.is-selected .psb-sel-radio-ui {
  border-color: #818cf8;
  background: #4f46e5;
  box-shadow: inset 0 0 0 3px var(--dm-elevated);
}
html[data-fin-theme="dark"] #fin-portal tr.is-selected .psb-sel-tag {
  color: #818cf8;
}
html[data-fin-theme="dark"] #fin-portal .psb-bills-table tbody tr.psb-bill-row:hover {
  background: rgba(99, 102, 241, 0.14);
}
html[data-fin-theme="dark"] #fin-portal .psb-selected-banner {
  border-color: var(--dm-border);
  background: var(--dm-elevated);
}
html[data-fin-theme="dark"] #fin-portal .psb-selected-banner.is-on {
  border-color: #4f46e5;
  background: rgba(79, 70, 229, 0.14);
  box-shadow: none;
}
html[data-fin-theme="dark"] #fin-portal .psb-sel-ico {
  background: var(--dm-hover);
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .psb-selected-banner.is-on .psb-sel-ico {
  background: #4f46e5;
  color: #fff;
}
html[data-fin-theme="dark"] #fin-portal .psb-sel-title {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .psb-selected-banner.is-on .psb-sel-title {
  color: #818cf8;
}
html[data-fin-theme="dark"] #fin-portal .psb-sel-ref {
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .psb-sel-sub {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .psb-sel-hint {
  color: #818cf8;
}

/* Sales Agent summary strip — dark */
html[data-fin-theme="dark"] #fin-portal .sa-sum-card {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] #fin-portal .sa-sum-card.sa-violet {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(167, 139, 250, 0.4);
}
html[data-fin-theme="dark"] #fin-portal .sa-sum-card.sa-warn {
  background: var(--warn-bg);
  border-color: rgba(251, 191, 36, 0.4);
}
html[data-fin-theme="dark"] #fin-portal .sa-sum-card .sa-lab {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .sa-sum-card .sa-val {
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .sa-sum-card .sa-sub {
  color: #a78bfa;
}
html[data-fin-theme="dark"] #fin-portal .sa-sum-card.sa-warn .sa-val {
  color: var(--warn);
}

/* Party hub KPI tones — dark (same pattern as kpi-warn/kpi-ok) */
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-violet {
  background: var(--dm-elevated);
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-violet .k-fig { color: #a78bfa !important; }
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-teal {
  background: var(--dm-elevated);
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-teal .k-fig { color: #2dd4bf !important; }
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-amber {
  background: var(--dm-elevated);
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-amber .k-fig { color: #fbbf24 !important; }
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-cyan {
  background: var(--dm-elevated);
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .kpi.kpi-cyan .k-fig { color: #22d3ee !important; }
html[data-fin-theme="dark"] #fin-portal .fin-inv-switcher {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: none;
}
html[data-fin-theme="dark"] #fin-portal .fin-inv-switcher .mod-tab {
  color: #bfdbfe;
}
html[data-fin-theme="dark"] #fin-portal .fin-inv-switcher .mod-tab:hover {
  color: #eff6ff;
  background: rgba(255,255,255,0.06);
  border-color: rgba(96, 165, 250, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .fin-inv-switcher .mod-tab.on {
  background: rgba(15, 23, 42, 0.85);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}


#fin-portal .nav-item,
#fin-portal button.nav-item {
  display: flex !important;
  flex-direction: row !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.7rem;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  text-align: left;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-right: 3px solid transparent !important;
  color: #1f2937 !important;
  padding: 0.55rem 1rem 0.55rem 1.05rem !important;
  margin: 0 !important;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  box-shadow: none !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
#fin-portal .nav-item:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
}
#fin-portal .nav-item:active {
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.16) !important;
}
#fin-portal .nav-item.active {
  background: var(--accent-soft) !important;
  border-right-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: var(--fw-semibold);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}
#fin-portal .nav-item .tick {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  opacity: 0.78;
  color: inherit;
}
#fin-portal .nav-item .tick svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
#fin-portal .nav-item.active .tick {
  opacity: 1;
  color: var(--accent);
}
html[data-fin-theme="dark"] #fin-portal .nav-item.active .tick {
  color: #60a5fa;
}
#fin-portal .nav-item .n-lbl {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fin-portal .nav-item .gate {
  flex: 0 0 auto;
  margin-left: 0.35rem;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  background: rgba(255, 255, 255, 0.75);
  line-height: 1.2;
}
html[data-fin-theme="dark"] #fin-portal .nav-item .gate {
  color: var(--muted-2);
  border-color: var(--dm-border);
  background: var(--dm-hover);
}

/* FHTS footer (Sales Centre parity) */
#fin-portal .side-foot {
  display: block !important;
  flex: 0 0 auto !important;
  margin-top: auto;
  padding: 0.85rem 1.1rem 1rem;
  border-top: 1px solid var(--line-soft, #e5e7eb);
  font-size: var(--fs-2xs);
  line-height: 1.45;
  color: var(--muted-2, #8FA1B6);
  letter-spacing: 0.01em;
}
#fin-portal .side-foot a {
  color: #60a5fa;
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
#fin-portal .side-foot a:hover { text-decoration: underline; }
html[data-fin-theme="dark"] #fin-portal .side-foot {
  color: #7E8FA3;
  border-top-color: rgba(148, 163, 184, 0.18);
}
html[data-fin-theme="dark"] #fin-portal .side-foot a { color: #93c5fd; }

/* Collapsed rail */
#fin-portal .sidebar.sb-collapsed {
  width: 4.25rem;
  flex-basis: 4.25rem;
  max-width: 4.25rem;
}
#fin-portal .sidebar.sb-collapsed .brand-text,
#fin-portal .sidebar.sb-collapsed .nav-group,
#fin-portal .sidebar.sb-collapsed .nav-item .n-lbl,
#fin-portal .sidebar.sb-collapsed .nav-branch .n-lbl,
#fin-portal .sidebar.sb-collapsed .nav-caret,
#fin-portal .sidebar.sb-collapsed .nav-item .gate,
#fin-portal .sidebar.sb-collapsed .side-foot,
#fin-portal .sidebar.sb-collapsed .side-foot-label,
#fin-portal .sidebar.sb-collapsed .side-foot-links,
#fin-portal .sidebar.sb-collapsed .foot-meta { display: none !important; }
#fin-portal .sidebar.sb-collapsed .nav-branch {
  justify-content: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
#fin-portal .sidebar.sb-collapsed .sidebar-head {
  justify-content: center;
  padding: 0 0.35rem;
  gap: 0.25rem;
}
#fin-portal .sidebar.sb-collapsed .brand {
  flex: 0 0 auto;
  justify-content: center;
}
#fin-portal .sidebar.sb-collapsed .brand-dots {
  flex: 0 0 0.7rem;
  box-shadow: none; /* single red dot when collapsed */
}
#fin-portal .sidebar.sb-collapsed .nav-item {
  justify-content: center !important;
  padding: 0.65rem 0.35rem !important;
  gap: 0;
  border-right-width: 3px !important;
}
#fin-portal .sidebar.sb-collapsed .nav-section { margin-bottom: 0.35rem !important; }
#fin-portal .sidebar.sb-collapsed .sb-chev { transform: rotate(180deg); }
#fin-portal .sidebar.sb-collapsed.sb-peek {
  width: 16rem;
  flex-basis: 4.25rem;
  max-width: 16rem;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-height: 100%;
  background: rgba(248, 250, 252, 0.98);
  box-shadow: 8px 0 28px rgba(15, 23, 42, 0.12);
  z-index: 60;
  border-radius: 1rem 0 0 1rem;
}
#fin-portal .sidebar.sb-collapsed.sb-peek .brand-text,
#fin-portal .sidebar.sb-collapsed.sb-peek .nav-group,
#fin-portal .sidebar.sb-collapsed.sb-peek .nav-item .n-lbl { display: block !important; }
#fin-portal .sidebar.sb-collapsed.sb-peek .side-foot { display: flex !important; }
#fin-portal .sidebar.sb-collapsed.sb-peek .side-foot-label,
#fin-portal .sidebar.sb-collapsed.sb-peek .side-foot-links,
#fin-portal .sidebar.sb-collapsed.sb-peek .foot-meta { display: flex !important; }
#fin-portal .sidebar.sb-collapsed.sb-peek .side-foot-label { display: block !important; }
#fin-portal .sidebar.sb-collapsed.sb-peek .foot-meta { display: block !important; }
#fin-portal .sidebar.sb-collapsed.sb-peek .nav-item .gate { display: inline-block !important; }
#fin-portal .sidebar.sb-collapsed.sb-peek .nav-item {
  justify-content: flex-start !important;
  padding: 0.55rem 1rem 0.55rem 1.05rem !important;
  gap: 0.7rem;
}
#fin-portal .sidebar.sb-collapsed.sb-peek .sidebar-head {
  justify-content: space-between;
  padding: 0 0.75rem 0 1.1rem;
}
#fin-portal .sidebar.sb-collapsed.sb-peek .brand-dots {
  flex: 0 0 2.15rem;
  box-shadow: 12px 0 0 0 #f8ce52, 24px 0 0 0 #5fcf65;
}
#fin-portal .sidebar.sb-collapsed.sb-peek .sb-chev { transform: none; }
#fin-portal .sidebar.sb-collapsed.sb-peek .nav-section { margin-bottom: 0.85rem !important; }

/* ─── Main column ─── */
#fin-portal .main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#fin-portal .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem 0.85rem;
  padding: 0.65rem 1.15rem 0.65rem 1.25rem;
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid var(--line-soft);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}

#fin-portal .menu-btn {
  display: none;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--fs-xl);
  color: #374151;
  line-height: 1;
}
#fin-portal .tb-titles {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(26rem, 42vw);
}
#fin-portal .tb-eyebrow {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#fin-portal .tb-title {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: #111827;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Top search — docks next to account actions (does not collide with long doc titles) */
#fin-portal .tb-search-wrap {
  position: relative;
  flex: 0 1 15rem;
  width: 15rem;
  max-width: 15rem;
  min-width: 9.5rem;
  margin-left: auto;
  margin-right: 0.35rem;
  display: none;
}
@media (min-width: 768px) {
  #fin-portal .tb-search-wrap { display: block; }
}
@media (min-width: 1100px) {
  #fin-portal .tb-search-wrap {
    flex-basis: 17rem;
    width: 17rem;
    max-width: 17rem;
  }
}
#fin-portal .tb-search-wrap .tb-search-ico {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.95rem;
  height: 0.95rem;
  color: #94a3b8;
  pointer-events: none;
  z-index: 1;
}
#fin-portal .tb-search {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.88) 100%);
  color: #334155;
  padding: 0.5rem 2.55rem 0.5rem 2.35rem;
  font-size: var(--fs-sm, 0.875rem);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#fin-portal .tb-search::placeholder {
  color: #94a3b8;
}
#fin-portal .tb-search:hover {
  border-color: rgba(100, 116, 139, 0.4);
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
#fin-portal .tb-search:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4), inset 0 1px 2px rgba(15, 23, 42, 0.03);
  background: #fff;
}
#fin-portal .tb-search-kbd {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: #94a3b8;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 0.45rem;
  padding: 0.12rem 0.38rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  pointer-events: none;
}

/* ── Top-bar finance search (⌘K) — pages + reports + records ───── */
#fin-portal .tb-search-wrap {
  z-index: 200;
  position: relative;
  isolation: isolate;
}
#fin-portal .fin-nav-search-panel {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 0.5rem);
  width: min(32rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 28rem);
  overflow-x: hidden;
  overflow-y: auto;
  /* Fully opaque — form content must never show through */
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.85rem;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.03),
    0 24px 48px rgba(15, 23, 42, 0.18),
    0 4px 12px rgba(15, 23, 42, 0.08);
  padding: 0.4rem 0 0.45rem;
  z-index: 300;
  -webkit-overflow-scrolling: touch;
}
#fin-portal .fin-nav-search-group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.55rem 1rem 0.3rem;
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  background: linear-gradient(180deg, #fff 70%, rgba(255, 255, 255, 0.92) 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}
#fin-portal .fin-nav-search-group + .fin-nav-search-item {
  margin-top: 0.15rem;
}
#fin-portal .fin-nav-search-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: inherit;
  padding: 0.62rem 1rem;
  margin: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
}
#fin-portal .fin-nav-search-item + .fin-nav-search-item {
  border-top: 1px solid rgba(241, 245, 249, 0.95);
}
#fin-portal .fin-nav-search-item:hover,
#fin-portal .fin-nav-search-item.is-active {
  background: #f1f5f9;
}
#fin-portal .fin-nav-search-main {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  overflow: hidden;
}
#fin-portal .fin-nav-search-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#fin-portal .fin-nav-search-label.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  letter-spacing: -0.01em;
}
#fin-portal .fin-nav-search-label mark,
#fin-portal .fin-nav-search-path mark {
  background: rgba(250, 204, 21, 0.4);
  color: inherit;
  border-radius: 0.15rem;
  padding: 0 0.08rem;
  font-weight: inherit;
}
#fin-portal .fin-nav-search-path {
  display: block;
  font-size: 0.72rem;
  font-weight: 450;
  color: #64748b;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#fin-portal .fin-nav-search-kind {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
  line-height: 1.2;
}
#fin-portal .fin-nav-search-item.is-active .fin-nav-search-kind,
#fin-portal .fin-nav-search-item:hover .fin-nav-search-kind {
  background: #e0e7ff;
  border-color: #c7d2fe;
  color: #3730a3;
}
#fin-portal .fin-nav-search-kind.k-report {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
#fin-portal .fin-nav-search-kind.k-record {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}
#fin-portal .fin-nav-search-empty {
  padding: 1rem 1.1rem 1.1rem;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.45;
  background: #fff;
}
#fin-portal .fin-nav-search-empty.fin-nav-search-loading {
  color: #64748b;
  font-size: 0.8rem;
}
#fin-portal .fin-nav-search-hint {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  color: #94a3b8;
}

html[data-fin-theme="dark"] #fin-portal .fin-nav-search-panel {
  background: #141416;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
}
html[data-fin-theme="dark"] #fin-portal .fin-nav-search-group {
  color: #94a3b8;
  background: linear-gradient(180deg, #141416 70%, rgba(20, 20, 22, 0.92) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-fin-theme="dark"] #fin-portal .fin-nav-search-item {
  background: #141416;
  border-top-color: rgba(255, 255, 255, 0.04);
}
html[data-fin-theme="dark"] #fin-portal .fin-nav-search-item + .fin-nav-search-item {
  border-top-color: rgba(255, 255, 255, 0.05);
}
html[data-fin-theme="dark"] #fin-portal .fin-nav-search-item:hover,
html[data-fin-theme="dark"] #fin-portal .fin-nav-search-item.is-active {
  background: rgba(59, 130, 246, 0.16);
}
html[data-fin-theme="dark"] #fin-portal .fin-nav-search-label {
  color: #f1f5f9;
}
html[data-fin-theme="dark"] #fin-portal .fin-nav-search-path {
  color: #94a3b8;
}
html[data-fin-theme="dark"] #fin-portal .fin-nav-search-kind {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
html[data-fin-theme="dark"] #fin-portal .fin-nav-search-empty {
  background: #141416;
  color: #e2e8f0;
}

#fin-portal .top-right {
  margin-left: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
#fin-portal .role-pill {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.3rem 0.85rem 0.3rem 0.35rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#fin-portal .tb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.7);
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
}
#fin-portal .tb-icon-btn:hover {
  background: #fff;
  border-color: var(--line);
  color: #111827;
}
#fin-portal .tb-icon-btn .fin-theme-ico { display: block; }
/* In light mode: show moon (switch to dark). In dark: show sun (switch to light). */
html[data-fin-theme="dark"] #fin-portal .fin-theme-ico-moon { display: none !important; }
html[data-fin-theme="dark"] #fin-portal .fin-theme-ico-sun { display: block !important; }
html[data-fin-theme="light"] #fin-portal .fin-theme-ico-sun,
html:not([data-fin-theme]) #fin-portal .fin-theme-ico-sun { display: none !important; }
html[data-fin-theme="light"] #fin-portal .fin-theme-ico-moon,
html:not([data-fin-theme]) #fin-portal .fin-theme-ico-moon { display: block !important; }

#fin-portal .tb-logout-btn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.75);
  color: #374151;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
}
#fin-portal .tb-logout-btn:hover {
  background: #fff;
  color: #111827;
  border-color: #9ca3af;
}
#fin-portal .role-av {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  overflow: hidden;
}
#fin-portal .role-av .role-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}
#fin-portal .role-name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: #111827;
}
#fin-portal .role-scope {
  font-size: var(--fs-2xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Status banner */
#fin-portal .banner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 1.25rem;
  padding: 0.55rem 1rem;
  font-size: var(--fs-xs);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--line-soft);
  color: var(--muted);
}
#fin-portal .banner .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #9ca3af;
  flex: 0 0 auto;
}
#fin-portal .banner.live {
  background: rgba(220, 252, 231, 0.75);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.25);
}
#fin-portal .banner.live .dot {
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
#fin-portal .banner.sample {
  background: rgba(254, 249, 195, 0.85);
  color: var(--warn);
  border-color: rgba(202, 138, 4, 0.25);
}
#fin-portal .banner.sample .dot { background: #ca8a04; }
#fin-portal .banner .host {
  margin-left: auto;
  opacity: 0.7;
  font-size: var(--fs-2xs);
}

/* Content scroll area */
#fin-portal .content {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.25rem 3rem;
  background: transparent;
}
#fin-portal .content::-webkit-scrollbar { width: 6px; }
#fin-portal .content::-webkit-scrollbar-thumb {
  background: rgba(1, 2, 3, 0.28);
  border-radius: 10px;
}
#fin-portal .view { display: none; }
#fin-portal .view.active {
  display: block;
  animation: fin-fade 0.18s ease-out;
}
/* Deep-link reload: never paint Overview when hash is another module/doc */
html[data-fin-boot-view]:not([data-fin-boot-view="overview"]) #fin-portal #view-overview {
  display: none !important;
}
html[data-fin-boot-view="docform"] #fin-portal #view-docform {
  display: block !important;
  animation: none;
}
/* CRITICAL: document form exclusive — never paint list under/over SI/Receipt/PE form */
html[data-fin-boot-view="docform"] #fin-portal .view:not(#view-docform),
#fin-portal.fin-doc-open .view:not(#view-docform) {
  display: none !important;
}
#fin-portal.fin-doc-open #view-docform {
  display: block !important;
  animation: none;
}
/* Doc forms: document name lives in form toolbar/header — not duplicated in topbar */
#fin-portal.fin-doc-open .tb-title {
  display: none !important;
}
#fin-portal.fin-doc-open .tb-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}

/* ── Attach / Google Sheets zones (plain chrome; subtle blue ONLY on Attach control) ── */
#fin-portal .fin-attach-zone,
#fin-portal .ff-attach-zone {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.15rem;
  padding: 0.75rem 0.9rem;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  box-shadow: none;
}
#fin-portal .fin-attach-zone-hd,
#fin-portal .ff-attach-zone-hd {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink, #374151);
}
#fin-portal .fin-attach-zone-hd svg,
#fin-portal .ff-attach-zone-hd svg {
  flex: 0 0 auto;
  color: var(--muted, #6b7280);
}
#fin-portal .fin-attach-zone input[type="file"],
#fin-portal .ff-attach-zone input[type="file"],
#fin-portal .fin-attach-zone input[type="url"],
#fin-portal .fin-attach-zone input[type="text"],
#fin-portal .ff-attach-zone input[type="url"],
#fin-portal .ff-attach-zone input[type="text"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  background: #fff;
  padding: 0.45rem 0.65rem;
  font: inherit;
  color: var(--ink, #111827);
}
#fin-portal .fin-attach-zone input:focus,
#fin-portal .ff-attach-zone input:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}
#fin-portal .fin-attach-zone .ff-desc,
#fin-portal .ff-attach-zone .ff-desc {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted, #6b7280);
  opacity: 1;
}
/* Subtle blue — Attach / file-picker button only (not the whole zone) */
#fin-portal .fin-attach-zone input[type="file"]::file-selector-button,
#fin-portal .ff-attach-zone input[type="file"]::file-selector-button {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  margin-right: 0.65rem;
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
#fin-portal .fin-attach-zone input[type="file"]::file-selector-button:hover,
#fin-portal .ff-attach-zone input[type="file"]::file-selector-button:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
#fin-portal .fin-attach-zone input[type="file"]::-webkit-file-upload-button,
#fin-portal .ff-attach-zone input[type="file"]::-webkit-file-upload-button {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  margin-right: 0.65rem;
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
#fin-portal .fin-attach-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  font-size: var(--fs-sm);
  color: #1d4ed8;
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#fin-portal .fin-attach-file:hover { background: #f9fafb; }
html[data-fin-theme="dark"] #fin-portal .fin-attach-zone,
html[data-fin-theme="dark"] #fin-portal .ff-attach-zone {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: none;
}
html[data-fin-theme="dark"] #fin-portal .fin-attach-zone-hd,
html[data-fin-theme="dark"] #fin-portal .ff-attach-zone-hd {
  color: #e5e7eb;
}
html[data-fin-theme="dark"] #fin-portal .fin-attach-zone-hd svg,
html[data-fin-theme="dark"] #fin-portal .ff-attach-zone-hd svg {
  color: #94a3b8;
}
html[data-fin-theme="dark"] #fin-portal .fin-attach-zone input,
html[data-fin-theme="dark"] #fin-portal .ff-attach-zone input,
html[data-fin-theme="dark"] #fin-portal .fin-attach-file {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e5e7eb;
}
html[data-fin-theme="dark"] #fin-portal .fin-attach-zone .ff-desc,
html[data-fin-theme="dark"] #fin-portal .ff-attach-zone .ff-desc {
  color: #94a3b8;
}
html[data-fin-theme="dark"] #fin-portal .fin-attach-zone input[type="file"]::file-selector-button,
html[data-fin-theme="dark"] #fin-portal .ff-attach-zone input[type="file"]::file-selector-button,
html[data-fin-theme="dark"] #fin-portal .fin-attach-zone input[type="file"]::-webkit-file-upload-button,
html[data-fin-theme="dark"] #fin-portal .ff-attach-zone input[type="file"]::-webkit-file-upload-button {
  background: rgba(30, 64, 175, 0.35);
  border-color: rgba(96, 165, 250, 0.45);
  color: #bfdbfe;
}
html[data-fin-theme="dark"] #fin-portal .fin-attach-file:hover {
  background: var(--dm-hover);
}
html[data-fin-theme="dark"] #fin-portal .bsi-preview-panel .bsi-preview-hd {
  background: var(--dm-elevated);
}
html[data-fin-theme="dark"] #fin-portal .bsi-preview-panel table.ledger thead th {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}
html[data-fin-theme="dark"] #fin-portal .bsi-preview-panel table.ledger tbody tr:nth-child(even) {
  background: rgba(59, 130, 246, 0.05);
}

/* BSI preview table — full ledger treatment */
#fin-portal .bsi-preview-panel {
  margin-top: 1rem;
  padding: 0;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  background: var(--card, #fff);
  overflow: hidden;
}
#fin-portal .bsi-preview-panel .bsi-preview-hd {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line, #e5e7eb);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  font-weight: var(--fw-semibold);
}
#fin-portal .bsi-preview-panel .bsi-preview-body {
  padding: 0.85rem 1rem 1rem;
}
#fin-portal .bsi-preview-panel .mod-table-shell {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
}
#fin-portal .bsi-preview-panel table.ledger {
  width: 100%;
  min-width: 720px;
}
#fin-portal .bsi-preview-panel table.ledger thead th {
  background: #eff6ff;
  color: #1e3a8a;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
#fin-portal .bsi-preview-panel table.ledger tbody tr:nth-child(even) {
  background: rgba(239, 246, 255, 0.35);
}
#fin-portal .bsi-preview-panel table.ledger td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#fin-portal .bsi-preview-warn {
  margin-bottom: 0.75rem;
}
/* Bank Statement Import — Desk-parity Import File Errors + Import Log */
#fin-portal .bsi-errors-panel {
  margin: 0.75rem 0 1rem;
}
#fin-portal .bsi-import-errors {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
#fin-portal .bsi-warn-block {
  padding: 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #e5e7eb) 80%, transparent);
}
#fin-portal .bsi-warn-block:last-child {
  border-bottom: none;
}
#fin-portal .bsi-warn-hd {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  margin-bottom: 0.2rem;
}
#fin-portal .bsi-warn-body {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text, #0f172a);
}
#fin-portal .bsi-status-banner {
  margin: 0.5rem 0 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
#fin-portal .bsi-import-log {
  margin-top: 1.25rem;
}
#fin-portal .bsi-traceback {
  margin-top: 0.35rem;
}
#fin-portal .bsi-pre {
  font-size: var(--fs-2xs);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 12rem;
  overflow: auto;
  background: color-mix(in srgb, var(--muted, #64748b) 8%, transparent);
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  margin: 0.35rem 0 0;
}
/* ── Row pencil dialogs (Payment Schedule + Deposit) — body-mounted, Salvia ── */
.ol-row-edit-overlay,
#fin-portal .ol-row-edit-overlay,
body > .ol-row-edit-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100200 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  overflow: auto;
  box-sizing: border-box;
}
.ol-row-edit-dialog,
#fin-portal .ol-row-edit-dialog,
body > .ol-row-edit-overlay .ol-row-edit-dialog {
  width: min(760px, 100%);
  background: var(--card, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #0d9488) 18%, var(--line, #e5e7eb));
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 64px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 820px);
  margin: auto;
  overflow: hidden;
}
.ol-row-edit-hd,
#fin-portal .ol-row-edit-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #0d9488) 12%, var(--card, #fff)),
    var(--card, #fff) 55%
  );
  border-bottom: 1px solid var(--line, #e5e7eb);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--ink, #0f172a);
}
.ol-row-edit-hd .ol-row-edit-kicker {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #0d9488);
  margin-bottom: 0.15rem;
}
.ol-row-edit-body,
#fin-portal .ol-row-edit-body {
  padding: 1.15rem 1.25rem 1.35rem;
  overflow: auto;
  flex: 1;
  background: color-mix(in srgb, var(--muted, #64748b) 3%, var(--card, #fff));
}
.ol-row-edit-body .mod-sec-title {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #64748b);
  margin: 0 0 0.85rem;
  font-weight: var(--fw-bold);
}
.ol-row-edit-foot,
#fin-portal .ol-row-edit-foot {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--line, #e5e7eb);
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  background: var(--card, #fff);
}
.ol-pencil,
#fin-portal .ol-pencil {
  border: 1px solid var(--line, #e5e7eb);
  background: var(--card, #fff);
  cursor: pointer;
  color: var(--muted, #64748b);
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  line-height: 1;
  font-size: var(--fs-base);
  min-width: 2.1rem;
  min-height: 2.1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ol-pencil:hover,
#fin-portal .ol-pencil:hover {
  background: color-mix(in srgb, var(--accent, #0d9488) 14%, transparent);
  color: var(--accent, #0d9488);
  border-color: color-mix(in srgb, var(--accent, #0d9488) 40%, var(--line, #e5e7eb));
}
.ol-row-acts {
  white-space: nowrap;
  width: 1%;
  text-align: right;
  vertical-align: middle;
}
/* Bool checkboxes in Installment Schedule + Deposit Summary grids —
   proper white ✓ on teal (never a bare browser/accent square). */
#fin-portal td.ol-bool-td,
td.ol-bool-td {
  text-align: center !important;
  vertical-align: middle !important;
  width: 1%;
  white-space: nowrap;
}
#fin-portal .ol-bool-check,
.ol-bool-check {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0 auto;
  vertical-align: middle;
  cursor: default;
  user-select: none;
}
#fin-portal .ol-bool-check:has(.ol-bool-inp:not(:disabled)),
.ol-bool-check:has(.ol-bool-inp:not(:disabled)) {
  cursor: pointer;
}
/* Hide native control completely — custom box is the only visible UI */
#fin-portal .ol-bool-check .ol-bool-inp,
.ol-bool-check .ol-bool-inp {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
#fin-portal .ol-bool-check .ol-check-ui,
.ol-bool-check .ol-check-ui {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border: 2px solid #94a3b8 !important;
  border-radius: 5px !important;
  background: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  flex-shrink: 0;
}
/* SVG tick — always in DOM; only visible when checked / is-on */
#fin-portal .ol-bool-check .ol-tick-svg,
.ol-bool-check .ol-tick-svg {
  display: none;
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
}
#fin-portal .ol-bool-check.is-on .ol-check-ui,
.ol-bool-check.is-on .ol-check-ui,
#fin-portal .ol-bool-check:has(.ol-bool-inp:checked) .ol-check-ui,
.ol-bool-check:has(.ol-bool-inp:checked) .ol-check-ui {
  background: #0d9488 !important;
  border-color: #0f766e !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, #0d9488 22%, transparent);
}
#fin-portal .ol-bool-check.is-on .ol-tick-svg,
.ol-bool-check.is-on .ol-tick-svg,
#fin-portal .ol-bool-check:has(.ol-bool-inp:checked) .ol-tick-svg,
.ol-bool-check:has(.ol-bool-inp:checked) .ol-tick-svg {
  display: block !important;
}
/* Kill any leftover ::after / unicode mark so we only show SVG ✓ */
#fin-portal .ol-bool-check .ol-check-ui::after,
.ol-bool-check .ol-check-ui::after,
#fin-portal .ol-bool-check .ol-check-yes,
.ol-bool-check .ol-check-yes {
  display: none !important;
  content: none !important;
}
html[data-fin-theme="dark"] #fin-portal .ol-bool-check .ol-check-ui,
html[data-fin-theme="dark"] .ol-bool-check .ol-check-ui {
  background: #0f172a !important;
  border-color: #64748b !important;
}
html[data-fin-theme="dark"] #fin-portal .ol-bool-check.is-on .ol-check-ui,
html[data-fin-theme="dark"] .ol-bool-check.is-on .ol-check-ui,
html[data-fin-theme="dark"] #fin-portal .ol-bool-check:has(.ol-bool-inp:checked) .ol-check-ui,
html[data-fin-theme="dark"] .ol-bool-check:has(.ol-bool-inp:checked) .ol-check-ui {
  background: #0d9488 !important;
  border-color: #14b8a6 !important;
}
body > .ol-row-edit-overlay .ff-fld {
  margin-bottom: 0.75rem;
}
body > .ol-row-edit-overlay .ff-fld label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  margin-bottom: 0.3rem;
}
body > .ol-row-edit-overlay .ff-fld input,
body > .ol-row-edit-overlay .ff-fld select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  font: inherit;
  background: var(--card, #fff);
  color: var(--ink, #0f172a);
  transition: border-color 0.15s, box-shadow 0.15s;
}
body > .ol-row-edit-overlay .ff-fld input:focus,
body > .ol-row-edit-overlay .ff-fld select:focus {
  outline: none;
  border-color: var(--accent, #0d9488);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0d9488) 22%, transparent);
}
/* Deposit Chart "Description" (Small Text) — wide, multi-line textarea
   instead of a clipped single-line input; ~3 visible rows, wraps \n as
   typed, resizable if a row needs even more room. */
body > .ol-row-edit-overlay .ff-fld.ff-fld-wide {
  grid-column: 1 / -1;
}
body > .ol-row-edit-overlay .ff-fld textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  font: inherit;
  background: var(--card, #fff);
  color: var(--ink, #0f172a);
  min-height: 4.5rem;
  resize: vertical;
  white-space: pre-wrap;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body > .ol-row-edit-overlay .ff-fld textarea:focus {
  outline: none;
  border-color: var(--accent, #0d9488);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0d9488) 22%, transparent);
}
/* Professional Desk-style checkboxes (not switch pills) */
body > .ol-row-edit-overlay .ol-check-row,
#fin-portal .ol-check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--card, #fff);
  margin-bottom: 0.75rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
body > .ol-row-edit-overlay .ol-check-row:hover:not(.is-disabled),
#fin-portal .ol-check-row:hover:not(.is-disabled) {
  border-color: color-mix(in srgb, var(--accent, #0d9488) 45%, var(--line, #e5e7eb));
  background: color-mix(in srgb, var(--accent, #0d9488) 6%, var(--card, #fff));
}
body > .ol-row-edit-overlay .ol-check-row.is-on,
#fin-portal .ol-check-row.is-on {
  border-color: color-mix(in srgb, var(--accent, #0d9488) 55%, var(--line, #e5e7eb));
  background: color-mix(in srgb, var(--accent, #0d9488) 10%, var(--card, #fff));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0d9488) 14%, transparent);
}
body > .ol-row-edit-overlay .ol-check-row.is-disabled,
#fin-portal .ol-check-row.is-disabled {
  opacity: 0.72;
  cursor: default;
}
body > .ol-row-edit-overlay .ol-check-box,
#fin-portal .ol-check-box {
  /* Hide native checkbox; custom square */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
body > .ol-row-edit-overlay .ol-check-ui,
#fin-portal .ol-check-ui {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  border: 2px solid color-mix(in srgb, var(--muted, #64748b) 55%, var(--line, #e5e7eb));
  border-radius: 4px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
  box-sizing: border-box;
}
body > .ol-row-edit-overlay .ol-check-ui::after,
#fin-portal .ol-check-ui::after {
  content: "";
  width: 0.32rem;
  height: 0.58rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.12s ease;
  margin-top: -1px;
}
body > .ol-row-edit-overlay .ol-check-row.is-on .ol-check-ui,
#fin-portal .ol-check-row.is-on .ol-check-ui {
  background: var(--accent, #0d9488);
  border-color: var(--accent, #0d9488);
}
body > .ol-row-edit-overlay .ol-check-row.is-on .ol-check-ui::after,
#fin-portal .ol-check-row.is-on .ol-check-ui::after {
  transform: rotate(45deg) scale(1);
}
body > .ol-row-edit-overlay .ol-check-copy,
#fin-portal .ol-check-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
body > .ol-row-edit-overlay .ol-check-title,
#fin-portal .ol-check-title {
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink, #0f172a) !important;
  margin: 0 !important;
  line-height: 1.3;
}
body > .ol-row-edit-overlay .ol-check-hint,
#fin-portal .ol-check-hint {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--muted, #64748b);
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
/* Legacy class still used in a few places */
body > .ol-row-edit-overlay .ff-check {
  display: none;
}
html[data-fin-theme="dark"] body > .ol-row-edit-overlay .ol-check-row,
html[data-fin-theme="dark"] #fin-portal .ol-check-row {
  background: #0f172a;
  border-color: var(--line, #334155);
}
html[data-fin-theme="dark"] body > .ol-row-edit-overlay .ol-check-ui,
html[data-fin-theme="dark"] #fin-portal .ol-check-ui {
  background: #0f172a;
  border-color: #64748b;
}
html[data-fin-theme="dark"] body > .ol-row-edit-overlay .ol-check-title,
html[data-fin-theme="dark"] #fin-portal .ol-check-title {
  color: var(--ink, #e2e8f0) !important;
}
body > .ol-row-edit-overlay .ff-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1.25rem;
}
@media (max-width: 640px) {
  body > .ol-row-edit-overlay .ff-cols-2 {
    grid-template-columns: 1fr;
  }
}
html[data-fin-theme="dark"] body > .ol-row-edit-overlay .ol-row-edit-dialog {
  background: var(--card, #1e293b);
  border-color: var(--line, #334155);
}
html[data-fin-theme="dark"] body > .ol-row-edit-overlay .ol-row-edit-hd {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #0d9488) 18%, #1e293b),
    #1e293b 60%
  );
  color: var(--ink, #e2e8f0);
}
html[data-fin-theme="dark"] body > .ol-row-edit-overlay .ol-row-edit-body {
  background: color-mix(in srgb, #0f172a 55%, #1e293b);
}
html[data-fin-theme="dark"] body > .ol-row-edit-overlay .ff-fld input,
html[data-fin-theme="dark"] body > .ol-row-edit-overlay .ff-fld select,
html[data-fin-theme="dark"] body > .ol-row-edit-overlay .ff-fld textarea,
html[data-fin-theme="dark"] body > .ol-row-edit-overlay .ff-check {
  background: #0f172a;
  color: var(--ink, #e2e8f0);
  border-color: var(--line, #334155);
}

/* Sale Agreement / Documentation attach column — chip + standard .btn */
#fin-portal .docm-attach-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 8.5rem;
  max-width: 13rem;
}
#fin-portal .docm-attach-cell--done {
  gap: 0.35rem;
}
#fin-portal .docm-attach-cell--pending {
  align-items: flex-start;
}
#fin-portal .docm-file-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--line, #e5e7eb);
  background: color-mix(in srgb, var(--accent, #0d9488) 6%, var(--card, #fff));
  text-decoration: none;
  color: inherit;
  max-width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
#fin-portal .docm-file-chip:hover {
  border-color: color-mix(in srgb, var(--accent, #0d9488) 40%, var(--line, #e5e7eb));
  background: color-mix(in srgb, var(--accent, #0d9488) 12%, var(--card, #fff));
}
#fin-portal .docm-file-ico {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  line-height: 1.25;
}
#fin-portal .docm-file-ico--eye {
  /* Themeable line-art SVG (DOCM_EYE_SVG in portal.js), not the raw emoji
     glyph — stroke="currentColor" on the SVG picks this up, so the icon
     blends with the pill instead of rendering as a full-colour OS emoji. */
  display: inline-flex;
  color: var(--muted, #64748b);
  transition: color 0.15s;
}
#fin-portal .docm-file-chip:hover .docm-file-ico--eye {
  color: var(--accent, #0d9488);
}
#fin-portal .docm-file-chip:has(.docm-file-ico--eye) {
  align-items: center;
}
#fin-portal .docm-file-meta {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
  flex: 1;
}
#fin-portal .docm-file-name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10.5rem;
}
#fin-portal .docm-file-when {
  font-size: var(--fs-2xs);
  color: var(--muted, #64748b);
}
#fin-portal .docm-attach-cell .btn {
  align-self: flex-start;
  min-width: 4.75rem;
  white-space: nowrap;
}
html[data-fin-theme="dark"] #fin-portal .docm-file-chip {
  background: color-mix(in srgb, var(--accent, #0d9488) 10%, #0f172a);
  border-color: var(--line, #334155);
}
html[data-fin-theme="dark"] #fin-portal .docm-file-name {
  color: var(--ink, #e2e8f0);
}

/* Documentation attach success — green-tick overlay (sales-portal iq-convert pattern) */
.fin-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.fin-success-overlay.is-in {
  opacity: 1;
  pointer-events: auto;
}
.fin-success-overlay.is-out {
  opacity: 0;
}
.fin-success-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 420px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
  transform: scale(0.92) translateY(8px);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.fin-success-overlay.is-in .fin-success-card {
  transform: scale(1) translateY(0);
}
.fin-success-tick {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #12b76a;
  color: #fff;
  font-size: 2rem;
  font-weight: var(--fw-bold);
  line-height: 64px;
  animation: fin-tick-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes fin-tick-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.fin-success-card h3 {
  margin: 0 0 8px;
  font-size: var(--fs-lg);
  color: #0f172a;
}
.fin-success-msg,
.fin-success-meta {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  color: #64748b;
  line-height: 1.45;
}
html[data-fin-theme="dark"] .fin-success-card {
  background: #1e293b;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
html[data-fin-theme="dark"] .fin-success-card h3 {
  color: #f1f5f9;
}
html[data-fin-theme="dark"] .fin-success-msg,
html[data-fin-theme="dark"] .fin-success-meta {
  color: #94a3b8;
}

#fin-portal .ol-statement-frame {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  padding: 0.5rem;
}
#fin-portal .ol-statement-frame iframe {
  width: 100%;
  min-height: 480px;
  border: 0;
  background: #fff;
}
#fin-portal .ff-fld-table {
  grid-column: 1 / -1;
  width: 100%;
}
/* Offer Letter — Desk Connections row + Related Documents */
#fin-portal .ol-related-section {
  margin: 0 0 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
#fin-portal .ol-related-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}
#fin-portal .ol-conn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: flex-start;
}
#fin-portal .ol-conn-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 7rem;
}
#fin-portal .ol-conn-dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
#fin-portal .ol-conn-count {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #0d9488) 18%, transparent);
  color: var(--accent, #0d9488);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-align: center;
}
#fin-portal .ol-conn-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent, #0d9488);
  text-decoration: none;
  cursor: pointer;
}
#fin-portal .ol-conn-link:hover {
  text-decoration: underline;
}
#fin-portal .ol-attach-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#fin-portal .ol-attach-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: var(--card, #fff);
}
#fin-portal .ol-attach-empty {
  font-size: var(--fs-sm);
  color: var(--muted, #64748b);
}
/* List modules: show target shell as soon as boot attr is known (before portal.js) */
html[data-fin-boot-view="owner_invoices"] #fin-portal #view-owner_invoices,
html[data-fin-boot-view="fin_receipts"] #fin-portal #view-fin_receipts,
html[data-fin-boot-view="manual_invoice"] #fin-portal #view-manual_invoice,
html[data-fin-boot-view="credit_note"] #fin-portal #view-credit_note,
html[data-fin-boot-view="rent"] #fin-portal #view-rent,
html[data-fin-boot-view="suppliers"] #fin-portal #view-suppliers,
html[data-fin-boot-view="lpo"] #fin-portal #view-lpo,
html[data-fin-boot-view="payables"] #fin-portal #view-payables,
html[data-fin-boot-view="pe_payments"] #fin-portal #view-pe_payments,
html[data-fin-boot-view="grn"] #fin-portal #view-grn,
html[data-fin-boot-view="commissions"] #fin-portal #view-commissions,
html[data-fin-boot-view="handover_commission"] #fin-portal #view-handover_commission,
html[data-fin-boot-view="owner_payouts"] #fin-portal #view-owner_payouts,
html[data-fin-boot-view="caf_followup"] #fin-portal #view-caf_followup,
html[data-fin-boot-view="debit_note"] #fin-portal #view-debit_note,
html[data-fin-boot-view="journal_entry"] #fin-portal #view-journal_entry,
html[data-fin-boot-view="import_bank"] #fin-portal #view-import_bank,
html[data-fin-boot-view="bank_tx"] #fin-portal #view-bank_tx,
html[data-fin-boot-view="owner_info"] #fin-portal #view-owner_info,
html[data-fin-boot-view="tenants_stt"] #fin-portal #view-tenants_stt,
html[data-fin-boot-view="leases"] #fin-portal #view-leases,
html[data-fin-boot-view="withdrawals"] #fin-portal #view-withdrawals,
html[data-fin-boot-view="raven"] #fin-portal #view-raven,
html[data-fin-boot-view="communication"] #fin-portal #view-raven {
  display: block !important;
  animation: none;
}
/* Only fade when portal finished bootstrapping (avoids double-flash) */
#fin-portal:not(.fin-route-ready) .view.active { animation: none; }
html[data-fin-boot-view="overview"] #fin-portal #view-overview {
  display: block;
}
html[data-fin-boot-view="yard"] #fin-portal #view-yard,
html[data-fin-boot-view="checkin"] #fin-portal #view-checkin,
html[data-fin-boot-view="jobs"] #fin-portal #view-jobs,
html[data-fin-boot-view="jobcard"] #fin-portal #view-jobcard,
html[data-fin-boot-view="quality"] #fin-portal #view-quality,
html[data-fin-boot-view="bays"] #fin-portal #view-bays,
html[data-fin-boot-view="bay_history"] #fin-portal #view-bay_history,
html[data-fin-boot-view="payments"] #fin-portal #view-payments,
html[data-fin-boot-view="unmatched"] #fin-portal #view-unmatched,
html[data-fin-boot-view="held"] #fin-portal #view-held,
html[data-fin-boot-view="invoices"] #fin-portal #view-invoices,
html[data-fin-boot-view="customers"] #fin-portal #view-customers,
html[data-fin-boot-view="visits"] #fin-portal #view-visits,
html[data-fin-boot-view="vehicles"] #fin-portal #view-vehicles,
html[data-fin-boot-view="makes"] #fin-portal #view-makes,
html[data-fin-boot-view="crew"] #fin-portal #view-crew,
html[data-fin-boot-view="payouts"] #fin-portal #view-payouts,
html[data-fin-boot-view="reports"] #fin-portal #view-reports,
html[data-fin-boot-view="activities"] #fin-portal #view-activities,
html[data-fin-boot-view="pricing"] #fin-portal #view-pricing,
html[data-fin-boot-view="alerts"] #fin-portal #view-alerts {
  display: block !important;
  animation: none;
}
@keyframes fin-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #fin-portal .view.active { animation: none; }
}

/* Cards — salvia frosted panels */
#fin-portal .card {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#fin-portal .card-h {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}
#fin-portal .card-h h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: #111827;
  letter-spacing: -0.01em;
}
#fin-portal .card-h .hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}
#fin-portal .card-h .right { margin-left: auto; }

/* ─── Collapsible table cards (sales-portal mono-card pattern) ─── */
#fin-portal details.card.fin-collapsible {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
#fin-portal details.card.fin-collapsible > summary.fin-sum {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid transparent;
  transition: background 0.12s ease;
}
#fin-portal details.card.fin-collapsible > summary.fin-sum::-webkit-details-marker { display: none; }
#fin-portal details.card.fin-collapsible[open] > summary.fin-sum {
  border-bottom-color: var(--line-soft);
  background: rgba(249, 250, 251, 0.75);
}
#fin-portal details.card.fin-collapsible > summary.fin-sum:hover {
  background: rgba(243, 244, 246, 0.9);
}
#fin-portal .fin-chev {
  display: inline-block;
  flex: 0 0 auto;
  width: 1rem;
  text-align: center;
  color: #6b7280;
  font-size: var(--fs-xs);
  transition: transform 0.18s ease;
  line-height: 1;
}
#fin-portal details.card.fin-collapsible[open] > summary .fin-chev {
  transform: rotate(90deg);
  color: #1d4ed8;
}
#fin-portal .fin-titles {
  min-width: 0;
  flex: 1 1 auto;
}
#fin-portal .fin-titles h3 {
  margin: 0 0 0.1rem;
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: #111827;
  line-height: 1.25;
}
#fin-portal .fin-sub {
  display: block;
  font-size: var(--fs-xs);
  color: #6b7280;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
}
#fin-portal .fin-count {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: #6b7280;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
#fin-portal details.card.fin-collapsible > summary.fin-sum:hover .fin-count {
  border-color: #9ca3af;
  color: #111827;
}
/* Section-help icon — replaces .fin-count on cards migrated to hover descriptions */
#fin-portal .fin-info {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: help;
  position: relative;
}
#fin-portal .fin-info:hover,
#fin-portal .fin-info:focus-visible {
  background: #dbeafe;
  border-color: #93c5fd;
  outline: none;
}
#fin-portal .fin-info::after {
  content: attr(data-desc);
  position: absolute;
  top: 135%;
  right: 0;
  width: max-content;
  max-width: 18rem;
  background: #1e3a8a;
  color: #fff;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 40;
  pointer-events: none;
}
#fin-portal .fin-info:hover::after,
#fin-portal .fin-info:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html[data-fin-theme="dark"] #fin-portal .fin-info {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
  color: #93c5fd !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-info::after {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
#fin-portal .fin-sum-link {
  flex: 0 0 auto;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: #1d4ed8 !important;
  text-decoration: none !important;
  white-space: nowrap;
  margin-left: 0.15rem;
}
#fin-portal .fin-sum-link:hover { text-decoration: underline !important; }
html[data-fin-theme="dark"] #fin-portal .fin-sum-link { color: #93c5fd !important; }
#fin-portal .fin-sum-ctrl {
  flex: 0 1 auto;
  min-width: 8.5rem !important;
  max-width: 12rem;
  padding: 0.35rem 0.65rem !important;
  font-size: var(--fs-xs) !important;
}
#fin-portal .fin-scroll {
  overflow: auto;
  max-height: 22rem;
  -webkit-overflow-scrolling: touch;
}
#fin-portal .fin-scroll-tall { max-height: 32rem; }
#fin-portal .fin-body {
  padding: 0.85rem 1rem 1rem;
}

/* Table columns — proper sticky head + column roles (sales-portal mono-table) */
#fin-portal table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  table-layout: auto;
}
#fin-portal table.ledger.sticky-head thead th {
  position: sticky;
  top: 0;
  /* Above body cells / action buttons (those must not use z-index ≥ this) */
  z-index: 6;
  background: #ffffff;
  box-shadow: 0 1px 0 var(--line);
}
html[data-fin-theme="dark"] #fin-portal table.ledger.sticky-head thead th {
  background: var(--dm-elevated, #1e293b);
}
#fin-portal .ledger th {
  text-align: left;
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: var(--fw-bold);
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.9);
}
#fin-portal .ledger th.num { text-align: right; }
#fin-portal .ledger td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  color: #1f2937;
}
#fin-portal .ledger tbody tr:last-child td { border-bottom: 0; }
#fin-portal .ledger tr:hover td {
  background: rgba(243, 244, 246, 0.65);
}
#fin-portal .ledger .num,
#fin-portal .ledger th.num {
  text-align: right;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: var(--fs-xs);
}
#fin-portal .ledger tfoot td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  background: rgba(249, 250, 251, 0.85);
  padding: 0.65rem 0.75rem;
}
#fin-portal .ledger .mono,
#fin-portal .ledger .col-id,
#fin-portal .ledger td.col-id {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: #4b5563;
  white-space: nowrap;
}
#fin-portal .ledger .sub {
  display: block;
  font-size: var(--fs-2xs);
  color: #9ca3af;
  font-weight: var(--fw-regular);
}
#fin-portal .ledger th.col-party,
#fin-portal .ledger td.col-party,
#fin-portal .ledger .col-party { min-width: 9rem; }
#fin-portal .ledger th.col-id,
#fin-portal .ledger .col-id { min-width: 7rem; }
#fin-portal .ledger th.col-date,
#fin-portal .ledger .col-date { min-width: 5.5rem; white-space: nowrap; }
#fin-portal .ledger th.col-mode,
#fin-portal .ledger .col-mode { min-width: 5rem; }
#fin-portal .ledger th.col-ref,
#fin-portal .ledger .col-ref { min-width: 5.5rem; font-family: var(--f-mono); font-size: var(--fs-2xs); }
#fin-portal .ledger th.col-status,
#fin-portal .ledger .col-status { min-width: 5rem; }
#fin-portal .ledger th.col-owner,
#fin-portal .ledger .col-owner { min-width: 6rem; color: #6b7280; font-size: var(--fs-2xs); }
#fin-portal .ledger th.col-actions,
#fin-portal .ledger .col-actions { width: 2.25rem; text-align: center; }
html[data-fin-theme="dark"] #fin-portal .ledger th.col-owner,
html[data-fin-theme="dark"] #fin-portal .ledger .col-owner { color: var(--muted); }
#fin-portal .ledger th.col-age,
#fin-portal .ledger .col-age { min-width: 3.5rem; }
/* Unit + Building combined column (primary unit, secondary building) */
#fin-portal .ledger th.col-unit-bldg,
#fin-portal .ledger td.col-unit-bldg {
  min-width: 10rem;
  max-width: 16rem;
}
#fin-portal .ledger .cell-main {
  display: block;
  font-weight: var(--fw-semibold);
  color: #111827;
  line-height: 1.3;
}
#fin-portal .ledger td.col-party {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Multi-client: one name per line, not truncated into a single ellipsized row. */
#fin-portal .ledger td.col-party .ol-party-stack {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
#fin-portal .ledger td.col-party .ol-party-line + .ol-party-line {
  margin-top: 2px;
}
#fin-portal table.col-fin-rcpt { min-width: 64rem; }
/* Date inputs in filter bars match text fields */
#fin-portal .filter-bar input[type="date"] {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.4rem 0.65rem;
  font: inherit;
  font-size: var(--fs-xs);
  color: #374151;
  min-height: 2.25rem;
}
/* Aging matrix — compact numeric cols */
#fin-portal table.col-aging { min-width: 40rem; }
#fin-portal table.col-aging th.num,
#fin-portal table.col-aging td.num { min-width: 4.5rem; padding-left: 0.4rem; padding-right: 0.55rem; }
#fin-portal table.col-payments { min-width: 36rem; }
#fin-portal table.col-collections { min-width: 48rem; }
#fin-portal table.col-moneyout { min-width: 52rem; }
#fin-portal table.col-receivables { min-width: 44rem; }
#fin-portal table.col-gl { min-width: 36rem; }
#fin-portal table.col-payroll { min-width: 40rem; }
#fin-portal tr.err-row td {
  background: var(--err-bg);
  color: var(--debit);
  font-size: var(--fs-xs);
}

/* Dashboard grids */
#fin-portal .dash-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}
#fin-portal .dash-grid-2-1 {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
#fin-portal .dash-grid-1-1-1 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#fin-portal .dash-grid-3-2 {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
#fin-portal .dash-grid-1-1 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  #fin-portal .dash-grid-2-1,
  #fin-portal .dash-grid-1-1-1,
  #fin-portal .dash-grid-3-2,
  #fin-portal .dash-grid-1-1 {
    grid-template-columns: 1fr;
  }
}
#fin-portal .chart-card { min-height: 0; }
#fin-portal .chart-head { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.85rem 1rem 0.25rem; }
#fin-portal .chart-head h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: 0; color: var(--ink); }
#fin-portal .chart-head .chart-sub { font-size: var(--fs-xs); color: var(--muted); }
#fin-portal .chart-wrap {
  position: relative;
  width: 100%;
}
#fin-portal .chart-wrap-lg { height: 260px; }
#fin-portal .chart-wrap-md { height: 200px; }
#fin-portal .chart-wrap-sq { height: 200px; max-width: 260px; margin: 0 auto; }
#fin-portal .chart-legend,
#fin-portal .leg-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  color: #4b5563;
  min-width: 0;
}
#fin-portal .chart-legend .leg-item,
#fin-portal .leg-list .leg-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  line-height: 1.3;
}
#fin-portal .chart-legend .leg-item i,
#fin-portal .leg-list .leg-item i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}
#fin-portal .chart-legend .leg-item .leg-lab,
#fin-portal .leg-list .leg-item .leg-lab {
  flex: 1 1 auto;
  min-width: 0;
  color: #111827;
  font-weight: var(--fw-medium);
  white-space: normal;
  word-break: break-word;
}
#fin-portal .chart-legend .leg-item .leg-val,
#fin-portal .chart-legend .leg-item b,
#fin-portal .leg-list .leg-item .leg-val,
#fin-portal .leg-list .leg-item b {
  font-weight: var(--fw-bold);
  color: #111827;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 0.5rem;
}
html[data-fin-theme="dark"] #fin-portal .chart-legend,
html[data-fin-theme="dark"] #fin-portal .leg-list {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .chart-legend .leg-item b,
html[data-fin-theme="dark"] #fin-portal .chart-legend .leg-item .leg-lab,
html[data-fin-theme="dark"] #fin-portal .leg-list .leg-item b,
html[data-fin-theme="dark"] #fin-portal .leg-list .leg-item .leg-lab {
  color: var(--ink);
}
#fin-portal .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#fin-portal .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Receipt funnel */
#fin-portal .funnel { display: flex; flex-direction: column; gap: 0.55rem; }
#fin-portal .funnel-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 0.55rem;
  align-items: center;
}
#fin-portal .funnel-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #4b5563;
}
#fin-portal .funnel-track {
  height: 0.7rem;
  background: rgba(229, 231, 235, 0.9);
  border-radius: 999px;
  overflow: hidden;
}
#fin-portal .funnel-fill {
  height: 100%;
  border-radius: 999px;
  background: #1d4ed8;
}
#fin-portal .funnel-fill.stage-0 { background: #9ca3af; }
#fin-portal .funnel-fill.stage-1 { background: #f59e0b; }
#fin-portal .funnel-fill.stage-2 { background: #059669; }
#fin-portal .funnel-fill.stage-3 { background: #dc2626; }
#fin-portal .funnel-meta {
  font-size: var(--fs-2xs);
  color: #6b7280;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#fin-portal .funnel-meta b { color: #111827; }
#fin-portal .sub-inline {
  font-size: var(--fs-2xs);
  color: #9ca3af;
  font-weight: var(--fw-medium);
}
html[data-fin-theme="dark"] #fin-portal .funnel-label,
html[data-fin-theme="dark"] #fin-portal .funnel-meta,
html[data-fin-theme="dark"] #fin-portal .sub-inline {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .funnel-track {
  background: var(--dm-hover);
}
html[data-fin-theme="dark"] #fin-portal .funnel-meta b {
  color: var(--ink);
}
#fin-portal .k-delta { margin-top: 0.25rem; min-height: 1em; }
#fin-portal .delta {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}
#fin-portal .delta.up { color: #059669; }
#fin-portal .delta.down { color: #dc2626; }

/* KPI grid — separate salvia cards */
#fin-portal .kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
  background: transparent;
  border: 0;
  overflow: visible;
}
#fin-portal .kpi-strip-6 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  #fin-portal .kpi-strip-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#fin-portal .kpi-strip-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#fin-portal .kpi-strip-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  #fin-portal .kpi-strip-4,
  #fin-portal .kpi-strip-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#fin-portal .kpi-strip-inline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.75rem;
}
#fin-portal .kpi.kpi-warn {
  border-color: rgba(148, 163, 184, 0.35);
  background: var(--card);
}
#fin-portal .kpi.kpi-warn .k-fig { color: #b45309 !important; }
#fin-portal .kpi.kpi-ok {
  border-color: rgba(148, 163, 184, 0.35);
  background: var(--card);
}
#fin-portal .kpi.kpi-ok .k-fig { color: #15803d !important; }
#fin-portal .kpi {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 0.9rem;
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#fin-portal .kpi:first-child { border-left: 1px solid rgba(255, 255, 255, 0.55); }
#fin-portal .kpi .k-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#fin-portal .kpi .k-fig {
  display: block;
  font-size: var(--fs-xl, 1.35rem);
  font-weight: var(--fw-bold, 700);
  margin-top: 0.4rem;
  min-height: 1.5rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #111827 !important;
  border-bottom: 0;
  padding-bottom: 0;
  visibility: visible !important;
  opacity: 1 !important;
}
#fin-portal .kpi-strip.is-loading .kpi .k-fig {
  color: var(--muted) !important;
  font-weight: var(--fw-medium, 500);
  font-size: var(--fs-md, 1rem);
}
#fin-portal .kpi-strip.is-error {
  outline: 1px solid rgba(185, 28, 28, 0.35);
  border-radius: var(--radius);
}
#fin-portal .kpi .k-sub {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 0.35rem;
}
#fin-portal .cr { color: var(--credit) !important; }
#fin-portal .dr { color: var(--debit) !important; }

/* Status chips — solid pills, never wrap mid-word in tables */
#fin-portal .chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  border: 0;
  color: #374151;
  background: #e5e7eb;
  white-space: nowrap;
  line-height: 1.2;
  max-width: 100%;
}
#fin-portal .chip::before { display: none; }
#fin-portal .chip.overdue { color: #991b1b; background: #fecaca; }
#fin-portal .chip.ok { color: #14532d; background: #bbf7d0; }
#fin-portal .chip.plain { color: #4b5563; background: #e5e7eb; }
#fin-portal .chip.warn { color: #b45309; background: rgba(245, 158, 11, 0.2); }
/* Offer Letter status tones — Desk parity (doctype/offer_letter/offer_letter.js
   get_status_color): Draft=blue, Submitted to Finance=orange, Approved=green,
   Rejected=red, Cancelled=yellow. Reuses existing tokens where the hue already
   exists in this file (draft=accent, submitted=warn, approved=ok, rejected=
   overdue-red); only "cancelled" (yellow) needed a genuinely new pair. */
#fin-portal .chip.ol-st-draft { color: var(--accent); background: var(--accent-soft); }
#fin-portal .chip.ol-st-submitted { color: #b45309; background: rgba(245, 158, 11, 0.2); }
#fin-portal .chip.ol-st-approved { color: #14532d; background: #bbf7d0; }
#fin-portal .chip.ol-st-rejected { color: #991b1b; background: #fecaca; }
#fin-portal .chip.ol-st-cancelled { color: #854d0e; background: #fef9c3; }
#fin-portal .ledger .col-status {
  min-width: 6.5rem;
  white-space: nowrap;
}
#fin-portal .ledger .col-status .chip-status {
  min-width: 4.75rem;
}
#fin-portal .ledger .col-bank-tx {
  min-width: 11rem;
  max-width: 16rem;
  font-size: var(--fs-xs);
  white-space: normal;
  word-break: break-all;
  line-height: 1.35;
}
#fin-portal .ledger .col-bank-tx .linklike {
  display: inline;
  white-space: nowrap;
}
#fin-portal .kpi-strip-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  #fin-portal .kpi-strip-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Controls */
#fin-portal .search {
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.8);
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: var(--fs-xs);
  min-width: 200px;
  color: #374151;
}
#fin-portal .search:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
  border-color: transparent;
}
html[data-fin-theme="dark"] #fin-portal .search {
  background: var(--dm-input);
  border-color: var(--dm-border);
  color: var(--ink);
  color-scheme: dark;
}
#fin-portal .btn {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.25);
}
#fin-portal .btn:hover { filter: brightness(1.05); }
#fin-portal .btn.ghost {
  background: transparent;
  color: #374151;
  border: 1px solid var(--line);
  box-shadow: none;
}
#fin-portal .btn.primary {
  background: var(--accent);
  color: #fff;
  border: 0;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.25);
}
#fin-portal .btn.danger {
  background: #dc2626;
  color: #fff;
  border: 0;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.3);
}
#fin-portal .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}
#fin-portal button.btn { cursor: pointer; font: inherit; }

/* Unscoped duplicates of the core .btn system: several overlays/dialogs
   (Bill Upcoming Installments picker, Change to Mortgage, User Settings,
   any modal appended straight to document.body rather than nested under
   #fin-portal) are deliberately mounted OUTSIDE #fin-portal so they can sit
   above everything with a simple z-index, which meant every #fin-portal
   .btn rule above never applied to them — their Cancel/primary buttons
   rendered as bare unstyled <button> text with no visual affordance at all.
   Same rules, no #fin-portal requirement, so .btn/.btn.ghost/.btn.primary
   work identically no matter where in the DOM they're mounted. */
.btn {
  cursor: pointer;
  font: inherit;
  background: var(--accent, #1d4ed8);
  color: #fff;
  border: 0;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.25);
}
.btn:hover { filter: brightness(1.05); }
.btn.tiny { padding: 0.3rem 0.65rem; font-size: var(--fs-2xs); border-radius: 0.7rem; }
.btn.ghost {
  background: transparent;
  color: #374151;
  border: 1px solid var(--line, #e5e7eb);
  box-shadow: none;
}
.btn.primary {
  background: var(--accent, #1d4ed8);
  color: #fff;
  border: 0;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.25);
}
.btn.danger {
  background: #dc2626;
  color: #fff;
  border: 0;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.3);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
html[data-fin-theme="dark"] .btn.ghost {
  color: var(--ink, #e2e8f0);
  border-color: var(--line, #334155);
}

/* Funding-source action row — Commission Application Form / Handover
   Commission review cards, shown when neither an existing Bank Transaction
   nor a Cheque has been picked yet. Unscoped (not #fin-portal-prefixed) for
   the same reason as the .btn duplicates above — these callouts render
   inside #docFormRoot, which sits outside #fin-portal in some layouts. */
.caf-funding-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.55rem;
  padding: 0.5rem 0.65rem;
  background: rgba(29, 78, 216, 0.06);
  border: 1px dashed rgba(29, 78, 216, 0.35);
  border-radius: 0.6rem;
}
html[data-fin-theme="dark"] .caf-funding-actions {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.4);
}
.caf-funding-actions-label { font-size: var(--fs-xs); color: var(--muted, #64748b); }
.caf-funding-actions .btn { white-space: nowrap; }

/* Bulk select bar on commission / follow-up / handover lists */
.caf-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin: 0.15rem 0.85rem 0.55rem;
  padding: 0.45rem 0.7rem;
  background: #f8fafc;
  border: 1px solid var(--line, #e6eaef);
  border-radius: 0.55rem;
}
.caf-bulk-bar[hidden] { display: none !important; }
.caf-bulk-bar.has-sel {
  background: #eef4fb;
  border-color: #c5d7ee;
}
.caf-bulk-bar.is-empty { opacity: 0.78; }
.caf-bulk-left {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  min-width: 0;
}
.caf-bulk-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.caf-bulk-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.caf-bulk-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs, 0.78rem);
  color: var(--muted, #64748b);
  cursor: pointer;
  user-select: none;
}
.caf-bulk-count {
  font-weight: 600;
  font-size: var(--fs-xs, 0.78rem);
  color: var(--ink, #1e293b);
}
#fin-portal table.ledger th.col-chk,
#fin-portal table.ledger td.col-chk {
  width: 2.1rem;
  min-width: 2.1rem;
  text-align: center;
  vertical-align: middle;
}
#fin-portal #view-caf_followup table.ledger,
#fin-portal #view-handover_commission table.ledger,
#fin-portal #view-commissions table.ledger {
  table-layout: auto;
}
#fin-portal #view-caf_followup table.ledger td.num,
#fin-portal #view-caf_followup table.ledger th.num,
#fin-portal #view-handover_commission table.ledger td.num,
#fin-portal #view-handover_commission table.ledger th.num {
  white-space: nowrap;
}
#fin-portal #view-caf_followup table.ledger td.col-unit-bldg,
#fin-portal #view-handover_commission table.ledger td.col-unit-bldg {
  min-width: 8.5rem;
  max-width: 14rem;
}
#fin-portal #view-caf_followup table.ledger td.col-status .chip {
  margin: 0.08rem 0.15rem 0.08rem 0;
}
#fin-portal table.ledger td.col-chk input,
#fin-portal table.ledger th.col-chk input {
  width: 0.95rem;
  height: 0.95rem;
  cursor: pointer;
}
.caf-bulk-name-list {
  margin: 0.5rem 0 0;
  padding-left: 1.15rem;
  max-height: 10rem;
  overflow: auto;
}
.caf-bulk-name-list li { margin: 0.15rem 0; }

/* ── CAF Payment review (replaces Important Details on finance form) ─── */
.caf-muted { color: var(--muted, #64748b); font-weight: 500; font-size: 0.9em; }
.caf-link { color: var(--accent, #1d4ed8); font-weight: 600; text-decoration: none; }
.caf-link:hover { color: #1e40af; text-decoration: underline; }
.caf-warn-txt { color: #b45309; font-weight: 600; }
.caf-net { font-size: 1.05rem; font-weight: 700; color: #16181c; }

/* Full-width host under toolbar/tabs — sits on the portal canvas, not a nested box */
#docFormRoot .caf-cd-host,
#docFormRoot .caf-cd-root {
  width: 100%;
  min-width: 0;
}
#docFormRoot .caf-view--review {
  background: transparent;
}
#docFormRoot .caf-view--review .mod-form-main {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
#docFormRoot .caf-view--review .caf-form-tabs {
  margin: 0 0 1.05rem;
  padding: 0;
  background: transparent;
}

/* Toolbar — pill Back, document name, icon tools, Revoke / Make Payment */
#docFormRoot .caf-view .mod-toolbar {
  margin-bottom: 0.35rem;
  align-items: center;
}
#docFormRoot .caf-view .caf-back-btn {
  border-radius: 999px;
  padding: 0.42rem 1rem;
  background: var(--card-solid, #fff);
  font-weight: 600;
}
#docFormRoot .caf-view .caf-doc-name {
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink, #111827);
}
#docFormRoot .caf-view .caf-state-chip {
  font-weight: 600;
}
#docFormRoot .caf-view .caf-wf {
  border-radius: 0.65rem;
  padding: 0.48rem 1.05rem;
  font-size: 0.8125rem;
}
#docFormRoot .caf-view--review .caf-form-tabs .mod-tab {
  background: transparent;
  border-radius: 0;
  padding: 0.7rem 0.15rem;
  margin-right: 1.35rem;
}
#docFormRoot .caf-view--review .caf-form-tabs .mod-tab:hover {
  background: transparent;
  color: var(--ink, #111827);
}
#docFormRoot .caf-view--review .caf-form-tabs .mod-tab.on {
  background: transparent;
}

/* ══════════════════ Design tokens — this component only ══════════════════
   Cards sit on the portal canvas (no gray page wash). Header bars are
   titles only — no tinted admin strips. Dark theme uses elevated surfaces
   that match the near-black shell, not washed-out slate glass. */
.caf-cd-root {
  --caf-page: transparent;
  --caf-surface: #ffffff;
  --caf-border: rgba(16, 24, 40, 0.08);
  --caf-divider: rgba(16, 24, 40, 0.06);
  --caf-header-fill: transparent;
  --caf-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 14px 34px -14px rgba(16, 24, 40, 0.16);
  --caf-label: #667085;
  --caf-value: #101828;
  --caf-muted: #98a2b3;
  --caf-track: #eaecf0;
  --caf-success: #12b76a;
  --caf-success-bg: #ecfdf3;
  --caf-warning: #f79009;
  --caf-warning-bg: #fffaeb;
  --caf-negative: #d92d20;
  --caf-negative-bg: #fef3f2;
  --caf-accent: #1f4b3b;
  --caf-accent-soft: #e6efe7;
  --caf-font-serif: "Iowan Old Style", "Source Serif Pro", "Palatino Linotype", Palatino, ui-serif, Georgia, serif;
  --caf-radius: 8px;
  --caf-sp-1: 4px;
  --caf-sp-2: 8px;
  --caf-sp-3: 12px;
  --caf-sp-4: 16px;
  --caf-sp-6: 24px;
  --caf-sp-8: 32px;
  --caf-pad: 20px;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
html[data-fin-theme="dark"] .caf-cd-root {
  --caf-page: transparent;
  --caf-surface: #161618;
  --caf-border: rgba(255, 255, 255, 0.08);
  --caf-divider: rgba(255, 255, 255, 0.06);
  --caf-header-fill: transparent;
  --caf-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 36px -16px rgba(0, 0, 0, 0.6);
  --caf-label: #a1a1aa;
  --caf-value: #f4f4f5;
  --caf-muted: #71717a;
  --caf-track: rgba(255, 255, 255, 0.08);
  --caf-accent: #6fbf95;
  --caf-accent-soft: #1c2a20;
  --caf-success: #34d399;
  --caf-success-bg: rgba(16, 185, 129, 0.12);
  --caf-warning: #fbbf24;
  --caf-warning-bg: rgba(245, 158, 11, 0.12);
  --caf-negative: #f87171;
  --caf-negative-bg: rgba(239, 68, 68, 0.12);
  padding: 0;
}

.caf-cd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px) {
  .caf-cd-layout { grid-template-columns: 1fr; }
}

.caf-cd-main,
.caf-cd-side {
  display: flex;
  flex-direction: column;
  gap: var(--caf-sp-6);
  min-width: 0;
}

.caf-cd-card {
  position: relative;
  background: var(--caf-surface);
  border: 1px solid var(--caf-border);
  border-radius: var(--caf-radius);
  box-shadow: var(--caf-shadow);
  overflow: hidden;
}
.caf-cd-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  pointer-events: none;
}
html[data-fin-theme="dark"] .caf-cd-card::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
/* No tone stripe / tinted wash here — this card uses the same plain
   bordered surface as every other card in the layout (Beneficiaries,
   Approval, Deal, Offer letter). Status reads from the pill + fund banner
   instead of a color accent on the card itself. */

/* Section titles sit inside the card — no tinted admin header bar. */
.caf-cd-card-hd,
.caf-cd-sec-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--caf-sp-2);
  padding: 20px var(--caf-pad) 0;
  background: transparent;
  border-bottom: 0;
}
.caf-cd-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--caf-value);
  margin: 0;
  letter-spacing: -0.015em;
}
.caf-cd-panel-body { padding: 14px var(--caf-pad) 20px; }

/* Net + calculation — flex-wrap, not a grid + media query. This card sits
   next to a fixed sidebar, so its real width is often much narrower than
   the browser viewport; a viewport media query never fires in that case
   and the two columns get crushed instead of stacking. Flex-wrap reflows
   off the card's own width, so it stacks correctly regardless of how much
   the sidebar is eating. */
.caf-cd-pay-top {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding: 28px 28px 22px;
}
.caf-cd-net { flex: 1 1 230px; min-width: 210px; }
.caf-cd-calc { flex: 2 1 300px; min-width: 260px; }
.caf-cd-k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--caf-label);
  margin: 0 0 var(--caf-sp-1);
}
.caf-cd-net-amt {
  font-family: var(--caf-font-serif);
  font-variant-numeric: tabular-nums;
  font-size: 2.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--caf-value);
  line-height: 1.05;
  margin-top: 4px;
}
.caf-cd-frac {
  font-size: 0.52em;
  font-weight: 650;
  opacity: 0.42;
  vertical-align: baseline;
  letter-spacing: -0.02em;
}
.caf-cd-net-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--caf-label);
}
.caf-cd-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  height: auto;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
}
.caf-cd-pill.ok {
  background: transparent;
  color: #067647;
}
.caf-cd-pill.warn {
  background: transparent;
  color: #b54708;
}
.caf-cd-pill.bad {
  background: transparent;
  color: #b42318;
}
.caf-cd-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.caf-cd-pill.ok .caf-cd-pill-dot { background: var(--caf-success); }
.caf-cd-pill.warn .caf-cd-pill-dot { background: var(--caf-warning); }
.caf-cd-pill.bad .caf-cd-pill-dot { background: var(--caf-negative); }
.caf-cd-status-sub {
  margin-top: var(--caf-sp-2);
  font-size: 12px;
  color: var(--caf-label);
  line-height: 1.35;
  max-width: 18rem;
}

.caf-cd-calc-list { display: flex; flex-direction: column; }
.caf-cd-calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--caf-sp-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--caf-divider);
}
.caf-cd-calc-row.is-total {
  border-bottom: 0;
  padding-top: 11px;
}
.caf-cd-calc-lab {
  font-size: 13px;
  color: var(--caf-value);
  font-weight: 500;
}
.caf-cd-calc-row.is-total .caf-cd-calc-lab {
  font-weight: 650;
  color: var(--caf-value);
}
.caf-cd-hint { color: var(--caf-muted); font-weight: 400; }
.caf-cd-calc-val {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--caf-value);
  white-space: nowrap;
}
.caf-cd-calc-val.is-neg { color: var(--caf-negative); }
.caf-cd-calc-row.is-total .caf-cd-calc-val {
  font-size: 15px;
  font-weight: 600;
}

/* Fund strip — an inset rounded card (not a flush strip) with a status
   icon circle, text left, actions right (stacks on narrow). */
.caf-cd-fund {
  margin: 2px 28px 26px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(247, 144, 9, 0.28);
  background: var(--caf-warning-bg);
}
.caf-cd-fund.is-funded {
  background: var(--caf-success-bg);
  border-color: rgba(18, 183, 106, 0.28);
}
.caf-cd-fund.is-blocked {
  background: var(--caf-track);
  border-color: var(--caf-border);
}
.caf-cd-fund-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.caf-cd-fund-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--caf-surface);
  border: 1px solid rgba(247, 144, 9, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--caf-warning);
  flex: none;
}
.caf-cd-fund.is-funded .caf-cd-fund-ico { border-color: rgba(18, 183, 106, 0.28); color: var(--caf-success); }
.caf-cd-fund.is-blocked .caf-cd-fund-ico { border-color: var(--caf-border); color: var(--caf-muted); }
.caf-cd-fund-text { min-width: 200px; flex: 1 1 14rem; }
.caf-cd-fund-title {
  font-size: 13px;
  font-weight: 650;
  color: #b54708;
}
.caf-cd-fund.is-funded .caf-cd-fund-title { color: #067647; }
.caf-cd-fund.is-blocked .caf-cd-fund-title { color: var(--caf-label); }
.caf-cd-fund-sub {
  font-size: 12.5px;
  color: #9a6b2f;
  line-height: 1.4;
  margin-top: 2px;
}
.caf-cd-fund.is-funded .caf-cd-fund-sub,
.caf-cd-fund.is-blocked .caf-cd-fund-sub { color: var(--caf-label); }
/* A real min-width on .caf-cd-fund-text above is what actually makes this
   wrap onto its own row in a tight container — a viewport media query
   can't, since this banner sits next to a fixed sidebar and its real
   width is often well below the viewport's. */
.caf-cd-fund-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-left: auto;
  flex: 0 0 auto;
}
.caf-cd-btn {
  height: 36px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.caf-cd-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.caf-cd-btn-dark {
  color: #ffffff;
  background: #20241f;
}
.caf-cd-btn-dark:hover:not(:disabled) { filter: brightness(0.93); }
.caf-cd-btn-light {
  color: var(--caf-value);
  background: var(--caf-surface);
  border-color: var(--caf-border);
  font-weight: 550;
}
.caf-cd-btn-light:hover:not(:disabled) { background: var(--caf-track); }

/* Beneficiaries table card */
.caf-cd-ben-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px var(--caf-sp-3);
}
.caf-cd-ben-hd .caf-cd-card-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--caf-value);
}
.caf-cd-ben-meta {
  font-size: 12px;
  color: var(--caf-label);
}
.caf-cd-table-wrap { overflow-x: auto; }
.caf-cd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.caf-cd-table th {
  text-align: left;
  padding: 14px 18px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--caf-label);
  background: transparent;
  border-bottom: 1px solid var(--caf-border);
}
.caf-cd-table th:first-child,
.caf-cd-table td:first-child { padding-left: var(--caf-pad); }
.caf-cd-table th:last-child,
.caf-cd-table td:last-child { padding-right: var(--caf-pad); }
.caf-cd-table th.num,
.caf-cd-table td.num {
  text-align: right;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.caf-cd-table td {
  padding: 18px;
  border-bottom: 1px solid var(--caf-divider);
  color: var(--caf-value);
  vertical-align: middle;
}
.caf-cd-table tbody tr:not(.caf-cd-ben-total):hover td { background: var(--caf-header-fill); }
.caf-cd-table td.muted { color: var(--caf-label); }
.caf-cd-table td.strong { font-weight: 600; }
.caf-cd-table .empty {
  text-align: center;
  color: var(--caf-label);
  padding: 1rem;
}
.caf-cd-ben-row { display: flex; align-items: center; gap: 12px; }
.caf-cd-ben-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--caf-accent-soft);
  color: var(--caf-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex: none;
}
.caf-cd-ben-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--caf-value);
  line-height: 1.25;
}
.caf-cd-ben-role {
  font-size: 12.5px;
  color: var(--caf-label);
  margin-top: 2px;
}
.caf-cd-ben-total td {
  border-bottom: 0;
  border-top: 1px solid var(--caf-border);
  padding-top: 12px;
  padding-bottom: 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--caf-value);
  background: transparent;
}
/* Aligns "Total" under the beneficiary name text, not the avatar column. */
.caf-cd-ben-total td:first-child { padding-left: calc(var(--caf-pad) + 38px + 12px); }
.caf-cd-ben-total td.num {
  font-size: 13px;
  color: var(--caf-value);
}

/* Side / stacked panels: Deal, Offer letter, Approval, Attachments —
   header strip (via .caf-cd-card-hd) + padded body. */
.caf-cd-panel { padding: 0; }
.caf-cd-side-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--caf-sp-2);
}
.caf-cd-side-link {
  font-size: 12px;
  color: var(--caf-accent);
  text-decoration: none;
  font-weight: 500;
}
.caf-cd-side-link:hover { text-decoration: underline; opacity: 0.8; }

/* Fixed label/value grid — 140px label column keeps every row aligned and
   stops long values (e.g. multi-unit lists) from overflowing the card. */
.caf-cd-side-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--caf-sp-3);
  min-height: 28px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--caf-divider);
}
.caf-cd-side-row:first-child { border-top: 0; padding-top: 0; }
.caf-cd-side-row:last-child { padding-bottom: 0; }
.caf-cd-side-k {
  font-size: 12px;
  font-weight: 500;
  color: var(--caf-label);
}
.caf-cd-side-v {
  font-size: 13px;
  font-weight: 550;
  color: var(--caf-value);
  text-align: right;
  word-break: break-word;
  line-height: 1.4;
}
.caf-cd-side-v.is-strong { font-weight: 600; }
.caf-cd-side-v.mono {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
/* Unit row: wraps instead of overflowing; long lists cap at 3 + a chip. */
.caf-cd-side-row.is-wrap { align-items: start; }
.caf-cd-side-v.is-wrap {
  text-align: left;
  white-space: normal;
  line-height: 1.4;
}
.caf-cd-more-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--caf-track);
  color: var(--caf-label);
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
  white-space: nowrap;
}

.caf-cd-ol-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: var(--caf-sp-4);
}
.caf-cd-ol-ring { position: relative; width: 88px; height: 88px; flex: none; }
.caf-cd-ol-ring svg { transform: rotate(-90deg); }
.caf-cd-ol-ring-track { stroke: var(--caf-track); }
.caf-cd-ol-ring-fill { stroke: var(--caf-accent); transition: stroke-dashoffset 0.3s ease; }
.caf-cd-ol-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--caf-value);
  font-variant-numeric: tabular-nums;
}
.caf-cd-ol-recv { min-width: 0; }
.caf-cd-ol-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--caf-label); }
.caf-cd-ol-v {
  font-family: var(--caf-font-serif);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 600;
  color: var(--caf-value);
  margin-top: 4px;
  line-height: 1.2;
}
.caf-cd-ol-bal { font-size: 12.5px; color: var(--caf-label); margin-top: 4px; }

/* Approval timeline — Submitted (Sales) -> Reviewed (Sales Manager) ->
   Approved (Finance). 2px rail, colored green for completed segments so it
   reads as a connected timeline, not a column of bullets. */
.caf-cd-timeline { display: flex; flex-direction: column; }
.caf-cd-tl-step { display: flex; gap: 14px; padding-bottom: 18px; }
.caf-cd-tl-step:last-child { padding-bottom: 0; }
.caf-cd-tl-rail {
  width: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}
/* Hollow ring by default (not-yet-reached), filled once done — "current"
   gets a colored ring with a soft glow so it reads as "next up", distinct
   from both a plain not-started dot and a completed solid one. */
.caf-cd-tl-dot {
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-top: 4px;
  background: var(--caf-surface);
  border: 2px solid var(--caf-track);
  flex: none;
}
.caf-cd-tl-dot.is-done { background: var(--caf-success); border-color: var(--caf-success); }
.caf-cd-tl-dot.is-current {
  background: var(--caf-surface);
  border-color: var(--caf-warning);
  box-shadow: 0 0 0 3px var(--caf-warning-bg);
}
.caf-cd-tl-dot.is-rejected { background: var(--caf-negative); border-color: var(--caf-negative); }
.caf-cd-tl-dot.is-pending { background: var(--caf-surface); border-color: var(--caf-track); }
.caf-cd-tl-line {
  width: 2px;
  flex: 1;
  background: var(--caf-track);
  margin-top: 4px;
  border-radius: 1px;
}
.caf-cd-tl-line.is-done { background: var(--caf-success); }
.caf-cd-tl-body { min-width: 0; padding-top: 1px; }
.caf-cd-tl-title { font-size: 13px; font-weight: 600; color: var(--caf-value); }
.caf-cd-tl-title.is-pending { color: var(--caf-muted); font-weight: 500; }
.caf-cd-tl-title.is-rejected { color: var(--caf-negative); }
.caf-cd-tl-meta { font-size: 12px; color: var(--caf-label); margin-top: 1px; }

/* Attachments — sourced from the Offer Letter, not the CAF itself */
.caf-cd-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--caf-border);
  border-radius: 6px;
  margin-bottom: var(--caf-sp-2);
  text-decoration: none;
  background: rgba(16, 24, 40, 0.02);
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.caf-cd-file:last-of-type { margin-bottom: 0; }
.caf-cd-file:hover {
  border-color: rgba(29, 78, 216, 0.35);
  background: var(--caf-accent-soft);
  box-shadow: 0 4px 12px -6px rgba(29, 78, 216, 0.35);
}
.caf-cd-file-icon {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--caf-accent-soft);
  color: var(--caf-accent);
}
.caf-cd-file-text { min-width: 0; display: flex; flex-direction: column; }
.caf-cd-file-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--caf-value);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.caf-cd-file-meta { font-size: 11px; color: var(--caf-muted); margin-top: 1px; }
.caf-cd-file-empty { font-size: 12px; color: var(--caf-label); padding: 4px 0; }
.caf-cd-file-hint { font-size: 12px; color: var(--caf-label); margin-top: 4px; }

/* Cheque summary meta still uses .caf-line */
.caf-line {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.5rem 0.75rem;
  padding: 0.22rem 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
  align-items: baseline;
}
.caf-line-k {
  color: var(--muted, #64748b);
  font-size: 0.78rem;
}
.caf-line-v {
  color: var(--ink, #0f172a);
  font-weight: 500;
  word-break: break-word;
}

html[data-fin-theme="dark"] .caf-cd-net-amt,
html[data-fin-theme="dark"] .caf-cd-calc-val,
html[data-fin-theme="dark"] .caf-cd-ben-name,
html[data-fin-theme="dark"] .caf-cd-side-v,
html[data-fin-theme="dark"] .caf-cd-card-title { color: var(--caf-value); }
html[data-fin-theme="dark"] .caf-cd-fund { background: rgba(245, 158, 11, 0.1); }
html[data-fin-theme="dark"] .caf-cd-fund.is-funded { background: rgba(16, 185, 129, 0.1); }
html[data-fin-theme="dark"] .caf-cd-fund-title { color: #fbbf24; }
html[data-fin-theme="dark"] .caf-cd-fund-sub { color: #d4a373; }
html[data-fin-theme="dark"] .caf-cd-pill.ok { color: #34d399; }
html[data-fin-theme="dark"] .caf-cd-pill.warn { color: #fbbf24; }
html[data-fin-theme="dark"] .caf-cd-pill.bad { color: #f87171; }
html[data-fin-theme="dark"] .caf-cd-btn-dark { color: #fff; }
html[data-fin-theme="dark"] .caf-cd-btn-light {
  background: transparent;
  color: var(--caf-value);
  border-color: var(--caf-border);
}
html[data-fin-theme="dark"] #docFormRoot .caf-view .caf-back-btn {
  background: var(--dm-elevated, #161618);
  color: var(--ink, #fafafa);
}
html[data-fin-theme="dark"] #docFormRoot .caf-view .caf-doc-name { color: var(--ink, #fafafa); }
html[data-fin-theme="dark"] .caf-cd-tl-title,
html[data-fin-theme="dark"] .caf-cd-file-name { color: var(--caf-value); }
html[data-fin-theme="dark"] .caf-cd-file {
  border-color: var(--caf-border);
  background: rgba(255, 255, 255, 0.03);
}

/* ── CAF Payment review — artifact layout, light-blue theme ─────────── */
#docFormRoot .caf-view--review {
  font-family: "Helvetica Neue", Helvetica, -apple-system, system-ui, sans-serif;
  color: #1c2430;
}
#docFormRoot .caf-view--review .caf-form-tabs .mod-tab {
  font-size: 14px;
  font-weight: 500;
  color: #7c8794;
  padding: 0 2px 12px;
  margin-right: 28px;
}
#docFormRoot .caf-view--review .caf-form-tabs .mod-tab.on {
  font-weight: 600;
  color: #1a4d8f;
  box-shadow: inset 0 -2px 0 #1a4d8f;
}
#docFormRoot .caf-view--review .caf-cd-host {
  background: transparent;
}

.caf-cd-root {
  --caf-font-serif: "Helvetica Neue", Helvetica, -apple-system, system-ui, sans-serif;
  --caf-radius: 12px;
  --caf-label: #6b7c90;
  --caf-value: #1c2430;
  --caf-muted: #8b95a1;
  --caf-border: #d7e3f0;
  --caf-divider: #e8eef5;
  --caf-accent: #1a4d8f;
  --caf-accent-soft: #e8f1fa;
  --caf-surface: #ffffff;
  --caf-shadow: 0 1px 2px rgba(26, 77, 143, 0.06);
  font-family: var(--caf-font-serif);
}
.caf-cd-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
}
.caf-cd-main,
.caf-cd-side { gap: 20px; }

.caf-cd-card {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(26, 77, 143, 0.05);
  border-color: var(--caf-border);
}
.caf-cd-card::after { display: none; }
.caf-cd-card-hd,
.caf-cd-sec-hd { padding: 18px 26px 14px; }
.caf-cd-card-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b95a1;
}
.caf-cd-panel-body { padding: 0 20px 20px; }

.caf-cd-pay { isolation: isolate; }
.caf-cd-pay::before { display: none !important; content: none !important; }

.caf-cd-pay-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px 20px;
}
.caf-cd-pay-copy { min-width: 0; }
.caf-cd-pay-head .caf-cd-k {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b95a1;
}
.caf-cd-payee {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
  color: #5c6773;
}
.caf-cd-payee strong { font-weight: 600; color: #1c2430; }
.caf-cd-net-amt {
  font-family: inherit;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  color: #1c2430;
}
.caf-cd-net-sub {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--caf-label);
  line-height: 1.4;
}
.caf-cd-net-sub strong {
  color: var(--caf-value);
  font-weight: 650;
}
.caf-cd-pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  height: auto;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: none;
}
.caf-cd-pill.ok {
  background: #e7f4ec;
  color: #17663f;
  border: 1px solid #cfe8da;
}
.caf-cd-pill.warn {
  background: #fff7e8;
  color: #b54708;
  border: 1px solid #f5dfb8;
}
.caf-cd-pill.bad {
  background: #fdecec;
  color: #b42318;
  border: 1px solid #f3c8c5;
}
.caf-cd-pill-dot { display: none; }

.caf-cd-calc-list {
  padding: 0 26px 22px;
  display: grid;
  gap: 1px;
  background: #e8eef5;
  border-top: 1px solid #e8eef5;
}
.caf-cd-calc-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.caf-cd-calc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0 10px;
  border-bottom: 0;
  background: #fff;
}
.caf-cd-calc-row.is-total {
  border-top: 0;
  border-bottom: 0;
  margin-top: 0;
  padding: 13px 0 12px;
  background: #f4f8fc;
}
.caf-cd-calc-lab {
  font-size: 13.5px;
  color: #5c6773;
  font-weight: 400;
}
.caf-cd-calc-val {
  font-size: 13.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #1c2430;
  text-align: right;
}
.caf-cd-calc-val.is-neg { color: #c0392b; }
.caf-cd-calc-row.is-total .caf-cd-calc-lab {
  font-size: 13.5px;
  font-weight: 600;
  color: #1c2430;
}
.caf-cd-calc-row.is-total .caf-cd-calc-val {
  font-size: 14.5px;
  font-weight: 600;
  color: #1c2430;
}
.caf-cd-hint { color: #9aa4b0; font-weight: 400; }

.caf-cd-fund {
  display: contents;
}
.caf-cd-fund::before { display: none !important; content: none !important; }
.caf-cd-fund-ico { display: none; }
.caf-cd-fund-copy {
  background: #fff;
  padding: 8px 0 4px;
  font-size: 13px;
}
.caf-cd-fund-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 12px 0 4px;
  background: #fff;
}
.caf-cd-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
}
.caf-cd-btn-dark {
  background: var(--accent, #1d4ed8);
  color: #fff;
}
.caf-cd-btn-dark:hover:not(:disabled) { filter: brightness(0.94); }
.caf-cd-btn-light { border-radius: 7px; }

.caf-cd-ben-hd {
  padding: 18px 26px 14px;
}
.caf-cd-ben-hd .caf-cd-card-title {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b95a1;
}
.caf-cd-ben-meta { font-size: 12px; color: #8b95a1; }
.caf-cd-table-wrap { padding: 0 26px 8px; }
.caf-cd-table { width: 100%; border-collapse: collapse; }
.caf-cd-table th {
  padding: 0 0 10px;
  background: transparent;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #98a2ae;
  border-bottom: 1px solid #eef1f4;
}
.caf-cd-table td {
  padding: 14px 0;
  border-bottom: 1px solid #f2f4f7;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.caf-cd-table .num { text-align: right; }
.caf-cd-ben-avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  background: #e8f1fa;
  color: #1a4d8f;
}
.caf-cd-ben-name { font-weight: 600; }
.caf-cd-ben-role { font-size: 12px; color: #8b95a1; margin-top: 1px; }
.caf-cd-ben-total td {
  background: transparent;
  font-weight: 600;
  border-bottom: 0;
  padding: 13px 0 16px;
}

.caf-cd-side-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  min-height: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid #e8eef5;
  margin-bottom: 12px;
}
.caf-cd-side-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.caf-cd-side-k {
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #8b95a1;
  padding-top: 0;
}
.caf-cd-side-v,
.caf-cd-side-v.is-wrap {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #1c2430;
}
.caf-cd-side-v.is-strong { font-weight: 600; }
.caf-cd-side-link { font-size: 12.5px; font-weight: 500; color: #2563a8; }

.caf-cd-ol-top { gap: 16px; margin-bottom: 0; align-items: center; }
.caf-cd-ol-ring { width: 74px; height: 74px; }
.caf-cd-ol-ring svg { width: 74px; height: 74px; }
.caf-cd-ol-ring-track { stroke: #e4ebf3; }
.caf-cd-ol-ring-fill { stroke: #1a4d8f; }
.caf-cd-ol-ring-pct {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1c2430;
}
.caf-cd-ol-ring-pct span {
  font-size: 10px;
  font-weight: 600;
  color: #8b95a1;
  opacity: 1;
  margin-left: 1px;
}
.caf-cd-ol-k {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #98a2ae;
  font-weight: 600;
}
.caf-cd-ol-v {
  font-family: inherit;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.caf-cd-ol-bal { font-size: 12.5px; color: #8b95a1; margin-top: 2px; }
.caf-cd-ol-metrics {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e8eef5;
}
.caf-cd-ol-metrics .caf-cd-side-row {
  grid-template-columns: 1fr auto;
}
.caf-cd-ol-metrics .caf-cd-side-v { font-weight: 400; }
.caf-cd-panel .caf-cd-side-row { margin-top: 0; }

.caf-cd-timeline { display: flex; flex-direction: column; gap: 20px; }
.caf-cd-tl-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  padding-bottom: 0;
}
.caf-cd-tl-rail { display: flex; flex-direction: column; align-items: center; height: 100%; }
.caf-cd-tl-dot {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  background: #c9d4e3;
  box-shadow: none;
}
.caf-cd-tl-dot.is-done {
  background: #2e9e63;
  box-shadow: 0 0 0 3px #e7f4ec;
}
.caf-cd-tl-dot.is-current {
  background: #1a4d8f;
  box-shadow: 0 0 0 3px #e8f1fa;
}
.caf-cd-tl-dot.is-rejected {
  background: #c0392b;
  box-shadow: 0 0 0 3px #fdecec;
}
.caf-cd-tl-line { width: 1px; flex: 1; min-height: 20px; background: #dfe4ea; margin-top: 6px; }
.caf-cd-tl-line.is-done { background: #cfe8da; }
.caf-cd-tl-title { font-size: 13.5px; font-weight: 600; color: #1c2430; }
.caf-cd-tl-meta { font-size: 12.5px; color: #8b95a1; margin-top: 3px; }
.caf-cd-file {
  border-radius: 9px;
  padding: 11px 13px;
  border: 1px solid #e4ebf3;
  background: #fff;
}
.caf-cd-file-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: #e8f1fa;
  color: #1a4d8f;
}

html[data-fin-theme="dark"] .caf-cd-table th,
html[data-fin-theme="dark"] .caf-cd-ben-total td {
  background: transparent;
}
html[data-fin-theme="dark"] .caf-cd-pill.ok { background: var(--caf-success-bg); color: #34d399; }
html[data-fin-theme="dark"] .caf-cd-pill.warn { background: var(--caf-warning-bg); color: #fbbf24; }
html[data-fin-theme="dark"] .caf-cd-pill.bad { background: var(--caf-negative-bg); color: #f87171; }
html[data-fin-theme="dark"] .caf-cd-net-sub strong { color: var(--caf-value); }
html[data-fin-theme="dark"] .caf-cd-fund.is-funded .caf-cd-fund-title { color: #34d399; }
html[data-fin-theme="dark"] .caf-cd-btn-dark {
  background: var(--accent, #3b82f6);
  color: #fff;
}

/* Make Payment method picker */
.caf-pay-dlg-lead { margin: 0 0 0.75rem; font-size: var(--fs-sm); line-height: 1.45; color: #334155; }
.caf-pay-method-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.55rem; }
@media (max-width: 640px) { .caf-pay-method-grid { grid-template-columns: 1fr; } }
.caf-pay-method {
  text-align: left; cursor: pointer;
  border: 1.5px solid #e2e8f0; border-radius: 0.75rem;
  background: #fff; padding: 0.7rem 0.75rem;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.caf-pay-method:hover { border-color: rgba(29, 78, 216, 0.45); background: rgba(29, 78, 216, 0.03); }
.caf-pay-method.is-on {
  border-color: #1d4ed8; background: rgba(29, 78, 216, 0.07);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}
.caf-pay-method-ico { display: block; margin-bottom: 0.35rem; color: #64748b; }
.caf-pay-method.is-on .caf-pay-method-ico { color: #1d4ed8; }
.caf-pay-method-title { display: block; font-weight: 700; font-size: var(--fs-sm); color: #0f172a; }
.caf-pay-method-sub { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: #64748b; line-height: 1.35; }
.caf-input {
  width: 100%; padding: 0.4rem 0.55rem; border-radius: 0.45rem;
  border: 1px solid #e2e8f0; font-size: var(--fs-sm); background: #fff;
  box-sizing: border-box;
}
.caf-input:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12); }

/* Write Cheque dialog — payout snapshot at top */
.caf-chq-summary {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  background: #f8fafc;
}
.caf-chq-summary-hd {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 0.45rem;
}
.caf-chq-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.55rem;
  font-size: var(--fs-sm);
}
@media (max-width: 520px) { .caf-chq-meta { grid-template-columns: 1fr; } }
.caf-chq-meta .caf-line-k {
  display: block;
  font-size: 0.68rem;
  color: #64748b;
  margin-bottom: 0.05rem;
}
.caf-chq-meta .caf-line-v {
  display: block;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}
.caf-chq-payees {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  overflow: hidden;
}
.caf-chq-payees th,
.caf-chq-payees td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  vertical-align: top;
}
.caf-chq-payees th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #64748b;
  background: #f1f5f9;
  font-weight: 600;
}
.caf-chq-payees .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.caf-chq-payees tfoot td {
  border-bottom: none;
  background: #f8fafc;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.caf-chq-payees tfoot tr.caf-chq-pay-row td {
  border-top: 1px solid #e2e8f0;
  background: #ecfdf5;
  color: #065f46;
}
.caf-chq-payees .empty { text-align: center; color: #64748b; }
/* Single-beneficiary condensed summary (no table) — highlighted net amount line,
   same visual weight as the old table's tfoot pay-row. */
.caf-chq-net-strip {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.5rem; padding: 0.5rem 0.65rem;
  border-radius: 0.5rem; background: #ecfdf5; color: #065f46;
  font-weight: 700; font-size: var(--fs-sm);
}
.caf-chq-net-strip .caf-net { color: #065f46; }
.caf-chq-lead { margin: 0 0 0.65rem; font-size: var(--fs-sm); color: #475569; }
.caf-chq-note {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.35;
}
.caf-chq-lead {
  margin: 0 0 0.65rem;
  font-size: var(--fs-sm);
  color: #334155;
  line-height: 1.4;
}

/* Filter bar — consistent order: chips → filters → search → checks → actions */
#fin-portal .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.75rem;
  margin-bottom: 0.9rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
#fin-portal .filter-bar > .chip-row {
  order: 1;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
  margin-bottom: 0.1rem;
}
#fin-portal .filter-bar > .field:not(.grow) {
  order: 2;
}
#fin-portal .filter-bar > .field.grow {
  order: 3;
  flex: 1 1 14rem;
  min-width: min(100%, 12.5rem);
  max-width: 22rem;
}
#fin-portal .filter-bar > .chk {
  order: 4;
}
#fin-portal .filter-bar > .btn {
  order: 5;
}
/* Keep action cluster right-aligned when space allows */
#fin-portal .filter-bar > .btn.ghost,
#fin-portal .filter-bar > .btn.primary {
  margin-top: 0;
}
#fin-portal .filter-bar > .btn.ghost {
  margin-left: auto;
}
#fin-portal .filter-bar .field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 8.5rem;
}
#fin-portal .filter-bar label,
#fin-portal .filter-bar .field > label {
  font-size: var(--fs-xs, 0.8125rem);
  font-weight: var(--fw-medium, 500);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink, #1f2937);
}
#fin-portal .filter-bar select,
#fin-portal .filter-bar input[type="search"],
#fin-portal .filter-bar input[type="text"],
#fin-portal .filter-bar input[type="date"] {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: var(--fs-sm, 0.875rem);
  color: #374151;
  min-height: 2.35rem;
  width: 100%;
  box-sizing: border-box;
}
#fin-portal .filter-bar .field.grow input[type="search"] {
  /* Distinct search surface so it doesn't blend with plain selects */
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  padding-left: 0.85rem;
}
#fin-portal .filter-bar select:focus,
#fin-portal .filter-bar input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
  border-color: transparent;
}
#fin-portal .filter-bar .chk {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm, 0.875rem);
  color: #374151;
  font-weight: var(--fw-medium);
  padding-bottom: 0.4rem;
  cursor: pointer;
  user-select: none;
}
#fin-portal .filter-bar .chk input { accent-color: var(--accent); }
/* Withholding list — labeled chip groups side-by-side, not jammed rows */
#fin-portal .wht-filter-bar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0.95rem;
}
#fin-portal .wht-filter-bar .wht-fg-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem 1.5rem;
  padding-bottom:0.95rem;
  border-bottom:1px solid var(--line-soft, #e8edf3);
}
#fin-portal .wht-filter-bar .wht-fg{
  display:flex;
  flex-direction:column;
  gap:0.45rem;
  min-width:0;
}
#fin-portal .wht-filter-bar .wht-fg-lab{
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--muted, #64748b);
}
#fin-portal .wht-filter-bar .wht-fg .chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.45rem;
}
#fin-portal .wht-filter-bar .wht-fg-fields{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:0.65rem 0.85rem;
}
#fin-portal .wht-filter-bar .wht-fg-fields .field{min-width:10rem}
#fin-portal .wht-filter-bar .wht-fg-fields .field.grow{flex:1 1 16rem;max-width:28rem}
#fin-portal .wht-filter-bar .wht-fg-fields .btn{margin-left:auto}
@media (max-width: 960px){
  #fin-portal .wht-filter-bar .wht-fg-grid{
    grid-template-columns:1fr;
    gap:0.85rem;
  }
}
.wht-review-host{margin-bottom:1rem}
.wht-review-host[hidden]{display:none !important}
#view-wht.is-reviewing #whtListPane{display:none}
@keyframes whtFocusPulse{
  0%{box-shadow:0 0 0 0 rgba(180,83,9,.42);background:#fff7ed}
  55%{box-shadow:0 0 0 12px rgba(180,83,9,0);background:#ffedd5}
  100%{box-shadow:0 0 0 0 transparent;background:#fff7ed}
}
.caf-cd-calc-row.wht-focus{
  margin:0 -10px;
  padding:12px 10px;
  border-radius:10px;
  background:#fff7ed;
  outline:1.5px solid rgba(180,83,9,.42);
  box-shadow:0 0 0 4px rgba(251,191,36,.16);
  animation:whtFocusPulse 1.1s ease-out 0s 3;
  cursor:default;
  transition:background .16s ease, box-shadow .16s ease, outline-color .16s ease;
}
.caf-cd-calc-row.wht-focus .caf-cd-calc-lab{font-weight:700;color:#9a3412}
.caf-cd-calc-row.wht-focus .caf-cd-calc-val.is-neg{color:#9a3412;font-weight:800;font-size:1.08em}
.caf-cd-calc-row.wht-focus:hover,
.caf-cd-calc-row.wht-focus.is-hover{
  background:#ffedd5;
  outline-color:rgba(180,83,9,.72);
  box-shadow:0 0 0 6px rgba(251,191,36,.28);
}
html[data-fin-theme="dark"] .caf-cd-calc-row.wht-focus{
  background:rgba(180,83,9,.2);
  outline-color:rgba(251,191,36,.45);
  box-shadow:0 0 0 4px rgba(251,191,36,.12);
}
html[data-fin-theme="dark"] .caf-cd-calc-row.wht-focus .caf-cd-calc-lab,
html[data-fin-theme="dark"] .caf-cd-calc-row.wht-focus .caf-cd-calc-val.is-neg{color:#fdba74}
html[data-fin-theme="dark"] .caf-cd-calc-row.wht-focus:hover,
html[data-fin-theme="dark"] .caf-cd-calc-row.wht-focus.is-hover{
  background:rgba(180,83,9,.34);
  outline-color:rgba(251,191,36,.7);
}
#fin-portal .filter-bar .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#fin-portal .state-chip {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.75);
  color: #4b5563;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
#fin-portal .state-chip:hover {
  border-color: #9ca3af;
  color: #111827;
  background: #fff;
}
#fin-portal .state-chip.active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.3);
}

/* Clickable ledger rows */
#fin-portal tr.row-click { cursor: pointer; }
#fin-portal tr.row-click:hover td {
  background: rgba(219, 234, 254, 0.45);
}
html[data-fin-theme="dark"] #fin-portal tr.row-click:hover td {
  background: var(--accent-soft);
}
#fin-portal table.col-owner-inv { min-width: 56rem; }
#fin-portal table.col-fin-rcpt { min-width: 48rem; }
#fin-portal table.col-owner-info { min-width: 40rem; }
#fin-portal table.col-manual-inv { min-width: 48rem; }
#fin-portal table.col-credit-note { min-width: 48rem; }
#fin-portal .sub-line {
  font-size: var(--fs-2xs);
  color: var(--muted);
  font-weight: var(--fw-regular);
  margin-top: 0.1rem;
}
#fin-portal .blade-note {
  font-size: var(--fs-xs);
  color: #4b5563;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 0.75rem;
  border: 1px solid var(--line-soft);
  line-height: 1.4;
}
html[data-fin-theme="dark"] #fin-portal .blade-note {
  color: var(--muted);
  background: var(--dm-elevated);
}
#fin-portal table.col-bank-tx { min-width: 52rem; }
#fin-portal .raven-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 9rem);
  min-height: 28rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
#fin-portal .raven-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.8);
}
#fin-portal .raven-bar h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: #111827;
}
html[data-fin-theme="dark"] #fin-portal .raven-shell {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] #fin-portal .raven-bar {
  background: var(--dm-elevated);
  border-bottom-color: var(--dm-border);
}
html[data-fin-theme="dark"] #fin-portal .raven-bar h3 {
  color: var(--ink);
}
#fin-portal .raven-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
  min-height: 24rem;
}

/* Full DocType form (in-portal Desk-parity) */
#fin-portal .fp-form-root { min-height: 60vh; }
#fin-portal .fp-form-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.85rem;
}
#fin-portal .fp-form-kicker {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
#fin-portal .fp-form-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: #111827;
  letter-spacing: -0.02em;
  word-break: break-word;
}
#fin-portal .fp-form-status { margin-top: 0.35rem; display: flex; gap: 0.35rem; flex-wrap: wrap; }
#fin-portal .fp-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
}
/* Form content: full usable width of main pane (no orphan empty right void).
   Columns share width equally (1fr tracks from JS); fields fill columns. */
#fin-portal .fp-form {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#fin-portal .fp-form-hd {
  width: 100%;
  max-width: 100%;
}
#fin-portal .fp-form-body {
  padding: 1rem 1.15rem 1.4rem;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
#fin-portal .fp-form .ff-panel {
  max-width: 100%;
  width: 100%;
}
/* Settlement / finance callouts on generic forms */
#fin-portal .os-settle-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 1rem;
}
@media (max-width: 720px) {
  #fin-portal .os-settle-strip { grid-template-columns: 1fr; }
}
#fin-portal .os-settle-card {
  border-radius: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-soft);
  background: var(--card-solid, #fff);
}
#fin-portal .os-settle-card .os-lab {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
#fin-portal .os-settle-card .os-val {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: #111827;
}
#fin-portal .os-settle-card.gross { background: rgba(254, 243, 199, 0.45); }
#fin-portal .os-settle-card.payout { background: rgba(220, 252, 231, 0.5); }
#fin-portal .os-settle-card.retain { background: rgba(224, 231, 255, 0.55); }
html[data-fin-theme="dark"] #fin-portal .os-settle-card {
  background: var(--dm-input, #0a0a0a) !important;
  border-color: var(--line-soft);
}
html[data-fin-theme="dark"] #fin-portal .os-settle-card .os-val { color: #fafafa; }
html[data-fin-theme="dark"] #fin-portal .os-settle-card.gross { border-color: rgba(234, 179, 8, 0.35); }
html[data-fin-theme="dark"] #fin-portal .os-settle-card.payout { border-color: rgba(34, 197, 94, 0.35); }
html[data-fin-theme="dark"] #fin-portal .os-settle-card.retain { border-color: rgba(99, 102, 241, 0.4); }
#fin-portal .btn:disabled,
#fin-portal .btn[disabled],
#fin-portal .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Single-column sections: don't stretch a lone field across the whole form */
#fin-portal .ff-cols[style*="repeat(1,"] {
  max-width: 28rem;
}
/* Tables / wide blocks use full available form width */
#fin-portal .ff-cols:has(.ff-fld-table),
#fin-portal .ff-cols:has(.ff-table),
#fin-portal .ff-cols:has(.mod-table-shell),
#fin-portal .fp-form-body:has(.ff-table),
#fin-portal .fp-form-body:has(.mod-table-shell) {
  max-width: 100%;
}
#fin-portal .ff-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
#fin-portal .ff-tab {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #4b5563;
  cursor: pointer;
}
#fin-portal .ff-tab.on {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
#fin-portal .ff-sec { margin-bottom: 1.15rem; }
#fin-portal .ff-sec-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.65rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-soft);
}

/* Payment Entry: Desk-style collapsible sections (Accounts, More Info, GL, …) */
#fin-portal .pe-form .pe-sec-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.15rem 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: left;
  cursor: pointer;
  border-radius: 0;
}
#fin-portal .pe-form .pe-sec-toggle:hover {
  color: var(--accent, #1d4ed8);
}
#fin-portal .pe-form .pe-sec-chev {
  display: inline-flex;
  width: 1rem;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1;
}
#fin-portal .pe-form .pe-sec:not(.is-collapsed) .pe-sec-chev {
  transform: rotate(90deg);
}
#fin-portal .pe-form .pe-sec-label { flex: 1 1 auto; min-width: 0; }
#fin-portal .pe-form .pe-sec-hint {
  flex: 0 0 auto;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#fin-portal .pe-form .pe-sec.is-collapsed .pe-sec-body {
  display: none !important;
}
#fin-portal .pe-form .pe-sec.is-collapsed .pe-sec-toggle {
  margin-bottom: 0;
  border-bottom-color: transparent;
  background: var(--surface-2, rgba(15, 23, 42, 0.03));
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  border-bottom: 0;
}
#fin-portal .pe-form .pe-sec.is-collapsed {
  margin-bottom: 0.55rem;
}
/* Secondary balance / bank pickers stay in form for collect, but quieter */
#fin-portal .pe-form .pe-fld-secondary label {
  color: var(--muted);
  font-weight: var(--fw-medium);
}
#fin-portal .ff-cols {
  display: grid;
  gap: 0.85rem 1.5rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#fin-portal .ff-col {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
/* Child tables span full form content width */
#fin-portal .ff-col:has(.ff-fld-table),
#fin-portal .ff-col:has(.ff-table),
#fin-portal .ff-col:has(.mod-table-shell) {
  grid-column: 1 / -1;
}
#fin-portal .ff-fld {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}
#fin-portal .ff-fld.ff-fld-table {
  width: 100%;
}
#fin-portal .ff-fld label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.3rem;
  line-height: var(--lh-tight);
}
#fin-portal .ff-fld .reqd { color: #b91c1c; font-style: normal; }
#fin-portal .ff-fld input[type="text"],
#fin-portal .ff-fld input[type="number"],
#fin-portal .ff-fld input[type="date"],
#fin-portal .ff-fld input[type="time"],
#fin-portal .ff-fld input[type="datetime-local"],
#fin-portal .ff-fld input[type="password"],
#fin-portal .ff-fld input.ff-money,
#fin-portal .ff-fld input.ff-num,
#fin-portal .ff-fld input[data-money="1"],
#fin-portal .ff-fld select,
#fin-portal .ff-fld textarea,
#fin-portal .ff-table input,
#fin-portal .ff-table select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: var(--fs-sm);
  color: #111827;
  min-height: 2.25rem;
}
#fin-portal .ff-fld .ff-link {
  width: 100%;
  max-width: 100%;
}
#fin-portal .ff-fld textarea {
  min-height: 4.5rem;
  resize: vertical;
}
#fin-portal .ff-fld input:focus,
#fin-portal .ff-fld select:focus,
#fin-portal .ff-fld textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
  border-color: transparent;
}
/* Never paint disabled Check boxes with grey fill — that hides the tick. */
#fin-portal .ff-fld input:disabled:not([type="checkbox"]),
#fin-portal .ff-fld select:disabled,
#fin-portal .ff-fld textarea:disabled {
  background: #f3f4f6;
  color: #4b5563;
}
/* Currency / numeric — full column width, right-aligned, tabular figures */
#fin-portal .ff-fld.ff-fld-num {
  max-width: 100%;
  width: 100%;
}
#fin-portal .ff-fld .ff-num-wrap,
#fin-portal .ff-fld .ff-pct-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: #fff;
  overflow: hidden;
  min-height: 2.25rem;
}
#fin-portal .ff-fld .ff-num-wrap input,
#fin-portal .ff-fld .ff-pct-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-height: 2.2rem;
}
#fin-portal .ff-fld .ff-num-wrap:focus-within,
#fin-portal .ff-fld .ff-pct-wrap:focus-within {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
  border-color: transparent;
}
#fin-portal .ff-fld .ff-num-suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.7rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  background: #f8fafc;
  border-left: 1px solid var(--line-soft);
  flex: 0 0 auto;
  user-select: none;
}
#fin-portal .ff-fld input.ff-money,
#fin-portal .ff-fld input.ff-num,
#fin-portal .ff-fld input[data-money="1"],
#fin-portal .ff-fld input[type="number"],
#fin-portal .ff-table input.ff-money,
#fin-portal .ff-table input.ff-num,
#fin-portal .ff-table input[data-money="1"],
#fin-portal .ff-table input.si-money,
#fin-portal input.ff-money,
#fin-portal input[data-money="1"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  font-family: var(--f-body);
  letter-spacing: -0.01em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Descriptions under money fields — quieter, less layout disruption */
#fin-portal .ff-fld.ff-fld-num .ff-desc {
  font-size: var(--fs-xs);
  margin-top: 0.35rem;
  max-width: 100%;
}
html[data-fin-theme="dark"] #fin-portal .ff-fld .ff-num-wrap,
html[data-fin-theme="dark"] #fin-portal .ff-fld .ff-pct-wrap {
  background: var(--dm-input, #0a0a0a);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-fin-theme="dark"] #fin-portal .ff-fld .ff-num-suffix {
  background: #141416;
  border-color: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
}
#fin-portal .ff-desc {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--muted);
  margin-top: 0.3rem;
  line-height: 1.45;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
#fin-portal .ff-desc strong,
#fin-portal .ff-desc b {
  font-weight: var(--fw-semibold);
  color: #4b5563;
}
#fin-portal .ff-desc em,
#fin-portal .ff-desc i {
  font-style: italic;
}
/* (form/control dark styles live in the main dark-mode block above) */
#fin-portal .ff-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: #374151;
  cursor: pointer;
}
/* Parent-form Check fields — teal square + white SVG ✓ (Desk parity, never bare browser box) */
#fin-portal .ff-fld-check {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
#fin-portal .ff-check-ctrl {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  position: relative;
  margin: 0.15rem 0 0.35rem;
  padding: 0.45rem 0.65rem 0.45rem 0.5rem;
  border-radius: 0.65rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: #1f2937;
  max-width: 100%;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
#fin-portal .ff-check-ctrl:hover:not(.is-disabled) {
  border-color: color-mix(in srgb, #0d9488 45%, #e2e8f0);
  background: color-mix(in srgb, #0d9488 6%, #fff);
}
#fin-portal .ff-check-ctrl.is-on {
  border-color: color-mix(in srgb, #0d9488 50%, #e2e8f0);
  background: color-mix(in srgb, #0d9488 10%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, #0d9488 14%, transparent);
}
#fin-portal .ff-check-ctrl.is-disabled {
  opacity: 0.92;
  cursor: default;
  background: #f8fafc;
}
#fin-portal .ff-check-ctrl .ff-check-inp {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
#fin-portal .ff-check-ctrl .ff-check-ui {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border: 2px solid #94a3b8 !important;
  border-radius: 5px !important;
  background: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
#fin-portal .ff-check-ctrl .ff-check-tick {
  display: none;
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
}
#fin-portal .ff-check-ctrl.is-on .ff-check-ui,
#fin-portal .ff-check-ctrl:has(.ff-check-inp:checked) .ff-check-ui {
  background: #0d9488 !important;
  border-color: #0f766e !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, #0d9488 22%, transparent);
}
#fin-portal .ff-check-ctrl.is-on .ff-check-tick,
#fin-portal .ff-check-ctrl:has(.ff-check-inp:checked) .ff-check-tick {
  display: block !important;
}
#fin-portal .ff-check-ctrl .ff-check-lbl {
  line-height: 1.35;
  color: #111827;
}
html[data-fin-theme="dark"] #fin-portal .ff-check-ctrl {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
html[data-fin-theme="dark"] #fin-portal .ff-check-ctrl .ff-check-ui {
  background: #0f172a !important;
  border-color: #64748b !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-check-ctrl.is-on .ff-check-ui,
html[data-fin-theme="dark"] #fin-portal .ff-check-ctrl:has(.ff-check-inp:checked) .ff-check-ui {
  background: #0d9488 !important;
  border-color: #14b8a6 !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-check-ctrl .ff-check-lbl {
  color: #e2e8f0;
}
/* Desk-grade Link control */
#fin-portal .ff-link { position: relative; width: 100%; }
#fin-portal .ff-link-box {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  padding: 0 0.35rem 0 0.55rem;
  min-height: 2.35rem;
  transition: border-color 0.12s, box-shadow 0.12s;
}
#fin-portal .ff-link.is-open .ff-link-box,
#fin-portal .ff-link-box:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}
#fin-portal .ff-link.has-value .ff-link-box {
  background: #f8fafc;
}
#fin-portal .ff-link.is-loading .ff-link-box {
  background-image: linear-gradient(90deg, transparent, rgba(219,234,254,0.7), transparent);
  background-size: 200% 100%;
  animation: ffLinkShimmer 0.9s linear infinite;
}
@keyframes ffLinkShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
#fin-portal .ff-link-ico {
  display: flex;
  color: #93c5fd;
  flex-shrink: 0;
}
#fin-portal .ff-link.has-value .ff-link-ico { color: #1d4ed8; }
#fin-portal .ff-link-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.45rem 0.35rem !important;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #111827;
  outline: none !important;
}
#fin-portal .ff-link-input:disabled { color: #4b5563; }
#fin-portal .ff-link-clear,
#fin-portal .ff-link-open {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #6b7280;
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0;
}
#fin-portal .ff-link-clear:hover { background: #fee2e2; color: #b91c1c; }
#fin-portal .ff-link-open:hover { background: #dbeafe; color: #1d4ed8; }
#fin-portal .ff-link-meta {
  margin-top: 0.2rem;
  font-size: var(--fs-2xs);
  font-family: var(--f-mono);
  color: #9ca3af;
  padding-left: 0.15rem;
}
#fin-portal .ff-link-drop {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 0.25rem);
  z-index: 50;
  max-height: 16rem;
  overflow: auto;
  background: #fff;
  border: 1px solid #bfdbfe;
  border-radius: 0.85rem;
  box-shadow: 0 12px 32px rgba(29, 78, 216, 0.12), 0 0 0 1px rgba(191, 219, 254, 0.5);
  padding: 0.3rem;
}
/* Body-portaled dropdown — not clipped by .card / .ff-panel overflow */
.ff-link-drop-portal {
  position: fixed !important;
  z-index: 10050 !important;
  max-height: 16rem;
  overflow: auto;
  background: #fff;
  border: 1px solid #93c5fd;
  border-radius: 0.85rem;
  box-shadow: 0 16px 40px rgba(29, 78, 216, 0.18), 0 0 0 1px rgba(191, 219, 254, 0.7);
  padding: 0.35rem;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
}
.ff-link-drop-portal .ff-link-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.75rem;
  border-radius: 0.55rem;
  font: inherit;
  cursor: pointer;
}
.ff-link-drop-portal .ff-link-opt:hover,
.ff-link-drop-portal .ff-link-opt.is-active {
  background: #eff6ff;
}
.ff-link-drop-portal .ff-link-opt-lab {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #111827;
}
.ff-link-drop-portal .ff-link-opt-id {
  font-size: var(--fs-2xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #6b7280;
}
.ff-link-drop-portal .ff-link-empty {
  padding: 0.85rem;
  font-size: var(--fs-xs);
  color: #9ca3af;
  text-align: center;
}
.ff-link-drop-portal .ff-link-empty.err-row { color: #b91c1c; }
/* Quick create Item / Supplier from Link search (GRN · LPO · buying forms) */
.ff-link-drop-portal .ff-link-create,
#fin-portal .ff-link-create {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid #dbeafe;
  background: linear-gradient(180deg, #f8fbff, #eff6ff);
  padding: 0.6rem 0.75rem;
  font: inherit;
  cursor: pointer;
  border-radius: 0 0 0.55rem 0.55rem;
}
.ff-link-drop-portal .ff-link-create:hover,
#fin-portal .ff-link-create:hover {
  background: #dbeafe;
}
.ff-link-drop-portal .ff-link-create-lab,
#fin-portal .ff-link-create-lab {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #1d4ed8;
}
.ff-link-drop-portal .ff-link-create-hint,
#fin-portal .ff-link-create-hint {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
#fin-portal .ff-link-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.7rem;
  border-radius: 0.55rem;
  font: inherit;
  cursor: pointer;
}
#fin-portal .ff-link-opt:hover,
#fin-portal .ff-link-opt.is-active {
  background: #eff6ff;
}
#fin-portal .ff-link-opt-lab {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #111827;
}
#fin-portal .ff-link-opt-id {
  font-size: var(--fs-2xs);
  font-family: var(--f-mono);
  color: #6b7280;
}
#fin-portal .ff-link-empty {
  padding: 0.75rem 0.85rem;
  font-size: var(--fs-xs);
  color: #9ca3af;
  text-align: center;
}
#fin-portal .ff-link-compact .ff-link-box {
  min-height: 2rem;
  border-radius: 0.55rem;
}
#fin-portal .ff-link-compact .ff-link-input {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 0.3rem 0.25rem !important;
}
#fin-portal .ff-td-link { min-width: 10rem; }
#fin-portal .ff-link.is-ro .ff-link-box {
  background: #f3f4f6;
}
#fin-portal .ff-table {
  margin: 0.5rem 0 1rem;
  border: 1px solid var(--line-soft);
  border-radius: 0.85rem;
  overflow: hidden;
  background: #fff;
}
html[data-fin-theme="dark"] #fin-portal .ff-table {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] #fin-portal .ff-table-bar {
  background: var(--dm-hover);
  color: var(--muted);
  border-bottom-color: var(--dm-border);
}
#fin-portal .ff-table-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #374151;
  background: #f8fafc;
  border-bottom: 1px solid var(--line-soft);
}
#fin-portal .ff-fld-table { grid-column: 1 / -1; }
#fin-portal .btn.tiny {
  padding: 0.25rem 0.55rem;
  font-size: var(--fs-xs);
  border-radius: 0.65rem;
}
#fin-portal .muted { color: var(--muted); font-size: var(--fs-xs); }

/* Hide legacy banner if any cache still injects it */
#fin-portal .banner { display: none !important; }

/* ═══ Portal dialogs (replace browser alert/confirm) — light blue glass ═══ */
.fin-dlg-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
  animation: finDlgIn 0.15s ease-out;
}
@keyframes finDlgIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fin-dlg-overlay[hidden] { display: none !important; }
.fin-dlg {
  width: min(28rem, 100%);
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 42%);
  border: 1px solid #bfdbfe;
  border-radius: 1.1rem;
  box-shadow:
    0 20px 50px rgba(29, 78, 216, 0.18),
    0 0 0 1px rgba(191, 219, 254, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Wide Quick Create (LPO New Supplier / Item, email, …) — larger, roomier */
.fin-dlg.fin-dlg-wide {
  width: min(48rem, 100%);
  max-height: min(92vh, 52rem);
}
/* Extra-large pickers (GRN from PO, multi-row) */
.fin-dlg.fin-dlg-xl {
  width: min(64rem, 100%);
  max-height: min(94vh, 58rem);
}
.fin-dlg.fin-dlg-wide .fin-dlg-body,
.fin-dlg.fin-dlg-xl .fin-dlg-body {
  max-height: min(72vh, 42rem);
  overflow: auto;
}
.fin-dlg.fin-dlg-xl .fin-dlg-fields {
  grid-template-columns: 1fr 1fr;
}
.fin-dlg.fin-dlg-xl .fin-dlg-field.full,
.fin-dlg.fin-dlg-xl .fin-dlg-field:only-child {
  grid-column: 1 / -1;
}

/* GRN from PO · qty-only emphasis */
.pr-qty-only-table .pr-qty-col { color: #1d4ed8; }
.pr-qty-only-table .pr-qty-hint { color: #ef4444; font-weight: var(--fw-bold); }
.pr-qty-only-table .pr-qty-cell input.pr-qty-input {
  border: 1.5px solid #60a5fa !important;
  background: #f0f7ff !important;
  font-weight: var(--fw-bold);
  min-height: 2.4rem;
  border-radius: 8px;
  text-align: right;
  width: 100%;
  max-width: 7.5rem;
  padding: 0.4rem 0.55rem;
  font-size: var(--fs-base);
}
.pr-qty-only-table .pr-qty-cell input.pr-qty-input:focus {
  outline: none;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.pr-qty-only-row:hover td { background: #fafbfc; }

/* Pay Supplier Bills · bank withdrawal filters */
.psb-bt-filters {
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.65rem;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 10px;
}
.psb-bt-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.55rem;
}
.psb-bt-fld {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 7.5rem;
  margin: 0;
}
.psb-bt-fld.grow {
  flex: 1 1 12rem;
  min-width: 10rem;
}
.psb-bt-fld .lbl {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.psb-bt-fld input,
.psb-bt-fld select {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: var(--fs-xs);
  min-height: 2.15rem;
  background: #fff;
  color: #0f172a;
}
.psb-bt-fld input:focus,
.psb-bt-fld select:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.psb-bt-filter-meta {
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  color: #64748b;
}
.psb-bt-filter-meta b {
  color: #334155;
  font-weight: var(--fw-bold);
}
.fin-dlg-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.05rem 1.2rem 0.75rem;
  border-bottom: 1px solid rgba(147, 197, 253, 0.45);
  background: rgba(239, 246, 255, 0.85);
}
.fin-dlg-kicker {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1d4ed8;
  margin-bottom: 0.15rem;
}
.fin-dlg-hd h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: #0f172a;
  letter-spacing: -0.02em;
}
.fin-dlg-x {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.9);
  color: #1e40af;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.fin-dlg-x:hover { background: #dbeafe; }
.fin-dlg-body {
  padding: 1rem 1.2rem 0.5rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #374151;
}
.fin-dlg-body .fin-dlg-msg { margin: 0 0 0.85rem; white-space: pre-wrap; }
.fin-dlg-body .fin-dlg-msg:last-child { margin-bottom: 0; }
/* Must be block (not flex): approve/confirm messages are HTML with mixed
   text + <b>/<br>/<span>. Flex treats each text node / element as a separate
   item and turns "This Offer Letter is now Approved…" into a broken column layout. */
.fin-dlg-banner {
  display: block;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  margin-bottom: 0.9rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e40af;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.fin-dlg-banner b,
.fin-dlg-banner strong {
  font-weight: 700;
  color: inherit;
}
.fin-dlg-banner .qr,
.fin-dlg-banner .fin-dlg-banner-note {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.9em;
  opacity: 0.88;
  line-height: 1.45;
}
.fin-dlg-banner.warn { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.fin-dlg-banner.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.fin-dlg-banner.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.fin-dlg-banner.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
/* Standard tone for routine confirmations (finConfirm default) — professional
   slate, not the amber "warn" treatment which reads as an actual warning. */
.fin-dlg-banner.neutral { background: #f8fafc; border-color: #e2e8f0; color: #1f2937; }
.fin-dlg-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.fin-dlg-field label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.3rem;
}
.fin-dlg-field label .reqd { color: #b91c1c; }
.fin-dlg-field input:not([type="checkbox"]):not([type="radio"]),
.fin-dlg-field select,
.fin-dlg-field textarea {
  width: 100%;
  border: 1px solid rgba(147, 197, 253, 0.65);
  border-radius: 0.7rem;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: var(--fs-sm);
  background: #fff;
  color: #111827;
  box-sizing: border-box;
}
.fin-dlg-field input:not([type="checkbox"]):not([type="radio"]):focus,
.fin-dlg-field select:focus,
.fin-dlg-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
  border-color: transparent;
}
.fin-dlg-field .fin-dlg-hint {
  font-size: var(--fs-xs);
  color: #6b7280;
  margin-top: 0.25rem;
}
/* Desk-like Check / bool — native checkbox + full label (no clip / no full-width input) */
.fin-dlg-field-bool .fin-dlg-field-label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.4rem;
}
.fin-dlg-bool {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(147, 197, 253, 0.55);
  border-radius: 0.7rem;
  background: #f8fafc;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: #1f2937;
  user-select: none;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}
.fin-dlg-bool:hover { background: #eff6ff; border-color: rgba(59, 130, 246, 0.45); }
/* Real checkbox — never width:100% (see input:not rule above) */
.fin-dlg-bool input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 1.15rem;
  width: 1.15rem !important;
  min-width: 1.15rem;
  max-width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0 !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 0.3rem !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
  top: 0;
}
.fin-dlg-bool input[type="checkbox"]:checked {
  background: #2563eb !important;
  border-color: #2563eb !important;
}
.fin-dlg-bool input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.05rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fin-dlg-bool input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4) !important;
}
.fin-dlg-bool-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-medium);
  color: #111827;
  white-space: normal;
  overflow: visible;
}
.fin-dlg-ft {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.2rem 1.05rem;
  background: rgba(239, 246, 255, 0.55);
  border-top: 1px solid rgba(147, 197, 253, 0.4);
}
.fin-dlg-ft .btn {
  border-radius: 0.85rem;
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  border: 0;
  font-family: inherit;
}
.fin-dlg-ft .btn.ghost {
  background: transparent;
  color: #374151;
  border: 1px solid rgba(107, 114, 128, 0.28);
}
.fin-dlg-ft .btn.primary {
  background: #1d4ed8;
  color: #fff;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.28);
}
.fin-dlg-ft .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Form layout: main + Desk-style collapsible sidebar ── */
#fin-portal .mod-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem 1rem;
  align-items: start;
}
#fin-portal .mod-form-main { min-width: 0; }
#fin-portal .mod-form-side {
  min-width: 0;
  width: 3rem; /* icon rail */
  transition: width 0.18s ease;
}
#fin-portal .mod-form-side.is-open {
  width: min(17.5rem, 100%);
}
@media (max-width: 960px) {
  #fin-portal .mod-form-layout { grid-template-columns: 1fr; }
  #fin-portal .mod-form-side {
    width: 100%;
    order: -1;
  }
  #fin-portal .mod-form-side:not(.is-open) {
    width: 100%;
  }
  #fin-portal .mod-form-side:not(.is-open) .mod-side-rail {
    flex-direction: row;
    justify-content: flex-start;
    padding: 0.35rem 0.5rem;
  }
  #fin-portal .mod-form-side:not(.is-open) .mod-form-sidebar-body { display: none; }
}

/* Professional sidebar shell */
#fin-portal .mod-form-sidebar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.9rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  position: sticky;
  top: 0.5rem;
  overflow: hidden;
  min-height: 12rem;
}
/* Collapsed: only vertical icon rail */
#fin-portal .mod-side-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.4rem;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  flex: 0 0 3rem;
  width: 3rem;
  box-sizing: border-box;
}
#fin-portal .mod-side-rail-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
#fin-portal .mod-side-rail-btn:hover {
  background: #fff;
  color: #1d4ed8;
  border-color: rgba(29, 78, 216, 0.2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
#fin-portal .mod-side-rail-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}
#fin-portal .mod-side-ico { display: block; pointer-events: none; }
#fin-portal .mod-side-badge {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  min-width: 0.9rem;
  height: 0.9rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 0.9rem;
  text-align: center;
}
#fin-portal .mod-form-sidebar-body {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.65rem 0.8rem 0.85rem;
  max-height: min(70vh, 32rem);
  overflow: auto;
}
#fin-portal .mod-form-side.is-open .mod-form-sidebar-body { display: block; }
#fin-portal .mod-form-side.is-open .mod-form-sidebar {
  /* rail + panel side by side */
}
#fin-portal .mod-side-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
#fin-portal .mod-side-panel-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #334155;
}
#fin-portal .mod-side-collapse {
  width: 1.75rem;
  height: 1.75rem;
}
#fin-portal .mod-side-sec { margin-bottom: 0.85rem; }
#fin-portal .mod-side-sec:last-child { margin-bottom: 0; }
#fin-portal .mod-side-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}
#fin-portal .mod-side-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}
#fin-portal .mod-side-title .mod-side-ico {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}
#fin-portal .mod-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#fin-portal .mod-side-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
#fin-portal .mod-side-item:last-child { border-bottom: 0; }
#fin-portal .mod-side-avatar {
  flex: 0 0 1.55rem;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#fin-portal .mod-side-item-main { flex: 1 1 auto; min-width: 0; }
#fin-portal .mod-side-name {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #111827;
  line-height: 1.25;
}
#fin-portal .mod-side-sub {
  display: block;
  font-size: var(--fs-2xs);
  color: #6b7280;
  margin-top: 0.1rem;
}
#fin-portal .mod-side-x {
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
  padding: 0 0.15rem;
}
#fin-portal .mod-side-x:hover { color: #b91c1c; }
html[data-fin-theme="dark"] #fin-portal .mod-side-x { color: var(--muted-2); }
html[data-fin-theme="dark"] #fin-portal .mod-side-x:hover { color: #f87171; }
#fin-portal .mod-side-empty {
  font-size: var(--fs-xs);
  padding: 0.25rem 0;
}
#fin-portal .mod-side-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
#fin-portal .mod-side-file {
  font-size: var(--fs-xs);
  color: var(--accent, #1d4ed8);
  text-decoration: none;
  word-break: break-all;
}
#fin-portal .mod-side-file:hover { text-decoration: underline; }
#fin-portal .mod-side-loading,
#fin-portal .mod-side-err {
  font-size: var(--fs-xs);
  padding: 0.5rem;
}

/* Date filter fields — values are ISO; displayed dates use fmtDate (en-GB) in tables */
#fin-portal input[type="date"] {
  font-variant-numeric: tabular-nums;
  min-width: 9.5rem;
}
#fin-portal .col-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Desk-like document tool icons (Print / Email / Refresh) on SI + PE toolbars */
#fin-portal .mod-tool-icons,
.mod-tool-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
#fin-portal .mod-icon-btn,
.mod-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.9);
  color: #334155;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  flex: 0 0 auto;
}
#fin-portal .mod-icon-btn:hover,
.mod-icon-btn:hover {
  background: #fff;
  border-color: var(--accent, #1d4ed8);
  color: var(--accent, #1d4ed8);
}
#fin-portal .mod-icon-btn:focus-visible,
.mod-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}
html[data-fin-theme="dark"] #fin-portal .mod-icon-btn,
html[data-fin-theme="dark"] .mod-icon-btn {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .mod-icon-btn:hover,
html[data-fin-theme="dark"] .mod-icon-btn:hover {
  background: var(--dm-hover);
  border-color: var(--accent);
  color: var(--accent);
}
#fin-portal .mod-icon-btn svg,
.mod-icon-btn svg {
  display: block;
  pointer-events: none;
}

/* Sales Invoice working form — totals strip + extras
   Toolbar: labeled lifecycle (Save/Submit/Delete) + icon tools (print/email/refresh). */
#fin-portal .chip.warn {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
#fin-portal .si-in-words {
  margin: 0.5rem 0 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.65rem 0.9rem;
}
#fin-portal .si-in-words .mod-kv-label {
  flex: 0 0 auto;
  min-width: 5rem;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
#fin-portal .si-in-words b,
#fin-portal .si-in-words [data-si-in-words] {
  flex: 1 1 12rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: 1.35;
  color: var(--accent, #1d4ed8);
}
#fin-portal .ff-table input.si-money,
#fin-portal .ff-fld input.ff-money,
#fin-portal input[data-money="1"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
#fin-portal .si-totals-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
@media (max-width: 800px) {
  #fin-portal .si-totals-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#fin-portal .si-tot {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  box-shadow: var(--shadow-soft);
}
#fin-portal .si-tot b {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}
#fin-portal .si-extra-sec { margin-top: 1.25rem; }
#fin-portal .si-body-btn { margin: 0.35rem 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE DETAIL SYSTEM (mod-*) — single criteria for ALL detail views
   ─────────────────────────────────────────────────────────────────────────
   Use for Receipt, Owner Info, generic DocType forms, allocate modals, etc.
   Buttons: only .btn / .btn.ghost / .btn.primary / .btn.tiny (no gold/danger)
   Tables:  .mod-table-shell > .mod-table-scroll > table.ledger.mod-table
   Fields:  .mod-kv-grid > .mod-kv > .mod-kv-label + .mod-kv-value
   Alerts:  .mod-callout.warn | .ok | .info
   Chrome:  .mod-toolbar · .mod-tabs · .mod-panel · .mod-sec · .mod-menu
   ═══════════════════════════════════════════════════════════════════════════ */

/* —— Toolbar (back · doc name · status · secondary actions · primary CTA) —— */
#fin-portal .mod-detail { max-width: 100%; }
#fin-portal .mod-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.85rem;
}
#fin-portal .mod-toolbar-left,
#fin-portal .mod-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}
#fin-portal .mod-doc-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: #111827;
  letter-spacing: -0.01em;
}
#fin-portal .mod-doc-name.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #374151;
}

/* —— Dropdown menu (Actions ▾) —— */
#fin-portal .mod-menu-wrap { position: relative; }
#fin-portal .mod-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 40;
  min-width: 12.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-soft);
  padding: 0.35rem;
}
#fin-portal .mod-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  color: #111827;
}
#fin-portal .mod-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
#fin-portal .mod-menu-empty { padding: 0.5rem 0.75rem; font-size: var(--fs-xs); }

/* —— Callouts (status / next-step banners) —— */
#fin-portal .mod-callout {
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.95rem;
  border-radius: 0.85rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
  border: 1px solid var(--line-soft);
  background: #f8fafc;
  color: #374151;
}
#fin-portal .mod-callout strong { font-weight: var(--fw-bold); }
#fin-portal .mod-callout.warn {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
#fin-portal .mod-callout.ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
#fin-portal .mod-callout.info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
/* Offer Letter status banner — same Desk-parity tones as .chip.ol-st-*
   above, in .mod-callout's bordered-panel shape rather than a pill. */
#fin-portal .mod-callout.ol-banner-draft {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
#fin-portal .mod-callout.ol-banner-submitted {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
#fin-portal .mod-callout.ol-banner-approved {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
#fin-portal .mod-callout.ol-banner-rejected {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
#fin-portal .mod-callout.ol-banner-cancelled {
  background: #fefce8;
  border-color: #fde047;
  color: #854d0e;
}

/* —— Tabs —— */
#fin-portal .mod-tabs {
  display: flex;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-soft);
}
#fin-portal .mod-tab {
  border: 0;
  background: transparent;
  padding: 0.6rem 1.05rem;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0.5rem 0.5rem 0 0;
}
#fin-portal .mod-tab:hover { color: #374151; background: rgba(255, 255, 255, 0.45); }
#fin-portal .mod-tab.on {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}
#fin-portal .mod-tab .mod-tab-n {
  font-weight: var(--fw-medium);
  opacity: 0.75;
  font-size: 0.8em;
}

/* —— Sub Contractor hub —— */
#fin-portal .supplier-view .sup-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
}
#fin-portal .supplier-view .sup-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#fin-portal .supplier-view .sup-co-filter select {
  max-width: 14rem;
}
#fin-portal .supplier-view .mod-tabs {
  flex-wrap: wrap;
  gap: 0.1rem;
}
@media (min-width: 1400px) {
  #fin-portal .kpi-strip-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* —— Body card + sections —— */
#fin-portal .mod-body {
  padding: 1.15rem 1.25rem 1.35rem;
}
#fin-portal .mod-panel[hidden] { display: none !important; }
#fin-portal .mod-sec {
  margin-bottom: 1.35rem;
}
#fin-portal .mod-sec:last-child { margin-bottom: 0; }
#fin-portal .mod-sec-title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
  margin-bottom: 0.7rem;
}
#fin-portal .mod-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 0 0 0.7rem;
  line-height: 1.45;
}
#fin-portal .mod-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
#fin-portal .mod-cta-row .mod-hint { margin: 0; flex: 1 1 14rem; }

/* —— Read-only key/value grid (replaces green Desk field boxes) —— */
#fin-portal .mod-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
#fin-portal .mod-kv {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}
#fin-portal .mod-kv-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
#fin-portal .mod-kv-value {
  display: block;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line-soft);
  border-radius: 0.75rem;
  padding: 0.55rem 0.75rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: #111827;
  min-height: 2.4rem;
  line-height: 1.35;
  word-break: break-word;
}
#fin-portal .mod-sales-note {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-top: 0.75rem;
}
#fin-portal .mod-sales-note p {
  margin: 0;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent, #1d4ed8);
  border-radius: 0.75rem;
  padding: 0.55rem 0.75rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
#fin-portal .mod-kv-value.linkish,
#fin-portal .linklike {
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
#fin-portal .linklike:hover { text-decoration: underline; }

/* —— Table shell (same criteria as list ledgers, bordered card) —— */
#fin-portal .mod-table-shell {
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
#fin-portal .mod-table-scroll {
  overflow: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
#fin-portal table.mod-table {
  width: 100%;
  margin: 0;
}
#fin-portal table.mod-table thead th {
  background: #f8fafc !important;
}
#fin-portal table.mod-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}
#fin-portal table.mod-table tbody tr:hover td {
  background: rgba(219, 234, 254, 0.4);
}
#fin-portal table.mod-table .col-idx {
  width: 3rem;
  text-align: center;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
#fin-portal table.mod-table th.col-idx { text-align: center; }
#fin-portal table.mod-table .col-inv {
  white-space: pre-wrap;
  font-size: var(--fs-xs);
  color: #4b5563;
  max-width: 22rem;
}
#fin-portal table.mod-table td.empty {
  text-align: center;
  color: var(--muted-2);
  padding: 1.5rem 1rem;
  background: #fafbfc !important;
}
#fin-portal table.mod-table .mod-foot-label {
  text-align: right;
  color: var(--muted);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-bold);
}
#fin-portal table.mod-table .mod-foot-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-style: italic;
  font-weight: var(--fw-medium);
}
#fin-portal table.col-rcpt-eqri { min-width: 52rem; }
#fin-portal table.col-rcpt-dojp { min-width: 44rem; }

/* Shared aliases for legacy class names still referenced in older snippets */
#fin-portal .sect-title { /* = mod-sec-title */
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
  margin-bottom: 0.7rem;
}
html[data-fin-theme="dark"] #fin-portal .sect-title {
  color: var(--muted);
}

/* ═══ Modals live on document.body (outside #fin-portal) — same criteria ═══ */
/* Callouts inside modals (shared with #fin-portal .mod-callout) */
.rc-modal-overlay .mod-callout {
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.95rem;
  border-radius: 0.85rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
  border: 1px solid rgba(107, 114, 128, 0.16);
  background: #f8fafc;
  color: #374151;
}
.rc-modal-overlay .mod-callout.warn {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
.rc-modal-overlay .mod-callout.ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.rc-modal-overlay .mod-callout.info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.rc-modal-overlay .mod-table-shell {
  border: 1px solid rgba(107, 114, 128, 0.22);
  border-radius: 0.85rem;
  background: #fff;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.rc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
}
.rc-modal-overlay[hidden] { display: none !important; }
.rc-modal {
  width: min(56rem, 100%);
  max-height: min(90vh, 52rem);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 25px 60px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.rc-modal-wide { width: min(68rem, 100%); }
.rc-modal-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.35rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(107, 114, 128, 0.14);
}
.rc-modal-hd .fp-form-kicker {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1d4ed8;
  margin-bottom: 0.2rem;
}
.rc-modal-hd h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin: 0;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.rc-modal-hd .rc-note {
  margin: 0.3rem 0 0;
  font-size: var(--fs-xs);
  color: #6b7280;
}
.rc-modal-hd .blade-x {
  width: 2.15rem;
  height: 2.15rem;
  border: 0;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.rc-modal-hd .blade-x:hover { background: #e5e7eb; color: #111827; }
.rc-modal-body {
  flex: 1;
  overflow: auto;
  padding: 1.15rem 1.35rem 1.25rem;
}
.rc-modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.9rem 1.35rem;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(107, 114, 128, 0.14);
}
.rc-modal-ft .btn,
.rc-modal-overlay .btn {
  border-radius: 0.85rem;
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  border: 0;
  font-family: inherit;
}
.rc-modal-ft .btn.ghost,
.rc-modal-overlay .btn.ghost {
  background: transparent;
  color: #374151;
  border: 1px solid rgba(107, 114, 128, 0.28);
}
.rc-modal-ft .btn.primary,
.rc-modal-overlay .btn.primary {
  background: #1d4ed8;
  color: #fff;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.28);
}
.rc-modal-overlay .btn.tiny {
  padding: 0.3rem 0.65rem;
  font-size: var(--fs-xs);
  border-radius: 0.65rem;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid rgba(107, 114, 128, 0.2);
}
.rc-modal-overlay .btn.tiny.ghost { background: transparent; }

/* Rate bar — same quiet surface language as mod-kv / filter-bar */
.rc-modal-overlay .rc-rate-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.95rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(107, 114, 128, 0.2);
  border-radius: 0.9rem;
}
.rc-modal-overlay .rc-rate-bar label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.rc-modal-overlay .rc-rate-bar input {
  width: 7.5rem;
  border: 1px solid rgba(107, 114, 128, 0.28);
  border-radius: 0.65rem;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-weight: var(--fw-semibold);
  background: #fff;
  color: #111827;
}
.rc-modal-overlay .rc-rate-bar input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
  border-color: transparent;
}
.rc-modal-overlay .rc-rate-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.55rem;
  font-weight: var(--fw-semibold);
  color: #1e40af;
  font-size: var(--fs-xs);
}

/* Bank payment cards */
.rc-modal-overlay .rc-bank-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.rc-modal-overlay .rc-bank-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
  border: 1px solid rgba(107, 114, 128, 0.2);
  background: #fff;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.rc-modal-overlay .rc-bank-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 8px 22px rgba(29, 78, 216, 0.1);
  transform: translateY(-1px);
}
.rc-modal-overlay .rc-bank-card.on {
  border-color: #1d4ed8;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 55%);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18), 0 8px 22px rgba(29, 78, 216, 0.12);
}
.rc-modal-overlay .rc-bc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
}
.rc-modal-overlay .rc-bc-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #1e3a8a;
  word-break: break-all;
  line-height: 1.3;
}
.rc-modal-overlay .rc-bc-st {
  flex-shrink: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
}
.rc-modal-overlay .rc-bc-st.st-none { background: #f3f4f6; color: #6b7280; }
.rc-modal-overlay .rc-bc-st.st-partial { background: #fef3c7; color: #92400e; }
.rc-modal-overlay .rc-bc-st.st-complete { background: #dcfce7; color: #166534; }
.rc-modal-overlay .rc-bc-client {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: #0f172a;
  line-height: 1.3;
}
.rc-modal-overlay .rc-bc-unit {
  font-size: var(--fs-xs);
  color: #6b7280;
  margin-top: 0.15rem;
}
.rc-modal-overlay .rc-bc-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(107, 114, 128, 0.2);
}
.rc-modal-overlay .rc-bc-foot .lbl {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
}
.rc-modal-overlay .rc-bc-amt {
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #0f172a;
}

/* Invoice panel */
.rc-modal-overlay .rc-inv-panel {
  border: 1px solid rgba(107, 114, 128, 0.16);
  border-radius: 1rem;
  padding: 1rem 1.05rem;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 40%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.rc-modal-overlay .rc-inv-panel .empty {
  padding: 1.5rem;
  text-align: center;
  color: #6b7280;
  font-size: var(--fs-sm);
}
.rc-modal-overlay .rc-inv-panel .empty.ok {
  color: #15803d;
  font-weight: var(--fw-semibold);
}
.rc-modal-overlay .mg-fin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.rc-modal-overlay .mg-fin-item {
  background: #fff;
  border: 1px solid rgba(107, 114, 128, 0.14);
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.rc-modal-overlay .mg-fin-item .l {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9ca3af;
  margin-bottom: 0.2rem;
}
.rc-modal-overlay .mg-fin-item .v {
  font-weight: var(--fw-heavy);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}
.rc-modal-overlay .mg-fin-item .v.due { color: #b91c1c; }
.rc-modal-overlay .mg-fin-item .v.paid { color: #15803d; }
.rc-modal-overlay .summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border-radius: 0.85rem;
  border: 1px solid rgba(107, 114, 128, 0.14);
}
.rc-modal-overlay .summary-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9ca3af;
}
.rc-modal-overlay .summary-value {
  font-weight: var(--fw-heavy);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  margin-top: 0.1rem;
}
.rc-modal-overlay .mg-autobar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  font-size: var(--fs-xs);
  color: #6b7280;
}
.rc-modal-overlay .mg-badge {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
}
.rc-modal-overlay .mg-badge.rent { background: #e0f2fe; color: #0369a1; }
.rc-modal-overlay .mg-badge.mi { background: #f3e8ff; color: #7e22ce; }
.rc-modal-overlay .ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
}
.rc-modal-overlay .ledger th {
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 0.55rem 0.65rem;
  background: #f8fafc;
  border-bottom: 1px solid rgba(107, 114, 128, 0.14);
}
.rc-modal-overlay .ledger td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(107, 114, 128, 0.1);
  vertical-align: middle;
}
.rc-modal-overlay .ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.rc-modal-overlay .rc-amt {
  width: 7.25rem;
  text-align: right;
  border: 1px solid rgba(107, 114, 128, 0.28);
  border-radius: 0.55rem;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-weight: var(--fw-semibold);
  background: #fff;
}
.rc-modal-overlay .rc-amt:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
  border-color: transparent;
}
.rc-modal-overlay .chip {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  background: #e5e7eb;
  color: #374151;
}
.rc-modal-overlay .chip.overdue { background: #fecaca; color: #991b1b; }
.rc-modal-overlay .chip.ok { background: #bbf7d0; color: #14532d; }
.rc-modal-overlay .chip.plain { background: #e5e7eb; color: #4b5563; }
.rc-modal-overlay .sub-line {
  font-size: var(--fs-2xs);
  color: #9ca3af;
  margin-top: 0.12rem;
  font-weight: var(--fw-regular);
}
.rc-modal-overlay .sub-line .rc-item-label {
  color: #b45309;
  font-weight: var(--fw-semibold, 600);
  background: #fef3c7;
  border-radius: 4px;
  padding: 0.02rem 0.35rem;
}
.rc-modal-overlay .fin-scroll { overflow: auto; max-width: 100%; }
.rc-modal-overlay .empty.err-row { color: #b91c1c; }

#fin-portal .col-table-card { padding: 0.85rem 1rem 1rem; margin-bottom: 0.85rem; }
#fin-portal .rc-amt {
  width: 7rem;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.3rem 0.45rem;
  font: inherit;
}

/* Doc blade overlay */
#fin-portal .blade-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
}
#fin-portal .blade-overlay[hidden] { display: none !important; }
#fin-portal .blade-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#fin-portal .blade-panel {
  position: relative;
  z-index: 1;
  width: min(42rem, 100vw);
  max-width: 100%;
  height: 100%;
  background: #f8fafc;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  animation: finBladeIn 0.22s ease-out;
}
@keyframes finBladeIn {
  from { transform: translateX(12px); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}
#fin-portal .blade-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 1.15rem 0.95rem;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
}
#fin-portal .blade-head > div:first-child { flex: 1; min-width: 0; }
#fin-portal .blade-kicker {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}
#fin-portal .blade-head h2 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: #111827;
  letter-spacing: -0.02em;
  word-break: break-all;
  line-height: 1.25;
}
#fin-portal .blade-sub {
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.35;
}
#fin-portal .blade-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
  max-width: 14rem;
}
#fin-portal .blade-actions .btn {
  font-size: var(--fs-xs);
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
}
#fin-portal .blade-x {
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
#fin-portal .blade-x:hover { background: #e5e7eb; color: #111827; }
#fin-portal .blade-body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.15rem 1.5rem;
}
#fin-portal .blade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}
@media (max-width: 520px) {
  #fin-portal .blade-grid { grid-template-columns: 1fr; }
}
#fin-portal .blade-kv {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line-soft);
  border-radius: 0.85rem;
  padding: 0.65rem 0.8rem;
}
#fin-portal .blade-kv span {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
#fin-portal .blade-kv b {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #111827;
  word-break: break-word;
}
#fin-portal .blade-h {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #374151;
  margin: 1rem 0 0.5rem;
}
#fin-portal .blade-body .fin-scroll {
  margin-bottom: 0.5rem;
  border-radius: 0.85rem;
  border: 1px solid var(--line-soft);
  background: #fff;
}

/* Bars */
#fin-portal .bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.55rem 0;
}
#fin-portal .bar-row .bl {
  flex: 0 0 7.5rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: var(--fw-medium);
}
#fin-portal .bar-track {
  flex: 1;
  height: 0.55rem;
  background: rgba(229, 231, 235, 0.85);
  border-radius: 999px;
  overflow: hidden;
}
#fin-portal .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 999px;
}
#fin-portal .bar-fill.gold {
  background: linear-gradient(90deg, #34d399, #059669);
}
#fin-portal .bar-row .bv {
  flex: 0 0 7.5rem;
  text-align: right;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* Gated / empty */
#fin-portal .gated {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.4);
  padding: 2rem 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
}
#fin-portal .gated .g-badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-bg);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.75rem;
  font-weight: var(--fw-semibold);
}
#fin-portal .gated h3 {
  font-size: var(--fs-md);
  color: #111827;
  margin-bottom: 0.4rem;
  font-weight: var(--fw-semibold);
}
#fin-portal .gated p {
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 34rem;
  margin: 0 auto;
}
#fin-portal .gated code {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  background: #f3f4f6;
  border-radius: 0.35rem;
  padding: 0.05rem 0.35rem;
}
#fin-portal .empty {
  padding: 1.75rem;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Branded loading state — the M-Group traffic-light mark (same 3 dots as
   the sidebar brand) breathing behind a soft blurred glow, in place of a
   bare "Loading…" text string. Unscoped (not #fin-portal-only) so it also
   works inside dialogs mounted on document.body. */
.fin-loader,
#fin-portal .fin-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 2.75rem 1.5rem;
  text-align: center;
}
.fin-loader-mark {
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fin-loader-mark::before {
  content: none;
  display: none;
  position: absolute;
  inset: -0.4rem;
  border-radius: 999px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent, #1d4ed8) 32%, transparent) 0%,
    transparent 70%);
  filter: blur(9px);
  animation: finLoaderGlow 1.8s ease-in-out infinite;
}
.fin-loader-dots {
  position: relative;
  display: flex;
  gap: 0.4rem;
  z-index: 1;
}
.fin-loader-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  animation: finLoaderBounce 1.2s ease-in-out infinite;
}
.fin-loader-dot:nth-child(1) { background: #f96057; animation-delay: 0s; }
.fin-loader-dot:nth-child(2) { background: #f8ce52; animation-delay: 0.15s; }
.fin-loader-dot:nth-child(3) { background: #5fcf65; animation-delay: 0.3s; }
.fin-loader-word {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--ink, #0f172a);
  letter-spacing: -0.01em;
}
.fin-loader-word span {
  font-weight: var(--fw-medium);
  color: var(--muted, #64748b);
}
.fin-loader-msg {
  font-size: var(--fs-xs);
  color: var(--muted, #64748b);
}
/* Compact variant for list-view table cells / inline panels */
.fin-loader-compact {
  padding: 1.1rem 0.75rem;
  gap: 0.4rem;
}
.fin-loader-compact .fin-loader-mark {
  width: 2.6rem;
  height: 2.6rem;
}
.fin-loader-compact .fin-loader-dot {
  width: 0.5rem;
  height: 0.5rem;
}
.fin-loader-compact .fin-loader-word {
  font-size: var(--fs-sm);
}
.fin-loader-compact .fin-loader-msg {
  font-size: var(--fs-2xs);
}
#fin-portal td.fin-loader-cell,
td.fin-loader-cell {
  padding: 1.25rem 0.5rem !important;
  text-align: center;
  vertical-align: middle;
  background: transparent;
}
#fin-portal tr.fin-loader-row:hover td,
tr.fin-loader-row:hover td {
  background: transparent !important;
}
@keyframes finLoaderBounce {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.65; }
  30% { transform: translateY(-0.45rem) scale(1.12); opacity: 1; }
}
@keyframes finLoaderGlow {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .fin-loader-dot, .fin-loader-mark::before { animation: none; }
}

/* Analytics cards */
#fin-portal .an-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
#fin-portal .an-card {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-soft);
}
#fin-portal .an-ref {
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}
#fin-portal .an-q {
  font-size: var(--fs-base);
  color: #111827;
  margin: 0.35rem 0 0.75rem;
  line-height: 1.35;
  font-weight: var(--fw-semibold);
}
#fin-portal .an-fig {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #111827;
  border-bottom: 0;
  display: inline-block;
  padding-bottom: 0;
}
#fin-portal .an-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 0.65rem;
}
#fin-portal .an-wait { opacity: 0.7; }
#fin-portal .an-wait .an-fig {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: var(--fw-medium);
}

/* Reconciliation dropzone */
#fin-portal .drop {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  text-align: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.45);
}
#fin-portal .drop.on {
  border-color: #3b82f6;
  background: rgba(219, 234, 254, 0.55);
}
#fin-portal .rec-sum {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  margin: 1rem 0 0.4rem;
  color: #374151;
  font-weight: var(--fw-medium);
}

/* Mobile drawer */
@media (max-width: 900px) {
  #fin-portal { padding: 0; }
  #fin-portal .fin-shell {
    border-radius: 0;
    min-height: 100vh;
    background: rgba(255, 255, 255, 0.55);
  }
  #fin-portal .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    max-height: 100vh;
    background: #f3f4f6;
    transform: translateX(-105%);
    box-shadow: none;
    border-radius: 0;
    width: 16.5rem;
    flex-basis: 16.5rem;
    max-width: 85vw;
  }
  #fin-portal .sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.18);
  }
  #fin-portal .nav-item.active {
    border-right-color: transparent !important;
    border-left: 3px solid #22c55e !important;
    padding-left: calc(1.05rem - 3px) !important;
  }
  #fin-portal .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  #fin-portal .topbar,
  #fin-portal .banner,
  #fin-portal .content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #fin-portal .banner { margin-left: 1rem; margin-right: 1rem; }
  #fin-portal .role-name { display: none; }
  #fin-portal .sb-toggle { display: none !important; }
}

/* Credit Note · Incl VAT — proper square checkbox + Yes/No (not a bare switch) */
#fin-portal .cn-vat-cell {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#fin-portal .cn-vat-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #374151;
}
#fin-portal .cn-vat-input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 1.05rem;
  width: 1.05rem !important;
  min-width: 1.05rem;
  max-width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  padding: 0 !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 0.28rem !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
}
#fin-portal .cn-vat-input:checked {
  background: #2563eb !important;
  border-color: #2563eb !important;
}
#fin-portal .cn-vat-input:checked::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.06rem;
  width: 0.28rem;
  height: 0.5rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#fin-portal .cn-vat-text {
  min-width: 1.6rem;
  text-align: left;
  color: #4b5563;
}
#fin-portal .cn-inv-table td.muted,
#fin-portal .cn-inv-table .muted {
  color: #6b7280;
}
#fin-portal .cn-ro-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.2rem 0 !important;
  width: 100%;
  color: #374151;
  font-size: inherit;
}

/* Doc blade / Gated / Analytics / Reconciliation dropzone / Credit Note VAT — dark */
html[data-fin-theme="dark"] #fin-portal .blade-panel {
  background: var(--dm-app);
  border-left-color: var(--dm-border);
}
html[data-fin-theme="dark"] #fin-portal .blade-head {
  background: var(--dm-elevated);
  border-bottom-color: var(--dm-border);
}
html[data-fin-theme="dark"] #fin-portal .blade-head h2 {
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .blade-x {
  background: var(--dm-hover);
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .blade-x:hover {
  background: var(--dm-border);
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .blade-kv {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] #fin-portal .blade-kv b {
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .blade-h {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .blade-body .fin-scroll {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] #fin-portal .bar-track {
  background: var(--dm-hover);
}
html[data-fin-theme="dark"] #fin-portal .gated {
  background: var(--dm-elevated);
  border-color: var(--dm-border);
}
html[data-fin-theme="dark"] #fin-portal .gated h3 {
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .gated code {
  background: var(--dm-hover);
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .an-q,
html[data-fin-theme="dark"] #fin-portal .an-fig {
  color: var(--ink);
}
html[data-fin-theme="dark"] #fin-portal .drop {
  background: var(--dm-elevated);
}
html[data-fin-theme="dark"] #fin-portal .drop.on {
  background: var(--accent-soft);
  border-color: var(--accent);
}
html[data-fin-theme="dark"] #fin-portal .rec-sum {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .cn-vat-label {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .cn-vat-input {
  background: var(--dm-input) !important;
  border-color: var(--dm-border) !important;
}
html[data-fin-theme="dark"] #fin-portal .cn-vat-text {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .cn-inv-table td.muted,
html[data-fin-theme="dark"] #fin-portal .cn-inv-table .muted {
  color: var(--muted);
}
html[data-fin-theme="dark"] #fin-portal .cn-ro-input {
  color: var(--ink);
}

/* ─── User Settings modal (professional account panel) ─── */
.fin-settings-overlay{
  display:none;align-items:center;justify-content:center;z-index:12000;
  padding:1.25rem;background:rgba(15,23,42,.45);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.fin-settings-overlay.open{display:flex}
.fin-settings-modal{
  max-width:min(720px,96vw);width:100%;max-height:min(88vh,820px);
  overflow:hidden;padding:0!important;border-radius:1rem;
  background:var(--card-solid,#fff);border:1px solid var(--line);
  box-shadow:0 24px 64px rgba(15,23,42,.18);
}
.fin-set-shell{display:flex;flex-direction:column;max-height:min(88vh,820px)}
.fin-set-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding:1.25rem 1.35rem 1rem;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(248,250,252,.95),#fff);
  flex:0 0 auto;
}
.fin-set-id{display:flex;align-items:center;gap:.85rem;min-width:0}
.fin-set-av{
  width:2.75rem;height:2.75rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft,#dbeafe);color:var(--accent,#1d4ed8);
  font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:.02em;flex:0 0 auto;
}
.fin-set-kicker{
  margin:0;font-size:var(--fs-2xs);font-weight:var(--fw-semibold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.fin-set-title{
  margin:.1rem 0 0;font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:-.02em;
  color:var(--ink);line-height:var(--lh-tight);
}
.fin-set-sub{margin:.15rem 0 0;font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-tight)}
.fin-set-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.fin-set-close{
  appearance:none;border:1px solid var(--line);background:#fff;color:var(--muted);
  width:2rem;height:2rem;border-radius:999px;font-size: var(--fs-lg);line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.fin-set-close:hover{background:#f8fafc;color:var(--ink)}
.fin-set-tabs{
  display:flex;gap:.25rem;flex-wrap:nowrap;overflow-x:auto;padding:.65rem 1.1rem .35rem;
  border-bottom:1px solid var(--line-soft);background:#fff;flex:0 0 auto;
  scrollbar-width:thin;
}
.fin-set-tab{
  appearance:none;border:none;background:transparent;color:var(--muted);
  padding:.5rem .85rem;font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  cursor:pointer;border-radius:999px;white-space:nowrap;flex:0 0 auto;
}
.fin-set-tab:hover{background:#f1f5f9;color:var(--ink)}
.fin-set-tab.on{background:var(--accent-soft,#dbeafe);color:var(--accent,#1d4ed8);font-weight:var(--fw-semibold)}
.fin-set-body{padding:1.15rem 1.35rem 1.4rem;overflow:auto;flex:1 1 auto}
.fin-set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem}
@media (max-width:560px){.fin-set-grid{grid-template-columns:1fr}}
.fin-set-field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.fin-set-label{
  font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink);letter-spacing:-.01em;
}
.fin-set-input,.fin-set-field input,.fin-set-field textarea,.fin-set-pane .field input,.fin-set-pane .field textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:.65rem;
  background:#fff;padding:.55rem .7rem;font:inherit;font-size:var(--fs-md);color:var(--ink);
  min-height:2.4rem;
}
.fin-set-input:focus,.fin-set-field input:focus,.fin-set-field textarea:focus{
  outline:none;border-color:transparent;box-shadow:0 0 0 2px rgba(37,99,235,.28);
}
.fin-set-input[readonly]{background:#f8fafc;color:var(--muted)}
.fin-set-row{margin-top:.85rem}
.fin-set-chk{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);cursor:pointer;margin-top:.35rem;color:var(--ink)}
.fin-set-role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.55rem 1rem;margin-top:.55rem}
.fin-set-role-item{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--ink)}
.fin-set-role-item input{cursor:default;accent-color:var(--accent)}
.fin-set-pw{display:flex;gap:.45rem;align-items:center}
.fin-set-pw input{flex:1}
.fin-set-pane .mod-hint,.fin-set-pane .mod-sec-title{
  font-size:var(--fs-xs);color:var(--muted);margin-bottom:.75rem;line-height:var(--lh-body);
}
.fin-set-pane .mod-sec-title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink);margin-top:.25rem}
html[data-fin-theme="dark"] .fin-settings-modal{background:#111113;border-color:rgba(255,255,255,.1)}
html[data-fin-theme="dark"] .fin-set-head{
  background:linear-gradient(180deg,#141416,#111113);border-color:rgba(255,255,255,.08);
}
html[data-fin-theme="dark"] .fin-set-tabs,html[data-fin-theme="dark"] .fin-set-body{background:#111113}
html[data-fin-theme="dark"] .fin-set-tab:hover{background:#1a1a1c}
html[data-fin-theme="dark"] .fin-set-tab.on{background:rgba(59,130,246,.18);color:#93c5fd}
html[data-fin-theme="dark"] .fin-set-input,
html[data-fin-theme="dark"] .fin-set-field input,
html[data-fin-theme="dark"] .fin-set-field textarea,
html[data-fin-theme="dark"] .fin-set-close{background:#0a0a0a;border-color:rgba(255,255,255,.12);color:#fafafa}
html[data-fin-theme="dark"] .fin-set-input[readonly]{background:#0a0a0a;color:#a1a1aa}
html[data-fin-theme="dark"] .fin-set-av{background:rgba(59,130,246,.2);color:#93c5fd}
html[data-fin-theme="dark"] .fin-set-close:hover{background:#1a1a1c;color:#fafafa}

/* ─── List pagination bar (30 / page) ─── */
.fin-pager{
  display:flex;justify-content:flex-end;padding:.65rem .85rem .75rem;
  border-top:1px solid var(--line-soft);background:rgba(248,250,252,.65);
}
.fin-pager[hidden]{display:none!important}
.fin-pager-inner{
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;justify-content:flex-end;
  width:100%;
}
.fin-pager-btn{
  display:inline-flex!important;align-items:center;gap:.35rem;
  font-size:var(--fs-sm)!important;font-weight:var(--fw-medium)!important;
}
.fin-pager-btn:disabled{opacity:.4;cursor:not-allowed}
.fin-pager-meta{
  font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.fin-pager-range{font-weight:var(--fw-semibold);color:var(--ink)}
html[data-fin-theme="dark"] .fin-pager{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.08)}
html[data-fin-theme="dark"] .fin-pager-range{color:#fafafa}

/* ─── Global typography polish (lists / nav / tables) ─── */
#fin-portal .nav-item .n-lbl,
#fin-portal .ledger td,
#fin-portal .ledger th,
#fin-portal .fin-sum h3,
#fin-portal .filter-bar label,
#fin-portal .kpi .k-label,
#fin-portal .kpi .k-sub,
#fin-portal .btn{
  font-family:var(--f-body);
}
#fin-portal .ledger{
  font-size:var(--fs-base);
}
#fin-portal .ledger th{
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  letter-spacing:-.01em;
  text-transform:none;
}
#fin-portal .ledger td{
  font-size:var(--fs-base);
  line-height:var(--lh-tight);
}
#fin-portal .ledger td.num,
#fin-portal .ledger th.num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  font-weight:var(--fw-medium);
}
#fin-portal .kpi .k-fig{
  font-size:var(--fs-2xl, 1.5rem);
  font-weight:var(--fw-bold, 700);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color: #111827;
}
#fin-portal .kpi .k-fig.cr { color: var(--credit, #15803d) !important; }
#fin-portal .kpi .k-fig.dr { color: var(--debit, #b91c1c) !important; }
#fin-portal .kpi .k-label{
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  letter-spacing:-.01em;
  text-transform:none;
}
#fin-portal .kpi .k-sub{
  font-size:var(--fs-2xs);
  color:var(--muted);
}
#fin-portal .fin-sum h3{
  font-size:var(--fs-md);
  font-weight:var(--fw-semibold);
  letter-spacing:-.015em;
}
#fin-portal .fin-sub{
  font-size:var(--fs-xs)!important;
}
#fin-portal .nav-item .n-lbl{
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  line-height:1.25;
  white-space:normal;
}
/* Full labels (e.g. Commission Application Form) stay readable in the rail */
#fin-portal .sidebar.sb-collapsed .nav-item .n-lbl{
  white-space:nowrap;
}
#fin-portal .nav-group{
  font-size:var(--fs-2xs);
  font-weight:var(--fw-semibold);
  letter-spacing:.06em;
}
#fin-portal .tb-title{
  font-size:var(--fs-lg)!important;
  font-weight:var(--fw-semibold);
  letter-spacing:-.02em;
}
#fin-portal .tb-eyebrow{
  font-size:var(--fs-2xs)!important;
  letter-spacing:.06em;
}
#fin-portal .filter-bar label{
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  text-transform:none;
  letter-spacing:-.01em;
}
#fin-portal .filter-bar input,
#fin-portal .filter-bar select{
  font-size:var(--fs-sm);
}
#fin-portal .ff-fld input,
#fin-portal .ff-fld select,
#fin-portal .ff-fld textarea{
  font-size:var(--fs-md)!important;
}

/* ─── Owner / Tenant Info detail ─── */
.ot-kpi{margin:.65rem 0 .85rem}
.ot-unit-stack{display:flex;flex-wrap:wrap;gap:.3rem}
.ot-unit-chip{font-size:var(--fs-xs) !important}
.ot-tool{padding:.35rem !important;min-width:auto}
html[data-fin-boot-view="tenant_info"] #fin-portal #view-tenant_info,
html[data-fin-boot-view="tenants_stt"] #fin-portal #view-tenant_info{display:block !important;animation:none}

/* ── Quick actions (Owner / Tenant invoices) ─────────────────────── */
#fin-portal .fin-quick-actions{
  display:flex;align-items:center;gap:0.45rem;padding:0.5rem 0;
}
#fin-portal .fin-quick-hint{
  font-size: var(--fs-xs);color:var(--muted,#64748b);margin-left:.15rem;
}
#fin-portal .fin-qa-title{
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-right:0.4rem;
}

/* ── Pay menu — FAR RIGHT of filter bar (Owner / Tenant invoices) ──
 * Actions cluster keeps Refresh + Pay together on the right so they
 * never wrap to opposite ends of the bar. */
#fin-portal .filter-bar{
  overflow: visible !important;
}
/* Right-side actions cluster: Refresh + Pay as one unit */
#fin-portal .filter-bar > .fin-filter-actions{
  order: 100 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  display: inline-flex !important;
  align-items: flex-end;
  align-self: flex-end;
  gap: 0.45rem;
  z-index: 40;
  position: relative;
}
/* Ghost Refresh inside the cluster — no solo right-push */
#fin-portal .filter-bar > .fin-filter-actions > .btn.ghost,
#fin-portal .filter-bar:has(> .fin-filter-actions) > .btn.ghost,
#fin-portal .filter-bar:has(> .fin-pay-menu) > .btn.ghost{
  margin-left: 0 !important;
  order: 90 !important;
}
#fin-portal .filter-bar > .fin-filter-actions > .fin-pay-menu,
#fin-portal .filter-bar > .fin-pay-menu{
  order: 100 !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important; /* cluster owns the auto margin */
  margin-right: 0 !important;
  position: relative;
  display: inline-flex !important;
  align-items: flex-end;
  align-self: flex-end;
  z-index: 40;
}
/* Solo pay menu (no cluster yet) still pins far right */
#fin-portal .filter-bar > .fin-pay-menu{
  margin-left: auto !important;
}
#fin-portal .filter-bar > .fin-filter-actions > .fin-pay-menu{
  margin-left: 0 !important;
}
#fin-portal .fin-pay-menu-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 2.55rem;
  height: 2.45rem;
  padding: 0 .75rem;
  border-radius: 10px;
  border: 1px solid rgba(99, 102, 241, .35);
  background: linear-gradient(180deg, rgba(99, 102, 241, .12), rgba(99, 102, 241, .05));
  color: var(--accent, #4f46e5);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
}
#fin-portal .fin-pay-menu-btn:hover,
#fin-portal .fin-pay-menu.is-open .fin-pay-menu-btn{
  border-color: rgba(99, 102, 241, .55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
  background: linear-gradient(180deg, rgba(99, 102, 241, .18), rgba(99, 102, 241, .08));
  color: var(--accent, #4f46e5);
}
#fin-portal .fin-pay-menu-btn svg{ flex: 0 0 auto; display: block; }
#fin-portal .fin-pay-menu-btn .fin-pay-lbl{ letter-spacing: .01em; }
#fin-portal .fin-pay-menu-drop{
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 6px);
  z-index: 120;
  min-width: 16rem;
  padding: .4rem;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(15, 23, 42, .12));
  background: var(--card, #fff);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .16);
  display: none;
}
#fin-portal .fin-pay-menu.is-open .fin-pay-menu-drop{ display: block; }
#fin-portal .fin-pay-menu-item{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  width: 100%;
  padding: .55rem .65rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink, #0f172a);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
#fin-portal .fin-pay-menu-item:hover{ background: rgba(99, 102, 241, .09); }
#fin-portal .fin-pay-menu-item .fin-pay-item-ico{
  flex: 0 0 auto;
  margin-top: .12rem;
  color: var(--accent, #4f46e5);
  opacity: .95;
}
#fin-portal .fin-pay-menu-item .fin-pay-item-txt{ min-width: 0; }
#fin-portal .fin-pay-menu-item strong{ display: block; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
#fin-portal .fin-pay-menu-item span{
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted, #64748b);
  margin-top: .12rem;
  line-height: 1.35;
}
html[data-fin-theme="dark"] #fin-portal .fin-pay-menu-btn{
  background: linear-gradient(180deg, #818cf8, #6366f1);
  border-color: rgba(129, 140, 248, .5);
  color: #fff;
}
html[data-fin-theme="dark"] #fin-portal .fin-pay-menu-btn .fin-pay-lbl,
html[data-fin-theme="dark"] #fin-portal .fin-pay-menu-btn svg{
  color: #fff;
  stroke: #fff;
}
html[data-fin-theme="dark"] #fin-portal .fin-pay-menu-drop{
  background: #1e293b !important;
  border-color: rgba(148, 163, 184, .28);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
}
html[data-fin-theme="dark"] #fin-portal .fin-pay-menu-drop .fin-pay-menu-kicker{
  color: #94a3b8 !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-pay-menu-item{
  background: #0f172a;
  color: #f1f5f9 !important;
  border: 1px solid rgba(148, 163, 184, .1);
}
html[data-fin-theme="dark"] #fin-portal .fin-pay-menu-item:hover{
  background: #1e293b;
  border-color: rgba(129, 140, 248, .3);
}
/* Injected light CSS hardcodes #0f172a on strong — must override in dark */
html[data-fin-theme="dark"] #fin-portal .fin-pay-menu-item strong{
  color: #f8fafc !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-pay-menu-item span{
  color: #94a3b8 !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-pay-menu-item .fin-pay-item-ico{
  background: linear-gradient(180deg, #312e81, #1e1b4b);
  color: #a5b4fc;
  border-color: rgba(129, 140, 248, .3);
}

/* ── Pending Receipts onboarding guide ───────────────────────────── */
.fin-rcpt-guide-overlay{
  position:fixed;inset:0;z-index:10060;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(4px);
}
.fin-rcpt-guide-card{
  width:min(28rem,100%);
  padding:1.25rem 1.35rem 1.1rem;
  border-radius:14px;
  background:var(--card,#fff);
  border:1px solid var(--line,rgba(15,23,42,.1));
  box-shadow:0 18px 50px rgba(15,23,42,.22);
  color:var(--ink,#0f172a);
}
.fin-rcpt-guide-kicker{
  font-size: var(--fs-2xs);font-weight: var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent,#4f46e5);margin-bottom:.35rem;
}
.fin-rcpt-guide-card h2{
  margin:0 0 .65rem;font-size: var(--fs-lg);font-weight: var(--fw-bold);line-height:1.3;
}
.fin-rcpt-guide-card p{margin:0 0 .55rem;line-height:1.45;font-size: var(--fs-base)}
.fin-rcpt-guide-steps{margin:.35rem 0 .75rem 1.15rem;padding:0;line-height:1.5;font-size: var(--fs-sm)}
.fin-rcpt-guide-steps li{margin:.28rem 0}
.fin-rcpt-guide-note{opacity:.85;font-size: var(--fs-sm) !important}
.fin-rcpt-guide-actions{display:flex;justify-content:flex-end;margin-top:1rem;gap:.5rem}
html[data-fin-theme="dark"] .fin-rcpt-guide-overlay{background:rgba(0,0,0,.55)}
html[data-fin-theme="dark"] .fin-rcpt-guide-card{
  background:var(--card,#1e293b);border-color:rgba(148,163,184,.2);
}

/* PWA install toast */
/* Bottom right, clear of the toast host at bottom centre so an install
   banner and a "Vehicle collected" toast never stack on top of each other. */
.fin-install-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  left: auto;
  max-width: min(24rem, calc(100vw - 3rem));
  transform: translateY(160%);
  z-index: 9999;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.fin-install-toast.show { transform: translateY(0); }
@media (max-width: 40rem) {
  /* On a phone there is no room to sit beside anything; span the width. */
  .fin-install-toast { right: 0.75rem; left: 0.75rem; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fin-install-toast { transition: none; }
}
.fin-install-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #1e293b;
  color: #f1f5f9;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  font-size: var(--fs-sm);
}
.fin-install-msg { flex: 1; }
.fin-install-btn {
  background: #3b82f6;
  color: #fff;
  border: 0;
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  font-size: var(--fs-xs);
}
.fin-install-btn:hover { background: #2563eb; }
.fin-install-x {
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: 0 0.25rem;
}
.fin-install-x:hover { color: #fff; }

/* Documentation module (+ Offer Letter list Original OL attach column) */
#fin-portal #view-documentation .col-chk { width: 2rem; text-align: center; }
#fin-portal #view-documentation .col-chk input[type="checkbox"] { cursor: pointer; }
#fin-portal #view-documentation th.col-status,
#fin-portal #view-documentation td.col-status { min-width: 5.5rem; white-space: nowrap; }
#fin-portal #view-documentation th.col-act,
#fin-portal #view-documentation td.col-docm-attach,
#fin-portal #view-documentation td.col-act,
#fin-portal #view-fin_offer_letters th.col-docm-attach,
#fin-portal #view-fin_offer_letters td.col-docm-attach {
  min-width: 8.5rem;
  width: 9.5rem;
  max-width: 11rem;
  vertical-align: middle;
  text-align: center;
}
/* Keep attach actions under sticky thead (never z-index above sticky th) */
#fin-portal #view-documentation .docm-attach-one,
#fin-portal #view-fin_offer_letters .ol-attach-original {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 0;
}
#fin-portal #view-documentation tr:hover td { background: rgba(13, 148, 136, 0.04); }

/* Offer Letter list: pin Original OL attach column on horizontal scroll + solid sticky head */
#fin-portal #view-fin_offer_letters .fin-scroll {
  overflow: auto;
}
#fin-portal #view-fin_offer_letters table.ledger.sticky-head {
  min-width: 64rem; /* force horizontal scroll instead of crushing columns */
}
#fin-portal #view-fin_offer_letters table.ledger.sticky-head thead th {
  z-index: 8;
  background: #f8fafc;
}
html[data-fin-theme="dark"] #fin-portal #view-fin_offer_letters table.ledger.sticky-head thead th {
  background: var(--dm-elevated, #1e293b);
}
#fin-portal #view-fin_offer_letters table.ledger.sticky-head th.col-docm-attach,
#fin-portal #view-fin_offer_letters table.ledger.sticky-head td.col-docm-attach {
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -4px 0 8px -4px rgba(15, 23, 42, 0.12);
}
#fin-portal #view-fin_offer_letters table.ledger.sticky-head th.col-docm-attach {
  z-index: 9; /* sticky head + sticky right */
  background: #f8fafc;
  white-space: normal;
  line-height: 1.2;
  max-width: 6.5rem;
  min-width: 6.5rem;
  width: 6.5rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}
#fin-portal #view-fin_offer_letters table.ledger.sticky-head td.col-docm-attach {
  z-index: 3;
  min-width: 6.5rem;
  width: 6.5rem;
  max-width: 6.5rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}
html[data-fin-theme="dark"] #fin-portal #view-fin_offer_letters table.ledger.sticky-head th.col-docm-attach {
  background: var(--dm-elevated, #1e293b);
}
html[data-fin-theme="dark"] #fin-portal #view-fin_offer_letters table.ledger.sticky-head td.col-docm-attach {
  background: var(--dm-surface, #0f172a);
}
/* Row hover must not leave transparent sticky attach cell */
#fin-portal #view-fin_offer_letters table.ledger.sticky-head tr:hover td.col-docm-attach {
  background: #f3f4f6;
}
html[data-fin-theme="dark"] #fin-portal #view-fin_offer_letters table.ledger.sticky-head tr:hover td.col-docm-attach {
  background: var(--dm-elevated, #1e293b);
}
#fin-portal #view-fin_offer_letters .docm-attach-cell {
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
  max-width: 100%;
}
#fin-portal #view-fin_offer_letters .docm-attach-cell .btn.tiny {
  white-space: nowrap;
}
#fin-portal #view-fin_offer_letters .docm-file-chip {
  max-width: 100%;
  padding: 0.25rem 0.35rem;
}
/* body row cells need opaque bg so content never bleeds through sticky header */
#fin-portal #view-fin_offer_letters table.ledger.sticky-head tbody td {
  background: #fff;
}
html[data-fin-theme="dark"] #fin-portal #view-fin_offer_letters table.ledger.sticky-head tbody td {
  background: var(--dm-surface, #0f172a);
}
#fin-portal #view-fin_offer_letters table.ledger.sticky-head tbody tr:hover td {
  background: rgba(243, 244, 246, 0.95);
}
html[data-fin-theme="dark"] #fin-portal #view-fin_offer_letters table.ledger.sticky-head tbody tr:hover td {
  background: color-mix(in srgb, var(--dm-elevated, #1e293b) 90%, #fff 10%);
}
#fin-portal #docmBulkAttach { min-width: 8.5rem; transition: box-shadow .2s, transform .15s, background .15s; }
/* Idle: dim until 2+ rows selected */
#fin-portal #docmBulkAttach.docm-bulk-idle,
#fin-portal #docmBulkAttach:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
/* Ready: 2+ selected — pulse so the action is obvious */
#fin-portal #docmBulkAttach.docm-bulk-ready:not(:disabled) {
  opacity: 1;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55);
  animation: docm-bulk-pulse 1.4s ease-out infinite;
}
#fin-portal #docmBulkAttach.docm-bulk-active:not(:disabled) {
  animation: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
  background: #4f46e5;
  border-color: #4f46e5;
}
@keyframes docm-bulk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* Banner under filter bar */
#fin-portal .docm-bulk-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--card, #f8fafc);
  font-size: var(--fs-xs);
  color: var(--muted, #64748b);
  line-height: 1.4;
}
#fin-portal .docm-bulk-banner--ready {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.08);
  color: #3730a3;
}
#fin-portal .docm-bulk-banner--active {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
}
#fin-portal .docm-bulk-banner-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}
#fin-portal .docm-bulk-banner-body strong { font-size: var(--fs-sm); }
#fin-portal .docm-bulk-banner-acts { display: flex; gap: 0.4rem; flex-shrink: 0; }

/* In-place bulk row highlight + per-row file picker */
#fin-portal #view-documentation tr.docm-bulk-row td {
  background: rgba(99, 102, 241, 0.06);
}
#fin-portal #view-documentation tr.docm-bulk-row td:first-child {
  box-shadow: inset 3px 0 0 #6366f1;
}
#fin-portal .docm-attach-cell--bulk {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 10rem;
}
#fin-portal .docm-bulk-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1.5px dashed #6366f1;
  background: rgba(99, 102, 241, 0.08);
  color: #4338ca;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  cursor: pointer;
  overflow: hidden;
}
#fin-portal .docm-bulk-pick:hover { background: rgba(99, 102, 241, 0.16); }
#fin-portal .docm-bulk-pick input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 100px; /* enlarge hit area in Safari */
}
#fin-portal .docm-bulk-row-hint {
  font-size: var(--fs-2xs);
  color: var(--muted, #64748b);
}
#fin-portal .docm-attach-cell--bulk.is-uploading .docm-bulk-pick {
  border-style: solid;
  opacity: 0.75;
  pointer-events: none;
}
#fin-portal .docm-bulk-done-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  width: fit-content;
}
#fin-portal .docm-file-chip--static {
  display: inline-flex;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--line, #e5e7eb);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
html[data-fin-theme="dark"] #fin-portal .docm-bulk-banner {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}
html[data-fin-theme="dark"] #fin-portal .docm-bulk-banner--ready {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(129, 140, 248, 0.5);
  color: #c7d2fe;
}
html[data-fin-theme="dark"] #fin-portal .docm-bulk-banner--active {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.45);
  color: #a7f3d0;
}
html[data-fin-theme="dark"] #fin-portal #view-documentation tr.docm-bulk-row td {
  background: rgba(99, 102, 241, 0.12);
}
html[data-fin-theme="dark"] #fin-portal .docm-bulk-pick {
  color: #c7d2fe;
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.15);
}

/* ─── Quick Actions floating sidebar (removed) ─── */
.fin-qa-sidebar {
  display: none !important;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
}
.fin-qa-toggle {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: var(--fin-sidebar-bg, #fff);
  border: 1px solid var(--fin-border, #e2e8f0);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  padding: 0.75rem 0.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: -2px 0 8px rgba(0,0,0,0.06);
  transition: background 0.15s;
}
.fin-qa-toggle:hover { background: var(--fin-hover, #f8fafc); }
.fin-qa-toggle svg { width: 18px; height: 18px; color: var(--fin-accent, #d4a843); }
.fin-qa-tab-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--fin-muted, #64748b);
  text-transform: uppercase;
}
.fin-qa-panel {
  background: var(--fin-sidebar-bg, #fff);
  border: 1px solid var(--fin-border, #e2e8f0);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  padding: 1.25rem 1rem;
  width: 220px;
  box-shadow: -4px 0 16px rgba(0,0,0,0.08);
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 70vh;
  overflow-y: auto;
}
.fin-qa-sidebar.open .fin-qa-panel { display: flex; }
.fin-qa-sidebar.open .fin-qa-toggle { display: none; }
.fin-qa-heading {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fin-muted, #64748b);
  margin: 0 0 0.25rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--fin-border, #e2e8f0);
}
.fin-qa-group { display: flex; flex-direction: column; gap: 0.5rem; }
.fin-qa-group[data-qa-context] { display: none; }
.fin-qa-group.visible { display: flex; }
.fin-qa-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--fin-border, #e2e8f0);
  background: var(--fin-sidebar-bg, #fff);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s, border-color 0.15s;
}
.fin-qa-card:hover {
  background: var(--fin-hover, #f8fafc);
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  border-color: var(--fin-accent, #d4a843);
  transform: translateX(-2px);
}
.fin-qa-card:active { transform: scale(0.97); }
.fin-qa-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #1e293b;
  flex-shrink: 0;
}
.fin-qa-icon svg { width: 18px; height: 18px; color: #fff; }
.fin-qa-text { display: flex; flex-direction: column; min-width: 0; }
.fin-qa-text strong { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--fin-text, #1e293b); }
.fin-qa-text span { font-size: var(--fs-2xs); color: var(--fin-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dark theme */
html[data-fin-theme="dark"] .fin-qa-toggle { background: #1e293b; border-color: #334155; }
html[data-fin-theme="dark"] .fin-qa-toggle:hover { background: #334155; }
html[data-fin-theme="dark"] .fin-qa-panel { background: #1e293b; border-color: #334155; }
html[data-fin-theme="dark"] .fin-qa-card { border-color: #334155; background: #1e293b; }
html[data-fin-theme="dark"] .fin-qa-card:hover { background: #334155; border-color: var(--fin-accent, #d4a843); }
html[data-fin-theme="dark"] .fin-qa-icon { background: #334155 !important; }
html[data-fin-theme="dark"] .fin-qa-icon svg { color: #e2e8f0 !important; }
html[data-fin-theme="dark"] .fin-qa-text strong { color: #f1f5f9; }

/* Mobile: hide sidebar */
@media (max-width: 768px) {
  .fin-qa-sidebar { display: none; }
}

/* ── Offer Letter Actions Dropdown ───────── */
#fin-portal .ol-actions-dropdown {
  position: relative;
  display: inline-block;
}
#fin-portal .ol-actions-toggle {
  font-size: var(--fs-xs);
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-weight: var(--fw-semibold);
}
#fin-portal .ol-actions-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 120;
  min-width: 240px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  padding: 0.35rem 0;
}
#fin-portal .ol-actions-menu.open { display: block; }
#fin-portal .ol-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 1rem;
  font-size: var(--fs-xs);
  color: #1f2937;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.1s;
}
#fin-portal .ol-menu-item:hover { background: #f3f4f6; }
html[data-fin-theme="dark"] #fin-portal .ol-actions-menu {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
html[data-fin-theme="dark"] #fin-portal .ol-menu-item { color: #e5e7eb; }
html[data-fin-theme="dark"] #fin-portal .ol-menu-item:hover { background: #334155; }

/* ── Offer Letter Related Documents ───────── */
#fin-portal .ol-related-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}
#fin-portal .ol-related-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
#fin-portal .ol-related-hd h4 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #1f2937;
}
#fin-portal .ol-conn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}
#fin-portal .ol-conn-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#fin-portal .ol-conn-dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}
#fin-portal .ol-conn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  background: #e5e7eb;
  color: #374151;
  border-radius: 999px;
  padding: 0 0.3rem;
  vertical-align: middle;
}
#fin-portal .ol-conn-link {
  font-size: var(--fs-xs);
  color: var(--fin-primary, #4f46e5);
  cursor: pointer;
  text-decoration: none;
}
#fin-portal .ol-conn-link:hover { text-decoration: underline; }
#fin-portal .ol-attach-list {
  min-height: 2.5rem;
}
#fin-portal .ol-attach-empty {
  display: block;
  text-align: center;
  font-size: var(--fs-xs);
  color: #6b7280;
  padding: 1.5rem 0;
}
#fin-portal .ol-attach-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f3f4f6;
}
#fin-portal .ol-attach-item:last-child { border-bottom: none; }
#fin-portal .ol-attach-name {
  font-size: var(--fs-xs);
  color: var(--fin-primary, #4f46e5);
  text-decoration: none;
}
#fin-portal .ol-attach-name:hover { text-decoration: underline; }
#fin-portal .ol-attach-size {
  font-size: var(--fs-2xs);
  color: #9ca3af;
}
html[data-fin-theme="dark"] #fin-portal .ol-related-section { border-top-color: #334155; }
html[data-fin-theme="dark"] #fin-portal .ol-related-hd h4 { color: #e5e7eb; }
html[data-fin-theme="dark"] #fin-portal .ol-conn-dt { color: #9ca3af; }
html[data-fin-theme="dark"] #fin-portal .ol-conn-count { background: #374151; color: #e5e7eb; }
html[data-fin-theme="dark"] #fin-portal .ol-attach-empty { color: #9ca3af; }
html[data-fin-theme="dark"] #fin-portal .ol-attach-item { border-bottom-color: #334155; }

/* Document Attachments — labeled attachments with dropdown & badge */
#fin-portal .ol-attach-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
#fin-portal .ol-attach-item.ol-attach-labeled {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: box-shadow 0.15s, transform 0.1s;
}
#fin-portal .ol-attach-item.ol-attach-labeled:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
#fin-portal .ol-attach-ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  /* Light-blue theme (finance portal's own --accent), not the purple/indigo
     gradient this used to hardcode — matches the rest of the UI. */
  background: linear-gradient(135deg, var(--accent, #1d4ed8) 0%, color-mix(in srgb, var(--accent, #1d4ed8) 70%, #60a5fa) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
#fin-portal .ol-attach-ico svg {
  width: 18px;
  height: 18px;
  color: #fff;
}
#fin-portal .ol-attach-info {
  flex: 1;
  min-width: 0;
}
#fin-portal .ol-attach-info .ol-attach-name {
  display: block;
  font-weight: var(--fw-semibold);
  color: #1e40af;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fin-portal .ol-attach-info .ol-attach-name:hover {
  text-decoration: underline;
}
#fin-portal .ol-attach-info .ol-attach-meta {
  display: block;
  font-size: var(--fs-2xs);
  color: #64748b;
  margin-top: 0.1rem;
}
#fin-portal .ol-doctype-badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.4;
}
#fin-portal .ol-doctype-select {
  font-size: var(--fs-xs);
  padding: 0.25rem 0.4rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  max-width: 200px;
  outline: none;
  transition: border-color 0.15s;
}
#fin-portal .ol-doctype-select:focus {
  border-color: var(--fin-primary, #4f46e5);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}
#fin-portal .ol-save-mappings {
  background: var(--fin-primary, #4f46e5);
  color: #fff;
  border: none;
  font-weight: var(--fw-semibold);
}
#fin-portal .ol-save-mappings:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
html[data-fin-theme="dark"] #fin-portal .ol-doctype-select {
  background: #1e293b;
  border-color: #475569;
  color: #e5e7eb;
}
html[data-fin-theme="dark"] #fin-portal .ol-doctype-select:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.15);
}
html[data-fin-theme="dark"] #fin-portal .ol-doctype-badge {
  border-color: currentColor;
}
html[data-fin-theme="dark"] #fin-portal .ol-attach-item.ol-attach-labeled {
  background: #1e293b;
  border-color: #334155;
}
html[data-fin-theme="dark"] #fin-portal .ol-attach-info .ol-attach-name { color: #93c5fd; }
html[data-fin-theme="dark"] #fin-portal .ol-attach-info .ol-attach-meta { color: #94a3b8; }

/* ─── Bulk Attach Dialog ─── */
.fin-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.fin-dialog {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  max-width: 900px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fin-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}
.fin-dialog-head h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.fin-dialog-close {
  background: none;
  border: none;
  font-size: var(--fs-2xl);
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
}
.fin-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}
.fin-dialog-foot {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #e5e7eb;
  text-align: right;
}
.docm-bulk-hint { font-size: var(--fs-sm); color: #64748b; margin-bottom: 1rem; }
.docm-bulk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.docm-bulk-table th { text-align: left; font-weight: var(--fw-semibold); padding: 0.5rem; border-bottom: 2px solid #e5e7eb; color: #374151; }
.docm-bulk-table td { padding: 0.5rem; border-bottom: 1px solid #f1f5f9; }
.docm-bulk-table .mono { font-family: var(--ff-mono, monospace); font-size: var(--fs-xs); }
html[data-fin-theme="dark"] .fin-dialog { background: #1e293b; border-color: #334155; }
html[data-fin-theme="dark"] .fin-dialog-head { border-color: #334155; }
html[data-fin-theme="dark"] .fin-dialog-foot { border-color: #334155; }
html[data-fin-theme="dark"] .docm-bulk-table th { color: #e5e7eb; border-color: #475569; }
html[data-fin-theme="dark"] .docm-bulk-table td { border-color: #334155; }
html[data-fin-theme="dark"] .fin-dialog-close { color: #94a3b8; }
html[data-fin-theme="dark"] .docm-bulk-hint { color: #94a3b8; }

/* Financial Statement — party search dropdown */
.fs-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  max-height: 260px;
  overflow-y: auto;
}
.fs-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
}
.fs-result:hover { background: var(--accent-soft, rgba(29, 78, 216, 0.08)); }
.fs-result.empty { cursor: default; color: var(--muted); }
.fs-result.empty:hover { background: none; }
.fs-result-name { font-weight: var(--fw-semibold); color: var(--text, #1f2937); }
.fs-result-sub { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
html[data-fin-theme="dark"] .fs-results { background: #1e293b; border-color: #334155; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
html[data-fin-theme="dark"] .fs-result-name { color: #f1f5f9; }
html[data-fin-theme="dark"] .fs-result:hover { background: rgba(59, 130, 246, 0.16); }
html[data-fin-theme="dark"] .fin-dialog-head h3 { color: #f1f5f9; }


/* Dark mode: solid link dropdown (no transparent bleed) */
html[data-fin-theme="dark"] .ff-link-drop-portal,
html[data-fin-theme="dark"] #fin-portal .ff-link-drop,
html[data-fin-theme="dark"] .ff-link-drop {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.55) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-opt,
html[data-fin-theme="dark"] #fin-portal .ff-link-opt {
  background: transparent !important;
  color: #e2e8f0 !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-opt:hover,
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-opt.is-active,
html[data-fin-theme="dark"] #fin-portal .ff-link-opt:hover,
html[data-fin-theme="dark"] #fin-portal .ff-link-opt.is-active {
  background: #334155 !important;
  color: #f8fafc !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-opt-lab,
html[data-fin-theme="dark"] #fin-portal .ff-link-opt-lab {
  color: #f1f5f9 !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-opt-id,
html[data-fin-theme="dark"] #fin-portal .ff-link-opt-id {
  color: #94a3b8 !important;
}
html[data-fin-theme="dark"] .ff-link-drop-portal .ff-link-empty,
html[data-fin-theme="dark"] #fin-portal .ff-link-empty {
  color: #94a3b8 !important;
  background: transparent !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-link-box,
html[data-fin-theme="dark"] #fin-portal .ff-link .ff-link-box {
  background: #0f172a !important;
  border-color: #334155 !important;
}
html[data-fin-theme="dark"] #fin-portal .ff-link-input {
  color: #f1f5f9 !important;
  background: transparent !important;
}

/* Modal / dialog overhaul — neutral white shells, traffic-loader friendly */
.rc-modal-overlay, .fin-dlg-overlay, .ol-row-edit-overlay, .po-lean-overlay {
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(4px);
}
.rc-modal, .fin-dlg, .ol-row-edit-dialog, .po-lean-modal, .fs-modal {
  background: #fff !important;
}
.fin-loader {
  background: transparent !important;
}
.fin-loader-mark {
  background: transparent !important;
  box-shadow: none !important;
}
/* modal overhaul traffic */

/* ── Offer Letter form: compact 2-col Client Details ───────────────
   Tables used to sit mid-column and collapse the LEFT/RIGHT split;
   reshapeClientDetailsTab (offer_letter.js) owns field order. These
   rules keep field controls from stretching full form width. */
#fin-portal .ol-view .ff-cols.ff-cols-2,
#fin-portal .ol-view .ff-cols[style*="repeat(2"] {
  max-width: 52rem;
  gap: 0.75rem 1.25rem;
}
#fin-portal .ol-view .ff-fld {
  max-width: 100%;
}
#fin-portal .ol-view .ff-fld input[type="text"],
#fin-portal .ol-view .ff-fld input[type="number"],
#fin-portal .ol-view .ff-fld input[type="date"],
#fin-portal .ol-view .ff-fld input[type="datetime-local"],
#fin-portal .ol-view .ff-fld select,
#fin-portal .ol-view .ff-fld textarea,
#fin-portal .ol-view .ff-fld .ff-link {
  max-width: 100%;
}
/* Smaller text areas on OL (no Client's Address; keep any residual Small Text tight) */
#fin-portal .ol-view .ff-fld textarea {
  min-height: 2.5rem;
  max-height: 5.5rem;
  resize: vertical;
}
/* Full-width only for child tables / multi-client grid sections */
#fin-portal .ol-view .ff-sec:has(.ff-fld-table) .ff-cols {
  max-width: 100%;
}
#fin-portal .ol-view .ff-sec-title {
  margin-bottom: 0.55rem;
}
#fin-portal .ol-view .ff-desc {
  font-size: var(--fs-xs);
  color: var(--muted, #64748b);
  line-height: 1.35;
  margin-top: 0.25rem;
  max-width: 36rem;
}
@media (max-width: 720px) {
  #fin-portal .ol-view .ff-cols.ff-cols-2,
  #fin-portal .ol-view .ff-cols[style*="repeat(2"] {
    grid-template-columns: 1fr !important;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Car Wash operations widgets
   The finance shell (sidebar, topbar, kpi, ledger, cards, buttons) is unchanged.
   These classes only exist on the car-wash views: yard cards, check-in ticket,
   job-card activities, QC list, search overlay, notification drop, toasts.
   Tokens stay Salvia. Buttons stay .btn / .btn.ghost / .btn.primary.
   ═══════════════════════════════════════════════════════════════════════════ */

#fin-portal .btn.block { width: 100%; display: block; text-align: center; }
#fin-portal .btn.tiny { padding: 0.28rem 0.55rem; font-size: var(--fs-2xs); border-radius: 8px; }
#fin-portal .lnk {
  border: 0; background: none; color: var(--accent);
  font: inherit; font-weight: var(--fw-semibold); font-size: var(--fs-xs);
  cursor: pointer; padding: 0; text-align: left;
}
#fin-portal .lnk:hover { text-decoration: underline; }
#fin-portal .sub { display: block; font-size: var(--fs-2xs); color: var(--muted); font-weight: var(--fw-medium); margin-top: 0.1rem; }
#fin-portal .chip-row, #fin-portal .chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.85rem; }
#fin-portal .note {
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.45;
  padding: 0.7rem 0.85rem; border-radius: var(--radius-sm);
  background: var(--line-soft); border: 1px solid var(--line); margin: 0.7rem 0;
}
#fin-portal .note.ok { background: var(--live-bg); border-color: rgba(22,163,74,.25); color: #166534; }
#fin-portal .note.warn { background: var(--warn-bg); border-color: rgba(161,98,7,.25); color: #854d0e; }
html[data-fin-theme="dark"] #fin-portal .note.ok { background: rgba(22,163,74,.14); color: #86efac; }
html[data-fin-theme="dark"] #fin-portal .note.warn { background: rgba(161,98,7,.16); color: #fde68a; }

#fin-portal .fp-sec {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 1rem 0 0.45rem;
}
#fin-portal .fp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.65rem; }
#fin-portal .fp-form { padding: 0 1.1rem 1.1rem; }
#fin-portal .fp-form .field,
#fin-portal .fp-row .field {
  display: flex; flex-direction: column; gap: 0.28rem; min-width: 0;
}
#fin-portal .fp-form .field > label,
#fin-portal .fp-row .field > label {
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink);
}
#fin-portal .fp-form input,
#fin-portal .fp-form select,
#fin-portal .fp-row input,
#fin-portal .fp-row select {
  border: 1px solid var(--line); border-radius: 0.75rem;
  background: rgba(255,255,255,.9); padding: 0.45rem 0.7rem;
  font: inherit; font-size: var(--fs-sm); color: #374151;
  min-height: 2.35rem; width: 100%; box-sizing: border-box;
}
html[data-fin-theme="dark"] #fin-portal .fp-form input,
html[data-fin-theme="dark"] #fin-portal .fp-form select,
html[data-fin-theme="dark"] #fin-portal .fp-row input,
html[data-fin-theme="dark"] #fin-portal .fp-row select {
  background: #18181b; color: inherit; border-color: rgba(255,255,255,.12);
}
#fin-portal .fp-form input:focus,
#fin-portal .fp-form select:focus,
#fin-portal .fp-row input:focus,
#fin-portal .fp-row select:focus {
  outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,.35); border-color: transparent;
}
#fin-portal .fin-body { padding: 0 1.1rem 1.1rem; }
#fin-portal .fin-sec { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); margin: 0.8rem 0 0.4rem; }

/* Yard bay cards */
#fin-portal .bay-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.85rem; margin: 0.4rem 0 1.1rem;
}
#fin-portal .bay-card {
  background: var(--card); border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius); padding: 0.9rem 1rem 0.85rem;
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 0.35rem;
}
#fin-portal .bay-card.free { opacity: .92; }
#fin-portal .bay-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
#fin-portal .bay-no { font-weight: var(--fw-bold); letter-spacing: .02em; }
#fin-portal .bay-plate { font-family: var(--f-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: .04em; }
#fin-portal .bay-sub { font-size: var(--fs-xs); color: var(--muted); }
#fin-portal .bay-clock { display: flex; align-items: baseline; gap: .45rem; margin-top: .15rem; }
#fin-portal .bay-clock b { font-variant-numeric: tabular-nums; font-size: var(--fs-xl); }
#fin-portal .bay-clock span { font-size: var(--fs-2xs); color: var(--muted); }
#fin-portal .bay-clock.ok b { color: var(--credit); }
#fin-portal .bay-clock.warn b { color: var(--warn); }
#fin-portal .bay-clock.err b { color: var(--debit); }
#fin-portal .bay-bar { height: 4px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
#fin-portal .bay-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; }
#fin-portal .bay-clock.err + .bay-bar i, #fin-portal .bay-card:has(.bay-clock.err) .bay-bar i { background: var(--debit); }
#fin-portal .bay-clock.warn + .bay-bar i, #fin-portal .bay-card:has(.bay-clock.warn) .bay-bar i { background: var(--warn); }
#fin-portal .bay-f { display: flex; align-items: center; justify-content: space-between; margin-top: .25rem; font-size: var(--fs-xs); }
#fin-portal .bay-empty {
  border: 1px dashed var(--line); background: transparent; color: var(--muted);
  border-radius: var(--radius-sm); padding: 1.4rem .6rem; cursor: pointer; font: inherit;
}
#fin-portal .bay-empty:hover { border-color: var(--accent); color: var(--accent); }

/* Utilisation cell on the bays list. The number is the fact; the bar is what makes a column of
   thirteen of them comparable at a glance. */
#fin-portal .bay-util { display: flex; align-items: center; gap: .45rem; min-width: 6.5rem; }
#fin-portal .bay-util-bar {
  flex: 1 1 auto; height: 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden;
}
#fin-portal .bay-util-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
#fin-portal .bay-util b {
  font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; color: var(--muted);
  min-width: 2.6rem; text-align: right; font-weight: var(--fw-semibold);
}

html[data-fin-theme="dark"] #fin-portal .bay-card {
  background: rgba(24,24,27,.72); border-color: rgba(255,255,255,.08);
}

/* Funnel (overview) */
#fin-portal .funnel { display: flex; flex-direction: column; gap: .45rem; padding: .2rem 1.1rem 1rem; }
#fin-portal .fn-row { display: grid; grid-template-columns: 9.5rem 1fr 2rem; gap: .55rem; align-items: center; }
#fin-portal .fn-lbl { font-size: var(--fs-xs); color: var(--muted); }
#fin-portal .fn-bar { height: 8px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
#fin-portal .fn-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
#fin-portal .fn-n { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: right; }

/* Check-in services + ticket */
#fin-portal .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
#fin-portal .svc {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .65rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card-solid);
  cursor: pointer; font: inherit; text-align: left;
}
#fin-portal .svc.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#fin-portal .svc-n { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
#fin-portal .svc-p { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
#fin-portal .svc-m { font-size: var(--fs-2xs); color: var(--muted); }
#fin-portal .ticket { display: flex; flex-direction: column; gap: .35rem; min-height: 5rem; }
#fin-portal .tk-row { display: flex; justify-content: space-between; gap: .6rem; font-size: var(--fs-sm); }
#fin-portal .tk-row em { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--muted); }
#fin-portal .ticket-total, #fin-portal .ticket-eta {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--line-soft);
}
#fin-portal .ticket-total strong, #fin-portal .ticket-eta strong {
  font-size: var(--fs-xl); font-variant-numeric: tabular-nums;
}
#fin-portal .ticket-total .cur { font-size: var(--fs-2xs); color: var(--muted); }

html[data-fin-theme="dark"] #fin-portal .svc { background: #18181b; border-color: rgba(255,255,255,.1); }
html[data-fin-theme="dark"] #fin-portal .svc.on { box-shadow: 0 0 0 3px rgba(29,78,216,.35); }

/* Job card + QC */
#fin-portal .doc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .2rem 0 1rem;
}
#fin-portal .dh-l { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
#fin-portal .dh-sub { width: 100%; font-size: var(--fs-xs); color: var(--muted); }
#fin-portal .dh-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
#fin-portal .act-groups { display: flex; flex-direction: column; gap: .85rem; padding: 0 1.1rem 1.1rem; }
#fin-portal .act-g { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
#fin-portal .act-gh {
  display: flex; justify-content: space-between; padding: .5rem .75rem;
  background: var(--line-soft); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
#fin-portal .act {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem;
  border-top: 1px solid var(--line-soft); cursor: pointer; font: inherit; margin: 0;
}
#fin-portal .act.done { background: rgba(22,163,74,.06); }
#fin-portal .act.na { opacity: .55; }
#fin-portal .act-n { flex: 1; font-size: var(--fs-sm); }
#fin-portal .act-t { font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; }
#fin-portal .act-na {
  border: 1px solid var(--line); background: transparent; border-radius: 7px;
  font: inherit; font-size: var(--fs-2xs); color: var(--muted); cursor: pointer; padding: .15rem .4rem;
}
#fin-portal .act-na:hover { color: var(--ink); border-color: var(--ink); }
#fin-portal .ring-wrap { position: relative; width: 150px; height: 150px; margin: .4rem auto 1rem; }
#fin-portal .ring-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
#fin-portal .ring-mid strong { font-size: var(--fs-xl); }
#fin-portal .ring-mid em { font-style: normal; font-size: var(--fs-2xs); color: var(--muted); }
#fin-portal .check-list { display: flex; flex-direction: column; }
#fin-portal .chk {
  display: flex; align-items: center; gap: .55rem; padding: .6rem 1.1rem;
  border-top: 1px solid var(--line-soft); margin: 0; cursor: pointer; font: inherit;
}
#fin-portal .chk.on { background: rgba(22,163,74,.06); }
#fin-portal .chk em { margin-left: auto; font-style: normal; font-size: var(--fs-2xs); color: var(--muted); }
#fin-portal .will-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .65rem; }
#fin-portal .will-list li { display: flex; flex-direction: column; gap: .1rem; font-size: var(--fs-xs); color: var(--muted); }
#fin-portal .will-list strong { font-size: var(--fs-sm); color: inherit; }
#fin-portal textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem .7rem; font: inherit; background: var(--card-solid); resize: vertical;
}
html[data-fin-theme="dark"] #fin-portal textarea { background: #18181b; color: inherit; border-color: rgba(255,255,255,.12); }

/* Notification drop — same chrome as M-Group finance */
#fin-portal .fin-notif { position: relative; }
#fin-portal .fin-notif-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem; padding: 0; border-radius: 11px;
  border: 1px solid rgba(15,23,42,.1); background: #fff; color: #0f172a;
  box-shadow: 0 1px 2px rgba(15,23,42,.05); cursor: pointer;
}
#fin-portal .fin-notif-btn:hover, #fin-portal .fin-notif.is-open .fin-notif-btn {
  border-color: rgba(15,23,42,.22); background: #fafafa;
}
#fin-portal .fin-notif-badge {
  position: absolute; top: .1rem; right: .06rem; min-width: 1rem; height: 1rem;
  padding: 0 .28rem; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700;
  line-height: 1rem; text-align: center; color: #fff; background: #111; border: 2px solid #fff;
  pointer-events: none;
}
#fin-portal .fin-notif-badge[hidden] { display: none !important; }
#fin-portal .fin-notif-drop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 150;
  width: min(22.5rem, calc(100vw - 1rem)); max-height: min(26rem, 70vh);
  display: none; flex-direction: column;
  border-radius: 14px; border: 1px solid rgba(15,23,42,.08);
  background: #fff; box-shadow: 0 18px 40px rgba(15,23,42,.14);
  overflow: hidden;
}
#fin-portal .fin-notif.is-open .fin-notif-drop { display: flex; }
#fin-portal .fin-notif-hd {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .85rem 1rem; border-bottom: 1px solid #f1f5f9;
}
#fin-portal .fin-notif-title { display: block; font-size: var(--fs-sm); font-weight: 700; }
#fin-portal .fin-notif-sub { display: block; font-size: var(--fs-2xs); color: #94a3b8; margin-top: .12rem; }
#fin-portal .fin-notif-actions { display: flex; gap: .35rem; }
#fin-portal .fin-notif-actions button {
  border: 1px solid transparent; background: transparent; color: #64748b;
  font: inherit; font-size: var(--fs-2xs); font-weight: 600; cursor: pointer;
  padding: .32rem .55rem; border-radius: 8px;
}
#fin-portal .fin-notif-actions button:hover { background: #f8fafc; color: #0f172a; border-color: #e2e8f0; }
#fin-portal .fin-notif-list { overflow: auto; padding: .4rem .45rem .55rem; background: #fafbfc; }
#fin-portal .fin-notif-item {
  display: flex; align-items: flex-start; gap: .65rem; width: 100%;
  padding: .7rem; border: 1px solid transparent; border-radius: 10px;
  background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
#fin-portal .fin-notif-item:hover { background: #fff; border-color: #eef2f7; }
#fin-portal .fin-notif-item .t { font-weight: 600; font-size: var(--fs-xs); }
#fin-portal .fin-notif-item .b { font-size: var(--fs-2xs); color: #64748b; margin-top: .2rem; }
#fin-portal .fin-notif-item .fin-notif-time { font-size: var(--fs-2xs); color: #94a3b8; margin-top: .3rem; }
#fin-portal .fin-notif-empty { padding: 2rem 1rem; text-align: center; color: #94a3b8; font-size: var(--fs-xs); }
html[data-fin-theme="dark"] #fin-portal .fin-notif-btn {
  background: #1e293b !important; color: #e2e8f0 !important; border-color: rgba(148,163,184,.25) !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-notif-drop {
  background: #1e293b !important; border-color: rgba(148,163,184,.28) !important;
}
html[data-fin-theme="dark"] #fin-portal .fin-notif-hd { border-bottom-color: rgba(148,163,184,.12); }
html[data-fin-theme="dark"] #fin-portal .fin-notif-list { background: #0f172a; }
html[data-fin-theme="dark"] #fin-portal .fin-notif-item:hover { background: #1e293b; border-color: rgba(148,163,184,.16); }
html[data-fin-theme="dark"] #fin-portal .fin-notif-item .b,
html[data-fin-theme="dark"] #fin-portal .fin-notif-sub { color: #94a3b8; }

/* Settings popover */
#fin-portal .fin-set-drop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 150;
  width: min(18rem, calc(100vw - 1rem));
  display: none; flex-direction: column; gap: .55rem;
  padding: .9rem 1rem; border-radius: 14px; border: 1px solid rgba(15,23,42,.08);
  background: #fff; box-shadow: 0 18px 40px rgba(15,23,42,.14);
}
#fin-portal .fin-set.is-open .fin-set-drop { display: flex; }
#fin-portal .fin-set { position: relative; }
#fin-portal .fin-set-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: var(--fs-sm); }
html[data-fin-theme="dark"] #fin-portal .fin-set-drop {
  background: #1e293b; border-color: rgba(148,163,184,.28);
}

/* Search overlay */
#fin-portal .tb-search-wrap { position: relative; }
#fin-portal .fin-search-drop {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 160;
  display: none; flex-direction: column;
  max-height: min(22rem, 60vh); overflow: auto;
  border-radius: 14px; border: 1px solid rgba(15,23,42,.08);
  background: #fff; box-shadow: 0 18px 40px rgba(15,23,42,.14);
}
#fin-portal .fin-search-drop.is-open { display: flex; }
#fin-portal .fin-search-item {
  display: flex; flex-direction: column; gap: .1rem; padding: .65rem .85rem;
  border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer;
}
#fin-portal .fin-search-item:hover { background: #f8fafc; }
#fin-portal .fin-search-item .t { font-weight: 600; font-size: var(--fs-sm); }
#fin-portal .fin-search-item .b { font-size: var(--fs-2xs); color: var(--muted); }
html[data-fin-theme="dark"] #fin-portal .fin-search-drop { background: #1e293b; border-color: rgba(148,163,184,.28); }
html[data-fin-theme="dark"] #fin-portal .fin-search-item:hover { background: #0f172a; }

/* Toasts — finance layout (bottom-right, title + body + sound) */
.fin-toast-host {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 10080;
  display: flex; flex-direction: column-reverse; gap: .55rem;
  max-width: min(24rem, calc(100vw - 1.5rem)); pointer-events: none;
}
.fin-toast {
  pointer-events: auto; display: flex; gap: .65rem; align-items: flex-start;
  padding: .9rem 1.05rem; border-radius: 14px;
  background: #fff; border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 32px rgba(15,23,42,.12);
}
.fin-toast.ok { border-left: 3px solid #10b981; }
.fin-toast.err, .fin-toast.error { border-left: 3px solid #ef4444; }
.fin-toast.warn { border-left: 3px solid #f59e0b; }
.fin-toast-ico {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 700;
}
.fin-toast.ok .fin-toast-ico { background: rgba(16,185,129,.15); color: #047857; }
.fin-toast.err .fin-toast-ico, .fin-toast.error .fin-toast-ico { background: rgba(239,68,68,.14); color: #b91c1c; }
.fin-toast.warn .fin-toast-ico { background: rgba(245,158,11,.16); color: #b45309; }
.fin-toast-title { font-size: var(--fs-xs); font-weight: 700; margin: 0 0 .15rem; }
.fin-toast-msg { font-size: var(--fs-xs); line-height: 1.35; color: #4b5563; margin: 0; }
.fin-toast.out { opacity: 0; transform: translateY(6px); transition: .2s ease-in; }
html[data-fin-theme="dark"] .fin-toast { background: #18181b; color: #fafafa; border-color: rgba(255,255,255,.1); }
html[data-fin-theme="dark"] .fin-toast-msg { color: #a1a1aa; }

/* ═══ Business profile switcher ══════════════════════════════════════════════
   Two businesses, one database. The switcher swaps the whole workspace, so it
   sits at the top of the sidebar under the brand where it reads as "which
   company am I in", not as a filter on the current screen. */
#fin-portal .prof-switch {
  display: flex;
  gap: 0.25rem;
  margin: 0 0.75rem 0.75rem;
  padding: 0.25rem;
  border-radius: 0.7rem;
  background: var(--surface-2, rgba(148, 163, 184, 0.12));
  border: 1px solid var(--line, rgba(148, 163, 184, 0.22));
}
#fin-portal .prof-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted, #64748b);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#fin-portal .prof-btn:hover { color: var(--ink, #0f172a); }
#fin-portal .prof-btn[aria-selected="true"] {
  background: var(--surface, #fff);
  color: var(--accent, #0077c8);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
#fin-portal .prof-ico { display: inline-flex; flex: 0 0 auto; }
#fin-portal .prof-ico svg { width: 15px; height: 15px; }
#fin-portal .prof-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Collapsed rail: icons only, stacked, since there is no room for two labels. */
#fin-portal .sb-collapsed .prof-switch { flex-direction: column; margin: 0 0.4rem 0.6rem; }
#fin-portal .sb-collapsed .prof-lbl { display: none; }

/* Only the active profile's tree is in the document flow. Both are rendered,
   so switching is a class change rather than a re-render — no flicker, and the
   branch open/closed state of the tree you left survives. */
#fin-portal .nav-profile { display: none; }
#fin-portal .nav-profile.is-active { display: block; }

/* ═══ Maps (Leaflet over OpenStreetMap) ══════════════════════════════════════
   No API key, no billing account, and no "for development purposes only"
   watermark across the tiles. */
#fin-portal .map-wrap {
  height: 17rem;
  border-radius: 0.7rem;
  overflow: hidden;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.22));
  background: var(--surface-2, #eef2f7);
}
#fin-portal .map-wrap-lg { height: 26rem; margin-bottom: 1rem; }
#fin-portal .map-wrap .leaflet-container { height: 100%; width: 100%; font: inherit; }
#fin-portal .map-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--muted, #64748b); font-size: var(--fs-xs); text-align: center; padding: 1rem;
}
#fin-portal .geo-bar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.6rem 0 0.75rem;
}
#fin-portal .geo-read { font-size: var(--fs-xs); color: var(--muted, #64748b); }
#fin-portal .geo-read.is-set { color: var(--ok, #166534); font-weight: var(--fw-semibold); }

/* ═══ Modern Map Styling & Custom Interactive Pins ═════════════════════════ */
.map-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--fin-border, #e2e8f0);
  position: relative;
}

/* Modern Marker Pins */
.cws-pin {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #ffffff;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}
.cws-pin:hover {
  transform: rotate(-45deg) scale(1.18);
  z-index: 1000 !important;
}
.cws-pin::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
}

/* Marker Types */
.cws-pin.hq {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #ffffff;
  width: 34px;
  height: 34px;
}
.cws-pin.hq::after {
  background: #ffffff;
  width: 12px;
  height: 12px;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
}
.cws-pin.pickup  { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.cws-pin.dropoff { background: linear-gradient(135deg, #10b981, #047857); }
.cws-pin.rider   { background: linear-gradient(135deg, #ec4899, #be185d); }

/* HQ Radar Wave Animation */
.cws-hq-pulse {
  position: relative;
  width: 36px;
  height: 36px;
}
.cws-hq-pulse::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.35);
  animation: cws-radar 2.4s infinite ease-out;
  pointer-events: none;
}
@keyframes cws-radar {
  0% { width: 10px; height: 10px; opacity: 0.9; }
  100% { width: 70px; height: 70px; opacity: 0; }
}

/* Modern Leaflet Popups */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0,0,0,0.06) !important;
  padding: 4px 6px !important;
  background: var(--surface, #ffffff) !important;
  color: var(--ink, #0f172a) !important;
  font-family: inherit !important;
}
.leaflet-popup-content {
  margin: 10px 14px !important;
  line-height: 1.45 !important;
  font-size: 13px !important;
}
.leaflet-popup-tip {
  background: var(--surface, #ffffff) !important;
}
.cws-map-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cws-map-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}
.cws-map-card-body {
  font-size: 12px;
  color: var(--fin-text-muted, #64748b);
}
.cws-map-card-foot {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--fin-border, #e2e8f0);
}

/* ═══ Row actions: print, email, share ═══════════════════════════════════════ */
#fin-portal .row-acts { display: flex; gap: 0.15rem; justify-content: flex-end; }
#fin-portal .row-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: 0; border-radius: 0.4rem; background: transparent;
  color: var(--muted, #64748b); cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
#fin-portal .row-act:hover { background: var(--surface-2, rgba(148,163,184,0.16)); color: var(--accent, #0077c8); }
#fin-portal .row-act svg { width: 15px; height: 15px; }
#fin-portal .ledger tr:hover .row-act { color: var(--ink, #0f172a); }

/* ═══ Document panel: assigned to, share, tags, attachments ══════════════════
   The Desk sidebar, carried into the portal. */
#fin-portal .doc-panel { display: grid; gap: 1rem; }
#fin-portal .doc-sec { border-top: 1px solid var(--line, rgba(148,163,184,0.2)); padding-top: 0.75rem; }
#fin-portal .doc-sec:first-child { border-top: 0; padding-top: 0; }
#fin-portal .doc-sec-h {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
#fin-portal .doc-sec-t {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted, #64748b);
}
#fin-portal .doc-sec-t svg { width: 13px; height: 13px; }
#fin-portal .doc-empty { font-size: var(--fs-xs); color: var(--muted-2, #94a3b8); }
#fin-portal .doc-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
#fin-portal .doc-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  background: var(--surface-2, rgba(148,163,184,0.14));
  font-size: var(--fs-2xs); color: var(--ink, #0f172a);
}
#fin-portal .doc-chip button {
  border: 0; background: transparent; color: var(--muted, #64748b);
  cursor: pointer; padding: 0; line-height: 1; font-size: var(--fs-xs);
}
#fin-portal .doc-chip button:hover { color: var(--bad, #b91c1c); }
#fin-portal .doc-file {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.3rem 0; font-size: var(--fs-xs);
}
#fin-portal .doc-file a { color: var(--accent, #0077c8); text-decoration: none; }
#fin-portal .doc-file a:hover { text-decoration: underline; }
#fin-portal .doc-file .sz { color: var(--muted-2, #94a3b8); font-size: var(--fs-2xs); }

/* ═══ Forms used by the new screens ══════════════════════════════════════════ */
#fin-portal .form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem;
}
#fin-portal .form-grid .field-wide { grid-column: 1 / -1; }
#fin-portal .form-grid textarea {
  width: 100%; padding: 0.5rem 0.65rem; border-radius: 0.5rem;
  border: 1px solid var(--line, rgba(148,163,184,0.3));
  background: var(--surface, #fff); color: var(--ink, #0f172a);
  font: inherit; font-size: var(--fs-sm); resize: vertical;
}

/* Aliases for the red tone. The palette calls it .overdue, which reads oddly
   on "Below reorder" or "Failed" — same colours, names that fit the sentence. */
#fin-portal .chip.err,
#fin-portal .chip.bad { color: #991b1b; background: #fecaca; }
html[data-fin-theme="dark"] #fin-portal .chip.err,
html[data-fin-theme="dark"] #fin-portal .chip.bad { color: #fecaca; background: rgba(185, 28, 28, 0.28); }

/* The switcher labels must not truncate — the whole point is reading at a
   glance which business you are in. */
#fin-portal .prof-btn { padding-inline: 0.35rem; }
#fin-portal .prof-lbl { font-size: var(--fs-2xs); letter-spacing: -0.01em; }

/* Section divider inside a view, for the business band under the yard view. */
#fin-portal .sec-head {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  margin: 1.75rem 0 0.85rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line, rgba(148, 163, 184, 0.22));
}
#fin-portal .sec-head h2 {
  margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink, #0f172a);
}
#fin-portal .sec-head .hint { font-size: var(--fs-xs); color: var(--muted, #64748b); }


/* ── crew picker (check-in) ──────────────────────────────────────────────
   A wash is done by a crew, and the commission on the invoice follows the
   split, so the split is shown and edited right where the crew is chosen. */
#fin-portal .crew-picked {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.6rem;
}
#fin-portal .crew-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem 0.4rem 0.7rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 0.7rem;
  background: var(--surface-2, #f8fafc);
}
#fin-portal .crew-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#fin-portal .crew-split {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--fs-2xs);
  color: var(--muted, #6b7280);
}
#fin-portal .crew-split input {
  width: 3.2rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 0.45rem;
  font: inherit;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: var(--surface, #fff);
  color: inherit;
}
#fin-portal .crew-drop {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--muted, #6b7280);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
#fin-portal .crew-drop:hover { background: #fee2e2; color: #b91c1c; }
#fin-portal .crew-foot {
  font-size: var(--fs-2xs);
  color: var(--muted, #6b7280);
  padding-left: 0.15rem;
}
#fin-portal .crew-foot.bad { color: #b45309; font-weight: var(--fw-semibold); }

/* ── button depth ────────────────────────────────────────────────────────
   A flat fill reads as a label, not a control. A top-light gradient, a seated
   shadow and a press state give the primary actions something to be pressed. */
#fin-portal .btn {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(0, 0, 0, 0.06));
  box-shadow:
    0 1px 1px rgba(15, 23, 42, 0.06),
    0 2px 6px rgba(29, 78, 216, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: box-shadow 0.15s ease, transform 0.08s ease, filter 0.15s ease;
}
#fin-portal .btn:hover {
  box-shadow:
    0 1px 1px rgba(15, 23, 42, 0.07),
    0 4px 12px rgba(29, 78, 216, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
#fin-portal .btn:active { transform: translateY(1px); }
#fin-portal .btn.ghost {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(15, 23, 42, 0.035));
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.05), inset 0 1px 0 #fff;
}
#fin-portal .btn.ghost:hover {
  background-image: linear-gradient(180deg, #fff, rgba(15, 23, 42, 0.06));
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.09), inset 0 1px 0 #fff;
}
#fin-portal .btn.danger { box-shadow: 0 1px 1px rgba(15,23,42,.06), 0 2px 6px rgba(220, 38, 38, 0.25), inset 0 1px 0 rgba(255,255,255,.18); }
#fin-portal .btn:disabled,
#fin-portal .btn[disabled] {
  filter: grayscale(0.35) opacity(0.6);
  box-shadow: none;
  background-image: none;
  cursor: not-allowed;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  #fin-portal .btn { transition: none; }
  #fin-portal .btn:active { transform: none; }
}


/* ── quiet header action ─────────────────────────────────────────────────
   Sits beside a card title and must not compete with it. */
#fin-portal .lnk-quiet {
  margin-left: auto;
  border: 0;
  background: transparent;
  padding: 0.2rem 0.45rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--muted, #6b7280);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(107, 114, 128, 0.35);
}
#fin-portal .lnk-quiet:hover {
  color: var(--accent, #1d4ed8);
  background: var(--accent-soft, #dbeafe);
  text-decoration-color: transparent;
}

/* ── the one action a queued job is waiting for ──────────────────────────
   Breathing, not blinking: a slow halo that reads as "press me" from across
   a workshop, and stops the moment the pointer arrives. */
@keyframes cws-call {
  0%, 100% { box-shadow: 0 2px 6px rgba(29, 78, 216, 0.28), 0 0 0 0 rgba(29, 78, 216, 0.42); }
  50%      { box-shadow: 0 4px 14px rgba(29, 78, 216, 0.36), 0 0 0 0.5rem rgba(29, 78, 216, 0); }
}
#fin-portal .btn.btn-call {
  animation: cws-call 2.1s ease-in-out infinite;
}
#fin-portal .btn.btn-call:hover,
#fin-portal .btn.btn-call:focus-visible {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  /* Never animate for someone who asked us not to — keep the emphasis in the
     ring alone, which carries the same meaning without the movement. */
  #fin-portal .btn.btn-call {
    animation: none;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.28), 0 2px 6px rgba(29, 78, 216, 0.3);
  }
}


/* ── confirmation dialog body ────────────────────────────────────────────── */
#fin-portal .fin-dlg .dlg-lede,
.fin-dlg-overlay .dlg-lede {
  margin: 0 0 0.75rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.fin-dlg-overlay .dlg-list {
  margin: 0 0 0.85rem;
  padding-left: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  color: var(--muted, #6b7280);
}
.fin-dlg-overlay .dlg-list b { color: inherit; font-weight: var(--fw-semibold); }
.fin-dlg-overlay .dlg-warn {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.6rem;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.fin-dlg-overlay .btn.block { width: 100%; }
html[data-fin-theme="dark"] .fin-dlg-overlay .dlg-warn {
  background: rgba(180, 83, 9, 0.18);
  border-color: rgba(253, 230, 138, 0.28);
  color: #fcd34d;
}


/* ── M-Pesa prompt dialog ────────────────────────────────────────────────── */
.fin-dlg-overlay .stk-grid {
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.fin-dlg-overlay .stk-f { display: flex; flex-direction: column; gap: 0.3rem; }
.fin-dlg-overlay .stk-f span {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.fin-dlg-overlay .stk-f input {
  width: 8rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 0.55rem;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  background: var(--surface, #fff);
  color: inherit;
}
.fin-dlg-overlay .stk-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--fs-xs);
  color: var(--muted, #6b7280);
  padding-bottom: 0.35rem;
}
.fin-dlg-overlay .stk-nums { display: flex; flex-direction: column; gap: 0.5rem; }
.fin-dlg-overlay .stk-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "num drop" "flag flag";
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.fin-dlg-overlay .stk-num {
  grid-area: num;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 0.55rem;
  font: inherit;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  background: var(--surface, #fff);
  color: inherit;
}
.fin-dlg-overlay .stk-num:focus { outline: 2px solid var(--accent, #1d4ed8); outline-offset: 1px; }
.fin-dlg-overlay .stk-num.bad { border-color: #dc2626; }
.fin-dlg-overlay .stk-drop {
  grid-area: drop;
  width: 1.7rem; height: 1.7rem;
  border: 0; border-radius: 0.45rem;
  background: transparent; color: var(--muted, #6b7280);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.fin-dlg-overlay .stk-drop:hover { background: #fee2e2; color: #b91c1c; }
.fin-dlg-overlay .stk-flag {
  grid-area: flag;
  font-size: var(--fs-2xs);
  min-height: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.fin-dlg-overlay .stk-flag.good { color: #15803d; }
.fin-dlg-overlay .stk-flag.bad { color: #b91c1c; }
.fin-dlg-overlay .stk-note {
  margin: 0.7rem 0 0;
  font-size: var(--fs-2xs);
  color: var(--muted, #6b7280);
}
.fin-dlg-overlay .lnk-quiet {
  margin-top: 0.55rem;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  color: var(--accent, #1d4ed8);
  padding: 0.15rem 0;
}

/* ── screen freeze ───────────────────────────────────────────────────────
   Blocks the whole portal while an irreversible request is in flight. */
#fin-portal .fin-freeze {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
#fin-portal .fin-freeze[hidden] { display: none !important; }
#fin-portal .fin-freeze-b {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.25rem;
  border-radius: 0.8rem;
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.28);
}
#fin-portal .fin-spin {
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  border: 2px solid rgba(127, 127, 127, 0.3);
  border-top-color: var(--accent, #1d4ed8);
  animation: cws-spin 0.7s linear infinite;
}
@keyframes cws-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #fin-portal .fin-spin { animation-duration: 2s; }
}
html[data-fin-theme="dark"] #fin-portal .fin-freeze-b {
  background: #111827;
  color: #e5e7eb;
}


/* ── invoice detail dialog ───────────────────────────────────────────────── */
.fin-dlg-overlay .inv-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem;
}
.fin-dlg-overlay .inv-money { display: flex; flex-direction: column; gap: 0.2rem; }
.fin-dlg-overlay .inv-money span {
  font-size: var(--fs-2xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted, #6b7280); font-weight: var(--fw-semibold);
}
.fin-dlg-overlay .inv-money b {
  font-size: 1.45rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.fin-dlg-overlay .inv-money b.ok { color: #15803d; }
.fin-dlg-overlay .inv-money b.warn { color: #b45309; }
.fin-dlg-overlay .inv-money b.err { color: #b91c1c; }
.fin-dlg-overlay .inv-kvs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1rem; margin-bottom: 0.9rem;
}
.fin-dlg-overlay .inv-kv { display: flex; justify-content: space-between; gap: 0.6rem; font-size: var(--fs-xs); }
.fin-dlg-overlay .inv-kv span { color: var(--muted, #6b7280); }
.fin-dlg-overlay .inv-kv b { font-weight: var(--fw-semibold); text-align: right; }
.fin-dlg-overlay .inv-sec {
  font-size: var(--fs-2xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted, #6b7280); font-weight: var(--fw-semibold);
  margin: 0.9rem 0 0.35rem;
}
.fin-dlg-overlay .inv-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.fin-dlg-overlay .inv-tbl td {
  padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--line-soft, rgba(148,163,184,0.18));
}
.fin-dlg-overlay .inv-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-dlg-overlay .inv-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.fin-dlg-overlay .btn.danger-txt { color: #b91c1c; }
.fin-dlg-overlay .btn.danger-txt:hover { background: #fee2e2; }
.fin-dlg-overlay .inv-note {
  margin: 0.7rem 0 0; font-size: var(--fs-2xs); color: var(--muted, #6b7280);
}
#fin-portal tr.row-click { cursor: pointer; }


/* ── a billed job card is a record, not a worksheet ──────────────────────── */
#fin-portal .act.locked { opacity: 0.82; cursor: default; }
#fin-portal .act.locked .act-box { cursor: not-allowed; }
#fin-portal .card-note {
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--line, #e5e7eb);
  color: var(--muted, #6b7280);
  font-size: var(--fs-2xs);
  line-height: 1.5;
}



/* ==========================================================================
   SAVANNA CARWASH - STRICTLY SCOPED DUAL THEME ENGINE (LIGHT & DARK)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Outfit:wght@500;600;700;800;900&display=swap");

#fin-portal {
  font-family: "Plus Jakarta Sans", "Outfit", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* 1. UNIVERSAL NO-OVERLAP GEOMETRY */
#fin-portal .field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 0 16px 0 !important;
  position: static !important;
  height: auto !important;
}

#fin-portal .field label {
  display: block !important;
  position: static !important;
  font-family: "Outfit", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

#fin-portal .field input,
#fin-portal .field select,
#fin-portal .field textarea {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  outline: none !important;
}

#fin-portal .field textarea {
  height: auto !important;
  min-height: 85px !important;
}

#fin-portal .filter-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

#fin-portal .filter-bar .field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 320px !important;
  margin: 0 !important;
}

#fin-portal .filter-bar .btn,
#fin-portal .filter-bar button {
  height: 44px !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

#fin-portal .card-h {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  padding: 0 0 14px 0 !important;
  margin: 0 0 16px 0 !important;
  box-shadow: none !important;
}

#fin-portal .fin-titles {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: transparent !important;
}

#fin-portal .fin-titles h3,
#fin-portal .card-h h3 {
  font-family: "Outfit", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

#fin-portal .fin-titles .hint,
#fin-portal .card-h .hint {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

#fin-portal .jobcard-head {
  background: transparent !important;
  border: none !important;
  margin-bottom: 16px !important;
}

#fin-portal .omni,
#fin-portal .search-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

#fin-portal .omni input,
#fin-portal #omniInput {
  padding-left: 44px !important;
  padding-right: 48px !important;
  height: 42px !important;
  border-radius: 9999px !important;
}

#fin-portal .omni svg {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* 2. LIGHT THEME RULES (No dark pills or black boxes) */
html[data-fin-theme="light"] #fin-portal,
#fin-portal:not([data-theme="dark"]) {
  background: #f8fafc !important;
  color: #0f172a !important;
}

html[data-fin-theme="light"] #fin-portal .card,
#fin-portal:not([data-theme="dark"]) .card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

html[data-fin-theme="light"] #fin-portal .topbar,
#fin-portal:not([data-theme="dark"]) .topbar {
  background: #ffffff !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

html[data-fin-theme="light"] #fin-portal .sidebar,
#fin-portal:not([data-theme="dark"]) .sidebar {
  background: #ffffff !important;
  border-right: 1.5px solid #e2e8f0 !important;
}

html[data-fin-theme="light"] #fin-portal .prof-switch,
#fin-portal:not([data-theme="dark"]) .prof-switch {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-fin-theme="light"] #fin-portal .prof-btn,
#fin-portal:not([data-theme="dark"]) .prof-btn {
  color: #64748b !important;
}

html[data-fin-theme="light"] #fin-portal .prof-btn[aria-selected="true"],
#fin-portal:not([data-theme="dark"]) .prof-btn[aria-selected="true"] {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
}

html[data-fin-theme="light"] #fin-portal .omni input,
#fin-portal:not([data-theme="dark"]) .omni input {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-fin-theme="light"] #fin-portal .omni svg,
#fin-portal:not([data-theme="dark"]) .omni svg {
  color: #64748b !important;
}

html[data-fin-theme="light"] #fin-portal .kpi,
#fin-portal:not([data-theme="dark"]) .kpi {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

html[data-fin-theme="light"] #fin-portal .k-label,
#fin-portal:not([data-theme="dark"]) .k-label {
  color: #64748b !important;
  font-weight: 800 !important;
}

html[data-fin-theme="light"] #fin-portal .k-fig,
#fin-portal:not([data-theme="dark"]) .k-fig {
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 2rem !important;
}

html[data-fin-theme="light"] #fin-portal .k-sub,
#fin-portal:not([data-theme="dark"]) .k-sub {
  color: #0284c7 !important;
}

html[data-fin-theme="light"] #fin-portal .card-h,
#fin-portal:not([data-theme="dark"]) .card-h {
  border-bottom: 1.5px solid #f1f5f9 !important;
}

html[data-fin-theme="light"] #fin-portal .fin-titles h3,
#fin-portal:not([data-theme="dark"]) .fin-titles h3 {
  color: #0f172a !important;
}

html[data-fin-theme="light"] #fin-portal .fin-titles .hint,
#fin-portal:not([data-theme="dark"]) .fin-titles .hint {
  color: #64748b !important;
}

html[data-fin-theme="light"] #fin-portal .field label,
#fin-portal:not([data-theme="dark"]) .field label {
  color: #0284c7 !important;
}

html[data-fin-theme="light"] #fin-portal .field input,
html[data-fin-theme="light"] #fin-portal .field select,
html[data-fin-theme="light"] #fin-portal .field textarea,
#fin-portal:not([data-theme="dark"]) .field input,
#fin-portal:not([data-theme="dark"]) .field select,
#fin-portal:not([data-theme="dark"]) .field textarea {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-fin-theme="light"] #fin-portal .svc-row,
#fin-portal:not([data-theme="dark"]) .svc-row {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

html[data-fin-theme="light"] #fin-portal .svc-row input,
#fin-portal:not([data-theme="dark"]) .svc-row input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-fin-theme="light"] #fin-portal .svc-row button[data-nr-del],
#fin-portal:not([data-theme="dark"]) .svc-row button[data-nr-del] {
  background: #fee2e2 !important;
  border: 1px solid #fca5a5 !important;
  color: #ef4444 !important;
}

html[data-fin-theme="light"] #fin-portal .geo-bar,
#fin-portal:not([data-theme="dark"]) .geo-bar {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
}

html[data-fin-theme="light"] #fin-portal .geo-bar button,
#fin-portal:not([data-theme="dark"]) .geo-bar button {
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}

html[data-fin-theme="light"] #fin-portal .empty,
#fin-portal:not([data-theme="dark"]) .empty {
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 12px !important;
  color: #64748b !important;
  padding: 24px !important;
}

html[data-fin-theme="light"] #fin-portal table.ledger,
#fin-portal:not([data-theme="dark"]) table.ledger {
  color: #0f172a !important;
}

html[data-fin-theme="light"] #fin-portal table.ledger th,
#fin-portal:not([data-theme="dark"]) table.ledger th {
  color: #475569 !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

html[data-fin-theme="light"] #fin-portal table.ledger td,
#fin-portal:not([data-theme="dark"]) table.ledger td {
  background: #ffffff !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #1e293b !important;
}

html[data-fin-theme="light"] #fin-portal table.ledger tr:hover td,
#fin-portal:not([data-theme="dark"]) table.ledger tr:hover td {
  background: #f0f9ff !important;
}

/* 3. DARK THEME RULES (Pure Sapphire Luxury) */
html[data-fin-theme="dark"] #fin-portal,
#fin-portal[data-theme="dark"] {
  background: #071322 !important;
  color: #ffffff !important;
}

html[data-fin-theme="dark"] #fin-portal .card,
#fin-portal[data-theme="dark"] .card {
  background: #0b1c33 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

html[data-fin-theme="dark"] #fin-portal .topbar,
#fin-portal[data-theme="dark"] .topbar {
  background: rgba(11, 28, 51, 0.9) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-fin-theme="dark"] #fin-portal .sidebar,
#fin-portal[data-theme="dark"] .sidebar {
  background: rgba(11, 28, 51, 0.95) !important;
  border-right: 1.5px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-fin-theme="dark"] #fin-portal .omni input,
#fin-portal[data-theme="dark"] .omni input {
  background: #071322 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

html[data-fin-theme="dark"] #fin-portal .kpi,
#fin-portal[data-theme="dark"] .kpi {
  background: linear-gradient(145deg, #0b1c33 0%, #071322 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-fin-theme="dark"] #fin-portal .k-label,
#fin-portal[data-theme="dark"] .k-label {
  color: #94a3b8 !important;
}

html[data-fin-theme="dark"] #fin-portal .k-fig,
#fin-portal[data-theme="dark"] .k-fig {
  color: #ffffff !important;
}

html[data-fin-theme="dark"] #fin-portal .k-sub,
#fin-portal[data-theme="dark"] .k-sub {
  color: #38bdf8 !important;
}

html[data-fin-theme="dark"] #fin-portal .field label,
#fin-portal[data-theme="dark"] .field label {
  color: #38bdf8 !important;
}

html[data-fin-theme="dark"] #fin-portal .field input,
html[data-fin-theme="dark"] #fin-portal .field select,
html[data-fin-theme="dark"] #fin-portal .field textarea,
#fin-portal[data-theme="dark"] .field input,
#fin-portal[data-theme="dark"] .field select,
#fin-portal[data-theme="dark"] .field textarea {
  background: #071322 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

html[data-fin-theme="dark"] #fin-portal .empty,
#fin-portal[data-theme="dark"] .empty {
  background: #071322 !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  color: #94a3b8 !important;
  padding: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM FEATURES: QUICK SEARCH, PHOTO STUDIO, TIMELINE, RECONCILIATION, RATING
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Spotlight / Omnibar Quick Search Dropdown ── */
.fin-search-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 440px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
  z-index: 1000;
  padding: 6px;
}
html[data-fin-theme="dark"] .fin-search-drop {
  background: #0b1526;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
}
.cws-search-category {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 6px 10px 4px 10px;
  margin-top: 4px;
}
.cws-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.cws-search-item:hover,
.cws-search-item.is-selected {
  background: rgba(37, 99, 235, 0.08);
}
html[data-fin-theme="dark"] .cws-search-item:hover,
html[data-fin-theme="dark"] .cws-search-item.is-selected {
  background: rgba(59, 130, 246, 0.18);
}
.cws-search-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
html[data-fin-theme="dark"] .cws-search-icon {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
.cws-search-texts {
  flex: 1;
  min-width: 0;
}
.cws-search-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-fin-theme="dark"] .cws-search-title {
  color: #f1f5f9;
}
.cws-search-subtitle {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 2. Before / After Photo Studio ── */
.cws-photo-studio {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.8) 100%);
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  border-radius: 14px;
  padding: 16px;
  margin-top: 12px;
}
html[data-fin-theme="dark"] .cws-photo-studio {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(10, 15, 30, 0.7) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}
.cws-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.cws-photo-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000000;
  border: 1px solid rgba(0, 0, 0, 0.08);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cws-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cws-photo-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.cws-photo-tag.before {
  background: rgba(239, 68, 68, 0.85);
  color: #ffffff;
}
.cws-photo-tag.after {
  background: rgba(16, 185, 129, 0.9);
  color: #ffffff;
}
.cws-photo-empty {
  color: #94a3b8;
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
}

/* ── 3. Visual Job Status Timeline ── */
.cws-timeline-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 8px 8px 8px;
  overflow-x: auto;
}
.cws-tl-connector {
  position: absolute;
  top: 28px;
  left: 30px;
  right: 30px;
  height: 3px;
  background: #e2e8f0;
  z-index: 1;
}
html[data-fin-theme="dark"] .cws-tl-connector {
  background: rgba(255, 255, 255, 0.12);
}
.cws-tl-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 100px;
  flex: 1;
}
.cws-tl-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}
.cws-tl-node.done .cws-tl-circle {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}
.cws-tl-node.active .cws-tl-circle {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.25);
  animation: cws-pulse-ring 1.8s infinite;
}
@keyframes cws-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.cws-tl-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
html[data-fin-theme="dark"] .cws-tl-label {
  color: #e2e8f0;
}
.cws-tl-time {
  font-size: 0.6875rem;
  color: var(--muted);
}

/* ── 4. 5-Star Customer Rating & Feedback ── */
.cws-rating-stars {
  display: flex;
  gap: 4px;
  font-size: 24px;
  color: #cbd5e1;
  cursor: pointer;
}
.cws-rating-stars .star.active {
  color: #f59e0b;
}
.cws-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #fef3c7;
  color: #b45309;
  font-weight: 700;
  font-size: 0.75rem;
}
html[data-fin-theme="dark"] .cws-rating-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

/* ── 5. Payment Reconciliation Smart Badges ── */
.cws-match-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
}
.cws-match-badge.matched {
  background: #dcfce7;
  color: #15803d;
}
.cws-match-badge.partial {
  background: #fef9c3;
  color: #854d0e;
}
.cws-match-badge.unmatched {
  background: #fee2e2;
  color: #b91c1c;
}