/* Football title-simulations pages (/​<league>_title_simulations)
   Builds on the shared simulations.css (.sim-page/.sim-hero/.sim-card system).
   One stylesheet serves all five leagues; accent = --sport-football. */

.fsim-page .sim-eyebrow { color: var(--sport-football, #43C18A); }

/* ------------------------------------------------------------- standings */
.fsim-table { display: flex; flex-direction: column; gap: 2px; margin-top: 0.75rem; }

.fsim-thead,
.fsim-row {
    display: grid;
    grid-template-columns:
        2rem minmax(11rem, 1.6fr) 3rem 3rem 3.4rem
        repeat(var(--fsim-bands, 3), minmax(5.2rem, 1fr)) minmax(9rem, 1.3fr);
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
}

.fsim-thead {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    position: sticky;
    top: 0;
    background: rgba(13, 17, 23, 0.92);
    backdrop-filter: blur(4px);
    z-index: 2;
}

.fsim-row {
    background: rgba(255, 255, 255, 0.025);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.fsim-row:hover, .fsim-row:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.fsim-row--spot { background: rgba(255, 255, 255, 0.09); }

/* qualification bands (left border + rank tint) */
.fsim-row--cl    { border-left-color: #43C18A; }
.fsim-row--el    { border-left-color: #4F8DFF; }
.fsim-row--relpo { border-left-color: #FACC15; }
.fsim-row--rel   { border-left-color: #FB7185; }
.fsim-row--cl .fsim-col-rank    { color: #43C18A; }
.fsim-row--el .fsim-col-rank    { color: #4F8DFF; }
.fsim-row--relpo .fsim-col-rank { color: #FACC15; }
.fsim-row--rel .fsim-col-rank   { color: #FB7185; }

.sim-legend-dot.fsim-dot-cl    { background: #43C18A; }
.sim-legend-dot.fsim-dot-el    { background: #4F8DFF; }
.sim-legend-dot.fsim-dot-relpo { background: #FACC15; }
.sim-legend-dot.fsim-dot-rel   { background: #FB7185; }

.fsim-col-rank { font-weight: 700; font-variant-numeric: tabular-nums; }

.fsim-col-team { display: flex; flex-direction: column; min-width: 0; position: relative; padding-left: 0.9rem; }
.fsim-col-team strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.92rem; }
.fsim-sub { color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; }
.fsim-swatch {
    position: absolute; left: 0; top: 0.35rem;
    width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.fsim-col-num { text-align: center; font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.fsim-thead .fsim-col-num { font-size: 0.72rem; }

.fsim-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    padding: 0.3rem 0.15rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, calc(var(--cell-a, 0) * 0.001)); /* fallback */
}
.fsim-cell--champions_league   { background: rgba(67, 193, 138, var(--cell-a, 0)); }
.fsim-cell--europa_league      { background: rgba(79, 141, 255, var(--cell-a, 0)); }
.fsim-cell--relegation_playoff { background: rgba(250, 204, 21, var(--cell-a, 0)); }
.fsim-cell--relegation         { background: rgba(251, 113, 133, var(--cell-a, 0)); }
.fsim-thead .fsim-cell { background: none; }

.fsim-col-title { display: flex; align-items: center; gap: 0.5rem; }
.fsim-col-title .pct { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.9rem; text-align: right; }
.fsim-thead .fsim-col-title { display: block; text-align: right; }

/* ------------------------------------------------------------ rank chart */
.fsim-hint {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    margin: 0.25rem 0 0.75rem;
}
.fsim-hint i { color: var(--sport-football, #43C18A); margin-right: 0.35rem; }

.fsim-chart-controls {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.6rem; flex-wrap: wrap;
}
.fsim-select-label { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.fsim-select {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    font-size: 0.88rem;
    max-width: 16rem;
}
.fsim-select:focus { outline: none; border-color: var(--sport-football, #43C18A); }

.fsim-chart-wrap { position: relative; height: 520px; }
.fsim-swipe-hint { display: none; }

/* ------------------------------------------------- simulated matchdays */
.fmx-controls {
    display: flex; align-items: center; gap: 0.6rem;
    flex-wrap: wrap; margin-bottom: 0.9rem;
}
.fmx-roundnav { display: flex; align-items: center; gap: 0.35rem; }
.fmx-nav-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    width: 2.1rem; height: 2.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.fmx-nav-btn:hover:not(:disabled) { border-color: var(--sport-football, #43C18A); }
.fmx-nav-btn:disabled { opacity: 0.35; cursor: default; }

.fmx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0.6rem;
}
.fmx-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    align-items: center;
}
.fmx-teams { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.fmx-side {
    display: grid;
    grid-template-columns: 1fr auto 0.8rem;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
}
.fmx-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmx-goals { font-weight: 700; font-variant-numeric: tabular-nums; }
.fmx-fav .fmx-name, .fmx-fav .fmx-goals { color: #fff; font-weight: 700; }
.fmx-dim { color: rgba(255, 255, 255, 0.55); }
.fmx-arrow { color: var(--sport-football, #43C18A); font-size: 0.7rem; }
.fmx-arrow-ghost { visibility: hidden; }

.fmx-meta {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 0.15rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 0.7rem;
    min-width: 7.4rem;
}
.fmx-tag {
    font-size: 0.62rem; letter-spacing: 0.08em;
    color: var(--sport-football, #43C18A);
    border: 1px solid rgba(67, 193, 138, 0.4);
    border-radius: 4px; padding: 0.05rem 0.3rem;
}
.fmx-date { font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); }
.fmx-scorep { font-size: 0.74rem; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }
.fmx-bar {
    display: flex; width: 6.6rem; height: 5px;
    border-radius: 3px; overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
.fmx-bar i { display: block; height: 100%; }
.fmx-bar-h { background: #43C18A; }
.fmx-bar-d { background: rgba(255, 255, 255, 0.35); }
.fmx-bar-a { background: #4F8DFF; }
.fmx-1x2 { font-size: 0.68rem; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.fmx-foot { color: rgba(255, 255, 255, 0.4); font-size: 0.75rem; margin: 0.8rem 0 0; }

/* -------------------------------------------------------------- mobile */
@media (max-width: 900px) {
    /* narrower than the grid: swipe horizontally, header stays sticky */
    .fsim-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .fsim-thead, .fsim-row {
        min-width: 560px;
        grid-template-columns:
            1.6rem minmax(8rem, 1.6fr) 2.6rem
            repeat(var(--fsim-bands-sm, 3), minmax(3.9rem, 1fr)) minmax(6.4rem, 1.2fr);
    }
    .fsim-hide-sm { display: none; }
    .fsim-col-team strong { font-size: 0.84rem; }
    .fsim-cell { font-size: 0.76rem; padding: 0.25rem 0.1rem; }
    .fsim-thead { font-size: 0.62rem; }
    .fsim-col-title .pct { min-width: 2.4rem; font-size: 0.82rem; }
}

@media (max-width: 640px) {
    /* the chart canvas is rendered WIDE at a fixed size (see template JS) —
       swipe it like the standings table */
    .fsim-chart-wrap {
        height: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .fsim-swipe-hint {
        display: block;
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.75rem;
        margin: 0.5rem 0 0;
    }
    .fsim-swipe-hint i { transform: rotate(90deg); display: inline-block; }
    .fsim-yaxis-overlay {
        position: sticky;
        left: 0;
        display: block;
        pointer-events: none;
    }
    .fmx-meta { min-width: 6.6rem; }
}

@media (max-width: 400px) {
    .fsim-sub { display: none; }
}