/* Management > Profit > Cash flow and Unpaid invoices, V1.44 (the owner's suggestions accepted 2026-11-02): the forecast's
   chart, its weeks and their amounts, the owner's lines; the unpaid invoices by age and the reminder drafts
   (Client\Apps\Management: CashFlowPage, CashFlowChart, UnpaidInvoicesPage, ProfitTabs). The shared rules of the Management
   pages (mg-*, pm-*) are in management.css and PayTabs.razor. Theme variables only, and the chart's three colours with a light and a
   dark step each (checked with the dataviz validator: aqua in, orange out, blue balance). */

.cf-page { --cf-in: #1baf7a; --cf-out: #eb6834; --cf-balance: #2a78d6; }
:root[data-theme="dark"] .cf-page { --cf-in: #199e70; --cf-out: #d95926; --cf-balance: #3987e5; }

.cf-page .pm-card .sub, .cf-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.cf-neg { color: var(--bad); }

/* The chart: one $ axis, thin bars, the balance line; its frame scrolls sideways on a phone (the page never does) */
.cf-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cf-chart { display: block; width: 100%; min-width: 640px; height: auto; color: var(--text); }
.cf-chart .cf-in { fill: var(--cf-in); }
.cf-chart .cf-out { fill: var(--cf-out); }
.cf-chart .cf-balance-line { stroke: var(--cf-balance); }
.cf-chart .cf-balance-dot { fill: var(--cf-balance); stroke: var(--panel); }
.cf-legend { display: inline-flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.cf-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.cf-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.cf-key-in { background: var(--cf-in); }
.cf-key-out { background: var(--cf-out); }
.cf-key-balance { width: 16px; height: 2px; border-radius: 1px; background: var(--cf-balance); }

/* The weeks and the amounts of the one opened */
.cf-weeks tr.cf-week { cursor: pointer; }
.cf-weeks tr.cf-week.on td { background: var(--accent-soft); }
.cf-weeks tr.cf-start td { background: var(--panel-2); }
.cf-weeks tr.cf-items > td { background: var(--panel-2); padding: 6px 10px 10px; }
.cf-itemlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-itemlist li { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.cf-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-item-day { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-item-amount { margin-left: auto; font-variant-numeric: tabular-nums; }
.cf-explain { font-size: 13px; color: var(--text); white-space: normal; line-height: 1.4; }

/* The owner's lines */
.cf-lines td { vertical-align: middle; }
.cf-lines tr.cf-outside td { opacity: 0.55; }
.cf-wide { width: 100%; min-width: 180px; }
.cf-actions { white-space: nowrap; text-align: right; }
.cf-h4 { margin: 14px 0 4px; font-size: 14px; }

/* Unpaid invoices: the switch, the drafts */
.cf-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cf-switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.cf-switch-note { font-size: 13px; }
.cf-draft { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 10px 12px; margin: 0 0 12px; }
.cf-draft-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.cf-draft-head .spacer { flex: 1; }
.cf-to { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; margin-bottom: 8px; word-break: break-word; }
.cf-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.cf-subject, .cf-body { width: 100%; font-size: 14px; color: var(--text); }
.cf-body { font-family: inherit; line-height: 1.45; resize: vertical; min-height: 160px; }
.cf-draft-actions .spacer { flex: 1; }
.cf-confirm { font-size: 13px; font-weight: 600; }
.cf-detail { font-size: 12px; max-width: 360px; word-break: break-word; }
.cf-unpaid td, .cf-aging td { white-space: nowrap; }

@media (max-width: 600px) {
    /* The weeks fit a phone without the net (in - out); an opened week's amounts stay in view while the table scrolls */
    .cf-weeks .cf-net { display: none; }
    .cf-weeks th, .cf-weeks td { padding-left: 4px; padding-right: 4px; font-size: 12.5px; }
    .cf-itemlist { position: sticky; left: 0; max-width: calc(100vw - 76px); }
    .cf-draft { padding: 8px; }
    .cf-draft-head strong { margin-left: 0; }
    .cf-switch-note { flex-basis: 100%; }
    .cf-actions { white-space: normal; }
}