/*
 * Έξοδα — μερισμός κατά λειτουργία.
 *
 * A hand-rolled CSS grid rather than a table, because every allocation cell is a field: 13 rows ×
 * up to 8 columns of MudBlazor numeric boxes is three screens, and the same grid of 28px cells is
 * one. `--exp-cols` is written by the page, so the column count follows the activity count without
 * a second stylesheet.
 *
 * Everything here is scoped to `.exp-desk`, so nothing leaks onto the other desks.
 */
@layer spec.components {
    /*
     * The chrome above the grid is taller than the default 300px (head band + control strip), and
     * the three notes sit under it, so the scroll region is told how much room it actually has.
     */
    .exp-desk {
        --spec-fill-offset: 420px;
        --exp-row-h: 28px;
    }

    /* ——————————————————————————————————————————————————————
       Head band
       —————————————————————————————————————————————————————— */
    .exp-subtitle {
        display: flex;
        align-items: center;
        gap: 9px;
        flex-wrap: wrap;
    }

    .exp-rowcount {
        font: var(--weight-regular) var(--text-xs) / 1 var(--font-mono);
        color: var(--color-neutral-700);
        white-space: nowrap;
    }

    /* «Αυτόματη συμπλήρωση» is the desk's suggested move, so it carries the accent hairline
       without becoming a second solid object beside the save. */
    #main-content .exp-action.exp-action--accent {
        border-color: var(--color-accent-600);
        color: var(--color-accent-800);
    }

    #main-content .exp-action.exp-action--accent:hover:not(:disabled) {
        background: var(--color-accent-100);
    }

    #main-content .exp-action.exp-action--ghost {
        background: transparent;
        color: var(--color-neutral-700);
    }

    /* The rule that separates the editing actions from the save. */
    .exp-action-rule {
        display: inline-block;
        width: 1px;
        height: 22px;
        margin: 0 2px;
        background: var(--color-divider);
    }

    /* ——————————————————————————————————————————————————————
       Control strip

       One white box with a hairline; each control is a cell divided from the next by a rule, and
       every cell says what it switches in 10px caps above the control.
       —————————————————————————————————————————————————————— */
    .exp-strip {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
        margin-bottom: var(--sp-3);
        border: 1px solid var(--color-divider);
        background: var(--spec-surface);
    }

    .exp-strip__cell {
        padding: 8px 13px;
        border-right: 1px solid var(--color-divider);
        min-width: 0;
    }

    .exp-strip__cell:last-child {
        border-right: 0;
    }

    /* The flag takes the rest of the row, as the mockup lays it out. */
    .exp-strip__cell--flag {
        flex: 1 1 290px;
        display: flex;
        align-items: center;
    }

    .exp-strip__label {
        display: block;
        font-size: 10px;
        line-height: 1;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--color-neutral-700);
        margin-bottom: 5px;
    }

    .exp-strip__note {
        display: block;
        max-width: 196px;
        margin-top: 4px;
        font-size: 10px;
        line-height: 1.35;
        color: var(--color-neutral-700);
    }

    .exp-activities .segmented > button {
        font-family: var(--font-mono);
        padding-inline: 11px;
    }

    /* ——————————————————————————————————————————————————————
       The grid

       One `--exp-cols` template shared by the header, every row and the totals, so the three
       always line up whatever the activity count is.
       —————————————————————————————————————————————————————— */
    .exp-grid {
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-surface);
        overflow: auto;
        background: var(--scroll-shadow-on-surface);
    }

    .exp-grid__head,
    .exp-row,
    .exp-totals {
        display: grid;
        grid-template-columns: var(--exp-cols);
        align-items: center;
    }

    .exp-grid__head {
        position: sticky;
        top: 0;
        z-index: 3;
        align-items: end;
        min-height: 46px;
        padding-bottom: 7px;
        background: var(--color-accent-900);
        color: var(--spec-on-dark);
        font: var(--weight-semibold) var(--text-2xs) / 1.25 var(--font-heading);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .exp-h {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
    }

    .exp-h--start {
        padding-left: 10px;
    }

    /*
     * A column label is one long uppercase Greek word (ΧΡΗΜΑΤΟΟΙΚΟΝΟΜΙΚΑ) that cannot be
     * hyphenated, so it is given slightly tighter tracking and permission to wrap rather than run
     * into ΕΡΕΥΝΑ next door. The header is bottom-aligned in a 46px band, so a second line grows
     * upwards and the labels still sit on one baseline.
     */
    .exp-h--num {
        justify-content: flex-end;
        padding-right: 11px;
        text-align: right;
        letter-spacing: 0.04em;
        overflow-wrap: anywhere;
    }

    /* The ⓘ has to be legible on the dark bar, where the neutral-700 default disappears. */
    .exp-grid__head .spec-hint {
        border-color: color-mix(in srgb, #ffffff 55%, transparent);
        color: var(--spec-on-dark);
    }

    .exp-grid__head .spec-hint:hover,
    .exp-grid__head .spec-hint:focus-visible {
        border-color: var(--spec-on-dark);
        background: color-mix(in srgb, #ffffff 16%, transparent);
        color: var(--spec-on-dark);
    }

    .exp-row {
        height: var(--exp-row-h);
        border-bottom: 1px solid var(--color-divider);
        background: var(--spec-surface);
    }

    /* §3.7: an unallocated row is warn, whole-row, so it is found by scrolling rather than by
       reading every αδιανέμητο. */
    .exp-row--warn {
        background: var(--warn-t);
    }

    .exp-cell {
        min-width: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .exp-cell--code {
        padding-left: 10px;
        font: var(--weight-regular) 11px var(--font-mono);
        color: var(--color-neutral-700);
    }

    .exp-cell--name {
        font-size: 12.5px;
        padding-right: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        line-height: var(--exp-row-h);
    }

    .exp-cell--money {
        justify-content: flex-end;
        padding-right: 11px;
        font: var(--weight-regular) 12px var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: var(--color-neutral-800);
    }

    /*
     * An allocation cell IS the field: no box until it is focused, so a screen of figures reads as
     * a ledger and not as a form. The hairline on the left keeps the columns countable.
     */
    .exp-cell--field {
        position: relative;
        justify-content: flex-end;
        gap: 2px;
        padding-right: 11px;
        border-left: 1px solid var(--color-divider);
        background: var(--spec-surface);
    }

    /* A cell holding nothing is neutral-100, so the columns carrying money stand out white. */
    .exp-cell--zero {
        background: var(--color-neutral-100);
    }

    .exp-input {
        width: 100%;
        min-width: 0;
        height: calc(var(--exp-row-h) - 6px);
        padding: 0;
        border: 1px solid transparent;
        background: transparent;
        font: var(--weight-regular) 12px var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: var(--spec-ink);
        text-align: right;
    }

    .exp-input::placeholder {
        color: var(--color-neutral-500);
        opacity: 1;
    }

    .exp-input:hover:not(:disabled) {
        border-color: var(--color-neutral-400);
    }

    .exp-input:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: inset 0 0 0 1px var(--color-accent);
        background: var(--spec-field);
    }

    /* §3.8: a locked cell is said in colour, not in opacity. */
    .exp-input:disabled {
        color: var(--color-neutral-700);
        cursor: not-allowed;
    }

    .exp-unit {
        flex: none;
        font: var(--weight-regular) 11px var(--font-mono);
        color: var(--color-neutral-600);
    }

    /*
     * §3.7 "not computable": the class refuses this destination, so the cell is hatched rather
     * than disabled-and-empty — a blank field invites a number that would be thrown away. The
     * reason rides on `title` and on the cell's accessible name.
     */
    .exp-cell--closed {
        border-left: 1px solid var(--color-divider);
        background-color: var(--color-neutral-100);
        background-image: var(--hatch);
        cursor: not-allowed;
    }

    /* A changed cell: the accent fill plus the 2px left mark §3.4 gives every grid. */
    .exp-cell--field.is-dirty {
        background: var(--color-accent-100);
        box-shadow: inset 2px 0 0 var(--color-accent-500);
    }

    .exp-cell--rem {
        border-left: 1px solid var(--color-divider);
        color: var(--color-neutral-500);
    }

    /* Painted from ε=0,0001 — the narrower of the desk's two tolerances. */
    .exp-cell--rem-warn {
        background: var(--warn-t);
        color: var(--warn);
        font-weight: var(--weight-semibold);
    }

    /* ——————————————————————————————————————————————————————
       Totals

       Sticky at the foot of the scroll region, under a 2px accent-900 rule: the sum is the one
       line that must never scroll out of sight.
       —————————————————————————————————————————————————————— */
    .exp-totals {
        position: sticky;
        bottom: 0;
        z-index: 3;
        height: 32px;
        border-top: 2px solid var(--color-accent-900);
        background: var(--color-neutral-200);
        font-weight: var(--weight-semibold);
    }

    .exp-totals__label {
        font: var(--weight-semibold) 10px var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .exp-totals .exp-cell--money {
        font-weight: var(--weight-semibold);
        color: var(--spec-ink);
    }

    .exp-totals .exp-total--warn {
        color: var(--warn);
    }

    .exp-totals .exp-total--ok {
        color: var(--ok);
    }

    /* ——————————————————————————————————————————————————————
       The notes under the grid

       Three columns of the shared callout, stacked kicker-over-sentence rather than the inline
       shape, because each one is a paragraph and not a figure.
       —————————————————————————————————————————————————————— */
    .exp-notes {
        display: flex;
        gap: 12px;
        align-items: stretch;
        margin-top: 11px;
        flex-wrap: wrap;
    }

    .exp-desk .exp-note {
        flex: 1 1 300px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        line-height: var(--leading-normal);
    }

    .exp-desk .exp-note--accent {
        --tone: var(--color-accent-700);
        --tone-tint: var(--spec-surface);
        --tone-line: var(--color-divider);
        border-left-color: var(--color-accent);
    }

    .exp-desk .exp-note--neutral {
        --tone: var(--color-neutral-700);
        --tone-tint: var(--spec-surface);
        --tone-line: var(--color-divider);
        border-left-color: var(--color-neutral-400);
    }

    /* The tolerances are figures, so they are set as figures. */
    .exp-figure {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    /* §3.7 empty: a dashed frame with one action, not a bordered card. */
    .exp-desk .empty-state {
        border: 1px dashed var(--color-neutral-400);
        background: var(--spec-surface);
    }

    @media (max-width: 1100px) {
        .exp-desk {
            --spec-fill-offset: 480px;
        }
    }
}