/* ============================================================
   SK Lázně Bělohrad – tlačítka, formuláře, stavy, administrace
   ------------------------------------------------------------
   Linkuje se AŽ ZA app.css, takže ho přebíjí.

   Hlavní úklid: web měl ŠEST vzájemně nekompatibilních receptů na
   tentýž ovládací prvek – "primární zelené tlačítko" bylo na jedné
   stránce pilulka (999px), v lightboxu obdélník 8px a na přihlášení
   obdélník 10px. Teď je základ jeden (.btn) a staré názvy tříd do
   něj jen ústí, aby se nemuselo sahat do markupu (a nic se tiše
   nerozbilo tam, kam bych nedohlédl).
   ============================================================ */

/* ---------- Jeden základ pro všechna tlačítka ---------- */
.btn,
.btn-primary,
.btn-small,
.cat-tab,
.tab,
.btn-fav,
.btn-retry,
.link-back,
.lightbox__download,
.account-choice__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border-radius: var(--r-pill);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

/* Tichá varianta (obrys) – výchozí pro filtry, přepínače, "zpět". */
.btn,
.btn-small,
.cat-tab,
.tab,
.btn-fav,
.btn-retry,
.link-back {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink-2);
    padding: var(--sp-2) var(--sp-4);
    min-height: 40px;
}
.btn:hover,
.btn-small:hover,
.cat-tab:hover,
.tab:hover,
.btn-fav:hover,
.btn-retry:hover,
.link-back:hover {
    border-color: var(--accent, var(--green));
    color: var(--green-dark);
}

/* Hlavní varianta (plná)
   Ztmavení o 22 % – ÚPLNĚ stejný důvod i recept jako u .cat-tab.active níž: bílý
   text na čisté --green vychází na 3.49:1, tedy pod požadovaných 4.5:1. Tenhle
   selektor tehdy z opravy vypadl, protože axe na kontrolovaných stránkách žádné
   primární tlačítko ve výchozí velikosti nenašel (na /Account/* mají btn-lg, a to
   je "velký text" s mírnějším limitem 3:1). Po ztmavení: 5.4:1, hover 8.1:1. */
.btn--primary,
.btn-primary,
.lightbox__download,
.account-choice__btn--primary {
    background: color-mix(in srgb, var(--green) 78%, #000);
    border: 1px solid color-mix(in srgb, var(--green) 78%, #000);
    color: #fff;
    padding: var(--sp-2) var(--sp-5);
    min-height: 44px;
    font-weight: var(--fw-bold);
}
.btn--primary:hover,
.btn-primary:hover,
.lightbox__download:hover,
.account-choice__btn--primary:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: #fff;
}

.btn--sm, .btn-small { min-height: 34px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-2xs); }

/* Ztmavení o 22 % ze stejného důvodu jako u .cat-pill: bílý text na čisté
   --accent nesplňoval kontrast 4.5:1 (zelená vycházela na 3.49:1). */
.cat-tab.active, .tab.active {
    background: color-mix(in srgb, var(--accent, var(--green)) 78%, #000);
    color: #fff;
    border-color: color-mix(in srgb, var(--accent, var(--green)) 78%, #000);
}
.tab.active { background: var(--green-dark); border-color: var(--green-dark); }

.tabs { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
.tabs--wide { margin: var(--sp-4) 0; }

.btn[disabled], .btn-primary[disabled], .btn-small[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Pole ---------- */
.select, .search, .field__input, .news-editor textarea, .news-editor input[type="text"] {
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    min-height: 40px;
}
.search { flex: 1; min-width: 160px; }
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field__label { font-size: var(--fs-xs); color: var(--ink-2); font-weight: var(--fw-semibold); }
.field__hint { font-size: var(--fs-2xs); color: var(--muted); }

/* ---------- Stavy načítání a chyby ----------
   <ErrorState> se používá 26× a <LoadingState> 14× – jsou to jediná
   místa, kde web mluví, když data nedorazí. */
.state-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--e-2);
    margin: var(--sp-4) 0;
}
.loading-state { color: var(--muted); text-align: center; }

.spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto var(--sp-3);
    border: 3px solid var(--border);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* base.css vypíná animace při prefers-reduced-motion. Spinner je jediná
   animace, která nese informaci ("pracuje se"), takže bez otáčení musí
   sdělit totéž jinak – pulzující obrys místo rotace. */
@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
        border-top-color: var(--border);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent);
        background: color-mix(in srgb, var(--green) var(--tint-2), transparent);
    }
}

.error-state {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    text-align: left;
    border-left: 3px solid var(--loss);
}
.error-state.is-notice { border-left-color: var(--draw); }
/* Názvy tříd zůstávají původní – používá je i NotFound.razor. */
.state-icon { flex: 0 0 auto; color: var(--loss); font-size: 1.25rem; line-height: 1; }
.error-state.is-notice .state-icon { color: var(--draw); }
.state-body { min-width: 0; }
.state-title { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.state-detail { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Administrace ---------- */
.admin-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.admin-card { padding: var(--pad-card); display: flex; flex-direction: column; gap: var(--sp-2); }
.admin-card-list { display: none; flex-direction: column; gap: var(--sp-2); }
.admin-json-preview {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-3);
    font-size: var(--fs-2xs);
    overflow-x: auto;
    white-space: pre;
}
.news-editor__preview { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-4); }

.role-pill { padding: 0 var(--sp-2); min-height: 24px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); }
.status-pill { padding: 0 var(--sp-2); min-height: 24px; background: var(--surface-2); color: var(--ink-2); }
/* --on-draw, ne ztmavená --draw: na žlutém podkladu je to jediná barva textu,
   která v projektu splňuje kontrast 4.5:1 (viz komentář u tokenu). */
.status-pill--warn {
    background: color-mix(in srgb, var(--draw) var(--tint-3), transparent);
    color: var(--on-draw);
}

/* ---------- Hlášení po akci v administraci ----------
   Dřív se výsledek akce (změna role, smazání účtu) nikde neukázal – když se
   nepovedla, uživatel se to nedozvěděl. Tohle je jedno místo pro obojí. */
.admin-status {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: var(--fs-sm);
    box-shadow: var(--e-1);
}
.admin-status--ok { border-left-color: var(--win); }
.admin-status--err { border-left-color: var(--loss); }
/* Přímý potomek – ať se nepřebarví i ikona v křížku pro zavření. */
.admin-status--ok > .icon { color: var(--win); }
.admin-status--err > .icon { color: var(--loss); }
.admin-status span { min-width: 0; }
.admin-status__close {
    margin-left: auto;
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: var(--sp-1);
    color: var(--muted);
    cursor: pointer;
    line-height: 0;
}
.admin-status__close:hover { color: var(--ink); }

/* ---------- Seznam uživatelů (/admin/uzivatele) ----------
   JEDEN seznam pro všechny šířky – na širokém displeji tři sloupce vedle sebe,
   pod 760 px se řádek přeskládá pod sebe. Dřív tu byla tabulka a vedle ní její
   ručně udržovaná kopie pro mobil; každá oprava se musela dělat dvakrát. */
.user-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }

.user-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 240px) auto;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.user-row--root { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }

.user-row__who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.user-row__ident { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
/* Dlouhý e-mail se musí zalomit, ne roztáhnout řádek do vodorovného posuvníku. */
.user-row__email { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.user-row__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.user-row__role { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.user-row__role .select { width: 100%; }

.user-row__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }

/* Panel pro změnu hesla – přes celou šířku řádku, pod ostatními sloupci. */
.user-row__panel {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}
.user-row__panel-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 var(--sp-4);
}
.user-row__panel .field { margin-bottom: var(--sp-2); min-width: 0; }

/* ---------- Formulář zprávy z utkání (MatchReportEditor) ----------
   Zpráva má hodně malých údajů (rozhodčí, karty, diváci…) a pár velkých textů.
   Skupiny je drží pohromadě, aby novinář na první pohled viděl, co spolu souvisí,
   a řádek se přizpůsobuje šířce – žádné pevné dva sloupce, které by se na mobilu
   nevešly (viz zákaz vodorovného přetékání ve zbytku webu). */
.report-editor { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }

.report-editor__group {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
    margin: 0;
    min-width: 0;
}
.report-editor__group--readonly { background: var(--surface-2); }

.report-editor__legend {
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-2);
}

.report-editor__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 var(--sp-4);
}
.report-editor__row--narrow { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.report-editor__row > .field { min-width: 0; }

.report-editor__hint { display: block; margin-bottom: var(--sp-3); }
.report-editor__hint code {
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 0 var(--sp-1);
}

/* Soupiska se píše po jménu na řádek – proto neproporcionální písmo a zákaz
   automatického zalamování, ať je vidět, kolik jmen je opravdu zadaných. */
.field__input--names {
    resize: vertical;
    min-height: 160px;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
}

.report-editor .match-report__quotes { margin-top: var(--sp-2); }

/* ---------- Avatar ----------
   Velikost přichází inline z UserAvatar.razor jako style="--avatar-size:38px". */
.avatar {
    --avatar-size: 40px;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

/* ============================================================
   Responzivní chování – povolené breakpointy: 640 / 760 / 960 / 1080
   ============================================================ */
@media (max-width: 760px) {
    /* Dřív dostávaly dotykovou výšku jen .cat-tab a .tab; .btn-fav
       ("Připnout" na každé stránce kategorie) a .btn-retry (v každém
       chybovém stavu) z toho pravidla vypadly. */
    .btn, .btn-small, .cat-tab, .tab, .btn-fav, .btn-retry, .link-back { min-height: 44px; }
    .btn-small { min-height: 40px; }

    .table-wrap--admin { display: none; }
    .admin-card-list { display: flex; }

    /* Uživatelský řádek pod sebe: kdo → role → akce. Tlačítka roztažená na plnou
       šířku, ať se dají trefit palcem (stejné pravidlo jako .admin-card__actions). */
    .user-row { grid-template-columns: minmax(0, 1fr); }
    .user-row__actions { justify-content: flex-start; }
    .user-row__actions .btn-small { flex: 1 1 auto; }
}