/* 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); }