/* ══════════════════════════════════════════════════════════════
   Tryb ciemny — nakładka na Bootstrap FLATLY
   Klasa .dark-mode jest dodawana do <html> przez clientside.js
   ══════════════════════════════════════════════════════════════ */

/* Płynne przejście */
body,
.card, .card-header, .card-body, .card-footer,
.modal-content, .modal-header, .modal-body, .modal-footer,
.form-control, .form-select,
.dropdown-menu, .dropdown-item,
.nav-tabs .nav-link,
.list-group-item,
.accordion-item, .accordion-button, .accordion-body,
.table {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── Tło strony ─────────────────────────────────────────────── */
.dark-mode,
.dark-mode body {
    background-color: #1a1d23 !important;
    color: #c8d0da !important;
}

/* ── Navbar (pasek z nazwą panelu) ──────────────────────────── */
.dark-mode .navbar.bg-dark {
    background-color: #2c3340 !important;
    border-bottom: 1px solid #353c4a;
}

/* Brand (klik/hover na nazwę panelu) — bez zielonego */
.dark-mode .navbar-dark .navbar-brand:hover,
.dark-mode .navbar-dark .navbar-brand:focus {
    color: #e8f0f8 !important;
    text-decoration: none;
}

/* ── Karty ──────────────────────────────────────────────────── */
.dark-mode .card {
    background-color: #252a33 !important;
    border-color: #353c4a !important;
    color: #c8d0da !important;
}
.dark-mode .card-header {
    background-color: #2c3340 !important;
    border-color: #353c4a !important;
    color: #c8d0da !important;
}
.dark-mode .card-body {
    background-color: #252a33 !important;
    color: #c8d0da !important;
}
.dark-mode .card-footer {
    background-color: #2c3340 !important;
    border-color: #353c4a !important;
}

/* ── Tabele ─────────────────────────────────────────────────── */
.dark-mode .table {
    color: #c8d0da !important;
    border-color: #353c4a !important;
    background-color: #1e2330 !important;
}
.dark-mode .table th,
.dark-mode .table td {
    border-color: #353c4a !important;
    background-color: #1e2330 !important;
    color: #c8d0da !important;
}
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.04) !important;
    color: #c8d0da !important;
}
.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #1e2330 !important;
    color: #c8d0da !important;
}
.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}
.dark-mode thead th {
    background-color: #2c3340 !important;
    color: #c8d0da !important;
}

/* ── Formularze ─────────────────────────────────────────────── */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: #2c3340 !important;
    border-color: #4a5568 !important;
    color: #c8d0da !important;
}
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: #2c3340 !important;
    border-color: #6c7a8d !important;
    color: #c8d0da !important;
    box-shadow: 0 0 0 0.2rem rgba(200,208,218,0.15) !important;
}
.dark-mode .form-control::placeholder {
    color: #6c7a8d !important;
}
.dark-mode .form-control:disabled,
.dark-mode .form-control[readonly] {
    background-color: #1e2330 !important;
    color: #8a95a3 !important;
}
.dark-mode .form-select:disabled {
    background-color: #1e2330 !important;
    color: #8a95a3 !important;
}
.dark-mode label,
.dark-mode .form-label {
    color: #c8d0da !important;
}
.dark-mode .form-check-label {
    color: #c8d0da !important;
}
.dark-mode .form-check-input:not(:checked) {
    background-color: #2c3340 !important;
    border-color: #4a5568 !important;
}
.dark-mode .input-group-text {
    background-color: #2c3340 !important;
    border-color: #4a5568 !important;
    color: #c8d0da !important;
}

/* ── Modalne okna ───────────────────────────────────────────── */
.dark-mode .modal-content {
    background-color: #252a33 !important;
    border-color: #353c4a !important;
    color: #c8d0da !important;
}
.dark-mode .modal-header {
    border-color: #353c4a !important;
    background-color: #2c3340 !important;
}
.dark-mode .modal-footer {
    border-color: #353c4a !important;
    background-color: #2c3340 !important;
}
.dark-mode .modal-title {
    color: #c8d0da !important;
}
.dark-mode .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

/* ── Panele boczne (dbc.Offcanvas) — jak modale. Bez tego panel zostawał BIAŁY, a teksty
   dostawały jasne kolory trybu ciemnego → biel na bieli (AT → Transakcje, zgłoszenie #29). */
.dark-mode .offcanvas {
    background-color: #252a33 !important;
    border-color: #353c4a !important;
    color: #c8d0da !important;
}
.dark-mode .offcanvas-header {
    background-color: #2c3340 !important;
    border-bottom: 1px solid #353c4a;
}
.dark-mode .offcanvas-title {
    color: #e0e8f0 !important;
}

/* ── Zakładki (tabs) ────────────────────────────────────────── */
.dark-mode .nav-tabs {
    border-color: #353c4a !important;
}
.dark-mode .nav-tabs .nav-link {
    color: #8a95a3 !important;
    border-color: transparent !important;
}
.dark-mode .nav-tabs .nav-link:hover {
    border-color: #4a5568 !important;
    color: #c8d0da !important;
    background-color: rgba(255,255,255,0.04) !important;
}
.dark-mode .nav-tabs .nav-link.active {
    background-color: #252a33 !important;
    border-color: #353c4a #353c4a #252a33 !important;
    color: #e8f0f8 !important;
    font-weight: 600;
}
.dark-mode .tab-content {
    background-color: transparent !important;
}

/* ── Bootstrap Dropdown (dbc.DropdownMenu) ──────────────────── */
.dark-mode .dropdown-menu {
    background-color: #252a33 !important;
    border-color: #4a5568 !important;
}
.dark-mode .dropdown-item {
    color: #c8d0da !important;
}
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: #2c3340 !important;
    color: #fff !important;
}
.dark-mode .dropdown-divider {
    border-color: #353c4a !important;
}

/* ── dcc.Dropdown / dcc.Upload / dcc.Tabs (Dash 4) — CSS variables ── */
/* Nadpisanie zmiennych projektowych Dash 4 w trybie ciemnym */
.dark-mode {
    --Dash-Fill-Inverse-Strong:     #2c3340;
    --Dash-Stroke-Strong:           #4a5568;
    --Dash-Stroke-Weak:             #353c4a;
    --Dash-Text-Strong:             #c8d0da;
    --Dash-Text-Weak:               #8a95a3;
    --Dash-Text-Disabled:           #6c7a8d;
    --Dash-Text-Primary:            #c8d0da;
    --Dash-Fill-Interactive-Strong: #4a9eff;
    --Dash-Fill-Interactive-Weak:   rgba(74,158,255,0.12);
    --Dash-Fill-Primary-Active:     #2c4a6e;
    --Dash-Fill-Primary-Hover:      rgba(74,158,255,0.15);
    --Dash-Fill-Disabled:           #1e2330;
    --Dash-Shading-Strong:          rgba(0,0,0,0.5);
    --Dash-Shading-Weak:            rgba(0,0,0,0.25);
    --Dash-Tooltip-Background-Color: #1a1d23;
    --Dash-Tooltip-Border-Color:     #4a5568;
    --tabs-background:              #252a33;
    --tabs-border:                  #353c4a;
    --tabs-primary:                 #4a9eff;
}

/* Dodatkowe nadpisania bezpośrednie dla dcc.Dropdown */
.dark-mode .dash-dropdown {
    background: #2c3340 !important;
    border-color: #4a5568 !important;
    color: #c8d0da !important;
}
.dark-mode .dash-dropdown-content {
    background: #252a33 !important;
    border-color: #4a5568 !important;
    color: #c8d0da !important;
}
.dark-mode .dash-dropdown-option {
    color: #c8d0da !important;
    box-shadow: 0 -1px 0 0 #353c4a inset !important;
}
.dark-mode .dash-dropdown-option:hover,
.dark-mode .dash-dropdown-option:focus {
    background: #2c3340 !important;
    color: #fff !important;
}
.dark-mode .dash-dropdown-search {
    color: #c8d0da !important;
    background: transparent !important;
}
/* Niebieska obwódka focus na dropdownach — usunięcie `outline`/`box-shadow` jest
   teraz GLOBALNE (style.css, poza `.dark-mode` — dotyczyła obu motywów, patrz
   komentarz tam, 2026-09-22). Tu zostaje tylko kolor obramowania SPECYFICZNY dla
   ciemnego motywu, żeby po zdjęciu focus-ringu widoczna była nadal jakaś (stonowana)
   krawędź, spójna z resztą `.dash-dropdown` w tym pliku. */
.dark-mode .dash-dropdown-search:focus,
.dark-mode .dash-dropdown-content:focus,
.dark-mode .dash-dropdown-content:focus-within,
.dark-mode .dash-dropdown:focus,
.dark-mode .dash-dropdown:focus-within {
    border-color: #4a5568 !important;
}
.dark-mode .dash-dropdown-value,
.dark-mode .dash-dropdown-value-item {
    color: #c8d0da !important;
}
.dark-mode .dash-dropdown-placeholder {
    color: #6c7a8d !important;
}
.dark-mode .dash-dropdown-trigger-icon,
.dark-mode .dash-dropdown-value-count {
    color: #8a95a3 !important;
    fill: #8a95a3 !important;
}
.dark-mode .dash-dropdown-clear {
    color: #8a95a3 !important;
    fill: #8a95a3 !important;
}

/* ── Alerty ─────────────────────────────────────────────────── */
.dark-mode .alert {
    border-width: 1px !important;
}
.dark-mode .alert-info {
    background-color: #1a2e3d !important;
    border-color: #1d4a6b !important;
    color: #7ecfed !important;
}
.dark-mode .alert-success {
    background-color: #1a2e25 !important;
    border-color: #1d5c3d !important;
    color: #6ddea5 !important;
}
.dark-mode .alert-warning {
    background-color: #2e2510 !important;
    border-color: #5c4a1d !important;
    color: #e3c15a !important;
}
.dark-mode .alert-danger {
    background-color: #2e1a1a !important;
    border-color: #5c1d1d !important;
    color: #e38a8a !important;
}
.dark-mode .alert-secondary {
    background-color: #252a33 !important;
    border-color: #353c4a !important;
    color: #c8d0da !important;
}

/* ── Lista ──────────────────────────────────────────────────── */
.dark-mode .list-group-item {
    background-color: #252a33 !important;
    border-color: #353c4a !important;
    color: #c8d0da !important;
}
.dark-mode .list-group-item.active {
    background-color: #2c3340 !important;
}
/* Hover kategorii w „Zamykanie kategorii" (tryb ciemny). Bazowe tło .list-group-item ma
   !important, które zabija bootstrapowy hover — w trybie jasnym hover działa domyślnie, tu
   trzeba go dodać. Scoped do sekcji dnia, żeby nie ruszać innych list. */
.dark-mode .recepcja-dzien-sekcja .list-group-item-action:hover {
    background-color: #313945 !important;
}

/* ── Accordion ──────────────────────────────────────────────── */
.dark-mode .accordion-item {
    background-color: #252a33 !important;
    border-color: #353c4a !important;
}
.dark-mode .accordion-button {
    background-color: #2c3340 !important;
    color: #c8d0da !important;
    border-color: #353c4a !important;
}
.dark-mode .accordion-button:not(.collapsed) {
    background-color: #1e2330 !important;
    color: #fff !important;
    box-shadow: inset 0 -1px 0 #353c4a !important;
}
.dark-mode .accordion-button::after {
    filter: invert(1) brightness(1.5);
}
.dark-mode .accordion-body {
    background-color: #252a33 !important;
    color: #c8d0da !important;
}
.dark-mode .accordion-collapse {
    border-color: #353c4a !important;
}

/* ── Accordion weryfikacji wieku — jasno czerwony (dark mode override) ────── */
.dark-mode .wiek-accordion .accordion-item {
    border-color: #f5c2c7 !important;
    background-color: #fde8ea !important;
}
.dark-mode .wiek-accordion .accordion-button {
    background-color: #fde8ea !important;
    color: #842029 !important;
    border-color: #f5c2c7 !important;
}
.dark-mode .wiek-accordion .accordion-button:not(.collapsed) {
    background-color: #fde8ea !important;
    color: #842029 !important;
    box-shadow: none !important;
}
.dark-mode .wiek-accordion .accordion-body {
    background-color: #fff5f5 !important;
    color: #1a1a1a !important;
}

/* ── Kolory tekstów ─────────────────────────────────────────── */
.dark-mode .text-dark {
    color: #c8d0da !important;
}
.dark-mode .text-muted {
    /* ⚠️ BIAŁY, nie szary. Poprzednie #8a95a3 było dobrane pod DOMYŚLNE, bardzo ciemne tło
       strony (#1a1d23). Ale tło w trybie ciemnym jest KONFIGUROWALNE (SA → Wygląd UI →
       Komunikaty, klucz `dark_toast_bg`) i przy jaśniejszym ustawieniu — u właściciela
       #565f71 — kontrast spadał do 2,11:1 przy normie 4,5:1 (zmierzone 2026-07-19 na
       zakładce SA → QR Kod: opisy sekcji były praktycznie nieczytelne).
       Biel na #565f71 daje 6,4:1, a na domyślnym #1a1d23 jeszcze więcej — bezpieczna
       w obu przypadkach. Skutek uboczny: teksty pomocnicze przestają być „przygaszone"
       względem zwykłych — świadomy kompromis na rzecz czytelności. */
    color: #ffffff !important;
}
.dark-mode .text-body {
    color: #c8d0da !important;
}
.dark-mode h1,.dark-mode h2,.dark-mode h3,
.dark-mode h4,.dark-mode h5,.dark-mode h6 {
    color: #e0e8f0 !important;
}
.dark-mode small,
.dark-mode .small {
    /* ⚠️ Ta reguła leży PO `.dark-mode .text-muted` i ma tę samą specyficzność, więc przy
       obu `!important` to ONA wygrywa. Opisy sekcji mają klasę `text-muted small` — samo
       rozjaśnienie `.text-muted` nic nie dawało (sprawdzone pomiarem 2026-07-19).
       Kolor musi być zmieniany w OBU miejscach naraz. */
    color: #ffffff !important;
}
.dark-mode .text-danger.small {
    color: #e38a8a !important;
}

/* ── Nagłówki sekcji / dividerki ────────────────────────────── */
.dark-mode hr {
    border-color: #353c4a !important;
}

/* Recepcja: nagłówek dnia w liście kategorii (Zamknięcie kategorii) */
.dark-mode .recepcja-dzien-header {
    background-color: #2c3340 !important;
    border-bottom: 1px solid #353c4a !important;
}

/* ── Spinner ────────────────────────────────────────────────── */
.dark-mode .spinner-border {
    border-color: #c8d0da;
    border-right-color: transparent;
}

/* ── Tooltips ───────────────────────────────────────────────── */
.dark-mode .tooltip-inner {
    background-color: #1a1d23 !important;
    border: 1px solid #4a5568;
    color: #c8d0da !important;
}

/* ── Badge — bez zmian (kolory akcentów zostają) ────────────── */

/* ── Przycisk toggle ciemny/jasny ───────────────────────────── */
.dm-icon-dark   { display: none !important; }
.dm-label-dark  { display: none !important; }
.dark-mode .dm-icon-light  { display: none !important; }
.dark-mode .dm-label-light { display: none !important; }
.dark-mode .dm-icon-dark   { display: inline-block !important; }
.dark-mode .dm-label-dark  { display: inline !important; }

/* ── dcc.Upload ─────────────────────────────────────────────── */
.dark-mode .upload-container {
    background-color: #2c3340 !important;
    border-color: #4a5568 !important;
    color: #c8d0da !important;
}

/* ── Scrollbar (Chromium) ───────────────────────────────────── */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.dark-mode ::-webkit-scrollbar-track {
    background: #1a1d23;
}
.dark-mode ::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
}
.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6c7a8d;
}

/* ── Sędzia: nr startowy w modalu ───────────────────────────── */
.dark-mode #sedzia-modal-nr {
    color: #7eb8f7 !important;
}

/* ── Sekcje formularza kategorii (AT) ──────────────────────── */
.dark-mode .at-kat-sekcja {
    border: 1px solid #fff !important;
}
.dark-mode .at-kat-sekcja > .card-header {
    border-bottom: 1px solid #fff !important;
}
.dark-mode .at-kat-fz-ramka {
    border: 2px solid #f87171 !important;
}
.dark-mode .at-turniej-row-hover:hover td {
    background-color: rgba(255,255,255,0.06) !important;
}

/* ── MC: powierzchnie modali — TRYB CIEMNY ───────────────────────────────────
   Paleta „GitHub dark", która wcześniej była zaszyta inline w prowadzacy.py /
   mc_*.py (i przez to nieprzełączalna). Teraz jest tu, więc motyw nią steruje. */
.dark-mode .mc-pow      { background-color: #0d1117 !important; color: #e0e0e0 !important; }
.dark-mode .mc-pow-card { background-color: #161b22 !important; }
.dark-mode .mc-pow-head { background-color: #161b22 !important; border-color: #30363d !important; }
.dark-mode .mc-txt      { color: #e0e0e0 !important; }
.dark-mode .mc-txt-dim  { color: #8b949e !important; }
.dark-mode .mc-pow-brd  { border-color: #30363d !important; }
.dark-mode .mc-tab-th    { background-color: #21262d !important; color: #8b949e !important;
                           border-bottom-color: #30363d !important; }
.dark-mode .mc-tab-td    { color: #e0e0e0 !important; border-bottom-color: #21262d !important; }
.dark-mode .mc-kpk-nazwa-klikalna:hover { color: #6ea8fe !important; }
.dark-mode .mc-pasek-tor { background-color: #2d333b !important; }
.dark-mode .mc-kafel-akt { background-color: #0d2b1a !important; }
/* MC — modal drabinki (CIEMNY): oryginalna paleta „GitHub dark", wcześniej inline. */
.dark-mode .mc-pow-red  { background-color: #2d0d0d !important; }
.dark-mode .mc-pow-blue { background-color: #0d1a2d !important; }
.dark-mode .mc-pow-akt  { background-color: #1a1500 !important; }
.dark-mode .mc-pow-fz   { background-color: #1a0a0a !important; }
.dark-mode .mc-pow-fz2  { background-color: #21262d !important; }

/* ── Kafelki CVC (siatka startów w modalu MC) — TRYB CIEMNY ──────────────────
   Paleta „GitHub dark", która wcześniej stała w style.css (arkuszu JASNYM) i przez to
   nie dawała się przełączyć — siatka zostawała czarna w trybie jasnym. */
.dark-mode .cvc-cell {
    background: #21262d; border-color: #30363d; color: #e0e0e0;
}
.dark-mode .cvc-cell:hover              { border-color: #58a6ff; }
.dark-mode .cvc-cell.cvc-selected       { border-color: #ffd23f; background: #3a2f00; }
.dark-mode .cvc-cell.cvc-aktywny        { border-color: #ff7b00; background: #4a2500; }
.dark-mode .cvc-cell.cvc-oceniony       { border-color: #2ea043; background: #0f2f18; }
.dark-mode .cvc-cell.cvc-oceniony.cvc-aktywny { border-color: #2ea043; }

/* Recepcja → Check-in: linia podziału kolumn */
.dark-mode .ar-split-uchwyt::before        { background: #30363d; }
.dark-mode .ar-split-uchwyt:hover::before  { background: #58a6ff; }

/* <code> — np. hasło `test123` w opisach SA. Bootstrap daje mu róż #e83e8c, który na
   konfigurowalnym tle strony (u właściciela #565f71) miał kontrast 1,67:1 — hasła nie
   dało się odczytać. Bursztyn + ciemniejsza podkładka: czytelne, a nadal odróżnia się
   od zwykłego tekstu jako „kod". */
.dark-mode code {
    color: #ffd479 !important;
    background-color: rgba(0, 0, 0, 0.28);
    padding: 0 .28rem;
    border-radius: 3px;
}


/* Pulpit AT — alerty (_widget_alerty, admin_turnieju.py). Jasne tła z style.css
   (#fdf1ef itd.) + domyślny jasny tekst .text-muted w dark mode = nieczytelne
   (bug 2026-09-22, zgłoszenie właściciela — inline hex ignorował tryb ciemny
   całkowicie, teraz to klasy więc dark mode może je nadpisać). Ciemne, stonowane
   tła + jawny jasny kolor tytułu (domyślny <body> text jest jasny w dark mode,
   ale nie ma tego pewności bez wymuszenia — dziedziczenie po .text-muted itp.). */
.dark-mode .pulpit-alert-danger  { background-color: #3a1f1c !important; }
.dark-mode .pulpit-alert-warning { background-color: #3a2f14 !important; }
.dark-mode .pulpit-alert-info    { background-color: #1a2a3a !important; }
.dark-mode .pulpit-alert-danger  > div:last-child > div:first-child,
.dark-mode .pulpit-alert-warning > div:last-child > div:first-child,
.dark-mode .pulpit-alert-info    > div:last-child > div:first-child {
    color: #e8ecf1 !important;
}
.dark-mode .pulpit-alert-icon-danger  { color: #ef7a63 !important; }
.dark-mode .pulpit-alert-icon-warning { color: #e0ad4e !important; }
.dark-mode .pulpit-alert-icon-info    { color: #6fa3e8 !important; }
.dark-mode .pulpit-kpi-alert-value    { color: #ef7a63 !important; }
.dark-mode .pulpit-kpi-ok             { color: #4fbb7d !important; }

/* ── Autofill w polach tekstowych (AT → Dodaj konto personelu) ──────────────── */
.input-dark-mode:-webkit-autofill,
.input-dark-mode:-webkit-autofill:hover,
.input-dark-mode:-webkit-autofill:focus,
.input-dark-mode:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #2c3340 inset !important;
    -webkit-text-fill-color: #c8d0da !important;
    caret-color: #c8d0da !important;
}