/* ─────────────────────────────────────────────────────────────────────────────
   OVERVIEW
   Cash flow board, the pending-document shelf and the activity feed.

   Part 7 of 11, cut from the 5,142-line app.css. THE ORDER OF THESE
   FILES IS LOAD-BEARING — they are one cascade, split for navigation only, and
   index.php links them in this sequence. Moving one changes which rule wins.
   ───────────────────────────────────────────────────────────────────────────── */
/* =========================================
   CASH FLOW — a live CASH-POSITION status board. Swiss: a runway HERO + status
   pill (the at-a-glance "how long can we operate" signal), big tabular figure-
   units (cash · burn · pending AR), and the A/R aging detail below. Hairline
   grid aligns everything; reflows responsively.
   ========================================= */
.cashflow-body { padding: 0; }
/* "as of {year-end}" tag — shown only when viewing a PAST period (a snapshot). */
.cf-head-titles { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cf-asof { font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-muted); white-space: nowrap; }
.cf-asof:empty { display: none; }
.cf-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.cf-cell {
    padding: 26px var(--space-6) 28px;
    border-right: 1px solid var(--divider);
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-width: 0;
}
.cf-cell:last-child { border-right: none; }

/* shared tracked-caps caption (the figure-unit label) */
.cf-cap {
    font-size: 10.5px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* HERO — runway figure + status */
.cf-hero { gap: 16px; }
.cf-hero-fig { display: flex; align-items: baseline; gap: 8px; margin-bottom: var(--space4); }
/* PROJECT-DETAILS heroes: a real flex column with a gap that clears the big number's
   descenders (the comma in "47,000" was colliding into the foot — .cf-hero's `gap`
   never applied because it was not display:flex, and .cf-hero-fig's margin used a typo'd
   var). Scoped here so the other KPI cards' spacing is untouched. */
#view-project-details .cf-hero { display: flex; flex-direction: column; gap: 22px; }
/* PERFORMANCE board hero (overview + projects "80.8%") — the figure sat flush against
   the STRONG pill below because .cf-hero-fig's margin used the same typo'd var (→ 0).
   Give it a real gap so the big number clears the status pill. */
#performance-board .cf-hero-fig { margin-bottom: 16px; }
.cf-hero-num {
    font-size: clamp(46px, 4.4vw, 62px);
    font-weight: var(--fw-bold);
    line-height: 0.88;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-display);
}
.cf-hero-unit { font-size: 19px; font-weight: var(--fw-semibold); color: var(--text-muted); }
.cf-hero-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* live status pill (dot + label) */
.cf-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    border: 1px solid var(--divider-strong);
    color: var(--text-muted);
    white-space: nowrap;
}
.cf-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.cf-status--good { color: var(--neon-green); border-color: color-mix(in srgb, var(--neon-green) 42%, transparent); }
.cf-status--good::before { box-shadow: 0 0 7px var(--neon-green-glow); }
.cf-status--watch { color: var(--warning-yellow); border-color: color-mix(in srgb, var(--warning-yellow) 50%, transparent); }
.cf-status--watch::before { box-shadow: 0 0 7px var(--warning-yellow); }
.cf-status--risk { color: var(--neon-red); border-color: color-mix(in srgb, var(--neon-red) 48%, transparent); }
.cf-status--risk::before { box-shadow: 0 0 7px var(--neon-red-glow); }

/* figure-units */
.cf-fig { gap: 12px; }
.cf-val {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
}
.cf-val--ar { color: var(--warning-yellow); text-shadow: 0 0 10px color-mix(in srgb, var(--warning-yellow) 35%, transparent); transition: color 0.4s ease, text-shadow 0.4s ease; }
/* Pending-AR figure mirrors the aging spectrum's worst severity — red first. */
.cf-val--ar.ar-good  { color: var(--neon-green); text-shadow: 0 0 10px color-mix(in srgb, var(--neon-green) 32%, transparent); }
.cf-val--ar.ar-watch { color: var(--warning-yellow); text-shadow: 0 0 10px color-mix(in srgb, var(--warning-yellow) 35%, transparent); }
.cf-val--ar.ar-risk  { color: var(--neon-pink); text-shadow: 0 0 12px var(--neon-pink-glow); }

/* A/R aging detail row */
.cf-aging { border-top: 1px solid var(--divider); padding: 20px var(--space-6) 22px; }
.cf-aging-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cf-aging-total { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-main); font-variant-numeric: tabular-nums; }

/* PERFORMANCE board — TWO editorial columns separated by a hairline: LEFT = headline
   profitability (margin hero · Revenue/Net Profit figure-units · quote win-rate),
   RIGHT = breakdowns (avg per project · By Client · By Project Type). Sophisticated
   weight hierarchy: a big hero figure, tracked-caps captions, tabular figure-units. */
.perf-body { padding: 0; }
.perf-2col { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.perf-col { display: flex; flex-direction: column; gap: 24px; padding: 28px var(--space-6) 30px; min-width: 0; }
.perf-col--right { border-left: 1px solid var(--divider); }
.perf-sec { display: flex; flex-direction: column; gap: 13px; }
.perf-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.perf-sec-val { font-size: 17px; font-weight: var(--fw-bold); color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1; }
/* a hairline above the "secondary" sections so the column reads as stacked figure-units */
.perf-sec--top { padding-top: 20px; border-top: 1px solid var(--divider); }
/* PROJECTS page — the Performance board's COLLAPSED (compact) state shows ONLY the
   Net-Profit-Margin section + Quote-Win-Rate row; hide the Contribution row (.perf-cmprow)
   and the by-type Value-Leaders sections (.perf-valrow). Default in the Performance tab is
   EXPANDED (no .perf-compact); the header chevron collapses to this compact summary. */
#performance-board.perf-compact .perf-cmprow,
#performance-board.perf-compact .perf-valrow { display: none; }
/* CONTRIBUTION ROW — By Client | By Project Type revenue/profit comparisons, SPLIT into two
   columns side by side (no toggle). Mirrors the perf-2col grid + divider rules. */
.perf-cmprow { display: grid; grid-template-columns: 1fr 1fr; align-items: start; border-top: 1px solid var(--divider); }
.perf-cmpcol { display: flex; flex-direction: column; gap: 13px; padding: 24px var(--space-6) 28px; min-width: 0; }
.perf-cmpcol + .perf-cmpcol { border-left: 1px solid var(--divider); }
.perf-cmp-pane.hidden { display: none; }
.perf-cmp-pane { display: flex; flex-direction: column; gap: 13px; }
/* Income KPI card — the left headline column is lighter, so centre it to balance. */
#tx-pane-income .perf-2col > .perf-col:first-child { justify-content: center; }
@media (max-width: 1000px) {
    #tx-pane-income .perf-2col > .perf-col:first-child { justify-content: flex-start; }
}
/* Performance board — TOP-align both columns so the margin hero sits on the same baseline
   as the right column's first heading (sophisticated Swiss grid alignment, not floated). */
#performance-board .perf-2col > .perf-col { justify-content: flex-start; }
/* neutralise the legacy standalone margins — the column gap + section rules own spacing now */
.perf-col .perf-subfigs { margin-top: 0; }
.perf-col .perf-avglist { margin-top: 0; }
.perf-col .perf-cmp-bars { margin-bottom: 0; }
.perf-col .cf-aging-head { margin-bottom: 0; }
/* stack the two columns when the board narrows (it goes full-width with the top grid) */
@media (max-width: 1000px) {
    .perf-2col { grid-template-columns: 1fr; }
    .perf-col--right { border-left: none; border-top: 1px solid var(--divider); }
}

/* PROJECT DETAILS — both KPI cards centre their lighter left headline column (like the
   income board). */
#view-project-details .perf-2col > .perf-col:first-child { justify-content: center; }
@media (max-width: 1000px) { #view-project-details .perf-2col > .perf-col:first-child { justify-content: flex-start; } }
.pd-phase-cap { margin-bottom: 18px; }
/* the 2nd KPI row (billing) sits under a hairline in the SAME board */
.pd-kpi-row2 { border-top: 1px solid var(--divider); }

/* ── KPI row 2 TWIN DIGEST — BILLING | TIME ───────────────────────────────────── */
/* Each column: a header (caption + status pill), a hero figure with a sub-line, then a
   share-spectrum bar. Tighter vertical rhythm than the row-1 columns. */
.pd-digest-row .perf-col { gap: 16px; justify-content: flex-start; }
.pd-digest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-digest-cap { display: inline-flex; align-items: center; gap: 7px; }
.pd-digest-cap .material-icons { font-size: 15px; color: var(--text-muted); }
.pd-digest-figblock { display: flex; flex-direction: column; gap: 5px; }
.pd-digest-hero { margin-bottom: 0; }
.pd-digest-sub { font-size: 12px; color: var(--text-muted); }
/* status-% pill (e.g. "89% collected" / "85% billable") */
.pd-digest-pill { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 11px;
    border-radius: var(--radius-pill); background: var(--divider); white-space: nowrap; }
.pd-digest-pill-n { font-size: 13px; font-weight: var(--fw-bold); color: var(--text-main); font-variant-numeric: tabular-nums; }
.pd-digest-pill-l { font-size: 9px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-muted); }
.pd-digest-pill--billing { background: color-mix(in srgb, var(--success-green) 13%, transparent); }
.pd-digest-pill--billing .pd-digest-pill-n { color: var(--success-green); }
.pd-digest-pill--time { background: var(--active-theme-bg); }
.pd-create-btn { padding: 10px 22px; font-size: 14px; border-radius: var(--radius-sm); }

/* BILLING PROGRESS bar chart — each stage (Quoted 100% · Billed · Paid) a labelled bar
   whose fill is its % of the quoted total. Replaces the phase timeline in row 2. */
.pb-chart { display: flex; flex-direction: column; gap: 17px; padding-top: 4px; }
.pb-bar-row { display: flex; flex-direction: column; gap: 8px; }
.pb-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pb-bar-key { font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--text-muted); }
.pb-bar-meta { display: flex; align-items: baseline; gap: 10px; }
.pb-bar-amt { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-main); font-variant-numeric: tabular-nums; }
.pb-bar-pct { font-size: 12px; font-weight: var(--fw-medium); color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.pb-bar-track { height: 10px; background: var(--bg-main); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.13); }
/* .pb-bar-fill inherits the shared track/fill recipe (see SHARED RECIPES) */
.pb-fill--quote { background: var(--text-main); opacity: 0.5; }
.pb-fill--bill  { background: var(--warning-yellow); }
.pb-fill--paid  { background: var(--success-green); box-shadow: 0 0 5px var(--success-green); }

/* INCOME / EXPENSE KPI board — RIGHT column holds the signature pie + its legend,
   vertically centred against the taller left column (hero · figure-units · spectrum). */
.perf-col--chart { justify-content: center; gap: 20px; }
.perf-chart-body { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; }
.perf-chart-body .flex-center-x { flex: 0 0 auto; }
.perf-chart-body .donut-svg { width: 180px; }
.perf-chart-body .chart-legend { flex: 1 1 200px; min-width: 0; max-width: 300px; max-height: 230px; }
@media (max-width: 1000px) { .perf-chart-body { gap: 28px; } }

.perf-grid { grid-template-columns: 1.35fr 1fr 1.15fr; }
.perf-subval { font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1; }
/* COL 1 — Revenue & Net Profit, two figure-units beneath the margin hero */
.perf-subfigs { display: flex; gap: 28px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--divider); }
.perf-subfig { display: flex; flex-direction: column; gap: 6px; }
.cf-val.perf-name { font-size: 19px; line-height: 1.18; letter-spacing: 0; white-space: normal; font-variant-numeric: normal; }
.perf-sub { margin-top: 6px; font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-muted); }
/* COL 2 — avg-revenue-per-project ledger list, ranked high→low. */
.perf-avglist { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* each row carries a faint ink proportion-bar behind it (width ∝ avg/max) so the ranking
   reads visually; name + value sit above it. */
.perf-avgrow { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 8px 3px 9px; border-radius: 5px; overflow: hidden; }
.perf-avgrow-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: color-mix(in srgb, var(--text-main) 8%, transparent); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); z-index: 0; }
.perf-avgrow-name { position: relative; z-index: 1; font-size: 12.5px; font-weight: var(--fw-medium); color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.perf-avgrow-val { position: relative; z-index: 1; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--text-main); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ── PERFORMANCE board ROW 2 — VALUE LEADERS leaderboard (Type | Account) ──────── */
.perf-valrow { padding: 22px var(--space-6) 28px; border-top: 1px solid var(--divider); }
.perf-val-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.perf-vallist { display: flex; flex-direction: column; gap: 13px; }
.perf-valrow-item { display: flex; align-items: center; gap: 14px; }
.perf-valrow-name { flex: 0 0 26%; max-width: 26%; min-width: 0; font-size: 12.5px; font-weight: var(--fw-medium);
    color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-valrow-n { color: var(--text-muted); font-size: 11px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.perf-valrow-track { flex: 1; height: 8px; min-width: 36px; background: var(--divider); }
.perf-valrow-fill { width: 0; }
.perf-valrow-amt { flex: 0 0 auto; min-width: 82px; text-align: right; font-size: 13px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.perf-valrow-amt.is-pos { color: var(--text-main); }
.perf-valrow-amt.is-neg { color: var(--danger-red); }
.perf-valrow-badge { flex: 0 0 auto; min-width: 48px; text-align: center; font-size: 9.5px; font-weight: var(--fw-bold);
    letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.perf-valrow-badge.is-good  { color: var(--success-green); background: color-mix(in srgb, var(--success-green) 13%, transparent); }
.perf-valrow-badge.is-watch { color: var(--warning-yellow); background: color-mix(in srgb, var(--warning-yellow) 16%, transparent); }
.perf-valrow-badge.is-risk  { color: var(--danger-red); background: color-mix(in srgb, var(--danger-red) 13%, transparent); }
/* the value toggle reuses the .perf-cmp-switch glider, but its OWN tab class so the
   By-Client/Type handler (setPerfCmp) never cross-fires it */
.perf-val-tab { position: relative; z-index: 1; border: none; background: transparent; cursor: pointer; padding: 5px 11px;
    border-radius: var(--radius-pill); font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
    font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; transition: color 0.16s ease; }
.perf-val-tab.active { color: var(--text-main); }
/* row-2 = "by project type" group: Avg per Project (static) + the two collapsible sections
   (Earned-per-hour + Margin-by-type). Each collapsible header is click-to-collapse; the
   chevron flips when collapsed. The static (Avg) header is a plain label. */
.perf-val-head { cursor: pointer; user-select: none; }
.perf-val-head--static { cursor: default; }
.perf-val-chev { font-size: 22px; color: var(--text-muted); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.perf-valsec + .perf-valsec { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--divider); }
.perf-valsec.is-collapsed .perf-val-head { margin-bottom: 0; }
.perf-valsec.is-collapsed .perf-vallist { display: none; }
.perf-valsec.is-collapsed .perf-val-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .perf-val-chev { transition: none; } }

/* ── QUOTING LESSONS (bad-quote tracker) ──────────────────────────────────────── */
/* Performance digest line under the Quote→Cash funnel */
.perf-lessons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--divider); }
.perf-lessons-lost { font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-main); font-variant-numeric: tabular-nums; }
.perf-lessons-n { color: var(--text-muted); font-weight: var(--fw-medium); }
.perf-lessons-tag { font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: var(--fw-bold); color: var(--danger-red);
    background: color-mix(in srgb, var(--danger-red) 13%, transparent); padding: 3px 8px; border-radius: var(--radius-pill); }
.perf-lessons-empty { font-size: 12px; color: var(--text-muted); }
.perf-lessons-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent;
    cursor: pointer; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.02em; color: var(--text-muted); transition: color 0.16s ease; }
.perf-lessons-link:hover { color: var(--text-main); }
.perf-lessons-link .material-icons { font-size: 14px; }
/* the digest's two actions ride as ONE right-aligned cluster (measure → apply), so a
   narrow column wraps them together rather than stranding one on its own line */
.perf-lessons-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; }
.perf-lessons-acts .perf-lessons-link { margin-left: 0; }
.perf-lessons-link--apply { color: var(--text-main); }

/* SMART QUOTING sheet — everything else reuses the AI result grammar (.ai-board /
   .ai-sec / .ai-list / .ai-row / .pj-status / .qa-hint); this is the only addition. */
.sq-lede { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 18px; }
/* the brief drop zone — shorter than the AI tab's, because it sits UNDER a form.
   Qualified with .ai-drop on purpose: .ai-drop is declared LATER in this file, so a
   bare .sq-drop lost every tie and the zone rendered at the full 260px inbox height,
   pushing the Draft-it buttons out of the sheet. */
.ai-drop.sq-drop { min-height: 132px; padding: 20px; margin-top: 4px; }
.sq-drop .ai-big { font-size: 26px; margin-bottom: 6px; }
.sq-drop .ai-drop-title { font-size: 13.5px; }
.sq-drop .ai-drop-sub { font-size: 12px; }
.sq-drop-name { font-size: 11.5px; color: var(--text-main); font-weight: var(--fw-semibold); margin-top: 9px; }
.sq-drop-name:empty { display: none; }
#sq-brief { min-height: 74px; resize: vertical; }
.ai-row-rec:disabled { pointer-events: none; }

/* Review modal — quote ref + amount context chip */
.qr-context { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 14px;
    border-radius: var(--radius-md); background: var(--bg-main); border: 1px solid var(--divider); }
.qr-context-ref { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-main); }
.qr-context-amt { font-size: 15px; font-weight: var(--fw-bold); color: var(--text-main); }

/* Lessons-log modal */
.qr-summary { display: flex; gap: 26px; flex-wrap: wrap; padding: 4px 2px 18px; margin-bottom: 6px; border-bottom: 1px solid var(--divider); }
.qr-sum-fig { display: flex; flex-direction: column; gap: 6px; }
.qr-sum-val { font-size: 17px; font-weight: var(--fw-bold); color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1; }
.qr-item { padding: 14px 2px; border-bottom: 1px solid var(--divider); }
.qr-item:last-child { border-bottom: none; }
.qr-item-head { display: flex; align-items: baseline; gap: 12px; }
.qr-item-ref { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-main); }
.qr-item-tag { font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: var(--fw-bold); color: var(--danger-red);
    background: color-mix(in srgb, var(--danger-red) 13%, transparent); padding: 3px 8px; border-radius: var(--radius-pill); }
.qr-item-amt { margin-left: auto; font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-main); font-variant-numeric: tabular-nums; }
.qr-item-meta { margin-top: 5px; font-size: 11px; color: var(--text-muted); }
.qr-item-note { margin-top: 7px; font-size: 12.5px; color: var(--text-main); line-height: 1.45; }
.qr-empty { padding: 32px 8px; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* REVENUE-vs-PROFIT comparison — two groups (By Client · By Project Type) side by
   side; within each, a Revenue bar directly over a Profit bar (SAME colour per
   entity) + a legend table (entity · Rev% · Profit%) so the shift is obvious. */
/* Two groups divided by a clear gap + a hairline rule down the middle. */
.perf-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.perf-cmp { min-width: 0; padding-inline: 40px; }
.perf-cmp:first-child { padding-left: 0; border-right: 1px solid var(--divider); }
.perf-cmp:last-child { padding-right: 0; }
.perf-cmp-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.perf-cmp-row { display: flex; align-items: center; gap: 12px; }
.perf-cmp-tag { width: 56px; flex-shrink: 0; text-align: right; font-size: 9.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-muted); }
/* Neon RGB bars — vivid segments on a dark track so they read like an RGB strip. */
.perf-cmp-row .cf-agebar-track { flex: 1; height: 10px; background: #15151c; }
.perf-cmp-legend { display: flex; flex-direction: column; }
.perf-cmp-leg { display: grid; grid-template-columns: 9px 1fr 54px 54px; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--divider); }
.perf-cmp-leg:last-child { border-bottom: none; }
.perf-cmp-leg-name { font-size: 12.5px; font-weight: var(--fw-medium); color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.perf-cmp-leg-rev, .perf-cmp-leg-prof { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-main); font-variant-numeric: tabular-nums; text-align: right; }
.perf-cmp-leg--head { padding-top: 0; border-bottom: 1px solid var(--divider-strong); }
.perf-cmp-leg--head span { font-size: 9px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-medium); }
@media (max-width: 820px) {
    .perf-cmp-grid { grid-template-columns: 1fr; }
    .perf-cmp { padding-inline: 0; }
    .perf-cmp:first-child { border-right: none; border-bottom: 1px solid var(--divider); padding-bottom: 28px; }
    .perf-cmp:last-child { padding-top: 28px; }
}

/* QUOTE OUTCOMES — ONE 100%-stacked bar of quote outcomes BY COUNT (Won · Pending ·
   Lost), so it reads in the same unit as the win-rate headline (won ÷ decided). The
   lost VALUE lives in the lessons line below. */
.perf-funnel { margin-top: 14px; }
.perf-qbar { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: var(--divider); }
.perf-qseg { height: 100%; width: 0; transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.perf-qlegend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.perf-qkey { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-muted); }
.perf-qkey i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.perf-qkey b { color: var(--text-main); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; margin-left: 2px; }

/* ====================================================================
   PENDING-DOCUMENT PORTAL — an Apple-Store-style shelf of quick-action
   mini cards (one per quote to bill / invoice to collect). Horizontal
   snap-scroll row; each card handles straight into the existing modals.
   ==================================================================== */
.pdoc-board .board-header { align-items: flex-end; }
.pdoc-head-titles { display: flex; flex-direction: column; gap: 4px; }
.pdoc-head-sub { font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-muted); }
.pdoc-count {
    min-width: 24px; height: 24px; padding: 0 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill); background: var(--text-main); color: var(--bg-card);
    font-size: 12.5px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.pdoc-count:empty { display: none; }

/* the shelf — horizontal snap scroll, hidden scrollbar, soft edge-fade */
.pdoc-shelf {
    display: flex; gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: var(--space-6);   /* match the standard board-body inset (24px all round) */
    scroll-padding-left: var(--space-6);   /* snap respects the inset → first card edge lines up with the board title (was snapping the 24px away) */
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* fade only the RIGHT edge (scroll affordance); the left edge stays crisp so the
       first card aligns cleanly with the title. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
}
.pdoc-shelf::-webkit-scrollbar { height: 0; display: none; }

.pdoc-card {
    --pdoc-accent: var(--text-muted);   /* per-KIND accent (drives ONLY the badge) */
    scroll-snap-align: start; flex: 0 0 234px;
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px 18px 16px;
    /* clean WHITE card — only the Quote/Invoice tag carries the kind colour. */
    background: var(--bg-card);
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2); position: relative; overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.pdoc-card--quote    { --pdoc-accent: var(--ultra-cyan); }
.pdoc-card--invoice  { --pdoc-accent: var(--warning-yellow); }
/* DUE-STATUS REACTIVITY — the tag colour escalates as the item ages past its period,
   mirroring the A/R aging spectrum. These come AFTER the kind rules so they win:
   due-soon (31–60d) → warning-yellow, critical/overdue (>60d) → neon-pink. The age
   figure turns pink at critical too, so the "period due" reads at a glance. */
.pdoc-sev--late { --pdoc-accent: var(--warning-yellow); }
.pdoc-sev--crit { --pdoc-accent: var(--neon-pink); }
.pdoc-sev--crit .pdoc-age { color: var(--neon-pink); }
@media (hover: hover) { .pdoc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); } }

.pdoc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; min-height: 28px; }
.pdoc-tools { display: flex; gap: 2px; flex-shrink: 0; margin-right: -4px; }   /* utility icons, top-right */
.pdoc-icon {
    width: 28px; height: 28px; border-radius: var(--radius-pill);
    border: none; background: transparent; color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.pdoc-icon:hover { background: var(--active-theme-bg); color: var(--text-main); }
.pdoc-icon--wo:hover { background: color-mix(in srgb, var(--neon-red) 12%, transparent); color: var(--neon-red); }   /* write-off = a loss action */
.pdoc-icon .material-icons { font-size: 16px; }
/* Dark text on an accent-tinted pill — stays readable across yellow/cyan/red
   (the accent colour itself is unreadable as text, esp. the bright yellow). */
/* NEON tag — bright themed accent (ultra-cyan quote · brand-yellow invoice) with a
   colour-matched glow so the pill reads as emissive. Dark ink stays readable on both. */
.pdoc-badge { font-size: 9.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-bold); padding: 3px 9px; border-radius: var(--radius-pill); color: #0a0a0a; background: var(--pdoc-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pdoc-accent) 65%, transparent),
                0 0 10px color-mix(in srgb, var(--pdoc-accent) 60%, transparent),
                0 0 22px color-mix(in srgb, var(--pdoc-accent) 32%, transparent); }
/* Age = the bare day count; the CARD colour (red) signals "critical", so the age
   text stays neutral/readable on the tint rather than fighting it. */
.pdoc-age { font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--text-main); font-variant-numeric: tabular-nums; }

.pdoc-num { font-size: 14.5px; font-weight: var(--fw-semibold); color: var(--text-main); letter-spacing: 0.01em; }
.pdoc-who { font-size: 13px; font-weight: var(--fw-medium); color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdoc-proj { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -3px; }
.pdoc-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; }
.pdoc-link:hover { border-bottom-color: currentColor; }

.pdoc-amt-wrap { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.pdoc-amt-cap { font-size: 9px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-muted); }
.pdoc-amt { font-size: 21px; font-weight: var(--fw-bold); color: var(--text-main); letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.pdoc-phase { font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-muted); margin-top: 2px; }

.pdoc-actions { display: flex; margin-top: 10px; }
.pdoc-action {
    flex: 1 1 auto; height: 36px; border: none; border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: var(--fw-semibold); letter-spacing: 0.01em; white-space: nowrap;
    cursor: pointer; color: var(--bg-card); background: var(--text-main);
    transition: transform 0.16s ease, opacity 0.16s ease;
}
.pdoc-action:hover { opacity: 0.88; }
.pdoc-action:active { transform: scale(0.96); }

.pdoc-empty { display: flex; align-items: center; gap: 10px; padding: 6px var(--space-6) 22px; color: var(--success-green); font-size: 13px; font-weight: var(--fw-medium); }
.pdoc-empty .material-icons { font-size: 20px; }

/* ====================================================================
   RECENT ACTIVITY FEED — a unified stream (documents · ledger · new
   projects/clients/team). Each row: a kind-accented icon, a title with
   clickable client/project handles, and a right-aligned amount + date.
   ==================================================================== */
.activity-feed { padding: var(--space-2) var(--space-6) var(--space-5); display: flex; flex-direction: column; }
/* columned (matches the income/expense list): DATE · icon · activity (title + sub-line
   under it, truncating) · amount — date leads the row, amount holds the right column. */
.activity-row { display: grid; grid-template-columns: 104px 34px minmax(0, 1fr) 132px; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.activity-row:last-child { border-bottom: none; }
.activity-amt-cell { text-align: right; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--active-theme-bg); color: var(--text-muted); }
.activity-ico .material-icons { font-size: 18px; }
.activity-ico--green   { background: color-mix(in srgb, var(--success-green) 15%, transparent); color: var(--success-green); }
.activity-ico--red     { background: color-mix(in srgb, var(--danger-red) 13%, transparent);   color: var(--danger-red); }
.activity-ico--blue    { background: color-mix(in srgb, var(--chart-blue) 15%, transparent);    color: var(--chart-blue); }
.activity-ico--cyan    { background: color-mix(in srgb, var(--chart-cyan) 16%, transparent);    color: var(--chart-cyan); }
.activity-ico--purple  { background: color-mix(in srgb, #8b5cf6 16%, transparent);              color: #8b5cf6; }
.activity-ico--yellow  { background: color-mix(in srgb, var(--warning-yellow) 26%, transparent); color: var(--text-main); }  /* yellow is unreadable as a glyph → ink icon on a yellow wash */
.activity-ico--neutral { background: var(--active-theme-bg); color: var(--text-muted); }

.activity-main { flex: 1; min-width: 0; }
.activity-title { font-size: 14px; color: var(--text-main); font-weight: var(--fw-semibold); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-dot { color: var(--divider-strong); margin: 0 4px; }
.activity-link { color: var(--text-main); text-decoration: none; font-weight: var(--fw-semibold); border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; }
.activity-link:hover { border-bottom-color: currentColor; }
.activity-sub .activity-link { color: var(--text-muted); }
.activity-sub .activity-link:hover { color: var(--text-main); }
.activity-ref { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.activity-meta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.activity-amt { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-main); font-variant-numeric: tabular-nums; }
.activity-amt.is-pos { color: var(--success-green); }
.activity-amt.is-neg { color: var(--danger-red); }
.activity-date { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; }
.activity-empty { display: flex; align-items: center; gap: 10px; padding: 24px var(--space-6); color: var(--text-muted); font-size: 13px; }
.activity-empty .material-icons { font-size: 20px; }
/* small screens — keep the leading date + the title/amount, drop the icon column; the
   title keeps truncating, the sub-line wraps. */
@media (max-width: 680px) {
    .activity-row { grid-template-columns: 88px minmax(0, 1fr) 104px; gap: 10px; }
    .activity-ico { display: none; }
    .activity-sub { white-space: normal; }
}