/* assets/css/pages/score-service.css — třísloupcová skořápka celého webu.
 *
 * Vlevo výběr soutěží, uprostřed obsah stránky, vpravo rekordy a čísla.
 * Boční sloupce jsou stejně široké (255 px), prostřední zabere zbytek.
 *
 * Jak se to zužuje:
 *
 *   ≤ 1200 px  pravý sloupec odchází pod obsah a rozloží se do mřížky panelů
 *   ≤  820 px  jeden sloupec. Levý se nekreslí vůbec — na mobilu ho zastupuje
 *              karta „Soutěže" ve spodní liště (/souteze). Na výsledkovém
 *              servisu (.score-page) mizí i pravý sloupec, takže zbývají jen
 *              zápasy; na kartě hráče nebo zápasu pravý sloupec zůstává,
 *              tam je to obsah, který jinde není.
 */

/* Navigace je fixní a vysoká 75 px (.nav-spacer v base.css). Odsazení shora
   dělá mezeru mezi hlavičkou a sloupci. */
/* Výsledkový servis se vědomě vymyká šířce .container z base.css (1200 px).
   Tři sloupce potřebují víc místa než zbytek webu, takže se obal na téhle
   stránce zneutralizuje a okraje stránky si servis určuje sám paddingem níž.
   Bez toho by se max-width nastavená tady vůbec neuplatnila — .container by
   ji uřízl dřív. */
.container:has(> .score-service) {
    max-width: none;
    padding: 0;
}

.score-service { max-width: 1600px; margin: 0 auto; padding: 24px 16px 40px; }

/* Boční sloupce jsou stejně široké, prostřední si drží šířku, jakou měl.
   Počítá se to takhle: obal má 1600 px a 16 px odsazení po stranách, tedy
   1568 px obsahu; dvě mezery po 20 px z toho ukrojí 40. Na sloupce zbývá
   1528 a prostřední jich měl 1528 − 190 − 320 = 1018. Na oba boční tedy
   zbývá 510, po 255 na každý.

   Kdyby se změnila max-width servisu, mezera nebo odsazení, musí se
   přepočítat i tohle číslo — jinak střed přeskočí. */
.ss-layout {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr) 255px;
    gap: 20px;
    align-items: start;
}

/* Každý sloupec má místo v mřížce určené natvrdo, aby nezáleželo na pořadí
   ve zdroji. Pravý sloupec totiž ve zdroji stojí PŘED prostředním.

   Je to kvůli tomu, jak prohlížeč stránku skládá, jak přitéká. Prostřední
   sloupec bývá dlouhý — karta Zápasy hráče s dlouhou kariérou má přes dvě
   stě zápasů a půl megabajtu HTML. Když pravý sloupec stál ve zdroji až za
   ním, existoval teprve po dočtení celého dokumentu: stránka se nejdřív
   vykreslila s prázdnou pravou třetinou a panel do ní pak naskočil.
   S opačným pořadím je pravý sloupec na svém místě od první porce dat.

   Čte se pořád zleva doprava, protože o poloze rozhoduje mřížka. Jediné,
   co se přehozením mění, je pořadí pro čtečku a tabulátor — pravý panel
   je v něm před prostředním sloupcem. Je to sedm odkazů, snesitelná daň
   za stránku, která pod rukama neposkakuje. */
.ss-competitions { grid-column: 1; grid-row: 1; }
.ss-matches      { grid-column: 2; grid-row: 1; }
.ss-highlights   { grid-column: 3; grid-row: 1; }

/* Nadpis stránky uvnitř panelu — adresář klubů, o projektu, 404. Dřív to
   byl .section-header s vodorovnou linkou; v panelu ji nepotřebuje, panel
   sám je ohraničení. */
.ss-page-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}

.ss-col-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin: 0 0 10px;
    font-weight: 700;
}

/* --- LEVÝ SLOUPEC: soutěže --- */
.ss-competitions {
    /* Sticky se drží 24 px pod navigací. Musí být níž, než kde sloupec stojí
       v klidu (75 + 24 = 99 px), jinak by ho sticky hned po načtení posunulo
       dolů a horní hrany sloupců by se rozešly. */
    position: sticky;
    top: 99px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.ss-level { margin-bottom: 16px; }
.ss-level:last-of-type { margin-bottom: 0; }

.ss-level-name {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.ss-comp {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.35;
}
.ss-comp:hover { background: var(--bg-surface); color: var(--text-main); }
.ss-comp.active {
    background: var(--accent-glow);
    color: var(--accent);
    font-weight: 600;
}

/* „Všechny soutěže" stojí nad seznamem, oddělené linkou — je to přepínač
   režimu, ne další soutěž. */
/* Přepínač režimu. Zaoblení dědí z .ss-comp dokola — oddělovací linka pod
   ním stojí samostatně v mezeře, takže netvaruje spodní rohy. */
.ss-comp-all {
    position: relative;
    margin-bottom: 21px;
    font-weight: 600;
}
.ss-comp-all::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -11px;
    border-bottom: 1px solid var(--border);
}

/* Přepínač ročníku stával pod seznamem soutěží v levém sloupci a pak ještě
   nad seznamem na stránce /souteze. Odešel do hlavičky soutěže — viz
   .ss-comp-season —, protože jinde přepínal jen to, které soutěže se vypíšou,
   což je odpověď na otázku, kterou si nikdo nekladl. Styly obou dřívějších
   podob (.ss-season-form, .ss-season-label, .ss-season-select) zanikly s ním. */

/* --- STŘED: soutěž v záložkách ---
   Střed není jedna velká karta, ale stoh panelů — stejných, jaké nese pravý
   sloupec. Každá sekce přehledu tak stojí opticky sama za sebe. */
.ss-matches {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ss-matches-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ss-comp-title { margin: 0; font-size: 1.05rem; }

/* Přepínač ročníku v hlavičce soutěže. Stojí vpravo vedle hvězdičky, takže
   se musí umět odsunout na kraj i když se hlavička zalomí. */
.ss-comp-season { margin-left: auto; }
.ss-comp-season-select {
    padding: 5px 28px 5px 10px;
    font-size: 0.78rem;
    background-position: right 8px center;
}
/* Soutěž, která je v databázi jen v jednom ročníku, přepínač nedostane —
   ročník se u ní jen napíše, ať je vidět, co se zrovna ukazuje. */
.ss-comp-season-static {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Jedna soutěž uvnitř bloku úrovně. Úroveň sdružuje víc soutěží (I. B třída
   má čtyři skupiny), takže každá potřebuje nadpis — jinak by řádky zápasů
   splynuly v jeden dlouhý seznam. */
.ss-comp-block { margin-top: 14px; }
.ss-comp-block:first-of-type { margin-top: 10px; }

.ss-comp-head {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--text-muted);
    text-decoration: none;
}
/* Nadpis vnořeného bloku. U soutěže je to odkaz do jejího pohledu, u výkopu
   jen čas — proto hover jen na odkazu. */
a.ss-comp-head:hover { color: var(--accent); }

/* Hlavička vnořeného bloku soutěže. Je to týž tvar jako hlavička úrovně,
   jen o stupeň drobnější — aby bylo poznat, co je uvnitř čeho. */
.ss-comp-head-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.ss-comp-head-row .ss-fold-ratio { font-size: 0.64rem; }
.ss-comp-head-row .ss-fold-toggle {
    width: var(--control-size-sm);
    height: var(--control-size-sm);
}
.ss-comp-head-row .ss-chevron { width: 13px; height: 13px; }

/* Odkaz na plnou záložku na konci sekce přehledu. */
.ss-panel-more {
    display: block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    text-decoration: none;
}
.ss-panel-more:hover { color: var(--accent); }

/* Hlavička středního panelu: přepínač pohledů na soutěž.
   Na úzkém displeji se pás posouvá vodorovně, aby zůstal na jednom řádku. */
.ss-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ss-tabs::-webkit-scrollbar { display: none; }

.ss-tab {
    flex: 1 1 0;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.ss-tab:hover { color: var(--text-main); background: var(--surface-1); }
.ss-tab.active {
    background: var(--accent-glow);
    color: var(--accent);
}

/* Přepínač týdnů v hlavičce přehledu — protějšek přepínače ročníku vlevo.
   Šipky po stranách, výběr uprostřed. */
/* Přepínač je jediný obsah hlavičky přehledu, roztáhne se proto přes celou
   šířku panelu: šipky po krajích, výběr mezi nimi. */
.ss-week-nav { display: flex; align-items: center; gap: 8px; width: 100%; }
.ss-week-form { margin: 0; flex: 1 1 auto; min-width: 0; }

.ss-week-select {
    width: 100%;
    padding: 7px 34px 7px 12px;
    font-size: 0.8rem;
    text-align: center;
    background-position: right 10px center;
}

/* Krok o týden. Tvar i velikost dědí z .ss-toggle-btn, obsahem je tatáž
   šipka jako u sbalování — jen otočená doleva, respektive doprava. Dřív to
   byly znaky „←" a „→", které s ostatními šipkami neměly společného nic. */
.ss-week-step { text-decoration: none; }
.ss-week-step:hover { color: var(--accent); border-color: var(--accent); }
.ss-week-step.is-disabled { opacity: 0.3; pointer-events: none; }

/* Probíhající týden se pozná barvou — v rozbalené nabídce i na zavřeném
   ovladači, když je zrovna vybraný. Ostatní položky dostávají barvu natvrdo:
   jinak by po ovladači zdědily akcent i ony a rozlišení by zmizelo. */
.ss-week-select.is-now { color: var(--accent); border-color: var(--accent); }
.ss-week-select option { color: var(--text-main); background: var(--bg-card); font-weight: 400; }
.ss-week-select option.ss-week-now { color: var(--accent); font-weight: 700; }

.ss-week-static { flex: 1 1 auto; text-align: center; font-size: 0.8rem; font-weight: 600; }
.ss-week-static.is-now { color: var(--accent); }

/* --- Ovladače pohledu na týden -------------------------------------------
   Druhý řádek hlavičky pod přepínačem týdnů: vypínač řazení podle času,
   filtr týmu a na konci sbalení všeho.

   Řádek se nezalamuje ani na telefonu. Ovladače po stranách mají pevnou
   šířku a filtr mezi nimi se zúží — tři ovladače pod sebou by na malé
   obrazovce odsunuly zápasy o kus níž, a to je právě to, co se sem chodí
   hledat. */
.ss-view-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* Řazení podle času je vypínač, ne volba ze dvou. Vypnutý je útlumový,
   zapnutý svítí akcentem — stejné rozlišení, jaké mají aktivní záložky. */
/* Řazení podle času je vypínač, ne volba ze dvou. Vypnutý je útlumový,
   zapnutý svítí akcentem — stejné rozlišení, jaké mají aktivní záložky.
   Ikona hodin z něj zmizela: popisek říká totéž a v řádku, kde se vedle
   krčí filtr, je každý pixel šířky znát. */
.ss-sort-toggle {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: var(--control-size);
    padding: 0 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.ss-sort-toggle:hover { color: var(--accent); border-color: var(--accent); }
.ss-sort-toggle.is-on {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

/* --- Ovladač sbalování ---------------------------------------------------
   Jeden tvar pro všechna tlačítka, která něco sbalují: čtvercové, orámované,
   s ikonou uvnitř. Liší se jen tím, co v nich je a jak jsou velká — v řádku
   ovladačů drží výšku ostatních, v hlavičce bloku jsou o kus menší, aby
   nepřerostly nadpis. */
.ss-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--control-size);
    height: var(--control-size);
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
}

.ss-fold-all { cursor: pointer; }
.ss-fold-all:hover { color: var(--accent); border-color: var(--accent); }

/* Dvojice šipek v tlačítku „sbalit vše". V tlačítku jsou obě sady, vidět má
   být vždycky jen jedna — rozbaleno šipky dovnitř (klik sbalí), sbaleno ven
   (klik rozbalí). Tvar tedy říká, co se stane, ne jaký je stav.
   Ta druhá sada se schovává tady; obecné pravidlo na všechna svg uvnitř
   .ss-toggle-btn tu stálo dřív a přebilo ji, takže se v tlačítku ukázaly
   všechny čtyři šipky naráz. */
.ss-fold-icon { display: none; }
.ss-fold-all[aria-expanded="true"]  .ss-fold-icon-in  { display: block; }
.ss-fold-all[aria-expanded="false"] .ss-fold-icon-out { display: block; }

/* Filtr zabere zbytek řádku a smrskne se, jak je potřeba — proto min-width
   na nule, bez ní by mu prohlížeč nechal vnitřní šířku pole a řádek by
   přetekl. */
.ss-team-filter { flex: 1 1 auto; min-width: 0; display: block; }
.ss-team-filter input {
    display: block;
    width: 100%;
    height: var(--control-size);
    padding: 0 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.78rem;
}
.ss-team-filter input:focus { outline: none; border-color: var(--accent); }
.ss-team-filter input::placeholder { color: var(--text-muted); }

/* Bez pásu karet je hlavička poslední v panelu a nemá co odsazovat. */
.ss-panel > .ss-matches-head:last-child { margin-bottom: 0; }

/* Hlavička skupiny zápasů: úroveň jako štítek, název soutěže jako proklik
   do jejího samostatného pohledu. */
.ss-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.ss-group-level {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent-glow);
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* Vedle štítku úrovně stával ještě její název — „Divize", „Krajský přebor",
   „I. A třída". Zanikl: soutěže se tak už nejmenují, takže to byl popisek,
   který mátl. Zbývá štítek se stupněm (.ss-group-level) a název konkrétní
   soutěže uvnitř bloku (.ss-comp-head). */

/* --- SBALOVACÍ BLOKY ---
   Chování nese <details>, tenhle blok jen převléká <summary> do hlavičky
   sekce: výchozí trojúhelníková značka pryč, místo ní vlastní šipka vpravo.
   Bez JS se stále dá sbalovat, JS jen pamatuje stav mezi načteními. */
.ss-fold-head {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Odstup od obsahu nese hlavička — nadpis uvnitř má margin vynulovaný,
       jinak by rozhodil zarovnání řádku. */
    margin-bottom: 10px;
    cursor: pointer;
    list-style: none;
}
.ss-fold-head::-webkit-details-marker { display: none; }
.ss-fold-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Nadpis uvnitř hlavičky si nese odsazení zvenčí, tady by rozhodil řádek. */
.ss-fold-title { margin: 0; }

.ss-fold-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Pravá strana hlavičky sbalovacího bloku: poměr odehraných a šipka. */
.ss-fold-actions {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Poměr odehraných zápasů ke všem v bloku. Stojí nalevo od šipky a jen
   u sbaleného bloku — nad rozbaleným seznamem je to vidět i bez čísla. */
.ss-fold-ratio {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}
.ss-fold[open] > .ss-fold-head .ss-fold-ratio { display: none; }

/* Šipka bloku. Není to <button>, jen značka uvnitř <summary>: klik na ni
   propadne na hlavičku a blok se sbalí i bez JS. */
.ss-fold-head:hover .ss-fold-toggle { color: var(--accent); border-color: var(--accent); }

/* --- Šipka ---------------------------------------------------------------
   Jeden tvar (_ss_chevron.php), ve výchozí poloze míří dolů. Kam má mířit
   jinde, řekne třída — otočení dělá CSS, ne druhá kresba. */
.ss-chevron { display: block; transition: transform 0.15s ease; }
.ss-chevron-left  { transform: rotate(90deg); }
.ss-chevron-right { transform: rotate(-90deg); }

/* U sbalovacího bloku šipka drží směr obsahu: dolů = sbaleno (klik rozbalí),
   nahoru = rozbaleno (klik sbalí). */
.ss-fold[open] > .ss-fold-head .ss-fold-chevron { transform: rotate(180deg); }

/* Šipku dřív kreslila hlavička sama přes ::after — z okrajů, otočená o 45°.
   Bloky v přehledu k ní přidávaly ještě pilulku a měly obě vedle sebe.
   Zbyla jedna podoba pro všechna sbalování, _ss_fold_toggle.php; ::after
   proto zaniklo. */
.ss-fold-head:hover .ss-fold-title { color: var(--text-main); }

/* Sbalená hlavička nemá pod sebou co oddělovat — mezera zmizí s obsahem,
   a u skupin v přehledu i linka, kterou se od něj oddělují. */
.ss-fold:not([open]) > .ss-fold-head { margin-bottom: 0; }
.ss-fold:not([open]) > .ss-group-head {
    padding-bottom: 0;
    border-bottom: none;
}

.ss-round-block { margin-bottom: 14px; }
.ss-round-block:last-child { margin-bottom: 0; }

.ss-round-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}






/* Tabulka sedí uvnitř karty, vlastní rámeček ani pozadí proto nechce —
   z .table-wrapper zůstává jen vodorovný scroll pro úzké displeje. */
/* --- PŘEPÍNAČE NAD TABULKOU ---
   Dvě skupinky pilulek vedle sebe: podoba tabulky a množina zápasů.
   Na úzkém displeji se zalomí pod sebe. */
.ss-table-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.ss-switch {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.ss-switch-item {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.ss-switch-item:hover { color: var(--text-main); }
.ss-switch-item.active {
    background: var(--accent-glow);
    color: var(--accent);
}

/* Během výměny bloku tabulky se obsah jen zjemní — bez posunu a bez
   probliknutí, výška zůstává, dokud nedorazí nová tabulka. */
.ss-table-block.is-swapping { opacity: 0.55; transition: opacity 0.12s ease; }

/* Řazení tabulek. Třídy swap-th / stat-active i atribut data-dir rozdává
   initSortableTable() v main.js; tady dostávají vzhled — klikací hlavička,
   aktivní sloupec v akcentu a šipka podle směru. Jména tříd jsou starší než
   dnešní řazení, zůstala po výměně celých tbody, kterou nahradilo. */
.ss-table thead th.swap-th { cursor: pointer; user-select: none; }
.ss-table thead th.swap-th:hover { color: var(--text-main); }
.ss-table thead th.stat-active { color: var(--accent); }
.ss-table thead th.stat-active::after {
    content: '▾';
    margin-left: 3px;
    font-size: 0.6rem;
}
.ss-table thead th.stat-active[data-dir="asc"]::after { content: '▴'; }

/* --- LISTINA STŘELCŮ ---
   Sloupce: pořadí, hráč, góly, penalty, vlastní. Klub zastupuje logo před
   jménem — na samostatný sloupec s názvem tu není místo. Číselné sloupce mají
   pevnou šířku, zbytek dostane jméno. */
.ss-scorers-table th.ss-th-goals { width: 62px; }
.ss-scorers-table th.ss-th-scorer { text-align: left; }

/* Pořadí je v listině střelců i trojmístné. Šířka sloupce musí pokrýt text
   VČETNĚ odsazení buňky (2× 8 px) — jinak text z content boxu přeteče doprava,
   pod logo, a trojciferná čísla sedí u loga blíž než dvojciferná. „128."
   měří 26,5 px, takže 26,5 + 16 = 43 px je minimum; 46 px nechává rezervu
   na náhradní písmo.

   Selektor je schválně o třídu delší: .ss-table th.ss-th-rank stojí v souboru
   níž a se stejnou specificitou by šířku přebil zpátky. */
.ss-table.ss-scorers-table th.ss-th-rank { width: 46px; }
.ss-scorers-table th.ss-th-rank,
.ss-scorers-table td:first-child { text-align: right; }

.ss-scorers-table .ss-td-scorer { text-align: left; overflow: hidden; }

.ss-scorer-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}
.ss-scorer-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ss-scorer-name:hover { color: var(--accent); }

/* Loga se nezmenšují — ustoupit má jméno, ne informace o klubu. */
.ss-scorers-table .ss-scorer-clubs {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* Rozbalení zbytku listiny — stejný tvar jako odkaz na konci sekce. */
.ss-more-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 8px 10px;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.ss-more-btn:hover { color: var(--accent); }

/* --- TABULKA HT/FT ---
   Devět sloupců navíc; ať se vejdou, jsou užší a bez zbytečného odsazení.
   Trojice se od sebe oddělí linkou, aby šlo poznat, kde končí „vedl
   o poločase" a začíná „remizoval". */
.ss-htft-table th,
.ss-htft-table td { padding-left: 4px; padding-right: 4px; }
.ss-htft-table th { font-size: 0.68rem; }

.ss-htft-table th:nth-child(4),
.ss-htft-table td:nth-child(4),
.ss-htft-table th:nth-child(7),
.ss-htft-table td:nth-child(7),
.ss-htft-table th:nth-child(10),
.ss-htft-table td:nth-child(10),
.ss-htft-table th:last-child,
.ss-htft-table td:last-child { border-left: 1px solid var(--border); }

.ss-table-wrapper {
    background: none;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}
/* Šířky sloupců nesmí viset na obsahu: v pohledu doma/venku jsou čísla
   o řád menší a auto-layout by je při přepnutí posunul do strany. Pevný
   layout rozdělí zbytek místa rovnoměrně bez ohledu na to, co v buňkách
   stojí — pevné šířky si drží jen pořadí, klub a forma. */
.ss-table { width: 100%; table-layout: fixed; }
.ss-table th { white-space: nowrap; }
.ss-table td { font-variant-numeric: tabular-nums; }
/* Totéž o číslo menší: dvojciferné pořadí měří 18,9 px, s odsazením tedy
   potřebuje 35 px. Při 28 px přetékalo do sloupce s logem — na střed
   zarovnané to nebylo vidět jako posun, ale okusovalo to sousední buňku. */
.ss-table th.ss-th-rank { width: 36px; }

/* Klub zastupuje jen logo — na deset sloupců by se název nevešel.
   Jméno ukáže tooltip odkazu (title v _ss_table.php). */
/* 34 px stačilo na logo, ale s pevným layoutem se do sloupce musí vejít
   i vlastní hlavička — auto-layout ho dřív rozšířil sám. */
.ss-table th.ss-th-club { width: 40px; }

/* --- Úvodní trojice sloupců sedí v obou podobách tabulky stejně ---
   Přepínač Tabulka / HT/FT vyměňuje jen prostředek tabulky, ale hlavičky
   „Klub" a „Z" se při tom posouvaly. Dvě různé příčiny:

   Klub — hlavička je širší (32 px) než sloupec bez odsazení (40 − 2×8),
   takže ji odsazení odtlačí. HT/FT má odsazení 4 px, standardní tabulka
   dědila 8 px z .compact-table, a text se lišil o 4 px. Sjednoceno na 4 px,
   tedy na podobu z HT/FT.

   Z — sloupec byl pružný a zbylé místo si v HT/FT dělí jedenáct sloupců,
   kdežto ve standardní tabulce sedm. Z tedy vycházelo pokaždé jinak široké
   (na 980px tabulce 82 px proti 100 px) a jeho číslo skákalo o deset pixelů.
   Nově má vlastní šířku v procentech: v obou podobách stejnou, a protože
   je relativní, drží se i při zúžení okna. Osm procent odpovídá tomu, co
   Z vycházelo v HT/FT. */
.ss-table th.ss-th-club,
.ss-table td.ss-td-club,
.ss-table th.ss-th-played,
.ss-table td.ss-td-played { padding-left: 4px; padding-right: 4px; }

.ss-table th.ss-th-played { width: 8%; }
.ss-table-club { display: inline-flex; }
.ss-table-club:hover { opacity: 0.75; }

.ss-diff.is-plus { color: var(--accent); }
.ss-diff.is-minus { color: var(--text-muted); }

/* Forma: pět čtverečků od nejstaršího zápasu vlevo po nejnovější vpravo. */
.ss-table th.ss-th-form { width: 118px; }
.ss-table td.ss-td-form { padding-left: 4px; padding-right: 4px; }
.ss-form { display: inline-flex; gap: 3px; }



/* Oba týmy zápasu, na jehož značku se najelo (podsvícení řídí main.js).
   Tón jde přes background-image, protože barvu pozadí u postupových
   a sestupových řádků drží !important a ta se má zachovat. */
.ss-table tr.is-linked td {
    background-image: linear-gradient(var(--accent-glow), var(--accent-glow));
}
.ss-table tr.is-linked .ss-table-club { opacity: 1; }

/* Legenda postupů a sestupů pod tabulkou. V užším sloupci než na stránce
   soutěže: logo napovídá, který řádek v tabulce klubu patří. */
.ss-table-legend { padding: 12px 14px; }
.ss-table-legend .table-legend-row { gap: 7px; font-size: 0.78rem; }
.ss-table-legend .table-legend-club { min-width: 0; flex: 1 1 auto; }
.ss-table-legend .table-legend-text { white-space: nowrap; }

/* Archiv: jeden řádek na ročník — sezóna, vítěz, počet bodů. */
/* --- SÍŇ SLÁVY: rekordy soutěže ---
   Karta na jeden rekord se čte stejně jako rekordy v pravém sloupci:
   hlavní je číslo, pod ním drobně čeho se týká, a teprve pak držitel. */
.ss-hof-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ss-hof-head .ss-col-title { margin-bottom: 0; }
.ss-hof-scope {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Nadpis kategorie (soutěžní / týmové / individuální). */
.ss-hof-cat {
    margin: 18px 0 8px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent);
    font-weight: 700;
}
.ss-hof-cat:first-of-type { margin-top: 14px; }

/* Auto-fit misto pevneho poctu sloupcu: pravy sloupec servisu je uzky,
   stredni siroky a karta se hodi do obou bez media query. */
.ss-hof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
}

.ss-hof-card {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 0;
}

/* Číslo a jednotka na jednom řádku, název rekordu pod nimi — tytéž poměry
   jako .ss-record-head v pravém sloupci. */
.ss-hof-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ss-hof-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ss-hof-unit { font-size: 0.7rem; color: var(--text-muted); }
.ss-hof-label {
    flex: 1 1 100%;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

/* Seznam držitelů. U jediného je to jeden řádek, při shodě se pod sebe
   naskládá víc — proto oddělovací linky mezi nimi. */
.ss-hof-holders {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 9px;
    min-width: 0;
}
.ss-hof-holders > * + * {
    border-top: 1px solid var(--border);
    padding-top: 6px;
}
/* Zápas si odsazení nese z .ss-record-detail; v kartě ho dělá až seznam. */
.ss-hof-holders .ss-record-detail { margin-top: 0; }

.ss-hof-holder {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
a.ss-hof-holder:hover .ss-hof-name { color: var(--accent); }

/* Držitel rekordu se zalomí, ale nikdy neuřízne: elipsa by z „FC Olympia
   Hradec Králové" udělala „FC Olympia Hradec Krá…", a to je zrovna ta
   informace, kvůli které se na kartu člověk dívá. Karta místo toho povyroste
   a mřížka srovná výšku celého řádku. */
.ss-hof-name {
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: break-word;
}

.ss-archive { list-style: none; margin: 0; padding: 0; }

.ss-archive-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-top: 1px solid var(--border);
}
.ss-archive-row:first-child { border-top: none; }
.ss-archive-row:hover { background: var(--bg-surface); border-radius: 6px; }

.ss-archive-season {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.ss-archive-winner { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ss-archive-club {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-main);
    font-weight: 600;
    text-decoration: none;
}
.ss-archive-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ss-archive-comp {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-archive-stats { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ss-archive-points { font-size: 0.8rem; font-weight: 800; color: var(--accent); }

/* --- PRAVÝ SLOUPEC: rekordy a zajímavosti --- */
.ss-highlights { display: flex; flex-direction: column; gap: 16px; }

.ss-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.ss-panel-note { font-size: 0.68rem; margin: 10px 0 0; line-height: 1.5; }

.ss-numbers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ss-number { display: flex; flex-direction: column; gap: 2px; }
.ss-number-value { font-size: 1.25rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.ss-number-label { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }

.ss-split-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; margin: 16px 0 5px; }
.ss-split { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--bg-surface); }
.ss-split-home { background: var(--accent); }
.ss-split-draw { background: var(--draw); }
.ss-split-away { background: var(--neutral); }
/* Popisky kopírují šířky úseků, takže každé procento stojí nad tím svým. */
.ss-split-legend { display: flex; font-size: 0.66rem; margin-top: 4px; }
.ss-split-legend span {
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 0;
}

/* Řádek žebříčku: logo klubu, jméno hráče, hodnota. Název klubu se
   v úzkém sloupci nevejde, nese ho tooltip loga. */
.ss-rank { list-style: none; margin: 0; padding: 0; }
.ss-rank li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
}
.ss-rank li:first-child { border-top: none; }
.ss-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-rank-value { font-weight: 800; color: var(--accent); }

.ss-rank-clubs { display: inline-flex; align-items: center; gap: 3px; }
.ss-club-badge { display: inline-flex; }
.ss-club-badge:hover { opacity: 0.75; }

.ss-cards { display: flex; gap: 4px; }
.ss-card-y, .ss-card-r {
    display: inline-block;
    min-width: 18px;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    color: var(--on-light);
}
.ss-card-y { background: var(--yc); }
.ss-card-r { background: var(--rc); color: var(--on-dark); }

/* Rekord: hlavní je číslo, zápas je až doplněk pod ním. */
.ss-record {
    padding: 12px 0;
    border-top: 1px solid var(--border);
    color: var(--text-main);
}
.ss-record:first-of-type { border-top: none; padding-top: 0; }

.ss-record-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ss-record-value { font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1; }
.ss-record-unit { font-size: 0.7rem; color: var(--text-muted); }
.ss-record-label {
    flex: 1 1 100%;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

/* Týmy pod sebou, logo vlevo, branky vpravo — stejné uspořádání jako
   řádek zápasu ve středním sloupci. */
.ss-record-detail {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    font-size: 0.75rem;
}

/* Na detail zápasu vede celý blok, ne jen datum — to byl terč o šířce
   deseti znaků. Odkaz je průhledná vrstva přes blok, odkazy na kluby leží
   nad ní; vnořovat <a> do <a> nejde, stejně to řeší řádek zápasu na úvodce
   (.ss-match-cover). */
.ss-record-detail.is-linked {
    position: relative;
    /* Odsazení do stran, aby podbarvení při najetí nelícovalo s textem. */
    margin-left: -6px;
    margin-right: -6px;
    padding: 4px 6px;
    border-radius: 7px;
}
.ss-record-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}
/* Nad vrstvou stojí jedině odkazy na kluby — na ty se dá kliknout zvlášť.
   Nadzvednout celý .ss-record-side by nešlo: je to celý řádek týmu a vrstva
   by pod ním přestala platit, takže by klik na branky ani na volné místo
   zápas neotevřel. Branky i datum proto zůstávají pod vrstvou a klik na ně
   vede na zápas, stejně jako kdekoli jinde v bloku. */
.ss-record-detail.is-linked .ss-record-club { position: relative; z-index: 1; }

.ss-record-detail.is-linked:hover { background: var(--bg-surface); }
.ss-record-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.ss-record-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ss-record-club {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    justify-self: start;
    color: var(--text-main);
    text-decoration: none;
}
.ss-record-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ss-record-goals {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Stejné rozlišení jako u zápasů ve středním sloupci — vítěz bílý, poražený
   i obě strany remízy šedé, a to včetně branek. Tučný řez tu ale nechceme:
   hlavní je číslo rekordu nad zápasem, samotný zápas je jen doplněk. */
.ss-record-side .ss-record-name,
.ss-record-side .ss-record-goals { color: var(--text-muted); }
.ss-record-side.is-winner .ss-record-name,
.ss-record-side.is-winner .ss-record-goals { color: var(--text-main); }

.ss-record-date {
    margin-top: 3px;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-decoration: none;
}

/* Řádek „zajímavosti": štítek s číslem nahoře, pod ním jméno a datum.
   Sdílí ho věkové rekordy, krajní góly, hattricky i nejdelší série — mají
   tentýž tvar, jen jiný obsah. */
.ss-facts { display: flex; flex-direction: column; }

.ss-fact {
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.ss-fact:first-child { border-top: none; padding-top: 0; }

.ss-fact-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.ss-fact-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}
.ss-fact-value {
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--accent);
}

.ss-fact-main {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-top: 4px;
    font-size: 0.8rem;
}
.ss-fact-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-fact-when {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-decoration: none;
}

.ss-timing { display: flex; flex-direction: column; gap: 6px; }
.ss-timing-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 32px; align-items: center; gap: 8px; }
.ss-timing-label { font-size: 0.68rem; color: var(--text-muted); }
.ss-timing-bar { height: 6px; background: var(--bg-surface); border-radius: 999px; overflow: hidden; }
.ss-timing-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ss-timing-value { font-size: 0.72rem; font-weight: 700; text-align: right; }

/* --- Zvýraznění řádků dvou týmů ---
   Podbarvené řádky obou týmů zápasu, ze kterého se na tabulku kouká. Třídu
   dává _ss_table.php podle $ssTableHighlight; nastavuje ho detail zápasu
   a AJAX fragment tabulky (table-fragment.php).

   Bydlí tady, u zbytku .ss-table, a ne v match.css: fragment se dotahuje
   i pod stránky, které match.css nenačítají, a pravidlo by pak nemělo kdo
   uplatnit. Hover tabulky je slabší než podbarvení, proto se pozadí vypisuje
   i pro něj — jinak by při přejetí zmizelo. */
.ss-table tr.ss-table-row-home,
.ss-table tr.ss-table-row-away,
.ss-table tr.ss-table-row-home:hover td,
.ss-table tr.ss-table-row-away:hover td {
    background: var(--accent-glow);
}
.ss-table tr.ss-table-row-home td:first-child,
.ss-table tr.ss-table-row-away td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}
.ss-table tr.ss-table-row-home td,
.ss-table tr.ss-table-row-away td {
    font-weight: 600;
}

/* --- RESPONZIVITA --- */
@media (max-width: 1200px) {
    /* Pravý sloupec se přesune pod zápasy a rozloží do mřížky panelů.
       Řádek se mu musí určit stejně jako sloupec — ve zdroji stojí před
       zápasy, takže by se sám umístil nad ně.

       Levý sloupec si drží touž šířku jako na širokém displeji: dřív se tu
       zužoval na 175 px, ale to bylo jen o osmnáct pixelů proti tehdejším
       190 a dnes by z toho byl skok o osmdesát. */
    .ss-layout { grid-template-columns: 255px minmax(0, 1fr); }
    .ss-matches { grid-column: 2; grid-row: 1; }
    .ss-highlights {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

}

@media (max-width: 820px) {
    /* Jeden sloupec. Levý sloupec se soutěžemi se nekreslí vůbec — na mobilu
       má vlastní kartu ve spodní liště (/souteze), takže by tu stál podruhé.
       Zbývá tedy obsah a pod ním panely. */
    .ss-layout { grid-template-columns: minmax(0, 1fr); }
    .ss-competitions { display: none; }
    .ss-matches      { grid-column: 1; grid-row: 1; }
    .ss-highlights   { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); }

    /* Výsledkový servis ukazuje na mobilu jen prostřední sloupec: zápasy
       týdne, respektive vybranou soutěž. Rekordy a zajímavosti jsou
       zpestření a na malé obrazovce by odsunuly to hlavní o obrazovku níž.
       Na kartě hráče nebo zápasu pravý sloupec zůstává — tam je to obsah,
       který jinde na webu není. */
    .score-page .ss-highlights { display: none; }
}

@media (max-width: 520px) {
    .ss-tab { flex: 0 0 auto; font-size: 0.74rem; padding: 6px 9px; }
    .ss-archive-row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 8px; }
    .ss-matches { gap: 12px; }
    .ss-panel { padding: 12px; }
    .ss-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Detail chyby v servisním režimu — běžný návštěvník ho nikdy neuvidí. */
.ss-debug {
    margin: 10px 0 0;
    padding: 10px;
    background: var(--bg-main);
    border: 1px dashed var(--danger);
    border-radius: 6px;
    color: var(--danger);
    font-size: 0.68rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- JEDNOTNÝ HOVER ---
   Všechny prokliky ve výsledkovém servisu se chovají stejně: text zežloutne
   do akcentní barvy, nic se nepodtrhává ani neposouvá. Pravidla stojí až
   na konci souboru, aby přebila barvy nastavené výš (třeba u vítězného
   týmu, kde má stejnou specificitu). */
.ss-rank-name:hover,
.ss-record-club:hover .ss-record-name,
.ss-record-side.is-winner .ss-record-club:hover .ss-record-name,
.ss-archive-club:hover .ss-archive-name,
.ss-archive-comp:hover,
.ss-fact-name:hover,
.ss-fact-when:hover,
.ss-comp-title a:hover {
    color: var(--accent);
    text-decoration: none;
}

/* Tabulka na úvodce dědí .full-stats-table efekty jen zčásti — posun textu
   do strany sem nepatří, řádky jsou úzké. */
.ss-table a:hover { transform: none; }


/* --- Proužek přihlášeného nad výsledkovým servisem ---------------------
   Přesunuto z pages/account.css — vykresluje ho index_top.php. */
.ss-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    margin-bottom: 22px;
}
.ss-strip-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ss-strip-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.ss-strip-teams { font-weight: 700; font-size: 0.92rem; }
.ss-strip-when { font-size: 0.75rem; color: var(--accent); }
.ss-strip-actions { display: flex; gap: 10px; flex-wrap: wrap; }