/* Statistics — the forecast tab ("Prognoza"). The layout follows design/mockups/StatsForecast*.dc.html;
   the shared tones, tables and the hours chart come from stats.css and stats-ui.css. Radii stop at 6 px. */

/* Colours are theme tokens: `--accent` is the mockup's sky, `--warn` its amber. The translucent
   shades are `color-mix` of those tokens. The matrix cells set their shade inline from the value. */

/* ── Cards ────────────────────────────────────────────────────────────── */

/* The shared `.stats-chart` adds a bottom margin to every chart; the cards space themselves. */
.stats-fc-card.stats-chart {
    margin: 0;
}

.stats-fc-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 6px;
    background: var(--stats-card-bg);
    border: 1px solid var(--stats-rule);
}

.stats-fc-head,
.stats-fc-matrix-card {
    gap: 12px;
}

.stats-fc-h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
}

.stats-fc-h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

/* The desktop's cards share one row grid, as the mockup's flex row does: the headline is about twice
   the width of the side card, the two middle cards are equal, and the last two take the full width.
   Six tracks give those proportions (4:2 and 3:3). The phone keeps the single column of the block. */
@media (min-width: 960px) {
    .stats-panel--prognoza:has(> .stats-fc-head) {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
        align-items: stretch;
    }

    .stats-panel--prognoza:has(> .stats-fc-head) > .stats-fc-head { grid-column: span 4; }
    .stats-panel--prognoza:has(> .stats-fc-head) > .stats-fc-facts { grid-column: span 2; }
    .stats-panel--prognoza:has(> .stats-fc-head) > .stats-fc-horizons,
    .stats-panel--prognoza:has(> .stats-fc-head) > .stats-fc-direction { grid-column: span 3; }
    .stats-panel--prognoza:has(> .stats-fc-head) > .stats-fc-all,
    .stats-panel--prognoza:has(> .stats-fc-head) > .stats-fc-hours { grid-column: 1 / -1; }

    .stats-fc-head .stats-fc-h2 {
        font-size: 22px;
    }

    .stats-fc-h3 {
        font-size: 15px;
    }
}

.stats-fc-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
}

.stats-fc-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.stats-fc-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.stats-fc-lead,
.stats-fc-axis {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--stats-strong);
}

.stats-fc-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--stats-meter);
}

.stats-fc-box {
    margin: 0;
    padding: 10px 12px;
    border-radius: 4px;
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: 13px;
    line-height: 1.5;
    color: var(--stats-strong);
}

.stats-fc-empty,
.stats-fc-status {
    margin: 0;
    font-size: 13px;
    color: var(--stats-meter);
}

/* ── Stacked share bar (early, on time, small change, late) ───────────── */

.stats-fc-stack {
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
}

.stats-fc-head .stats-fc-stack {
    height: 22px;
}

.stats-fc-seg {
    display: block;
    min-width: 0;
}

.stats-fc-seg--early { background: var(--stats-early); }
.stats-fc-seg--ontime { background: var(--stats-ontime); }
.stats-fc-seg--small { background: var(--stats-unknown); }
.stats-fc-seg--late { background: var(--stats-late); }

/* ── Legends ──────────────────────────────────────────────────────────── */

.stats-fc-legend {
    display: grid;
    gap: 6px 12px;
    font-size: 13px;
}

.stats-fc-legend--head,
.stats-fc-legend--dir {
    grid-template-columns: minmax(0, 1fr);
}

.stats-fc-legend--dir {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-fc-legend--bars {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12px;
    color: var(--stats-meter);
}

.stats-fc-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stats-fc-legend-value {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.stats-fc-key {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.stats-fc-key--early { background: var(--stats-early); }
.stats-fc-key--ontime { background: var(--stats-ontime); }
.stats-fc-key--small { background: var(--stats-unknown); }
.stats-fc-key--late { background: var(--stats-late); }
.stats-fc-key--median { background: var(--accent); }
.stats-fc-key--p90 { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ── Rows: horizon bars and direction rows ────────────────────────────── */

.stats-fc-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-fc-row {
    display: grid;
    align-items: center;
    gap: 10px;
    min-height: 26px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.stats-fc-row--horizon {
    grid-template-columns: 44px minmax(0, 1fr) 92px;
}

.stats-fc-row--dir {
    grid-template-columns: 44px minmax(0, 1fr) 48px;
    min-height: 24px;
}

@media (min-width: 960px) {
    .stats-fc-row--horizon,
    .stats-fc-row--dir {
        grid-template-columns: 48px minmax(0, 1fr) 92px;
    }

    .stats-fc-row--dir {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
    }

    .stats-fc-legend--head {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .stats-fc-legend--head .stats-fc-legend-value {
        display: block;
        margin-left: 0;
    }

    .stats-fc-legend--dir {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stats-fc-rowhead {
    color: var(--stats-strong);
}

.stats-fc-rowhead--ref {
    font-weight: 700;
}

.stats-fc-val {
    text-align: right;
    font-weight: 600;
}

.stats-fc-val--late {
    color: var(--stats-late);
}

.stats-fc-val-muted {
    color: var(--stats-meter);
    font-weight: 400;
}

.stats-fc-row--dir .stats-fc-stack {
    height: 14px;
}

/* A horizon bar: the track, the p90 behind, the median in front. */
.stats-fc-bar {
    position: relative;
    display: block;
    height: 12px;
    border-radius: 2px;
    background: var(--stats-track);
    overflow: hidden;
}

.stats-fc-bar-p90,
.stats-fc-bar-med {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.stats-fc-bar-p90 { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.stats-fc-bar-med { background: var(--accent); }

/* ── Facts (desktop) ──────────────────────────────────────────────────── */

.stats-fc-facts {
    gap: 12px;
}

.stats-fc-facts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-fc-fact {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--stats-strong);
}

.stats-fc-fact-num {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stats-fc-fact-num--early { color: var(--stats-early); }
.stats-fc-fact-num--ontime { color: var(--stats-ontime); }
.stats-fc-fact-num--late { color: var(--stats-late); }

/* ── Hour chart: the accent bars, the orange late bars, the grey thin hours ── */

.stats-fc-hours .stats-ui-hour-fill {
    background: var(--accent);
}

.stats-fc-hours .stats-ui-hour-fill.stats-ui-tone--late {
    background: var(--stats-late);
}

.stats-fc-hours .stats-ui-hour-fill.stats-ui-tone--unknown {
    background: var(--stats-unknown);
}

.stats-fc-hours .stats-ui-hour--missing .stats-ui-hour-fill {
    background: var(--ui-track);
}

/* The phone's chart is shorter than the desktop's; the axis follows the plot's height. */
@media (max-width: 959.98px) {
    .stats-fc-hours .stats-ui-hours-plot,
    .stats-fc-hours .stats-ui-hours-ylabels {
        height: 110px !important;
    }
}

/* ── Tap card (level 1: one hour) ─────────────────────────────────────── */

.stats-fc-tap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-fc-tap-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0;
    font-size: 13px;
}

.stats-fc-tap-facts dt {
    color: var(--stats-meter);
}

.stats-fc-tap-facts dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stats-fc-tap-sub {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stats-meter);
}

.stats-fc-tap-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* The mockup's row: the label keeps one line ("1 min przed"), the bar is a thin track in the
   "later" colour, and the value sits at the right edge. */
.stats-fc-tap-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px auto;
    align-items: center;
    gap: 4px 10px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.stats-fc-tap-row > span:first-child {
    white-space: nowrap;
    color: var(--text-main);
}

/* The track is the mockup's grey (#334155 on the dark card), full height of the 6px row. */
.stats-fc-bar--tap {
    height: 6px;
    border-radius: 2px;
    background: var(--stats-track);
}

.stats-fc-bar--tap .stats-fc-bar-med {
    background: var(--warn);
}

.stats-fc-tap-row strong {
    text-align: right;
    white-space: nowrap;
    color: var(--text-main);
}

/* ── Footer under the hour chart (phone) ──────────────────────────────── */

.stats-fc-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Two classes: the shared `.stats-chart-toggle` (the other charts) sets its own margin, height and radius.
   The desktop's „Tabela" button is small and square-cornered, as the mockup draws it. */
.stats-fc-toggle.stats-chart-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 32px;
    margin: 0;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    background: transparent;
    color: var(--stats-strong);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* The phone's table toggle is a plain link with an icon (the mockup), not a pill. */
.stats-fc-toggle--phone.stats-chart-toggle {
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}

/* The summary of the hour chart is its image name only: no room, no text. */
.stats-fc-summary {
    height: 0;
    overflow: hidden;
}

/* ── Desktop tables (every horizon, the matrix note) ──────────────────── */

.stats-fc-card .stats-table-scroll {
    margin: 0;
}

.stats-fc-card .stats-table th,
.stats-fc-card .stats-table td {
    padding: 7px 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.stats-fc-card .stats-table thead th {
    padding-top: 4px;
    padding-bottom: 6px;
    font-weight: 600;
    color: var(--stats-meter);
}

.stats-fc-card .stats-table .stats-fc-first {
    padding-left: 0;
    text-align: left;
}

.stats-fc-card .stats-table .stats-fc-num {
    text-align: right;
}

.stats-fc-card .stats-table tr > :last-child {
    padding-right: 0;
}

/* ── Matrix (level 2): hours down, horizons across ────────────────────── */

.stats-fc-matrix {
    display: grid;
    grid-template-columns: 38px repeat(9, minmax(0, 1fr));
    gap: 2px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.stats-fc-corner {
    display: block;
}

.stats-fc-matrix .stats-fc-col,
.stats-fc-matrix .stats-fc-rowhead {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    font-size: 10px;
    color: var(--stats-meter);
}

.stats-fc-matrix .stats-fc-rowhead {
    justify-content: flex-start;
    font-size: 11px;
}

/* The peak hour's label is bold: the hour the section names as the busiest. */
.stats-fc-matrix .stats-fc-rowhead--peak {
    font-weight: 700;
    color: var(--stats-strong);
}

.stats-fc-col--ref {
    font-weight: 700;
    color: var(--stats-strong);
}

.stats-fc-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    border-radius: 3px;
    color: var(--stats-strong);
}

.stats-fc-cell--empty {
    background: transparent;
}

/* The 10-minute column is framed: the section's numbers come from it. */
.stats-fc-cell--ref {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);
}

.stats-fc-axis {
    font-size: 12px;
    color: var(--stats-meter);
}

.stats-fc-scale-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--stats-meter);
}

/* The bar fills the row, as the mockup's: its two ends are the lightest and the darkest cell. */
.stats-fc-scale {
    display: block;
    flex: 1 1 auto;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(to right, color-mix(in srgb, var(--warn) 8%, transparent), color-mix(in srgb, var(--warn) 85%, transparent));
}

.stats-fc-matrix-note {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stats-fc-status {
    padding: 16px 0;
}

/* ── The „Tabela ›" entry of the horizons card (phone, tap state only) ───── */

.stats-fc-horizons-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.stats-fc-horizons-head > .stats-fc-h3 {
    flex-grow: 1;
}

/* Hidden at rest (StatsForecast), shown while a bar is tapped (StatsForecastTap). */
.stats-fc-tabela {
    display: none;
    min-height: 44px;
    margin: -12px 0;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--accent);
}

.stats-panel--prognoza:has(.stats-fc-plot--tapped) .stats-fc-tabela {
    display: inline-flex;
}

/* ── Matrix (level 2) as drawn: the phone is one column; the desktop is one card and a side card ── */

.stats-panel--prognoza:has(> .stats-fc-matrix-head) {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stats-fc-matrix-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-fc-matrix-lead {
    color: var(--stats-meter);
}

.stats-fc-matrix-card {
    padding: 12px 10px;
    gap: 8px;
}

/* The desktop draws the card from three pieces (head, tabs, matrix) that sit one above the other
   with no gap, so their outer frame reads as one card; the side card takes the second column. */
@media (min-width: 960px) {
    .stats-panel--prognoza:has(> .stats-fc-matrix-head) {
        display: grid;
        grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 0;
        /* The side card runs the height of the matrix card, as the mockup's flex row does. */
        align-items: stretch;
    }

    .stats-panel--prognoza:has(> .stats-fc-matrix-head) > .stats-crumbs {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 16px;
    }

    .stats-panel--prognoza:has(> .stats-fc-matrix-head) > .stats-fc-matrix-head {
        grid-column: 1;
        grid-row: 2;
        gap: 4px;
        padding: 18px 20px 12px;
        border: 1px solid var(--stats-rule);
        border-bottom: 0;
        border-radius: 6px 6px 0 0;
        background: var(--stats-card-bg);
    }

    .stats-panel--prognoza:has(> .stats-fc-matrix-head) > .stats-fc-matrix-tabs {
        grid-column: 1;
        grid-row: 3;
        padding: 0 20px 12px;
        border-left: 1px solid var(--stats-rule);
        border-right: 1px solid var(--stats-rule);
        background: var(--stats-card-bg);
    }

    .stats-panel--prognoza:has(> .stats-fc-matrix-head) > .stats-fc-matrix-card {
        grid-column: 1;
        grid-row: 4;
        padding: 0 20px 18px;
        gap: 12px;
        border-top: 0;
        border-radius: 0 0 6px 6px;
    }

    /* The note's wrapper dissolves, so the side card becomes a grid item of its own. The phone
       footnote inside it is hidden by `.stats-only-phone`. */
    .stats-panel--prognoza:has(> .stats-fc-matrix-head) > .stats-fc-matrix-note {
        display: contents;
    }

    .stats-panel--prognoza:has(> .stats-fc-matrix-head) > .stats-fc-matrix-note > .stats-fc-card {
        grid-column: 2;
        grid-row: 2 / span 3;
        gap: 10px;
        padding: 18px 20px;
    }

    .stats-fc-matrix-note .stats-fc-kicker {
        font-size: 12px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--stats-meter);
    }

    .stats-fc-title {
        font-size: 22px;
    }

    .stats-fc-matrix {
        grid-template-columns: 56px repeat(9, minmax(0, 1fr));
        font-size: 13px;
    }

    .stats-fc-matrix .stats-fc-col,
    .stats-fc-matrix .stats-fc-rowhead {
        min-height: 25px;
    }

    .stats-fc-matrix .stats-fc-col {
        font-size: 12px;
    }

    .stats-fc-matrix .stats-fc-rowhead {
        font-size: 13px;
    }

    .stats-fc-cell {
        min-height: 25px;
    }
}