/*
 * Tmavy rezim aplikace (jen stranky aplikace, ne index/navod/podminky).
 * Zapina se atributem data-theme="dark" (+ data-bs-theme="dark" pro Bootstrap) na <html>;
 * nastavuje ho mala skripta v <head> kazde sablony podle localStorage 'theme' a prepinac
 * v mch_account.html. Vychozi je svetly rezim = tenhle soubor se bez atributu nijak neuplatni.
 *
 * Selektory zacinaji "html[data-theme="dark"]" (specificita 0,1,1+), takze vyhraji nad
 * :root a tridami v <style> jednotlivych stranek bez ohledu na poradi nacteni.
 */

html[data-theme="dark"] {
    color-scheme: dark;

    /* promenne, ktere pouzivaji <style> bloky jednotlivych stranek */
    --bg: #12121c;
    --ink: #e8e8f4;
    --muted: #a0a6bb;
    --shadow: 0 8px 25px rgba(0, 0, 0, 0.45);

    /* pridane pro tmavy rezim */
    --surface: #1d1d2c;
    --surface-2: #26263a;
    --line: #3a3a52;

    /* Bootstrap: karty, formulare, tabulky pak sedi s nasimi povrchy */
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
}

/* --- bile "povrchy" (karty, panely) --- */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .card-panel,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .verify-card,
html[data-theme="dark"] .shop-item,
html[data-theme="dark"] .user-toggle,
html[data-theme="dark"] .tab-switch .tab-btn:not(.active),
html[data-theme="dark"] .manual-value {
    background: var(--surface);
}

html[data-theme="dark"] .event-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .user-toggle { border-bottom-color: var(--line); }
html[data-theme="dark"] .tab-switch .tab-btn:not(.active) { border-color: var(--line); }

/* --- jemne podbarvene boxy --- */
html[data-theme="dark"] .steps,
html[data-theme="dark"] .manual-entry,
html[data-theme="dark"] .payment-info,
html[data-theme="dark"] .password-requirements,
html[data-theme="dark"] .info-text,
html[data-theme="dark"] .member-chip {
    background: var(--surface-2);
}

html[data-theme="dark"] .warning-box {
    background: #3a3217;
    color: var(--ink);
}

/* --- tlacitka "zpet/odhlasit" --- */
html[data-theme="dark"] .btn-nav {
    background: #2d2d44;
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] .btn-nav:hover,
html[data-theme="dark"] .btn-nav:focus,
html[data-theme="dark"] .btn-nav:active {
    background: #38384f;
    border-color: #4a4a66;
    color: #fff;
}

/* --- tabulky --- */
html[data-theme="dark"] .table { --bs-table-bg: transparent; }
html[data-theme="dark"] .table-light {
    --bs-table-bg: var(--surface-2);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    color: var(--ink);
}

/* --- drobnosti --- */
html[data-theme="dark"] .shop-person { color: #a99dff; }
html[data-theme="dark"] .code-input { border-color: var(--line); }
html[data-theme="dark"] .manual-value,
html[data-theme="dark"] .steps,
html[data-theme="dark"] .manual-entry { border-color: var(--line); }

/* QR kody musi zustat na bilem podkladu, jinak je telefon nenacte
   (obrazek uz bilou podlozku a okraj ma; tady jen jistota) */
html[data-theme="dark"] .qr-container img {
    background: #fff;
    border-color: #fff;
}