/*
 * Χρεωπιστώσεις — the journal desk.
 *
 * Browse is a list. Compose is the desk. An empty μελέτη is one surface, not a table plus a
 * 480px peek. Once άρθρα exist the list stays at 1.2fr and the editor at 0.8fr, so the άρθρα
 * remain the wider column. The list is a hand-rolled grid rather
 * than a table because every row carries a selection box, a nested block of its own lines in
 * «Πλήρης ανάλυση», and a 3px selection bar. §3.2 still applies: the body scrolls inside
 * `.spec-fill-region`, the dark header sticks to the top of it and the totals row sits below.
 */
@layer spec.components {
    .journal-desk {
        /* The chrome above the list: study head, ladder, page header, toolbar strip, totals. */
        --spec-fill-offset: 400px;
        --journal-entry-grid: 32px 44px minmax(0, 1fr) 118px 118px 116px;
        --journal-line-grid: 86px minmax(0, 1fr) 118px 118px 116px;
        --journal-editor-grid: 120px minmax(160px, 1fr) 136px 136px 32px;
    }

    .journal-desk__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }

    @media (min-width: 1280px) {
        .journal-desk__grid:not(.journal-desk__grid--empty) {
            grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
        }

        .journal-desk__grid--composing:not(.journal-desk__grid--empty) {
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        }
    }

    .journal-desk__list {
        min-width: 0;
    }

    /* ——————————————————————————————————————————————————————
       Buttons

       Square, hairline, 11.5–12px. The primary accent fill is the only solid one on the desk.
       —————————————————————————————————————————————————————— */
    .journal-btn {
        padding: 5px 12px;
        font: var(--weight-regular) var(--text-sm) / 1.2 var(--font-body);
        color: var(--spec-ink);
        background: var(--spec-surface);
        border: 1px solid var(--color-neutral-400);
        cursor: pointer;
        white-space: nowrap;
    }

    .journal-btn:hover:not(:disabled) {
        background: var(--wash-ink-4);
    }

    .journal-btn:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 1px;
    }

    /* §0: a closed control keeps its label and states its reason next to it — colour, not
       opacity, says it is closed. */
    .journal-btn:disabled {
        background: var(--color-neutral-100);
        border-color: var(--spec-line);
        color: var(--color-neutral-600);
        cursor: not-allowed;
    }

    .journal-btn--primary {
        padding: 6px 12px;
        font-weight: var(--weight-semibold);
        color: var(--spec-on-accent);
        background: var(--color-accent);
        border-color: var(--color-accent-700);
    }

    .journal-btn--primary:hover:not(:disabled) {
        background: var(--color-accent-600);
    }

    .journal-btn--primary:disabled {
        background: var(--color-neutral-300);
        border-color: var(--color-neutral-400);
        color: var(--color-neutral-700);
    }

    .journal-btn--stop {
        color: var(--stop);
        border-color: var(--stop-b);
        background: var(--spec-surface);
    }

    .journal-btn--stop:hover:not(:disabled) {
        background: var(--stop-t);
    }

    .journal-btn--stop-solid {
        padding: 7px 13px;
        font-size: 12px;
        font-weight: var(--weight-semibold);
        color: #fff;
        background: var(--stop);
        border-color: var(--stop);
    }

    .journal-btn--stop-solid:hover:not(:disabled) {
        background: color-mix(in srgb, var(--stop) 88%, #000);
    }

    /* ——————————————————————————————————————————————————————
       Toolbar strip — Εισαγωγή · Επεξεργασία · Διαγραφή, and what is selected
       —————————————————————————————————————————————————————— */
    .journal-tools {
        display: flex;
        gap: 7px;
        align-items: center;
        flex-wrap: wrap;
        padding: 7px 10px;
        margin-bottom: 9px;
        background: var(--color-neutral-100);
        border: 1px solid var(--spec-line);
    }

    .journal-tools__note {
        font: var(--weight-regular) 11px / 1.3 var(--font-mono);
        color: var(--color-neutral-700);
        margin-left: 5px;
    }

    /* ——————————————————————————————————————————————————————
       The άρθρα grid
       —————————————————————————————————————————————————————— */
    .journal-table {
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-surface);
    }

    .journal-table__body {
        /* .spec-fill-region carries the height and the scrollbar. */
        min-width: 0;
    }

    .journal-row {
        display: grid;
        grid-template-columns: var(--journal-entry-grid);
        column-gap: 10px;
        align-items: center;
        min-width: 0;
    }

    .journal-row__head {
        position: sticky;
        top: 0;
        z-index: 3;
        height: 28px;
        padding-left: 3px;
        background: var(--color-accent-900);
        color: var(--spec-on-dark);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }

    .journal-row__entry {
        width: 100%;
        height: 32px;
        padding: 0;
        text-align: left;
        background: var(--spec-surface);
        border: 0;
        border-bottom: 1px solid var(--spec-line);
        border-left: 3px solid transparent;
        cursor: pointer;
        font: inherit;
        color: inherit;
    }

    .journal-row__entry:hover {
        background: var(--wash-ink-4);
    }

    .journal-row__entry:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: -2px;
    }

    .journal-row__entry.is-selected {
        background: var(--color-accent-100);
        border-left-color: var(--color-accent);
    }

    .journal-row__entry.is-selected:hover {
        background: var(--color-accent-200);
    }

    /* §3.3: the selection mark is a 14px square on the LEFT, ✓ when chosen. */
    .journal-box {
        justify-self: center;
        width: 14px;
        height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--color-neutral-400);
        color: #fff;
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-body);
    }

    .is-selected .journal-box {
        background: var(--color-accent);
        border-color: var(--color-accent-700);
    }

    .journal-cell__no {
        padding-left: 4px;
        font: var(--weight-regular) 11px var(--font-mono);
        color: var(--color-neutral-700);
    }

    .journal-cell__desc {
        display: flex;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
        padding-right: 12px;
    }

    .journal-cell__desc-text {
        font-size: 12.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .is-selected .journal-cell__desc-text {
        font-weight: var(--weight-semibold);
    }

    .journal-cell__lines {
        flex: none;
        font: var(--weight-regular) var(--text-xs) var(--font-mono);
        color: var(--color-neutral-700);
    }

    .journal-cell__money {
        text-align: right;
        padding-right: 12px;
        font: var(--weight-regular) 12px var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    .journal-cell__balance {
        padding-left: 12px;
        font-size: var(--text-sm);
        color: var(--ok);
    }

    /* The dark header's own cell keeps the header's white; only a row states a verdict. */
    .journal-cell__balance-head {
        padding-left: 12px;
        color: inherit;
    }

    .journal-cell__balance--stop {
        color: var(--stop);
        font-weight: var(--weight-semibold);
    }

    /* Nested lines under an entry in «Πλήρης ανάλυση». */
    .journal-detail {
        border-bottom: 1px solid var(--color-neutral-300);
    }

    .journal-detail__row {
        display: grid;
        grid-template-columns: var(--journal-line-grid);
        column-gap: 10px;
        align-items: center;
        height: 25px;
        background: var(--color-neutral-100);
        border-bottom: 1px dotted var(--spec-line);
    }

    .journal-detail--selected .journal-detail__row {
        background: var(--color-accent-100);
    }

    .journal-detail__code {
        padding-left: 14px;
        padding-right: 6px;
        font: var(--weight-regular) 11px var(--font-mono);
        color: var(--color-accent-800);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .journal-detail__name {
        font-size: var(--text-sm);
        color: var(--color-neutral-800);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 12px;
    }

    .journal-detail__money {
        text-align: right;
        padding-right: 12px;
        font: var(--weight-regular) var(--text-sm) var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    .journal-row__totals {
        height: 32px;
        border-top: 2px solid var(--color-accent-900);
        background: var(--color-neutral-200);
        font-weight: var(--weight-semibold);
    }

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

    .journal-row__totals .journal-cell__money {
        font-weight: var(--weight-semibold);
    }

    .journal-totals__unbalanced {
        padding-left: 12px;
        font-size: var(--text-sm);
        color: var(--stop);
        font-weight: var(--weight-semibold);
    }

    /* The stop block under the table, one per άρθρο that does not balance. */
    .journal-imbalance {
        margin-top: 14px;
        max-width: 520px;
        display: block;
    }

    .journal-imbalance + .journal-imbalance {
        margin-top: 9px;
    }

    .journal-imbalance__body {
        font-size: 12px;
        line-height: var(--leading-normal);
        margin-top: 6px;
        display: flex;
        align-items: center;
        gap: 9px;
        flex-wrap: wrap;
    }

    .journal-imbalance__figure {
        font: var(--weight-semibold) 13px var(--font-mono);
        color: var(--stop);
    }

    /* ——————————————————————————————————————————————————————
       Banners: the delete ask, the discard ask
       —————————————————————————————————————————————————————— */
    .journal-ask {
        margin-bottom: 11px;
        padding: 12px 14px;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .journal-ask__body {
        flex: 1;
        min-width: 220px;
    }

    .journal-ask__title {
        font: var(--weight-semibold) 13.5px / 1.25 var(--font-heading);
        color: var(--tone, var(--stop));
    }

    .journal-ask__note {
        font-size: 12px;
        line-height: var(--leading-normal);
        margin-top: 5px;
    }

    /* ——————————————————————————————————————————————————————
       The editor panel
       —————————————————————————————————————————————————————— */
    .journal-editor {
        border: 1px solid var(--color-accent);
        background: var(--spec-surface);
        min-width: 0;
    }

    .journal-desk__grid--composing .journal-editor {
        min-height: 360px;
    }

    .journal-desk__grid--empty .journal-desk__list .empty-state {
        min-height: 280px;
    }

    .journal-editor__head {
        padding: 14px 16px;
        background: var(--color-accent-100);
        border-bottom: 1px solid var(--color-accent-300);
    }

    .journal-editor__headline {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
    }

    .journal-editor__kicker {
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-accent-800);
    }

    .journal-editor__saved {
        font: var(--weight-regular) var(--text-xs) var(--font-mono);
        color: var(--color-neutral-700);
        white-space: nowrap;
    }

    .journal-editor__title-input {
        width: 100%;
        margin-top: 8px;
        min-height: var(--control-h);
        padding: 7px 10px;
        background: var(--spec-field);
        border: 1px solid var(--color-accent-400);
        font: var(--weight-semibold) 14px var(--font-body);
        color: var(--spec-ink);
    }

    .journal-editor__title-input:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: -1px;
    }

    .journal-editor__hint {
        margin: 8px 0 0;
        font-size: var(--text-sm);
        line-height: var(--leading-normal);
        color: var(--color-neutral-700);
        text-wrap: pretty;
    }

    .journal-lines__head {
        display: grid;
        grid-template-columns: var(--journal-editor-grid);
        height: 26px;
        align-items: center;
        background: var(--color-neutral-200);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-neutral-800);
        border-bottom: 1px solid var(--spec-line);
    }

    .journal-lines__head > :first-child {
        padding-left: 9px;
    }

    .journal-lines__money {
        text-align: right;
        padding-right: 10px;
    }

    .journal-line {
        display: grid;
        grid-template-columns: var(--journal-editor-grid);
        align-items: center;
        column-gap: 6px;
        min-height: 40px;
        padding: 4px 6px;
        border-bottom: 1px solid var(--spec-line);
        background: var(--spec-surface);
    }

    /* The code cell is its own lookup: a bare mono input that only shows a frame on focus, with
       the suggestion list hung off it. AccountLookup could not be reused here — it is a
       MudAutocomplete whose ToStringFunc is hardcoded to «κωδικός περιγραφή», which does not fit
       an 88px column that must show the code alone. */
    .journal-line__code {
        position: relative;
        padding-left: 9px;
        min-width: 0;
    }

    .journal-line__code-input {
        width: 100%;
        min-width: 0;
        height: var(--control-h);
        text-overflow: ellipsis;
        padding: 0 8px;
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-field);
        font: var(--weight-semibold) var(--text-sm) var(--font-mono);
        color: var(--color-accent-800);
    }

    .journal-line__code-input:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: -1px;
        border-color: var(--color-accent-500);
    }

    .journal-suggest {
        position: absolute;
        top: 100%;
        left: 4px;
        z-index: 6;
        min-width: 260px;
        max-height: 220px;
        overflow: auto;
        margin: 0;
        padding: 0;
        list-style: none;
        background: var(--spec-surface);
        border: 1px solid var(--color-neutral-400);
        box-shadow: var(--shadow-md);
    }

    .journal-suggest__item {
        display: flex;
        gap: 8px;
        align-items: baseline;
        width: 100%;
        padding: 4px 8px;
        border: 0;
        background: none;
        text-align: left;
        cursor: pointer;
        font-size: 12px;
    }

    .journal-suggest__item:hover,
    .journal-suggest__item.is-active {
        background: var(--color-accent-100);
    }

    .journal-suggest__code {
        flex: none;
        font: var(--weight-semibold) var(--text-sm) var(--font-mono);
        color: var(--color-accent-800);
    }

    .journal-suggest__name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--color-neutral-800);
    }

    .journal-line__name-input {
        width: 100%;
        height: var(--control-h);
        padding: 0 8px;
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-field);
        font: var(--weight-regular) 13px var(--font-body);
        color: var(--spec-ink);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .journal-line__name-input:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: -1px;
        border-color: var(--color-accent-500);
    }

    /* An amount cell takes the accent fill when it carries a value — the mockup's way of showing
       which side of the entry a line sits on without a column of repeated words. */
    .journal-line__amount {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background: var(--spec-surface);
    }

    .journal-line__amount.has-value {
        background: var(--color-accent-100);
    }

    .journal-line__amount-input {
        width: 100%;
        height: var(--control-h);
        padding: 0 10px;
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-field);
        text-align: right;
        font: var(--weight-regular) 13px var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: var(--spec-ink);
    }

    .journal-line__amount.has-value .journal-line__amount-input {
        background: var(--color-accent-100);
        border-color: var(--color-accent-400);
    }

    .journal-line__amount-input:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: -1px;
        border-color: var(--color-accent-500);
        background: var(--spec-field);
    }

    .journal-line__remove {
        justify-self: center;
        font: var(--weight-regular) 13px / 1 var(--font-mono);
        color: var(--color-neutral-600);
        background: none;
        border: 0;
        cursor: pointer;
        padding: 2px 4px;
    }

    .journal-line__remove:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 1px;
    }

    .journal-line__remove:hover:not(:disabled) {
        color: var(--stop);
    }

    .journal-line__remove:disabled {
        color: var(--color-neutral-400);
        cursor: not-allowed;
    }

    .journal-lines__add {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 9px;
        background: var(--color-neutral-100);
        border-bottom: 1px solid var(--spec-line);
    }

    .journal-lines__add-button {
        padding: 4px 0;
        font-size: 12.5px;
        color: var(--color-accent-700);
        font-weight: var(--weight-semibold);
        background: none;
        border: 0;
        text-align: left;
        cursor: pointer;
        white-space: nowrap;
        flex: none;
    }

    .journal-lines__add-button:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 1px;
    }

    .journal-lines__add-button:disabled {
        color: var(--color-neutral-600);
        cursor: not-allowed;
    }

    .journal-lines__add-hint {
        font-size: 11px;
        line-height: 1.35;
        color: var(--color-neutral-700);
        text-wrap: pretty;
    }

    /* The balance strip: the verdict, the figure, the two totals, and — when the save is closed —
       the reason it is closed, right where the button is. */
    .journal-balance {
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        background: var(--ok-t);
        border-top: 1px solid var(--ok-b);
        --tone: var(--ok);
    }

    .journal-balance--stop {
        background: var(--stop-t);
        border-top-color: var(--stop-b);
        --tone: var(--stop);
    }

    .journal-balance__label {
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--tone);
        white-space: nowrap;
    }

    .journal-balance__value {
        font: var(--weight-semibold) 13px var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: var(--tone);
    }

    .journal-balance__totals {
        font-size: var(--text-sm);
        color: var(--color-neutral-800);
        margin-left: auto;
    }

    .journal-balance__reason {
        flex-basis: 100%;
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
        color: var(--color-neutral-800);
        text-wrap: pretty;
    }

    .journal-editor__actions {
        padding: 11px 14px;
        display: flex;
        gap: 7px;
        align-items: center;
        flex-wrap: wrap;
    }

    .journal-editor__actions .journal-btn {
        padding: 7px 11px;
        font-size: 12px;
    }

    .journal-editor__actions .journal-btn--primary {
        padding: 7px 13px;
    }

    .journal-editor__actions .journal-btn--stop {
        margin-left: auto;
    }

    /* §3.7: nothing chosen yet is an empty state, not a blank panel. */
    .journal-editor--empty {
        border-style: dashed;
        border-color: var(--color-neutral-400);
        background: transparent;
    }

    .journal-editor--empty .empty-state {
        border: 0;
    }
}