/* components/lineup.css — soupisky obou týmů: řádek hráče, číslo dresu,
 * ikony událostí (karty, střídání, góly), lavička a trenér.
 *
 * Vytaženo z pages/match.css.
 */

/* Layout detailu zápasu: sekce jsou rows přes obě strany, aby Absence
   a Trenér byly výškově zarovnané. */
.lineup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Mezeru mezi sloupci si berou i řádky hráčů (linky přes ni), proto
       proměnná. */
    --lineup-gap: 50px;
    column-gap: var(--lineup-gap);
    row-gap: 0;
    align-items: start;
    margin-top: 10px;
}

/* Titulek sekce zabírá obě sloupce – funguje jako oddělovač řádků v gridu.
   Pruh s podkladem jako datum na kartě Zápasy u soutěže (.ss-comp-matches
   .ss-list-head), ne drobný nápis nad linkou. */
.lineup-row-title {
    grid-column: 1 / -1;
    margin: 26px 0 4px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-head);
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 700;
}

.lineup-row-title:first-child {
    margin-top: 0;
}

.lineup-cell {
    min-width: 0;
}

/* Mezi hráči linky nejsou — sekce odděluje pruh nadpisu, řádky samotné
   drží pohromadě jen odstup. */
.lineup-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    transition: background 0.2s;
}

.lineup-row:hover {
    background: var(--bg-surface);
}

/* Řádek (a s ním podklad při najetí myší) sahá od kraje ke kraji panelu:
   u domácích přes odsazení panelu vlevo, u hostů vpravo, a obě přes
   půlku mezery mezi sloupci. --panel-pad nastavuje .ss-panel; mimo panel (trenérská
   sekce) je prázdné a řádek se nemění. */
.lineup-cell[data-side="home"] .lineup-row {
    margin-left: calc(-1 * var(--panel-pad, 0px));
    padding-left: var(--panel-pad, 0px);
    margin-right: calc(-0.5 * var(--lineup-gap));
    padding-right: calc(0.5 * var(--lineup-gap));
}
.lineup-cell[data-side="away"] .lineup-row {
    margin-right: calc(-1 * var(--panel-pad, 0px));
    padding-right: var(--panel-pad, 0px);
    margin-left: calc(-0.5 * var(--lineup-gap));
    padding-left: calc(0.5 * var(--lineup-gap));
}

.lineup-shirt {
    width: 28px;
    font-weight: 800;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.lineup-name {
    flex-grow: 1;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.lineup-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lineup-name:hover {
    color: var(--accent);
}

/* --- ZRCADLOVÝ LAYOUT HOSTUJÍCÍHO TÝMU ---
   Domácí (zleva-doprava):  [shirt] [name + badges] [events: ⚽ ŽK ČK ↓]
   Hosté   (zprava-doleva): [events: ↓ ČK ŽK ⚽] [badges + name] [shirt]
   Dosaženo přes flex-direction: row-reverse na .lineup-row, .lineup-events i .lineup-name. */
.lineup-cell[data-side="away"] .lineup-row     { flex-direction: row-reverse; }
.lineup-cell[data-side="away"] .lineup-events  { flex-direction: row-reverse; }
.lineup-cell[data-side="away"] .lineup-name    { flex-direction: row-reverse; }
.lineup-cell[data-side="away"] .lineup-name-text { text-align: right; }
.lineup-cell[data-side="away"] .lineup-coach-card { text-align: right; }
.lineup-cell[data-side="away"] .lineup-empty      { text-align: right; }

/* Hodnocení hráče 0–10 (PlayerRatingService). Stojí poslední v řádku, tedy
   u středu mřížky — u domácích vpravo, u hostů díky row-reverse vlevo.
   Pevná šířka, ať čísla v obou sloupcích stojí pod sebou; barvu dává
   pásmo, stejné stupně jako na fotmob.com: od 8 výborný, od 7 dobrý,
   od 6 průměr, od 5 slabší, pod 5 špatný. */
.lineup-rating {
    flex-shrink: 0;
    min-width: 34px;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.3;
    cursor: help;
}
.lineup-rating.is-top  { background: var(--accent);     color: var(--on-light); }
.lineup-rating.is-good { background: var(--win-bright); color: var(--on-light); }
.lineup-rating.is-ok   { background: var(--bg-head);    color: var(--text-main); }
.lineup-rating.is-low  { background: var(--yc-dim);     color: var(--on-light); }
.lineup-rating.is-poor { background: var(--loss);       color: var(--on-dark); }

/* Hodnoty přepínače „Ukázat": věk, národnost, čísla za ročník. Řádek je
   nese všechny najednou, vidět je ta, kterou vybral data-lineup-show na
   mřížce; s výběrem se schovají události zápasu, ať vedle jména stojí
   jedna věc. Přepíná main.js, bez JS zůstává výchozí pohled. */
.lineup-facts { display: none; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineup-fact { display: none; }
[data-lineup-show="vek"]       .lineup-fact[data-fact="vek"],
[data-lineup-show="narodnost"] .lineup-fact[data-fact="narodnost"],
[data-lineup-show="zapasy"]    .lineup-fact[data-fact="zapasy"],
[data-lineup-show="minuty"]    .lineup-fact[data-fact="minuty"],
[data-lineup-show="goly"]      .lineup-fact[data-fact="goly"],
[data-lineup-show="karty"]     .lineup-fact[data-fact="karty"] { display: inline-flex; align-items: center; }
[data-lineup-show]:not([data-lineup-show=""]) .lineup-facts  { display: inline-flex; }
[data-lineup-show]:not([data-lineup-show=""]) .lineup-events,
[data-lineup-show]:not([data-lineup-show=""]) .lineup-rating { display: none; }

/* --- Hlavička soupisky: logo týmu a číslo za celou soupisku ---
   Bez výběru hodnocení týmu, s výběrem souhrn k vybranému údaji (věk,
   vytížení, rozdíl skóre, karty). Národnost souhrn nemá, zůstane logo. */
.lineup-team {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-bottom: 18px;
}
.lineup-team[data-side="away"] { flex-direction: row-reverse; }
.lineup-team-club { display: inline-flex; flex: none; }
.lineup-team-club:hover { opacity: 0.8; }
.lineup-team .club-logo { width: 44px; height: 44px; }
.lineup-team-fact { display: none; flex-direction: column; gap: 3px; }
.lineup-team[data-side="away"] .lineup-team-fact { align-items: flex-end; text-align: right; }
.lineup-team[data-side="home"] .lineup-team-fact { align-items: flex-start; }
[data-lineup-show=""]          .lineup-team-fact[data-fact="hodnoceni"],
[data-lineup-show="vek"]       .lineup-team-fact[data-fact="vek"],
[data-lineup-show="zapasy"]    .lineup-team-fact[data-fact="zapasy"],
[data-lineup-show="minuty"]    .lineup-team-fact[data-fact="minuty"],
[data-lineup-show="goly"]      .lineup-team-fact[data-fact="goly"],
[data-lineup-show="karty"]     .lineup-team-fact[data-fact="karty"],
[data-lineup-show="narodnost"] .lineup-team-fact[data-fact="narodnost"] { display: inline-flex; }
.lineup-team-value {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.lineup-team-rating { font-size: 0.95rem; min-width: 42px; }
.lineup-team-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* --- Pruhy pod jmény: díl člověka na zápasech, minutách, gólech
   a kartách týmu v soutěži (_lineup_bars.php) ---
   Tenký pás na řádku se jménem, vertikálně vycentrovaný s ním. Jde od
   kraje ke středu, ale nezačíná u kraje: stopa (.lineup-bar-track, celá
   dráha pro sto procent) začíná až ve 40 % řádku, zhruba za jménem,
   a končí 72 px před vnitřním okrajem, kde stojí číslo z přepínače.
   Pruh v ní má šířku --pct procent, končí půlkruhem a na konci nese
   procenta. U karet jsou pásy dva, žlutý nad červeným.

   Odstup je kvůli procentům: pruh začínající u kraje končil u polovičních
   podílů přímo ve jméně a číslo se s ním překrývalo. Jméno, které je
   delší než 40 % řádku, do začátku stopy zajede — proto je začátek pruhu
   dlouho průhledný a sílí až ke konci.

   Leží pod obsahem řádku: řádek zakládá vlastní vrstvení (isolation),
   stopa má z-index −1, takže je nad pozadím řádku, ale pod textem.

   Barva podle pásma (data-tier, viz LineupSummaryService::tier): pod 25 %,
   pod 50, pod 75, víc. Karty mají barvu karty. */
.lineup-row { position: relative; isolation: isolate; }
.lineup-bar-track {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(60% - 72px);
    height: 14px;
    z-index: -1;
    pointer-events: none;
}
.lineup-cell[data-side="home"] .lineup-bar-track { left: 40%; }
.lineup-cell[data-side="away"] .lineup-bar-track { right: 40%; }
.lineup-bar-track.is-pair {
    height: 24px;
    flex-direction: column;
    justify-content: space-between;
}
.lineup-cell[data-side="away"] .lineup-bar-track.is-pair { align-items: flex-end; }
[data-lineup-show="zapasy"] .lineup-bar-track[data-fact="zapasy"],
[data-lineup-show="minuty"] .lineup-bar-track[data-fact="minuty"],
[data-lineup-show="goly"]   .lineup-bar-track[data-fact="goly"] { display: block; }
[data-lineup-show="karty"]  .lineup-bar-track[data-fact="karty"] { display: flex; }

.lineup-bar {
    --bar: var(--neutral);
    position: relative;
    display: block;
    width: calc(var(--pct) * 1%);
    height: 100%;
    background: linear-gradient(to right,
        transparent,
        color-mix(in srgb, var(--bar) 6%, transparent) 40%,
        color-mix(in srgb, var(--bar) 40%, transparent) 75%,
        color-mix(in srgb, var(--bar) 90%, transparent));
    border-radius: 0 999px 999px 0;
}
.lineup-cell[data-side="away"] .lineup-bar {
    margin-left: auto;
    background: linear-gradient(to left,
        transparent,
        color-mix(in srgb, var(--bar) 6%, transparent) 40%,
        color-mix(in srgb, var(--bar) 40%, transparent) 75%,
        color-mix(in srgb, var(--bar) 90%, transparent));
    border-radius: 999px 0 0 999px;
}
.lineup-bar-track.is-pair .lineup-bar { height: 11px; }
.lineup-bar.is-empty { visibility: hidden; }

.lineup-bar[data-tier="1"] { --bar: var(--neutral); }
.lineup-bar[data-tier="2"] { --bar: var(--draw); }
.lineup-bar[data-tier="3"] { --bar: var(--win-bright); }
.lineup-bar[data-tier="4"] { --bar: var(--accent); }
.lineup-bar.is-yc { --bar: var(--yc); }
.lineup-bar.is-rc { --bar: var(--rc); }

/* Procenta na konci pruhu, uvnitř půlkruhu. Tmavé písmo na jasných
   pásmech a žluté kartě, bílé na šedém a červeném. */
.lineup-bar-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--on-light);
}
.lineup-bar-track.is-pair .lineup-bar-label { font-size: 0.56rem; }
.lineup-bar[data-tier="1"] .lineup-bar-label,
.lineup-bar.is-rc .lineup-bar-label { color: var(--on-dark); }
.lineup-cell[data-side="home"] .lineup-bar-label { right: 7px; }
.lineup-cell[data-side="away"] .lineup-bar-label { left: 7px; }
/* Krátký pruh: číslo se do něj nevejde, stojí hned za koncem. */
.lineup-bar.is-short .lineup-bar-label { color: var(--text-muted); }
.lineup-cell[data-side="home"] .lineup-bar.is-short .lineup-bar-label { right: auto; left: calc(100% + 5px); }
.lineup-cell[data-side="away"] .lineup-bar.is-short .lineup-bar-label { left: auto; right: calc(100% + 5px); }

/* Karty: žluté žlutě, červené červeně, mezi nimi svislítko. */
.lineup-fact-yc  { color: var(--yc); }
.lineup-fact-rc  { color: var(--rc); }
.lineup-fact-sep { margin: 0 5px; color: var(--text-muted); font-weight: 400; }

/* Vlajka v kroužku. Obrázek vyplní kruh a ořízne se — vlajky mají poměr
   3:2 a v kroužku to nevadí. Bez souboru stojí v kroužku kód země. */
.flag-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 16 px: tolik má řádek soupisky na výšku textu, větší kroužek by ho
       roztáhl a řádky s vlajkou by byly vyšší než ostatní. */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    vertical-align: middle;
    flex: none;
}
.flag-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flag-circle-code, .flag-circle-empty { font-size: 0.42rem; font-weight: 700; letter-spacing: 0; color: var(--text-muted); }

.lineup-cap {
    color: var(--accent);
    font-weight: 800;
    font-size: 0.8rem;
}

/* Pozice u hráče (zatím jen „BR" = brankář). Vizuálně i pozičně se chová
   stejně jako „(C)" — inline label uvnitř .lineup-name, jen jiná barva.
   Schema nemá pole Position → identifikace běží přes heuristiku
   „první v shirt-asc pořadí" v šabloně. */
.lineup-pos-badge {
    color: var(--yc-bright);
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- IKONY UDÁLOSTÍ V SESTAVĚ --- */
.lineup-events {
    display: flex;
    align-items: center;
    gap: 8px;
}

.yc-icon { width: 10px; height: 14px; background: var(--yc); border-radius: 2px; box-shadow: 0 0 5px var(--yc-glow); }
.rc-icon { width: 10px; height: 14px; background: var(--rc); border-radius: 2px; box-shadow: 0 0 5px var(--rc-glow); }

/* Dvojitá žlutá karta = dva žluté obdélníky překryté pod úhlem.
   Druhá karta lehce posunutá vpravo nahoru, takže tvoří „dvojici". */
.yc-icon-double {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 16px;
    height: 16px;
}

.yc-icon-double .yc-icon {
    position: absolute;
    top: 1px;
    left: 0;
    box-shadow: 0 0 4px var(--scrim);
}

.yc-icon-double .yc-icon:first-child {
    transform: rotate(-8deg);
    z-index: 1;
}

.yc-icon-double .yc-icon:last-child {
    top: 0;
    left: 4px;
    transform: rotate(8deg);
    z-index: 2;
}

.sub-in { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--win); }
.sub-out { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--rc); }

/* Ikona gólu/ů u hráče v soupisce – stejná emoji jako v časové ose */
.lineup-goal {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.9rem;
    line-height: 1;
}

.lineup-goal-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.lineup-goal-count {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-muted);
}

.lineup-goal-own {
    opacity: 0.75;
    filter: grayscale(0.4);
}

.lineup-goal-own .lineup-goal-count {
    color: var(--rc-bright);
}

.lineup-empty {
    margin: 4px 0 12px;
    font-size: 0.85rem;
    font-style: italic;
}

/* Trenér jako poslední karta uvnitř soupisky — jen jméno, bez labelu a podbarvení.
   Drobný padding aby řádek držel sjednocenou výšku se sousedními .lineup-row. */
.lineup-coach-card {
    padding: 8px 0;
}

.lineup-coach-card .lineup-coach-name {
    color: var(--text-main);
    font-weight: 600;
}

/* --- RESPONZIVITA --- */
/* Kopie nadpisů sekcí pro hosty — vidět jen v jednom sloupci, viz níž. */
.lineup-row-title-away { display: none; }

/* Na úzkém displeji jeden sloupec a soupisky za sebou: nejdřív celý tým
   domácích (logo se souhrnem, sestava, náhradníci, trenér), pak celý tým
   hostů. HTML jde po sekcích přes obě strany (tak ho potřebuje široká
   mřížka), pořadí tady proto přeskládá order. Hosté mají vlastní kopie
   nadpisů sekcí (.lineup-row-title-away), jinak by pod logem hostů stála
   sestava bez nadpisu. */
@media (max-width: 992px) {
    .lineup-grid      { grid-template-columns: 1fr; --lineup-gap: 0px; }
    .lineup-row-title { margin-top: 24px; }
    /* Jeden sloupec: řádek od kraje ke kraji na obou stranách. */
    .lineup-cell[data-side] .lineup-row {
        margin-left: calc(-1 * var(--panel-pad, 0px));
        margin-right: calc(-1 * var(--panel-pad, 0px));
        padding-left: var(--panel-pad, 0px);
        padding-right: var(--panel-pad, 0px);
    }
    .lineup-row-title-away { display: block; }

    .lineup-grid > [data-section="team"][data-side="home"]  { order: 10; }
    .lineup-grid > h4[data-section="start"]:not([data-side]) { order: 11; }
    .lineup-grid > .lineup-cell[data-section="start"][data-side="home"] { order: 12; }
    .lineup-grid > h4[data-section="bench"]:not([data-side]) { order: 13; }
    .lineup-grid > .lineup-cell[data-section="bench"][data-side="home"] { order: 14; }
    .lineup-grid > h4[data-section="coach"]:not([data-side]) { order: 15; }
    .lineup-grid > .lineup-cell[data-section="coach"][data-side="home"] { order: 16; }

    .lineup-grid > [data-section="team"][data-side="away"]  { order: 20; }
    .lineup-grid > h4[data-section="start"][data-side="away"] { order: 21; }
    .lineup-grid > .lineup-cell[data-section="start"][data-side="away"] { order: 22; }
    .lineup-grid > h4[data-section="bench"][data-side="away"] { order: 23; }
    .lineup-grid > .lineup-cell[data-section="bench"][data-side="away"] { order: 24; }
    .lineup-grid > h4[data-section="coach"][data-side="away"] { order: 25; }
    .lineup-grid > .lineup-cell[data-section="coach"][data-side="away"] { order: 26; }

    /* Předěl mezi domácími a hosty. */
    .lineup-grid > .lineup-team[data-side="away"] {
        margin-top: 40px;
    }
}