/*
 * FINAN — the module's own pages: the executive home, αναλύσεις, αριθμοδείκτες, statements,
 * κλάδος, reports/critical and the findings/severity primitives they share.
 *
 * Scoped rather than global where a class name already belongs to a shared component this file
 * does not own (KpiStat's `.kpi-stat`): those rules are written under a FINAN-page wrapper class
 * so the restyle lands only here, never on another module's use of the same component.
 */
@layer spec.components {
    /* ——————————————————————————————————————————————————————
       Availability pill — the executive header's ok/warn fact
       —————————————————————————————————————————————————————— */
    .finan-availability {
        font-family: var(--font-body);
    }

    /* ——————————————————————————————————————————————————————
       KPI tiles — restyled for FINAN only (KpiStat.razor itself belongs to another surface)
       —————————————————————————————————————————————————————— */
    /*
     * KpiStat.razor sets its own class list, so a tile's tone travels as a CSS custom property
     * inherited from the wrapping element the page puts around it (--tone: var(--ok) etc.) rather
     * than a modifier class this file cannot put on .kpi-stat itself.
     */
    .finan-kpis .kpi-stat {
        position: relative;
        border-top: 3px solid var(--tone, var(--color-accent-500));
        padding-top: var(--sp-3);
    }

    .finan-kpis .kpi-stat__value {
        font-size: var(--text-2xl);
        line-height: 1.1;
    }

    .finan-kpis .kpi-stat__label {
        font-size: var(--text-2xs);
    }

    /* ——————————————————————————————————————————————————————
       Findings — left-barred rows in the finding's own severity tone
       —————————————————————————————————————————————————————— */
    .finding-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: var(--sp-3) var(--sp-3) var(--sp-3) 11px;
        border-left: 3px solid var(--tone, var(--color-neutral-400));
        border-bottom: 1px solid var(--color-divider);
        background: var(--tone-tint, transparent);
    }

    .finding-row:last-child {
        border-bottom: none;
    }

    .finding-row--stop {
        --tone: var(--stop);
        --tone-tint: var(--stop-t);
    }

    .finding-row--warn {
        --tone: var(--warn);
        --tone-tint: var(--warn-t);
    }

    .finding-row--ok {
        --tone: var(--ok);
        --tone-tint: var(--ok-t);
    }

    .finding-row--info {
        --tone: var(--color-accent);
        --tone-tint: var(--color-accent-100);
    }

    .finding-row--neutral {
        --tone: var(--color-neutral-400);
    }

    .finding-row__head {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }

    .finding-row__title {
        font-weight: var(--weight-semibold);
        font-size: var(--text-base);
        color: var(--spec-ink);
    }

    .finding-row__detail {
        margin: 0;
        padding-left: calc(15px + var(--sp-2));
        color: var(--color-neutral-700);
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
        text-wrap: pretty;
    }

    /* A mono tag, not a filled MudChip pill. */
    .severity-chip {
        display: inline-flex;
        align-items: center;
        height: 18px;
        padding: 0 6px;
        border: 1px solid var(--tone-line, var(--color-neutral-400));
        background: var(--tone-tint, var(--color-neutral-100));
        color: var(--tone, var(--color-neutral-700));
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .severity-chip--stop {
        --tone: var(--stop);
        --tone-tint: var(--stop-t);
        --tone-line: var(--stop-b);
    }

    .severity-chip--warn {
        --tone: var(--warn);
        --tone-tint: var(--warn-t);
        --tone-line: var(--warn-b);
    }

    .severity-chip--ok {
        --tone: var(--ok);
        --tone-tint: var(--ok-t);
        --tone-line: var(--ok-b);
    }

    .severity-chip--info {
        --tone: var(--color-accent-700);
        --tone-tint: var(--color-accent-100);
        --tone-line: var(--color-accent-300);
    }

    /* ——————————————————————————————————————————————————————
       Signals — plain .spec-note cards, one per signal
       —————————————————————————————————————————————————————— */
    .finan-signals {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
    }

    .finan-signals .spec-note {
        align-items: flex-start;
    }

    /* ——————————————————————————————————————————————————————
       The no-statements empty state — two clear paths, never zeros
       —————————————————————————————————————————————————————— */
    .finan-empty-paths {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-3);
        justify-content: center;
        margin-top: var(--sp-3);
    }

    /* ——————————————————————————————————————————————————————
       Αναλύσεις — the create panel
       —————————————————————————————————————————————————————— */
    .finan-analysis-form {
        padding: var(--sp-4);
        margin-bottom: var(--sp-4);
        border: 1px solid var(--color-accent-300);
        border-left: 3px solid var(--color-accent);
        background: var(--color-accent-100);
    }

    .finan-analysis-form__grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr auto;
        gap: var(--sp-3);
        align-items: end;
    }

    @media (max-width: 900px) {
        .finan-analysis-form__grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    .finan-analysis-form__sentence {
        margin-top: var(--sp-3);
        font-size: var(--text-base);
        color: var(--color-accent-900);
    }

    .finan-analysis-form__sentence strong {
        font-family: var(--font-mono);
        font-weight: var(--weight-semibold);
    }

    /* ——————————————————————————————————————————————————————
       Αναλύσεις — the list table
       —————————————————————————————————————————————————————— */
    .finan-analyses-table tbody tr {
        cursor: pointer;
    }

    .finan-analyses-table tbody tr:hover {
        background: var(--wash-ink-7);
    }

    .finan-analyses-table tbody tr.is-selected {
        background: var(--color-accent-100);
        box-shadow: inset 3px 0 0 var(--color-accent);
        font-weight: var(--weight-semibold);
    }

    /* ——————————————————————————————————————————————————————
       Αριθμοδείκτες — the segmented basis strip's sentence
       —————————————————————————————————————————————————————— */
    .finan-basis {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
    }

    .finan-ratios__analysis-select {
        max-width: 20rem;
    }

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

    .finan-basis__reason {
        flex-basis: 100%;
        margin-top: var(--sp-1);
        color: var(--color-neutral-700);
        font-size: var(--text-sm);
        text-wrap: pretty;
    }

    /* ——————————————————————————————————————————————————————
       Αριθμοδείκτες — the grid itself

       Hand-rolled rather than MudTable: every row needs a different mix of value cells, a trend
       column of inline bars and a formula column, and a group row needs to become one wide band
       rather than N table cells — a shape §3.2 already allows ("a hand-rolled grid uses
       .spec-fill-region on the scrolling div instead").
       —————————————————————————————————————————————————————— */
    .ratio-grid {
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-surface);
    }

    .ratio-grid__scroll {
        max-height: var(--spec-fill-h, calc(100vh - var(--spec-fill-offset, 420px)));
        overflow: auto;
        overscroll-behavior: contain;
    }

    .ratio-grid__head {
        display: grid;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 3;
        height: 30px;
        background: var(--color-accent-900);
        color: var(--spec-on-dark);
    }

    .ratio-grid__head-cell {
        padding: 0 12px;
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .ratio-grid__head-cell--value,
    .ratio-grid__head-cell--trend {
        text-align: right;
    }

    .ratio-grid__row {
        display: grid;
        align-items: center;
        min-height: 26px;
        border-bottom: 1px solid var(--color-divider);
    }

    .ratio-grid__row:hover {
        background: var(--wash-ink-7);
    }

    .ratio-grid__row--group {
        display: block;
        height: 28px;
        line-height: 28px;
        background: var(--color-accent-700);
        border-bottom: 1px solid var(--color-accent-900);
    }

    .ratio-grid__group-label {
        display: block;
        padding: 0 12px;
        font: var(--weight-semibold) var(--text-2xs) / 28px var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: #fff;
    }

    .ratio-grid__cell {
        min-width: 0;
        padding: 0 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ratio-grid__cell--name {
        padding-left: 24px;
        font-size: var(--text-md);
        color: var(--spec-ink);
    }

    .ratio-grid__cell--value {
        text-align: right;
        font-family: var(--font-mono);
        font-size: var(--text-md);
        font-variant-numeric: tabular-nums;
        color: var(--spec-ink);
    }

    .ratio-grid__cell--value.is-negative {
        color: var(--stop);
    }

    /* BR-058: not computable, with the API's own reason as the title. Hatched, never a hyphen or
       a substitute zero. */
    .ratio-grid__cell--value.is-not-computable {
        background: var(--hatch);
        font-style: italic;
        color: var(--color-neutral-700);
    }

    /* The χρήση itself is not part of this grid — dashed and empty, not hatched: nothing here was
       refused. */
    .ratio-grid__cell--value.is-missing {
        margin: 4px 8px;
        border: 1px dashed var(--color-neutral-400);
        background: transparent;
    }

    .ratio-grid__cell--trend {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 2px;
        height: 20px;
        padding: 0 8px;
    }

    .ratio-grid__bar {
        display: block;
        width: 9px;
        background: var(--color-accent-400);
    }

    .ratio-grid__bar.is-gap {
        background: var(--color-neutral-300);
    }

    .ratio-grid__cell--formula {
        font-family: var(--font-mono);
        font-size: 10.5px;
        color: var(--color-neutral-600);
    }

    /* ——————————————————————————————————————————————————————
       Legend and the not-computable warn note
       —————————————————————————————————————————————————————— */
    .ratio-grid-footer {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-3);
        margin-top: var(--sp-3);
    }

    .ratio-grid-legend {
        flex: 1 1 360px;
        padding: 11px 13px;
        border: 1px solid var(--color-divider);
        background: var(--spec-surface);
    }

    .ratio-grid-legend__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);
    }

    .ratio-grid-legend__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2) var(--sp-4);
        margin-top: var(--sp-3);
    }

    .ratio-grid-legend__row {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }

    .ratio-grid-legend__sample {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 74px;
        height: 20px;
        padding-right: 8px;
        font-family: var(--font-mono);
        font-size: 11px;
        flex: none;
    }

    .ratio-grid-legend__sample--not-computable {
        background: var(--hatch);
        color: var(--color-neutral-700);
    }

    .ratio-grid-legend__sample--missing {
        border: 1px dashed var(--color-neutral-400);
    }

    .ratio-grid-legend__sample--negative {
        color: var(--stop);
        font-weight: var(--weight-semibold);
    }

    .ratio-grid-legend__text {
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .ratio-grid-warn {
        flex: 1 1 320px;
        max-width: 380px;
        padding: 11px 13px;
        border: 1px solid var(--warn-b);
        border-left: 3px solid var(--warn);
        background: var(--warn-t);
    }

    .ratio-grid-warn__title {
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--warn);
    }

    .ratio-grid-warn__body {
        margin-top: 6px;
        font-size: var(--text-base);
        line-height: 1.5;
        color: var(--spec-ink);
    }

    .ratio-grid-warn__disclosure {
        margin-top: var(--sp-2);
    }

    .ratio-grid-warn__disclosure summary {
        font-size: var(--text-sm);
        color: var(--color-accent-700);
        cursor: pointer;
    }

    .ratio-grid-warn__list {
        margin: var(--sp-2) 0 0;
        padding-left: 1.1em;
        font-size: var(--text-sm);
        color: var(--spec-ink);
    }

    .ratio-grid-warn__list li {
        margin-bottom: 2px;
    }

    /* ——————————————————————————————————————————————————————
       Statement sheets — scroll inside, freshness line above
       —————————————————————————————————————————————————————— */
    .finan-statement__freshness {
        margin-bottom: var(--sp-2);
        color: var(--color-neutral-700);
        font-size: var(--text-sm);
        font-family: var(--font-mono);
    }

    .finan-statement__scroll {
        max-height: var(--spec-fill-h, calc(100vh - var(--spec-fill-offset, 420px)));
        overflow: auto;
        overscroll-behavior: contain;
    }

    /* ——————————————————————————————————————————————————————
       Κλάδος — header facts as stat tiles
       —————————————————————————————————————————————————————— */
    .finan-industry-facts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--sp-3);
        margin-bottom: var(--sp-4);
    }

    .finan-industry-facts .kpi-stat {
        border-top: 3px solid var(--color-accent-500);
        padding-top: var(--sp-3);
    }

    /* ——————————————————————————————————————————————————————
       Reports — the card grid
       —————————————————————————————————————————————————————— */
    .finan-report-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--sp-3);
    }

    .finan-report-card {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        min-height: 108px;
        padding: 10px 12px;
        border: 1px solid var(--color-divider);
        border-left: 3px solid var(--tone, var(--color-neutral-400));
        background: var(--spec-surface);
    }

    .finan-report-card--locked {
        border-left-color: var(--color-neutral-300);
        border-style: dashed;
    }

    .finan-report-card__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--sp-2);
    }

    .finan-report-card__name {
        font: var(--weight-semibold) var(--text-md) / 1.3 var(--font-heading);
        color: var(--spec-ink);
    }

    .finan-report-card__reason {
        flex: 1;
        margin: 0;
        font-size: var(--text-sm);
        line-height: 1.45;
        color: var(--color-neutral-700);
    }

    .finan-report-card__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .finan-report-card__status {
        font: var(--weight-semibold) 9px / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--tone, var(--color-neutral-600));
    }
}