/* NGO platform: styles only this prototype needs. Everything else comes from bcs-kit.css and Tailwind.
   Each agent edits only its own block. */

/* === Shared: shell (ngo.js) === */
html, body { height: 100%; }
/* Mobile drawer: the rail opens at full width with its labels showing. */
.ngo-drawer .bcs-sidebar { width: var(--bcs-rail-open); }
.ngo-drawer .bcs-sidebar .menu-label { opacity: 1; }
.ngo-drawer .bcs-sidebar .bcs-sidebar-footer button { visibility: visible; }
/* Numbers in tables and totals line up. */
.ngo-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* === Agent A === */
/* Payroll sheets (services/payroll/input, schedule, statutory): the kit's data table as a spreadsheet.
   .ngo-sheet is the scroll box inside the card (both ways; the page itself never scrolls sideways).
   Cells: .is-num money, .is-computed read-only computed (tinted, fx marker), .is-pin sticky on the left,
   .is-edit an editable cell holding .ngo-cell-input, .is-edited a value changed on this page. */
.ngo-sheet {
    --ngo-row-h: 40px;
    --ngo-cell-x: 12px;
    --ngo-computed: color-mix(in srgb, var(--bcs-ink-subtle) 6%, var(--bcs-surface));
    --ngo-computed-head: color-mix(in srgb, var(--bcs-ink-subtle) 11%, var(--bcs-surface));
    --ngo-edited: color-mix(in srgb, var(--bcs-primary) 8%, var(--bcs-surface));
    --ngo-correction: color-mix(in srgb, var(--bcs-warning) 10%, var(--bcs-surface));
    --ngo-hover: rgb(15 23 42 / 0.028);
    position: relative; overflow: auto; overscroll-behavior-x: contain;
    max-height: max(320px, calc(100vh - 290px));
    border-top: 1px solid var(--bcs-edge);
}
.ngo-sheet:focus-visible { outline: 2px solid var(--bcs-focus); outline-offset: -2px; }
.ngo-sheet-table { min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; line-height: 18px; color: var(--bcs-ink); font-variant-numeric: tabular-nums; }
.ngo-sheet-table th, .ngo-sheet-table td {
    height: var(--ngo-row-h); padding: 0 var(--ngo-cell-x); background-color: var(--bcs-surface);
    border-right: 1px solid var(--bcs-edge); border-bottom: 1px solid var(--bcs-edge);
    vertical-align: middle; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ngo-sheet-table tr > :last-child { border-right: 0; }
.ngo-sheet-table .is-num { text-align: right; }

/* Header: the kit's uppercase column labels, wrapping onto up to three lines, sticky at the top */
.ngo-sheet-table thead th {
    position: sticky; top: 0; z-index: 2; height: 56px; padding-top: 8px; padding-bottom: 8px;
    background-color: var(--bcs-surface-muted); vertical-align: bottom; white-space: normal;
    font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--bcs-ink-subtle);
}
.ngo-sheet-table thead th.is-computed { background-color: var(--ngo-computed-head); }
.ngo-th { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.is-num > .ngo-th { justify-content: flex-end; text-align: right; }
.ngo-th-label { min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ngo-th-label.is-input { color: var(--bcs-ink-muted); }
/* "fx": the computed marker, in the header and in the legend */
.ngo-fx {
    flex: none; display: inline-flex; align-items: center; justify-content: center; height: 16px; padding: 0 4px;
    border: 1px solid var(--bcs-edge); border-radius: 4px; background: var(--bcs-surface);
    font: italic 500 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0; text-transform: none; color: var(--bcs-ink-subtle);
}
.ngo-th-tag { flex: none; font-size: 10px; line-height: 14px; letter-spacing: 0; text-transform: none; color: var(--bcs-primary-strong); background: var(--bcs-primary-soft); border-radius: 4px; padding: 0 4px; }

/* Computed cells: quiet tint, muted figures */
.ngo-sheet-table td.is-computed { background-color: var(--ngo-computed); color: var(--bcs-ink-muted); }
.ngo-sheet-table tbody tr:hover > td { background-image: linear-gradient(var(--ngo-hover), var(--ngo-hover)); }
.ngo-blank { color: var(--bcs-ink-subtle); opacity: .7; }
.ngo-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--bcs-ink-muted); }
.ngo-cell-name { font-weight: 500; color: var(--bcs-ink); }
a.ngo-cell-name:hover { color: var(--bcs-primary); text-decoration: underline; text-underline-offset: 2px; }
a.ngo-cell-name:focus-visible { outline: 2px solid var(--bcs-focus); outline-offset: 2px; border-radius: 2px; }

/* Pinned identity columns: sticky on the left, with a soft edge once the sheet scrolls */
.ngo-sheet-table .is-pin { position: sticky; z-index: 1; }
.ngo-sheet-table thead .is-pin, .ngo-sheet-table tfoot .is-pin { z-index: 3; }
.ngo-sheet-table .is-pin-last { border-right-color: color-mix(in srgb, var(--bcs-ink-subtle) 35%, var(--bcs-edge)); }
.ngo-sheet.is-scrolled .is-pin-last { box-shadow: 6px 0 8px -6px rgb(15 23 42 / .22); clip-path: inset(0 -12px 0 0); }

/* Editable cells: the input fills the cell; a 2px ring marks the cell being typed in */
.ngo-sheet-table td.is-edit { padding: 0; position: relative; }
.ngo-cell-input {
    display: block; width: 100%; height: calc(var(--ngo-row-h) - 1px); margin: 0; padding: 0 var(--ngo-cell-x);
    border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums;
    outline: none; text-overflow: ellipsis;
}
.ngo-cell-input.ngo-num { text-align: right; }
.ngo-cell-input::placeholder { color: var(--bcs-ink-subtle); opacity: .55; }
.ngo-cell-input:hover { background-color: color-mix(in srgb, var(--bcs-primary) 4%, transparent); }
.ngo-cell-input:focus { background-color: var(--bcs-surface); box-shadow: inset 0 0 0 2px var(--bcs-primary); }
.ngo-sheet-table td.is-edited { background-color: var(--ngo-edited); }
.ngo-sheet-table td.is-edited::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent var(--bcs-primary) transparent transparent; pointer-events: none; }
.ngo-cell-select { display: block; width: 100%; height: 28px; padding: 0 24px 0 8px; border: 1px solid var(--bcs-edge); border-radius: 6px; background-color: var(--bcs-surface); font: inherit; font-size: 13px; color: var(--bcs-ink); }
.ngo-cell-select:focus { outline: none; border-color: var(--bcs-primary); box-shadow: 0 0 0 3px var(--bcs-focus); }

/* Correction rows (finalised period): a warm tint and a bar down the first cell */
.ngo-sheet-table tr.is-correction > td:not(.is-edit) { background-color: var(--ngo-correction); }
.ngo-sheet-table tr.is-correction > td:first-of-type { box-shadow: inset 3px 0 0 var(--bcs-warning); }

/* Totals row: sticky at the foot, a firmer rule above it */
.ngo-sheet-table tfoot td {
    position: sticky; bottom: 0; z-index: 2; height: 44px; background-color: var(--bcs-surface-muted); font-weight: 600; color: var(--bcs-ink);
    border-bottom: 0; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bcs-ink-subtle) 45%, var(--bcs-edge));
}
.ngo-sheet-table tfoot td.is-computed { background-color: var(--ngo-computed-head); }
.ngo-sheet.is-scrolled .ngo-sheet-table tfoot td.is-pin-last { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bcs-ink-subtle) 45%, var(--bcs-edge)), 6px 0 8px -6px rgb(15 23 42 / .22); }
.ngo-sheet-table tbody tr.ngo-sheet-emptyrow > td { height: auto; padding: 0; overflow: visible; white-space: normal; background: var(--bcs-surface); }

/* Legend: Input / Computed / Edited */
.ngo-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; line-height: 16px; color: var(--bcs-ink-muted); }
.ngo-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ngo-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 16px; border: 1px solid var(--bcs-edge); border-radius: 4px; background: var(--bcs-surface); overflow: hidden; }
.ngo-swatch.is-computed { background: color-mix(in srgb, var(--bcs-ink-subtle) 11%, var(--bcs-surface)); font: italic 500 9px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--bcs-ink-subtle); }
.ngo-swatch.is-edited { background: color-mix(in srgb, var(--bcs-primary) 8%, var(--bcs-surface)); }
.ngo-swatch.is-edited::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 6px 6px 0; border-color: transparent var(--bcs-primary) transparent transparent; }
.ngo-swatch.is-correction { background: color-mix(in srgb, var(--bcs-warning) 10%, var(--bcs-surface)); box-shadow: inset 3px 0 0 var(--bcs-warning); }

/* Sheet links (Input · Schedule · Statutory) */
.ngo-sheetnav { display: flex; flex-wrap: wrap; gap: 4px 20px; border-bottom: 1px solid var(--bcs-edge); }
.ngo-sheetnav a { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; color: var(--bcs-ink-muted); }
.ngo-sheetnav a:hover { color: var(--bcs-ink); }
.ngo-sheetnav a[aria-current="page"] { color: var(--bcs-primary-strong); border-bottom-color: var(--bcs-primary); }
.ngo-sheetnav a:focus-visible { outline: 2px solid var(--bcs-focus); outline-offset: 2px; border-radius: 2px; }

/* Columns drawer rows */
.ngo-colrow { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px 6px 12px; border-radius: 8px; }
.ngo-colrow:hover { background: var(--bcs-surface-muted); }
.ngo-colrow-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--bcs-ink-subtle); font-size: 11px; }
.ngo-colrow-btn:hover:not(:disabled) { background: var(--bcs-surface); color: var(--bcs-ink); box-shadow: 0 0 0 1px var(--bcs-edge); }
.ngo-colrow-btn:disabled { opacity: .3; cursor: default; }
.ngo-colrow-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }
.ngo-colrow-btn.is-danger:hover { color: var(--bcs-danger); }

/* Filing header (statutory) */
.ngo-filing-figure { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--bcs-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ngo-filing-figure.is-main { color: var(--bcs-primary-strong); }
.ngo-filing-op { align-self: flex-end; padding-bottom: 2px; font-size: 18px; line-height: 28px; color: var(--bcs-ink-subtle); }

/* === Agent B === */

/* === Agent C === */