/* Forecast worksheet — the monthly, per-director invoicing worksheet.
   Status chips are colour-coded to match Finance's spreadsheet mental model
   (grey pending → purple raisable → red issued → amber pushed-on), but the label
   and dot always carry the meaning too, so colour is never the only signal. */

.forecast-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}
.forecast-toolbar__field { display: flex; flex-direction: column; gap: var(--spacing-1); }
.forecast-toolbar__field label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

/* Summary strip */
.forecast-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}
.forecast-summary__tile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-05);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    min-width: 120px;
}
.forecast-summary__value { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.forecast-summary__label { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* Status chip — a dot + label pill. One class per decision state. */
.fc-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
}
.fc-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}
.fc-chip--pending  { background: #f3f4f6; color: #6b7280; }   /* grey  — awaiting decision */
.fc-chip--raisable { background: #ede9fe; color: #7c3aed; }   /* purple — director said raise it */
.fc-chip--issued   { background: #fee2e2; color: #dc2626; }   /* red   — gone out the door */
.fc-chip--pushedon { background: #fef3c7; color: #b45309; }   /* amber — deferred to next month */
.fc-chip--archived { background: #e2e8f0; color: #475569; }   /* slate — dropped */
/* An earlier month's decision quoted as history — muted and outlined so it never reads as live state. */
.fc-chip--history {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    font-weight: var(--font-weight-regular);
}
.fc-chip--history::before { opacity: 0.45; }

/* Legend under the toolbar */
.forecast-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-3); margin-bottom: var(--spacing-3); }

/* Worksheet table specifics */
.forecast-table td { vertical-align: middle; }
.forecast-table .fc-amount { width: 120px; text-align: right; }
.forecast-table .fc-narrative { min-width: 180px; }
.forecast-table .fc-job__number { font-weight: var(--font-weight-semibold); }
.forecast-table .fc-job__name { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.forecast-row--issued { background: color-mix(in srgb, #fee2e2 30%, transparent); }

.forecast-empty {
    padding: var(--spacing-6);
    text-align: center;
    color: var(--color-text-secondary);
}

/* Compact clickable rows → open the editor modal */
.fc-clickable { cursor: pointer; }
.fc-clickable:hover { background: var(--color-surface-alt); }
.fc-row__amt { font-weight: var(--font-weight-semibold); white-space: nowrap; }

/* Editor modal + backdrop */
.fc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    z-index: 900;
}
.fc-backdrop--open { display: block; }
.fc-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(540px, 94vw);
    max-height: 88vh;
    overflow: auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    z-index: 950;
    display: none;
}
.fc-modal--open { display: block; }
.fc-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}
.fc-modal__close {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-secondary);
}
/* The head's title block — number + band switch, job name, and this month's state, as
   evenly spaced rows rather than run-together lines. */
.fc-modal__title {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* This month's decision, restated in the modal head so it always agrees with the row behind it. */
.fc-modal__state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
}
.fc-modal__state-month {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.fc-modal__state-hint { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.fc-modal__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}
.fc-modal__link:hover { text-decoration: underline; }

/* The modal head's job-number line carries the likelihood switch (ADR-018) — the shared
   .segmented control in its --xs size — so it lays out as a spaced row, not run-in text. */
.fc-modal__head .fc-job__number {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    font-weight: var(--font-weight-semibold);
}

.fc-modal__body { padding: var(--spacing-4); display: flex; flex-direction: column; gap: var(--spacing-4); }
.fc-modal__facts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.fc-contractor { display: inline-flex; align-items: center; gap: var(--spacing-2); color: var(--color-text-secondary); }

/* Compact "subs owed" hint on a worksheet row — contractor exposure at a glance */
.fc-subs-tag {
    display: inline-block;
    margin-top: var(--spacing-05);
    font-size: var(--font-size-xs);
    color: #b45309;
}

/* Previous-forecast history line in the modal (ADR-013) */
.fc-prev {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}
.fc-prev__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.fc-prev__note { color: var(--color-text-secondary); font-style: italic; }
.fc-field-hint { font-weight: var(--font-weight-regular); color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* The editor form — each field on its own row with clear breathing room */
.fc-editor-form { display: flex; flex-direction: column; gap: var(--spacing-4); }
.fc-editor-form .input,
.fc-editor-form .select { width: 100%; }

.fc-amount-row { display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; }
.fc-amount-row .fc-amount { width: 140px; flex: 0 0 auto; }

.fc-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

/* Time evidence cell */
.fc-time { display: flex; flex-direction: column; gap: var(--spacing-05); align-items: flex-start; }
.fc-time__hours { font-weight: var(--font-weight-semibold); }
.fc-time__sub { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.fc-time__none { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.fc-time__use {
    margin-top: var(--spacing-05);
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid var(--color-primary-soft-border);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}
.fc-time__use:hover { background: var(--color-primary-soft-border); }

/* Issued (read-only) amount cell */
.fc-issued { display: flex; flex-direction: column; gap: var(--spacing-05); }

/* The fields one decision brings with it — revealed by the decision selector, hidden for the others. */
.fc-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}
.fc-panel[hidden] { display: none; }
.fc-panel__hint { margin: var(--spacing-2) 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* The drop warning — dropping takes the job off every later worksheet, so it says so before you commit. */
.fc-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid color-mix(in srgb, #b91c1c 30%, transparent);
    border-radius: var(--radius-md);
    background: #fef2f2;
    color: #991b1b;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.fc-warning svg { flex: 0 0 auto; margin-top: 1px; }

.fc-drop__btn { color: #b91c1c; border: 1px solid color-mix(in srgb, #b91c1c 35%, transparent); background: transparent; }
.fc-drop__btn:hover { background: #fef2f2; }

/* "rolls to" / "carried from" tag next to a status chip */
.fc-rollto {
    display: inline-block;
    margin-left: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Future forecast — sparse strip of upcoming months work has been pushed to */
.fc-future { margin-top: var(--spacing-4); padding: var(--spacing-4); }
.fc-future__title { font-size: var(--font-size-md); margin: 0 0 var(--spacing-3); }
.fc-future__grid { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
.fc-future__tile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-05);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid #b45309; /* amber accent — matches pushed-on */
    border-radius: var(--radius-md);
    background: var(--color-surface);
    min-width: 130px;
}
.fc-future__month { font-weight: var(--font-weight-semibold); }
.fc-future__jobs { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.fc-future__val { font-weight: var(--font-weight-bold); }

/* Dropped-jobs (archived) section — collapsed by default */
.fc-archived { margin-top: var(--spacing-4); padding: var(--spacing-4); }
.fc-archived__summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}
.fc-archived[open] .fc-archived__summary { margin-bottom: var(--spacing-3); }
.fc-restore__btn { padding: var(--spacing-1) var(--spacing-3); font-size: var(--font-size-xs); }

/* Pager */
.forecast-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}
.forecast-pager__info { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.forecast-pager__nav { display: flex; align-items: center; gap: var(--spacing-3); }
.forecast-pager__page { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

/* ─────────────────────────────────────────────────────────────────────────────
   All-jobs grid (ADR-053) — the Cashflow workbook's Turnover sheet as a page:
   one row per job, a £ per month, the filtered subtotal underneath, then the
   firm's projected figures against target. Wide by nature, so the table scrolls
   sideways inside its card (never the page) with the job column held in place.
   ───────────────────────────────────────────────────────────────────────────── */
.fg-toolbar { align-items: flex-end; }
.fg-year { margin: 0; }
.fg-year__controls { display: flex; gap: var(--spacing-2); }
.fg-status { border: 0; padding: 0; margin: 0; }
.fg-status legend {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-1);
    padding: 0;
}
.fg-status__options { display: flex; gap: var(--spacing-3); min-height: 38px; align-items: center; }
.fg-check { display: inline-flex; align-items: center; gap: var(--spacing-1); font-size: var(--font-size-sm); cursor: pointer; }
.fg-check--inline { min-height: 38px; }

.fg-card { padding: 0; overflow: hidden; margin-bottom: var(--spacing-4); }
.fg-scroll { overflow-x: auto; max-width: 100%; }

.fg-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}
.fg-table th,
.fg-table td {
    padding: var(--spacing-1-5) var(--spacing-2);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    text-align: left;
    background: var(--color-surface);
}
.fg-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface-alt);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}
.fg-table .num { text-align: right; }
/* The short code columns between Client and the money (Dir, Lead, A, S) sit centred, heading and cells
   alike; Client reads left like Job and Project, and the money stays right-aligned so figures line up. */
.fg-table .fg-mid { text-align: center; }
.fg-mid .fg-archive { justify-content: center; }

/* The job and project columns stay put while the months scroll. The project column sits just right of the
   job column — its offset is the job column's measured width (--fg-job-w, set by forecastGrid.js). */
.fg-sticky { position: sticky; left: 0; z-index: 1; }
.fg-sticky--project { left: var(--fg-job-w, 84px); box-shadow: 1px 0 0 var(--color-border); }
/* The projection table has only the one sticky column, so the edge sits on it. */
.fg-table--projection .fg-sticky { box-shadow: 1px 0 0 var(--color-border); }
.fg-table thead .fg-sticky { z-index: 3; }
.fg-col-job { min-width: 84px; font-weight: var(--font-weight-semibold); }
.fg-col-job a { color: var(--color-primary); text-decoration: none; }
.fg-col-job a:hover { text-decoration: underline; }
.fg-col-project { max-width: 220px; }
.fg-project__name { overflow: hidden; text-overflow: ellipsis; }

/* Client — its own column (filterable), editable in place for whoever keeps the clients register. */
.fg-col-client { min-width: 150px; max-width: 240px; }
.fg-client__view { display: flex; align-items: center; gap: var(--spacing-1); }
.fg-client__view[hidden] { display: none; }
.fg-client__name { overflow: hidden; text-overflow: ellipsis; }
.fg-client__edit {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    flex: none;
}
.fg-row:hover .fg-client__edit, .fg-client__edit:focus-visible { opacity: 1; }
.fg-client__edit:hover { background: var(--color-surface-alt); color: var(--color-primary); }
.fg-client__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-1); }
.fg-client__form[hidden] { display: none; }
.fg-col-client--editing { max-width: none; }
.fg-client__input {
    width: 200px;
    padding: 2px var(--spacing-2);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font: inherit;
    color: var(--color-text);
}
.fg-client__input:focus { outline: none; box-shadow: 0 0 0 3px var(--color-primary-soft); }
.fg-client__hint { flex-basis: 100%; font-size: var(--font-size-xs); color: var(--color-info); }
.fg-client__hint[hidden] { display: none; }

/* The A column: an archived job shows "A"; any other job carries the button that archives it. */
.fg-col-archive { white-space: nowrap; }
.fg-archive { display: inline-flex; align-items: center; gap: var(--spacing-1); }
.fg-archive__flag { color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.fg-archive__btn {
    padding: 1px var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    background: transparent;
}
.fg-archive__btn:hover { color: #b91c1c; border-color: color-mix(in srgb, #b91c1c 35%, transparent); background: #fef2f2; }
/* The dialog's OK button is a full-size button in the archive tone. */
.fg-archive__btn--confirm { padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-sm); color: #b91c1c; border-color: color-mix(in srgb, #b91c1c 35%, transparent); }

.fg-band {
    display: inline-block;
    min-width: 1.5em;
    text-align: center;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 0 var(--spacing-1);
}
.fg-band--1 { background: var(--color-neutral-badge-bg); color: var(--color-neutral-badge); }
.fg-band--2 { background: var(--color-info-bg); color: var(--color-info); }
.fg-band--3 { background: var(--color-success-bg); color: var(--color-success); }

.fg-month { min-width: 78px; }
.fg-month--past { color: var(--color-text-muted); }
.fg-cell--past { color: var(--color-text-secondary); background: var(--color-surface-alt); }
.fg-cell { padding: 0 var(--spacing-1); }
.fg-input {
    width: 76px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    padding: var(--spacing-1);
    font: inherit;
    text-align: right;
    color: var(--color-text);
}
.fg-input:hover { border-color: var(--color-border); }
.fg-input:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); }
/* A figure saved on this page (rather than imported from the workbook) — marked, never colour alone. */
.fg-cell--app .fg-input { border-bottom: 2px dotted var(--color-primary-soft-border); }
/* Typed but not yet saved. */
.fg-cell--edited { background: var(--color-warning-bg); }
.fg-cell--edited .fg-input { font-weight: var(--font-weight-semibold); }
.fg-cell--invalid .fg-input { border-color: var(--color-danger); }
.fg-cell--conflict { box-shadow: inset 0 0 0 2px var(--color-danger); }
.fg-neg { color: var(--color-danger); }

.fg-subtotal th,
.fg-subtotal td {
    background: var(--color-surface-alt);
    font-weight: var(--font-weight-semibold);
    border-top: 2px solid var(--color-border-strong);
}

.fg-savebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--color-border);
}
.fg-savebar__status { margin-right: auto; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.fg-savebar__status--error { color: var(--color-danger); }

/* Projected against target */
.fg-projection__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-2) var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);
}
.fg-projection__head .section-title { margin: 0; }
.fg-projection__scope { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.fg-projection__note { font-size: var(--font-size-xs); color: var(--color-text-secondary); padding: var(--spacing-3) var(--spacing-4); margin: 0; }
.fg-projection__warning {
    display: flex;
    gap: var(--spacing-2);
    align-items: flex-start;
    margin: 0 var(--spacing-4) var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}
.fg-projection__warning .icon { color: var(--color-warning); margin-top: 2px; }
.fg-col-metric { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); min-width: 150px; }
.fg-scenario__name { vertical-align: top; font-weight: var(--font-weight-bold); }
.fg-scenario__counts { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-secondary); }
.fg-scenario:not(:last-child) tr:last-child > * { border-bottom: 2px solid var(--color-border-strong); }
.fg-metric--remaining td, .fg-metric--coverage td { font-weight: var(--font-weight-semibold); }
.fg-total-col { border-left: 2px solid var(--color-border-strong); }
.fg-good { color: var(--color-success); }
.fg-short { color: var(--color-danger); }
/* Before → after while there are unsaved changes. */
.fg-was { color: var(--color-text-muted); text-decoration: line-through; margin-right: var(--spacing-1); font-weight: var(--font-weight-normal); }
.fg-delta { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.fg-delta--up { color: var(--color-success); }
.fg-delta--down { color: var(--color-danger); }
td.fg-changed { background: var(--color-warning-bg); }

.fg-onejob {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    margin-bottom: var(--spacing-3);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-md);
    background: var(--color-info-bg);
    color: var(--color-info);
    font-size: var(--font-size-sm);
}

/* The jobs scroll inside their own box — about ten rows tall — so the projected figures underneath stay
   on screen while figures are typed. The month headings stay at the top and the subtotal at the bottom. */
.fg-scroll--jobs {
    overflow: auto;
    max-height: min(560px, 65vh);
    overscroll-behavior: contain;
}
.fg-scroll--jobs:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.fg-subtotal th,
.fg-subtotal td {
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.fg-subtotal .fg-sticky { z-index: 4; }
.fg-table thead .fg-sticky { z-index: 4; }