/*
* CashFlow Operator — Admin Stylesheet v0.5.3
* Uses SS Core design tokens. No border-radius anywhere per spec.
* Full dark mode coverage. AI analysis panel styles.
*/
/* ── Header with time range chips ── */
.cfo-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.cfo-header h1 { margin:0; font-size:18px; font-weight:700; color:var(--ss-text-primary, #0f172a); }
.cfo-header-tools { display:flex; gap:6px; align-items:center; }
.cfo-time-chips { display:flex; gap:4px; flex-wrap:wrap; }
.cfo-chip { display:inline-block; padding:5px 12px; font-size:11px; font-weight:600; text-decoration:none; color:var(--ss-text-secondary, #64748b); background:var(--ss-bg-white, #fff); border:1px solid var(--ss-border, #e2e8f0); transition:all .12s; cursor:pointer; }
.cfo-chip:hover { color:var(--ss-text-primary, #0f172a); background:#e2e8f0; text-decoration:none; }
.cfo-chip.active { background:#059669; color:#fff; border-color:#059669; }
/* ── Tab Bar (7 tabs) ── */
.cfo-tabs { display:flex; gap:0; border-bottom:2px solid var(--ss-border, #e2e8f0); background:var(--ss-bg-white, #fff); padding:0 4px; flex-wrap:wrap; margin:0 0 20px; }
.cfo-tab { display:inline-block; padding:11px 16px; font-size:13px; font-weight:700; color:var(--ss-text-muted, #94a3b8); text-decoration:none; text-transform:uppercase; letter-spacing:.03em; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .12s, border-color .12s; cursor:pointer; user-select:none; }
.cfo-tab:hover { color:#475569; border-bottom-color:#cbd5e1; text-decoration:none; }
.cfo-tab .cfo-tab-badge { display:inline-block; background:#fef3c7; color:#92400e; font-size:10px; font-weight:700; padding:1px 6px; margin-left:5px; vertical-align:middle; }
/* ── Sub-pills (settings sections) ── */
.cfo-sub-pills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.cfo-pill { display:inline-block; padding:6px 16px; font-size:12px; font-weight:600; text-decoration:none; color:var(--ss-text-secondary, #64748b); background:var(--ss-bg-white, #fff); border:1px solid var(--ss-border, #e2e8f0); transition:all .12s; cursor:pointer; }
.cfo-pill:hover { color:var(--ss-text-primary, #0f172a); background:#e2e8f0; text-decoration:none; }
.cfo-pill.active { background:var(--ss-text-primary, #0f172a); color:#fff; border-color:var(--ss-text-primary, #0f172a); }
/* ── KPI Cards ── */
.cfo-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-bottom:20px; }
.cfo-kpi-5 { grid-template-columns:repeat(5,1fr); }
.cfo-kpi-6 { grid-template-columns:repeat(6,1fr); }
@media(max-width:1200px) { .cfo-kpi-5, .cfo-kpi-6 { grid-template-columns:repeat(3,1fr); } }
@media(max-width:1100px) { .cfo-kpi-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px) { .cfo-kpi-grid,.cfo-kpi-5,.cfo-kpi-6 { grid-template-columns:1fr; } }
.cfo-kpi { background:var(--ss-bg-white, #fff); border:1px solid var(--ss-border, #e2e8f0); padding:16px 20px; }
.cfo-kpi-label { font-size:10px; font-weight:700; color:var(--ss-text-muted, #94a3b8); text-transform:uppercase; letter-spacing:.05em; margin:0 0 4px; }
.cfo-kpi-value { font-size:22px; font-weight:800; color:var(--ss-text-primary, #0f172a); line-height:1.2; }
.cfo-kpi-sub { font-size:11px; color:var(--ss-text-muted, #94a3b8); margin-top:2px; }
/* ── Cards ── */
.cfo-card { background:var(--ss-bg-white, #fff); border:1px solid var(--ss-border, #e2e8f0); padding:20px 24px; margin-bottom:1px; }
.cfo-card h2 { margin:0 0 16px; padding:0 0 10px; border-bottom:1px solid var(--ss-border-light, #f1f5f9); font-size:13px; font-weight:700; color:var(--ss-text-primary, #0f172a); }
.cfo-card-flush { background:var(--ss-bg-white, #fff); border:1px solid var(--ss-border, #e2e8f0); margin-bottom:1px; padding:0; }
.cfo-card-flush .cfo-card-header { padding:16px 20px; border-bottom:1px solid var(--ss-border, #e2e8f0); display:flex; justify-content:space-between; align-items:center; }
.cfo-card-flush .cfo-card-header h3 { margin:0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ss-text-primary, #0f172a); }
/* ── Filters ── */
.cfo-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; padding:12px 20px; background:#f8fafc; border:1px solid var(--ss-border, #e2e8f0); margin-bottom:1px; }
.cfo-filters select, .cfo-filters input[type="text"], .cfo-filters input[type="search"] { font-size:12px; padding:5px 10px; border:1px solid #d1d5db; background:var(--ss-bg-white, #fff); color:var(--ss-text-primary, #0f172a); height:30px; }
.cfo-filters select { min-width:120px; }
.cfo-filter-label { display:block; font-size:10px; font-weight:700; color:var(--ss-text-muted, #94a3b8); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.cfo-chip-row { display:flex; gap:6px; flex-wrap:wrap; }
/* ── Batch bar ── */
.cfo-batch-bar { display:none; align-items:center; gap:12px; padding:10px 20px; background:#eff6ff; border:1px solid #bfdbfe; margin-bottom:1px; font-size:12px; color:#1e40af; }
.cfo-batch-bar.visible { display:flex; }
.cfo-batch-bar .cfo-batch-count { font-weight:700; }
/* ── Data Table ── */
.cfo-table { width:100%; border-collapse:collapse; font-size:12px; }
.cfo-table th { text-align:left; padding:10px 12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#5e4e36; border-bottom:1px solid var(--ss-border, #e2e8f0); background:#f1ebdd; white-space:nowrap; }
.cfo-table td { padding:8px 12px; border-bottom:1px solid var(--ss-border-light, #f1f5f9); color:var(--ss-text-primary, #0f172a); vertical-align:middle; }
/* v0.31.0 — prototype warm theme: white rows, subtle tan stripe, warm hover */
.cfo-table tbody tr:nth-child(even) { background:#faf6ee; }
.cfo-table tbody tr:hover { background:#f1ebdd; }
.cfo-table th.right,.cfo-table td.right { text-align:right; }
.cfo-table td.mono { font-family:ui-monospace,SFMono-Regular,monospace; font-size:11px; color:#059669; }
.cfo-table td.nowrap { white-space:nowrap; }
.cfo-table td.muted { color:var(--ss-text-muted, #94a3b8); font-size:11px; }
.cfo-table .cfo-row-review { background:rgba(245,158,11,.04); }
.cfo-table .cfo-row-wrong { background:rgba(239,68,68,.04); }
.cfo-table tfoot td { font-weight:700; border-top:2px solid var(--ss-border, #e2e8f0); background:#fafbfc; }
.cfo-table input[type="checkbox"] { margin:0; vertical-align:middle; }
/* ── Badges ── */
.cfo-badge { display:inline-block; padding:2px 10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.cfo-badge-match { background:#d1fae5; color:#065f46; }
.cfo-badge-auto { background:#dbeafe; color:#1e40af; }
.cfo-badge-review { background:#fef3c7; color:#92400e; }
.cfo-badge-pending { background:#fee2e2; color:#991b1b; }
.cfo-badge-rejected { background:#f1f5f9; color:#475569; }
/* ── Entity elements ── */
.cfo-entity-pill { display:inline-block; padding:2px 8px; font-size:10px; font-weight:700; }
.cfo-entity-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
/* ── Amounts ── */
.cfo-amt-pos { color:var(--ss-success, #059669); font-weight:700; }
.cfo-amt-neg { color:var(--ss-danger, #dc2626); font-weight:700; }
/* ── Reconcile stepper (v0.32.01 — prototype 6-step connected boxed) ── */
/* v0.32.38 — stepper sits flush at the top of the framed card, tabs on top,
content directly below (gap closed) — like the Budget area. */
.cfo-steps { display:flex; gap:1px; background:var(--ss-border, #e2e8f0); border:0; border-bottom:1px solid var(--ss-border, #e2e8f0); margin-bottom:0; }
.cfo-step6 { flex:1 1 0; display:flex; align-items:center; gap:9px; padding:11px 12px; background:#fff; cursor:pointer; min-width:0; border:0; text-align:left; font:inherit; }
.cfo-step6:hover { background:#f1f5f9; }
.cfo-step6.active { box-shadow:inset 0 -3px 0 #0f766e; }
.cfo-step6 .circle { width:26px; height:26px; display:grid; place-items:center; font-weight:800; font-size:12px; background:var(--ss-border, #e2e8f0); color:#64748b; flex:0 0 auto; }
.cfo-step6.active .circle { background:#0f172a; color:#fff; }
.cfo-step6.done .circle { background:#059669; color:#fff; }
.cfo-step6 .lab { min-width:0; display:flex; flex-direction:column; }
.cfo-step6 .lt { display:block; font-size:12px; font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#94a3b8; }
.cfo-step6.active .lt { color:#0f172a; } .cfo-step6.done .lt { color:#475569; }
.cfo-step6 .ld { display:block; font-size:10px; color:#94a3b8; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* v0.32.14 — contextual sub-nav (actions within Prepare / CPA phases) */
.cfo-substeps { display:flex; gap:4px; border:1px solid var(--ss-border, #e2e8f0); border-top:none; background:#f8fafc; padding:5px 8px; }
.cfo-substep { background:none; border:0; padding:6px 13px; font-size:12px; font-weight:600; color:#64748b; cursor:pointer; border-bottom:2px solid transparent; }
.cfo-substep:hover { color:#0f172a; }
.cfo-substep.active { color:#0f172a; border-bottom-color:#0f766e; }
.cfo-stage-wrap { background:#fff; border:1px solid var(--ss-border, #e2e8f0); border-top:none; padding:24px 26px 28px; }
.cfo-stage-wrap h2.st { font-size:18px; font-weight:800; margin:0 0 4px; }
.cfo-stage-wrap p.sd { font-size:13px; color:#64748b; margin:0 0 18px; max-width:720px; line-height:1.5; }
/* stat tiles (prototype) */
.cfo-tiles { display:flex; gap:1px; background:var(--ss-border, #e2e8f0); border:1px solid var(--ss-border, #e2e8f0); margin:14px 0; flex-wrap:wrap; }
.cfo-tile { flex:1; min-width:120px; background:#fff; padding:13px 15px; }
.cfo-tile .k { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8; display:flex; align-items:center; gap:6px; }
.cfo-tile .v { font-size:24px; font-weight:800; line-height:1.1; margin-top:3px; }
.cfo-tile .d { font-size:11px; color:#64748b; }
.cfo-tile .sw { width:9px; height:9px; display:inline-block; }
.cfo-tile .sw.rule { background:#3b5bdb; } .cfo-tile .sw.hist { background:#0f766e; } .cfo-tile .sw.ai { background:#7c3aed; }
/* banners (prototype) */
.cfo-bnr { display:flex; gap:12px; align-items:center; padding:11px 15px; font-size:12.5px; margin:14px 0; }
.cfo-bnr.ok { background:#d1fae5; border:1px solid #86efac; color:#065f46; }
.cfo-bnr.warn { background:#fef3c7; border:1px solid #fcd34d; color:#92400e; }
.cfo-bnr.info { background:#eef2ff; border:1px solid #c7d2fe; color:#3730a3; }
.cfo-bnr .big { font-size:18px; font-weight:800; }
/* ⓘ info affordance + qb pill (stage corner) */
.cfo-sthead { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.cfo-sth-aff { display:flex; align-items:center; gap:8px; flex:0 0 auto; padding-top:1px; }
.cfo-infobtn { width:26px; height:26px; border:1px solid var(--ss-border, #e2e8f0); background:#fff; cursor:pointer; font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; color:#64748b; font-size:14px; display:grid; place-items:center; line-height:1; }
.cfo-infobtn:hover { border-color:#7c3aed; color:#7c3aed; }
.cfo-infobtn.on { background:#7c3aed; border-color:#7c3aed; color:#fff; }
/* AI-engine explainer (prototype, collapses behind ⓘ) */
.cfo-aieng { border:1px solid #7c3aed; background:#faf8ff; margin:16px 0; }
.cfo-aieng-h { background:#7c3aed; color:#fff; padding:9px 15px; font-weight:800; font-size:13px; }
.cfo-aieng-b { padding:16px; }
.cfo-flow { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.cfo-flowbox { flex:1; min-width:150px; border:1px solid var(--ss-border, #e2e8f0); background:#fff; padding:11px 13px; }
.cfo-flowbox .ft { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#7c3aed; margin-bottom:6px; }
.cfo-flowbox ul { margin:0; padding-left:15px; font-size:11.5px; color:#64748b; line-height:1.55; }
.cfo-flowbox .llm { font-size:13px; font-weight:800; color:#0f172a; }
.cfo-flowarrow { display:flex; align-items:center; justify-content:center; font-size:18px; color:#7c3aed; padding:0 8px; }
.cfo-loop { margin-top:13px; padding:11px 13px; background:#fff; border:1px dashed #7c3aed; font-size:12px; color:#0f172a; }
.cfo-loop b { color:#7c3aed; }
.cfo-slider-row { display:flex; align-items:center; gap:10px; margin-top:6px; }
.cfo-slider-row input[type=range] { width:180px; }
.cfo-slider-row .val { font-family:ui-monospace,Menlo,monospace; font-weight:800; font-size:16px; color:#7c3aed; min-width:16px; }
.cfo-navbtns { display:flex; gap:10px; margin-top:22px; align-items:center; }
.cfo-navbtns .spacer { flex:1; }
/* ── Prepare landing — 3 numbered cards (v0.32.19, #9/#10) ── */
.cfo-prep-cards { display:flex; flex-direction:column; gap:14px; }
.cfo-prep-card { display:flex; gap:16px; background:#fff; border:1px solid var(--ss-border, #e2e8f0); padding:20px 22px; align-items:flex-start; }
.cfo-prep-card.done { background:#f8fafc; border-color:#e2e8f0; opacity:0.72; }
.cfo-prep-num { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; background:#0f172a; color:#fff; font-weight:800; font-size:14px; border-radius:50%; }
.cfo-prep-card.done .cfo-prep-num { background:#059669; }
.cfo-prep-body { flex:1; min-width:0; }
.cfo-prep-h { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cfo-prep-h h3 { font-size:16px; font-weight:800; margin:0; color:#0f172a; }
.cfo-prep-d { font-size:12.5px; color:#64748b; line-height:1.5; margin:4px 0 14px; max-width:680px; }
.cfo-prep-act { font-size:13px; }
.cfo-prep-hint { font-size:11.5px; color:#94a3b8; margin:9px 0 0; }
.cfo-prep-link { font-size:11.5px; color:#0284c7; font-weight:600; margin-left:10px; text-decoration:none; }
.cfo-prep-done { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#065f46; }
.cfo-prep-done::before { content:'\2713'; color:#059669; font-weight:800; }
.cfo-prep-controls { display:flex; gap:28px; flex-wrap:wrap; align-items:flex-end; }
.cfo-prep-field { display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8; }
.cfo-prep-field input[type=date] { font-size:13px; padding:6px 8px; font-weight:400; text-transform:none; letter-spacing:normal; color:#0f172a; }
.cfo-prep-resume { display:flex; align-items:center; justify-content:space-between; gap:16px; background:#eef2ff; border:1px solid #c7d2fe; color:#3730a3; padding:13px 18px; margin-bottom:14px; font-size:13px; flex-wrap:wrap; }
.cfo-prep-resume .ss-btn { flex:0 0 auto; }
/* ── Unified Reconcile Review (v0.32.0 — prototype single-surface) ── */
.cfo-rev-table td { font-size:12.5px; }
.cfo-rev-table td.amt { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; text-align:right; font-weight:700; white-space:nowrap; }
.cfo-rev-table .payee { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cfo-rev-table .pdesc { font-size:11px; color:var(--ss-text-muted, #94a3b8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cfo-rev-table tbody tr.staged { background:#f5e9cf; }
.cfo-rev-table tbody tr.flagged { background:#f8e2d5; }
.cfo-rev-table tbody tr.flagged:hover { background:#f4d6c4; }
/* source badge */
.cfo-srcbadge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:10.5px; font-weight:800; white-space:nowrap; }
.cfo-srcbadge .ic { width:7px; height:7px; }
.cfo-srcbadge.rule { background:#e7ecfc; color:#28409c; } .cfo-srcbadge.rule .ic { background:#3b5bdb; }
.cfo-srcbadge.hist { background:#d1fae5; color:#065f46; } .cfo-srcbadge.hist .ic { background:#059669; }
.cfo-srcbadge.ai { background:#ede9fe; color:#5b21b6; } .cfo-srcbadge.ai .ic { background:#7c3aed; }
.cfo-srcbadge.man { background:#f1f5f9; color:#475569; } .cfo-srcbadge.man .ic { background:#94a3b8; }
.cfo-conf { font-size:10px; font-weight:800; text-transform:uppercase; margin-top:3px; }
.cfo-conf.high { color:#059669; } .cfo-conf.medium { color:#92400e; } .cfo-conf.low { color:#dc2626; }
.cfo-why { font-size:11.5px; color:var(--ss-text-secondary, #64748b); line-height:1.3; }
/* per-row flag chip: faint-green "ready" ↔ terracotta "send back" */
.cfo-rowflag { width:30px; height:24px; display:inline-grid; place-items:center; border:1px solid var(--ss-border, #e2e8f0); background:#fff; cursor:pointer; font-size:13px; line-height:1; padding:0; }
.cfo-rowflag.ready { color:#3f8f5f; border-color:#cfe6d4; background:#f0f7f1; }
.cfo-rowflag.ready:hover { border-color:#bf5a36; color:#bf5a36; background:#fff; }
.cfo-rowflag.on { color:#fff; background:#bf5a36; border-color:#bf5a36; }
.cfo-rowflag.on:hover { background:#a84d2b; }
/* v0.32.31 — CPA per-row commit selection */
.cfo-cpa-commit:hover { border-color:#059669 !important; }
tr.cfo-cpa-queued { background:#ecfdf5 !important; }
/* v0.32.39 — Reconcile framed like the Budget area. Hero = plain bg (no frame).
Stepper views = ONE white card: tabs flush at the top, content edge-to-edge
directly below (no gap), NO inner borders — background colours separate the
sections. Only the tab borders + the outer card border stay. The QB/Live pill
floats above the card instead of pushing the tabs down. */
.cfo-recon-page { max-width:1180px; margin:0 auto; position:relative; }
.cfo-recon-page.framed { background:var(--ss-bg-white, #fff); border:1px solid var(--ss-border, #e2e8f0); box-shadow:0 1px 3px rgba(15,23,42,.05); padding:0; }
.cfo-shell.cfo-dark .cfo-recon-page.framed { box-shadow:0 1px 3px rgba(0,0,0,.25); }
/* v0.34.8 — Review (step 2) and CPA review (step 3) render a 9-col data
table (.cfo-rev-table), not prose/a form. The 1100/1180 reading-column
caps below are correct for Prepare/Settings/other framed Reconcile pages
but were crushing that table's columns (Entity measured 64px, Proposed
account/category 213px on a 1879px window — both selects clipped their
text). Scoped opt-out, same :has() pattern already used for the combobox
dropdown escape a few lines down — only pages that actually render the
table lose the cap; everything else keeps it. */
.cfo-content #cfo-tab-content:has(.cfo-rev-table) { max-width:none; }
.cfo-recon-page:has(.cfo-rev-table) { max-width:none; }
.cfo-recon-pill-float { position:absolute; top:-30px; right:2px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* edge-to-edge content, no inner card borders */
.cfo-recon-page.framed .cfo-card-flush { border:0; box-shadow:none; margin:0; }
.cfo-recon-page.framed .cfo-card-flush > .cfo-card-header { border-bottom:0; }
.cfo-recon-page.framed .cfo-rev-filters { border-bottom:0; }
.cfo-recon-page.framed .cfo-rev-foot { border-top:0; }
/* Prepare's cards keep a margin inside the card (the table goes edge-to-edge) */
.cfo-recon-page.framed .cfo-prep-cards, .cfo-recon-page.framed .cfo-prep-resume { margin-left:16px; margin-right:16px; }
/* v0.32.17 — Review filter tabs (Needs review / Staged / All) */
.cfo-rev-filters { display:flex; gap:4px; padding:8px 12px; border-bottom:1px solid var(--ss-border, #e2e8f0); background:#faf6ee; }
.cfo-rev-filter { background:none; border:0; padding:6px 13px; font-size:12px; font-weight:600; color:#64748b; cursor:pointer; border-bottom:2px solid transparent; }
.cfo-rev-filter:hover { color:#0f172a; }
.cfo-rev-filter.active { color:#0f172a; border-bottom-color:#7c3aed; }
.cfo-rev-filter b { color:#7c3aed; margin-left:3px; }
.cfo-rev-foot { display:flex; align-items:center; gap:14px; padding:12px 14px; border-top:1px solid var(--ss-border, #e2e8f0); background:#f1ebdd; flex-wrap:wrap; }
.cfo-rev-foot .stagedcount { font-size:13px; font-weight:700; } .cfo-rev-foot .stagedcount b { color:#3f8f5f; }
.cfo-rev-foot select { font:inherit; font-size:12px; padding:3px 7px; border:1px solid var(--ss-border, #e2e8f0); background:#fff; cursor:pointer; }
/* v0.32.12 — Accept toggle (green check = staged for CPA), sortable headers, accepted-row tint */
.cfo-accept { width:30px; height:24px; display:inline-grid; place-items:center; border:1px solid #cfe6d4; background:#fff; cursor:pointer; font-size:14px; line-height:1; padding:0; color:#bcd6c2; }
.cfo-accept:hover { border-color:#3f8f5f; color:#3f8f5f; }
.cfo-accept.on { background:#3f8f5f; border-color:#3f8f5f; color:#fff; }
.cfo-accept.on:hover { background:#357a50; }
/* v0.34.7 — manual "mark as internal / transfer" per-row action (matches the
set-aside strip's slate accent, not the green Accept button). */
.cfo-mark-internal { width:24px; height:24px; display:inline-grid; place-items:center; border:1px solid #cbd5e1; background:#fff; cursor:pointer; font-size:12px; line-height:1; padding:0; color:#94a3b8; margin-left:3px; }
.cfo-mark-internal:hover { border-color:#64748b; color:#475569; background:#f1f5f9; }
.cfo-rev-table tbody tr.accepted { background:#f0f7f1; }
.cfo-rev-table tbody tr.accepted:hover { background:#e6f1e8; }
.cfo-rev-table th.cfo-rev-sort { cursor:pointer; user-select:none; }
.cfo-rev-table th.cfo-rev-sort:hover { color:#0f172a; }
.cfo-rev-table th.cfo-rev-sort .arr { color:#7c3aed; font-size:9px; }
.cfo-rev-table th.cfo-th-center { text-align:center; }
/* v0.32.13 — single source pill, background colour = confidence (no l/m/h text) */
.cfo-srcpill { display:inline-block; min-width:66px; text-align:center; padding:4px 10px; font-size:10.5px; font-weight:800; letter-spacing:.02em; }
.cfo-srcpill.high { background:#d6f3e0; color:#0c5a37; }
.cfo-srcpill.med { background:#fdf0c8; color:#8a5a00; }
.cfo-srcpill.low { background:#fbe0e0; color:#9c2a2a; }
/* v0.32.47 — CPA send-back marker: a row the CPA returned to Needs review. */
.cfo-srcpill-back { display:inline-block; min-width:66px; text-align:center; padding:4px 10px; font-size:10.5px; font-weight:800; letter-spacing:.02em; background:#f3e2d2; color:#8a4b1f; }
/* v0.32.16 — AI progress bar (replaces the AI button while the tail runs) */
.cfo-aiprog { position:relative; display:inline-block; min-width:210px; height:28px; border:1px solid #c4b5fd; background:#f5f0ff; overflow:hidden; vertical-align:middle; }
.cfo-aiprog-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:#e3d9fb; transition:width .35s ease; }
.cfo-aiprog-txt { position:relative; display:flex; align-items:center; justify-content:center; height:100%; font-size:11px; font-weight:800; color:#6d28d9; padding:0 12px; white-space:nowrap; }
/* ── Chart ── */
.cfo-chart-wrap { background:var(--ss-bg-white, #fff); border:1px solid var(--ss-border, #e2e8f0); padding:20px 24px; margin-bottom:1px; }
.cfo-chart-title { margin:0 0 12px; font-size:11px; font-weight:700; color:var(--ss-text-primary, #0f172a); text-transform:uppercase; letter-spacing:.03em; }
/* ── Layout ── */
.cfo-row { display:flex; flex-wrap:wrap; gap:1px; margin-bottom:1px; }
.cfo-col { flex:1; min-width:280px; }
.cfo-col-half { flex:0 0 calc(50% - 1px); }
@media(max-width:900px) { .cfo-col-half { flex:0 0 100%; } }
.cfo-mb { margin-bottom:20px; }
.cfo-table-scroll { overflow-x:auto; }
/* v0.32.06 — overflow-x:auto coerces overflow-y to auto (CSS spec), which clips
the inline-row comboboxes' absolute dropdowns and makes the wrapper expand/
scroll when a dropdown opens near the bottom. Tables that contain a combobox
must let the dropdown escape — drop the scroll clip on those only.
CF-0019, 2026-09-17 — real bug: :has(.cfo-cb-list) matches whenever that
dropdown element merely EXISTS in the DOM, not whether it's actually open.
Combobox.mount() renders every row's (closed) dropdown with inline
style="display:none" (admin/js/cfo-app.js, ~line 1183) and only ever
toggles list.style.display between 'block'/'none' (~lines 1241/1250/1288/
1289/1298) — never a class. Since the Review table's every row carries a
combobox, this opt-out was PERMANENTLY active on that table regardless of
whether any dropdown was open, unconditionally reverting the v0.34.9
overflow-x:auto fallback back to overflow:visible — so once the table's
real min-width (~1250px, see v0.34.9 comment below) exceeded the window,
content bled off the right edge with no scrollbar instead of scrolling.
Confirmed live on redshiftconsulting.co (Glenn, 2026-09-17): table
measured 1335px in a 1153px box, computed overflow-x:visible, 6
.cfo-cb-list elements present and CLOSED (visible:false) inside the
scroll wrapper. Fix: scope the opt-out to an actually-OPEN list via its
own inline style, not its mere presence — restores the scrollbar the
rest of the time while still letting an open dropdown escape clipping. */
.cfo-table-scroll:has(.cfo-cb-list[style*="display: block"]) { overflow:visible; }
/* v0.34.8 — Entity + Proposed account/category floors for the Review and CPA
review comboboxes (.cfo-cb-entity/.cfo-cb-acct = Review; .cfo-cpa-cb-entity/
.cfo-cpa-cb-acct = CPA review — same shared .cfo-rev-table markup, same
crush). Combobox.mount() sets container.style.maxWidth inline (120px/240px
entity/acct in CPA, 150px/300px in Review) and the wrapping also
carries an inline width — both get squeezed further by table auto-layout
once the container is too narrow. min-width always wins over max-width in
the CSS sizing algorithm regardless of which is inline vs external, so
these floors hold even against Combobox's own inline style. Once the
table's natural width exceeds the container (e.g. on a narrow viewport,
or if the opt-out above doesn't apply), .cfo-table-scroll's overflow-x:auto
takes over and scrolls instead of crushing columns — including on mobile. */
.cfo-rev-table td:has(.cfo-cb-entity),
.cfo-rev-table td:has(.cfo-cpa-cb-entity) { min-width:150px; }
.cfo-rev-table td:has(.cfo-cb-acct),
.cfo-rev-table td:has(.cfo-cpa-cb-acct) { min-width:280px; }
.cfo-cb-entity, .cfo-cpa-cb-entity { min-width:150px; }
.cfo-cb-acct, .cfo-cpa-cb-acct { min-width:280px; }
/* v0.34.9 — v0.34.8 gave Entity/Account hard floors but left every other
.cfo-rev-table column unprotected. table-layout is the browser default
(auto): with two columns now pinned to 150/280px, the auto algorithm took
the shortfall out of whichever column it could shrink furthest — and
that's "Why" (free-flowing prose, the only column with wrappable text and
no width protection at all). Confirmed live on prod at a realistic ~1150-
1200px window (a normal laptop-width admin panel, not a wide monitor):
Why collapsed to ~100-130px and every row's reasoning text wrapped 10+
lines, blowing up row height across the whole table — worse than the bug
v0.34.8 fixed, since it now wrecks the table's vertical rhythm instead of
just clipping two cells' text. Payee was the other unprotected column
(nowrap + ellipsis on the inner .payee div lets its shrink toward 0
too, same mechanism, just truncates instead of exploding row height).
Date/Amount/Source/Accept don't need floors here: Date and Amount are
short unbreakable strings, the source badge (.cfo-srcpill) already carries
its own min-width:66px, and Accept's icon buttons have fixed pixel widths
— none of them can be crushed by auto-layout the way free text can.
Floors below (content-box; +24px for the table's 12px l/r cell padding):
Why 220→244px, Payee 130→154px. Added to Entity 174 + Account 304, the
table's real minimum is now ~1250px — legitimately wider than a ~1150-
1200px window, so .cfo-table-scroll's existing overflow-x:auto (unchanged)
correctly takes over and scrolls instead of squeezing any column below a
readable floor. At a wide window this floor sits well under the table's
natural rendered width, so nothing changes there. */
.cfo-rev-table td.cfo-why { min-width:220px; }
.cfo-rev-table td:has(.payee) { min-width:130px; }
/* v0.34.29 (CF-0025) — Reconcile Review responsive pass. The v0.34.8/.9 floors
put the table's natural minimum near 1250px, so anything narrower scrolled
sideways with Entity/Account/Why crowding the screen. Below 1200px lower the
floors (Why 160, Account 200, Entity 120) so the table fits sooner, keep
touch scrolling smooth, and pin Payee at the left edge so you always know
which row you are on while scrolling. Below 720px the main Review table
(.cfo-rev-main) stacks each row into a card using the data-label attributes
cfo-app.js puts on its cells. Colors use --ss-* tokens, corners stay square. */
@media (max-width: 1200px) {
.cfo-table-scroll { -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.cfo-rev-table td.cfo-why { min-width:160px; }
.cfo-rev-table td:has(.cfo-cb-entity),
.cfo-rev-table td:has(.cfo-cpa-cb-entity),
.cfo-cb-entity, .cfo-cpa-cb-entity { min-width:120px; }
.cfo-rev-table td:has(.cfo-cb-acct),
.cfo-rev-table td:has(.cfo-cpa-cb-acct),
.cfo-cb-acct, .cfo-cpa-cb-acct { min-width:200px; }
.cfo-rev-main tbody tr { background:var(--ss-bg-white, #fff); }
.cfo-rev-main th:nth-child(2),
.cfo-rev-main td.cfo-td-payee { position:sticky; left:0; z-index:2; box-shadow:1px 0 0 var(--ss-border, #e2e8f0); }
.cfo-rev-main th:nth-child(2) { background:#f1ebdd; z-index:3; }
.cfo-rev-main td.cfo-td-payee { background:inherit; }
}
@media (max-width: 720px) {
.cfo-rev-main, .cfo-rev-main tbody { display:block; width:100%; }
.cfo-rev-main thead { display:none; }
.cfo-rev-main tbody tr { display:block; margin:0 0 8px; padding:10px 12px; border:1px solid var(--ss-border, #e2e8f0); border-radius:0; }
.cfo-rev-main tbody td {
display:flex; align-items:center; justify-content:space-between; gap:12px;
width:auto !important; min-width:0 !important; max-width:none !important;
padding:5px 0; border-bottom:0; text-align:right; white-space:normal;
}
.cfo-rev-main tbody td[data-label]::before {
content:attr(data-label); flex:0 0 76px; text-align:left;
font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ss-text-muted, #94a3b8);
}
.cfo-rev-main td.cfo-td-payee { position:static; box-shadow:none; display:block; text-align:left; font-size:14px; }
.cfo-rev-main td.cfo-td-payee .payee, .cfo-rev-main td.cfo-td-payee .pdesc { white-space:normal; }
.cfo-rev-main td.cfo-why { text-align:left; display:block; }
.cfo-rev-main td.cfo-why::before { display:block; margin-bottom:2px; }
.cfo-rev-main td:has(.cfo-cb-entity), .cfo-rev-main td:has(.cfo-cb-acct) { display:block; text-align:left; }
.cfo-rev-main td:has(.cfo-cb-entity)::before, .cfo-rev-main td:has(.cfo-cb-acct)::before { display:block; margin-bottom:3px; }
.cfo-rev-main .cfo-cb-entity, .cfo-rev-main .cfo-cb-acct { width:100%; min-width:0; max-width:none !important; }
.cfo-rev-main td.cfo-td-actions { justify-content:flex-end; }
.cfo-rev-main td[colspan] { display:block; text-align:center; }
.cfo-rev-main .cfo-accept, .cfo-rev-main .cfo-mark-internal { width:40px; height:36px; }
}
/* ── v0.34.5 — "set aside" strip (internal transfers / card payments) ──
Collapsed by default: these rows are out of the review ladder, but the count
stays on screen so nothing is silently dropped. */
.cfo-setaside > summary { cursor:pointer; padding:12px 18px; font-size:12px; color:#475569; line-height:1.55; }
.cfo-setaside > summary strong { font-size:13px; color:#334155; }
.cfo-setaside .cfo-setaside-cta { color:#0284c7; font-weight:600; }
.cfo-setaside[open] .cfo-setaside-cta { display:none; }
/* ── Alerts ── */
.cfo-alert { padding:16px 20px; margin-bottom:1px; font-size:12px; border:1px solid; }
.cfo-alert-warn { background:#fffbeb; border-color:#fcd34d; color:#92400e; }
.cfo-alert h3 { margin:0 0 8px; font-size:13px; font-weight:700; }
/* ── Connection badges ── */
.cfo-status-connected { background:#dcfce7; color:#166534; padding:4px 12px; font-size:12px; font-weight:600; display:inline-block; }
/* ── Buttons (SS standard — no border-radius) ── */
.ss-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; font-size:12px; font-weight:600; border:1px solid var(--ss-border, #e2e8f0); background:var(--ss-bg-white, #fff); color:var(--ss-text-primary, #0f172a); border-radius:0; cursor:pointer; transition:all .12s; line-height:1.4; text-decoration:none; }
.ss-btn:hover { background:#f1f5f9; border-color:#94a3b8; text-decoration:none; }
.ss-btn-primary { background:var(--ss-button-bg, #1d1d1b); color:var(--ss-button-fg, #fff); border-color:var(--ss-button-bg, #1d1d1b); }
.ss-btn-primary:hover { background:#333; border-color:#333; color:var(--ss-button-fg, #fff); }
.ss-btn-sm { padding:4px 10px; font-size:11px; }
.ss-btn-danger { color:var(--ss-danger, #dc2626); border-color:#fca5a5; }
.ss-btn-danger:hover { background:#fef2f2; }
/* ── Form elements inside cards ── */
.cfo-card .form-table { margin:0; }
.cfo-card .form-table th { padding:10px 12px 10px 0; font-size:12px; font-weight:600; color:var(--ss-text-secondary, #64748b); vertical-align:top; width:160px; }
.cfo-card .form-table td { padding:10px 0; font-size:13px; }
.cfo-month-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.cfo-month-grid label { font-size:11px; color:var(--ss-text-muted, #94a3b8); }
.cfo-month-grid input { width:100%; padding:5px 8px; border:1px solid #d1d5db; font-size:12px; }
/* ── Pagination ── */
.cfo-pagination { padding:12px 20px; text-align:right; font-size:12px; color:var(--ss-text-secondary, #64748b); }
.cfo-pagination .page-numbers { display:inline-block; padding:4px 10px; border:1px solid var(--ss-border, #e2e8f0); background:var(--ss-bg-white, #fff); color:var(--ss-text-primary, #0f172a); font-size:12px; text-decoration:none; margin:0 2px; }
.cfo-pagination .page-numbers.current { background:#059669; color:#fff; border-color:#059669; }
/* ── Action icon buttons ── */
.cfo-icon-btn { background:none; border:1px solid #d1d5db; width:30px; height:28px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ss-text-secondary, #64748b); transition:all .12s; padding:0; }
.cfo-icon-btn:hover { background:#f1f5f9; color:var(--ss-text-primary, #0f172a); border-color:#94a3b8; }
.cfo-icon-btn svg { width:14px; height:14px; }
/* ── Sortable column headers ── */
.cfo-table th.sortable { cursor:pointer; user-select:none; }
.cfo-table th.sortable:hover { color:var(--ss-text-primary, #0f172a); }
.cfo-table th.sortable .cfo-sort-arrow { font-size:10px; margin-left:4px; opacity:.5; }
.cfo-table th.sortable.sorted .cfo-sort-arrow { opacity:1; }
/* ── Clickable transaction rows ── */
.cfo-table tbody tr.cfo-clickable { cursor:pointer; }
.cfo-table tbody tr.cfo-clickable:hover { background:#f0f4ff; }
/* ── Edit drawer ── */
.cfo-drawer { background:#f8fafc; border:1px solid var(--ss-border, #e2e8f0); border-top:3px solid #059669; padding:16px 20px; }
.cfo-drawer.open { display:block; }
/* ── Undo button ── */
.cfo-undo-btn { background:none; border:none; cursor:pointer; color:var(--ss-text-muted, #94a3b8); font-size:12px; padding:2px; }
.cfo-undo-btn:hover { color:#f59e0b; }
/* ── Dark mode toggle button ── */
/* v0.5.45 BR-05 — borderless, square 28x28, transparent fill that
lightens on hover. SVG icons inside size to 16x16 via .cfo-icon-btn. */
.cfo-theme-toggle { background:transparent; border:none; padding:0; font-size:14px; cursor:pointer; color:var(--ss-text-secondary, #64748b); line-height:1; }
.cfo-theme-toggle:hover { background:#f1f5f9; }
/* ── Bell icon + badge ── */
/* v0.5.45 BR-05 — borderless, square 28x28; badge anchored to the
icon corner. */
.cfo-bell-btn { background:transparent; border:none; padding:0; font-size:16px; cursor:pointer; position:relative; line-height:1; color:var(--ss-text-secondary, #64748b); }
.cfo-bell-badge { position:absolute; top:-2px; right:-2px; background:#ef4444; color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
/* v0.5.45 BR-05 — shared sizing/styling for topbar icon buttons.
Both .cfo-theme-toggle and .cfo-bell-btn apply this class for
consistent 28x28 hit targets and 16x16 SVG icon sizing. */
.cfo-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
color: var(--ss-text-secondary, #64748b);
line-height: 1;
position: relative;
}
.cfo-icon-btn:hover { background: #f1f5f9; }
.cfo-icon-btn svg { width: 16px; height: 16px; display: block; }
/* ── Modal overlay ── */
.cfo-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100000; display:flex; align-items:center; justify-content:center; }
.cfo-modal { background:var(--ss-bg-white, #fff); box-shadow:0 20px 60px rgba(0,0,0,.3); width:90%; max-width:700px; max-height:80vh; overflow:hidden; }
/* ── Net bar (balance tab) ── */
.cfo-net-bar { height:14px; min-width:4px; opacity:0.7; }
/* ── Spinner ── */
.cfo-spinner { width:20px; height:20px; border:2px solid var(--ss-border, #e2e8f0); border-top-color:#059669; border-radius:50%; animation:cfo-spin .6s linear infinite; display:inline-block; }
@keyframes cfo-spin { to { transform:rotate(360deg); } }
/* ── Gear icon size ── */
.cfo-tab .cfo-gear { font-size:22px; line-height:1; vertical-align:middle; }
/* ── Utility ── */
.cfo-hidden { display:none !important; }
/* ── AI Analysis Panel ── */
.cfo-ai-markdown { font-size:12px; line-height:1.65; color:var(--ss-text-primary, #0f172a); }
.cfo-ai-markdown h3, .cfo-ai-markdown h4 { color:var(--ss-text-primary, #0f172a); }
.cfo-ai-markdown strong { color:var(--ss-text-primary, #0f172a); }
.cfo-ai-markdown code { font-size:11px; padding:1px 5px; background:#f1f5f9; border:1px solid #e2e8f0; font-family:ui-monospace,SFMono-Regular,monospace; }
.cfo-card[style*="border-left:3px solid"] { transition:box-shadow .12s; }
.cfo-card[style*="border-left:3px solid"]:hover { box-shadow:0 2px 8px rgba(0,0,0,.05); }
/* ══════════════════════════════════════════════════════════════════
DARK MODE — single authoritative system
Activated via .cfo-shell.cfo-dark on the outer shell wrapper.
v0.5.41 BR-04/F-53/F-56: legacy .cfo-dark-only rule block deleted.
Previously two overlapping systems coexisted (.cfo-dark at line 191
and .cfo-shell.cfo-dark at line 637) which made dark-mode rule
origins unpredictable. .cfo-shell.cfo-dark is more specific and had
broader coverage (sidebar, topbar, kpi-sub), so it was kept. Banned
palette colors #818cf8 and #a5b4fc from the old var block were
purged — see the unified block further down.
══════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
CFO STANDALONE SHELL — v0.5.3
Hub-style layout: left sidebar + top bar + content pane.
Deep green theme. WP sidebar stays visible (icon strip).
════════════════════════════════════════════════════════════════ */
/* ── Green palette ── */
:root {
--cfo-900: #0d2b1f;
--cfo-800: #14432f;
--cfo-750: #195038;
--cfo-700: #1a5c40;
--cfo-600: #1e7a52;
--cfo-500: #25a06b;
--cfo-400: #34c97f;
--cfo-100: #e6f7ef;
--cfo-sidebar-w: 220px;
--cfo-topbar-h: 48px;
}
/* ── CF-0014: semantic UI tokens extracted from cfo-app.js's inline hex
colors (admin/js/cfo-app.js built raw `style="color:#xxxxxx"` strings
instead of going through the token system). Every value below is
unchanged from what was previously hardcoded in the JS — this only
gives each color a name so it can be driven by the cascade the way
--ss- and --cfo-100 through --cfo-900 already are. Naming follows the
existing --cfo- ramp convention (family + Tailwind-style shade number):
these are CashFlow-local, not part of the shared --ss- design-system
tokens, so they don't borrow the --ss- prefix. A handful of
near-identical stray hex values (a few RGB units apart, invisible in
practice) were consolidated onto one token instead of each getting its
own — see the CF-0014 CHANGELOG entry for the full list. ── */
:root {
--ss-info: #0284c7; /* light-mode default; --ss-info previously had only a dark-mode value (#38bdf8) below */
--cfo-heading: #1f2937;
--cfo-slate-50: #f8fafc;
--cfo-slate-100: #eef2f6;
--cfo-slate-700: #334155;
--cfo-gray-200: #e5e7eb;
--cfo-gray-300: #d1d5db;
--cfo-gray-700: #374151;
--cfo-neutral-50: #fafafa;
--cfo-mono-fg: #c3c4c7;
--cfo-red-50: #fef2f2;
--cfo-red-100: #fee2e2;
--cfo-red-200: #fecaca;
--cfo-red-300: #fca5a5;
--cfo-red-500: #ef4444;
--cfo-red-700: #b91c1c;
--cfo-red-800: #991b1b;
--cfo-red-900: #7f1d1d;
--cfo-amber-50: #fffbeb;
--cfo-amber-100: #fef3c7;
--cfo-amber-500: #f59e0b;
--cfo-amber-600: #d97706;
--cfo-amber-700: #b45309;
--cfo-amber-800: #92400e;
--cfo-amber-900: #78350f;
--cfo-green-50: #f0fdf4;
--cfo-green-200: #bbf7d0;
--cfo-green-700: #15803d;
--cfo-green-800: #166534;
--cfo-emerald-100: #d1fae5;
--cfo-emerald-500: #10b981;
--cfo-emerald-700: #047857;
--cfo-emerald-800: #065f46;
--cfo-teal-50: #f0fdfa;
--cfo-teal-700: #0f766e;
--cfo-cyan-500: #06b6d4;
--cfo-cyan-600: #0891b2;
--cfo-sky-50: #f0f9ff;
--cfo-sky-100: #e0f2fe;
--cfo-sky-700: #0369a1;
--cfo-sky-900: #0c4a6e;
--cfo-violet-100: #f3e8ff;
--cfo-violet-300: #c4b5fd;
--cfo-violet-600: #7c3aed;
--cfo-violet-800: #5b21b6;
--cfo-indigo-100: #e0e7ff;
--cfo-rust: #bf5a36;
}
/* ── Kill WP chrome on CashFlow page only ── */
body.toplevel_page_cfo-dashboard #wpbody-content .wrap,
body.cashflow_page_cfo-dashboard #wpbody-content .wrap {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
}
body.toplevel_page_cfo-dashboard #wpfooter,
body.cashflow_page_cfo-dashboard #wpfooter { display: none !important; }
body.toplevel_page_cfo-dashboard #wpcontent,
body.cashflow_page_cfo-dashboard #wpcontent { padding-left: 0 !important; }
/* ── Shell container — full-viewport overlay (admin bar suppressed via PHP filter) ── */
/* Defensive: neutralize WP toolbar margin if class lingers from cache or race conditions */
html.wp-toolbar { margin-top: 0 !important; padding-top: 0 !important; }
body[class*="cfo-dashboard"] { margin-top: 0 !important; padding-top: 0 !important; }
/* v0.5.25: Suppress WP left admin sidebar on CashFlow pages (true full-screen).
Uses attribute selector to catch any body class variant WP generates for cfo-dashboard.
Escape hatch is the WP icon in cfo-shell bottom tray — no toggle per locked rule. */
body[class*="cfo-dashboard"] #adminmenumain,
body[class*="cfo-dashboard"] #adminmenuback,
body[class*="cfo-dashboard"] #adminmenuwrap,
body[class*="cfo-dashboard"] #adminmenu { display: none !important; }
body[class*="cfo-dashboard"] #wpcontent { margin-left: 0 !important; padding-left: 0 !important; }
body[class*="cfo-dashboard"] #wpwrap { margin-left: 0 !important; }
body[class*="cfo-dashboard"] #wpbody-content { margin-left: 0 !important; padding-left: 0 !important; }
.cfo-shell {
display: flex;
height: 100vh;
overflow: hidden;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: #f5f3ef;
z-index: 99990 !important;
}
/* WP sidebar sits on top via its own z-index — we accept that */
/* ── Left sidebar ── */
.cfo-sidebar {
width: var(--cfo-sidebar-w);
min-width: var(--cfo-sidebar-w);
background: var(--cfo-900);
display: flex;
flex-direction: column;
overflow: hidden;
flex-shrink: 0;
}
/* Wordmark */
.cfo-sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 14px 14px;
border-bottom: 1px solid var(--cfo-800);
flex-shrink: 0;
}
.cfo-sidebar-logo {
width: 32px;
height: 32px;
background: var(--cfo-800);
border: 1px solid var(--cfo-700);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--cfo-400);
}
.cfo-sidebar-name {
font-size: 14px;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.cfo-sidebar-sub {
font-size: 10px;
color: var(--cfo-500);
letter-spacing: 0.04em;
}
/* Nav scroll area */
.cfo-sidebar-nav-wrap {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
.cfo-sidebar-nav-wrap::-webkit-scrollbar { width: 4px; }
.cfo-sidebar-nav-wrap::-webkit-scrollbar-thumb { background: var(--cfo-700); }
/* Nav sections */
.cfo-sidenav { padding: 4px 0; }
.cfo-sidenav-section { margin-bottom: 4px; }
.cfo-sidenav-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cfo-600);
padding: 12px 14px 4px;
}
/* Nav items */
/* v0.5.46 — sidebar link text shifted from cool gray (#94a3b8) to pale
green (#86efac family) so link color matches the green accent family
against the dark green sidebar bg. Hover brightens (#bbf7d0), active
stays white for highest contrast. Transactions tab badge color is
unaffected (see .cfo-sidenav-badge above). */
.cfo-sidenav-item {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
color: #86efac;
text-decoration: none;
border-left: 2px solid transparent;
transition: background 0.1s, color 0.1s;
cursor: pointer;
}
.cfo-sidenav-item:hover {
background: var(--cfo-800);
color: #bbf7d0;
text-decoration: none;
}
.cfo-sidenav-item.active {
background: var(--cfo-800);
color: #fff;
border-left-color: var(--cfo-400); /* overridden per-tab by JS */
}
.cfo-sidenav-icon { flex-shrink: 0; opacity: 0.7; }
.cfo-sidenav-item.active .cfo-sidenav-icon,
.cfo-sidenav-item:hover .cfo-sidenav-icon { opacity: 1; }
.cfo-sidenav-name { flex: 1; }
.cfo-sidenav-badge {
font-size: 10px;
font-weight: 700;
background: #f59e0b;
color: #0f172a;
padding: 1px 6px;
min-width: 18px;
text-align: center;
}
.cfo-sidenav-badge-purple { background: #0f766e; color: #fff; }
/* v0.5.49 — Sidebar user-pill (moved from topbar role badge).
ActionStudio-style identity block: square avatar with initials, name
line, role chip below. Sits above the product-switcher tray.
SS UI v1.1: no border-radius in product chrome — avatar is SQUARE.
Flat surfaces; uses sidebar cool palette vars for theming. */
.cfo-sidebar-userpill {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-top: 1px solid var(--cfo-800);
}
.cfo-userpill-avatar {
width: 32px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--cfo-800);
color: var(--cfo-400);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.cfo-userpill-meta {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.cfo-userpill-name {
font-size: 12px;
font-weight: 600;
color: var(--cfo-400);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cfo-userpill-role {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
color: var(--cfo-500);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.cfo-userpill-role-dot {
width: 6px;
height: 6px;
flex-shrink: 0;
display: inline-block;
}
.cfo-userpill-role-text { line-height: 1; }
.cfo-userpill-grace {
margin-left: 4px;
padding: 1px 5px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.3px;
color: #92400e;
background: #fef3c7;
text-transform: uppercase;
cursor: help;
}
/* Bottom tray — canonical bolt-on tray (SPEC v1). Footer wraps the tray
row + a sibling version node (version is NOT an item among the icons). */
.cfo-sidebar-footer {
border-top: 1px solid var(--cfo-800);
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 8px 10px;
}
.cfo-sidebar-tray {
flex-shrink: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
/* ==========================================================================
LEGACY FALLBACK ONLY (Hub < 1.60.0) — do NOT delete.
HUB-0023 Phase 2 (v0.32.76): when Hub >= 1.60.0 is present the tray is
rendered by SSH_Shell::render_app_tray('cashflow') and styled by the Hub's
own assets/css/ss-app-tray.css (.ss-shell-app-tray / .ss-shell-tray-icon),
which preserves each app's BRAND color. The .cfo-tray-link rules below are
monochrome by design and only apply to the fallback markup in
admin/class-cfo-admin.php::render_ops().
========================================================================== */
.cfo-tray-link {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--cfo-500);
text-decoration: none;
transition: background 0.1s, color 0.1s;
flex-shrink: 0;
position: relative;
}
.cfo-tray-link:hover {
background: var(--cfo-800);
color: var(--cfo-400);
text-decoration: none;
}
.cfo-tray-link svg { display: block; }
/* Tooltip on hover */
.cfo-tray-link::after {
content: attr(title);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #1e293b;
color: #f1f5f9;
font-size: 10px;
font-weight: 600;
padding: 3px 7px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
margin-bottom: 4px;
}
.cfo-tray-link:hover::after { opacity: 1; }
/* Unreachable suite-app target (SPEC §1.7): non-link, faded, with a reason
tooltip. It is a (no href) so it is inert; we keep hover so the
tooltip still surfaces the reason, but suppress the active-link styling. */
.cfo-tray-link--disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cfo-tray-link--disabled:hover {
background: transparent;
color: var(--cfo-500);
}
.cfo-sidebar-version {
font-size: 10px;
color: var(--cfo-700);
letter-spacing: 0.04em;
}
/* ── Right pane ── */
.cfo-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
/* Top bar */
.cfo-topbar {
height: var(--cfo-topbar-h);
background: #fff;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0 20px;
}
.cfo-topbar-inner {
display: flex;
align-items: center;
width: 100%;
flex: 1 1 auto; /* v0.6.9 — fill topbar main axis regardless of width:100% quirks */
min-width: 0;
gap: 16px;
}
.cfo-topbar-title {
font-size: 14px;
font-weight: 700;
color: #0f172a;
flex-shrink: 0;
}
/* v0.24.06 — global back chevron, clean/borderless, hugging the title */
.cfo-back-btn { border:none; background:none; width:auto; height:28px; padding:0; margin-right:-8px; color:#64748b; flex-shrink:0; cursor:pointer; }
.cfo-back-btn:hover { background:none; color:#0f172a; }
.cfo-back-btn svg { width:20px; height:20px; display:block; }
.cfo-shell.cfo-dark .cfo-back-btn { color:#94a3b8; }
.cfo-shell.cfo-dark .cfo-back-btn:hover { background:none; color:#f1f5f9; }
/* v0.5.52 — belt-and-suspenders right-pin. Previously relied on
margin-left:auto on .cfo-topbar-right alone (v0.5.49 fix), which worked
on Dashboard but not reliably on Balance/Expenses when chip count grew.
Adding margin-right:auto on chips-left forces the gap AFTER the chips
to expand, pinning the icon cluster to the right edge independent of
ancestor width or sibling count. Finding #8. */
.cfo-topbar-chips-left {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto; /* v0.6.9 — grow to fill the gap, pinning .cfo-topbar-right to the edge */
min-width: 0;
}
.cfo-topbar-right {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex-wrap: wrap;
flex-shrink: 0;
}
/* v0.20.0 — THE fix: the mount slot must fill the topbar so the right
cluster pins to the PAGE edge, not the right edge of shrink-wrapped
content. This is why margin-left:auto looked broken for so long — the
slot itself was only as wide as its children. */
#cfo-topbar-tools {
flex: 1 1 auto;
width: 100%;
min-width: 0;
display: flex;
align-items: center;
}
.cfo-spinning svg { animation: cfo-spin 0.7s linear infinite; }
@keyframes cfo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Content */
.cfo-content {
flex: 1;
overflow-y: auto;
padding: 0;
background: #f5f3ef;
display: flex;
flex-direction: column;
}
/* Inner content wrapper — provides all padding */
/* S6 — cap main content at the suite content-width token, centered */
.cfo-content #cfo-tab-content {
padding: 24px 28px 60px;
flex: 1;
min-width: 0;
width: 100%;
max-width: var(--ss-content-width, 1100px);
margin: 0 auto;
box-sizing: border-box;
}
/* Override inner SPA elements — no WP .wrap needed */
.cfo-shell .cfo-admin { background: transparent; margin: 0; padding: 0; display: contents; }
.cfo-shell #cfo-app { background: transparent; margin: 0; padding: 20px !important; }
/* Remove horizontal tab bar — navigation is now in sidebar */
.cfo-shell .cfo-tabs { display: none !important; }
/* Remove old SPA header (range chips were in cfo-header, now in topbar) */
.cfo-shell .cfo-header { display: none !important; }
/* ── Dark mode — color admin bar to match, remove gap seam ── */
body.cfo-dark-active #wpadminbar { background: #0d2b1f !important; border-bottom: 1px solid #14432f !important; }
body.cfo-dark-active #wpadminbar .ab-item,
body.cfo-dark-active #wpadminbar .ab-item:before,
body.cfo-dark-active #wpadminbar a { color: #34c97f !important; }
body.cfo-dark-active #wpadminbar .ab-top-menu > li:hover > .ab-item,
body.cfo-dark-active #wpadminbar .ab-top-menu > li.hover > .ab-item { background: #14432f !important; color: #fff !important; }
body.cfo-dark-active #wpadminbar #wp-admin-bar-site-name > .ab-item { color: #34c97f !important; }
body.cfo-dark-active { background: #222222 !important; }
/* ── Dark mode — standalone (no SS Hub CSS vars available) ── */
/* Define standalone dark tokens scoped to cfo-shell.cfo-dark */
/* v0.5.46 — palette shifted from slate (#1e293b / #334155 / #475569)
to neutral gray (#333 base, #555/#666 borders) so dark mode matches
the green accent family instead of reading blue-cool. Green accent
tokens (#10b981 / #34c97f / #059669) preserved. Sky #38bdf8 on code
preserved as the explicit non-banned code color. */
.cfo-shell.cfo-dark {
--ss-bg-white: #333333;
--ss-bg-page: #222222;
--ss-text-primary: #f1f5f9;
--ss-text-secondary: #94a3b8;
--ss-text-muted: #64748b;
--ss-border: #555555;
--ss-border-light: #333333;
--ss-info: #38bdf8;
}
.cfo-shell.cfo-dark .cfo-main { background: #222222; }
.cfo-shell.cfo-dark .cfo-content { background: #222222; }
/* v0.5.36 — Sidebar dark mode: deeper green that harmonizes with the dark content */
.cfo-shell.cfo-dark .cfo-sidebar { background: #081a12; }
.cfo-shell.cfo-dark .cfo-sidebar-brand { background: #081a12; border-bottom-color: #0f2418; }
.cfo-shell.cfo-dark .cfo-sidebar-logo { background: #0f2418; border-color: #1a3325; }
.cfo-shell.cfo-dark .cfo-sidebar-name { color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-sidebar-sub { color: #10b981; }
.cfo-shell.cfo-dark .cfo-sidenav-label { color: #5fa582; }
.cfo-shell.cfo-dark .cfo-sidenav-item { color: #86efac; }
.cfo-shell.cfo-dark .cfo-sidenav-item:hover { background: #0f2418; color: #bbf7d0; }
.cfo-shell.cfo-dark .cfo-sidenav-item.active { background: #0f2418; color: #fff; border-left-color: #10b981; }
/* v0.5.49 — User pill dark mode. Mirrors sidebar-brand/logo pattern:
deeper green panel, brighter text. Hex literals matching the rest of
the dark sidebar block (this file uses hex in dark mode, not vars). */
.cfo-shell.cfo-dark .cfo-sidebar-userpill { border-top-color: #0f2418; }
.cfo-shell.cfo-dark .cfo-userpill-avatar { background: #0f2418; color: #bbf7d0; }
.cfo-shell.cfo-dark .cfo-userpill-name { color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-userpill-role { color: #86efac; }
/* Topbar — v0.5.36: tint toward green family for continuity with sidebar */
.cfo-shell.cfo-dark .cfo-topbar { background: #0f2418; border-bottom-color: #1a3325; }
.cfo-shell.cfo-dark .cfo-topbar-title { color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-topbar-inner { color: #f1f5f9; }
/* Cards and KPIs */
.cfo-shell.cfo-dark .cfo-card { background: #333333; border-color: #555555; }
.cfo-shell.cfo-dark .cfo-card h2 { color: #f1f5f9; border-color: #555555; }
.cfo-shell.cfo-dark .cfo-card-flush { background: #333333; border-color: #555555; }
.cfo-shell.cfo-dark .cfo-card-flush .cfo-card-header { border-color: #555555; color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-kpi { background: #333333; border-color: #555555; }
/* v0.5.41 BR-04: labels were #64748b against the #1e293b card background —
contrast ratio ~3.2:1, below AA (4.5:1) for small text. Bumped to
text-secondary #94a3b8 (~5.4:1) so "TOTAL INCOME" etc. are readable. */
.cfo-shell.cfo-dark .cfo-kpi-label { color: #94a3b8; }
.cfo-shell.cfo-dark .cfo-kpi-value { color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-kpi-sub { color: #94a3b8; }
/* Tables */
.cfo-shell.cfo-dark .cfo-table th { background: #222222; color: #94a3b8; border-color: #555555; }
.cfo-shell.cfo-dark .cfo-table td { color: #f1f5f9; border-color: #333333; }
.cfo-shell.cfo-dark .cfo-table tbody tr:hover { background: #444444; }
.cfo-shell.cfo-dark .cfo-table tfoot td { background: #222222; border-color: #555555; }
.cfo-shell.cfo-dark .cfo-table td.mono { color: #38bdf8; }
.cfo-shell.cfo-dark .cfo-table .cfo-row-review { background: rgba(245,158,11,.08); }
.cfo-shell.cfo-dark .cfo-table .cfo-row-wrong { background: rgba(239,68,68,.08); }
/* v0.34.5 — set-aside strip */
.cfo-shell.cfo-dark .cfo-setaside > summary { color: #cbd5e1; }
.cfo-shell.cfo-dark .cfo-setaside > summary strong { color: #f1f5f9; }
/* Filters */
.cfo-shell.cfo-dark .cfo-filters { background: #222222; border-color: #555555; }
.cfo-shell.cfo-dark .cfo-filters select,
.cfo-shell.cfo-dark .cfo-filters input { background: #333333; border-color: #555555; color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-filter-label { color: #94a3b8; }
/* Chips */
.cfo-shell.cfo-dark .cfo-chip { background: #333333; border-color: #555555; color: #94a3b8; }
.cfo-shell.cfo-dark .cfo-chip:hover { background: #444444; color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-chip.active { background: #059669; color: #fff; border-color: #059669; }
/* Sub pills */
.cfo-shell.cfo-dark .cfo-pill { background: #333333; border-color: #555555; color: #94a3b8; }
.cfo-shell.cfo-dark .cfo-pill:hover { background: #444444; color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-pill.active { background: #f1f5f9; color: #222222; border-color: #f1f5f9; }
/* ── v0.5.41 BR-04 / F-53 / F-56: ported from the deleted legacy
.cfo-dark rule block above. Component coverage the old system had
that System B was missing. Banned palette colors (#818cf8, #a5b4fc)
purged along the way. ── */
/* Amount colors */
.cfo-shell.cfo-dark .cfo-amt-pos { color: #34d399; }
.cfo-shell.cfo-dark .cfo-amt-neg { color: #f87171; }
/* Chart wrap + modal panels */
.cfo-shell.cfo-dark .cfo-chart-wrap,
.cfo-shell.cfo-dark .cfo-modal { background: #333333; border-color: #555555; color: #f1f5f9; }
/* Tab bar (inner tabs, not nav) */
.cfo-shell.cfo-dark .cfo-tabs { background: #333333; border-color: #555555; }
.cfo-shell.cfo-dark .cfo-tab { color: #94a3b8; }
.cfo-shell.cfo-dark .cfo-tab:hover { color: #f1f5f9; border-bottom-color: #888888; }
.cfo-shell.cfo-dark .cfo-tab .cfo-tab-badge { background: #78350f; color: #fcd34d; }
/* Buttons */
.cfo-shell.cfo-dark .ss-btn { background: #333333; color: #94a3b8; border-color: #555555; }
.cfo-shell.cfo-dark .ss-btn:hover { background: #444444; color: #f1f5f9; }
.cfo-shell.cfo-dark .ss-btn-primary { background: #059669; color: #fff; border-color: #059669; }
.cfo-shell.cfo-dark .ss-btn-primary:hover { background: #047857; }
.cfo-shell.cfo-dark .ss-btn-danger { color: #f87171; border-color: #7f1d1d; }
.cfo-shell.cfo-dark .ss-btn-danger:hover { background: rgba(127,29,29,.25); }
/* WP .button fallback */
.cfo-shell.cfo-dark .button { background: #333333; color: #94a3b8; border-color: #555555; }
.cfo-shell.cfo-dark .button:hover { background: #444444; color: #f1f5f9; border-color: #888888; }
.cfo-shell.cfo-dark .button.button-primary { background: #059669; color: #fff; border-color: #059669; }
.cfo-shell.cfo-dark .button.button-primary:hover { background: #047857; }
/* Badges */
.cfo-shell.cfo-dark .cfo-badge-match { background: #065f46; color: #6ee7b7; }
.cfo-shell.cfo-dark .cfo-badge-auto { background: #1e3a5f; color: #93c5fd; }
.cfo-shell.cfo-dark .cfo-badge-review { background: #78350f; color: #fcd34d; }
.cfo-shell.cfo-dark .cfo-badge-pending { background: #7f1d1d; color: #fca5a5; }
.cfo-shell.cfo-dark .cfo-badge-rejected { background: #555555; color: #94a3b8; }
/* Connection status */
.cfo-shell.cfo-dark .cfo-status-connected { background: #14532d; color: #86efac; }
/* Code — purged banned #a5b4fc, using sky blue (#38bdf8, matches --ss-info) */
.cfo-shell.cfo-dark code { color: #38bdf8; }
/* Icon buttons + topbar icon controls */
/* v0.5.45 BR-05 — borderless in both light and dark; dark mode just
adjusts text color and uses a slate hover fill. No border left to
color, since the light-mode rule is `border: none`. */
.cfo-shell.cfo-dark .cfo-icon-btn { color: #94a3b8; }
.cfo-shell.cfo-dark .cfo-icon-btn:hover { background: #555555; color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-bell-btn { color: #94a3b8; }
.cfo-shell.cfo-dark .cfo-theme-toggle { color: #94a3b8; }
.cfo-shell.cfo-dark .cfo-theme-toggle:hover { background: #555555; color: #f1f5f9; }
/* Drawer (transaction detail) */
.cfo-shell.cfo-dark .cfo-drawer { background: #333333; border-color: #555555; border-top-color: #059669; }
.cfo-shell.cfo-dark .cfo-drawer input,
.cfo-shell.cfo-dark .cfo-drawer select { background: #222222; color: #f1f5f9; border-color: #666666; }
/* Entity pill buttons (legend pills on charts) */
.cfo-shell.cfo-dark .cfo-ent-pill-btn { transition: all .12s; }
.cfo-shell.cfo-dark .cfo-ent-pill-btn:hover { opacity: .85; }
/* Batch action bar */
.cfo-shell.cfo-dark .cfo-batch-bar { background: #333333; border-color: #666666; color: #94a3b8; }
/* Pagination */
.cfo-shell.cfo-dark .cfo-pagination .page-numbers { background: #333333; color: #94a3b8; border-color: #555555; }
.cfo-shell.cfo-dark .cfo-pagination .page-numbers.current { background: #059669; color: #fff; border-color: #059669; }
/* Net bar (chart dividers) */
.cfo-shell.cfo-dark .cfo-net-bar { opacity: 0.9; }
/* Form table (settings forms) */
.cfo-shell.cfo-dark .form-table th { color: #94a3b8; }
.cfo-shell.cfo-dark .form-table td { color: #f1f5f9; }
.cfo-shell.cfo-dark .form-table td strong { color: #f1f5f9; }
.cfo-shell.cfo-dark .form-table { border-color: #555555; }
/* Month grid inputs (budget) */
.cfo-shell.cfo-dark .cfo-month-grid input { background: #333333; color: #f1f5f9; border-color: #555555; }
.cfo-shell.cfo-dark .cfo-month-grid label { color: #94a3b8; }
/* Budget summary card override (inline-styled background) */
.cfo-shell.cfo-dark .cfo-card[style*="background:#f0fdf4"] { background: #052e16 !important; }
.cfo-shell.cfo-dark .cfo-table tr[style*="background:#f8fafc"] { background: #222222 !important; }
/* Card-hover shadow adjusted for dark bg */
.cfo-shell.cfo-dark .cfo-card[style*="border-left:3px solid"]:hover { box-shadow: 0 2px 8px rgba(0,0,0,.3); }
/* Alerts */
.cfo-shell.cfo-dark .cfo-alert-warn { background: #451a03; border-color: #92400e; color: #fef3c7; }
/* Inline inputs/selects in content */
.cfo-shell.cfo-dark input[type="text"],
.cfo-shell.cfo-dark input[type="number"],
.cfo-shell.cfo-dark input[type="email"],
.cfo-shell.cfo-dark input[type="password"],
.cfo-shell.cfo-dark select,
.cfo-shell.cfo-dark textarea { background: #333333; border-color: #555555; color: #f1f5f9; }
/* Card with background override */
.cfo-shell.cfo-dark .cfo-card[style*="background:#f8fafc"] { background: #333333 !important; }
.cfo-shell.cfo-dark .cfo-card[style*="background:#f0fdf4"] { background: #052e16 !important; }
/* AI markdown */
.cfo-shell.cfo-dark .cfo-ai-markdown { color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-ai-markdown h3,
.cfo-shell.cfo-dark .cfo-ai-markdown h4 { color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-ai-markdown code { background: #222222; border-color: #555555; color: #38bdf8; }
/* Header and chart titles */
.cfo-shell.cfo-dark .cfo-header h1 { color: #f1f5f9; }
.cfo-shell.cfo-dark .cfo-chart-title { color: #f1f5f9; }
/* Budget form */
.cfo-shell.cfo-dark .cfo-bgt-form { background: #222222 !important; border-color: #555555 !important; }
.cfo-shell.cfo-dark .cfo-bgt-form input,
.cfo-shell.cfo-dark .cfo-bgt-form select { background: #333333; color: #f1f5f9; border-color: #555555; }
.cfo-shell.cfo-dark .cfo-bgt-form label,
.cfo-shell.cfo-dark .cfo-bgt-form h3 { color: #94a3b8; }
/* Summary card */
.cfo-shell.cfo-dark .cfo-card[style*="background:#f8fafc"] { background: #333333 !important; }
/* Dark body fill */
body.cfo-dark-active #wpbody-content { background: #222222; }
/* ── Spinner inside shell ── */
.cfo-shell .cfo-spinner {
border-color: rgba(52,201,127,0.2);
border-top-color: var(--cfo-500);
}
/* ══════════════════════════════════════════════════════════════════
NET WORTH tab (v0.6.1 R2)
SS UI v1.1 compliant: no border-radius in product UI, 0.5px
borders, flat surfaces, 13px body, inline SVG only.
Donut legend text is chart-library-rendered — not UI chrome.
══════════════════════════════════════════════════════════════════ */
/* Shell + sub-tab row */
.cfo-nw-shell {
display: flex;
flex-direction: column;
}
.cfo-nw-subtabs {
display: flex;
gap: 4px;
padding: 0 0 12px 0;
border-bottom: 1px solid var(--ss-border, #e2e8f0);
margin-bottom: 16px;
flex-wrap: wrap;
}
.cfo-nw-subtab {
appearance: none;
background: transparent;
border: 0.5px solid transparent;
padding: 8px 14px;
height: 36px;
font-size: 13px;
font-weight: 500;
color: var(--ss-text-secondary, #475569);
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cfo-nw-subtab:hover {
background: var(--ss-bg-hover, #f1f5f9);
color: var(--ss-text-primary, #0f172a);
}
.cfo-nw-subtab.is-active {
background: var(--ss-bg-white, #fff);
color: var(--ss-text-primary, #0f172a);
border: 0.5px solid var(--ss-border, #e2e8f0);
border-bottom-color: var(--ss-bg-white, #fff);
font-weight: 600;
position: relative;
/* Accent top edge echoes tab color token (see default_tabs networth entry) */
box-shadow: inset 0 2px 0 0 #7c3aed;
}
/* Panel container */
.cfo-nw-panel {
min-height: 400px;
}
/* Placeholder (coming-soon) panels */
.cfo-nw-placeholder {
background: var(--ss-bg-white, #fff);
border: 0.5px solid var(--ss-border, #e2e8f0);
padding: 48px 32px;
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.cfo-nw-placeholder-title {
margin: 0 0 8px 0;
font-size: 22px;
font-weight: 600;
color: var(--ss-text-primary, #0f172a);
}
.cfo-nw-placeholder-tagline {
margin: 0 0 20px 0;
font-size: 13px;
color: var(--ss-text-secondary, #475569);
line-height: 1.5;
}
.cfo-nw-placeholder-timing {
display: inline-block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #7c3aed;
padding: 6px 12px;
border: 0.5px solid #7c3aed;
background: rgba(124, 58, 237, 0.04);
}
/* Empty states — chart slot + table row */
.cfo-nw-empty-chart {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
text-align: center;
}
.cfo-nw-empty-chart-title {
font-size: 14px;
font-weight: 600;
color: var(--ss-text-primary, #0f172a);
margin-bottom: 6px;
}
.cfo-nw-empty-chart-body {
font-size: 12px;
color: var(--ss-text-secondary, #475569);
line-height: 1.5;
max-width: 420px;
}
.cfo-nw-empty-row {
padding: 20px 24px;
font-size: 13px;
color: var(--ss-text-secondary, #475569);
font-style: normal;
}
/* QB badge in detail tables */
.cfo-nw-qb-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 2px 6px;
margin-right: 6px;
border: 0.5px solid #0891b2;
color: #0891b2;
background: rgba(8, 145, 178, 0.05);
vertical-align: middle;
}
/* ══════════════════════════════════════════════════════════════════
NET WORTH R3 (v0.6.2)
Side-sheet for Assets/Liabilities CRUD + valuation history,
wizard overlay (7-step), Overview cold-start welcome.
SS UI v1.1: no border-radius in product chrome, 0.5px borders,
flat surfaces, 13px body.
══════════════════════════════════════════════════════════════════ */
/* ── Side sheet (shared by Assets/Liabilities drawers + Wizard) ── */
.cfo-nw-sheet-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0);
z-index: 100000;
display: flex;
justify-content: flex-end;
pointer-events: none;
transition: background-color 180ms ease;
}
.cfo-nw-sheet-overlay.is-open {
background: rgba(15, 23, 42, 0.35);
pointer-events: auto;
}
.cfo-nw-sheet {
background: var(--ss-bg-white, #fff);
height: 100%;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
overflow: hidden;
border-left: 0.5px solid var(--ss-border, #e2e8f0);
}
.cfo-nw-sheet.is-narrow { width: 420px; max-width: 95vw; }
.cfo-nw-sheet.is-wide { width: 560px; max-width: 95vw; }
.cfo-nw-sheet-overlay.is-open .cfo-nw-sheet { transform: translateX(0); }
.cfo-nw-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 0.5px solid var(--ss-border, #e2e8f0);
flex-shrink: 0;
}
.cfo-nw-sheet-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--ss-text-primary, #0f172a);
}
.cfo-nw-sheet-close {
background: transparent;
border: 0;
font-size: 18px;
color: var(--ss-text-secondary, #475569);
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}
.cfo-nw-sheet-close:hover { color: var(--ss-text-primary, #0f172a); }
.cfo-nw-sheet-tabs {
display: flex;
gap: 0;
border-bottom: 0.5px solid var(--ss-border, #e2e8f0);
flex-shrink: 0;
}
.cfo-nw-sheet-tab {
appearance: none;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: 10px 20px;
font-size: 12px;
font-weight: 500;
color: var(--ss-text-secondary, #475569);
cursor: pointer;
transition: color 120ms ease, border-color 120ms ease;
}
.cfo-nw-sheet-tab:hover { color: var(--ss-text-primary, #0f172a); }
.cfo-nw-sheet-tab.is-active {
color: #7c3aed;
border-bottom-color: #7c3aed;
font-weight: 600;
}
.cfo-nw-sheet-body {
padding: 20px 24px;
overflow-y: auto;
flex: 1;
}
/* ── Forms inside sheet (shared shape, also used by wizard) ── */
.cfo-nw-form { display: flex; flex-direction: column; gap: 12px; }
.cfo-nw-form-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.cfo-nw-form-row > label {
flex: 1;
min-width: 140px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
font-weight: 500;
color: var(--ss-text-secondary, #475569);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.cfo-nw-form-row > label.cfo-nw-form-wide { flex: 2; min-width: 100%; }
.cfo-nw-form input[type=text],
.cfo-nw-form input[type=number],
.cfo-nw-form input[type=date],
.cfo-nw-form select,
.cfo-nw-form textarea {
width: 100%;
height: 36px;
padding: 6px 10px;
font-size: 13px;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: var(--ss-text-primary, #0f172a);
border: 0.5px solid var(--ss-border, #cbd5e1);
background: var(--ss-bg-white, #fff);
box-sizing: border-box;
}
.cfo-nw-form textarea { height: auto; min-height: 60px; resize: vertical; }
.cfo-nw-form input:focus,
.cfo-nw-form select:focus,
.cfo-nw-form textarea:focus {
outline: none;
border-color: #7c3aed;
}
.cfo-nw-form-section {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ss-text-secondary, #475569);
margin: 16px 0 4px;
padding-bottom: 6px;
border-bottom: 0.5px solid var(--ss-border, #e2e8f0);
}
.cfo-nw-form-actions {
display: flex;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 0.5px solid var(--ss-border, #e2e8f0);
}
.cfo-nw-form-error {
padding: 10px 12px;
background: rgba(220, 38, 38, 0.08);
border: 0.5px solid #dc2626;
color: #991b1b;
font-size: 12px;
}
.cfo-nw-req { color: #dc2626; font-weight: 600; }
/* ── Valuation-history sparkline container ── */
.cfo-nw-spark-wrap {
position: relative;
height: 140px;
border: 0.5px solid var(--ss-border, #e2e8f0);
padding: 8px;
background: var(--ss-bg-white, #fff);
}
/* ── List-table action buttons (compact row) ── */
.cfo-nw-list-table td .ss-btn { margin-left: 4px; }
.cfo-nw-list-table td .ss-btn:first-child { margin-left: 0; }
/* ── Wizard-specific ── */
.cfo-nw-wizard-progress {
display: flex;
gap: 6px;
justify-content: center;
padding: 10px 24px 14px;
border-bottom: 0.5px solid var(--ss-border, #e2e8f0);
flex-shrink: 0;
}
.cfo-nw-wizard-dot {
width: 28px;
height: 3px;
background: var(--ss-border, #e2e8f0);
}
.cfo-nw-wizard-dot.is-active { background: #7c3aed; }
.cfo-nw-wizard-nav {
display: flex;
gap: 8px;
align-items: center;
margin-top: 20px;
padding-top: 16px;
border-top: 0.5px solid var(--ss-border, #e2e8f0);
}
.cfo-nw-wiz-biz-row,
.cfo-nw-wiz-free-row {
display: flex;
gap: 6px;
margin-bottom: 6px;
align-items: center;
}
.cfo-nw-wiz-biz-row input,
.cfo-nw-wiz-free-row input,
.cfo-nw-wiz-free-row select {
height: 32px;
padding: 4px 8px;
font-size: 12px;
border: 0.5px solid var(--ss-border, #cbd5e1);
background: var(--ss-bg-white, #fff);
flex: 1;
min-width: 0;
box-sizing: border-box;
}
.cfo-nw-wiz-biz-row .wiz-biz-code,
.cfo-nw-wiz-free-row .wiz-free-ent { flex: 0 0 90px; }
.cfo-nw-wiz-free-row .wiz-free-cat { flex: 0 0 130px; }
.cfo-nw-wiz-free-row .wiz-free-val,
.cfo-nw-wiz-biz-row .wiz-biz-val { flex: 0 0 120px; }
/* ── Overview cold-start welcome ── */
.cfo-nw-cold-welcome {
background: var(--ss-bg-white, #fff);
border: 0.5px solid var(--ss-border, #e2e8f0);
padding: 48px 32px;
text-align: center;
max-width: 680px;
margin: 32px auto 0;
}
.cfo-nw-cold-title {
margin: 0 0 12px;
font-size: 22px;
font-weight: 600;
color: var(--ss-text-primary, #0f172a);
}
.cfo-nw-cold-body {
margin: 0 0 24px;
font-size: 13px;
color: var(--ss-text-secondary, #475569);
line-height: 1.6;
}
.cfo-nw-cold-actions {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.cfo-nw-cold-note {
margin: 0;
font-size: 11px;
color: #94a3b8;
line-height: 1.5;
max-width: 480px;
margin-inline: auto;
}
/* ══════════════════════════════════════════════════════════════════
NET WORTH R4 (v0.6.3)
Settings sub-view cards + confirmation modal + toast notifications.
SS UI v1.1: no border-radius, 0.5px borders, flat surfaces.
══════════════════════════════════════════════════════════════════ */
/* ── Settings grid + cards ── */
.cfo-nw-settings-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 1000px) {
.cfo-nw-settings-grid { grid-template-columns: 1fr; }
}
.cfo-nw-setting-card {
background: var(--ss-bg-white, #fff);
border: 0.5px solid var(--ss-border, #e2e8f0);
padding: 20px 24px;
}
.cfo-nw-setting-card.cfo-nw-setting-info {
background: rgba(124, 58, 237, 0.04);
border-color: rgba(124, 58, 237, 0.25);
}
.cfo-nw-setting-title {
margin: 0 0 8px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ss-text-primary, #0f172a);
}
.cfo-nw-setting-body {
margin: 0 0 16px;
font-size: 13px;
color: var(--ss-text-secondary, #475569);
line-height: 1.5;
}
.cfo-nw-setting-row {
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
}
.cfo-nw-setting-label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
font-weight: 500;
color: var(--ss-text-secondary, #475569);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.cfo-nw-setting-label select {
height: 36px;
padding: 6px 10px;
font-size: 13px;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: var(--ss-text-primary, #0f172a);
border: 0.5px solid var(--ss-border, #cbd5e1);
background: var(--ss-bg-white, #fff);
box-sizing: border-box;
}
.cfo-nw-setting-meta {
padding: 10px 14px;
border: 0.5px solid var(--ss-border, #e2e8f0);
background: #fafafa;
margin-bottom: 14px;
font-size: 12px;
}
.cfo-nw-setting-meta > div {
display: flex;
justify-content: space-between;
padding: 3px 0;
}
.cfo-nw-meta-label {
color: var(--ss-text-secondary, #475569);
font-weight: 500;
}
.cfo-nw-meta-value {
color: var(--ss-text-primary, #0f172a);
font-weight: 600;
text-align: right;
}
/* ── Confirmation modal (reuses cfo-modal-overlay positioning) ── */
.cfo-nw-confirm-modal {
max-width: 480px;
padding: 0;
}
.cfo-nw-confirm-header {
padding: 18px 24px;
border-bottom: 0.5px solid var(--ss-border, #e2e8f0);
}
.cfo-nw-confirm-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--ss-text-primary, #0f172a);
}
.cfo-nw-confirm-body {
padding: 20px 24px;
font-size: 13px;
line-height: 1.55;
color: var(--ss-text-secondary, #475569);
}
.cfo-nw-confirm-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
padding: 14px 24px;
border-top: 0.5px solid var(--ss-border, #e2e8f0);
background: #fafafa;
}
.cfo-nw-btn-destructive {
background: #dc2626 !important;
color: #fff !important;
border-color: #dc2626 !important;
}
.cfo-nw-btn-destructive:hover { background: #b91c1c !important; }
/* ── Toast notifications ── */
.cfo-nw-toast-host {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100001;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
max-width: calc(100vw - 40px);
}
.cfo-nw-toast {
padding: 12px 18px;
background: var(--ss-bg-white, #fff);
border: 0.5px solid var(--ss-border, #e2e8f0);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
font-size: 13px;
color: var(--ss-text-primary, #0f172a);
min-width: 280px;
max-width: 420px;
pointer-events: auto;
transform: translateX(calc(100% + 20px));
opacity: 0;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
border-left: 3px solid var(--ss-border, #cbd5e1);
}
.cfo-nw-toast.is-visible {
transform: translateX(0);
opacity: 1;
}
.cfo-nw-toast-success { border-left-color: #059669; }
.cfo-nw-toast-error { border-left-color: #dc2626; background: #fef2f2; }
.cfo-nw-toast-info { border-left-color: #7c3aed; }
/* ══════════════════════════════════════════════════════════════════
NET WORTH R5 — Goals CRUD + glide-path (v0.6.4)
Progress bars, goal cards, projection banner, glide-path note.
SS UI v1.1: no border-radius (except progress fill which renders
continuous and needs no corners anyway), 0.5px borders, flat.
══════════════════════════════════════════════════════════════════ */
/* Projection banner (shown when history insufficient for forecast) */
.cfo-nw-proj-banner {
padding: 12px 20px;
font-size: 12px;
color: var(--ss-text-secondary, #475569);
background: rgba(124, 58, 237, 0.04);
border-bottom: 0.5px solid var(--ss-border, #e2e8f0);
line-height: 1.5;
}
/* Goals grid */
.cfo-nw-goals-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--ss-border, #e2e8f0);
padding: 1px;
}
@media (max-width: 900px) {
.cfo-nw-goals-grid { grid-template-columns: 1fr; }
}
/* Individual goal card */
.cfo-nw-goal-card {
background: var(--ss-bg-white, #fff);
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.cfo-nw-goal-card.is-archived {
opacity: 0.55;
background: #fafafa;
}
.cfo-nw-goal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.cfo-nw-goal-name {
font-size: 15px;
font-weight: 600;
color: var(--ss-text-primary, #0f172a);
line-height: 1.3;
}
.cfo-nw-goal-archived-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #94a3b8;
border: 0.5px solid #cbd5e1;
background: #fafafa;
vertical-align: middle;
}
.cfo-nw-goal-type {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ss-text-secondary, #64748b);
margin-top: 2px;
}
.cfo-nw-goal-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
/* 3-up stats block inside a goal card */
.cfo-nw-goal-stats {
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: 12px;
padding: 12px 0;
border-top: 0.5px solid var(--ss-border, #e2e8f0);
border-bottom: 0.5px solid var(--ss-border, #e2e8f0);
}
.cfo-nw-goal-stat-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ss-text-secondary, #64748b);
margin-bottom: 4px;
}
.cfo-nw-goal-stat-value {
font-size: 15px;
font-weight: 700;
color: var(--ss-text-primary, #0f172a);
}
.cfo-nw-goal-stat-sub {
font-size: 10px;
color: #94a3b8;
margin-top: 2px;
}
/* Progress bar */
.cfo-nw-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.cfo-nw-progress-header {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ss-text-secondary, #64748b);
}
.cfo-nw-progress-pct {
font-size: 14px;
color: var(--ss-text-primary, #0f172a);
font-weight: 700;
}
.cfo-nw-progress-track {
height: 8px;
background: #e5e7eb;
overflow: hidden;
}
.cfo-nw-progress-fill {
height: 100%;
transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cfo-nw-progress-complete { background: #059669; }
.cfo-nw-progress-high { background: #10b981; }
.cfo-nw-progress-mid { background: #7c3aed; }
.cfo-nw-progress-low { background: #f59e0b; }
.cfo-nw-progress-unknown { background: #94a3b8; }
/* Runway verdict chip */
.cfo-nw-goal-verdict {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
border: 0.5px solid var(--ss-border, #e2e8f0);
background: #fafafa;
}
.cfo-nw-verdict-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
width: 18px;
height: 18px;
}
.cfo-nw-verdict-met { background: rgba(5, 150, 105, 0.08); border-color: #059669; color: #065f46; }
.cfo-nw-verdict-met .cfo-nw-verdict-icon { color: #059669; }
.cfo-nw-verdict-ok { background: rgba(5, 150, 105, 0.04); border-color: rgba(5, 150, 105, 0.4); color: #065f46; }
.cfo-nw-verdict-ok .cfo-nw-verdict-icon { color: #059669; }
.cfo-nw-verdict-behind { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.5); color: #92400e; }
.cfo-nw-verdict-behind .cfo-nw-verdict-icon { color: #d97706; }
.cfo-nw-verdict-unknown { background: #fafafa; border-color: #e2e8f0; color: var(--ss-text-secondary, #475569); }
.cfo-nw-verdict-unknown .cfo-nw-verdict-icon { color: #94a3b8; }
/* Goal-form helper copy (below type selector) */
.cfo-nw-goal-help {
font-size: 11px;
color: #94a3b8;
margin: -8px 0 8px;
font-style: italic;
line-height: 1.4;
}
/* ══════════════════════════════════════════════════════════════════
Debug tray (v0.6.7) — diagnostic snapshot + runtime probes.
No border-radius; 1px borders consistent with SS chrome.
══════════════════════════════════════════════════════════════════ */
.cfo-debug-subnav { display:flex; gap:0; padding:0 20px; }
.cfo-debug-subtab { padding:14px 18px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:none; border:none; border-bottom:2px solid transparent; color:var(--ss-text-secondary, #64748b); cursor:pointer; }
.cfo-debug-subtab.active { color:var(--ss-text-primary, #0f172a); border-bottom-color:#059669; }
.cfo-debug-subtab:hover { color:var(--ss-text-primary, #0f172a); }
.cfo-debug-kv { padding:8px 0; }
.cfo-debug-kv-row { display:flex; justify-content:space-between; padding:7px 20px; font-size:13px; border-bottom:1px solid var(--ss-border, #f1f5f9); }
.cfo-debug-kv-row:last-child { border-bottom:none; }
.cfo-debug-kv-k { color:var(--ss-text-secondary, #64748b); }
.cfo-debug-kv-v { color:var(--ss-text-primary, #0f172a); font-weight:600; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.cfo-debug-health { padding:6px 0; }
.cfo-debug-health-row { display:flex; align-items:center; gap:10px; padding:9px 20px; font-size:13px; border-bottom:1px solid var(--ss-border, #f1f5f9); }
.cfo-debug-health-row:last-child { border-bottom:none; }
.cfo-debug-dot { display:inline-block; width:10px; height:10px; flex:0 0 10px; border-radius:50%; }
.cfo-debug-health-label { font-weight:600; color:var(--ss-text-primary, #0f172a); min-width:150px; }
.cfo-debug-health-detail { color:var(--ss-text-secondary, #64748b); font-size:12px; }
.cfo-debug-probes { padding:4px 0; }
.cfo-debug-probe-row { display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid var(--ss-border, #f1f5f9); }
.cfo-debug-probe-row:last-child { border-bottom:none; }
.cfo-debug-probe-meta { flex:0 0 220px; }
.cfo-debug-probe-label { font-weight:600; font-size:13px; color:var(--ss-text-primary, #0f172a); }
.cfo-debug-probe-desc { font-size:11px; color:var(--ss-text-muted, #94a3b8); margin-top:2px; }
.cfo-debug-probe-result { flex:1; display:flex; align-items:center; gap:8px; min-height:18px; }
.cfo-debug-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; }
/* ── v0.14.0 Reconcile/Analysis layout: state cards, accordions, chips ── */
.cfo-state-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px;}
.cfo-stat{background:#fff;border:.5px solid rgba(0,0,0,.12);padding:14px 16px;}
.cfo-stat .k{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;}
.cfo-stat .v{font-size:24px;font-weight:700;line-height:1.1;margin-top:4px;}
.cfo-stat .t{font-size:10px;color:#94a3b8;margin-top:3px;}
.cfo-stat.tot{background:#1d1d1b;}
.cfo-stat.tot .k,.cfo-stat.tot .t{color:#9ca3af;} .cfo-stat.tot .v{color:#fff;}
@media(max-width:900px){.cfo-state-grid{grid-template-columns:repeat(2,1fr);}}
.cfo-directive{background:#fffdf5;border:.5px solid #d97706;border-left:3px solid #d97706;padding:16px 18px;margin-bottom:1px;}
.cfo-directive h3{margin:0 0 6px;font-size:13px;color:#92400e;}
.cfo-directive p{margin:0 0 12px;font-size:12.5px;color:#475569;line-height:1.55;}
.cfo-acc{background:#fff;border:.5px solid rgba(0,0,0,.12);margin-bottom:1px;}
.cfo-acc-head{display:flex;align-items:center;gap:10px;padding:13px 18px;cursor:pointer;user-select:none;}
.cfo-acc-head:hover{background:#fafafa;}
.cfo-acc-chev{transition:transform .2s;color:#94a3b8;font-size:11px;}
.cfo-acc.open .cfo-acc-chev{transform:rotate(90deg);}
.cfo-acc-title{font-weight:600;font-size:13px;}
.cfo-acc-count{font-size:11px;color:#94a3b8;}
.cfo-acc-spacer{flex:1;}
.cfo-acc-body{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.cfo-acc.open .cfo-acc-body{max-height:3000px;}
.cfo-acc-inner{padding:0 18px 16px;}
.cfo-chip{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border:.5px solid;white-space:nowrap;}
.cfo-chip.green{color:#059669;border-color:#059669;background:#ecfdf5;}
.cfo-chip.amber{color:#d97706;border-color:#d97706;background:#fffbeb;}
.cfo-chip.gray{color:#475569;border-color:rgba(0,0,0,.12);background:#f6f6f4;}
.cfo-twocol{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;}
.cfo-twocol .col-r{background:#f0f9ff;border-left:3px solid #0284c7;padding:14px 16px;}
@media(max-width:820px){.cfo-twocol{grid-template-columns:1fr;}}
/* ══ Budget Wizard (v0.26.0) ══ */
.cfo-bw-launch{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--ss-bg-white);border:1px solid var(--ss-border);padding:12px 18px;margin-bottom:16px}
.cfo-bw-launch.first{background:#ecfdf5;border-color:#86efac;padding:18px 20px}
.cfo-shell.cfo-dark .cfo-bw-launch.first{background:#0c3a2c;border-color:#15803d}
.cfo-bw-launch-t{font-size:14px;font-weight:700;color:var(--ss-text-primary)}
.cfo-bw-launch-d{font-size:12.5px;color:var(--ss-text-secondary);margin-top:3px;max-width:560px}
.cfo-bw-steps{display:flex;gap:1px;background:var(--ss-border);border:1px solid var(--ss-border);margin:0 0 26px;box-shadow:0 1px 4px rgba(15,23,42,.07)}
.cfo-shell.cfo-dark .cfo-bw-steps{box-shadow:0 1px 4px rgba(0,0,0,.32)}
.cfo-bw-step{flex:1 1 0;min-width:170px;display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--ss-bg-white);cursor:pointer}
.cfo-bw-step:hover{background:var(--ss-border-light)}
.cfo-bw-step.active{box-shadow:inset 0 -3px 0 #0f766e}
.cfo-bw-circ{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;font-weight:800;font-size:12px;background:var(--ss-border);color:var(--ss-text-secondary)}
.cfo-bw-step.active .cfo-bw-circ{background:var(--ss-text-primary);color:#fff}
.cfo-bw-step.done .cfo-bw-circ{background:var(--ss-success);color:#fff}
.cfo-bw-lbl{display:flex;flex-direction:column;line-height:1.2}
.cfo-bw-st{font-size:12.5px;font-weight:700;color:var(--ss-text-primary)}
.cfo-bw-sd{font-size:10.5px;color:var(--ss-text-muted)}
.cfo-bw-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.cfo-bw-counts{font-size:12px;color:var(--ss-text-secondary)}
.cfo-bw-hint{font-size:12px;color:var(--ss-text-secondary);margin:0 0 14px;max-width:900px}
.cfo-bw-hint b{color:var(--ss-text-primary)}
.cfo-bw-blk{background:var(--ss-bg-white);border:1px solid var(--ss-border);margin-bottom:14px}
.cfo-bw-blkhead{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#fff;font-weight:700}
.cfo-bw-code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:rgba(255,255,255,.22);padding:2px 8px}
.cfo-bw-bname{font-size:14px}
.cfo-bw-meta{font-size:11px;font-weight:600;opacity:.92}
.cfo-bw-bstat{margin-left:auto;display:flex;align-items:center;gap:8px}
.cfo-bw-bp{font-size:11px;font-weight:700;background:rgba(255,255,255,.2);padding:3px 9px}
.cfo-bw-bbtn{background:rgba(255,255,255,.18);border:none;color:#fff;padding:5px 9px;font-size:11px;font-weight:700;cursor:pointer}
.cfo-bw-bbtn:hover{background:rgba(255,255,255,.34)}
.cfo-bw-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.cfo-bw-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ss-text-muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--ss-border);background:#fafbfc;font-weight:700}
.cfo-shell.cfo-dark .cfo-bw-tbl th{background:#2a2a2a}
.cfo-bw-tbl th.mh{color:#0f766e}
.cfo-bw-tbl td{padding:5px 12px;border-bottom:1px solid var(--ss-border-light);vertical-align:middle;color:var(--ss-text-primary)}
.cfo-bw-tbl tr:hover{background:#f8fafc}
.cfo-shell.cfo-dark .cfo-bw-tbl tr:hover{background:#3d3d3d}
.cfo-bw-tbl tr[data-locked="1"]{background:#f3faf6}
.cfo-shell.cfo-dark .cfo-bw-tbl tr[data-locked="1"]{background:#143028}
.cfo-bw-tbl tr[data-locked="1"] td.cfo-bw-coa{box-shadow:inset 3px 0 0 var(--ss-success)}
.cfo-bw-num{font-family:ui-monospace,Menlo,monospace;font-weight:700;text-align:center;color:var(--ss-text-secondary)}
.cfo-bw-f{width:100%;border:1px solid transparent;background:transparent;padding:6px 8px;font:inherit;color:var(--ss-text-primary);height:30px}
.cfo-bw-f:hover{border-color:var(--ss-border)}
.cfo-bw-f:focus{border-color:var(--ss-accent);background:var(--ss-bg-white);outline:none}
.cfo-bw-f:disabled{color:var(--ss-text-primary);opacity:1;background:transparent}
.cfo-bw-pic{font-size:10.5px;color:var(--ss-text-muted);padding:1px 8px 2px;font-style:italic}
.cfo-bw-mc{padding:4px 12px}
.cfo-bw-match{display:flex;align-items:center;gap:8px;padding:2px 6px 2px 8px;border:1px solid transparent}
.cfo-bw-match.ok{background:#d1fae5;border-color:#86efac}
.cfo-bw-match.no{background:#fee2e2;border-color:#fca5a5}
.cfo-shell.cfo-dark .cfo-bw-match.ok{background:#0c3a2c;border-color:#15803d}
.cfo-shell.cfo-dark .cfo-bw-match.no{background:#3f1d1d;border-color:#7f1d1d}
.cfo-bw-dot{flex:0 0 auto;width:18px;height:18px;display:grid;place-items:center;color:#fff}
.cfo-bw-match.ok .cfo-bw-dot{background:var(--ss-success)}
.cfo-bw-match.no .cfo-bw-dot{background:var(--ss-danger)}
.cfo-bw-match .cfo-bw-f{border:none!important;background:transparent;height:28px}
.cfo-bw-rb{display:flex;gap:3px;justify-content:flex-end}
.cfo-bw-rb button{border:1px solid var(--ss-border);background:var(--ss-bg-white);width:28px;height:28px;display:grid;place-items:center;cursor:pointer;color:var(--ss-text-secondary);padding:0}
.cfo-bw-rb button:hover{background:var(--ss-border-light);color:var(--ss-text-primary)}
.cfo-bw-rb button.cfo-bw-lk.on{background:var(--ss-success);border-color:var(--ss-success);color:#fff}
.cfo-bw-cc{width:100%;max-width:240px;border:1px solid var(--ss-border);background:var(--ss-bg-white);padding:6px 28px 6px 10px;font:inherit;color:var(--ss-text-primary);height:32px;font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,