/*
 * Πελάτες — the shared client register: the list, one client's record, and the new-client form.
 *
 * The mockup draws the list without a card around it: rules on the page ground, not a bordered
 * box. At two hundred rows a frame adds nothing and costs a column of width. The record and the
 * form DO get white boxes, because a set of facts and a set of fields are objects on the page
 * while a list IS the page.
 *
 * Grids rather than tables. A <table> row cannot carry a left selection bar without a cell to
 * hang it on, and these column widths are fixed by the design rather than by content.
 */
@layer spec.components {
    /* ——————————————————————————————————————————————————————
       The list (/workspace)
       —————————————————————————————————————————————————————— */

    /*
     * The chrome above and below the scrolling list is taller than the 300px §3.2 assumes: a head
     * band with a toolbar row, then the count line and the retire explainer under it. The offset
     * is stated once here rather than as a magic height on the region.
     */
    .clients-page {
        --spec-fill-offset: 372px;
    }

    /* The mockup's field: 420px, a neutral-400 hairline, no MudBlazor chrome. */
    .clients-search {
        flex: 1 1 auto;
        max-width: 420px;
        border-color: var(--color-neutral-400);
    }

    /*
     * One track list shared by the header and every row, so a column can never drift between the
     * two. The last track holds the status tag and is sized for «ΑΠΟΣΥΡΜΕΝΟΣ», the longer word.
     */
    .clients-list {
        --clients-cols: minmax(0, 1fr) 108px 92px 116px 84px 148px 116px;
        display: block;
        min-width: 0;
    }

    .clients-list__head,
    .clients-list__row {
        display: grid;
        grid-template-columns: var(--clients-cols);
        align-items: center;
        gap: 0 var(--sp-2);
        min-width: 0;
    }

    .clients-list__head {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 8px 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-neutral-400);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .clients-list__head--right {
        text-align: right;
        padding-right: 22px;
    }

    /*
     * 33px rows, and the whole row is the target — §3.3. A div rather than an <a> because the row
     * already contains one: the επωνυμία is the link, and an anchor inside an anchor is invalid.
     */
    .clients-list__row {
        min-height: 33px;
        width: 100%;
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--color-divider);
        background: transparent;
        text-align: left;
        font: inherit;
        color: inherit;
        cursor: pointer;
    }

    .clients-list__row:hover {
        background: var(--color-accent-100);
    }

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

    /* A retired row keeps every fact readable and loses only its claim on attention. Colour, not
       opacity — §3.8. */
    .clients-list__row--retired {
        background: var(--color-neutral-100);
    }

    .clients-list__row--retired .clients-list__name {
        color: var(--color-neutral-600);
    }

    .clients-list__name {
        font: var(--weight-semibold) var(--text-base) / 1.25 var(--font-body);
        color: var(--color-accent-800);
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .clients-list__name:hover,
    .clients-list__name:focus-visible {
        text-decoration: underline;
    }

    .clients-list__afm {
        font: var(--weight-regular) var(--text-sm) / 1 var(--font-mono);
        color: var(--color-neutral-700);
    }

    .clients-list__form {
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .clients-list__kad {
        font: var(--weight-regular) 11px / 1 var(--font-mono);
        color: var(--color-neutral-700);
    }

    .clients-list__studies {
        font: var(--weight-regular) var(--text-sm) / 1 var(--font-mono);
        text-align: right;
        padding-right: 22px;
    }

    .clients-list__last {
        font-size: var(--text-sm);
        color: var(--color-neutral-800);
    }

    .clients-list__last--none {
        color: var(--color-neutral-700);
    }

    .clients-list__tag {
        justify-self: end;
        padding: 2px 5px;
        font: var(--weight-regular) var(--text-2xs) / 1 var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        color: var(--ok);
        background: var(--ok-t);
        border: 1px solid var(--ok-b);
    }

    .clients-list__tag--retired {
        color: var(--color-neutral-700);
        background: var(--color-neutral-200);
        border-color: var(--color-divider);
    }

    .clients-list__foot {
        margin-top: 14px;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    /* The retire explainer under the list — a callout whose point is a paragraph rather than a
       figure, so the kicker sits above the sentence instead of beside it. */
    .clients-note {
        display: block;
        max-width: 560px;
        margin-top: 22px;
        padding: 12px 14px;
    }

    .clients-note--wide {
        max-width: 640px;
    }

    .clients-note__body {
        margin-top: 7px;
        font-size: 12px;
        line-height: var(--leading-normal);
        text-wrap: pretty;
    }

    .clients-note__body a {
        color: inherit;
    }

    /* ——————————————————————————————————————————————————————
       The record (/workspace/clients/{id})
       —————————————————————————————————————————————————————— */
    /*
     * Held to a measure. A three-column label/value grid stretched across a 1900px board puts a
     * nine-digit ΑΦΜ half a metre from the word ΑΦΜ.
     */
    .client-record {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        max-width: 1180px;
        min-width: 0;
    }

    .client-panel {
        background: var(--spec-surface);
        border: 1px solid var(--color-divider);
        padding: 16px 18px;
        min-width: 0;
    }

    .client-panel__kicker {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--sp-3);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-accent-700);
    }

    .client-panel__kicker-ok {
        color: var(--ok);
        letter-spacing: var(--tracking-wide);
    }

    .client-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 16px;
        margin-top: 12px;
    }

    .client-facts__item--wide {
        grid-column: span 2;
    }

    .client-facts__label {
        font-size: 10.5px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
        margin-bottom: 3px;
    }

    .client-facts__value {
        font-size: 12.5px;
        color: var(--spec-ink);
        overflow-wrap: anywhere;
    }

    .client-facts__value--mono {
        font-family: var(--font-mono);
    }

    .client-facts__value--absent {
        color: var(--color-neutral-700);
    }

    /* ── the client's μελέτες ── */
    .client-studies {
        --client-studies-cols: 26px 96px 120px minmax(0, 1fr) 176px 96px;
        display: block;
        margin-top: 12px;
        min-width: 0;
    }

    .client-studies__head,
    .client-studies__row {
        display: grid;
        grid-template-columns: var(--client-studies-cols);
        align-items: center;
        gap: 0 var(--sp-2);
        min-width: 0;
    }

    .client-studies__head {
        padding: 6px 10px;
        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;
    }

    .client-studies__row {
        width: 100%;
        min-height: 31px;
        padding: 0 10px;
        text-align: left;
        font: inherit;
        color: inherit;
        background: var(--spec-surface);
        border: 0;
        border-bottom: 1px solid var(--color-divider);
        border-left: 3px solid transparent;
        cursor: pointer;
    }

    .client-studies__row:hover {
        background: var(--color-accent-100);
    }

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

    /* §3.3: accent-100 fill, a 3px accent bar on the LEFT, 600 weight. */
    .client-studies__row.is-selected {
        background: var(--color-accent-100);
        border-left-color: var(--color-accent);
        font-weight: var(--weight-semibold);
    }

    /* The 14px square selection mark, always on the left and never a radio at the far right. */
    .client-studies__mark {
        width: 14px;
        height: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-field);
        color: var(--spec-on-accent);
        font: var(--weight-semibold) 10px / 1 var(--font-body);
    }

    .client-studies__row.is-selected .client-studies__mark {
        background: var(--color-accent);
        border-color: var(--color-accent-700);
    }

    .client-studies__num {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
    }

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

    .client-studies__state {
        font-size: var(--text-sm);
        color: var(--color-neutral-800);
    }

    .client-studies__open {
        justify-self: end;
        font-size: var(--text-sm);
        color: var(--color-accent-700);
    }

    .client-record__actions {
        display: flex;
        align-items: center;
        gap: 9px;
        flex-wrap: wrap;
        margin-top: 12px;
    }

    /* ——————————————————————————————————————————————————————
       New client (/companies)
       —————————————————————————————————————————————————————— */
    .client-new {
        max-width: 960px;
        min-width: 0;
    }

    .client-new__intro {
        max-width: 560px;
        margin: 0 0 var(--sp-4);
        font-size: 12.5px;
        color: var(--color-neutral-700);
        text-wrap: pretty;
    }

    .client-new__step + .client-new__step {
        margin-top: 16px;
    }

    .client-new__search {
        display: flex;
        gap: 8px;
        margin-top: 9px;
    }

    .client-new__search-field {
        flex: 1 1 auto;
        min-width: 0;
    }

    .gemi-results {
        margin-top: 10px;
        border-top: 1px solid var(--color-divider);
    }

    .gemi-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 106px 100px 104px;
        gap: 12px;
        align-items: center;
        width: 100%;
        padding: 8px 0;
        text-align: left;
        font: inherit;
        color: inherit;
        background: none;
        border: 0;
        border-bottom: 1px solid var(--color-divider);
        cursor: pointer;
    }

    .gemi-row:hover {
        background: var(--color-neutral-100);
    }

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

    .gemi-row.is-selected {
        background: var(--color-accent-100);
    }

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

    .gemi-row.is-selected .gemi-row__name {
        font-weight: var(--weight-semibold);
    }

    .gemi-row__afm {
        font: var(--weight-regular) var(--text-sm) / 1 var(--font-mono);
        color: var(--color-neutral-700);
    }

    .gemi-row__form {
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .gemi-row__pick {
        justify-self: end;
        font-size: 11px;
        color: var(--color-accent-700);
        border-bottom: 1px solid currentColor;
        white-space: nowrap;
    }

    .gemi-row.is-selected .gemi-row__pick {
        color: var(--color-accent-800);
    }

    .client-new__fallback {
        margin-top: 10px;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    /* ── the field grid ── */
    .client-fields {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 16px;
        margin-top: 12px;
    }

    .client-field--wide {
        grid-column: span 2;
    }

    .client-field--full {
        grid-column: 1 / -1;
    }

    .client-field__label {
        display: block;
        font-size: 10.5px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
        margin-bottom: 3px;
    }

    .client-field__input {
        display: block;
        width: 100%;
        padding: 7px 9px;
        font-family: var(--font-body);
        font-size: 12.5px;
        color: var(--spec-ink);
        background: var(--spec-field);
        border: 1px solid var(--color-neutral-300);
        border-radius: 0;
    }

    .client-field__input--mono {
        font-family: var(--font-mono);
    }

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

    /*
     * What the registry filled in. The tint is the whole message — «τα πεδία παραμένουν
     * επεξεργάσιμα» is said once, in the intro, rather than on nine fields.
     */
    .client-field__input--prefilled {
        background: var(--color-accent-100);
    }

    /* ── the technical disclosure ── */
    .client-new__technical {
        margin-top: 16px;
        padding-top: 13px;
        border-top: 1px dotted var(--color-divider);
    }

    .client-new__technical > summary {
        font-size: 10.5px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
        cursor: pointer;
    }

    .client-new__technical > summary:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 2px;
    }

    /* ── the save bar ── */
    .client-new__save {
        display: flex;
        gap: 9px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--color-divider);
    }

    .client-new__after {
        margin-left: auto;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    /* ——————————————————————————————————————————————————————
       Narrow boards

       The three-up grids collapse rather than squeezing a ΓΕΜΗ number into 60px, and the two
       lists drop their least load-bearing columns instead of scrolling sideways.
       —————————————————————————————————————————————————————— */
    @media (max-width: 1199.95px) {
        .clients-list {
            --clients-cols: minmax(0, 1fr) 108px 92px 84px 148px 116px;
        }

        .clients-list__kad {
            display: none;
        }
    }

    @media (max-width: 899.95px) {
        .client-fields,
        .client-facts {
            grid-template-columns: minmax(0, 1fr);
        }

        .client-field--wide,
        .client-facts__item--wide {
            grid-column: auto;
        }

        .clients-list {
            --clients-cols: minmax(0, 1fr) 108px 84px 116px;
        }

        .clients-list__form,
        .clients-list__last {
            display: none;
        }

        .client-studies {
            --client-studies-cols: 26px 96px minmax(0, 1fr) 96px;
        }

        .client-studies__period,
        .client-studies__state {
            display: none;
        }
    }
}