/*
 * Desk grids — Αποθέματα, Αποσβέσεις, Εξωλογιστικά (W2-4).
 *
 * The three desks share one look: a bordered white grid with the ledger's dark accent-900
 * header (.ledger-grid, from components.css), numeric cells that stay transparent until focused
 * so a mostly-untouched row reads as figures rather than as a wall of empty boxes, and a derived
 * column tinted neutral-100 so a computed cell reads as "not yours to type into" before the
 * header hint is even read. ExtraInput's tabs reuse the same field-grid look as the mockup's
 * client form: an uppercase 10.5px label above a plain field, three to a row.
 */
@layer spec.components {
    /* ——————————————————————————————————————————————————————
       Header actions — secondary actions, a thin rule, then the primary save
       —————————————————————————————————————————————————————— */
    .desk-actions__rule {
        display: inline-block;
        width: 1px;
        align-self: stretch;
        min-height: var(--control-h-sm);
        background: var(--color-neutral-400);
        margin: 0 2px;
    }

    /* ——————————————————————————————————————————————————————
       Grid: 28px rows, mono code, ellipsised name, derived cells
       —————————————————————————————————————————————————————— */
    .desk-grid {
        /* 13-char κωδικός (20.01.00.2024) in Fira Mono + the cell's 8px padding. The pin's
           `left` offset has to be this exact width or the περιγραφή column lands on the code. */
        --desk-grid-code-w: 7.2rem;
    }

    /*
     * Same reason the ledger uses separate borders: Chrome drops sticky edges under
     * `border-collapse: collapse`. Αποθέματα pins two columns and sticks the header and
     * ΣΥΝΟΛΑ in the same scrollport — collapse is what makes a mid-list row look like it
     * left its column.
     */
    #main-content .desk-grid .mud-table-root {
        border-collapse: separate;
        border-spacing: 0;
    }

    .desk-grid .mud-table-body .mud-table-cell {
        height: 28px;
        padding: 3px 8px;
    }

    .desk-grid .desk-cell-code {
        font-family: var(--font-mono);
        white-space: nowrap;
    }

    .desk-grid--pin .desk-cell-code,
    .desk-grid--pin .mud-table-head .mud-table-cell:first-child,
    .desk-grid--pin .mud-table-foot .mud-table-cell:first-child {
        width: var(--desk-grid-code-w);
        min-width: var(--desk-grid-code-w);
        max-width: var(--desk-grid-code-w);
        box-sizing: border-box;
    }

    .desk-grid .desk-cell-name {
        display: block;
        max-width: 15rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* A cell the accountant cannot type into — computed from the row's other columns. */
    .desk-grid td.desk-cell--derived {
        background: var(--color-neutral-100);
    }

    /* Numeric edit cells: transparent until focused, mono, right-aligned — the row reads as
       figures first and as editable fields only once the accountant is in one. The dirty fill
       (`#main-content .is-dirty .mud-input`, an ID selector) still outranks this. components.css's
       own field rules are ID-scoped too (`#main-content .mud-input.mud-input-outlined` and
       `#main-content .mud-input-control`), so every override below needs the same prefix or
       the form-field padding/margins win and a focused ενάρξη box walks into the previous
       column. */
    #main-content .desk-grid .mud-input-control {
        margin-top: 0;
        margin-bottom: 0;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
    }

    #main-content .desk-grid .mud-input.mud-input-outlined {
        background: transparent;
        min-height: 24px;
        min-width: 0;
        width: 100%;
    }

    #main-content .desk-grid .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-color: transparent;
    }

    #main-content .desk-grid .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
        border-color: var(--color-neutral-400);
    }

    #main-content .desk-grid .mud-input.mud-input-outlined.mud-input-focused {
        background: var(--spec-field);
    }

    #main-content .desk-grid .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
        border-color: var(--color-accent);
    }

    #main-content .desk-grid .mud-input-root,
    #main-content .desk-grid .mud-input-slot {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        text-align: right;
        padding: 3px 6px;
        min-width: 0;
    }

    /* ——————————————————————————————————————————————————————
       Sticky first two columns — κωδικός, περιγραφή (Inventory's eleven-column grid)
       —————————————————————————————————————————————————————— */
    .desk-grid--pin .mud-table-body .mud-table-cell:first-child,
    .desk-grid--pin .mud-table-head .mud-table-cell:first-child,
    .desk-grid--pin .mud-table-foot .mud-table-cell:first-child {
        position: sticky;
        left: 0;
        z-index: 4;
        background: var(--spec-surface);
    }

    .desk-grid--pin .mud-table-body .mud-table-cell:first-child + .mud-table-cell,
    .desk-grid--pin .mud-table-head .mud-table-cell:first-child + .mud-table-cell,
    .desk-grid--pin .mud-table-foot .mud-table-cell:first-child + .mud-table-cell {
        position: sticky;
        left: var(--desk-grid-code-w, 7.2rem);
        z-index: 4;
        background: var(--spec-surface);
        box-shadow: 2px 0 0 var(--color-divider);
    }

    .desk-grid--pin .mud-table-head .mud-table-cell:first-child,
    .desk-grid--pin .mud-table-head .mud-table-cell:first-child + .mud-table-cell {
        background: var(--color-accent-900);
        z-index: 5;
    }

    .desk-grid--pin .mud-table-foot .mud-table-cell:first-child,
    .desk-grid--pin .mud-table-foot .mud-table-cell:first-child + .mud-table-cell {
        background: var(--color-neutral-200);
        z-index: 5;
    }

    /* The totals row is sticky at the bottom of the same region the body rows scroll in
       (components.css, §3.2). With no reserve past the last row, the sticky footer's own 34px
       (components.css `.mud-table-foot .mud-table-cell`) settles on top of it instead of below
       it once the grid runs out of room to scroll — so the region needs that much spare room at
       its end for the last row to clear the footer and stay reachable. */
    #main-content .desk-grid.spec-fill .mud-table-container {
        padding-bottom: 34px;
        scroll-padding-bottom: 34px;
    }

    /* ——————————————————————————————————————————————————————
       Reset confirm — an inline stop-tone banner in place of the old MudAlert prompt
       —————————————————————————————————————————————————————— */
    .desk-reset-confirm {
        align-items: center;
        flex-wrap: wrap;
        gap: var(--sp-2) var(--sp-4);
    }

    .desk-reset-confirm__actions {
        display: flex;
        gap: var(--sp-2);
        margin-left: auto;
    }

    /* ——————————————————————————————————————————————————————
       Remainder pill — warn while non-zero, ok once it reaches zero (ExtraInput)
       —————————————————————————————————————————————————————— */
    .desk-remainder {
        display: inline-flex;
        align-items: baseline;
        gap: var(--sp-2);
        padding: 3px 8px;
        border: 1px solid var(--tone-line, var(--color-divider));
        background: var(--tone-tint, var(--color-neutral-100));
    }

    .desk-remainder__label {
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--tone, var(--color-neutral-700));
    }

    .desk-remainder__value {
        font: var(--weight-semibold) 13px / 1 var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: var(--tone, var(--spec-ink));
    }

    .desk-remainder--warn {
        --tone: var(--warn);
        --tone-tint: var(--warn-t);
        --tone-line: var(--warn-b);
    }

    .desk-remainder--ok {
        --tone: var(--ok);
        --tone-tint: var(--ok-t);
        --tone-line: var(--ok-b);
    }

    /* ——————————————————————————————————————————————————————
       ExtraInput — the client-form field grid: uppercase 10.5px label above a plain field
       —————————————————————————————————————————————————————— */
    .desk-form {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-4) var(--sp-6);
        max-width: 880px;
    }

    @media (max-width: 720px) {
        .desk-form {
            grid-template-columns: 1fr;
        }
    }

    /* components.css's own label rule is ID-scoped (`#main-content .mud-input-label…`), so the
       override needs the same prefix to win within the shared layer. */
    #main-content .desk-form .mud-input-label.mud-input-label-inputcontrol,
    .desk-form .spec-field__label {
        font-family: var(--font-heading);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .desk-form__note {
        margin: 2px 0 0;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .desk-form__span2 {
        grid-column: span 2;
    }

    .desk-form__span3 {
        grid-column: 1 / -1;
    }

    .desk-form__static {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .desk-form__static-label {
        font-family: var(--font-heading);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .desk-form__static-value {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        font-size: 15px;
    }

    /* ——————————————————————————————————————————————————————
       Empty state — dashed, so "nothing here yet" never looks like a populated frame
       —————————————————————————————————————————————————————— */
    .desk-empty .empty-state {
        border-style: dashed;
        border-color: var(--color-neutral-400);
    }
}