/* ── SVG widza: ukryj obramowania ramek (służą tylko do pozycjonowania w Inkscape) ── */
#widz-svg-container rect {
    stroke: none !important;
}

/* ── DatePickerSingle (Dash 4): kolory kalendarza ──────────────────────────────
   Kolory (zaznaczony / hover / dni turnieju) sterowane z SA → Wzory kalendarzy
   i generowane do assets/calendar_colors.css (+ live inject z _generate_ui_css).
   Nic tu nie zaszywamy na sztywno, żeby konfiguracja miała pełną kontrolę. */

/* ── Recepcja: nagłówek dnia w liście kategorii (Zamknięcie kategorii) ─────────
   Tryb jasny — jasnoszare tło; dark override w assets/dark_mode.css. */
.recepcja-dzien-header {
    background-color: #e9ecef;
    border-bottom: 1px solid #ced4da;
}

/* Przycięcie zawartości do zaokrąglonych rogów kontenera — bez tego kwadratowe
   rogi nagłówka daty i listy wystają poza .rounded i narożniki wyglądają na
   „niedomknięte" (zgłoszone w AR → Zamykanie kategorii). */
.recepcja-dzien-sekcja {
    overflow: hidden;
}

/* To samo dla kafelków kategorii w panelu MC: .card ma border-radius, a tło
   .card-body (tryb ciemny, #252a33) ma proste rogi i wystaje poza zaokrąglenie
   → narożniki wyglądają na niedomknięte (zgłoszone w MC → Kategorie). */
.mc-kat-karta {
    overflow: hidden;
}

/* ── Modal: przycisk X zamykania ────────────────────────────────────────────── */

.modal-header .btn-close,
.modal-fullscreen .modal-header .btn-close,
.modal .modal-header .btn-close {
    width:  20px !important;
    height: 20px !important;
    min-width: unset !important;
    min-height: unset !important;
    font-size: 0.7rem !important;
    padding: 4px !important;
    background-size: 14px !important;
    opacity: 0.6;
}

/* ── Accordion weryfikacji wieku — jasno czerwony ─────────────────────────── */

.wiek-accordion .accordion-button {
    background-color: #fde8ea;
    color: #842029;
}
.wiek-accordion .accordion-button:not(.collapsed) {
    background-color: #fde8ea;
    color: #842029;
    box-shadow: none;
}
.wiek-accordion .accordion-item {
    border-color: #f5c2c7;
    border-radius: var(--bs-border-radius) !important;
    overflow: hidden;
}

/* ── AT Panel: accordion zwijane sekcje ───────────────────────────────────── */

/* Odstęp między elementami */
.at-panel-accordion .accordion-item:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* Zaokrąglone rogi dla każdego elementu z separacją */
.at-panel-accordion .accordion-item {
    border-radius: var(--bs-border-radius) !important;
    overflow: hidden;
}

/* Szare tło zwiniętych elementów (tryb jasny) */
.at-panel-accordion .accordion-button.collapsed {
    background-color: #f1f3f5;
}

/* ── Html5QrcodeScanner — dostosowanie UI do Bootstrap ─────────────────────── */

#checkin-qr-reader {
    border: none !important;
    padding: 0 !important;
}

#checkin-qr-reader video {
    border-radius: 8px;
}

#checkin-qr-reader__scan_region {
    background: transparent !important;
}

#checkin-qr-reader__dashboard_section_swaplink {
    color: var(--bs-primary) !important;
    font-size: 0.85rem;
}

#checkin-qr-reader__dashboard button {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    font-size: 1rem !important;
    margin-top: 6px !important;
    cursor: pointer !important;
}

#checkin-qr-reader__dashboard button:hover {
    opacity: 0.85 !important;
}

#checkin-qr-reader__dashboard_section_csr span {
    font-size: 0.85rem !important;
    color: var(--bs-secondary-color, #6c757d) !important;
}

/* Ukryj zbędny nagłówek generowany przez bibliotekę */
#checkin-qr-reader__header_message {
    display: none !important;
}

/* ── Sędzia: uchwyt suwaka oceniania ─────────────────────────────────────── */

.rc-slider-vertical .rc-slider-handle {
    width:  60px !important;
    height: 60px !important;
    margin-left:   -27px !important;
    margin-bottom: -30px !important;
    border-radius: 50% !important;
}

.rc-slider-vertical .rc-slider-rail,
.rc-slider-vertical .rc-slider-track {
    width: 160px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Modal drabinki miał tu własne 80vw. USUNIĘTE 2026-07-17 — wszystkie modale MC dzielą
   teraz `.modal-mc-szeroki` (patrz niżej). Osobna reguła z `!important` i tak przebijała
   `--bs-modal-width`, więc drabinka byłaby WĘŻSZA (80vw = 614 px na tablecie w pionie)
   niż reszta paneli MC (95vw = 730 px). */

/* ── Sekcje formularza kategorii (AT) ──────────────────────────────────────── */
.at-kat-sekcja {
    border: 1px solid #000 !important;
}
.at-kat-sekcja > .card-header {
    border-bottom: 1px solid #000 !important;
}

/* ── Wiersz turnieju klikalny ───────────────────────────────────────────────── */
.at-turniej-row-hover:hover td {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* ── Globalny toast — header dziedziczy tło z komunikat-1 ──────────────────── */
.komunikat-1.toast .toast-header {
    background-color: transparent !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    color: inherit !important;
}
.dark-mode .komunikat-1.toast .toast-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Sekcja Fight Zone — czerwona ramka ────────────────────────────────────── */
.at-kat-fz-ramka {
    border: 2px solid #dc3545 !important;
    border-radius: 6px;
    padding: 10px 12px 6px 12px;
    margin-top: 4px;
}

/* AT: zakładka Customizacja przy brakach plików — reguły generowane
   dynamicznie w _generate_ui_css (klucze tab_brak_* z SA → Wygląd UI) */

/* ── Zapisy i płatność (flow) — przyklejony pasek akcji na dole okna ── */
.flow-sticky-bar {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    padding: 0.75rem 1rem;
    margin: 0 -0.25rem;
    border-top: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
}
html:not(.dark-mode) .flow-sticky-bar { background: #fff; }
html.dark-mode .flow-sticky-bar {
    background: #1e2227;
    border-top-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
}

/* Pasek akcji „Zapisz i zapłać" na telefonie — przyciski PEŁNEJ szerokości, jeden
   pod drugim, równej wysokości (2026-09-14, właściciel: klawisze "są nierówne",
   zaakceptowana referencja — szerokie, jednolite paski). Na desktopie zostaje rząd
   obok siebie jak dotąd (`d-flex flex-wrap` z Pythona) — reguła tylko pod 768px. */
@media (max-width: 767.98px) {
    .flow-sticky-bar > .d-flex {
        flex-direction: column;
        align-items: stretch !important;
    }
    .flow-sticky-bar > .d-flex > .btn {
        width: 100%;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }
}

/* ── Matryca zapisów (trener/uczestnik) — pływające nagłówek, stopka i 1. kolumna ──
   Tabela ma własny obszar przewijania (max-height + overflowY na wrapperze), więc
   position:sticky trzyma się względem tego kontenera (a nie strony). */
.zapisy-matrix thead th { position: sticky; top: 0; z-index: 3; }
.zapisy-matrix tfoot td { position: sticky; bottom: 0; z-index: 3; }
.zapisy-matrix tbody td:first-child { position: sticky; left: 0; z-index: 2; }
/* rogi (nagłówek/stopka × 1. kolumna) — sticky w obu osiach, ponad resztą */
.zapisy-matrix thead th:first-child { left: 0; z-index: 4; }
.zapisy-matrix tfoot td:first-child { left: 0; z-index: 4; }
/* linie oddzielające (border-collapse gubi ramki przy sticky) */
.zapisy-matrix thead th { box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); }
.zapisy-matrix tfoot td { box-shadow: inset 0 1px 0 rgba(0,0,0,0.15); }
.zapisy-matrix tbody td:first-child { box-shadow: inset -1px 0 0 rgba(0,0,0,0.12); }
/* tła — żeby przewijane wiersze/kolumny nie prześwitywały (jasny / ciemny) */
html:not(.dark-mode) .zapisy-matrix thead th,
html:not(.dark-mode) .zapisy-matrix tfoot td,
html:not(.dark-mode) .zapisy-matrix tbody td:first-child { background-color: #fff; }
/* jasny: WYRAŹNA zebra całych wierszy (jak w motywie ciemnym). Domyślny Bootstrap stripe
   (rgba(0,0,0,.05)) jest za subtelny i zlewa się z tłem karty → wiersze wyglądają jednolicie.
   Wymuszamy jawne kolory na WSZYSTKICH komórkach wiersza (też przyklejona 1. kolumna, która
   i tak potrzebuje solidnego, nieprześwitującego tła przy przewijaniu). */
html:not(.dark-mode) .zapisy-matrix > tbody > tr:nth-of-type(even) > * { background-color: #ffffff !important; }
html:not(.dark-mode) .zapisy-matrix > tbody > tr:nth-of-type(odd)  > * { background-color: #eef1f5 !important; }
html.dark-mode .zapisy-matrix thead th,
html.dark-mode .zapisy-matrix tfoot td,
html.dark-mode .zapisy-matrix tbody td:first-child { background-color: #1e2227; }
html.dark-mode .zapisy-matrix thead th,
html.dark-mode .zapisy-matrix tfoot td { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.15); }
html.dark-mode .zapisy-matrix tfoot td { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
html.dark-mode .zapisy-matrix tbody td:first-child { box-shadow: inset -1px 0 0 rgba(255,255,255,0.12); }

/* Podświetlenie całego wiersza na hover (jak tabela „Kryteria ocen" w AT, `hover=True`
   na `dbc.Table`) — zebra wyżej wymusza `background-color !important` na KAŻDEJ komórce,
   co bez tej reguły blokowałoby domyślny hover Bootstrapa (`.table-hover`). Trzeba
   przebić tym samym `!important`, inaczej `hover=True` nie daje żadnego efektu wizualnego. */
html:not(.dark-mode) .zapisy-matrix > tbody > tr:hover > * { background-color: #dbe7fb !important; }
html.dark-mode .zapisy-matrix > tbody > tr:hover > * { background-color: #26344a !important; }

/* ── Zapisy do turnieju (uczestnik, desktop) — zebra spójna z `.zapisy-matrix`
   trenera (2026-09-14, poprawka wyglądu po powrocie do starej tabeli: właściciel —
   "wiersze mają być kolorystycznie identyczne jak w zapisie u trenera"). Zebra sama
   idzie ze `striped=True` na `dbc.Table` (jak `.zapisy-matrix`) — tu tylko wysokość
   wiersza/padding, bo pierwsza wersja przywróconej tabeli (goły `dbc.Row`) nie miała
   żadnego z tego i wyglądała ubogo/ściśnięto. */
.uczestnik-zapisy-table > tbody > tr > td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

.flow-krok-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--bs-primary, #2c3e50);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    flex: 0 0 auto;
}

/* ── Panel Trener/Uczestnik: zakładki przewijalne w poziomie zamiast łamania na
   kilka linii (2026-09-14, audyt responsywności — telefon). Domyślny Bootstrap
   `.nav-tabs` ma `flex-wrap: wrap` — przy 8-9 zakładkach (uczestnik-tabs/trener-tabs)
   to na 360px kilka linii łamanego tekstu NAD właściwą treścią, w tym najważniejsza
   biznesowo zakładka „⚡ Zapisz i zapłać" gdzieś w środku. Fix: wymuszamy JEDNĄ linię
   ze scrollem poziomym (ten sam duch co kontrolowany scroll `.zapisy-matrix` — scroll
   ograniczony do paska zakładek, nie do całej strony). Celowane po ID (nie globalnie
   `.nav-tabs`) — inne dbc.Tabs w projekcie (AT, kreator, SA) mają inną liczbę zakładek
   i inne wymagania, nie dotykamy ich tą zmianą. */
#uczestnik-tabs > .nav-tabs,
#trener-tabs > .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ── Panel Uczestnika: kafelki na telefonie zamiast paska zakładek (2026-09-14,
   druga runda audytu responsywności — nawet przewijalny rząd 9 zakładek został
   uznany za nieczytelny na wąskim ekranie). `.panel-tabs-desktop` (dbc.Tabs, jedyny
   mechanizm STERUJĄCY routingiem treści — patrz `uczestnik_render_tab_on_switch`
   w app.py) chowany na <768px Bootstrapowym `d-none d-md-block`; kafelki
   (`.panel-kafelki`, `d-md-none`) widoczne TYLKO tam. Kafelki tylko USTAWIAJĄ
   `uczestnik-tabs.active_tab` (`panel_kafel_klik`, app.py) — nie duplikują żadnej
   logiki renderowania. Desktop/tablet (≥768px) nietknięty — dostaje dokładnie to,
   co miał wcześniej (pasek zakładek). */
.panel-tabs-desktop { display: none; }
@media (min-width: 768px) {
    .panel-tabs-desktop { display: flex; }
}

/* ── Panel Uczestnik/Trener na telefonie — Wariant B (2026-09-23, właściciel
   zatwierdził na makiecie): pasek "Wybrany turniej" (dropdown) + segment
   control Uczestnik/Trener jako DWA zwarte poziome paski u góry, zamiast
   pionowego sidebaru desktopu — kafelki nawigacyjne (`.panel-kafelki`)
   zaczynają się wyżej na wąskim ekranie. `#panel-main-tabs` (pierwszy poziom
   sidebaru, `<ul>` z przyciskami „Uczestnik"/„Trener") NIE dostaje `d-none`
   na mobile jak inne elementy tu — jego DZIECKO `.tab-content` (treść person)
   musi zostać renderowane i widoczne (patrz komentarz w panel.py przy
   `dbc.Tabs(id='panel-main-tabs', …)` — dziesiątki callbacków celują w id
   wewnątrz, dublowanie renderu złamałoby unikalność id w całej stronie).
   Ukrywamy więc TYLKO sam `<ul>` (pasek przycisków), zostawiając
   `.tab-content` (i przez to wszystkie zagnieżdżone id) nietkniętym. */
@media (max-width: 767.98px) {
    #panel-main-tabs.panel-main-tabs-mobile-hide-ul {
        display: none;
    }
}
/* Dropdown turnieju traci wcięcie „obok sidebaru" na mobile (tam sidebar
   i tak jest ukryty, patrz wyżej) — zostaje zwykłym, pełnej szerokości
   paskiem na górze ekranu, jak w makiecie. Reużyta też przez Pulpit AT
   (`admin_turnieju.py`, `#at-tabs`) — ten sam wzorzec, jedna klasa. */
@media (max-width: 767.98px) {
    .panel-turniej-wrapper {
        margin-left: 0 !important;
    }
}

/* Pulpit AT na telefonie (2026-09-23) — analogicznie do `#panel-main-tabs`
   wyżej: ukrywamy TYLKO `<ul>` (12 przycisków zakładek AT), `.tab-content`
   (treść Pulpitu — jedyna zakładka realnie dostępna na mobile, patrz
   `_mobile_at_niedostepny` w admin_turnieju.py) zostaje widoczna. */
@media (max-width: 767.98px) {
    #at-tabs.at-tabs-mobile-hide-ul {
        display: none;
    }
}

/* Segment control „Uczestnik/Trener" — mobile only. Styl w duchu iOS segmented
   control z makiety: jeden zaokrąglony pasek, aktywny segment wypełniony
   kolorem akcentu (ten sam co aktywna zakładka sidebaru — `.nav-tabs .nav-
   link.active`, `_tab_rules` w app.py, SA → Wygląd UI), nieaktywny — przezroczysty
   tekst przygaszony. Klasa `.active` na przycisku steruje wyglądem, ustawiana
   przez `panel_mobile_persona_klik` (app.py) na podstawie `panel-main-tabs.
   active_tab` — dwa źródła jednej prawdy (klik segmentu I ewentualna zmiana
   z innego miejsca) trzymane w synchronizacji tym samym callbackiem. */
.panel-mobile-persona-group {
    display: flex;
    background: rgba(127, 127, 127, 0.12);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}
.panel-mobile-persona-seg {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    transition: background-color 0.12s ease-in-out, color 0.12s ease-in-out;
}
.panel-mobile-persona-seg.active {
    background: #3454d1;
    color: #fff;
}
html.dark-mode .panel-mobile-persona-group {
    background: rgba(255, 255, 255, 0.08);
}

.panel-kafelki {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.panel-kafel {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    position: relative;
}
.panel-kafel-wide { grid-column: 1 / -1; }
.panel-kafel-ic {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(52, 84, 209, 0.12); color: #3454d1; font-size: 1rem;
}
.panel-kafel-label { font-weight: 700; font-size: 0.86rem; line-height: 1.25; }
.panel-kafel-sub { font-size: 0.7rem; opacity: 0.65; line-height: 1.3; margin-top: 2px; }
.panel-kafel-count {
    position: absolute; top: 8px; right: 8px;
    background: #c23a3a; color: #fff; font-size: 0.62rem; font-weight: 700;
    min-width: 17px; height: 17px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.panel-kafel-hero {
    background: linear-gradient(135deg, #3454d1, #5a76e8);
    border: 0; color: #fff;
}
.panel-kafel-hero .panel-kafel-ic { background: rgba(255,255,255,0.22); color: #fff; }
.panel-kafel-hero .panel-kafel-sub { color: rgba(255,255,255,0.85); }
html.dark-mode .panel-kafel {
    background: #1a1f28;
    border-color: #2b3240;
    color: #e8ecf3;
}
#uczestnik-tabs > .nav-tabs .nav-link,
#trener-tabs > .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Karty kategorii w „Zapisy do turnieju"/„⚡ Zapisz i zapłać" (2026-09-14, druga
   runda audytu responsywności) — zastępuje dawny wiersz z 6 wąskimi kolumnami
   (checkbox/typ/nazwa/cena/dzień/status), który na telefonie łamał długie nazwy
   kategorii na kilka linii. Karta daje nazwie pełną szerokość, cena zawsze w stałym
   miejscu po prawej niezależnie od długości nazwy. Struktura HTML nietknięta poza
   układem — `dbc.Checklist`/`uczestnik-cena` mają te same pattern-matching id co
   wcześniej (patrz `zapisy_uczestnik_grid`, uczestnik.py). */
.uczestnik-kat-dzien {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    display: flex; align-items: center; gap: 8px;
    padding: 6px 2px; margin-bottom: 4px;
}
.uczestnik-kat-dzien::after { content: ''; flex: 1; height: 1px; background: var(--bs-border-color, #dee2e6); }
.uczestnik-kat-card {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 12px; padding: 11px 12px; margin-bottom: 8px;
}
.uczestnik-kat-selected {
    border-color: #3454d1;
    background: rgba(52, 84, 209, 0.06);
}
/* Checklist to CAŁA klikalna karta (patrz komentarz w uczestnik.py przy
   `karta_tresc`) — `.form-check` Bootstrapa domyślnie ma `padding-left:1.5em` +
   input `margin-left:-1.5em`, co w tym layoucie (flex, nie zwykły tekst z inputem
   z przodu) tylko przeszkadza; zerujemy oba, bo `labelStyle` (inline, w Pythonie)
   już ustawia własny `display:flex`+`gap` dający ten sam efekt wizualny bez
   ujemnego marginesu wyprowadzającego input poza kartę. */
.uczestnik-kat-checklist .form-check { padding-left: 0; margin-bottom: 0; }
.uczestnik-kat-checklist .form-check-input { margin-left: 0; margin-top: 2px; float: none; }
.uczestnik-kat-main { flex: 1 1 auto; min-width: 0; }
.uczestnik-kat-nazwa { font-weight: 600; font-size: 0.86rem; line-height: 1.3; word-break: break-word; }
.uczestnik-kat-tags {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px;
}
.uczestnik-kat-tags .badge { white-space: nowrap; }
.uczestnik-kat-price {
    flex-shrink: 0; font-weight: 700; font-size: 0.86rem; white-space: nowrap;
    padding-top: 2px;
}
html.dark-mode .uczestnik-kat-card {
    background: #1a1f28;
    border-color: #2b3240;
}
html.dark-mode .uczestnik-kat-selected {
    border-color: #6f8cff;
    background: rgba(111, 140, 255, 0.1);
}

/* ── Cennik progowy — karta na próg (2026-09-14, druga runda audytu responsywności,
   makieta zaakceptowana przez właściciela) — zastępuje tabelę 4 kolumny, która na
   telefonie wychodziła poza kartę mimo `responsive=True` (sama treść komórek za
   szeroka). `cennik_progi_block`, components/ui_elements.py — statyczny render,
   współdzielony przez panel Trenera i Uczestnika. */
.cennik-prog-card {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 12px; padding: 11px 13px; margin-bottom: 8px;
}
.cennik-prog-active { border-color: #3454d1; border-width: 2px; padding: 10px 12px; }
.cennik-prog-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 9px; flex-wrap: wrap;
}
.cennik-prog-data { font-size: 0.82rem; font-weight: 700; }
.cennik-prog-nums { display: flex; gap: 26px; }
.cennik-prog-num { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cennik-prog-unit { font-size: 0.72rem; color: var(--bs-secondary-color, #6c757d); font-weight: 600; }
.cennik-prog-label { font-size: 0.66rem; color: var(--bs-secondary-color, #6c757d); margin-top: 1px; }
html.dark-mode .cennik-prog-card {
    background: #1a1f28;
    border-color: #2b3240;
}
html.dark-mode .cennik-prog-active { border-color: #6f8cff; }

/* ── AT: przełącznik statusu turnieju (Moje turnieje → Akcja) ──
   Styl outline: kolorowy napis+ramka; hover i aktywny status = wypełnienie.
   Jasny tryb: białe tło; ciemny: przezroczyste (ciemne tło tabeli). */
.at-status-btn.btn {
    border: 1px solid var(--sc) !important;
    color: var(--sc) !important;
    background-color: #ffffff !important;
    font-weight: 600;
}
html.dark-mode .at-status-btn.btn {
    background-color: transparent !important;
    color: var(--sc) !important;
    border-color: var(--sc) !important;
}
.at-status-edycja { --sc: #e0a800; --sct: #212529; }
.at-status-uru    { --sc: #198754; --sct: #ffffff; }
.at-status-zam    { --sc: #dc3545; --sct: #ffffff; }
html.dark-mode .at-status-edycja { --sc: #ffc107; }
html.dark-mode .at-status-uru    { --sc: #4cd08d; --sct: #212529; }
html.dark-mode .at-status-zam    { --sc: #f27784; --sct: #212529; }
.at-status-btn.btn:hover,
.at-status-btn.btn.at-status-active,
html.dark-mode .at-status-btn.btn:hover,
html.dark-mode .at-status-btn.btn.at-status-active {
    background-color: var(--sc) !important;
    color: var(--sct) !important;
    border-color: var(--sc) !important;
    font-weight: 700;
}

/* ── Globalna strzałka „do góry" (assets/scroll_top.js) ── */
#__scroll-top-btn__ {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1030;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    /* Strzałka CZARNA (życzenie właściciela) → tło musi być JASNE, inaczej czarny
       znak na granatowym krążku byłby niewidoczny. Kolor steruje strzałką SVG
       przez `currentColor` (assets/scroll_top.js). */
    background: #ffffff;
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
#__scroll-top-btn__.widoczny {
    opacity: 0.85;
    pointer-events: auto;
    transform: translateY(0);
}
#__scroll-top-btn__:hover { opacity: 1; }
html.dark-mode #__scroll-top-btn__ {
    /* W ciemnym motywie też jasny krążek — czarna strzałka ma pozostać czytelna. */
    background: #e8f0f8;
    color: #000000;
    border-color: rgba(255, 255, 255, 0.25);
}

/* ── Modal edytora ramek — potrzebuje MIEJSCA. Domyślny `size='xl'` (1140 px) przy
   grafice 1920×1080 i 34 polach daje sceny wielkości znaczka pocztowego. */
.modal-edytor .modal-dialog {
    max-width: 92vw;
    margin: 1.5rem auto;
}
.modal-edytor .modal-body {
    max-height: 86vh;
    overflow-y: auto;
}
/* Ikona „pełny ekran" ma siedzieć TUŻ PRZY X. Bootstrap daje `.modal-header .btn-close`
   własny `margin-left: auto` — a przy DRUGIM auto-marginesie (nasz `ms-auto` na ikonie)
   wolna przestrzeń dzieli się na pół i ikona lądowała na ŚRODKU nagłówka. */
.modal-edytor .modal-header .btn-close { margin-left: 0.5rem; }

/* Pełny ekran (przycisk „Maksymalizuj" obok X): scena dostaje CAŁĄ dostępną wysokość.
   Bez tego maksymalizacja poszerzałaby okno, ale scena zostałaby w swoich 68vh —
   czyli po nic. Selektor `.modal-fullscreen` dokłada dbc, gdy fullscreen=True. */
.modal-edytor .modal-fullscreen .modal-body {
    max-height: none;
}
.modal-edytor .modal-fullscreen [data-ramki-scena] {
    /* nic — scena rośnie razem z kontenerem */
}
.modal-fullscreen.modal-dialog {
    max-width: 100vw;
}

/* Kontener sceny edytora — wysokość zależy od trybu okna. Kontrolki są w bocznej kolumnie
   (nie nad sceną), więc scena dostaje prawie całą wysokość okna. */
.ekran-scena-wrap {
    max-height: 80vh;
    /* Przewijanie NIE ma się przenosić na modal/stronę, gdy dojedziemy do końca sceny —
       inaczej przy przeciąganiu ramki podskakuje całe okno. */
    overscroll-behavior: contain;
    scroll-behavior: auto;
}
.modal-fullscreen .ekran-scena-wrap { max-height: 90vh; }
/* Ramki nie łapią fokusu (patrz komentarz w app.py) — obramowanie fokusu i tak
   przesuwałoby układ o 1-2 px przy każdym kliknięciu. */
[data-ramka] { outline: none !important; }

/* ── CVC: siatka startów w panelu MC (wybór pary) ────────────────────────── */
.cvc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
/* ⚠️ Kafelki CVC miały tu ciemne tła (#21262d/#0f2f18…) — czyli paletę TRYBU CIEMNEGO
   w arkuszu TRYBU JASNEGO. Nie było ich czym przełączyć: w jasnym motywie siatka startów
   zostawała czarna (zgłoszone 2026-07-17). Tu warianty JASNE, ciemne w dark_mode.css. */
.cvc-cell {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    background: #ffffff; border: 2px solid #ced4da; color: #212529;
    user-select: none; transition: background .1s, border-color .1s;
}
.cvc-cell:hover { border-color: #0d6efd; }
.cvc-cell-nr { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.4em; }
.cvc-cell-nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvc-cell.cvc-selected { border-color: #e0a800; background: #fff8e1; }
.cvc-cell.cvc-aktywny  { border-color: #ff7b00; background: #ffe8cc; cursor: default; box-shadow: 0 0 0 2px rgba(255,123,0,.35); }
.cvc-cell.cvc-oceniony { border-color: #2ea043; background: #d8f3dc; }
.cvc-cell.cvc-oceniony.cvc-aktywny { border-color: #2ea043; box-shadow: 0 0 0 2px rgba(46,160,67,.35); }

/* ── MC / Kategorie: cele DOTYKOWE (panel MC jedzie na tablecie) ──────────────
   Norma: Apple HIG 44 px, Material 48 dp. Przyciski `size='sm'` dawały ~31 px —
   MC chybiał kciukiem w „Zarządzaj eliminacjami" na żywym turnieju (2026-07-17). */
.mc-akcja-glowna {
    min-height: 56px;                 /* akcja klikana dziesiątki razy w trakcie kategorii */
    font-size: 1.02rem;
    font-weight: 600;
}
/* PARA przycisków OBOK SIEBIE (akcja główna + Korekta), oba 2x wyższe niż wcześniejsze
   56 px — układ zamówiony przez właściciela pod obsługę kciukiem na tablecie.
   Ikona NAD tekstem (`d-block mx-auto`), bo przy 112 px wysokości i wąskiej kolumnie
   ikona obok tekstu zjadałaby szerokość i zawijała etykietę. */
.mc-akcja-duo {
    min-height: 112px;                /* 2 x 56 px */
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: normal;              /* „Zarządzaj eliminacjami" ma prawo się zawinąć */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
}
/* Kategoria AKTYWNA (W_TRAKCIE) — jedyna, której MC dotyka na żywo: pas na całą
   szerokość ekranu, więc para przycisków jest i wyższa, i dużo szersza. */
.mc-kat-aktywna .mc-akcja-duo { min-height: 128px; font-size: 1.12rem; }

/* Zakończone: kafelki tylko do wglądu („Otwórz panel") — mogą być ciaśniejsze. */
.mc-kat-archiwum { opacity: 0.92; }
.mc-kat-archiwum .btn { min-height: 40px; }

/* Nagłówek zwiniętej sekcji „Zakończone" — ZIELONY, jak dawny `text-success`.
   To sekcja archiwum, nie akcja: nie dostaje klasy `moje-przyciskN` (u właściciela
   `moje-przycisk2` jest CZERWONY i nagłówek wyglądał jak alarm). */
.accordion-button.mc-acc-zakonczone-hdr {
    color: #2ecc71;
    font-weight: 600;
    background-color: transparent;
    box-shadow: none;
}
.accordion-button.mc-acc-zakonczone-hdr:not(.collapsed) {
    color: #2ecc71;
    background-color: rgba(46,204,113,0.08);
}
.accordion-button.mc-acc-zakonczone-hdr::after { filter: hue-rotate(85deg) saturate(3); }

/* ── mc-elim-modal: modal, w którym MC spędza NAJWIĘCEJ czasu ────────────────
   (siatka CVC z ~19 kafelkami, paski sędziów, tabela wyników). Był jedynym modalem
   MC z `size='lg'` — reszta (drabinka, 3 parkiety, 7TS, Centrum korekt) ma `xl`.

   ⚠️ Sam `size='xl'` NIE POMAGA NA TABLECIE. Bootstrap 5 trzyma szerokość w zmiennej
   `--bs-modal-width` (domyślnie 500px); `.modal-lg`/`.modal-xl` podnoszą ją do 800px
   dopiero od 992px, a do 1140px od 1200px. Poniżej 992px `lg` i `xl` dają TO SAMO —
   500px. Tablet w PIONIE to ~768px, czyli dokładnie ta strefa (zmierzone 2026-07-17).

   Nadpisujemy więc zmienną: 95vw tam, gdzie ekran jest wąski, ale nie więcej niż
   1140px (= to, co obiecuje `xl`) na desktopie. */
.modal-mc-szeroki .modal-dialog {
    --bs-modal-width: min(95vw, 1140px);
}

/* ── MC / Centrum korekt: przyciski akcji pod kciuk (modal jedzie na tablecie) ──
   Były `size='sm'` (~31 px) i `width='auto'`, więc KAŻDA akcja miała inny cel dotykowy
   — szerokość zależała od długości etykiety. Teraz pełna szerokość i stała wysokość.
   Nie 112 px jak w kafelkach: tu akcji jest kilkanaście pod sobą, a każda jest
   NISZCZĄCA — świadomie zostawiamy je mniejsze niż akcje normalnego przepływu. */
.mc-kor-btn {
    min-height: 52px;
    font-size: 1rem;
    font-weight: 600;
    white-space: normal;              /* długie etykiety („Cofnij ostatnią walkę Koła") */
    line-height: 1.2;
}

/* ── MC: powierzchnie modali — TRYB JASNY ────────────────────────────────────
   ⚠️ Modale MC miały kolory ZASZYTE INLINE (`style={'backgroundColor': '#0d1117'}`
   — paleta „GitHub dark"), a inline ZAWSZE przebija CSS. Efekt: przełącznik
   jasny/ciemny nie robił NIC, modal był na stałe ciemny (zgłoszone 2026-07-17).
   Tu są warianty jasne; ciemne w `dark_mode.css`. */
.mc-pow      { background-color: #ffffff; color: #212529; }   /* ciało modalu */
.mc-pow-card { background-color: #f1f3f5; }                   /* karta/panel w środku */
.mc-pow-head { background-color: #f8f9fa; border-color: #dee2e6; }
.mc-txt      { color: #212529; }
.mc-txt-dim  { color: #6c757d; }
.mc-pow-brd  { border-color: #dee2e6 !important; }
/* MC — tabela wyników w modalu + tor paska sędziego + aktywny kafelek Widza (JASNY) */
.mc-tab-th    { background-color: #e9ecef; color: #6c757d; border-bottom: 1px solid #dee2e6; }
.mc-tab-td    { color: #212529; border-bottom: 1px solid #e9ecef; }
/* MC — tabela Wyniki (KPK): nazwa klikalna, ustawia tę osobę jako aktywną na parkiecie */
.mc-kpk-nazwa-klikalna { cursor: pointer; text-decoration: underline dotted; }
.mc-kpk-nazwa-klikalna:hover { color: #0d6efd; }
.mc-pasek-tor { background-color: #dee2e6; }
.mc-kafel-akt { background-color: #d1e7dd; }
/* MC — modal drabinki (JASNY): tinty boksów zwycięzcy, aktywna walka, panel Fight Zone.
   Obwódki (kolor uczestnika, zieleń „wygrał", żółć „aktywna") ZOSTAJĄ inline — to akcenty
   czytelne w obu trybach; tu tylko TŁA powierzchni, które inline betonowało na ciemno. */
.mc-pow-red  { background-color: #f8d7da; }   /* boks zwycięzcy — czerwony róg */
.mc-pow-blue { background-color: #cfe2ff; }   /* boks zwycięzcy — niebieski/trzeci róg */
.mc-pow-akt  { background-color: #fff3cd; }   /* karta walki AKTYWNEJ (żółty akcent) */
.mc-pow-fz   { background-color: #fdeaea; }   /* panel Fight Zone (czerwony akcent) */
.mc-pow-fz2  { background-color: #e9ecef; }   /* pola/inputy w panelu FZ */

/* ── Recepcja → Check-in: przeciągalny podział kolumn (assets/ar_split.js) ──
   AR pracuje na tablecie: przy odprawie liczy się skaner, przy szukaniu — Lista
   Uczestników. Zamiast sztywnych md=7/md=5 dajemy linię do przeciągania. */
.ar-split            { display: flex; align-items: flex-start; width: 100%; }
.ar-split-pane       { min-width: 0; }               /* bez tego długie tabele rozpychają flex */
.ar-split-pane-lewa  { flex: 0 0 58%; max-width: 58%; }
.ar-split-pane-prawa { flex: 1 1 0; }
.ar-split-uchwyt {
    flex: 0 0 14px;                                   /* pole trafienia palcem, nie 1 px */
    align-self: stretch;
    cursor: col-resize;
    touch-action: none;                               /* inaczej tablet przewija zamiast ciągnąć */
    position: relative;
    background: transparent;
}
.ar-split-uchwyt::before {                            /* sama widoczna kreska */
    content: '';
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; margin-left: -1px; border-radius: 1px;
    background: #ced4da;
}
.ar-split-uchwyt:hover::before { background: #0d6efd; width: 4px; margin-left: -2px; }

/* Wąski ekran (telefon): panele jeden pod drugim, linia niepotrzebna */
@media (max-width: 767.98px) {
    .ar-split            { flex-direction: column; }
    .ar-split-pane-lewa,
    .ar-split-pane-prawa { flex: 1 1 auto !important; max-width: 100% !important; width: 100%; }
    .ar-split-uchwyt     { display: none; }
}

/* ── Kreator „Załóż cały turniej" — pasek postępu wewnątrz fullscreen modalu (kr2-modal)
   (patrz views/kreator_turnieju.py). Kreator v2 to OSOBNY, zduplikowany layout — nie
   przełącza już prawdziwych zakładek AT, więc nie ma tu żadnych stylów ukrywania nav. */
.kr-pasek {
    position: sticky; top: 0; z-index: 1000;
    padding: 8px 12px; border-radius: 10px; margin-bottom: 1rem;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
html:not(.dark-mode) .kr-pasek { background: #f7f9fb; border: 1px solid #dee2e6; }
html.dark-mode       .kr-pasek { background: #252a33; border: 1px solid #3a4250; }
.kr-segmenty { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.kr-etykieta { white-space: nowrap; }
/* Stepper (etap 3 przebudowy kreatora, 2026-09-30): kółko z numerem / ✓ (ok) / ! (uwaga) */
.kr-segment {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: 9px; font-size: 0.85rem; font-weight: 700;
    opacity: 0.6;
}
.kr-segment-nr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 23px; height: 23px; border-radius: 50%; font-size: 0.75rem; font-weight: 800;
    border: 1.5px solid #adb5bd; background: transparent;
}
html.dark-mode .kr-segment-nr { border-color: #4a5568; color: #c8d0da; }
.kr-segment-nr.kr-nr-ok    { background: #1dbd8e; border-color: #1dbd8e; color: #fff !important; }
.kr-segment-nr.kr-nr-uwaga { background: #e67e22; border-color: #e67e22; color: #fff !important; }
.kr-segment.kr-segment-aktywny { opacity: 1; }
.kr-segment.kr-segment-zrobiony { opacity: 0.9; cursor: pointer; }
.kr-segment.kr-segment-zrobiony:hover { opacity: 1; }
.kr-segment.kr-segment-zrobiony:hover .kr-segment-nazwa { text-decoration: underline; }

/* ── Dropdown „Wybrany turniej" (AT, zakładka nagłówkowa) — czerwona ramka+placeholder
   jest wcześniejszym, zamierzonym stylem (sygnalizuje „nic nie wybrane"); tekst placeholdera
   ma być czytelny na tle pola w OBU motywach — biały w trybie ciemnym (tło ciemne),
   ciemny w trybie jasnym (tło jasne) — zgłoszone 2026-07-30, poprawione po zg 2026-07-30 #2
   (biały na białym w trybie jasnym był nieczytelny). */
/* (2026-09-24) Reguły po `#at-global-turniej-dropdown` USUNIĘTE — selektor z ID
   przebijał czerwony placeholder nowego paska turnieju (`.turniej-pole-brak`, generowany
   w app.py z kolorów SA). Kolor placeholdera ustawia teraz tylko ta reguła. */

/* ── Kreator: przycisk „Dalej" delikatnie pulsuje, gdy krok jest kompletny — subtelna
   wskazówka „możesz iść dalej" (Krok 1: Turniej, zgłoszone 2026-07-30). */
@keyframes kr-puls {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
.kr-btn-gotowy { animation: kr-puls 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .kr-btn-gotowy { animation: none; }
}

/* ── Kreator: Kryteria — pasek akcji ma 3 przyciski, ale ostatni (Wgraj wypełniony
   szablon) jest opakowany w dcc.Upload (<div>), nie <button>, więc Bootstrap
   ButtonGroup nie widzi go jako sąsiada do sklejenia — renderował się zaokrąglony
   z obu stron zamiast tylko z prawej (zgłoszone 2026-07-30). */
.kr2-kryt-upload-btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* ── Kreator: modal wyboru kryteriów (elim/walka/FZ) — zastępuje ciasny dcc.Dropdown
   multi=True (wiersze trudne do trafienia klikiem) czytelną listą checkboxów, każdy
   w osobnym, wysokim wierszu z hover-em. */
.kr-kryt-checklist .form-check {
    padding: 0.65rem 0.75rem 0.65rem 2.25rem;
    margin-bottom: 0.25rem;
    border-radius: 0.375rem;
    transition: background-color 0.1s ease-in-out;
}
.kr-kryt-checklist .form-check:hover { background-color: rgba(13, 110, 253, 0.08); }
.kr-kryt-checklist .form-check-input { margin-top: 0.2rem; }
.kr-kryt-checklist .form-check-label { width: 100%; cursor: pointer; }

/* Kreator: tabela cennika bez progów — `.pole-blad` (border-color+box-shadow) jest myślane
   pod inputy/selecty z widoczną własną `border`; na gołym <table> (nawet bordered=True,
   bo Bootstrap kładzie border na <td>/<th>, nie na <table>) border-color nie ma czego
   pokolorować — doklejamy `outline` jako zamiennik obwódki (kolor z `_write_zn_css`,
   patrz reguła `table.pole-blad` dopisywana tam obok `.pole-blad`). */
table.pole-blad { outline-width: 2px; outline-style: solid; outline-offset: 2px; }
/* Kryterium SOLO (SUWAK/WYGRANY) wyklucza wszystkie inne — pole disabled dostaje wyraźne
   przygaszenie + info, żeby było jasne CZEMU nie da się go zaznaczyć (nie wygląda na zepsute). */
.kr-kryt-checklist .form-check-input:disabled ~ .form-check-label { opacity: 0.45; cursor: not-allowed; }
.kr-kryt-checklist .form-check-input:disabled { cursor: not-allowed; }
.kr-kryt-checklist .form-check:has(.form-check-input:disabled):hover { background-color: transparent; }

/* Trener — Grupy/Duo/Formacje: zebra jak w tabeli „Zawodnicy szkoły" (dbc.Table striped=True),
   ale te dwie listy NIE są tabelami HTML (Checklist + zwykłe divy), więc Bootstrap nie daje
   zebry za darmo — dopisana ręcznie po `nth-child` (właściciel 2026-09-13, po poprzednim
   fixie kolumn poprosił o ten sam pasiasty styl co reszta list w projekcie). Padding na
   wierszu, żeby pasek koloru miał gdzie się pokazać (bez niego tło i tak byłoby widoczne,
   ale ciasno przy krawędziach). */
/* Bootstrap `.form-check` ma domyślnie `padding-left: 1.5em` + checkbox `float:left;
   margin-left:-1.5em` (input wystaje NA LEWO poza padding, żeby usiąść przed tekstem
   labela) — zwykły `padding: … 6px` (bez zachowania tego 1.5em) zostawiał checkbox
   POZA kolorowym tłem wiersza. Fix: `padding-left` = oryginalny 1.5em + dodatkowe 6px
   „na margines", żeby checkbox wylądował WEWNĄTRZ tła, nie tuż przy krawędzi karty. */
.trener-grp-checklist .form-check { padding: 3px 6px 3px calc(1.5em + 6px); border-radius: 4px; }
.trener-grp-sklad > div { padding: 3px 6px; border-radius: 4px; }
html:not(.dark-mode) .trener-grp-checklist .form-check:nth-of-type(odd),
html:not(.dark-mode) .trener-grp-sklad > div:nth-of-type(odd) { background-color: #eef1f5; }
html:not(.dark-mode) .trener-grp-checklist .form-check:nth-of-type(even),
html:not(.dark-mode) .trener-grp-sklad > div:nth-of-type(even) { background-color: #ffffff; }
html.dark-mode .trener-grp-checklist .form-check:nth-of-type(odd),
html.dark-mode .trener-grp-sklad > div:nth-of-type(odd) { background-color: rgba(255,255,255,0.04); }
html.dark-mode .trener-grp-checklist .form-check:nth-of-type(even),
html.dark-mode .trener-grp-sklad > div:nth-of-type(even) { background-color: transparent; }
/* Hover na wierszu (2026-09-23, właściciel poprosił o ten sam efekt co tabela
   „Zawodnicy szkoły" — podświetlenie wiersza pod kursorem). `!important`
   przebija zebrę nth-of-type powyżej (specyficzność taka sama, kolejność w
   pliku by wystarczyła, ale zapisujemy jawnie żeby hover NIGDY nie przegrał
   z paskowaniem niezależnie od przyszłej reorganizacji reguł). */
html:not(.dark-mode) .trener-grp-checklist .form-check:hover { background-color: #dbe7fb !important; }
html.dark-mode .trener-grp-checklist .form-check:hover { background-color: #26344a !important; }

/* Kalendarz Organizatorów (AT) — siatka miesięczna z turniejami WSZYSTKICH AT, żeby jeden
   organizator widział, które terminy inni już zajęli. Kolory `wlasny`/`cudzy` odróżniają
   swój turniej od cudzych (patrz `_kalendarz_organizatorow_body` w admin_turnieju.py). */
.at-kal-tabela { width: 100%; border-collapse: collapse; table-layout: fixed; }
.at-kal-tabela th { padding: 0.4rem 0; border-bottom: 1px solid rgba(120,120,120,0.25); }
.at-kal-dzien {
    vertical-align: top;
    height: 5.5rem;
    padding: 0.3rem;
    border: 1px solid rgba(120,120,120,0.15);
}
.at-kal-poza-miesiacem { background-color: rgba(120,120,120,0.05); }
.at-kal-dzisiaj { background-color: rgba(44,111,172,0.08); }
.at-kal-numer-dnia { font-size: 0.75rem; font-weight: 600; opacity: 0.6; margin-bottom: 0.2rem; }
.at-kal-wpisy { display: flex; flex-direction: column; gap: 2px; }
.at-kal-wpis {
    font-size: 0.68rem;
    line-height: 1.15;
    padding: 1px 4px;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}
.at-kal-wpis.at-kal-wlasny { background-color: rgba(44,111,172,0.85); color: #fff; }
.at-kal-wpis.at-kal-cudzy  { background-color: rgba(150,150,150,0.55); color: #fff; }
.at-kal-legenda-kropka {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.at-kal-legenda-kropka.at-kal-wlasny { background-color: rgba(44,111,172,0.85); }
.at-kal-legenda-kropka.at-kal-cudzy  { background-color: rgba(150,150,150,0.55); }

/* Kalendarz Organizatorów — widok roczny (12 kafelków miesięcy, klik → siatka dni). */
.at-kal-miesiac-kafelek {
    transition: background-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}
.at-kal-miesiac-kafelek:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.at-kal-miesiac-ma-turnieje {
    border-color: #2c6fac;
    background-color: rgba(44,111,172,0.06);
}

/* Trener — nagłówek posortowanej kolumny w macierzy „Zapisz i zapłać”. Kolory = znacznik SA
   „Karta wybrana” (`zn-karta-wybrana-tlo/-ramka`, jasny niebieski, ciemny pomarańczowy — 2026-09-28);
   tu tylko grubość ramki. */
.trener-sort-btn-active {
    border: 2px solid transparent;   /* kolor ramki nadaje zn-karta-wybrana-ramka */
}

/* Pulpit AT — widgety drag&drop (2026-09-22). Uchwyt widoczny tylko w trybie
   edycji (renderowany warunkowo w _pulpit_widget_wrap, admin_turnieju.py) —
   sam .pulpit-widget istnieje zawsze, żeby pulpit_dragdrop.js miał stały hak. */
.pulpit-widget-dragging {
    opacity: 0.4;
}
.pulpit-widget-ukryty .card {
    opacity: 0.55;
    border-style: dashed !important;
}
.pulpit-drag-handle:active {
    cursor: grabbing !important;
}
/* Przycisk "Personalizuj pulpit" — POD sidebarem pionowym zakładek (nie w treści
   zakładki, patrz _pulpit_edytuj_sidebar_btn w admin_turnieju.py). DWIE wcześniejsze
   wersje W TREŚCI zakładki odrzucone przez właściciela (2026-09-22): osobny wiersz
   („obniża całą stronę") i `position: absolute` nad gridem („nie wygląda to dobrze",
   nachodził na kartę KPI). TRZECIA próba — sam ten element jako rodzeństwo `dbc.Tabs`
   w Pythonie, z `float:left` licząc że dołączy do kolumny floatów sidebaru — też
   nie zadziałała („wylądował na samym dole"): `dbc.Tabs` renderuje `<ul id="at-tabs">`
   i `<div class="tab-content">` (dużo wyższe, NIE floatujące) jako rodzeństwo w
   jednym komponencie, więc Python nie ma jak wstrzyknąć element MIĘDZY nie —
   cokolwiek jest w drzewie PO `dbc.Tabs` ląduje w DOM po `.tab-content` też, który
   je spycha pod całą stronę niezależnie od własnego float. Finalny fix:
   `pulpit_edytuj_sidebar.js` PRZENOSI ten element w JS jako ostatnie DZIECKO
   `#at-tabs` (nie rodzeństwo) — Bootstrap `.nav` (klasa na `#at-tabs`) jest bazowo
   `display:flex`, a `flex-direction:column !important` tu w projekcie już to
   wykorzystuje, więc dołożone dziecko po prostu dokłada się do tej samej kolumny,
   pod ostatnią zakładką, niezależnie od `float:left` na samym `#at-tabs`
   (float dotyczy POZYCJI całego `#at-tabs` względem `.tab-content`, nie liczby
   ani układu jego WŁASNYCH dzieci — flex rządzi tym niezależnie). */
.pulpit-edytuj-sidebar {
    width: 100%;
    margin-top: 12px;
}
/* Alert Pulpitu podlinkowany do zakładki (_widget_alerty, admin_turnieju.py) —
   cały wiersz jest klikalny, hover sygnalizuje to wizualnie. */
.pulpit-alert-link {
    cursor: pointer;
    transition: filter 0.1s ease;
}
.pulpit-alert-link:hover {
    filter: brightness(0.96);
}
/* Kolory alertu Pulpitu — jasny motyw. Ciemny motyw w dark_mode.css (bug
   2026-09-22: sztywny inline hex ignorował tryb ciemny całkowicie — tło zostawało
   jasne, tekst .text-muted robił się jasny w dark mode → alert nieczytelny). */
.pulpit-alert-danger  { background: #fdf1ef; }
.pulpit-alert-warning { background: #fdf7e9; }
.pulpit-alert-info    { background: #eef4fd; }
.pulpit-alert-icon-danger  { color: #d9482f; }
.pulpit-alert-icon-warning { color: #c98a12; }
.pulpit-alert-icon-info    { color: #3d7fd9; }
/* Liczba na karcie "Niepołączeni w zespół" (_widget_niezgrupowani) i "Nieopłacone
   starty" (_widget_kpi_karty) — jasny motyw. Ciemny motyw w dark_mode.css. */
.pulpit-kpi-alert-value { color: #c1462f; }
.pulpit-kpi-ok          { color: #1c8a4b; }

/* Pulpit AT na telefonie — karty kategorii zamiast wierszy tabeli
   (`_tabela_harmonogram_kategorie`, 2026-09-23, mockup zaakceptowany: 10 kolumn
   tabeli nie mieści się czytelnie na ~390px). Jedna karta na kategorię, drobne
   tagi (godzina/sędziowie/zapisani) w jednym zawijanym rzędzie pod nazwą. */
.pulpit-mobile-kat-card {
    background: rgba(127, 127, 127, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.pulpit-mobile-kat-card:last-child { margin-bottom: 0; }
.pulpit-mobile-tag {
    background: rgba(127, 127, 127, 0.14);
    color: var(--bs-secondary-color, #6c757d);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
}

/* Panel AT — zakładki jako sidebar pionowy zamiast poziomego paska (2026-09-18,
   propozycja właściciela po zobaczeniu innej apki — patrz MD_nowe/dev/
   Przebudowa_Panel_AT_Sidebar.md, ten fix to WYŁĄCZNIE layout nawigacji, bez
   dashboardu i bez rozbicia akordeonów opisanych w tamtym planie).
   ⚠️ `dbc.Tabs` w DBC 2.0.4 (wersja projektu) NIE MA propsów `vertical`/`pills`
   (usunięte względem starszych wersji DBC — TypeError „unexpected keyword
   argument" przy próbie ich użycia, sprawdzone na żywo 2026-09-18).
   ⚠️ Struktura DOM zweryfikowana w DevTools (2026-09-18) — NIE jest tym, czego
   naiwnie można by się spodziewać: `className='at-tabs-vertical'` na `dbc.Tabs`
   ląduje na TYM SAMYM `<ul id="at-tabs" class="at-tabs-vertical nav nav-tabs">`,
   nie na jakimś wrapperze wokół całości — więc selektor-potomek
   `.at-tabs-vertical .nav-tabs` nigdy nie trafiał (to JEDEN element, nie
   rodzic+dziecko). `<div class="tab-content">` z treścią zakładek jest RODZEŃSTWEM
   tego `<ul>` (kolejny `<div>` w tym samym rodzicu), nie jego potomkiem — stąd
   selektor `~` (general sibling), nie zagnieżdżenie. Każdy `<a class="nav-link">`
   jest owinięty w `<div class="nav-item">` (nie `<li>`, jak w klasycznym
   Bootstrapie — DBC 2.0.4 renderuje divy). */
/* `float` (pierwsza wersja fixu) i próba `min-height: 100vh` + własne tło
   sidebaru (druga wersja) obie wyglądały na „obcięty prostokąt" — 100vh liczy
   się od góry VIEWPORTU, nie od miejsca gdzie sidebar faktycznie zaczyna się na
   stronie (poniżej navbara), więc jego dół wypadał w losowym miejscu, tworząc
   widoczną poziomą granicę koloru. Właściciel doprecyzował: sidebar ma być BEZ
   własnego tła, zlewać się z tłem strony — usunięte `background-color`/
   `min-height`/`position:sticky`, zostaje tylko układ (float + szerokość) i styl
   samych linków. `.tab-content` z `overflow: hidden` nadal potrzebny
   (float-clearing), żeby nie zawijał się pod sidebar. */
/* `.sidebar-tabs-vertical` (generyczna, 2026-09-22) — WSPÓLNA z panelem AT
   (`#at-tabs`) i panelem Uczestnik/Trener (`#panel-main-tabs`, `#uczestnik-tabs`,
   `#trener-tabs`). Reguły były pierwotnie kluczowane po `#at-tabs` (ID) — przy
   dodaniu drugiego sidebaru w panelu Uczestnika duplikacja całego bloku CSS pod
   nowym ID byłaby błędem kopiuj-wklej (dwa źródła prawdy do synchronizowania
   ręcznie przy każdej zmianie stylu sidebaru). Selektor generyczny + `className`
   na `dbc.Tabs` w Pythonie = jeden wspólny wygląd, zero duplikacji.
   Kolor aktywnej zakładki CELOWO nie jest tu zaszyty — istniejący, konfigurowalny
   system (`_tab_rules` w app.py, SA → Wygląd UI → Nagłówki paneli) generuje
   `.nav-tabs .nav-link.active{...}` (bez ID w selektorze) dla obu trybów, więc
   automatycznie obejmuje KAŻDY sidebar z klasą `nav-tabs`, nie tylko AT. */
/* Próba `clear:left` (2026-09-23) COFNIĘTA — psuła AT (sidebar zmieniał się
   z pionowego na poziomy, bo `clear:left` na `.sidebar-tabs-vertical` łamał
   float między `#at-tabs` a jego `.tab-content`, nie tylko porządek dwóch
   etykiet w panelu Uczestnik/Trener, na który celowała poprawka). Wraca do
   stanu sprzed tej próby. Temat "skoku obok Wybrany turniej:" nierozwiązany
   — do zbadania innym mechanizmem, bez ruszania tej reguły bazowej. */
.sidebar-tabs-vertical {
    float: left;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    border-bottom: none !important;
    width: 240px;   /* 2026-09-26: 220→240, żeby pogrubiona aktywna „Zapisz formację na turniej" się nie zawijała */
    max-width: 240px;
    margin-right: 20px;
}
/* Panel Uczestnik/Trener na telefonie (2026-09-23) — `#panel-main-tabs` (pierwszy
   poziom sidebaru: etykieta „Wybrany turniej:" + przyciski „Uczestnik"/„Trener")
   dziedziczy `float:left; width:220px` z `.sidebar-tabs-vertical` jak na
   desktopie — na wąskim ekranie to ściska kafelki nawigacyjne (`.panel-kafelki`,
   widoczne TYLKO <768px, patrz reguła niżej) do wąskiego pasa po prawej,
   obcinając ich treść (zgłoszenie właściciela, zrzut z telefonu). SCOPOWANE po
   ID (`#panel-main-tabs`, nie generyczna `.sidebar-tabs-vertical`) — AT
   (`#at-tabs`) używa tej samej klasy i NIE był zgłoszony jako zepsuty na
   telefonie; dotykanie go bez potwierdzenia byłoby nieuzasadnionym ryzykiem.
   Pod 768px: sidebar traci float i szerokość 220px, staje się blokiem pełnej
   szerokości NAD kafelkami (naturalny flow, jedna kolumna). */
@media (max-width: 767.98px) {
    #panel-main-tabs.sidebar-tabs-vertical {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-right: 0;
    }
}
.sidebar-tabs-vertical .nav-item {
    width: 100%;
}
.sidebar-tabs-vertical .nav-link {
    text-align: left;
    border-radius: 8px;
    margin-bottom: 2px;
    white-space: normal;
    border: none !important;
    width: 100%;
}
/* Dropdown „Wybrany turniej" (panel Uczestnik/Trener) — SAME kształt/wysokość co
   imitacja przycisku obok niego (`.nav-link`: `border-radius:8px`) — właściciel
   poprosił o spójność wizualną (2026-09-22). `dcc.Dropdown` (Dash 4) renderuje
   kontrolkę (tło/obramowanie widocznego pola) jako klasa `.dash-dropdown`
   (potwierdzone realnym użyciem w dark_mode.css — NIE `.dash-dropdown-control`,
   ta klasa w projekcie nie istnieje), `className=` na `dcc.Dropdown` w panel.py
   ląduje na TYM SAMYM elemencie (jak `#at-global-turniej-dropdown` gdzie indziej
   w projekcie), więc `.panel-turniej-dropdown` tu jest already `.dash-dropdown`. */
.panel-turniej-dropdown.dash-dropdown {
    border-radius: 8px !important;
    min-height: 38px;
}
/* Ramka na rozwiniętej liście opcji dropdowna (2026-09-23) — `.dash-dropdown-content`
   ma tło (`#fff`/`#252a33` z dark_mode.css), ale bez WYRAŹNEJ krawędzi zlewa się
   wizualnie z tłem strony pod spodem (kolory zbyt zbliżone, zwłaszcza w trybie
   ciemnym) — zgłoszenie właściciela: „rozwijam panel-global-turniej-dropdown i
   zlewa się on z tłem". GLOBALNA reguła (nie tylko dropdown turnieju) — dotyczy
   WSZYSTKICH `dcc.Dropdown` w projekcie, ten sam problem gdziekolwiek indziej. */
.dash-dropdown-content {
    border: 1px solid rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode .dash-dropdown-content {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
/* Obwódka focus na dropdownach (`.dash-dropdown` i jego wnętrze) — GLOBALNA reguła,
   nie tylko `.dark-mode` (zgłoszenie właściciela 2026-09-22: usunięta wcześniej
   TYLKO w `.dark-mode` zniknęła w AT, ale zostawała w panelu Uczestnik/Trener —
   ten sam natywny focus-ring przeglądarki występuje w OBU motywach, licząc na samą
   regułę `.dark-mode` nie wystarczało). Dotyczy WSZYSTKICH `dcc.Dropdown` w
   projekcie (AT, panel Uczestnik/Trener, wszędzie indziej) jednym miejscem. */
.dash-dropdown:focus,
.dash-dropdown:focus-within,
.dash-dropdown-search:focus,
.dash-dropdown-search:focus-visible,
.dash-dropdown-content:focus,
.dash-dropdown-content:focus-within,
.dash-dropdown input:focus,
.dash-dropdown input:focus-visible,
.dash-dropdown-content input:focus,
.dash-dropdown-content input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* Panel Uczestnik/Trener — sidebar DWUPOZIOMOWY (2026-09-22, `panel_sidebar_
   dwupoziomowy.js` przenosi `uczestnik-tabs`/`trener-tabs` jako DZIECI
   `panel-main-tabs`, nie rodzeństwo). Zagnieżdżony `.sidebar-tabs-vertical`
   wewnątrz innego dziedziczy `float:left`/`margin-right:20px` z reguły wyżej —
   oba bez sensu w tym kontekście (nie graniczy bezpośrednio z kolumną treści,
   tylko jest zagnieżdżony w rodzicu, który już floatuje i ma swój margines) —
   `float:none` + `margin:0` + lekkie wcięcie/pomniejszenie odróżniające
   podzakładki od głównych przycisków person. `overflow:hidden`
   (`~ .tab-content`, reguła niżej) NIE dotyczy zagnieżdżonego przypadku — to
   selektor rodzeństwa, nie potomka, więc zagnieżdżony `<ul>` go nie dziedziczy;
   nieużywany atrybut `~` tu nie działa, czysto kosmetyczne bez efektu ubocznego. */
.sidebar-tabs-vertical .sidebar-tabs-vertical {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 4px 0 8px 0;
    padding-left: 10px;
    border-left: 2px solid rgba(127, 127, 127, 0.25);
}
.sidebar-tabs-vertical .sidebar-tabs-vertical .nav-link {
    font-size: 0.92em;
    padding: 6px 10px;
}
/* Próba zamiany na clearfix `::after` (2026-09-23) COFNIĘTA — psuła klikalność
   zakładki „Trener" (prawdopodobnie `.tab-content` bez `overflow:hidden`
   zaczynał nachodzić na obszar sidebaru). Wraca do `overflow:hidden`. Temat
   „`.flow-sticky-bar` nie przykleja się do dołu w Trener → Zapisz i zapłać"
   ROZWIĄZANY 2026-09-26 (zgłoszenie #2 z „Zgłoś problem"): `overflow:hidden` robi z
   `.tab-content` KONTENER PRZEWIJANIA, a `position:sticky` klei się do najbliższego
   takiego kontenera — który nigdy się nie przewija, więc pasek nie pływał NIGDZIE
   w panelu (Zapisz i zapłać, Zapisz formację, Uczestnik). Zamiast tego:
   `display:flow-root` daje TEN SAM efekt układu co overflow:hidden (nowy kontekst
   formatowania — treść stoi obok pływającego sidebaru, nie pod nim, klikalność OK),
   a `overflow:clip` przycina jak dawniej, ale NIE tworzy kontenera przewijania. */
.sidebar-tabs-vertical ~ .tab-content {
    display: flow-root;
    overflow: clip;
}
/* Próby v2 (opacity+klasa na <body>) i v3 (visibility:hidden inline na
   #panel-main-tabs) COFNIĘTE (2026-09-23) — obie zamiast eliminować "skok"
   pionowego sidebaru Uczestnik/Trener przy F5, same go powodowały/pogłębiały
   (potwierdzone: identyczny sidebar w AT, bez tych reguł, NIGDY tego nie
   robi — `visibility:hidden` na floatującym elemencie zmienia sposób, w jaki
   przeglądarka rezerwuje/przelicza jego miejsce w layoucie do momentu
   odsłonięcia, dając dokładnie taki efekt "doskoku"). Temat wraca do stanu
   sprzed jakiejkolwiek próby — do zbadania innym mechanizmem. */
/* Clearfix — z SAMYMI pływającymi/overflow-clearowanymi dziećmi (`#at-tabs`
   float + `.tab-content` overflow:hidden), KAŻDY przodek bez `clear` zapada
   się do wysokości ZERO od tego miejsca w dół (klasyczny efekt float).
   Prawdziwy winowajca po zrzucie 2026-09-18 (kolor `#212529`-podobny kontra
   `#1a1d23` z dark_mode.css): **`#page-content` ma WŁASNE, konfigurowalne tło
   (`_generate_ui_css`, app.py: `html.dark-mode #page-content{background-color:
   page_bg_dark}`)**, różne od tła `<body>`. `.container-fluid` (bezpośredni
   rodzic `#at-tabs`) jest zagnieżdżony GŁĘBIEJ niż `#page-content` — clearfix
   na samym `.container-fluid` nie wystarczał, bo to `#page-content` (przodek
   dużo wyżej) zapadał się do zera i za wcześnie kończył SWOJE własne tło.
   Clearfix trzeba dać na `#page-content` wprost, nie tylko na bezpośrednim
   rodzicu pływającego elementu — float „przecieka” przez WSZYSTKICH przodków
   bez `clear`, aż do najbliższego, który go zatrzyma. */
#page-content::after {
    content: '';
    display: table;
    clear: both;
}


/* ══ Pasek „Wybrany turniej” (AT + panel Uczestnik/Trener) — wariant A, 2026-09-24 ══
   `pasek_turnieju()` w components/ui_elements.py. Etykieta = lewy segment tego samego
   pola co dropdown. Kolory segmentu: aktywna zakładka (`_tab_rules`, app.py); stan
   „nie wybrano” (`.turniej-pole-brak`): kolory znacznika „Karta wybrana” z SA (`_write_zn_css`, #32).
   ⚠️ Pole NIE ma `overflow:hidden` — lista opcji Dash 4 (`.dash-dropdown-content`) jest
   pozycjonowana w `.dash-dropdown-wrapper` i zostałaby obcięta. Zaokrąglenia robią więc
   same segmenty (etykieta: lewe rogi, dropdown: prawe). Cały wygląd paska jest TU —
   przejście na wariant B z makiety = zmiana tego bloku. */
.turniej-pasek {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}
.turniej-pole {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    min-height: 40px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #ffffff;
}
html.dark-mode .turniej-pole {
    border-color: #4a5568;
    background: #2c3340;
}
/* Szerokość = kolumna zakładek (`.sidebar-tabs-vertical`: 240px) — segment stoi
   DOKŁADNIE nad sidebarem (zgłoszenie właściciela 2026-09-24). 239px + 1px lewej ramki
   `.turniej-pole` = 240px. Padding jak `.nav-link` (1rem), żeby ikona 🏆 stała w jednej
   linii z ikonami zakładek. Zmieniając szerokość sidebaru — zmień też tutaj. */
.turniej-pole-etykieta {
    flex: 0 0 239px;
    width: 239px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 1rem;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 7px 0 0 7px;
    border-right: 1px solid #ced4da;
    user-select: none;
}
html.dark-mode .turniej-pole-etykieta { border-right-color: #4a5568; }
.turniej-pole > .dash-dropdown-wrapper {
    flex: 1;
    min-width: 0;
}
/* Dropdown wewnątrz pola bez własnej ramki/tła — ramkę daje `.turniej-pole`.
   Podwójna klasa = wyższa specyficzność niż `.dark-mode .dash-dropdown` (dark_mode.css). */
.turniej-pole .dash-dropdown.turniej-pole-dropdown {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 8px 8px 0 !important;
    min-height: 38px;
    height: 100%;
}
.turniej-opcja-daty {
    margin-left: 10px;
    font-size: 0.88em;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}
.turniej-opcja-status {
    margin-left: 8px;
    vertical-align: 1px;
}
.turniej-opcja-nazwa { font-weight: 600; }
@media (max-width: 767.98px) {
    .turniej-pole-etykieta { flex: 0 0 auto; width: auto; padding: 0 10px; }
    .turniej-opcja-daty { display: none; }   /* telefon: sama nazwa + status */
}

/* ── Trener → „💃 Moje formacje" (przebudowa formacji, 2026-09-25) ─────────────────────
   Tylko UKŁAD. Kolory z SA → Wygląd UI: zaznaczona formacja = `.moje-przyciski-ramka`
   (obramowanie w kolorze przycisku głównego), znaczniki `zn-*`, komunikaty `komunikat-1`. */
.mf-poz {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: transparent; color: inherit;
    border: 2px solid var(--bs-border-color, rgba(127,127,127,.3));
    border-radius: .5rem; padding: .55rem .75rem;
}
.mf-poz:hover { border-color: rgba(127,127,127,.6); }
.mf-poz-wybrana { border-width: 3px; }
.mf-poz-arch { opacity: .65; }
.mf-wiersz {
    border: 1px solid var(--bs-border-color, rgba(127,127,127,.3));
    border-radius: .375rem; padding: .55rem .75rem;
}
.mf-osoba {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .2rem .1rem; border-bottom: 1px solid var(--bs-border-color, rgba(127,127,127,.2));
}
.mf-osoba-tekst { min-width: 0; line-height: 1.3; }
.mf-nr { display: inline-block; min-width: 1.8em; text-align: right; font-variant-numeric: tabular-nums; }
.mf-btn-mini { padding: .05rem .5rem !important; font-size: .8rem !important; flex: 0 0 auto; }
.mf-osoba:last-child { border-bottom: 0; }
.mf-przewijana { max-height: 440px; overflow-y: auto; padding-right: .25rem; }
/* Wyszukiwarka uczniów przyklejona do góry przewijanej listy — tło karty, żeby lista
   przewijała się POD nią (nie prześwitywała). */
.mf-sticky-top {
    position: sticky; top: 0; z-index: 2; padding-bottom: .5rem;
    background: var(--bs-card-bg, var(--bs-body-bg, #fff));
}
html.dark-mode .mf-sticky-top { background: #252a33; }  /* = .dark-mode .card (dark_mode.css) */
@media (min-width: 992px) {
    .mf-lista-karta { position: sticky; top: 12px; }
}
/* Wariant B (2026-09-26) — tylko UKŁAD; kolory z klas SA (zn-*, -ramka, -tlo, komunikat-1). */
.mf-kropka {                       /* kropka stanu formacji: tło z klasy zn-uwaga/zn-ok/zn-licznik */
    display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; flex: 0 0 auto;
}
.mf-alarm {                        /* komunikat „co się stanie ze startem" — ramka+tło z SA */
    display: flex; gap: .9rem; align-items: flex-start;
    border: 2px solid; border-radius: .5rem; padding: .85rem 1rem; margin-bottom: 1rem;
}
.mf-alarm-ikona { font-size: 1.5rem; line-height: 1; }
.mf-tut-krok {
    display: flex; gap: .75rem; align-items: flex-start; height: 100%;
    border: 2px solid; border-radius: .5rem; padding: .7rem .85rem;
}
.mf-tut-nr { font-size: .95rem; min-width: 1.9rem; padding: .45em 0; }
/* „Zmień skład": dwie kolumny o RÓWNEJ wysokości — listy kończą się w tym samym miejscu,
   choć po prawej nad listą jest wyszukiwarka (zgłoszenie właściciela 2026-09-26). */
.mf-kol { display: flex; flex-direction: column; height: 460px; }
.mf-kol-lista {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .25rem .5rem;
    border: 1px solid var(--bs-border-color, rgba(127,127,127,.3)); border-radius: .375rem;
}
@media (max-width: 767px) { .mf-kol { height: 360px; } }
.mf-sklad-czytaj { columns: 2; column-gap: 2.5rem; padding-left: 1.6rem; }
.mf-sklad-czytaj li { break-inside: avoid; padding: .12rem 0; }
@media (max-width: 767px) { .mf-sklad-czytaj { columns: 1; } }
.mf-sekcja-tytul { padding: .75rem 1rem; cursor: pointer; }
.mf-sekcja-tresc { padding: 0 1rem 1rem; }

/* ── Trener → „📋 Zapisz formację na turniej" (E3, 2026-09-25) — tylko układ; kolory ramek
   z klas SA `zn-ok-ramka` / `zn-pilne-ramka` / `zn-formacja-ramka`. */
/* Obwódka NA SAMYM checkboxie — jak w „⚡ Zapisz i zapłać" (18px, ramka 1px + box-shadow 1px,
   bo Bootstrap nadpisuje border-color na :checked). Kolor = `currentColor` z klasy SA
   `zn-ok-kolor` (w wieku) / `zn-uwaga-kolor` (gość wiekowy). */
.zf-cb { display: inline-flex; }
.zf-cb .form-check-input {
    width: 18px; height: 18px; border-radius: 3px; cursor: pointer;
    /* ⚠️ `color: inherit` — przeglądarka daje <input> własny kolor (fieldtext), więc bez tego
       `currentColor` NIE brał koloru z klasy SA na rodzicu i obwódka znikała. */
    color: inherit !important;
    border: 1px solid currentColor !important; box-shadow: 0 0 0 1px currentColor !important;
}
.zf-cb { align-items: center; justify-content: center; line-height: 0; }
/* Bootstrap `.form-check` ma padding-left 1.5em, a input margin-left -1.5em + float —
   to przesuwało kwadracik w ramce (zgłoszenie właściciela). Zerujemy → idealnie w środku. */
.zf-cb .form-check { margin: 0 !important; padding: 0 !important; min-height: 0; display: flex; }
.zf-cb .form-check-input { margin: 0 !important; float: none !important; }
.zapisy-matrix .zf-kol-formacja { border-left: 2px solid transparent; border-right: 2px solid transparent; }
.zf-kol-nied { opacity: .45; }
.mf-poz.zf-kat:disabled { cursor: not-allowed; }

/* ── AT → Transakcje po szkołach (2026-09-26) — tylko układ; kolory z klas SA ── */
.tr-szk { border-bottom: 1px solid var(--bs-border-color, rgba(127,127,127,.25)); }
.tr-szk > summary { list-style: none; cursor: pointer; }
.tr-szk > summary::-webkit-details-marker { display: none; }
.tr-szk > summary:hover { background: rgba(127,127,127,.08); }
.tr-szk[open] > summary { background: rgba(127,127,127,.12); }
.tr-szk-wiersz {
    display: grid; align-items: center; gap: .6rem; padding: .55rem .6rem;
    grid-template-columns: minmax(180px,2fr) minmax(140px,1.3fr) minmax(120px,1fr) minmax(170px,1.6fr) minmax(150px,1.2fr) minmax(110px,.8fr);
}
.tr-szk-naglowek { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7;
    border-bottom: 1px solid var(--bs-border-color, rgba(127,127,127,.25)); }
.tr-kol-kwota { text-align: right; }
.tr-szk-szczegoly { padding: .6rem .8rem .8rem; }
@media (max-width: 900px) {
    .tr-szk-wiersz { grid-template-columns: 1fr 1fr; }
    .tr-szk-naglowek { display: none; }
    .tr-kol-kwota { text-align: left; }
}


/* ═══ Panel Trener / Uczestnik — wspólny standard wyglądu (audyt 2026-09-26) ═══════════════
   Zakres: `.panel-uj` (kontener /panel). Tylko UKŁAD i ROGI; kolory dalej z SA / motywu.
   TABELE: zaokrąglona ramka na opakowaniu `.table-responsive`, w środku tylko linie POZIOME,
   paski + podświetlenie wiersza (ustawiane w `dbc.Table`). Macierze zapisów (`.zapisy-matrix`)
   zostają z liniami pionowymi (siatka checkboxów) — zaokrągla je opakowanie `.panel-matryca`. */
/* Kolor ramki = kolor linii motywu (jasny: jak karty Bootstrapa; ciemny: jak dark_mode.css) —
   NIE `--bs-border-color`, bo ta zmienna zostaje jasna w trybie ciemnym i ramka świeciła. */
.panel-uj { --panel-ramka: rgba(0,0,0,.175); }
html.dark-mode .panel-uj { --panel-ramka: #353c4a; }
.panel-uj .table-responsive {
    border: 1px solid var(--panel-ramka);
    border-radius: .5rem; margin-bottom: .75rem;
}
.panel-uj .table-responsive:last-child { margin-bottom: 0; }
.panel-uj .table-responsive > .table { margin-bottom: 0 !important; }
.panel-uj .table-responsive > .table-bordered > :not(caption) > * { border-width: 0; }
.panel-uj .table-responsive > .table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; }
.panel-uj .table-responsive > .table > :last-child > tr:last-child > * { border-bottom-width: 0; }
.panel-uj .table-responsive > .table > thead > tr > th { background-color: rgba(127,127,127,.08); }
.panel-uj .panel-matryca {
    border: 1px solid var(--panel-ramka); border-radius: .5rem;
}
.panel-uj .panel-matryca > .zapisy-matrix tr > :first-child { border-left-width: 0; }
.panel-uj .panel-matryca > .zapisy-matrix tr > :last-child { border-right-width: 0; }
.panel-uj .panel-matryca > .zapisy-matrix > thead > tr:first-child > * { border-top-width: 0; }
.panel-uj .panel-matryca > .zapisy-matrix > :last-child > tr:last-child > * { border-bottom-width: 0; }
/* AKORDEONY: wszędzie styl AT — osobne, zaokrąglone pozycje z odstępem 0,5 rem. */
.panel-uj .accordion .accordion-item { border-radius: .5rem !important; overflow: hidden; }
.panel-uj .accordion .accordion-item:not(:last-child) { margin-bottom: .5rem; }
.panel-uj .accordion .accordion-button { border-radius: 0 !important; }
/* ODSTĘPY (audyt etap 2): karty i akordeony w panelu mają JEDEN odstęp 1 rem pod spodem,
   bez marginesu nad (dawniej mieszanka mt-3 / mb-3 / mb-2 / mt-4 / brak → zakładki raz gęste,
   raz luźne). Karty zagnieżdżone (np. transakcja w „Moje transakcje") — 0,75 rem. */
.panel-uj .tab-content .card,
.panel-uj .tab-content .accordion { margin-top: 0 !important; margin-bottom: 1rem !important; }
.panel-uj .tab-content .card .card { margin-bottom: .75rem !important; }
.panel-uj .tab-content .card .card:last-child,
.panel-uj .tab-content .accordion-body > :last-child,
.panel-uj .tab-content .card-body > .accordion:last-child { margin-bottom: 0 !important; }
/* NAGŁÓWKI KART: jeden rozmiar (H5) — także tytuły w krokach „Zapisz i zapłać". */
.panel-uj .card-header h5, .panel-uj .card-header h6 { font-size: 1.1rem; margin-bottom: 0; }

/* ── „Zgłoś problem" (2026-09-26) — tylko układ ── */
/* do 3 zdjęć obok siebie (2026-09-29) — każde ~1/3 szerokości okna */
.zgl-podglad { max-width: min(240px, 100%); max-height: 200px; border-radius: .375rem;
    border: 1px solid rgba(127,127,127,.35); display: block; }
.zgl-miniatura { max-width: 100%; max-height: 180px; border-radius: .375rem;
    border: 1px solid rgba(127,127,127,.35); cursor: zoom-in; }

/* „Zapisz formację na turniej" — kod rabatowy i pływający pasek w PRAWEJ kolumnie (lg: lista
   formacji zajmuje 3/12 = 25% + odstęp kolumn). Pasek zostaje bezpośrednim dzieckiem zakładki,
   żeby `position: sticky` działało (2026-09-26, zgłoszenie #2). */
@media (min-width: 992px) {
    .zf-prawa-kolumna { margin-left: calc(25% + .75rem); }
}

/* Matryca Trenera „⚡ Zapisz na turniej" — nazwy kategorii w nagłówku POZIOMO (zgłoszenie #11,
   2026-09-26). Gdy tabela nie mieści się w szerokości, `assets/matryca_naglowki.js` dokłada
   `.mx-pion` na `.panel-matryca` i nazwy wracają do pionu (węższe kolumny). */
.zapisy-matrix th.mx-kat-th { min-width: 84px; }
.zapisy-matrix .mx-kat-nazwa { max-width: 130px; white-space: normal; overflow-wrap: anywhere; }
.panel-matryca.mx-pion .zapisy-matrix th.mx-kat-th { min-width: 0; width: 64px; }
.panel-matryca.mx-pion .mx-kat-nazwa {
    writing-mode: vertical-rl; transform: rotate(180deg);
    max-height: 120px; max-width: none; overflow: hidden;
}
/* W trybie pionowym znaczniki w nagłówku (typ, dzień · godzina) i wiek mogą się zawijać,
   żeby kolumna faktycznie się zwęziła. */
.panel-matryca.mx-pion th.mx-kat-th .badge,
.panel-matryca.mx-pion th.mx-kat-th small { white-space: normal; }

/* ── Nagłówek paneli (2026-09-26, makieta „Nagłówek paneli" — wariant A) ──────────────
   logo systemu + nazwa systemu │ imię i nazwisko nad „Rola · szkoła". Budowa:
   `_naglowek_brand` (components/ui_elements.py). Kolory tła/tekstu — jak dotąd z SA
   (navbar_bg / navbar_text, nadpisania per panel); font ozdobny i rozmiar z SA dotyczą
   tylko `.naglowek-system`. Sędzia ma osobny, minimalny nagłówek (reguły w _generate_ui_css). */
.naglowek-brand { display: inline-flex; align-items: center; gap: 12px; }
.naglowek-logo { height: 36px; width: auto; max-width: 120px; object-fit: contain; }
.naglowek-sep { width: 1px; height: 32px; background: currentColor; opacity: .3; }
.naglowek-tozsamosc { display: inline-flex; flex-direction: column; line-height: 1.2; }
.naglowek-osoba { font-size: 15px; font-weight: 700; }
.naglowek-opis { font-size: 12px; font-weight: 400; opacity: .75; }
/* ── Menu nagłówka (2026-09-30, makieta właściciela; wcześniej #43) ──────────────────────
   ≥1200 px: przyciski w rzędzie, równa wysokość, tekst w jednej linii.
   <1200 px (tablet, telefon): przyciski pod hamburgerem ☰ (`page_header`), po rozwinięciu
   KAFELKI jak przy przełączaniu Widza u MC — ikona nad napisem, ramka 2px, zaokrąglenie 10px,
   min. 80px; 4 w rzędzie na tablecie, 2 na telefonie. Kolory zostają z klas `moje-przycisk*` (SA). */
.navbar .navbar-nav > .nav-item > .btn {
    white-space: nowrap; display: inline-flex; align-items: center; min-height: 31px;
}
.naglowek-hamburger { position: relative; margin-left: 10px; }
.naglowek-menu-kropka {
    position: absolute; top: 3px; right: 4px; width: 10px; height: 10px; border-radius: 50%;
    background: #dc3545; box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.naglowek-licznik { margin-left: 8px; }
@media (min-width: 1200px) {
    .navbar .naglowek-przyciski { align-items: center; }
    .navbar .naglowek-licznik { order: 5; margin-left: 12px; }   /* za „Wyloguj” */
}
@media (max-width: 1199.98px) {
    .navbar #naglowek-menu { flex-basis: 100%; }
    .navbar .naglowek-przyciski {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
        margin: 10px 0 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18);
    }
    .navbar .naglowek-przyciski > .nav-item { display: flex; }
    .navbar .naglowek-przyciski > .nav-item > .btn,
    .navbar .naglowek-przyciski > .nav-item > .nav-link {
        flex: 1; margin: 0 !important; min-height: 80px; padding: 14px 6px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
        border-width: 2px; border-style: solid; border-radius: 10px;
        white-space: normal; text-align: center; font-weight: 600;
    }
    .navbar .naglowek-przyciski > .nav-item > .nav-link { border-color: rgba(255,255,255,.3); }
    .navbar .naglowek-przyciski .bi { font-size: 1.5rem; margin: 0 !important; }
}
/* TELEFON (<768 px — ta sama granica co „(Telefon)” na ekranie logowania, d-md-none) — wariant B
   z makiety (właściciel 2026-09-30): WSZYSTKIE kafelki w JEDNYM rzędzie, małe (~62 px), żeby menu
   zasłaniało jak najmniej (u sędziego pod spodem są suwaki do głosowania). */
@media (max-width: 767.98px) {
    .navbar .naglowek-przyciski {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
    }
    .navbar .naglowek-przyciski > .nav-item > .btn,
    .navbar .naglowek-przyciski > .nav-item > .nav-link {
        min-height: 62px; padding: 8px 2px; gap: 4px; font-size: 11px; line-height: 1.15;
    }
    .navbar .naglowek-przyciski .bi { font-size: 1.25rem; }
    .navbar .naglowek-przyciski #zgl-otworz .badge { top: 3px; right: 3px; }
}
@media (max-width: 767.98px) {
    /* telefon (<768, jak „(Telefon)” na logowaniu): bez nazwy systemu i kreski — zostaje logo + tożsamość */
    .naglowek-brand .naglowek-system, .naglowek-brand .naglowek-sep { display: none; }
    .naglowek-logo { height: 28px; }
    .naglowek-osoba { font-size: 14px; }
    .naglowek-opis { font-size: 11px; }
}

/* ── Sklep turnieju (2026-09, views/sklep_*.py) ───────────────────────────────────────
   Neutralne ramki jak `.mf-wiersz` (kolor obramowania z motywu); stany zamówień i akcenty
   = znaczniki `zn-*` z SA. `.sklep-ar-ramka` = ramka „Do wydania" w Recepcji. */
.sklep-kafel, .sklep-zamowienie {
    border: 1px solid rgba(127,127,127,.35); border-radius: .5rem;
}
.sklep-brak-zdjecia {
    border: 1px dashed rgba(127,127,127,.6); color: rgba(127,127,127,.9);
}
.sklep-ar-ramka {
    border: 2px solid rgba(127,127,127,.45); border-radius: .5rem;
}
.sklep-karta-pamiatki > summary { list-style: revert; }

/* Karty kategorii na telefonie — układ poprawiony (zgłoszenie #16, 2026-09-26):
   [checkbox] [nazwa + plakietki]           [cena]
   Wcześniej `.form-check` ustawiał input NAD etykietą, a lista nie wypełniała karty, więc
   cena „pływała" w środku. Cała karta jest klikalna (`assets/karty_kategorii.js`). */
.uczestnik-kat-card { align-items: center; cursor: pointer; padding: 12px 14px; gap: 12px; }
.uczestnik-kat-card .uczestnik-kat-checklist { flex: 1 1 auto; min-width: 0; }
.uczestnik-kat-card .uczestnik-kat-checklist .form-check {
    display: flex; align-items: center; gap: 12px;
}
.uczestnik-kat-card .uczestnik-kat-checklist .form-check-input { margin-top: 0; flex-shrink: 0; }
.uczestnik-kat-card .uczestnik-kat-checklist .form-check-label { flex: 1 1 auto; min-width: 0; }
.uczestnik-kat-card .uczestnik-kat-nazwa { font-size: 0.95rem; }
.uczestnik-kat-card .uczestnik-kat-price { padding-top: 0; font-size: 0.95rem; }
html.dark-mode .uczestnik-kat-dzien { color: #c8d0da; }

/* Płatności trenera → Transakcje: nagłówek z przyciskiem „Pobierz potwierdzenie (PDF)" —
   przycisk jest pozycjonowany absolutnie (bs_acc_item header_extra), więc treść nagłówka
   (kwota po prawej) zostawia mu miejsce. */
.trans-naglowek-pdf { padding-right: 270px; }
@media (max-width: 767.98px) { .trans-naglowek-pdf { padding-right: 0; padding-bottom: 36px; } }

/* SA → Testy → „Dane testowe": każdy moduł w osobnej ramce (życzenie właściciela 2026-09-28 —
   moduły zlewały się ze sobą). Ciemny motyw: biała ramka; jasny: szara (biała byłaby niewidoczna). */
.sa-modul { border: 1px solid #adb5bd; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
html.dark-mode .sa-modul { border-color: #ffffff; }

/* Panel Uczestnik/Trener — menu boczne PODĄŻA za przewijaniem (życzenie właściciela 2026-09-28:
   „żeby zakładki podążały za tobą w dół strony"). Tylko desktop (≥768px; na telefonie menu jest
   NAD treścią). `sticky` działa na pływającym (`float:left`) elemencie, bo jego rodzic (wrapper
   dbc.Tabs) ma wysokość treści zakładki. Menu wyższe niż ekran → własny pasek przewijania. */
@media (min-width: 768px) {
    #panel-main-tabs.sidebar-tabs-vertical {
        position: sticky;
        top: 12px;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        z-index: 5;
    }
}

/* AT „Kategorie — liczba zapisanych": wiersz-nagłówek dnia (jak Harmonogram, zgłoszenie #25) */
.at-kat-dzien-sep { background: rgba(127,127,127,.12) !important; font-size: .9rem; padding-top: .45rem !important; }

/* ── AT → Transakcje: kafle + tabela płatników + panel (views/transakcje_at.py, 2026-09-28) ──
   Kolory stanów ze znaczników SA (zn-plat-*: `-ramka` = lewy pasek kafla, `-tlo` = aktywny kafel). */
.at-tx-kafle-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.at-tx-kafel { text-align: left; cursor: pointer; border: 1px solid #d9dee4; border-left-width: 5px; border-radius: 8px;
               background: #ffffff; color: inherit; padding: 8px 11px; display: grid; gap: 1px; font: inherit; }
html.dark-mode .at-tx-kafel { background: #262b33; border-top-color: #3c4450; border-right-color: #3c4450; border-bottom-color: #3c4450; color: #e2e7ec; }
.at-tx-kafel-akt { box-shadow: inset 0 0 0 2px currentColor; }
.at-tx-kafel-n { font-size: 1.35rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.at-tx-kafel-e { font-size: .8rem; font-weight: 700; }
.at-tx-kafel-o { font-size: .72rem; opacity: .7; }
/* Pasek filtrów = nagłówek tabeli (wariant A, 2026-09-28). Jedna wysokość (34px) i promień (8px) dla
   wszystkich elementów; wyróżnienie (aktywny segment, włączone „Grupuj”) = klasy `zn-karta-wybrana*` z SA. */
.at-tx-blok { border: 1px solid #ced4da; border-radius: 10px; overflow: hidden; background: #ffffff; }
.at-tx-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px;
               background: #f1f4f7; border-bottom: 1px solid #ced4da; }
.at-tx-seg { display: inline-flex; border: 1px solid #ced4da; border-radius: 8px; overflow: hidden; background: #ffffff; }
.at-tx-seg .form-check { margin: 0; padding: 0; display: flex; }
.at-tx-seg-opcja { height: 34px; padding: 0 14px; display: flex; align-items: center; gap: 7px; margin: 0;
                   font-weight: 700; font-size: .85rem; cursor: pointer; opacity: .75; user-select: none;
                   border-right: 1px solid #ced4da; }
.at-tx-seg .form-check:last-child .at-tx-seg-opcja { border-right: none; }
.at-tx-seg-opcja.zn-karta-wybrana { opacity: 1; }
.at-tx-ile { font-size: .72rem; font-weight: 900; opacity: .75; font-variant-numeric: tabular-nums; }
.at-tx-pole { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 0 0 11px;
              border: 1px solid #ced4da; border-radius: 8px; background: #ffffff; }
.at-tx-szukaj-pole { flex: 1; min-width: 220px; }
.at-tx-pole:focus-within, .at-tx-chip:hover, .at-tx-seg-opcja:hover { filter: brightness(.97); }
html.dark-mode .at-tx-pole:focus-within, html.dark-mode .at-tx-chip:hover, html.dark-mode .at-tx-seg-opcja:hover { filter: brightness(1.15); }
.at-tx-pole > .bi, .at-tx-pole-k { opacity: .65; font-size: .85rem; white-space: nowrap; }
html .at-tx-pole .at-tx-pole-input, html .at-tx-pole .at-tx-pole-input:focus { border: none !important; background-color: transparent !important; box-shadow: none !important;
                                height: 32px; padding-left: 0; font-size: .85rem; }
.at-tx-pole select.at-tx-pole-input { font-weight: 700; padding-right: 2rem; }
.at-tx-grupuj .form-check { margin: 0; padding: 0; }
.at-tx-chip { height: 34px; display: inline-flex; align-items: center; padding: 0 12px; margin: 0; cursor: pointer;
              border: 1px solid #ced4da; border-radius: 8px; background: #ffffff; font-weight: 700; font-size: .85rem;
              white-space: nowrap; user-select: none; }
.at-tx-chip.zn-karta-wybrana-ramka { box-shadow: 0 0 0 1px currentColor; }
.at-tx-blok .at-tx-tabela thead th { background: transparent; font-size: .72rem; text-transform: uppercase;
                                     letter-spacing: .04em; opacity: .75; }
.at-tx-blok > #at-tx-tabela > .komunikat-1 { margin: 10px; }
html.dark-mode .at-tx-blok { border-color: #4a5568; background: #1e2330; }
html.dark-mode .at-tx-pasek { background: #2c3340; border-bottom-color: #4a5568; }
html.dark-mode .at-tx-seg, html.dark-mode .at-tx-pole, html.dark-mode .at-tx-chip { border-color: #4a5568; background: #252a33; }
html.dark-mode .at-tx-seg-opcja { border-right-color: #4a5568; }
/* Natywna lista opcji „Sortuj” — pole jest przezroczyste, więc bez tego opcje dostawały BIAŁE tło
   przeglądarki z jasnym tekstem trybu ciemnego (nieczytelne). */
html.dark-mode .at-tx-pole select.at-tx-pole-input { color-scheme: dark; }
html.dark-mode .at-tx-pole select.at-tx-pole-input option { background-color: #252a33; color: #c8d0da; }
html:not(.dark-mode) .at-tx-pole select.at-tx-pole-input option { background-color: #ffffff; color: #212529; }
html.dark-mode .at-tx-blok .at-tx-tabela thead th { background-color: #1e2330 !important; }
.at-tx-tabela { font-size: .88rem; }
.at-tx-wiersz { cursor: pointer; }
.at-tx-typ { font-size: .66rem; font-weight: 700; padding: 0 7px; border-radius: 9px; border: 1px solid rgba(127,127,127,.4);
             opacity: .8; margin-left: 6px; vertical-align: 1px; }
.at-tx-grupa td { background: rgba(127,127,127,.1) !important; cursor: default; }
html.dark-mode .at-tx-grupa td { background: #2c3340 !important; }   /* `.dark-mode .table td` ma wyższą specyficzność (#29) */
.at-tx-kafel:hover { filter: brightness(.97); }
html.dark-mode .at-tx-kafel:hover { filter: brightness(1.15); }
.at-tx-sek { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.at-tx-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: .88rem; }
.at-tx-poz { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; border-bottom: 1px dashed rgba(127,127,127,.35); padding: 3px 0; }
.at-tx-suma { display: flex; justify-content: space-between; font-weight: 900; font-size: 1rem; margin-top: 4px; }
.at-tx-edycja { display: grid; gap: 2px; }
.at-tx-potw { border: 1px solid rgba(127,127,127,.4); border-radius: 8px; padding: 10px 12px; background: rgba(127,127,127,.07); }   /* krok potwierdzenia (#30) */

/* Trener → Płatności: filtr kafli po klasie wrappera (callbacks_platnosci_trener.py, 2026-09-28).
   „Do zapłaty" widoczne tylko przy kaflu Do zapłaty / Wszystkie; wiersze innych stanów ukryte. */
.tr-tx-filtr-prz .tr-sekcja-zaplata, .tr-tx-filtr-fak .tr-sekcja-zaplata, .tr-tx-filtr-cash .tr-sekcja-zaplata,
.tr-tx-filtr-opl .tr-sekcja-zaplata, .tr-tx-filtr-anul .tr-sekcja-zaplata { display: none; }
.tr-tx-filtr-zap .at-tx-wiersz:not(.tr-st-zap), .tr-tx-filtr-prz .at-tx-wiersz:not(.tr-st-prz),
.tr-tx-filtr-fak .at-tx-wiersz:not(.tr-st-fak), .tr-tx-filtr-cash .at-tx-wiersz:not(.tr-st-cash),
.tr-tx-filtr-opl .at-tx-wiersz:not(.tr-st-opl), .tr-tx-filtr-anul .at-tx-wiersz:not(.tr-st-anul) { display: none; }

/* Trener → Zapisz na turniej: kropka „zapisany, czeka na płatność” przy checkboxie (kolor = zn-plat-oczekuje z SA) */
.zapisy-kropka { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Ikony stanu w komórce (opłacone ✓ / w płatności ⏳) + legenda nad macierzą (2026-09-28) */
.zapisy-ikona { font-size: 1.15rem; line-height: 1; }
.zapisy-legenda { display: flex; flex-direction: column; gap: 7px; font-size: .85rem; }
/* Pojemnik symbolu o stałej szerokości — sam symbol zachowuje własny rozmiar (kropka 8px, kwadrat 14px). */
.zapisy-legenda-sym { width: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
/* Okienko (dbc.Popover) w trybie ciemnym — Bootstrap nie ma odpowiednika, więc tło/tekst jak modale */
html.dark-mode .popover { background-color: #252a33; border-color: #353c4a; color: #c8d0da; }
html.dark-mode .popover-header { background-color: #2c3340; border-bottom-color: #353c4a; color: #e0e8f0; }
html.dark-mode .popover-body { color: #c8d0da; }
html.dark-mode .popover .popover-arrow::after { border-bottom-color: #2c3340; border-top-color: #252a33; }
.zapisy-legenda-poz { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.zapisy-legenda-cb { display: inline-block; width: 14px; height: 14px; border: 1px solid #adb5bd; border-radius: 3px; }
.zapisy-legenda-cb.zn-uwaga-ramka { border-width: 2px; }

/* Macierze zapisów: cała komórka z aktywnym checkboxem jest klikalna (assets/komorka_klik.js, 2026-09-28) */
.zapisy-matrix tbody td:has(input[type="checkbox"]:not(:disabled)) { cursor: pointer; }
/* Macierz formacji: checkbox „w przedziale” bez kolorowej obwódki — jak w „Zapisz na turniej” (2026-09-28);
   żółta obwódka (`zn-uwaga-kolor`) zostaje tylko dla młodszych / gości wiekowych. */
.zf-cb.zf-cb-zwykly .form-check-input { border: 1px solid #adb5bd !important; box-shadow: none !important; }
html.dark-mode .zf-cb.zf-cb-zwykly .form-check-input:not(:checked) { border-color: #4a5568 !important; }
@media (max-width: 1199.98px) {
    /* licznik odpowiedzi na kafelku „Zgłoś problem” — w rogu, nie w trzeciej linii */
    .navbar .naglowek-przyciski #zgl-otworz { position: relative; }
    .navbar .naglowek-przyciski #zgl-otworz .badge { position: absolute; top: 6px; right: 8px; margin: 0 !important; }
}
@media (max-width: 767.98px) {
    /* telefon: logo + osoba ustępują miejsca licznikowi i ☰ (długie nazwisko → „…”), ☰ nie wypada za ekran */
    .navbar .navbar-brand { min-width: 0; flex: 1 1 0; overflow: hidden; margin-right: 0; }
    .navbar .navbar-brand .naglowek-tozsamosc { min-width: 0; }
    .navbar .navbar-brand .naglowek-osoba,
    .navbar .navbar-brand .naglowek-opis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .navbar .naglowek-hamburger { flex-shrink: 0; }
}

/* Przełącznik PL | EN (nagłówek Trenera, 2026-09-30): szeroki ekran — mała para przycisków;
   pod ☰ — kafelek na całą szerokość, dwa pola obok siebie (wybrany = moje-przycisk5 z SA). */
@media (max-width: 1199.98px) {
    .navbar .naglowek-przyciski > .nav-item.naglowek-jezyk { grid-column: 1 / -1; }
    .navbar .naglowek-jezyk .naglowek-jezyk-grupa { width: 100%; }
    .navbar .naglowek-jezyk .naglowek-jezyk-grupa > .btn {
        flex: 1; min-height: 56px; font-size: 1rem; font-weight: 800; letter-spacing: .04em;
        border-width: 2px; margin: 0 !important;
    }
    .navbar .naglowek-jezyk .naglowek-jezyk-grupa > .btn:first-child { border-radius: 10px 0 0 10px; }
    .navbar .naglowek-jezyk .naglowek-jezyk-grupa > .btn:last-child  { border-radius: 0 10px 10px 0; }
}
@media (max-width: 767.98px) {
    /* telefon (wariant B): PL | EN to zwykły kafelek w rzędzie — dwa pola jedno nad drugim */
    .navbar .naglowek-przyciski > .nav-item.naglowek-jezyk { grid-column: auto; }
    .navbar .naglowek-jezyk .naglowek-jezyk-grupa { flex-direction: column; }
    .navbar .naglowek-jezyk .naglowek-jezyk-grupa > .btn { min-height: 31px; font-size: 12px; }
    .navbar .naglowek-jezyk .naglowek-jezyk-grupa > .btn:first-child { border-radius: 10px 10px 0 0; }
    .navbar .naglowek-jezyk .naglowek-jezyk-grupa > .btn:last-child  { border-radius: 0 0 10px 10px; }
}

/* Panele Sędziego i MC zawsze ciemne (assets/ciemne_panele.js, 2026-09-30) — przełącznik „Jasny/Ciemny” zbędny */
html.panel-zawsze-ciemny li:has(> #dark-mode-toggle),
html.panel-zawsze-ciemny #dark-mode-toggle { display: none !important; }
/* Hamburger ☰ w trybie ciemnym — bez jasnej obwódki Bootstrapa (prośba właściciela 2026-09-30) */
html.dark-mode .navbar .naglowek-hamburger { border-color: #4a5568 !important; }
html.dark-mode .navbar .naglowek-hamburger:focus { box-shadow: 0 0 0 2px #4a5568 !important; }

/* Cennik — karta ceny podstawowej + oś czasu progów (views/cennik_tabela.py, #58 2026-10-02).
   Akcenty z SA („Karta wybrana”, zn-ok); tu tylko układ i neutralne szarości jak w reszcie kreatora. */
.cen-pole-duze { font-size: 1.6rem !important; font-weight: 900; height: 56px; }
.cen-przyklad { font-size: .9rem; }
.cen-segmenty { display: grid; gap: 6px; }
.cen-seg { border-radius: 10px; padding: 10px 12px; border: 1px solid #ced4da; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.dark-mode .cen-seg { border-color: #4a5568; background: #1e2330; }
.cen-seg.zn-karta-wybrana-ramka { border-width: 2px; }
.cen-seg-cena { font-size: 1.35rem; font-weight: 900; }
.cen-roznica { font-weight: 700; }
.cen-os-pasek { position: relative; height: 30px; margin: 10px 14px 0; }
.cen-os-tor { position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: #ced4da; }
html.dark-mode .cen-os-tor { background: #4a5568; }
.cen-os-postep { position: absolute; left: 0; top: 13px; height: 4px; border-radius: 2px; }
.cen-os-kropka { position: absolute; top: 7px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
                 background: #8a95a3; border: 3px solid #fff; }
html.dark-mode .cen-os-kropka { border-color: #252a33; }
.cen-os-dzis { position: absolute; top: 3px; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; }
.cen-os-meta { position: absolute; right: -12px; top: 3px; width: 24px; height: 24px; border-radius: 6px;
               display: grid; place-items: center; font-size: .75rem; font-weight: 900; }
.cen-os-etykiety { position: relative; height: 36px; margin: 2px 14px 0; font-size: .75rem; }
.cen-os-etyk { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.cen-os-etyk-start { left: 0; transform: none; }
.cen-os-etyk-koniec { right: -12px; top: 16px; transform: none; }
.cen-os-etyk-dzis { top: 16px; }
.cen-os-etyk-lewo { transform: none; }
.cen-os-etyk-prawo { transform: translateX(-100%); }
/* Kalendarz Dash (SA → Wzory kalendarzy) w pasku „Podwyżka” — szerokość pola jak pozostałe */
.cen-pole-data .SingleDatePicker, .cen-pole-data .dash-datepicker { width: 100%; }
.cen-pole-data { width: 170px; }
.cen-pole-cena { width: 140px; }
@media (max-width: 767.98px) {
  .cen-segmenty { grid-template-columns: 1fr !important; }
}

/* Kreator — aktywny krok w stepperze i panel „Twój turniej” (etap 3 przebudowy, 2026-09-30).
   Kolor aktywnego = znacznik SA „Karta wybrana”. */
html:not(.dark-mode) .kr-segment.kr-segment-aktywny { background: color-mix(in srgb, #0d6efd 12%, transparent); }
html.dark-mode .kr-segment.kr-segment-aktywny { background: color-mix(in srgb, #f39c12 14%, transparent); }
.kr-panel { position: sticky; top: 64px; border-radius: 12px; padding: 12px; display: grid; gap: 6px; font-size: 0.85rem; }
html:not(.dark-mode) .kr-panel { background: #f7f9fb; border: 1px solid #dee2e6; }
html.dark-mode .kr-panel { background: #252a33; border: 1px solid #3a4250; }
.kr-panel-tyt { font-weight: 900; font-size: 0.95rem; margin-bottom: 2px; }
.kr-panel-poz { display: flex; gap: 9px; align-items: flex-start; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.kr-panel-poz:hover { background: rgba(127,127,127,.12); }
.kr-panel-poz-bez { cursor: default; }
.kr-panel-poz-bez:hover { background: transparent; }
.kr-panel-ikona { width: 18px; flex-shrink: 0; text-align: center; font-weight: 900; }
.kr-panel-ok { color: #1dbd8e; } .kr-panel-uwaga { color: #e67e22; } .kr-panel-brak { color: #8a95a3; }
.kr-stopka-wrap { padding: 8px 16px; }
.kr-stopka { display: flex; align-items: center; gap: 12px; width: 100%; }
@media (max-width: 575.98px) { .kr-stopka-info { display: none; } }

/* Kreator — sekcje kroku i kafelki wyboru (etap 4 przebudowy, 2026-09-30) */
.kr-sek { border-radius: 11px; padding: 12px 14px; margin-bottom: 12px; }
html:not(.dark-mode) .kr-sek { background: #f7f9fb; border: 1px solid #dee2e6; }
html.dark-mode .kr-sek { background: #252a33; border: 1px solid #3a4250; }
.kr-sek-tyt { font-weight: 900; font-size: 0.98rem; margin-bottom: 8px; }
.kafle-wybor { display: flex; flex-wrap: wrap; gap: 6px; }
.kafle-wybor .form-check { margin: 0; padding: 0; }
.kafel-wybor { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 8px; cursor: pointer;
               font-weight: 700; font-size: 0.85rem; border: 1px solid #ced4da; margin: 0; user-select: none; }
html.dark-mode .kafel-wybor { border-color: #4a5568; }
.kafel-wybor.zn-karta-wybrana-ramka { border-width: 2px; }

/* Kreator — liczniki ról kont technicznych (etap 5 przebudowy, 2026-09-30) */
.kr-liczniki { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.kr-licznik { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; }
html:not(.dark-mode) .kr-licznik { border: 1px solid #dee2e6; background: #fff; }
html.dark-mode .kr-licznik { border: 1px solid #4a5568; background: #1e2330; }
.kr-licznik-nazwa { flex: 1; font-weight: 700; font-size: .85rem; }
.kr-licznik-pole { width: 70px !important; text-align: center; }

/* Kreator — krok Kategorie (etap 6 przebudowy, 2026-09-30) */
.kr-lbl { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .75; margin-bottom: 4px; }
.kr-sek-nr { margin-right: 6px; opacity: .8; }
.kr-szablony { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kr-szablon { text-align: left; padding: 8px 12px; border-radius: 10px; cursor: pointer; color: inherit; font-size: .88rem; }
html:not(.dark-mode) .kr-szablon { border: 1px solid #dee2e6; background: #fff; }
html.dark-mode .kr-szablon { border: 1px solid #4a5568; background: #1e2330; }
.kr-szablon:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
button.kafel-wybor { color: inherit; }
button.kafel-wybor:not(.zn-karta-wybrana-tlo) { background: transparent; }
.kafel-chip { font-weight: 600; padding: 4px 10px; border-radius: 999px; font-size: .8rem; }
.kr-tor { font-size: .85rem; }
.kr-tor:empty { display: none; }
.kr-tor-str { opacity: .6; }
.kr-podsum { position: sticky; top: 12px; padding: 12px; border-radius: 12px; }
html:not(.dark-mode) .kr-podsum { border: 1px solid #dee2e6; background: #fff; }
html.dark-mode .kr-podsum { border: 1px solid #4a5568; background: #1e2330; }
.kr-podsum-linia { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; padding: 2px 0; }
.kr-dzien-nag { font-weight: 700; margin: 8px 0 4px; }

/* Kreator — macierz płatności w kroku Turniej (2026-10-01) */
.kr-plat-macierz { width: 100%; border-collapse: collapse; font-size: .9rem; }
.kr-plat-macierz th, .kr-plat-macierz td { padding: 7px 8px; vertical-align: middle; }
.kr-plat-macierz th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
html:not(.dark-mode) .kr-plat-macierz td, html:not(.dark-mode) .kr-plat-macierz th { border-bottom: 1px solid #dee2e6; }
html.dark-mode .kr-plat-macierz td, html.dark-mode .kr-plat-macierz th { border-bottom: 1px solid #3a4250; }
.kr-plat-sw { display: inline-flex; justify-content: center; }
.kr-plat-sw .form-check { margin: 0; padding-left: 2.5em; min-height: 0; }