/*
 * The hierarchical money grid — κωδικός · περιγραφή · χρέωση · πίστωση · υπόλοιπο.
 *
 * One object, three modes: the editable αρχικό ισοζύγιο, the read-only ισοζύγιο με
 * χρεωπιστώσεις and the read-only τελικό ισοζύγιο. Everything below is scoped under
 * `.ledger-money-grid`, so nothing here reaches another table.
 *
 * Two decisions worth keeping:
 *
 *  - `border-collapse: separate`. The header sticks to the top of the scroll region and the
 *    totals row to its bottom; with `collapse` Chrome drops the borders of a sticky row, so the
 *    rules are drawn as per-cell `border-bottom` on a separated grid instead.
 *  - The row height is a custom property. The desk ships compact (26px, the mockup's density);
 *    `--ledger-row-h` is the one number a "comfortable" 32px switch would have to change, and
 *    `.ledger-money-grid--comfortable` already does it.
 */
@layer spec.components {
    .ledger-money-grid {
        --ledger-row-h: 26px;
        --ledger-head-h: 30px;
        --ledger-totals-h: 34px;
        --ledger-indent: 16px;
        --ledger-pad-x: 12px;
        --ledger-depth: 0;

        border: 1px solid var(--color-neutral-400);
        background: var(--spec-surface);
        min-width: 0;
    }

    .ledger-money-grid--comfortable {
        --ledger-row-h: 32px;
    }

    /*
     * §3.2: the rows scroll, the page does not. The offset is what the chrome above the grid
     * costs — study head, ladder, page header band, toolbar row and the action row — so the
     * totals and the difference bar stay on screen at 1080px. A page with different chrome
     * overrides `--spec-fill-offset` on the grid itself.
     */
    .ledger-money-grid__scroll {
        --spec-fill-offset: 430px;
        min-width: 0;
    }

    .ledger-money-grid__table {
        width: 100%;
        min-width: 640px;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
        font-family: var(--font-body);
        font-size: 12.5px;
        line-height: 1.2;
        color: var(--spec-ink);
    }

    /* ── header ─────────────────────────────────────────────────────────────
       The mockup's one full dark field: a grid of figures reconciled column by column needs
       its columns held down by something heavier than a rule. */
    .ledger-money-grid__table thead th {
        height: var(--ledger-head-h);
        padding: 0 var(--ledger-pad-x);
        background: var(--color-accent-900);
        color: var(--spec-on-dark);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
        border: 0;
    }

    .ledger-money-grid__table thead th.ledger-money-grid__num {
        text-align: right;
    }

    .ledger-money-grid__table thead th.ledger-money-grid__select {
        padding: 0;
    }

    /* ── rows ─────────────────────────────────────────────────────────────
       One class and one element, deliberately: every row state below is written at the same
       weight and wins on source order instead. Adding `tbody` here would have made the base
       cell outrank the parent band and the selection fill, and both would silently do nothing. */
    .ledger-money-grid__table td {
        height: var(--ledger-row-h);
        padding: 0 var(--ledger-pad-x);
        border-bottom: 1px solid var(--color-divider);
        background: var(--spec-surface);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * A πρωτοβάθμιος is the roll-up its children sum into, so it carries the weight and the
     * fill and a heavier rule under it — the mockup's neutral-100 band.
     */
    .ledger-money-grid__row--parent td {
        background: var(--color-neutral-100);
        border-bottom-width: 1px;
        border-bottom-color: var(--color-neutral-300);
        font-weight: var(--weight-semibold);
    }

    .ledger-money-grid__code {
        font-family: var(--font-mono);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        /* §3.8: 11px text never takes neutral-600, however the mockup draws it. */
        color: var(--color-neutral-700);
    }

    .ledger-money-grid__row--parent .ledger-money-grid__code {
        color: var(--color-accent-800);
    }

    /* Depth is a custom property on the row, so one rule indents every level. */
    .ledger-money-grid__table td.ledger-money-grid__name {
        padding-left: calc(var(--ledger-pad-x) + var(--ledger-depth) * var(--ledger-indent));
        color: var(--color-neutral-800);
    }

    .ledger-money-grid__row--parent .ledger-money-grid__name {
        color: var(--spec-ink);
    }

    /* Element-qualified on purpose: `.spec-fill-region td` (worksheets.css) loads later in the
       same layer and left-aligns every hand-rolled grid cell at (0,1,1), so the money columns
       need at least that weight to stay under their right-aligned headers. */
    .ledger-money-grid__table td.ledger-money-grid__num {
        font-family: var(--font-mono);
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    /* A negative υπόλοιπο is a real minus in the stop role — never a parenthesis, never red text
       on everything that merely looks unusual. */
    .ledger-money-grid__balance.is-negative {
        color: var(--stop);
    }

    /* ── selection (§3.3) ───────────────────────────────────────────────── */
    .ledger-money-grid__table td.ledger-money-grid__select,
    .ledger-money-grid__table th.ledger-money-grid__select {
        width: 26px;
        padding: 0;
        text-align: center;
    }

    .ledger-money-grid__box {
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 1px solid var(--color-neutral-500);
        background: var(--spec-field);
        vertical-align: middle;
    }

    .ledger-money-grid__row--selectable {
        cursor: pointer;
    }

    /* The hover wash must not paint over the selection it is hovering. */
    .ledger-money-grid__row--selectable:not(.ledger-money-grid__row--selected):hover td {
        background: var(--wash-ink-4);
    }

    .ledger-money-grid__row--selected td {
        background: var(--color-accent-100);
        font-weight: var(--weight-semibold);
    }

    /* The mark is on the left, 3px, in the accent — not a radio at the far right. */
    .ledger-money-grid__row--selected td:first-child {
        box-shadow: inset 3px 0 0 var(--color-accent);
    }

    .ledger-money-grid__row--selected .ledger-money-grid__box {
        border-color: var(--color-accent-700);
        background: var(--color-accent);
        position: relative;
    }

    .ledger-money-grid__row--selected .ledger-money-grid__box::after {
        content: "";
        position: absolute;
        left: 3px;
        top: 0;
        width: 5px;
        height: 9px;
        border: solid var(--spec-on-accent);
        border-width: 0 2px 2px 0;
        transform: rotate(42deg);
    }

    .ledger-money-grid__row:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: calc(-1 * var(--spec-focus-width));
    }

    /* ── the row being edited ─────────────────────────────────────────────
       White, not accent-100: §3.4 marks a CHANGED cell with an accent fill, and a row already
       painted accent-100 would swallow the only signal that says which figure was touched. */
    .ledger-money-grid__row--editing td {
        height: auto;
        padding-top: 4px;
        padding-bottom: 4px;
        white-space: normal;
        overflow: hidden;
        background: var(--spec-surface);
    }

    .ledger-money-grid__row--editing .mud-input-control {
        margin-top: 0;
        min-width: 0;
        max-width: 100%;
    }

    .ledger-money-grid__row--editing .mud-input.mud-input-outlined > input,
    .ledger-money-grid__row--editing .mud-input.mud-input-outlined > .mud-input-slot {
        padding-top: 3px;
        padding-bottom: 3px;
        font-size: var(--text-sm);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The lookup lives inside the κωδικός column. The dropdown list still names the
       λογαριασμός; the input itself does not, because that string is what used to sit
       on top of the περιγραφή field. */
    .ledger-money-grid__row--editing .ledger-money-grid__code .account-lookup,
    .ledger-money-grid__row--editing .ledger-money-grid__code .account-lookup__field,
    .ledger-money-grid__row--editing .ledger-money-grid__code .mud-input {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ledger-money-grid__row--editing .ledger-money-grid__code .mud-input.mud-input-outlined > input {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    /* ── totals ─────────────────────────────────────────────────────────── */
    .ledger-money-grid__totals td,
    .ledger-money-grid__totals th {
        height: var(--ledger-totals-h);
        padding: 0 var(--ledger-pad-x);
        border-top: 2px solid var(--color-accent-900);
        background: var(--color-neutral-200);
        font-weight: var(--weight-semibold);
        font-size: 12px;
        text-align: left;
    }

    .ledger-money-grid__totals-label {
        font: var(--weight-semibold) 10px / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* ── the desk chrome around the grid ────────────────────────────────── */

    /* The level switch: kicker, the segmented cells, then the ⓘ that says what Α and Α+Β mean. */
    .isozygio-level-filter {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        min-width: 0;
    }

    .ledger-filter {
        width: 250px;
        max-width: 100%;
        height: var(--control-h-sm);
        padding: 0 9px;
        border: 1px solid var(--color-neutral-400);
        border-radius: 0;
        background: var(--spec-field);
        color: var(--spec-ink);
        font: var(--weight-regular) var(--text-sm) / var(--control-h-sm) var(--font-body);
        box-sizing: border-box;
    }

    .ledger-filter::placeholder {
        color: var(--color-neutral-600);
    }

    /*
     * The row-editing toolbar. It states the selection beside the actions that need one, because
     * §0 refuses to hide a reason: a greyed «Επεξεργασία» with nothing next to it says only that
     * something is wrong.
     */
    .ledger-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 9px;
        min-width: 0;
    }

    .ledger-actions__selection {
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ledger-actions__end {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 9px;
    }

    /* The Excel import panel, opened from the head rather than parked permanently under it. */
    .ledger-import {
        margin-bottom: var(--sp-3);
        padding: var(--sp-3) var(--sp-4);
        border: 1px solid var(--color-neutral-400);
        border-left: 3px solid var(--color-accent);
        background: var(--spec-surface);
    }

    .ledger-import__title {
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-700);
        margin-bottom: var(--sp-2);
    }

    .ledger-import__fields {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: var(--sp-3);
    }

    .ledger-import__template {
        flex: 1 1 16rem;
        min-width: 14rem;
    }

    .ledger-import__separator {
        width: 10rem;
    }

    .ledger-import__file {
        flex: 1 1 16rem;
        min-width: 14rem;
    }

    /* The verdict sits under the frame the figures are in, at the mockup's 10px. */
    .ledger-difference {
        margin-top: 10px;
    }

    .ledger-note {
        margin-bottom: var(--sp-3);
    }

    @media (max-width: 900px) {
        .ledger-filter {
            width: 100%;
        }
    }
}