/* MyClub — mobile-first stylesheet. */

:root {
    /* Klubový design systém — brand červená, chrome bordó, papírové karty */
    --brand: #CC162C;       /* červená — brand / akce */
    --brand-dark: #A3101F;  /* tmavší červená pro hover */
    --bordo: #3A0E17;       /* tmavý chrome — sidebar / portál header */
    --bordo-2: #7A1F2B;     /* bordó akcent */
    --paper: #FAF8F6;       /* pozadí karet */
    --ink: #2A2320;         /* inkoust — text */
    --ok: #2E9E5B;          /* zelená stav */
    --warn: #E0922F;        /* jantarová stav */
    --bg: #F4F0EC;
    --surface: #ffffff;
    --text: #2A2320;
    --muted: #8A817B;
    --border: #E6DED8;
    --danger: #CC162C;
    --radius: 10px;
    --maxw: 900px;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
}

/* Pomocné třídy — mono číslice a Material Symbols ikony */
.mono {
    font-family: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-variant-numeric: tabular-nums;
}
.ms {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    /* Inline v textu (popisky, nadpisy) — sedí na účaří a škáluje s písmem. */
    font-size: 1.15em;
    vertical-align: -0.18em;
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }
h1:focus { outline: none; }

a { color: var(--brand-dark); }

/* Hlavička */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--brand);
    color: #fff;
    padding: 0.7rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-header .brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}

.auth-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.auth-nav a { color: #fff; text-decoration: none; }
.auth-nav a:hover { text-decoration: underline; }
.auth-nav .user { font-size: 0.9rem; opacity: 0.9; }
.auth-nav form { margin: 0; }

/* Obsah */
main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

/* Formuláře */
.auth-form {
    max-width: 420px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

form label {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-weight: 600;
    font-size: 0.95rem;
}

input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
    display: block;
    width: 100%;
    padding: 0.6rem 0.7rem;
    font-size: 1rem;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(204, 22, 44, 0.15);
}

label > input[type="checkbox"] { width: auto; display: inline-block; margin-right: 0.4rem; }

button, .btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

button:hover { background: var(--brand-dark); }
button.danger { background: var(--danger); }
button.link {
    background: none;
    color: #fff;
    padding: 0;
    margin: 0;
    font-weight: 600;
    text-decoration: underline;
}
button.link:hover { background: none; }

/* Tabulky. Každá .data-table je obalená v .table-scroll: na úzkém displeji
   se posouvá tabulka uvnitř wrapperu, ne celá stránka (10sloupcové reporty
   jinak na mobilu vyvolají vodorovný scroll celého okna). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.data-table th {
    background: #F4F0EC;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--muted);
}

/* QuickGrid: záhlaví sortovatelných sloupců je <button> — jinak by zdědilo
   globální bílý text tlačítek a bylo na světlém th neviditelné. */
.data-table th button {
    margin: 0;
    padding: 0;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
}
.data-table th button:hover {
    background: none;
    color: var(--text);
    text-decoration: underline;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr.unread td:first-child, .data-table tr.unread td:nth-child(2) { font-weight: 700; }

/* Auditní logy (Fáze 2b) — user-agent je dlouhý řetězec, ať nerozbije šířku
   tabulky; stránkování Novější/Starší (velké tabulky bez QuickGrid ostrova). */
.audit-ua {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0;
}

/* Sbalovací panel „Nový člen" nad gridem */
.toolbar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
}
.toolbar > summary {
    cursor: pointer;
    padding: 0.55rem 0;
    list-style: none;
    color: var(--brand-dark);
}
.toolbar > summary::-webkit-details-marker { display: none; }
.toolbar > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--brand);
    transition: transform 0.15s ease;
}
.toolbar[open] > summary::before { transform: rotate(90deg); }
.toolbar[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }

.toolbar-actions { margin: 0 0 1rem; }
.toolbar-actions .btn { margin-top: 0; }

/* Sekce filtrů nad gridem — orámovaná, s popiskem „Filtry" */
.filters {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.5rem 1rem 1rem;
    margin: 0 0 0.75rem;
    min-width: 0;
}
.filters > legend {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    padding: 0 0.4rem;
}
.filter-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
}
.filter-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 12rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}
.filter-fields input,
.filter-fields select { margin: 0; }

/* Dny v týdnu v kalendáři — segmentový přepínač Po–Ne. Globálně, ne ve scoped
   CSS stránky: stav nese :has(input:checked) a scoped přepis selektorů si s :has
   nemusí poradit. Prefix .filter-fields přebije sloupcový label výše. */
.filter-fields .cal-days {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}
.filter-fields .cal-day-chips { display: flex; }
.filter-fields .cal-day {
    position: relative;
    flex-direction: row;
    flex: none;
    justify-content: center;
    align-items: center;
    min-width: 2.6rem;
    min-height: 2.55rem;
    padding: 0 0.55rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.filter-fields .cal-day + .cal-day { margin-left: -1px; }
.filter-fields .cal-day:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.filter-fields .cal-day:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.filter-fields .cal-day:hover { background: var(--paper); }
.filter-fields .cal-day:has(input:checked) {
    z-index: 1;
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.filter-fields .cal-day:has(input:focus-visible) {
    z-index: 2;
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
/* Checkbox zůstává ve formuláři (odesílá ?den=), kliká se na chip. */
.filter-fields .cal-day input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* Veřejný kalendář (/kalendar) — full-width layout, Google embed přes šířku
   obrazovky; boční okraj = spodní okraj mainu (3rem, na mobilu 1rem). */
main.full-width {
    max-width: none;
    padding: 1.25rem 3rem 3rem;
}
@media (max-width: 700px) {
    main.full-width { padding: 1rem 1rem 3rem; }
}
.cal-embed {
    display: block;
    width: 100%;
    height: 72vh;
    min-height: 480px;
    border: 0;
    background: #fff;
}
.cal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.cal-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
    padding-bottom: 0.55rem;
}
.cal-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    display: inline-block;
}
.cal-dot-home { background: #0b8043; } /* Google Basil (10) — doma */
.cal-dot-away { background: #3f51b5; } /* Google Blueberry (9) — venku */

/* Kalendář (/admin/kalendar) — denní tabulky se stejně širokými sloupci
   pod sebou (fixed layout + sdílený colgroup). */
.cal-table {
    table-layout: fixed;
    width: 100%;
}
.cal-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-table .c-time  { width: 8.5rem; }
.cal-table .c-kind  { width: 8.5rem; }
.cal-table .c-team  { width: 13rem; }
.cal-table .c-place { width: 17rem; }
/* c-title bez šířky = zbytek */

.hint {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0.25rem 0 0.75rem;
}

/* /admin/napoveda — vykreslený docs/FAQ.md (Markdig). */
.markdown-body { max-width: var(--maxw); }
.markdown-body h1 { font-size: 1.5rem; }
.markdown-body h2 { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.markdown-body h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.markdown-body code { background: var(--paper); border-radius: 4px; padding: 0.1em 0.35em; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.9em; }
.markdown-body pre { background: var(--paper); border-radius: var(--radius); padding: 0.75rem 1rem; overflow-x: auto; }
.markdown-body pre code { background: none; padding: 0; }
.markdown-body blockquote { margin: 0.75rem 0; padding: 0.5rem 1rem; border-left: 3px solid var(--brand); color: var(--muted); background: var(--paper); }
.markdown-body ul, .markdown-body ol { padding-left: 1.4rem; }
.markdown-body li { margin: 0.25rem 0; }
.markdown-body a { color: var(--brand); }

/* Orámovaná podsekce formuláře (např. Občanství a původ v kartě člena) */
.subfields {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 1rem 1rem;
    margin: 0.5rem 0 1rem;
    min-width: 0;
}
.subfields > legend {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    padding: 0 0.4rem;
}

/* Dvousloupcové skupiny polí (karta člena — taby, ať se formulář vejde na obrazovku) */
.field-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
    align-items: start;
}
@media (max-width: 700px) {
    .field-cols { grid-template-columns: 1fr; }
}

/* Externí login (OAuth) */
.external-login { margin-top: 1.25rem; }
.external-login .sep {
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.5rem 0;
}
.external-login form { display: flex; flex-direction: column; gap: 0.5rem; }
button.ext {
    margin-top: 0;
    color: #fff;
    width: 100%;
    text-align: center;
}
button.ext-google { background: #4285f4; }
button.ext-google:hover { background: #3367d6; }
button.ext-facebook { background: #1877f2; }
button.ext-facebook:hover { background: #145dbf; }

/* Admin nav */
.admin-nav ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.admin-nav a {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
}

/* Validace / chyby */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); font-size: 0.9rem; }
.error { color: var(--danger); }
ul.error { padding-left: 1.2rem; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: 8px;
}
.blazor-error-boundary::after { content: "Došlo k chybě."; }

/* Blazor unhandled-error UI — skryté, dokud Blazor nenastaví display:block */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (min-width: 640px) {
    h1 { font-size: 1.9rem; }
}

/* ==========================================================================
   Členský portál (/portal/*) — bordó zóna, mobile-first, oddělená od zelené
   admin/login zóny. Header + karty + spodní tab bar (na desktopu horizontální).
   ========================================================================== */
:root {
    /* --bordo je sjednocené s design systémem (#3A0E17) v hlavním :root výše;
       tady jen doplňujeme tmavší odstín pro portálový chrome. */
    --bordo-dark: #2A0A10;
}

.portal { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.portal-header {
    order: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--bordo);
    color: #fff;
    padding: 0.7rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
/* Značka = logo/monogram (celý název je v tooltipu), akce v hlavičce jen ikony —
   na mobilu se jinak hlavička nevešla a stránka přetékala do šířky. */
.portal-brand {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 9px; overflow: hidden;
    background: rgba(255,255,255,0.14); color: #fff;
    font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em; text-decoration: none;
}
.portal-brand img { width: 100%; height: 100%; object-fit: cover; }
.portal-subject {
    color: #fff; font-size: 0.95rem; font-weight: 600;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-logout { margin: 0; }
.portal-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0.25rem; margin: 0;
    color: #fff; cursor: pointer; border-radius: 6px;
}
.portal-icon-btn:hover { background: rgba(255,255,255,0.15); }
/* Jméno subjektu je jediná pružná položka hlavičky: na jeden řádek, zbytek „…". */
.portal-header > * { flex: 0 0 auto; }
.portal-header > .portal-switcher, .portal-header > .portal-subject { flex: 0 1 auto; min-width: 0; }
.portal-subject, .portal-switcher > summary { display: flex; align-items: center; gap: 0.3rem; }
/* overflow na summary, ne na <details> — ten by ořízl rozbalovací seznam dětí. */
.portal-switcher > summary { min-width: 0; max-width: 100%; overflow: hidden; }
.portal-switcher > summary > .ms, .portal-subject > .ms { flex: 0 0 auto; }
.portal-subject-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
    .portal-header { gap: 0.4rem; padding: 0.6rem 0.75rem; }
    .portal-header .lang-switch { gap: 0; }
    .portal-header .lang-switch button, .portal-header .lang-current { padding: 0.15rem 0.2rem; }
    .portal-header .lang-switch .flag { width: 1.25rem; height: 0.85rem; }
}

/* Přepínač subjektu (rodič s více dětmi) */
.portal-switcher { position: relative; }
.portal-switcher > summary {
    list-style: none; cursor: pointer; color: #fff; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.portal-switcher > summary::-webkit-details-marker { display: none; }
.portal-switcher > summary::after { content: "▾"; font-size: 0.8em; }
.portal-switcher[open] > summary::after { content: "▴"; }
.portal-switcher ul {
    position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 0.4rem);
    min-width: 12rem; margin: 0; padding: 0.3rem; list-style: none;
    background: #fff; color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,0.18); z-index: 200;
}
.portal-switcher li a {
    display: block; padding: 0.5rem 0.7rem; border-radius: 8px;
    color: var(--text); text-decoration: none;
}
.portal-switcher li a:hover { background: var(--paper); }
.portal-switcher li a.active { font-weight: 700; color: var(--bordo); }

.portal-main {
    order: 2;
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    padding: 1.1rem 1rem 5.5rem; /* spodní místo pro fixed tab bar na mobilu */
}

/* Karty */
.portal-card {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin: 0 0 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.portal-card h1 { font-size: 1.4rem; margin: 0 0 0.75rem; }
.portal-card h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }

/* Hero (hlavička profilu) */
.portal-hero { display: flex; gap: 1rem; align-items: center; }
.portal-avatar {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
    overflow: hidden; background: var(--bordo); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.portal-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Fotka je odkaz na editaci kontaktů — tužka v rohu jako nápověda, že se dá kliknout. */
a.portal-avatar { position: relative; text-decoration: none; }
.portal-avatar-edit {
    position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--paper);
}
.portal-card-action { float: right; font-size: 0.85rem; font-weight: 500; color: var(--bordo); text-decoration: none; }
.portal-card-action:hover { text-decoration: underline; }
.portal-form label { display: block; margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--muted); }
.portal-form input { display: block; width: 100%; margin-top: 0.25rem; font-size: 1rem; color: var(--text); }
.portal-form-row { display: grid; grid-template-columns: 2fr 1fr; gap: 0.75rem; }
.portal-form-actions { display: flex; gap: 1rem; align-items: center; margin-top: 0.5rem; }
.portal-form-actions .btn-link { color: var(--muted); }
.portal-avatar-initials { font-size: 1.5rem; font-weight: 700; }
.portal-hero-body { min-width: 0; }
.portal-hero-body h1 { font-size: 1.35rem; margin: 0 0 0.35rem; }
.portal-hero-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.5rem; }
.portal-year { color: var(--muted); font-size: 0.9rem; }
.portal-teams { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.portal-team-empty { color: var(--muted); font-size: 0.9rem; font-style: italic; }

/* Chip + stavová tečka */
.chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.15rem 0.6rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; background: #F4F0EC; color: var(--text);
}
.chip .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--muted); }
.chip-ok { background: #e6f4ea; color: #1c6b34; }
.chip-ok .dot { background: var(--ok); }
.chip-warn { background: #fdf0e3; color: #8a5300; }
.chip-warn .dot { background: var(--warn); }
.chip-muted { background: #eee; color: var(--muted); }
.chip-team { background: #f4e7e9; color: var(--bordo-2); }
.chip-team .dot { display: none; }

/* Definiční seznam kontaktu */
.portal-kv { display: grid; grid-template-columns: 7rem 1fr; gap: 0.4rem 0.75rem; margin: 0; }
.portal-kv dt { color: var(--muted); font-size: 0.9rem; }
.portal-kv dd { margin: 0; }

/* Statboxy */
.portal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.portal-stat {
    display: flex; flex-direction: column; gap: 0.3rem;
    background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.8rem 0.9rem; text-decoration: none; color: var(--text);
}
a.portal-stat:hover { border-color: var(--bordo); }
.portal-stat-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }
.portal-stat-value { font-size: 1.15rem; font-weight: 700; }
.portal-stat-muted { color: var(--muted); font-weight: 600; font-size: 1rem; }
.portal-stat-sub { color: var(--muted); font-size: 0.85rem; }

/* Seznamy (kalendář, doklady) */
.portal-list { list-style: none; margin: 0; padding: 0; }
.portal-list-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem 0; border-bottom: 1px solid var(--border);
}
.portal-list-row:last-child { border-bottom: none; }
.portal-roster-photo {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px;
    object-fit: cover; background: var(--paper-2, #F6F2EF);
}
.portal-roster-photo-empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-weight: 700; font-size: 0.8rem;
}
.portal-date {
    flex: 0 0 auto; min-width: 4.5rem; font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--bordo);
}
.portal-list-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.portal-list-sub { color: var(--muted); font-size: 0.85rem; }
/* Akce u dokladu (potvrzení pro pojišťovnu, 0.112.1): malé ikony místo velkých
   červených tlačítek; e-mail jen výběrem z kontaktů dítěte. */
.portal-doc-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.portal-doc-actions form { margin: 0; }
.portal-doc-send { display: flex; align-items: center; gap: 0.3rem; }
.portal-doc-send select { width: auto; max-width: 14rem; margin: 0; padding: 0.3rem 0.5rem; font-size: 0.85rem; }
.portal-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; margin: 0; padding: 0;
    color: var(--bordo-2); background: transparent;
    border: 1px solid var(--border); border-radius: 50%;
    text-decoration: none; cursor: pointer;
}
.portal-act .ms { font-size: 1.2rem; }
.portal-act:hover { background: var(--bg); color: var(--brand); border-color: var(--brand); }
.portal-empty { color: var(--muted); padding: 0.5rem 0; }

/* Kontakty v „Můj tým": zdroj hodnoty + editace pod tužkou (0.74.0/0.74.1).
   Zdroj se musí odlišit od hodnoty samotné — rodičovo číslo se dřív tvářilo
   jako hráčovo. Editace je v <details>, aby seznam 15 hráčů zůstal čitelný. */
.portal-contact-src { color: var(--muted); font-weight: 600; }
.portal-contact-mail { overflow-wrap: anywhere; }

/* Mřížka fotek v „Můj tým" → Kontakty (0.94). Dlaždice je čtvercová fotka
   s příjmením pod ní; šířka se řídí sama, na telefonu vyjdou 3 sloupce,
   na tabletu 5–6. Detail se otevírá přes :target, proto žádný JS. */
.portal-roster-grid {
    list-style: none; margin: 0.5rem 0 0; padding: 0;
    display: grid; gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
.portal-roster-tile {
    position: relative; display: flex; flex-direction: column; gap: 0.35rem;
    text-decoration: none; color: inherit;
}
.portal-roster-face {
    width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover;
    background: var(--paper-2, #F6F2EF); border: 1px solid var(--border);
}
.portal-roster-face-empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-weight: 700; font-size: 1.5rem;
}
.portal-roster-tile:hover .portal-roster-face,
.portal-roster-tile:focus-visible .portal-roster-face { border-color: var(--brand); }
.portal-roster-name {
    display: flex; flex-direction: column; line-height: 1.2; font-size: 0.85rem;
}
.portal-roster-name strong { overflow-wrap: anywhere; }
.portal-roster-name span { color: var(--muted); }
/* Chybějící telefon je provozní vada, ne dekorace — proto na fotce, ne pod ní. */
.portal-roster-nophone {
    position: absolute; top: 0.25rem; right: 0.25rem;
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--paper, #FAF8F6); color: var(--muted); border: 1px solid var(--border);
}
.portal-roster-nophone .ms { font-size: 0.95rem; vertical-align: 0; }

/* Okno s kontakty. Bez :target je schované; odkaz „#kontakt-{id}" ho otevře.
   Nepoužívá <dialog>, ten se bez JS otevřít nedá. */
.portal-contact-modal { display: none; }
.portal-contact-modal:target {
    display: flex; align-items: center; justify-content: center;
    position: fixed; inset: 0; z-index: 50; padding: 1rem;
}
.portal-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.portal-modal-card {
    position: relative; z-index: 1; width: min(420px, 100%);
    max-height: 85vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 1rem; border-radius: 12px;
    background: var(--paper, #FAF8F6); border: 1px solid var(--border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.portal-modal-head { display: flex; align-items: center; gap: 0.6rem; }
.portal-modal-head strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.portal-modal-close {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    color: var(--muted); text-decoration: none;
}
.portal-modal-close .ms { vertical-align: 0; }

/* Hlavní akce okna: zavolat. 44px výška = dotykový cíl podle palce, ne myši. */
.portal-call {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 44px; padding: 0.5rem 0.75rem; border-radius: 10px;
    background: var(--brand); color: #fff; font-weight: 700; text-decoration: none;
}
.portal-call:hover, .portal-call:focus-visible { background: var(--brand-dark, #A81124); }
.portal-call .ms { vertical-align: 0; }
.portal-contact-line {
    display: flex; align-items: center; gap: 0.5rem; min-height: 40px;
    overflow-wrap: anywhere;
}
.portal-contact-line .ms { color: var(--muted); font-size: 1.1rem; vertical-align: 0; }
.portal-contact-guardian {
    display: flex; flex-direction: column;
    padding-top: 0.5rem; border-top: 1px solid var(--border);
}
.portal-contact-editlink {
    display: flex; align-items: center; gap: 0.4rem; min-height: 40px;
    color: var(--brand); cursor: pointer; list-style: none; font-size: 0.9rem;
}
.portal-contact-editlink::-webkit-details-marker { display: none; }
.portal-contact-editlink .ms { font-size: 1.1rem; vertical-align: 0; }

/* Řádek je kotva pro tužku vpravo nahoře; otevřený formulář se zalomí přes
   celou šířku, aby na mobilu nebyl vmáčknutý do úzkého sloupce vedle ikony. */
.portal-contact-row { position: relative; flex-wrap: wrap; padding-right: 2.5rem; }
.portal-contact-edit { flex-basis: 100%; order: 3; }
.portal-contact-pencil {
    position: absolute; top: 0.55rem; right: 0;
    display: flex; align-items: center; justify-content: center;
    /* 40px dotykový cíl — na hřišti se to ťuká palcem, ne myší. */
    width: 40px; height: 40px;
    cursor: pointer; color: var(--brand); list-style: none;
}
.portal-contact-pencil::-webkit-details-marker { display: none; }
.portal-contact-pencil .ms { font-size: 1.25rem; vertical-align: 0; }
.portal-contact-edit[open] .portal-contact-pencil { color: var(--brand-dark); }

.portal-contact-edit > form {
    display: flex; flex-direction: column; gap: 0.5rem;
    margin: 0.5rem 0 0.25rem; padding: 0.6rem;
    background: var(--paper, #FAF8F6); border: 1px solid var(--border); border-radius: 8px;
}
.portal-contact-group { border: none; margin: 0; padding: 0; }
.portal-contact-group > legend {
    padding: 0; color: var(--bordo); font-size: 0.8rem; font-weight: 700;
}
.portal-contact-field { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.25rem 0 0; }
.portal-contact-field > span { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.portal-contact-field input { min-height: 40px; }
.portal-contact-edit button { align-self: flex-start; margin-top: 0.5rem; min-height: 40px; }
/* Výměna fotky v okně hráče (0.99.5). Input je schovaný uvnitř <label> —
   ťuk na „Výměna fotky" otevře fotoaparát, viz js/portal-photo.js. */
.portal-photo-form { display: flex; flex-direction: column; gap: 0.5rem; }
.portal-photo-form [hidden] { display: none !important; }
.portal-photo-take {
    display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
    min-height: 40px; padding: 0.4rem 0.75rem; border-radius: 10px;
    border: 1px solid var(--border); color: var(--brand); font-size: 0.9rem; cursor: pointer;
}
.portal-photo-take .ms { font-size: 1.15rem; vertical-align: 0; }
.portal-photo-take input[type="file"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.portal-photo-take:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.portal-photo-preview { display: flex; flex-direction: column; gap: 0.5rem; }
.portal-photo-preview img {
    width: 100%; max-height: 50vh; object-fit: contain;
    border-radius: 10px; background: var(--paper-2, #F6F2EF);
}
.portal-photo-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.portal-photo-actions button { min-height: 40px; margin-top: 0; }
button.portal-btn-secondary {
    background: transparent; color: var(--brand); border: 1px solid var(--border);
}
button.portal-btn-secondary:hover { background: var(--paper-2, #F6F2EF); }

.portal-contact-error {
    margin: 0.5rem 0; padding: 0.5rem 0.7rem; border-radius: 8px;
    background: #FCE9EC; color: var(--brand-dark); font-weight: 600;
}

/* Sekce týmu v „Můj tým" (Nominace / Docházka / Kontakty) — v toku stránky, pilulky. */
.portal-subtabs { display: flex; gap: 0.4rem; margin: 0.75rem 0 1rem; flex-wrap: wrap; }
.portal-subtabs a {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--border);
    background: #fff; color: var(--text); text-decoration: none; font-size: 0.92rem; font-weight: 600;
}
.portal-subtabs a .ms { font-size: 1.15rem; }
.portal-subtabs a:hover { border-color: var(--bordo); }
.portal-subtabs a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Spodní tab bar (mobile-first: fixed dole) */
.portal-tabbar {
    order: 1;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    display: flex; background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -1px 4px rgba(0,0,0,0.06);
}
.portal-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 0.5rem 0 0.6rem; font-size: 0.72rem; color: var(--muted); text-decoration: none;
}
.portal-tabbar a .ico { font-size: 1.2rem; line-height: 1; }
.portal-tabbar a .ms { font-size: 1.4rem; }
.portal-tabbar a:hover { color: var(--brand); }
.portal-tabbar a[aria-current="page"] { color: var(--brand); font-weight: 700; }
.portal-tabbar a.disabled { opacity: .45; cursor: default; pointer-events: none; }

@media (min-width: 640px) {
    /* Desktop: tab bar jako horizontální navigace pod headerem (ne fixed dole). */
    .portal-header { order: 0; }
    .portal-tabbar {
        order: 1; position: static; justify-content: center; gap: 0.5rem;
        border-top: none; border-bottom: 1px solid var(--border); box-shadow: none;
    }
    .portal-tabbar a {
        flex: 0 0 auto; flex-direction: row; gap: 0.4rem;
        padding: 0.7rem 1rem; font-size: 0.95rem;
        border-bottom: 3px solid transparent;
    }
    .portal-tabbar a[aria-current="page"] { border-bottom-color: var(--brand); }
    .portal-main { order: 2; padding-bottom: 3rem; }
    .portal-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Admin split shell (/admin/*) — bordó sidebar 82px + topbar + tělo (Fáze 3b).
   Desktop-first; na mobilu se sidebar překlopí na horizontální lištu nahoře.
   ========================================================================== */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.shell-sidebar {
    flex: 0 0 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: var(--bordo);
    padding: 0.7rem 0.4rem;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.shell-logo {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 12px;
    background: var(--brand); color: #fff;
    font-weight: 800; font-size: 1rem; letter-spacing: 0.02em;
    text-decoration: none; margin-bottom: 0.6rem; overflow: hidden;
}
.shell-logo img { width: 100%; height: 100%; object-fit: cover; }

.shell-nav { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; }
.shell-nav a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 0.55rem 0.2rem;
    border-radius: 10px;
    color: #CBB8BC;
    text-decoration: none;
}
.shell-nav a .ms { font-size: 1.35rem; vertical-align: baseline; }
/* text-align je tu potřeba vedle align-items:center na odkazu: to vycentruje
   popisek jako blok, ale ne řádky UVNITŘ něj — dvouřádkový popisek („Realizační
   tým") měl druhý řádek zarovnaný vlevo. */
.shell-nav-label {
    font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    text-align: center;
}
.shell-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.shell-nav a[aria-current="page"] { color: #fff; background: var(--brand); }
.shell-nav-count {
    position: absolute; top: 4px; right: 8px;
    min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--warn); color: #2A2320;
    border-radius: 999px; font-size: 0.65rem; font-weight: 800;
}

.shell-sidebar-foot { margin-top: auto; }
.shell-sidebar-foot form { margin: 0; }
.shell-sidebar-foot button {
    margin: 0; padding: 0.5rem; background: none; border: none;
    color: #CBB8BC; cursor: pointer; border-radius: 10px;
}
.shell-sidebar-foot button:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
/* Odkaz na heslo (4c.4) — stejný vzhled jako tlačítko odhlášení pod ním. */
.shell-sidebar-foot a {
    display: block; padding: 0.5rem; color: #CBB8BC; border-radius: 10px; line-height: 1; text-decoration: none;
}
.shell-sidebar-foot a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.shell-sidebar-foot .ms { font-size: 1.3rem; }

.shell-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.shell-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    height: 62px; padding: 0 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 90;
}
.shell-topbar-title { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; }
.shell-section { font-weight: 800; font-size: 1.1rem; }
.shell-breadcrumb { color: var(--muted); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-user { color: var(--muted); font-size: 0.9rem; }

/* Zvoneček notifikací (8b.6) — topbar (admin) i portal header. */
.bell { position: relative; display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.bell .ms { font-size: 1.3rem; }
.bell-count {
    position: absolute; top: -6px; right: -8px;
    min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--warn); color: #2A2320;
    border-radius: 999px; font-size: 0.65rem; font-weight: 800;
}
.portal-bell.bell { color: #fff; }

/* Tělo — širší než veřejný main (gridy potřebují prostor). */
.shell-body {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    padding: 1.25rem 1.25rem 3rem;
}

/* Dashboard statboxy (AdminHome) */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; }
.dash-stat {
    display: flex; flex-direction: column; gap: 0.4rem;
    background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.1rem; text-decoration: none; color: var(--text);
}
.dash-stat:hover { border-color: var(--brand); }
.dash-stat-label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }
.dash-stat-value { font-size: 1.7rem; font-weight: 700; }
.dash-attn { color: var(--brand); }

@media (max-width: 700px) {
    /* Mobil: sidebar jako horizontální lišta nahoře, labely skryté. */
    .shell { flex-direction: column; }
    .shell-sidebar {
        flex: 0 0 auto; flex-direction: row; height: auto; width: 100%;
        padding: 0.4rem 0.6rem; overflow-x: auto; overflow-y: hidden;
        position: sticky; top: 0; z-index: 100;
    }
    .shell-logo { width: 40px; height: 40px; margin: 0 0.4rem 0 0; flex: 0 0 auto; }
    .shell-nav { flex-direction: row; width: auto; }
    .shell-nav a { padding: 0.45rem 0.55rem; }
    .shell-nav-label { display: none; }
    .shell-sidebar-foot { margin: 0 0 0 auto; display: flex; align-items: center; }
    .shell-topbar { height: auto; padding: 0.6rem 1rem; }
}

/* ==========================================================================
   Členský grid 4.9 — 6 sloupců, výběr řádku, column filtry, master-detail
   panel 540px (spec D/E/F). Ostrov MemberGrid + MemberDetailPanel.
   ========================================================================== */
.member-split { display: flex; align-items: flex-start; gap: 0; }
.member-grid { flex: 1 1 auto; min-width: 0; }

/* Avatar (sdílená komponenta) */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; flex: 0 0 auto; font-weight: 800;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Chip týmu (spec G) */
.team-chip {
    display: inline-block; padding: 0.1rem 0.5rem; margin: 0 0.25rem 0.15rem 0;
    background: #F1E0E3; color: #45111B;
    border-radius: 5px; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}

/* Počet startů v chipu — tmavší pilulka uvnitř, ať se neplete s názvem týmu
   a chip zůstane čitelný i s jednociferným i dvouciferným číslem. */
.team-chip-count {
    display: inline-block; margin-left: 0.35rem; padding: 0 0.3rem;
    background: #45111B; color: #F1E0E3;
    border-radius: 4px; font-size: 0.72rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Role realizačního týmu (T/A/V) — obrysová, ne plná, aby se na první pohled
   lišila od počtu startů; jeden člověk může mít v chipu obojí. */
.team-chip-role {
    display: inline-block; margin-left: 0.3rem; padding: 0 0.28rem;
    background: transparent; color: #45111B;
    border: 1px solid #45111B; border-radius: 4px;
    font-size: 0.7rem; font-weight: 700; line-height: 1.25;
}

/* Řádek gridu: jméno + reg. č.; stretched button = klik kamkoli v řádku
   (::after se kotví na tr — position:relative na td by pokrylo jen buňku). */
.member-table tbody tr { position: relative; }
.member-table .row-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    margin: 0; padding: 0; background: none; border: none;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.member-table .row-open:hover { background: none; }
.member-table .row-open::after { content: ""; position: absolute; inset: 0; }
.member-name { font-weight: 700; font-size: 0.9rem; }
.member-regno { font-size: 0.72rem; color: var(--muted); }
.member-type-coach { color: var(--brand); font-weight: 700; }

/* Stavy řádků (spec D.2) — stav nese button, řádek se stylí přes :has() */
.member-table tbody tr:has(.row-open.selected) td { background: #FBEEF0; }
.member-table tbody tr:has(.row-open.selected) td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.member-table tbody tr:has(.row-open.dim) td { color: var(--muted); }
.member-table tbody tr:hover td { background: #FCFAF9; }
.member-table tbody tr:has(.row-open.selected):hover td { background: #FBEEF0; }

/* Kalendář (③) — zrušené události ztlumené a škrtnuté */
.cal-cancelled td, .portal-cancelled { color: var(--muted); text-decoration: line-through; }

/* Kalendář — podtitulek v h1 (rozsah + aktivní filtry, hodí se i pro tisk) */
.cal-title-hint { font-size: 0.9rem; font-weight: 400; margin-left: 0.5rem; }

/* Tisk kalendáře (vývěska): skryje shell + filtry, tabulky nedělit přes stránku */
@media print {
    .no-print, .shell-sidebar, .shell-topbar { display: none !important; }
    .shell-body { padding: 0 !important; max-width: none !important; }
    h2 { break-after: avoid; }
    .cal-table { break-inside: avoid; }
    body { background: #fff; }
}

/* Hromadný výběr — checkbox musí nad stretched button (.row-open::after) */
.member-table .col-select { width: 2.2rem; }
.member-table .row-check,
.member-table thead .row-check { position: relative; z-index: 1; width: 1rem; height: 1rem; margin: 0; }
.bulk-bar {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.5rem 0.75rem; margin: 0 0 0.75rem;
    background: #FBEEF0; border: 1px solid var(--border); border-radius: 8px;
}
.bulk-bar label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.bulk-bar select { width: auto; }
.bulk-count { font-weight: 700; }

/* Sloupec „Účet" (Krok A) — malé tlačítko „Pozvat" musí být nad stretched
   .row-open::after overlayem (viz .row-check výše), jinak by klik otevřel detail. */
.member-table .col-account { width: 8rem; }
.member-table .col-account button {
    position: relative; z-index: 1;
    margin: 0; padding: 0.3rem 0.65rem; font-size: 0.78rem; font-weight: 600;
}

/* Inline panel „Pozvat" — stejný vzhled jako .bulk-bar. */
.invite-bar {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.6rem 0.75rem; margin: 0 0 0.75rem;
    background: #FBEEF0; border: 1px solid var(--border); border-radius: 8px;
}
.invite-bar label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.invite-bar input { width: auto; }
.invite-bar button { margin: 0; }

/* Column filter v hlavičce (typ/stav) */
.col-filter { display: inline-flex; align-items: center; gap: 0.25rem; }
.col-filter .ms { font-size: 1rem; color: var(--muted); }
.col-filter.active .ms { color: var(--brand); }
.col-filter select {
    width: auto; padding: 0.15rem 0.3rem; font-size: 0.78rem;
    border: 1px solid var(--border); border-radius: 6px; color: var(--muted);
    text-transform: none; letter-spacing: normal; background: #fff;
}
.col-filter.active select { color: var(--text); border-color: var(--brand); }

/* Paginator — aktivní stránka červeně */
.member-grid nav[role="navigation"] button[aria-current="page"],
.member-grid .paginator .current {
    color: var(--brand); font-weight: 800;
}

/* Master-detail panel (spec E) */
.mdp {
    flex: 0 0 540px; max-width: 540px; min-height: 320px;
    margin-left: 1rem; padding: 1.1rem 1.2rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: -8px 0 24px rgba(40, 15, 20, 0.04);
    position: sticky; top: calc(62px + 1rem);
    /* Nad obsahem řádků gridu: tlačítko „Pozvat" ve sloupci Účet a checkboxy mají
       position:relative + z-index:1 (musí být nad stretched .row-open::after), takže
       bez vlastního z-indexu se kreslily PŘES panel a prosvítaly detailem člena.
       20 je nad hlavičkou tabulky, pod shellem (topbar 90/100). */
    z-index: 20;
}
.mdp-head { display: flex; gap: 0.9rem; align-items: flex-start; }
.mdp-head-body { flex: 1; min-width: 0; }
.mdp-name { font-size: 1.5rem; font-weight: 900; margin: 0 0 0.4rem; }
.mdp-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.mdp-head-actions { display: flex; align-items: center; gap: 0.4rem; }
.mdp-edit { margin: 0; padding: 0.4rem 0.8rem; font-size: 0.85rem; text-decoration: none; }
.mdp-close {
    margin: 0; padding: 0.3rem; background: none; border: none;
    color: var(--muted); cursor: pointer;
}
.mdp-close:hover { background: none; color: var(--text); }

/* Taby karty člena (MemberEdit — static SSR, přepínání přes ?tab=) */
.edit-tabs { display: flex; gap: 0.2rem; margin: 1rem 0 1.1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.edit-tabs a {
    padding: 0.5rem 0.8rem; text-decoration: none;
    border-bottom: 3px solid transparent;
    color: var(--muted); font-weight: 600; font-size: 0.9rem;
}
.edit-tabs a:hover { color: var(--text); }
.edit-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 800; }

/* Akce nad kartou člena + okno „E-mail rodičům" (HTML popover, bez JS).
   Bez atributu popover (chyba validace po POSTu) je okno rovnou otevřené. */
.member-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: -0.4rem 0 0.4rem; }
.member-actions button { margin: 0; }
.mail-dialog {
    width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto;
    padding: 1rem 1.25rem; margin: auto;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(42, 35, 32, 0.25);
}
.mail-dialog:not([popover]) { position: fixed; inset: 0; height: fit-content; z-index: 1000; }
.mail-dialog::backdrop { background: rgba(42, 35, 32, 0.45); }
.mail-dialog h2 { margin-top: 0; font-size: 1.15rem; }
.mail-dialog label { display: block; margin-bottom: 0.6rem; }
.mail-dialog textarea { font-size: 0.9rem; line-height: 1.45; }
.mail-dialog .hint { margin: -0.4rem 0 0.6rem; }
.mail-dialog-actions { display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end; }
.mail-dialog-actions button { margin: 0; }
/* Zavírací prvky NESMÍ dědit z button.link — ta je bílá pro tmavou hlavičku
   a na papírovém pozadí okna byla neviditelná (0.79.2, hlášeno z provozu). */
.mail-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mail-dialog-head h2 { margin: 0; }
.mail-dialog-x {
    background: none; border: none; margin: 0; padding: 0 0.2rem; line-height: 1;
    font-size: 1.6rem; color: var(--muted); cursor: pointer; text-decoration: none;
}
.mail-dialog-x:hover { background: none; color: var(--text); }
.mail-dialog-close {
    background: none; border: none; margin: 0; padding: 0;
    color: var(--brand); text-decoration: underline; cursor: pointer;
}
.mail-dialog-close:hover { background: none; color: var(--brand-dark); }

.mdp-tabs { display: flex; gap: 0.2rem; margin: 1rem 0 0.9rem; border-bottom: 1px solid var(--border); }
.mdp-tabs button {
    margin: 0; padding: 0.5rem 0.8rem; background: none; border: none;
    border-bottom: 3px solid transparent; border-radius: 0;
    color: var(--muted); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.mdp-tabs button:hover { background: none; color: var(--text); }
.mdp-tabs button[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 800; }

.mdp-kv { display: grid; grid-template-columns: 9rem 1fr; gap: 0.45rem 0.75rem; margin: 0 0 1rem; }
.mdp-kv dt { color: var(--muted); font-size: 0.85rem; }
.mdp-kv dd { margin: 0; font-size: 0.9rem; }

.mdp-sub { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 1rem 0 0.5rem; }

.mdp-guardian {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0; border-bottom: 1px solid var(--border);
}
.mdp-guardian:last-of-type { border-bottom: none; }
.mdp-guardian-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mdp-guardian-body strong { font-size: 0.9rem; }
.mdp-guardian-sub { color: var(--muted); font-size: 0.8rem; }
.mdp-pending { border: 1px dashed var(--brand); border-radius: var(--radius); padding: 0.55rem 0.7rem; margin-top: 0.5rem; }
.mdp-pending > .ms { color: var(--warn); }

.mdp-rights { display: inline-flex; gap: 0.35rem; }
.mdp-rights .ms { font-size: 1.05rem; color: #D8D2CC; }
.mdp-rights .ms.on { color: var(--ok); }

.chip-primary { background: #F4E6E8; color: var(--bordo-2); }

.mdp-statbox {
    display: flex; flex-direction: column; gap: 0.15rem;
    background: var(--bordo); color: #fff;
    border-radius: var(--radius); padding: 0.9rem 1rem; margin: 0 0 0.75rem;
}
.mdp-statbox-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
.mdp-statbox-value { font-size: 1.6rem; font-weight: 800; }
.mdp-statbox-sub { font-size: 0.8rem; opacity: 0.8; }
.mdp-ministats { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
.mdp-list { list-style: none; margin: 0; padding: 0; }
.mdp-list li {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem;
}
.mdp-list li:last-child { border-bottom: none; }
.mdp-list li .chip { margin-left: auto; }

/* Přestupy (Fáze 7e) — static-SSR split (bez QuickGrid ostrova), vlastní tf-*
   prefix, aby se nekřížilo s member-table/mdp (jiný agent, stejná feature-oblast). */
.chip-danger { background: #F4E6E8; color: var(--brand-dark); }
.chip-danger .dot { background: var(--danger); }

.tf-tabs { display: flex; gap: 0.4rem; margin: 0.75rem 0; }
.tf-tabs a {
    padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
    color: var(--muted); text-decoration: none; background: #F4F0EC;
}
.tf-tabs a.active { background: var(--brand); color: #fff; }

/* Filtr stavu na /admin/prestupy — checkboxy misto <select>, aby slo vybrat
   „vse krome Dokoncen" bez ctrl+klikani. */
/* Rozbalovací seznam (<details>) — popisek nahoře jako u ostatních polí filtru. */
.tf-status-field {
    display: flex; flex-direction: column; gap: 0.3rem;
    font-size: 0.85rem; font-weight: 600; color: var(--muted);
}
.tf-status-dd { position: relative; }
.tf-status-dd > summary {
    list-style: none; cursor: pointer; min-width: 14rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.5rem 0.7rem; background: #fff; color: var(--text); font-weight: 400;
    border: 1px solid var(--border); border-radius: var(--radius);
}
.tf-status-dd > summary::-webkit-details-marker { display: none; }
.tf-status-dd > summary::after { content: "▾"; font-size: 0.8em; color: var(--muted); }
.tf-status-dd[open] > summary::after { content: "▴"; }
.tf-status-dd-panel {
    position: absolute; left: 0; top: calc(100% + 0.3rem); min-width: 100%; z-index: 200;
    display: flex; flex-direction: column; padding: 0.3rem;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
/* .filter-fields label (sloupec 12rem, text pod polem) by jinak volby rozházel
   přes celou šířku — tahle pravidla musí mít vyšší specifitu. */
.filter-fields .tf-status-opt {
    flex-direction: row; flex: none; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.5rem; border-radius: 8px;
    font-size: 0.9rem; font-weight: 400; color: var(--text);
    white-space: nowrap; cursor: pointer;
}
.filter-fields .tf-status-opt:hover { background: var(--paper); }
.tf-status-opt input { margin: 0; }
.tf-status-dd-apply { margin: 0.3rem 0.2rem 0.1rem; }
.tf-status-shortcut { font-size: 0.85rem; align-self: center; margin-left: 0.4rem; }

.tf-split { display: flex; align-items: flex-start; gap: 0; }
.tf-list { flex: 1 1 auto; min-width: 0; }

.tf-row-open { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tf-table tbody tr:has(.tf-row-open.selected) td { background: #FBEEF0; }
.tf-table tbody tr:has(.tf-row-open.selected) td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.tf-table tbody tr:hover td { background: #FCFAF9; }
.tf-contact-sub { font-size: 0.78rem; color: var(--muted); }

.tf-panel {
    flex: 0 0 480px; max-width: 480px; min-height: 320px;
    margin-left: 1rem; padding: 1.1rem 1.2rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: -8px 0 24px rgba(40, 15, 20, 0.04);
    position: sticky; top: calc(62px + 1rem);
}
.tf-head { display: flex; gap: 0.9rem; align-items: flex-start; justify-content: space-between; }
.tf-head-body { flex: 1; min-width: 0; }
.tf-name { font-size: 1.35rem; font-weight: 900; margin: 0 0 0.4rem; }
.tf-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.tf-close { color: var(--muted); text-decoration: none; padding: 0.2rem; }
.tf-close:hover { color: var(--text); }

.tf-kv { display: grid; grid-template-columns: 8rem 1fr; gap: 0.4rem 0.75rem; margin: 1rem 0; }
.tf-kv dt { color: var(--muted); font-size: 0.85rem; }
.tf-kv dd { margin: 0; }
.tf-fee { font-weight: 700; }

/* Založení člena z žádosti o členství ve frontě FAČR — pět polí a tlačítko
   v buňce tabulky; bez zalomení by řádek roztáhl celou tabulku. */
.facr-create { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.5rem; }
.facr-create input, .facr-create select { min-width: 0; }
.facr-create input[name="firstName"], .facr-create input[name="lastName"] { flex: 1 1 7rem; }
.facr-create input[name="facrId"] { flex: 0 1 7rem; font-variant-numeric: tabular-nums; }
.facr-create input[name="birth"] { flex: 0 1 9rem; }
.facr-create select { flex: 0 1 7rem; }

.tf-loan-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; }
.tf-loan-actions form { margin: 0; }

.tf-doclist, .tf-notelist { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.tf-doclist li {
    display: flex; justify-content: space-between; gap: 0.5rem;
    padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem;
}
.tf-doc-date { color: var(--muted); }
.tf-notelist li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.tf-note-meta { display: flex; gap: 0.5rem; color: var(--muted); font-size: 0.78rem; margin-bottom: 0.15rem; }

@media (max-width: 1100px) {
    .tf-panel {
        position: fixed; top: 0; right: 0; bottom: 0; margin: 0;
        border-radius: 0; overflow-y: auto; z-index: 150;
        box-shadow: -12px 0 32px rgba(40, 15, 20, 0.18);
    }
}
@media (max-width: 700px) {
    .tf-panel { left: 0; max-width: none; flex-basis: auto; }
}

/* Užší okna: panel jako overlay přes grid */
@media (max-width: 1100px) {
    .mdp {
        position: fixed; top: 0; right: 0; bottom: 0; margin: 0;
        border-radius: 0; overflow-y: auto; z-index: 150;
        box-shadow: -12px 0 32px rgba(40, 15, 20, 0.18);
    }
}
@media (max-width: 700px) {
    .mdp { left: 0; max-width: none; flex-basis: auto; }
}

/* Proužek neprodukčního prostředí (App:EnvironmentLabel). Nad vším ostatním,
   sticky — musí být vidět i po odscrollování, jinak ztrácí smysl. Tisk ho
   nechává být záměrně: vytištěná soupiska z testu má být poznat. */
.env-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .35rem .75rem;
    background: var(--brand);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
}

.env-banner .ms { font-size: 1.1rem; }

/* Rychlá pozvánka nového člena v admin shellu a na dashboardu (do 0.120 spouštěč
   režimu „Na hřišti") — jen na dotykovém zařízení; na desktopu (myš) skryté. */
nav.shell-nav a.shell-nav-field { display: none; }
.dash-field-cta { display: none; }
@media (pointer: coarse) {
    nav.shell-nav a.shell-nav-field { display: flex; }
    .dash-field-cta {
        display: flex; align-items: center; justify-content: center; gap: .5rem;
        background: var(--brand); color: #fff; font-weight: 700; font-size: 1.1rem;
        padding: 1rem; border-radius: var(--radius); text-decoration: none;
        margin: 0 0 1rem; min-height: 56px;
    }
    .dash-field-cta .ms { font-size: 1.5rem; }
}

/* Tabulkový rozpis zápasů (/admin/rozlosovani) — matice den × tým, jako excel */
.rz-scroll { overflow-x: auto; }
.rz-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.rz-table th, .rz-table td {
    border: 1px solid #b8b8b8;
    padding: 0.2rem 0.4rem;
    text-align: center;
    vertical-align: middle;
}
.rz-table thead th {
    background: var(--paper);
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 2;
}
.rz-daycol {
    white-space: nowrap;
    text-align: left !important;
    font-weight: 600;
    background: var(--paper);
    position: sticky;
    left: 0;
    z-index: 1;
}
.rz-table thead .rz-daycol { z-index: 3; }
.rz-home { background: #BFBFBF; }   /* domácí — šedě (jako excel) */
.rz-away { background: #FFFFFF; }   /* venkovní — bíle */
.rz-empty { background: transparent; border-color: #e0e0e0; }
.rz-match { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; }
.rz-match + .rz-match { margin-top: 0.15rem; border-top: 1px dotted #999; padding-top: 0.15rem; }
.rz-opp { font-weight: 600; }
.rz-time { color: #444; font-size: 0.78rem; }
.rz-cancelled { text-decoration: line-through; color: var(--muted); }
.rz-legend { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.rz-swatch { display: inline-block; width: 1rem; height: 1rem; border: 1px solid #999; margin-left: 0.75rem; }
.rz-swatch.rz-home { background: #BFBFBF; }
.rz-swatch.rz-away { background: #FFFFFF; }

/* Vydané faktury (0.79.0). Formulář je dlouhý — pole odběratele a platby jdou
   do dvou sloupců, na mobilu do jednoho. Popis položky dostane většinu šířky. */
.invoice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1rem; }
.invoice-grid legend { grid-column: 1 / -1; }
.invoice-lookup { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: flex-end; }
.invoice-lookup form { display: flex; gap: 0.5rem; align-items: flex-end; flex: 1 1 20rem; }
.invoice-lookup label { flex: 1; }
.invoice-lookup button { margin: 0; }
.invoice-items th:first-child, .invoice-items td:first-child { width: 55%; }
.invoice-items input { margin: 0; }
.invoice-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0 0 1rem; }
.invoice-actions .btn { margin-top: 0; }
.invoice-detail { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0 0 1rem; }
.invoice-detail dt { color: var(--muted); }
.invoice-detail dd { margin: 0; }
.invoice-total { font-size: 1.15rem; }
.invoice-qr { display: flex; gap: 1rem; align-items: center; margin: 0 0 1rem; }
.invoice-qr img { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 4px; }
.invoice-qr .hint { margin: 0.2rem 0 0; max-width: 32rem; }
.invoice-items-box > summary { font-weight: 700; margin-bottom: 0.5rem; }

/* Rozcestník rolí (0.83.0) — jeden účet, víc klobouků. Ukazuje se jen tomu,
   kdo má víc než jednu možnost, takže je to vstupní obrazovka, ne mezikrok. */
.hub { max-width: 44rem; margin: 3rem auto; padding: 0 1rem; }
.hub h1 { margin-bottom: 0.3rem; }
.hub-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; margin: 1.5rem 0; }
.hub-tile {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1.1rem; text-decoration: none; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.hub-tile:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(40, 15, 20, 0.08); }
.hub-tile > .ms { font-size: 1.8rem; color: var(--brand); }
.hub-tile-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.hub-tile-sub { color: var(--muted); font-size: 0.85rem; }
.hub-logout { margin-top: 1rem; }

/* Přepínač role v hlavičkách */
.shell-switch, .portal-switch {
    display: inline-flex; align-items: center; gap: 0.3rem;
    text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.shell-switch { color: var(--muted); }
.shell-switch:hover { color: var(--text); }
.portal-switch { color: #fff; }
@media (max-width: 700px) { .shell-switch-label { display: none; } }

/* Přepínač jazyka (11.1) — malý, nenápadný, funguje bez JS (POST na /jazyk). */
.lang-switch { display: inline-flex; align-items: center; gap: 0.15rem; }
.lang-switch form { display: inline; margin: 0; }
.lang-switch button, .lang-current {
    background: none; border: none; margin: 0; padding: 0.15rem 0.35rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
    color: var(--muted); cursor: pointer; border-radius: 4px;
}
.lang-switch button:hover { background: rgba(0,0,0,0.05); color: var(--text); }
.lang-current { color: var(--brand); cursor: default; }
.lang-switch-dark button { color: rgba(255,255,255,0.75); }
.lang-switch-dark button:hover { background: rgba(255,255,255,0.15); color: #fff; }
.lang-switch-dark .lang-current { color: #fff; }
/* Vlaječky místo CZ/EN/UA — aktivní jazyk plný a orámovaný, ostatní ztlumené. */
.lang-switch button, .lang-current { display: inline-flex; align-items: center; line-height: 0; }
.lang-switch .flag {
    display: block; width: 1.5rem; height: 1rem; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.lang-switch button .flag { opacity: 0.6; transition: opacity 0.15s; }
.lang-switch button:hover .flag, .lang-switch button:focus-visible .flag { opacity: 1; }
.lang-current .flag { box-shadow: 0 0 0 2px var(--brand); }
.lang-switch-dark .lang-current .flag { box-shadow: 0 0 0 2px #fff; }

/* Akce u řádku plateb — odkaz „Přiřadit" a tlačítko „Nepříspěvková" vedle sebe. */
.row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.row-actions form { margin: 0; }
.row-actions button {
    margin: 0;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

/* Pohledávky — řádek musí zůstat jednořádkový (0.88.2). Důvod prominutí/zrušení
   se zadává v okně `#fee-dialog`, v řádku jsou jen dvě tlačítka vedle sebe. */
.data-table td.nowrap, .data-table th.nowrap { white-space: nowrap; }
.fee-actions { display: flex; gap: 0.4rem; align-items: center; }
.fee-actions button { margin: 0; white-space: nowrap; }
/* Akce u pohledávky jako ikony s tooltipem (0.100.1). Pořadí je pevné
   (prominout · zrušit · upravit), aby ikona byla ve všech řádcích na stejném místě. */
.fee-actions { justify-content: flex-end; }
.fee-icon {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    border-radius: 999px; border: 1px solid var(--border);
    background: #fff; color: var(--muted);
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.fee-icon .ms { font-size: 1.25rem; vertical-align: 0; }
.fee-icon-waive:hover, .fee-icon-waive:focus-visible { background: #e6f4ea; color: #1c6b34; border-color: #b9dfc6; }
.fee-icon-cancel:hover, .fee-icon-cancel:focus-visible { background: #F4E6E8; color: var(--brand-dark); border-color: #e8bcc3; }
.fee-icon-edit:hover, .fee-icon-edit:focus-visible { background: #eef2fb; color: #2b4c8c; border-color: #c9d5ef; }
.fee-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Tooltip: vlastní místo title, protože se ukáže hned (title čeká ~1 s)
   a i při ovládání klávesnicí. */
.fee-icon[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(2px);
    padding: 0.3rem 0.55rem; border-radius: 6px;
    background: #2a2224; color: #fff;
    font-size: 0.78rem; font-weight: 600; white-space: nowrap;
    pointer-events: none; opacity: 0; z-index: 5;
    transition: opacity 0.12s, transform 0.12s;
}
.fee-icon[data-tip]:hover::after, .fee-icon[data-tip]:focus-visible::after {
    opacity: 1; transform: translateX(-50%) translateY(0);
}
.fee-note {
    max-width: 32rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Souhrn nad pohledávkami (0.88.3) — počítá z právě zobrazeného výběru. */
.fee-summary {
    display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0.6rem 0 1rem;
    padding: 0.7rem 1rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.fee-summary > div { display: flex; flex-direction: column; gap: 0.15rem; }
.fee-summary dt { margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.fee-summary dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.fee-summary-total dd { color: var(--brand); font-size: 1.1rem; }

/* Návrhy „komu platba patří" v přiřazovacím panelu (0.89.0). */
.pay-suggestions { list-style: none; margin: 0.4rem 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.pay-suggestions li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pay-suggestions form { margin: 0; }
.pay-suggestions button { margin: 0; }
.pay-suggestions .hint { margin: 0; }

/* Platby v portálu (0.100): souhrn „v pořádku / k úhradě / po splatnosti",
   barevná dlaždice na profilu a reklamace předpisu. */
.portal-fee-summary {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0.5rem 0 0.75rem; padding: 0.65rem 0.8rem; border-radius: 10px;
    font-weight: 700;
}
.portal-fee-summary .ms { font-size: 1.3rem; vertical-align: 0; }
.portal-fee-summary-ok { background: #e6f4ea; color: #1c6b34; }
.portal-fee-summary-warn { background: #fdf0e3; color: #8a5300; }
.portal-fee-summary-danger { background: #F4E6E8; color: var(--brand-dark); }
.portal-fee-row.portal-fee-danger { box-shadow: inset 3px 0 0 var(--danger); padding-left: 0.6rem; }
.portal-fee-row.portal-fee-warn { box-shadow: inset 3px 0 0 var(--warn); padding-left: 0.6rem; }

.portal-stat-ok .portal-stat-value { color: #1c6b34; }
.portal-stat-warn .portal-stat-value { color: #8a5300; }
.portal-stat-danger .portal-stat-value { color: var(--brand-dark); }
.portal-stat-danger { box-shadow: inset 0 0 0 2px var(--danger); }

.portal-claim-state { gap: 0.5rem; font-size: 0.9rem; }
.portal-claim-state .ms { font-size: 1.15rem; vertical-align: 0; }
.portal-claim-open { color: #8a5300; }
.portal-claim-resolved { color: #1c6b34; }
.portal-claim-rejected { color: var(--brand-dark); }

.portal-claim { flex: 1; }
.portal-claim-toggle {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px;
    color: var(--brand); cursor: pointer; list-style: none; font-size: 0.9rem; font-weight: 600;
}
.portal-claim-toggle::-webkit-details-marker { display: none; }
.portal-claim-toggle .ms { font-size: 1.1rem; vertical-align: 0; }
.portal-claim-form {
    display: flex; flex-direction: column; gap: 0.5rem;
    margin: 0.4rem 0 0.25rem; padding: 0.6rem;
    background: var(--paper, #FAF8F6); border: 1px solid var(--border); border-radius: 8px;
}
.portal-claim-reasons { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.portal-claim-reasons > legend { padding: 0; color: var(--bordo); font-size: 0.8rem; font-weight: 700; }
.portal-claim-reasons label { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; }
.portal-claim-form textarea { width: 100%; }
.portal-claim-form button { align-self: flex-start; margin-top: 0.25rem; min-height: 40px; }
/* „Jiný důvod" nepotřebuje datum/účet — bez :has() zůstanou pole vidět a stačí poznámka. */
.portal-claim-form:has(input[name="reason"][value="2"]:checked) .portal-claim-paid { display: none; }

.fee-claims-alert { padding: 0.5rem 0.75rem; border-radius: 8px; background: #fdf0e3; color: #8a5300; }
.fee-claim-resolve { display: flex; flex-direction: column; gap: 0.35rem; min-width: 14rem; }
.fee-claim-resolve button { margin-top: 0; }

/* ===================================================================
   Veřejný web klubu (Fáze 10) — prefix .pw-. Struktura podle vzoru
   (D5), vzhled z vlastních tokenů klubu. Mobil první.
   =================================================================== */
.pw-header {
    background: var(--bordo);
    color: #fff;
    border-bottom: 4px solid var(--brand);
}
.pw-header-inner,
.pw-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.75rem 1rem;
}
.pw-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.pw-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    text-decoration: none;
}
.pw-logo { height: 56px; width: auto; }
.pw-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.pw-club-name { font-weight: 800; font-size: 1.15rem; }
.pw-motto { font-size: 0.85rem; opacity: 0.8; }
.pw-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pw-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
}
.pw-nav a:hover { background: rgba(255, 255, 255, 0.12); }

main.pw-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
    /* Tmavší doplňkový text než v aplikaci — #8A817B na bílé nesplňuje kontrast
       4,5 : 1 (WCAG AA, axe v PublicWebQualityTests). */
    --muted: #645B55;
}

.pw-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pw-cta {
    display: inline-block;
    margin-top: 1rem;
    background: #fff;
    color: var(--brand-dark);
    font-weight: 800;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    text-decoration: none;
}

.pw-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
}
.pw-block h2 { margin-top: 0; }
.pw-block h3 { font-size: 1rem; margin: 0.75rem 0 0.5rem; }
.pw-muted { color: var(--muted); }

.pw-team-switch { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.pw-team-switch a {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
}
.pw-team-switch a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.pw-match-columns { display: grid; gap: 1rem; }
@media (min-width: 760px) {
    .pw-match-columns { grid-template-columns: 1fr 1fr; }
}
.pw-matches { list-style: none; margin: 0; padding: 0; }
.pw-match {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.1rem 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}
.pw-match:last-child { border-bottom: 0; }
.pw-match-when { grid-column: 1; font-size: 0.85rem; color: var(--muted); }
.pw-match-teams { grid-column: 1; font-weight: 700; }
.pw-match-meta { grid-column: 1; font-size: 0.85rem; color: var(--muted); }
.pw-score {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    font-size: 1.2rem;
    background: var(--bordo);
    color: #fff;
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
}

.pw-footer {
    background: var(--bordo-dark, #2A0A10);
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2rem;
    font-size: 0.9rem;
}
.pw-footer-inner {
    display: grid;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 760px) {
    .pw-footer-inner { grid-template-columns: 2fr 1fr 1fr; }
}
.pw-footer a { color: #fff; }
.pw-footer .pw-muted { color: rgba(255, 255, 255, 0.6); }
.pw-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pw-facr-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.25rem 0 0.5rem; font-size: 0.9rem; }
/* Kalendář tréninků a zápasů (Google embed) a sekce Odkazy a dokumenty. */
.pw-cal-views { margin-bottom: 0.75rem; }
.pw-cal-embed { display: block; width: 100%; height: 640px; border: 1px solid var(--line, #e5e0dc); border-radius: 8px; background: #fff; }
@media (max-width: 640px) { .pw-cal-embed { height: 520px; } }
.pw-links { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.5rem; }
.pw-link-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; padding: 0.6rem 0.8rem;
    border: 1px solid var(--line, #e5e0dc); border-radius: 8px; background: #fff; }
.pw-link-item a { font-weight: 600; }
.pw-link-item .pw-muted { flex-basis: 100%; font-size: 0.9rem; }
.pw-badge { font-size: 0.75rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--brand); color: #fff; }

.pw-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 760px) {
    .pw-contacts { grid-template-columns: repeat(2, 1fr); }
}
.pw-contact { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; }
.pw-contact-name { font-weight: 800; }
.pw-contact-title { color: var(--brand-dark); font-weight: 600; font-size: 0.9rem; }
.pw-contact a { display: block; }
.pw-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0; }
.pw-dl dt { color: var(--muted); }
.pw-dl dd { margin: 0; }

/* Řez 2 — týmy, soupisky, tabulky (10.3, 10.22, 10.23). */
.pw-nav { align-items: center; }
.pw-nav-teams { position: relative; }
.pw-nav a.pw-nav-is { border: 1px solid rgba(255, 255, 255, 0.45); }
.pw-nav a.pw-nav-fb { display: inline-flex; align-items: center; gap: 0.3rem; }
@media (min-width: 760px) {
    .pw-nav-fb-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.pw-nav-teams summary {
    list-style: none;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
}
.pw-nav-teams summary::-webkit-details-marker { display: none; }
.pw-nav-teams summary::after { content: " ▾"; font-size: 0.8em; }
.pw-nav-teams summary:hover { background: rgba(255, 255, 255, 0.12); }
.pw-nav-teams ul {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0.35rem;
    background: var(--bordo);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
@media (min-width: 760px) {
    .pw-nav-teams ul { position: absolute; right: 0; z-index: 20; min-width: 15rem; }
}
.pw-nav-teams li a { display: block; }
.pw-match-teams { color: inherit; text-decoration: none; }
a.pw-match-teams:hover { text-decoration: underline; }

.pw-team-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.pw-team-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    font-weight: 800;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);
}
.pw-team-card:hover { border-color: var(--brand); color: var(--brand-dark); }
.pw-team-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }

.pw-team-head h1 { margin: 0 0 0.75rem; }
.pw-team-photo { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius); margin-bottom: 0.75rem; }
.pw-tabs { display: flex; gap: 0.25rem; overflow-x: auto; margin-bottom: 0.75rem; border-bottom: 2px solid var(--border); }
.pw-tabs a {
    white-space: nowrap;
    padding: 0.5rem 0.8rem;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.pw-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }
.pw-prose { max-width: 70ch; }

.pw-roster { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.pw-player { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.6rem; }
.pw-player-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.pw-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--paper); color: var(--bordo); font-weight: 800; border: 1px solid var(--border); }
.pw-player-name { font-weight: 700; }
.pw-jersey { display: inline-block; min-width: 1.6rem; color: var(--brand); font-family: 'JetBrains Mono', ui-monospace, monospace; }

.pw-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pw-table th, .pw-table td { padding: 0.4rem 0.5rem; text-align: center; border-bottom: 1px solid var(--border); }
.pw-table th { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.pw-table .pw-left { text-align: left; }
.pw-table tr.pw-ours td { background: color-mix(in srgb, var(--brand) 12%, transparent); font-weight: 800; }
.pw-source { font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0 0; }

.pw-scorers { margin: 0; padding-left: 1.5rem; }
.pw-scorers li { padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.pw-scorers li > span { display: inline-block; min-width: 70%; }

/* Zápasy jako karty s logy klubů (podle starého webu). */
.pw-match-cards { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.pw-match-strip { grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.4rem; }
.pw-match-strip > li { scroll-snap-align: start; }
@media (max-width: 759px) {
    .pw-match-strip { grid-auto-columns: 88%; }
}
.pw-match-card a { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; height: 100%; padding: 0.9rem 0.75rem; text-align: center; color: var(--ink); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pw-match-card a:hover { border-color: var(--brand); }
.pw-match-card-comp { color: var(--brand-dark); font-size: 0.85rem; font-weight: 600; }
.pw-match-card-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; width: 100%; }
.pw-match-card-team { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 0; }
.pw-match-card-logo { width: 56px; height: 56px; object-fit: contain; }
.pw-match-card-nologo { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper); border: 1px solid var(--border); color: var(--bordo); font-weight: 800; }
.pw-match-card-name { font-weight: 700; font-size: 0.9rem; line-height: 1.2; overflow-wrap: anywhere; }
.pw-match-card .pw-score { grid-column: auto; grid-row: auto; background: none; color: var(--brand); font-size: 1.6rem; font-weight: 800; padding: 0; letter-spacing: 0.08em; white-space: nowrap; }
.pw-match-card-vs { font-weight: 800; font-size: 1.1rem; color: var(--ink); white-space: nowrap; }
.pw-match-card-when { color: var(--muted); font-size: 0.85rem; }

/* Novinky (10.5) — karty, karusel se scroll-snap bez JS. */
.pw-articles { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.pw-carousel {
    display: grid;
    grid-auto-flow: column;
    /* Velké obrázky (0.124.2): na šířku stránky dvě karty vedle sebe. */
    grid-auto-columns: calc((100% - 0.75rem) / 2);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
}
.pw-carousel > li { scroll-snap-align: start; }
@media (max-width: 759px) {
    .pw-carousel { grid-auto-columns: 90%; }
}
.pw-article-card a {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.pw-article-card a:hover { border-color: var(--brand); }
.pw-article-card img, .pw-article-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pw-article-placeholder { background: linear-gradient(135deg, var(--brand) 0%, var(--bordo) 100%); }
.pw-article-meta { font-size: 0.8rem; color: var(--muted); padding: 0 0.75rem; }
.pw-article-title { font-weight: 800; font-size: 1.1rem; padding: 0 0.75rem; }
.pw-article-perex { font-size: 0.9rem; color: var(--muted); padding: 0 0.75rem 0.75rem; }
.pw-article-card a > :last-child { padding-bottom: 0.75rem; }
.pw-article h1 { margin: 0.25rem 0 0.5rem; }
.pw-article-lead { font-size: 1.1rem; font-weight: 600; }
.pw-article-cover { width: 100%; max-height: 640px; object-fit: contain; border-radius: var(--radius); margin: 0.5rem 0 1rem; background: var(--paper); }
.pw-pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }

/* Administrace sekce Web — záložky. */
.admin-web-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1rem; border-bottom: 2px solid var(--border); }
.admin-web-tabs a { padding: 0.45rem 0.8rem; font-weight: 700; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.admin-web-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }
.admin-web-tabs a:last-child { margin-left: auto; }

.admin-photo-grid { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.admin-photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }

/* Partneři (10.6) a statické stránky (10.9). */
.pw-sponsors { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.pw-sponsors li a, .pw-sponsors li > span { display: flex; align-items: center; justify-content: center; min-height: 64px; color: var(--ink); text-decoration: none; }
.pw-sponsors img { max-height: 56px; max-width: 160px; width: auto; object-fit: contain; }
.pw-sponsors-large img { max-height: 110px; max-width: 260px; }
.pw-sponsor-name { font-weight: 700; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; }
.pw-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.pw-prose h2 { font-size: 1.2rem; margin-top: 1.25rem; }
.pw-prose table { border-collapse: collapse; }
.pw-prose th, .pw-prose td { border-bottom: 1px solid var(--border); padding: 0.3rem 0.6rem; text-align: left; }

/* Klubové předměty (10.10) a média (10.24). */
.pw-merch { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.pw-merch-item { display: flex; flex-direction: column; gap: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; background: var(--surface); }
.pw-merch-item img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pw-merch-name { font-weight: 800; }
.pw-merch-price { font-weight: 800; color: var(--brand); font-size: 1.1rem; }
.pw-merch-unavailable img { filter: grayscale(1); opacity: 0.6; }
.pw-gallery { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(min(45%, 11rem), 1fr)); }
.pw-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.pw-video-frame { position: relative; aspect-ratio: 16 / 9; }
.pw-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pw-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; }
.pw-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pw-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }

/* Vedení klubu na Kontaktech. */
.pw-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.pw-board-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--surface); }
.pw-board-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 0.4rem; }
.pw-board-item .pw-initials { display: inline-flex; font-size: 2rem; }

/* Náš IS — rozcestník do aplikace. */
.pw-is-actions { display: grid; gap: 1rem; margin: 1rem 0; }
@media (min-width: 760px) {
    .pw-is-actions { grid-template-columns: 1fr 1fr; }
}
.pw-is-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; background: var(--surface); }
.pw-is-card h2 { margin-top: 0; font-size: 1.15rem; }
.pw-button { display: inline-block; background: var(--brand); color: #fff; font-weight: 800; padding: 0.6rem 1.1rem; border-radius: 8px; text-decoration: none; }
.pw-button:hover { background: var(--brand-dark); }
.pw-button-secondary { background: var(--bordo); }

/* Kde hrajeme (10.8c). */
.pw-venue-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) {
    .pw-venue-grid { grid-template-columns: 1fr 1fr; }
}
.pw-venue-photo { width: 100%; border-radius: var(--radius); margin-bottom: 0.5rem; }
.pw-venue-map { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: var(--radius); }

.pw-match-detail h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 1.5rem; }
.pw-score-big { font-size: 1.6rem; }
.pw-vs { color: var(--muted); }

/* Přiřazení platby členovi bez pohledávky — otázka „vytvořit předpis?" (2026-10-06). */
.pay-create-fee { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0.5rem 0 1rem; background: var(--surface); }
.pay-create-fee h3 { margin-top: 0; }
.pay-create-fee h4 { margin: 0.8rem 0 0.4rem; }
.pay-create-fee form { margin-top: 0.6rem; }

/* Výzva k platbě /q/{token} (0.113) — stránka pro rodiče z WhatsApp odkazu, hlavně na mobilu. */
.pay-request { max-width: 32rem; margin: 0 auto; }
.pay-request-fee { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; margin: 0 0 1rem; background: var(--surface); }
.pay-request-fee h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.pay-request-fee .qr-platba { display: block; margin: 0 auto 0.75rem; }
.pay-request-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0; }
.pay-request-dl dt { color: var(--muted); }
.pay-request-dl dd { margin: 0; overflow-wrap: anywhere; }

/* Akce v řádku tabulky jako kulaté ikony s tooltipem místo textových odkazů
   a velkých červených tlačítek (0.114.1, Týmy). Funguje pro <a> i <button>
   — tlačítko musí přebít globální červený styl. Popis nese aria-label/title. */
.icon-actions { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.icon-actions form { margin: 0; display: inline-flex; }
.icon-actions .icon-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: 0; padding: 0;
    border-radius: 999px; border: 1px solid var(--border);
    background: #fff; color: var(--muted); text-decoration: none;
    box-shadow: none;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.icon-actions .icon-action .ms { font-size: 1.2rem; vertical-align: 0; }
.icon-actions .icon-action:hover, .icon-actions .icon-action:focus-visible {
    background: #F4E6E8; color: var(--brand-dark); border-color: #e8bcc3;
}
.icon-actions .icon-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.icon-actions .hint { margin: 0 0 0 0.2rem; font-size: 0.8rem; }
/* Pole + ikona v jednom formuláři (e-mail k odeslání, důvod storna) — Potvrzení. */
.icon-actions .icon-actions-mail { gap: 0.35rem; align-items: center; }
.icon-actions .icon-actions-mail input { margin: 0; width: 15rem; }