body { font-size: .9rem; }

.neg { color: #b02a37; }
.zero { color: #adb5bd; }

/* ---- Cash flow grid ---- */
.cf-wrap {
    overflow: auto;
    max-height: calc(100vh - 190px);
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}
.cf-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8rem;
    white-space: nowrap;
}
.cf-table th, .cf-table td {
    padding: .12rem .4rem;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    background: #fff;
}
.cf-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #343a40;
    color: #fff;
    font-weight: 600;
}
.cf-table .cf-label {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 260px;
    text-align: left;
    font-weight: normal;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.cf-table thead th.cf-label { z-index: 3; }
.cf-num { text-align: right; font-variant-numeric: tabular-nums; min-width: 84px; }
.cf-table td.cf-total { font-weight: 600; background: #f8f9fa; border-left: 1px solid rgba(0, 0, 0, .1); }
.cf-table td.cf-now { box-shadow: inset 1px 0 0 #9ec5fe, inset -1px 0 0 #9ec5fe; }
.cf-table thead th.cf-now { background: #0d6efd; }

.cf-subtotal th, .cf-subtotal td { font-weight: 600; border-top: 1px solid rgba(0, 0, 0, .25); }
.cf-strong th, .cf-strong td { font-weight: 700; }
.cf-totals .cf-strong > * { background: #fff3cd; border-top: 1px solid #adb5bd; border-bottom: 1px solid #adb5bd; }
.cf-muted th, .cf-muted td { color: #6c757d; font-style: italic; }
.cf-indent { padding-left: 1.5rem !important; }

/* ---- Sections: pastel colours, collapsible ---- */
.cf-section > th, .cf-section > td {
    border-top: 1px solid rgba(0, 0, 0, .15);
    padding-top: .35rem;
    padding-bottom: .3rem;
}
.cf-section > th { cursor: pointer; user-select: none; }
.cf-section .cf-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .05em;
}
.cf-toggle { font-size: .8rem; line-height: 1; color: inherit; }
/* "Company breakdown shows" picker inside the Income by company heading */
.cf-picker { margin-left: .6rem; font-weight: normal; text-transform: none; letter-spacing: 0; cursor: default; }
.cf-picker-label { font-size: .72rem; color: #495057; margin-right: .25rem; }
.cf-status-picker {
    display: inline-block;
    width: auto;
    height: 1.45rem;
    min-height: 0;
    padding: 0 1.6rem 0 .4rem;
    font-size: .72rem;
    background-position: right .35rem center;
    vertical-align: middle;
}
.cf-vat-badge {
    margin-left: .4rem;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .03em;
    vertical-align: middle;
    color: #495057;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
}
.cf-auto-badge {
    font-size: .6rem;
    font-weight: 600;
    color: #495057;
    background: rgba(255, 255, 255, .8);
    border: 1px dashed rgba(0, 0, 0, .25);
    cursor: help;
}
.cf-table td.cf-calc { font-style: italic; color: #495057; cursor: help; }

tbody[data-section] > tr > th,
tbody[data-section] > tr > td { background: var(--sec-row); }
tbody[data-section] > tr.cf-section > th,
tbody[data-section] > tr.cf-section > td,
tbody[data-section] > tr.cf-strong > th,
tbody[data-section] > tr.cf-strong > td,
tbody[data-section] > tr > td.cf-total { background: var(--sec-head); }

/* Header cells hold the section summary: hidden while expanded, shown (bold) while collapsed. */
tbody[data-section]:not(.cf-collapsed) > tr.cf-section > td.cf-num { color: transparent; }
tbody.cf-collapsed > tr.cf-section > td.cf-num { font-weight: 600; }
tbody.cf-collapsed > tr:not(.cf-section) { display: none; }
tbody.cf-collapsed .cf-note { display: none; }

.cf-sec-costs      { --sec-head: #fbdfe3; --sec-row: #fff5f6; } /* rose */
.cf-sec-vat        { --sec-head: #dde3ee; --sec-row: #f4f6fa; } /* slate */
.cf-sec-wages      { --sec-head: #fbe5cf; --sec-row: #fff7ef; } /* apricot */
.cf-sec-transfers  { --sec-head: #fbf0c4; --sec-row: #fffcee; } /* butter */
.cf-sec-company    { --sec-head: #d9f0de; --sec-row: #f3fbf5; } /* mint */
.cf-sec-status     { --sec-head: #d8ebf8; --sec-row: #f3f9fe; } /* sky */
.cf-sec-bank       { --sec-head: #e6e0f6; --sec-row: #f8f6fd; } /* lavender */
.cf-sec-expected   { --sec-head: #d2eeec; --sec-row: #f0faf9; } /* aqua */
.cf-sec-optimistic { --sec-head: #f4dcef; --sec-row: #fcf4fa; } /* orchid */

/* The Expected scenario is the headline forecast, so its text is heavier. */
.cf-table tbody.cf-sec-expected > tr > th,
.cf-table tbody.cf-sec-expected > tr > td { font-weight: 600; color: #1f2d2c; }
.cf-table tbody.cf-sec-expected > tr.cf-subtotal > *,
.cf-table tbody.cf-sec-expected > tr.cf-strong > * { font-weight: 800; }

/* Closing balance rows (Expected / Optimistic) are slightly larger and ruled above and below so they read across easily. */
.cf-table tbody > tr[data-key$="-closing"] > * { font-size: 1.05rem; border-bottom: 1px solid rgba(0, 0, 0, .25); }

/* Closing incl. reserve rows keep their highlight but aren't bold: same weight as the section's other rows. */
.cf-table tbody > tr[data-key$="-with"]:not(.cf-section) > * { font-weight: 400; }
.cf-table tbody.cf-sec-expected > tr[data-key$="-with"]:not(.cf-section) > * { font-weight: 600; }

/* Negative numbers are red in every row, including muted rows and the Expected section (whose own text
   colour would otherwise win). Hidden summary figures in expanded section headers stay hidden: that rule
   is more specific. Editable cells get .neg / .neg-placeholder from cashflow.js. */
.cf-table tbody > tr > td.cf-num.neg { color: #b02a37; }

/* Closing balance months: green above the comfortable level (£30,000), black when positive but at or below it,
   orange at zero or below.
   Same specificity as the red rule above and later, so it wins. */
.cf-table tbody > tr > td.cf-num.cf-good { color: #198754; }
.cf-table tbody > tr > td.cf-num.cf-ok { color: #212529; }
.cf-table tbody > tr > td.cf-num.cf-watch { color: #d9480f; }
.cf-table .cf-input.neg { color: #b02a37; }
.cf-table .cf-input.neg-placeholder::placeholder { color: #d98b93; }

/* ---- Quotes & invoices: overdue rows (Bootstrap table cells read --bs-table-bg) ---- */
.inv-table > tbody > tr.inv-overdue > * { --bs-table-bg: #f8dfe1; }
.inv-table > tbody > tr.inv-overdue:hover > * { --bs-table-bg-state: #f1cdd1; }
.inv-overdue-badge { background-color: #f8dfe1 !important; border-color: #e9b5bb; }

/* In-place editing: cells look like plain text until hovered or focused */
.inv-table .inv-edit {
    font-size: .8rem;
    padding: 0 .3rem;
    min-height: 0;
    height: 1.6rem;
    border-color: transparent;
    background-color: transparent;
}
.inv-table select.inv-edit { padding-right: 1.5rem; background-position: right .25rem center; }
.inv-table tbody tr:hover .inv-edit,
.inv-table .inv-edit:focus { border-color: #ced4da; background-color: #fff; }
.inv-table .status-select.inv-edit { border-color: rgba(0, 0, 0, .12); }
.inv-table .inv-date { width: 8.25rem; }
.inv-table .inv-terms { width: 4.25rem; margin-left: auto; text-align: right; }
.inv-table .inv-company { min-width: 8.5rem; }
.inv-table .inv-details { min-width: 16rem; }
.inv-table .inv-invno { width: 6.5rem; }
.inv-table .inv-num { text-align: right; margin-left: auto; }
.inv-table .inv-effort { width: 3.75rem; }
.inv-table .inv-amount { width: 7.5rem; }
.inv-table .inv-vat { width: 3.5rem; }
.inv-table .inv-edit.inv-saved,
.inv-table td.inv-saved { background-color: #d1e7dd !important; transition: background-color .2s; }
.inv-table .inv-edit.is-invalid { background-color: #fff !important; }
.inv-table tr.inv-busy { opacity: .75; }
.inv-table > tbody > tr:target > * { --bs-table-bg: #fff3cd; }

/* ---- Editable cells ---- */
.cf-cell { padding: 0 .15rem !important; }
.cf-input {
    width: 90px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 2px;
    background: rgba(255, 255, 255, .85);
    text-align: right;
    font-size: .8rem;
    padding: 0 .25rem;
    font-variant-numeric: tabular-nums;
}
.cf-input::placeholder { color: #8f969c; }
.cf-input:hover { border-color: rgba(0, 0, 0, .3); }
.cf-input:focus { border-color: #86b7fe; outline: none; background: #fff; }
.cf-input.cf-pending, .cf-name.cf-pending { background: #fff3cd; }
.cf-input.cf-saved, .cf-name.cf-saved { background: #d1e7dd; transition: background-color .2s; }
.cf-input.invalid { background: #f8d7da; border-color: #dc3545; }
.cf-name { font-size: .8rem; padding: 0 .3rem; min-width: 170px; }
.cf-line-actions .btn { font-size: .7rem; line-height: 1; text-decoration: none; }
.cf-addline .cf-name { border-style: dashed; background: rgba(255, 255, 255, .6); }

/* ---- Status colours ---- */
.status-Paid { background-color: #d1e7dd !important; }
.status-Due { background-color: #ffe5b4 !important; }
.status-Pending { background-color: #cfe2ff !important; }
.status-Probable { background-color: #d2f4ea !important; }
.status-Visible, .status-Quoted { background-color: #f1f3f5 !important; }
.status-ProbablyDead, .status-NoCharge { background-color: #f8f9fa !important; color: #6c757d; }
.status-LongRangeProspecting { background-color: #e7dcf7 !important; }
.status-badge { color: #212529; font-weight: 500; border: 1px solid #dee2e6; }
.status-select { min-width: 140px; }

.inv-table { font-size: .82rem; }
.inv-table thead .inv-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.inv-table thead .inv-sort:hover { text-decoration: underline; }
.inv-table thead .inv-sort-arrow { font-size: .65rem; margin-left: .2rem; }
.inv-table td, .inv-table th { white-space: nowrap; }
.inv-table td.details { white-space: normal; min-width: 220px; }

/* ---- Employees: in-place editing reuses the .inv-table styles ---- */
.emp-table .emp-name { min-width: 9rem; }
.emp-table .emp-type { width: 7.5rem; }
.emp-table .emp-rate { width: 5.5rem; }
.emp-table .emp-days { width: 3.25rem; }
/* Only the pay fields for the row's type are shown. */
.emp-table tr[data-type="Contractor"] .emp-for-employee,
.emp-table tr[data-type="Employee"] .emp-for-contractor { display: none !important; }
.emp-table tr.text-muted .inv-edit { color: #6c757d; }