/* HERO — sjednoceno do .page-hero v css/style.css */

/* ==================================================
   Sekce + stavy (loading/empty/error)
================================================== */
.members-section {
    min-height: 55vh;
}

.members-status {
    text-align: center;
    color: #6b7889;
    font-size: 0.95rem;
    padding: 32px 12px;
    margin: 0;
}

/* Statická hláška „Načítám…"/chyba pod gridem — vidět jen při loading/error,
   jinak (ready/empty) status hlásí přímo obsah gridu (viz renderList v JS). */
.members-section > .members-status { display: none; }
.members-section[data-state="loading"] > .members-status,
.members-section[data-state="error"] > .members-status { display: block; }

.members-section[data-state="loading"] .members-toolbar,
.members-section[data-state="error"] .members-toolbar,
.members-section[data-state="loading"] .members-card,
.members-section[data-state="error"] .members-card {
    display: none;
}

/* ==================================================
   Toolbar — hledání + filtr
================================================== */
.members-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 18px;
}

.members-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
}

.members-search-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: #9aa8bc;
    pointer-events: none;
}

.members-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--border-light, #e2ecf8);
    border-radius: var(--radius-md, 12px);
    background: #fff;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--text-color);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.members-search input::placeholder { color: #9aa8bc; }
.members-search input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 82, 194, 0.12);
}

/* b.679: filtry jsou schované za tímto tlačítkem, dokud si o ně uživatel
   neřekne — na první pohled tak stránka působí čistěji (jen hledání). */
.members-filter-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 10px 16px;
    border: 1px solid var(--border-light, #e2ecf8);
    border-radius: var(--radius-md, 12px);
    background: #fff;
    color: #55647a;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.members-filter-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.members-filter-toggle:hover {
    border-color: #c5d6ee;
    color: var(--text-color);
}
.members-filter-toggle.is-open {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.members-filter-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.members-filter-toggle-badge {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}
.members-filter-toggle.is-open .members-filter-toggle-badge { background: #fff; }

.members-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 18px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid var(--border-light, #e2ecf8);
    border-radius: var(--radius-md, 12px);
}
/* Autorská class má stejnou/vyšší prioritu než UA styl [hidden] { display:none } —
   bez tohoto pravidla by se panel po skrytí atributem hidden pořád zobrazoval. */
.members-filters[hidden] { display: none; }

.members-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.members-filter-btn {
    padding: 9px 15px;
    border: 1px solid var(--border-light, #e2ecf8);
    border-radius: 999px;
    background: #fff;
    color: #55647a;
    font-size: 0.84rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.members-filter-btn:hover {
    border-color: #c5d6ee;
    color: var(--text-color);
}
.members-filter-btn.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.members-filter-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ==================================================
   Karta seznamu — b.683 kompletní vizuální přepis.

   Dřív byl seznam jen holé řádky přímo na bílém pozadí stránky (žádné
   ohraničení, žádná hlavička) — vedle zbytku webu (soupiska týmu,
   profil hráče), který stojí na "Livesport" vzoru (barevná hlavička
   karty + count pilulka + bílá karta s jemným stínem, viz roster-list-*
   v tymy.css a player-hero v clen.css), to působilo o řád strožeji.
   .members-card sjednocuje seznam se stejným vzorem.
================================================== */
.members-card {
    background: #fff;
    border: 1px solid var(--border-light, #e2ecf8);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-soft, 0 4px 16px rgba(0, 0, 0, 0.06));
}

/* b.686: gradient je zpátky (stejný jako Soupiska/profil hráče — konzistentní
   vzor napříč webem, viz .roster-list-heading v tymy.css). Skutečný problém
   nebyl gradient samotný, ale to, že .members-card-title (je to <h2>) sám
   barvu nedeklaroval, takže spadal na globální „h2 { color: var(--primary-color) }"
   ze style.css — tmavě modrý text na tmavě modrém gradientu, na spodní
   hraně gradientu prakticky stejný odstín → nečitelné. Oprava: titulek
   dostává vlastní explicitní bílou, aby ho globální h2 pravidlo nepřebilo. */
.members-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    background: linear-gradient(180deg, var(--primary-dark, #003d91) 0%, var(--primary-color, #0052c2) 100%);
    color: #fff;
    /* b.701: dřív ořízlo rohy .members-card (overflow:hidden na kartě),
       ale to zároveň rozbíjelo position:sticky na .members-list-head níže
       (overflow != visible na předkovi = sticky element se nikdy nezavěsí,
       viz feedback_ancestor_overflow_breaks_sticky memory). Karta má teď
       overflow:visible a zaoblení horních rohů si nese hlavička sama. */
    border-top-left-radius: var(--radius-lg, 16px);
    border-top-right-radius: var(--radius-lg, 16px);
    overflow: hidden;
}
.members-card-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
}
.members-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}
/* Stejný důvod jako u .members-filters[hidden] výše — autorská třída se
   stejnou specificitou jako UA [hidden] potřebuje výslovné přebití. */
.members-card-count[hidden] { display: none; }

/* ==================================================
   Řádkový seznam — jeden člověk na jeden řádek (b.662)

   b.680: přepsáno z flexboxu na CSS grid se sdíleným sloupcovým rastrem
   mezi .members-list-head (jen ≥768px) a .member-row — sloupce tak
   doslova drží zarovnání napříč všemi řádky (ne jen opticky přes gap).
   Rastr se rozšiřuje po krocích (mobil → tablet → desktop), ne skrýváním
   buněk v pevném 5sloupcovém gridu (to by nechalo prázdnou mezeru).
================================================== */
.members-list {
    display: flex;
    flex-direction: column;
    /* b.701: stejný důvod jako u .members-card-head výše — spodní rohy si
       ořízne seznam sám (kvůli hover pozadí na posledním řádku), karta
       samotná zůstává bez overflow:hidden, ať funguje sticky hlavička. */
    border-bottom-left-radius: var(--radius-lg, 16px);
    border-bottom-right-radius: var(--radius-lg, 16px);
    overflow: hidden;
}

.members-list-head {
    display: none;
    column-gap: 10px;
    /* Stejný horizontální padding jako .member-row (viz níže) — jsou to
       dvě samostatné grid instance se sdíleným sloupcovým rastrem, takže
       se musí i stejně odsazovat, jinak by se sloupce vizuálně rozjely. */
    padding: 9px 26px 9px 8px;
    background: #f7faff;
    border-bottom: 1px solid #eef3fa;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7a90;
}

.member-row {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
    /* Pravý padding je schválně stejný u klikatelných i neklikatelných
       řádků (šipka „›" je jen vizuální navíc uvnitř téhle rezervy) — jinak
       by se sloupec Stav mezi řádky posouval podle toho, jestli má profil. */
    padding: 9px 26px 9px 8px;
    border-bottom: 1px solid var(--border-light, #e2ecf8);
    text-decoration: none;
    color: inherit;
    transition: background 0.14s ease;
}
.member-row:last-child { border-bottom: none; }

a.member-row.is-link {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    a.member-row.is-link:hover { background: #f7faff; }
}
a.member-row.is-link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* Šipka signalizující proklik — stejná konvence jako .roster-card/
   .roster-list-row jinde na webu. Jen u řádků s profilem (is-link). */
.member-row.is-link::after {
    content: "\203A";
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    line-height: 1;
    color: #b6c3d6;
    transition: color 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
@media (hover: hover) {
    a.member-row.is-link:hover::after {
        color: var(--primary-color);
        transform: translateY(-50%) translateX(2px);
    }
}

.member-row-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    overflow: hidden;
    /* Barevný přízvuk podle typu osoby (hráč/realizák/ostatní) — viz
       varianty níže; tohle je jen neutrální fallback. */
    background: #eef2f5;
    color: #55647a;
    box-shadow: inset 0 0 0 2px rgba(85, 100, 122, 0.08);
}
.member-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.member-row-avatar--player {
    background: linear-gradient(140deg, #ebf2fa 0%, #d8e6f7 100%);
    color: var(--primary-color);
    box-shadow: inset 0 0 0 2px rgba(0, 82, 194, 0.08);
}
.member-row-avatar--staff {
    background: linear-gradient(140deg, #f3e8ff 0%, #e4d3fb 100%);
    color: #6d28d9;
    box-shadow: inset 0 0 0 2px rgba(109, 40, 217, 0.08);
}

/* Historičtí členové realizačního týmu bez dochovaného jména (avatar "?"/"??"
   v datech) — zůstávají v seznamu kvůli úplnosti historie, ale vizuálně
   ustupují do pozadí (kurzíva, tlumená barva, bez šipky, žádné hráčské
   zvýraznění), ať nepůsobí jako běžný profil. Řadí se i až za ostatní
   v rámci filtrovaného výběru (viz renderList v JS). */
.member-row--unknown .member-row-name {
    font-style: italic;
    font-weight: 600;
    color: #6b7a90;
}
.member-row--unknown .member-row-avatar {
    background: #eef1f4;
    color: #9aa5b4;
    box-shadow: none;
}

.member-row-name {
    grid-column: 2;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Ročník a role jsou od mobilu skryté (bez sloupce v gridu) — přibývají
   krok za krokem, jak je na řádku víc místa (viz media queries níže). */
.member-row-year,
.member-row-role,
.members-list-head .col-year,
.members-list-head .col-role {
    display: none;
}

.member-row-year {
    font-size: 0.76rem;
    color: #6b7a90;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.member-row-role {
    font-size: 0.78rem;
    color: #6b7a90;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-status-badge {
    grid-column: 3;
    display: inline-flex;
    align-items: center;
    justify-self: end;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.st-active   { background: #d1fae5; color: #065f46; }
.st-loaned   { background: #fef3c7; color: #92400e; }
.st-left     { background: #f3f4f6; color: #6b7280; }
.st-ended    { background: #f3f4f6; color: #6b7280; }
.st-inactive { background: #f3f4f6; color: #9aa5b4; }

/* Ročník přibude jako vlastní zarovnaný sloupec od 480px.
   b.686: jméno už nedostává celý zbytek řádku (minmax(0,1fr) ho roztahoval
   přes celou kartu, takže mezi krátkým jménem a Ročníkem/Stavem vznikala
   velká prázdná mezera) — sloupec je teď omezený a zbylá volná šířka
   zůstává až za posledním sloupcem, ne uprostřed řádku. */
@media (min-width: 480px) {
    .member-row,
    .members-list-head {
        grid-template-columns: 34px minmax(0, 230px) 52px auto;
    }
    .member-row-year,
    .members-list-head .col-year {
        display: block;
        text-align: center;
    }
    .member-row-year { grid-column: 3; }
    .member-status-badge,
    .members-list-head .col-status { grid-column: 4; }
}

/* Role realizačního týmu (např. „Trenér") + celý sloupcový header seznamu
   (Jméno/Ročník/Role/Stav) se ukáže od tabletové šířky — je to bod, kde
   „tabulkové" zarovnání sloupců dává smysl (viz b.680 zadání). */
@media (min-width: 768px) {
    .member-row,
    .members-list-head {
        grid-template-columns: 40px minmax(0, 280px) 64px 130px 110px;
        /* b.686: Ročník a Role si na sebe se sdíleným 10px rastrem sedaly
           moc blízko (ročník byl navíc doprava zarovnaný, takže vizuálně
           koukal skoro do Role) — o něco větší mezera jen od tohoto bodu. */
        column-gap: 18px;
    }
    .members-list-head {
        display: grid;
        /* b.701: hlavička se přilepí pod fixní hlavičku webu při scrollu
           dlouhým seznamem — stejná konvence jako .match-subnav v report.css
           (top = reálná výška fixed headeru na ≥768px, viz style.css).
           Fungovalo to až po přesunu overflow:hidden z .members-card na
           .members-card-head/.members-list (viz výše) — overflow != visible
           na PŘEDKOVI sticky prvku ho jinak zablokuje úplně. */
        position: sticky;
        top: 78px;
        z-index: 2;
    }
    .member-row-role,
    .members-list-head .col-role {
        display: block;
    }
    .member-row-role { grid-column: 4; }
    .member-status-badge,
    .members-list-head .col-status {
        grid-column: 5;
        justify-self: start;
    }
}

/* b.701: hlavička seznamu je klikatelná (řazení podle sloupce) — reset
   výchozího vzhledu tlačítka, ať vypadá stejně jako předchozí <span>, jen
   s ukazatelem a interaktivními stavy navíc. */
.members-sort-btn {
    all: unset;
    display: block;
    width: 100%;
    text-align: inherit;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    border-radius: 4px;
}
.members-sort-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
@media (hover: hover) {
    .members-sort-btn:hover { color: var(--primary-color); }
}
.members-sort-btn.is-active { color: var(--primary-color); }
.members-sort-arrow {
    display: inline-block;
    margin-left: 3px;
    font-size: 0.62rem;
}

/* ==================================================
   Mobil — komprese
================================================== */
@media (max-width: 640px) {
    .members-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    /* flex-basis 260px z .members-search je myšlená jako ŠÍŘKA (row layout);
       ve sloupcovém layoutu by ji flexbox použil jako VÝŠKU a nafoukl box
       na 260px — proto se tu resetuje na auto (velikost podle obsahu). */
    .members-search { flex: 1 1 auto; }
    .members-filter-toggle { justify-content: center; }
    .members-filters { padding: 10px; }
    .members-filter { justify-content: center; }
    /* Pod 640px se ročník zase schová — grid se proto musí vrátit na 3
       sloupce (bez roku), jinak by po skrytí .member-row-year zůstala
       prázdná mezera po 52px sloupci, který ve 4sloupcovém rastru z
       min-width:480px pravidla dál zabírá místo. */
    .member-row {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        column-gap: 9px;
        padding: 8px 20px 8px 6px;
    }
    .member-row-avatar { width: 30px; height: 30px; font-size: 0.74rem; }
    .member-row-year { display: none; }
    .member-status-badge { grid-column: 3; }
    .member-row.is-link::after { right: 6px; font-size: 1.15rem; }
}

/* b.708: na nejužších displejích (~320px) se dlouhá jména ořezávala
   trojtečkou — menší písmo a povolené zalomení na druhý řádek místo ořezu. */
@media (max-width: 360px) {
    .member-row-name {
        font-size: 0.84rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}