:root {
    --primary: #28a745;
    --primary-dark: #1e7e34;
    --accent: #38c172;
    --light-green: #51d88a;
    --hover-color: #218838;
    --radius: 14px;
    --radius-sm: 8px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --surface: rgba(255, 255, 255, 0.95);
    --border: rgba(0, 0, 0, 0.07);
    --border-strong: rgba(40, 167, 69, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.09);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --text: #1a2e1a;
    --text-muted: #6b7280;
    /* Stejná dvojice barev, co appka už používá natvrdo pro hover stavy
       (např. #tridy-vyber-toggle:hover) — pojmenované proměnné jen proto,
       aby na ně šlo odkázat i odjinud (viz .chat-skupina-karta apod.),
       aniž by se muselo řešit vlastní tmavý override na každém místě zvlášť. */
    --bg-hover: #f0faf4;
    --bg-card: #fff;
}

/* ===== DARK THEME ===== */
html[data-theme="dark"] {
    --surface: #1e293b;
    --border: rgba(255,255,255,0.09);
    --border-strong: rgba(56,193,114,0.35);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.45);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.55);
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --bg-hover: #14352a;
    --bg-card: #1e293b;
}
html[data-theme="dark"] body {
    background: linear-gradient(160deg, #0f172a 0%, #1a2434 50%, #0f172a 100%) no-repeat fixed;
}
/* Hlavní plochy s natvrdo bílým pozadím */
html[data-theme="dark"] #okno-zaznamu,
html[data-theme="dark"] #tridy,
html[data-theme="dark"] #zaci,
html[data-theme="dark"] #chat-panel,
html[data-theme="dark"] #feedback-panel,
html[data-theme="dark"] #user-dropdown,
html[data-theme="dark"] #profil-panel,
html[data-theme="dark"] #chat-skupiny-content,
html[data-theme="dark"] .endora-panel { background: #1e293b; color: var(--text); }
/* Vstupní pole */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #0f172a; color: var(--text); border-color: rgba(255,255,255,0.12);
}
/* Filtr tlačítka a pilulky */
html[data-theme="dark"] .zaznam-filtr-btn { background: #0f172a; color: var(--text-muted); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .zaznam-filtr-btn:hover { background: #1a2434; color: #d1fae5; }
html[data-theme="dark"] .zaznam-filtr-btn.aktivni { background: #1e293b; color: #d1fae5; border-color: rgba(255,255,255,0.08); border-top: 2px solid var(--primary); }
/* Tlačítka tříd */
html[data-theme="dark"] a.trida { background: #334155; color: #d1fae5; border-color: rgba(56,193,114,0.3); }
html[data-theme="dark"] a.trida:hover { background: #3d4a5e; color: #d1fae5; }
html[data-theme="dark"] a.trida.aktivni { background: var(--primary); color: #fff; border-color: var(--primary-dark); }
/* Tlačítka žáků */
html[data-theme="dark"] a.zak { background: #334155; color: #e2e8f0; border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] a.zak:hover { background: #3d4a5e; color: #fff; }
html[data-theme="dark"] a.zak.ulozeno { background: #14352a !important; border-color: rgba(40,167,69,0.4) !important; color: #86efac !important; }
/* Plovoucí tlačítka */
html[data-theme="dark"] #chat-btn,
html[data-theme="dark"] #feedback-btn,
html[data-theme="dark"] #scrollTopBtn,
html[data-theme="dark"] #scrollBottomBtn { background: #1e293b; border-color: rgba(255,255,255,0.12); color: var(--text-muted); }
/* Hlavičky panelů */
html[data-theme="dark"] #chat-hlavicka,
html[data-theme="dark"] #feedback-hlavicka,
html[data-theme="dark"] #chat-footer,
html[data-theme="dark"] #okno-header { border-color: rgba(255,255,255,0.09); }
/* Bubliny zpráv – sdíleno chat + feedback (cizí/admin vs vlastní/uživatel) */
html[data-theme="dark"] .chat-zprava.cizi .chat-zprava-bublina,
html[data-theme="dark"] .feedback-vlakno-bublina { background: #334155; color: var(--text); }
html[data-theme="dark"] .chat-zprava.vlastni .chat-zprava-bublina,
html[data-theme="dark"] .feedback-vlakno-zprava.uzivatel .feedback-vlakno-bublina { background: #14352a; color: #d1fae5; }
/* Vstupní pole zprávy – sdíleno chat + feedback */
html[data-theme="dark"] #chat-input,
html[data-theme="dark"] #feedback-zprava { background: #0f172a; color: var(--text); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #chat-input::placeholder,
html[data-theme="dark"] #feedback-zprava::placeholder { color: #64748b; }
/* Disabled tlačítka odeslat – sdíleno */
html[data-theme="dark"] #chat-odeslat:disabled,
html[data-theme="dark"] #feedback-odeslat:disabled { background: #334155; color: #64748b; }
/* Chat – výběr komu */
html[data-theme="dark"] #chat-komu-volba { background: #0f172a; color: var(--text-muted); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #chat-komu-volba:hover { background: #1a2434; border-color: rgba(56,193,114,0.35); }
html[data-theme="dark"] #chat-komu-volba.soukromy { background: #3a2e14; border-color: #a16207; color: #fcd34d; }
html[data-theme="dark"] #chat-komu-dropdown { background: #1e293b; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .chat-komu-item { color: var(--text); }
html[data-theme="dark"] .chat-komu-item:hover { background: #334155; }
/* Feedback – kategorie tlačítka */
html[data-theme="dark"] .feedback-typ-btn { background: #0f172a; color: var(--text-muted); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .feedback-typ-btn:hover,
html[data-theme="dark"] .feedback-typ-btn.aktivni { background: #14352a; color: #d1fae5; border-color: var(--primary); }
/* Feedback – historie karta hover */
html[data-theme="dark"] .feedback-hist-karta { border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .feedback-hist-karta:hover { background: #0f172a; }
html[data-theme="dark"] .feedback-hist-typ { border-color: rgba(255,255,255,0.12); }
/* Posuvníky v panelech (tmavý režim) */
html[data-theme="dark"] #chat-zpravy,
html[data-theme="dark"] #feedback-obsah { scrollbar-width: thin; scrollbar-color: #475569 transparent; }
html[data-theme="dark"] #chat-zpravy::-webkit-scrollbar,
html[data-theme="dark"] #feedback-obsah::-webkit-scrollbar { width: 8px; }
html[data-theme="dark"] #chat-zpravy::-webkit-scrollbar-track,
html[data-theme="dark"] #feedback-obsah::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] #chat-zpravy::-webkit-scrollbar-thumb,
html[data-theme="dark"] #feedback-obsah::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
html[data-theme="dark"] #chat-zpravy::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] #feedback-obsah::-webkit-scrollbar-thumb:hover { background: #64748b; }
/* ── Dialogová okna ── */
html[data-theme="dark"] #pin-auth-content,
html[data-theme="dark"] #profil-content { background: #1e293b; color: var(--text); }
html[data-theme="dark"] #pin-input,
html[data-theme="dark"] #pin-potvrzeni-input,
html[data-theme="dark"] .pin-radek input[type="text"],
html[data-theme="dark"] .pin-radek input[type="email"] { background: #0f172a; color: var(--text); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #pin-auth-zavrit:hover,
html[data-theme="dark"] #profil-zavrit:hover { background: #334155; color: var(--text); }
html[data-theme="dark"] .profil-akce-btn:hover { background: #334155; }
html[data-theme="dark"] .profil-akce-btn.danger:hover { background: #3a1a1a; }
html[data-theme="dark"] #pin-ok-btn:disabled { background: #334155; }
/* Profilové taby */
html[data-theme="dark"] .profil-tab-btn:hover { color: var(--text); }
/* ── User widget (vpravo nahoře) ── */
html[data-theme="dark"] #scroll-lock-wrap:hover,
html[data-theme="dark"] #scroll-lock-wrap.on { background: #14352a; border-color: rgba(56,193,114,0.35); color: #d1fae5; }
/* ── Statistiky dne ── */
html[data-theme="dark"] .stat-item { background: #0f172a; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] #stats-radek { border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .stat-value { color: #4ade80; }
html[data-theme="dark"] #stats-toggle-btn:hover,
html[data-theme="dark"] #stats-toggle-btn.otevrene { background: #14352a; border-color: rgba(56,193,114,0.4); color: #d1fae5; }
/* ── Přepnout třídu (pill + dropdown) ── */
html[data-theme="dark"] #trida-fix-pill { background: #1e293b; border-color: rgba(255,255,255,0.12); color: var(--text); }
html[data-theme="dark"] #trida-fix-pill:hover,
html[data-theme="dark"] #trida-fix-pill.otevreno { background: #334155; border-color: rgba(255,255,255,0.2); }
html[data-theme="dark"] #trida-fix-dropdown { background: #1e293b; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .trida-fix-item { border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .trida-fix-item:hover { background: #334155; }
html[data-theme="dark"] .trida-fix-item.aktivni { color: #d1fae5; }
html[data-theme="dark"] #auth-status-btn:hover { background: #334155; border-color: rgba(255,255,255,0.12); color: var(--text); }
html[data-theme="dark"] #auth-status-btn.prihlasen:hover { background: #334155; border-color: rgba(56,193,114,0.35); }
html[data-theme="dark"] #user-tooltip { background: #1e293b; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #user-dropdown { background: #1e293b; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #user-dropdown-header { border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .user-dropdown-btn:hover { background: #334155; }
/* ── Hover tlačítek info / zavřít v panelech chat + feedback ── */
html[data-theme="dark"] #chat-zavrit:hover,
html[data-theme="dark"] #feedback-zavrit:hover,
html[data-theme="dark"] #chat-uvod-toggle:hover,
html[data-theme="dark"] #feedback-uvod-toggle:hover { background: #334155; }
/* ── Dialog skupin chatu ── */
html[data-theme="dark"] #chat-skupiny-zavrit:hover { background: #334155; color: var(--text); }
html[data-theme="dark"] .chat-skupina-karta { border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] #chat-skupiny-formular { background: #0f172a; border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] #skupiny-nazev-input { background: #1e293b; color: var(--text); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #skupiny-clenove-list { background: #1e293b; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #skupiny-pridat-select { background: #1e293b; color: var(--text); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #skupiny-pridat-select option { background: #1e293b; color: var(--text); }
html[data-theme="dark"] #skupiny-zrusit-btn { background: #334155; color: var(--text); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #skupiny-zrusit-btn:hover { background: #3d4a5e; }
/* ── Ikony připnout / skrýt u zpráv ── */
html[data-theme="dark"] .chat-zprava-smazat,
html[data-theme="dark"] .chat-zprava-pin { background: #334155; border-color: rgba(255,255,255,0.12); color: #94a3b8; }
html[data-theme="dark"] .chat-zprava-smazat:hover { background: #3a1a1a; border-color: #7f1d1d; color: #ef4444; }
html[data-theme="dark"] .chat-zprava-pin:hover,
html[data-theme="dark"] .chat-zprava-pin.pinned { background: #3a2e14; border-color: #a16207; color: #fbbf24; }
/* ── Dialogy připnout / skrýt ── */
html[data-theme="dark"] #chatSkrytContent,
html[data-theme="dark"] #chatPinContent { background: #1e293b; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #chatSkrytContent p,
html[data-theme="dark"] #chatPinContent p { color: var(--text); }
html[data-theme="dark"] #chatSkrytCancel,
html[data-theme="dark"] #chatPinCancel,
html[data-theme="dark"] #chatPinOdpinovat { background: #334155; color: var(--text); }
html[data-theme="dark"] #chatSkrytCancel:hover,
html[data-theme="dark"] #chatPinCancel:hover,
html[data-theme="dark"] #chatPinOdpinovat:hover { background: #3d4a5e; }
html[data-theme="dark"] .skupiny-clen-chip { background: #14352a; color: #d1fae5; border-color: rgba(56,193,114,0.35); }
/* Provozní banner + ouško */
html[data-theme="dark"] #provoz-banner { background: #1e293b; color: var(--text); box-shadow: 0 -4px 16px rgba(0,0,0,0.4); }
html[data-theme="dark"] #provoz-banner-tab { background: #1e293b; border-color: rgba(255,255,255,0.12); color: var(--text-muted); }
html[data-theme="dark"] #provoz-modal { background: #1e293b; color: var(--text); }
html[data-theme="dark"] #provoz-modal h3 { color: var(--text); }
html[data-theme="dark"] #provoz-modal p { color: var(--text-muted); }
/* Hledání žáka – banner + ouško */
html[data-theme="dark"] #hledani-banner { background: #1e293b; color: var(--text); box-shadow: 0 -4px 16px rgba(0,0,0,0.4); }
html[data-theme="dark"] #hledani-banner-tab { background: #1e293b; border-color: rgba(234,88,12,0.4); color: #fdba74; }
html[data-theme="dark"] #hledani-banner-pocet { background: #7c2d12; color: #fed7aa; }
html[data-theme="dark"] #confirmHledaniContent { background: #1e293b; color: var(--text); }
html[data-theme="dark"] #confirmHledaniContent p { color: var(--text-muted); }
html[data-theme="dark"] #confirmHledaniContent strong { color: #fdba74; }
html[data-theme="dark"] #confirmVyresenoContent { background: #1e293b; color: var(--text); }
html[data-theme="dark"] #confirmVyresenoContent p { color: var(--text-muted); }
/* Seznam záznamů – položky */
/* Záznamy dne – jednotné tmavé pozadí, ZACHOVAT levý barevný pruh statusu
   (border-left-color se nepřepisuje → bere se z light pravidel: accent/amber/red/gray) */
html[data-theme="dark"] #seznam-zaznamu li,
html[data-theme="dark"] #seznam-zaznamu li.nove,
html[data-theme="dark"] #seznam-zaznamu li.disabled,
html[data-theme="dark"] #seznam-zaznamu li.auto,
html[data-theme="dark"] #seznam-zaznamu li.overtime { background: #0f172a; }
html[data-theme="dark"] #seznam-zaznamu li { color: var(--text); }
html[data-theme="dark"] #seznam-zaznamu li.nove { color: #fcd34d; }
html[data-theme="dark"] #seznam-zaznamu li.overtime { color: #fca5a5; }
/* Světlá varianta overtimePulse (níže) je v dark módu skoro neviditelná — vlastní
   tmavý keyframe pulzuje do sytě červené místo do bílé/růžové. */
html[data-theme="dark"] #seznam-zaznamu li.overtime { animation: overtimePulseDark 2s infinite; }
html[data-theme="dark"] #seznam-zaznamu li.disabled { color: var(--text-muted); }
html[data-theme="dark"] #seznam-zaznamu li.nove.vlastni-zaznam:hover,
html[data-theme="dark"] #seznam-zaznamu li.overtime.vlastni-zaznam:hover { background: #1a2434; }
html[data-theme="dark"] #seznam-zaznamu li { scrollbar-color: rgba(255,255,255,.25) transparent; }
html[data-theme="dark"] #seznam-zaznamu li::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
/* Posuvník zvuku */
html[data-theme="dark"] .slider { background: #334155; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .slider:before { background-color: #475569; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e2e8f0'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3C/svg%3E"); }
html[data-theme="dark"] input:checked + .slider:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5' fill='%23e2e8f0'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E"); }
html[data-theme="dark"] input:checked + .slider { background: linear-gradient(160deg, #0f172a 0%, #1a2434 50%, #0f172a 100%); border-color: rgba(255,255,255,0.12); }

/* Dialog odhlášení */
html[data-theme="dark"] #odhlasitContent { background: #1e293b; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #odhlasitContent p { color: var(--text); }
html[data-theme="dark"] #odhlasitCancel { background: #334155; color: var(--text); }
html[data-theme="dark"] #odhlasitCancel:hover { background: #3d4a5e; }
/* Danger hover stavy */
html[data-theme="dark"] .user-dropdown-btn.danger:hover { background: #3a1a1a; }
/* Badges žáků */
html[data-theme="dark"] a.zak .badge.zero         { background: #14352a; color: #4ade80; }
html[data-theme="dark"] a.zak .badge.nonzero       { background: #3a2e14; color: #fcd34d; }
html[data-theme="dark"] a.zak .badge.nonzero-high  { background: #3a1a1a; color: #fca5a5; }
/* Chat – skupinový badge + pinnování */
html[data-theme="dark"] .chat-skupina-badge { background: #2d1b69; color: #c4b5fd; border-color: #4c1d95; }
html[data-theme="dark"] .chat-zprava-pinned { background: #3a2e14; color: #fcd34d; border-color: #a16207; }
html[data-theme="dark"] .chat-zprava-pin { background: #334155; border-color: rgba(255,255,255,0.12); color: #64748b; }
/* Pin reset ikony */
html[data-theme="dark"] .pin-reset-ikona.ok  { background: #14352a; color: #4ade80; }
html[data-theme="dark"] .pin-reset-ikona.err { background: #3a1a1a; color: #fca5a5; }
/* JS-vytvořené modaly (inline styly) */
html[data-theme="dark"] #maintenance-overlay > div { background: #1e293b !important; }
html[data-theme="dark"] #maintenance-overlay > div h3 { color: var(--text) !important; }
html[data-theme="dark"] #maintenance-overlay > div p  { color: var(--text-muted) !important; }
html[data-theme="dark"] #jinaRelacePopup > div { background: #1e293b !important; }
html[data-theme="dark"] #jinaRelacePopup > div p { color: var(--text) !important; }
/* Sdílený vzor pro modal content boxy (background:white + p:#374151) */
html[data-theme="dark"] #errorPopupContent,
html[data-theme="dark"] #confirmSkrytContent,
html[data-theme="dark"] #confirmUkonciContent,
html[data-theme="dark"] #limitVenkuContent,
html[data-theme="dark"] #edookitStavContent,
html[data-theme="dark"] #chatSkrytPinnedContent,
html[data-theme="dark"] #pinResetOdeslanContent { background: #1e293b; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #errorPopupContent p,
html[data-theme="dark"] #confirmSkrytContent p,
html[data-theme="dark"] #confirmUkonciContent p,
html[data-theme="dark"] #limitVenkuContent p,
html[data-theme="dark"] #edookitStavContent p,
html[data-theme="dark"] #chatSkrytPinnedContent p { color: var(--text); }
html[data-theme="dark"] #confirmSkrytCancel,
html[data-theme="dark"] #confirmUkonciCancel { background: #334155; color: var(--text); }
html[data-theme="dark"] #confirmSkrytCancel:hover,
html[data-theme="dark"] #confirmUkonciCancel:hover { background: #3d4a5e; }
html[data-theme="dark"] #confirmUkonciContent strong { color: #fcd34d; }
/* Feedback – identity bar, odpovědi, disabled */
html[data-theme="dark"] #feedback-jmeno-znamo { background: #0f172a; }
html[data-theme="dark"] .feedback-odpoved-karta { background: #14352a; }
html[data-theme="dark"] .feedback-odpoved-karta.neprectena { background: #3a1a1a; }
html[data-theme="dark"] .feedback-hist-karta:hover { background: #1a2434; }
html[data-theme="dark"] .feedback-hist-reply button:disabled,
html[data-theme="dark"] #feedback-odeslat:disabled { background: #334155; color: #64748b; }
/* Hover stavy plovoucích tlačítek a filtrů */
html[data-theme="dark"] #scrollTopBtn:hover,
html[data-theme="dark"] #scrollBottomBtn:hover { background: #1a2434 !important; border-color: rgba(56,193,114,0.3) !important; }
html[data-theme="dark"] #feedback-btn:hover { background: #1a2434 !important; border-color: rgba(56,193,114,0.3) !important; }
html[data-theme="dark"] .zaznam-filtr-btn:hover { background: #1a2434; color: #d1fae5; }
/* Profil slider přepínač */
html[data-theme="dark"] .profil-slider { background: #334155; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .profil-slider:before { background: #94a3b8; }
/* Pin org select (inline style override) */
html[data-theme="dark"] #pin-org-select { background: #0f172a !important; color: var(--text) !important; border-color: rgba(255,255,255,0.12) !important; }
/* PIN auth modal + profil modal */
html[data-theme="dark"] #pin-auth-content,
html[data-theme="dark"] #profil-content { background: #1e293b; }
html[data-theme="dark"] #pin-auth-zavrit:hover,
html[data-theme="dark"] #profil-zavrit:hover { background: #334155; }

/* Profil – inputy a akční tlačítka */
html[data-theme="dark"] .profil-input { background: #0f172a; }
html[data-theme="dark"] .profil-akce-btn { background: #1e293b; }
html[data-theme="dark"] .profil-akce-btn:hover { background: #334155; }
/* Auth modal – warning plná org */
html[data-theme="dark"] #pin-org-plna-warning { background: #3a1a1a; border-color: #7f1d1d; color: #fca5a5; }
/* Fix pill zavřít – červená hover */
html[data-theme="dark"] #trida-fix-zavrit:hover { background: #3a1a1a; }

/* Při přepnutí tématu vypnout všechny přechody – okamžitá, čistá změna */
html.theme-switching * { transition: none !important; }

html, body, #seznam-zaznamu { scroll-behavior: smooth; }
html { scrollbar-gutter: stable; }
* { -webkit-tap-highlight-color: transparent; }

/* Pozadí na html, aby při přetažení (overscroll) nevykoukl šedý výchozí podklad za body */
html {
    background: #f0faf4;
    overscroll-behavior-y: none;
}
html[data-theme="dark"] { background: #0f172a; }

body {
    font-family: 'Segoe UI', Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    background: linear-gradient(160deg, #f0faf4 0%, #e8f5ed 50%, #f5fbf7 100%) no-repeat fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    padding-top: 50px;
    padding-bottom: 50px;
    color: var(--text);
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    min-height: 100vh;
    overscroll-behavior-y: none;
}

body.loaded { opacity: 1; }
body.panel-open { overflow: hidden; }

/* ===== KONTEJNER ===== */
.container {
    width: min(80%, 1100px);
    margin: 0 auto 20px auto;
    padding: 16px 20px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

/* ===== NÁZEV ===== */
.stylovy-nazev {
    font-family: 'Pacifico', cursive;
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    background: linear-gradient(135deg, #1e7e34, #38c172, #28a745);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    margin-top: -20px;
    margin-bottom: 0;
    padding-bottom: 12px;
    position: relative;
    z-index: 0 !important;
    animation: fadeIn 0.9s ease-out forwards;
}

/* ===== DEFAULTNÍ LOGO APP ===== */
.app-default-logo {
    width: 44px;
    height: 44px;
    display: block;
    margin: 0 auto;
    animation: fadeIn 0.6s ease-out forwards;
}
.dl-bg  { fill: #e8f5ed; }
.dl-s   { fill: #1a7a3c; }
.dl-d   { stroke: #1a7a3c; }
.dl-a   { stroke: #1a7a3c; }
html[data-theme="dark"] .dl-bg { fill: #1a2e1e; }
html[data-theme="dark"] .dl-s  { fill: #38c172; }
html[data-theme="dark"] .dl-d  { stroke: #38c172; }
html[data-theme="dark"] .dl-a  { stroke: #38c172; }

/* ===== HLAVIČKA S LOGEM ===== */
.prevet-hlavicka {
    position: relative;
    text-align: center;
    padding-top: 28px;
}
#app-org-logo-wrap {
    text-align: center;
}

/* ===== LOGO ORGANIZACE ===== */
.app-org-logo {
    max-height: 56px;
    max-width: 200px;
    box-sizing: border-box;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    padding: 8px 14px;
    background: transparent;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.35)) drop-shadow(0 0 18px rgba(255,255,255,0.15));
    animation: fadeIn 0.6s ease-out forwards;
}
.pin-org-logo {
    max-height: 48px;
    max-width: 160px;
}
html[data-theme="dark"] .app-org-logo {
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.25)) drop-shadow(0 0 22px rgba(255,255,255,0.10));
}

.app-org-nazev-text {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}
.app-powered-by {
    font-size: 0.68rem;
    color: var(--text-muted);
    opacity: 0.5;
    margin-top: 2px;
    font-style: italic;
}

@keyframes fadeIn {
    0%  { opacity: 0; transform: translateY(-16px); }
    100%{ opacity: 1; transform: translateY(0); }
}

h2 {
    text-align: center;
    color: var(--text-muted);
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 10px;
    min-height: 900px;
    box-sizing: border-box;
}

/* ===== OBAL ZÁZNAMŮ ===== */
.zaznamy-obal {
    margin: 0 8px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ===== ZÁLOŽKY ZÁZNAMŮ ===== */
#zaznamy-filtry {
    display: flex;
    gap: 2px;
    padding: 0 0 0 3px;
    align-items: flex-end;
    flex-wrap: nowrap;
    position: relative;
    z-index: 1;
}

.zaznam-filtr-btn {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 7px 7px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    background: #f0f3f0;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    position: relative;
    bottom: -1px;
    white-space: nowrap;
}

.zaznam-filtr-btn:hover {
    background: #e8f5ed;
    color: var(--primary-dark);
}

.zaznam-filtr-btn.aktivni {
    background: white;
    color: var(--primary-dark);
    border-color: var(--border);
    border-top: 2px solid var(--primary);
    font-weight: 700;
    z-index: 2;
}

/* ===== OKNO ZÁZNAMŮ ===== */
#okno-zaznamu {
    margin: 0;
    width: 100%;
    background: white;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
}

/* ===== ZÁHLAVÍ OKNA ZÁZNAMŮ ===== */
#okno-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
}

#nadpis-zaznamu {
    flex: 1;
    margin: 0;
    font-size: 0.82rem;
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

#stats-toggle-btn {
    position: absolute;
    right: 0;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    color: #d1d5db;
    padding: 3px 7px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

#stats-toggle-btn:hover {
    color: var(--primary);
    background: #f0faf4;
    border-color: var(--border-strong);
}

#stats-toggle-btn.otevrene {
    color: var(--primary-dark);
    background: #f0faf4;
    border-color: var(--border-strong);
}

.stats-chevron {
    display: inline-block;
    font-size: 0.85rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

#stats-toggle-btn.otevrene .stats-chevron {
    transform: rotate(180deg);
}

/* ===== SEZNAM ZÁZNAMŮ ===== */
#seznam-obal {
    overflow-x: auto;
    overflow-y: hidden;
    flex-grow: 1;
    min-height: 40px;
}

/* Tenký vodorovný posuvník — jen na zařízeních s myší/trackpadem
   (hover:hover + pointer:fine), NE na dotykových (mobil/tablet), kde je
   vlastní stylovaný trvale viditelný posuvník zbytečný — ty ukazují svůj
   systémový indikátor jen krátce při scrollování. Zúžené okno na PC pořád
   spadá do "hover:hover", takže se tam posuvník objeví normálně. Bez
   téhle podmínky by šlo použít i appce vlastní .mobile/.desktop třídu
   (nastavovanou podle šířky okna), ale ta by zúžené PC okno mylně
   považovala za mobil a posuvník schovala přesně tam, kde má být vidět.
   --border-strong/--primary uz sami prepinaji barvu pro tmavy rezim (viz
   :root vs html[data-theme="dark"] vyse), takze staci jedno pravidlo pro
   obe temata. */
@media (hover: hover) and (pointer: fine) {
    #seznam-obal {
        scrollbar-width: thin;
        scrollbar-color: var(--border-strong) transparent;
    }
    #seznam-obal::-webkit-scrollbar { height: 8px; }
    #seznam-obal::-webkit-scrollbar-track { background: transparent; }
    #seznam-obal::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
    #seznam-obal::-webkit-scrollbar-thumb:hover { background: var(--primary); }
}

#seznam-zaznamu {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.87rem;
    width: max-content;
    min-width: 100%;
}

#seznam-zaznamu li {
    margin-bottom: 4px;
    line-height: 1.5;
    border-left: 3px solid var(--accent);
    -webkit-touch-callout: none;
    padding: 4px 10px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: #f8fdf9;
    color: var(--text);
    transition: background 0.3s ease;
    pointer-events: auto;
    cursor: default;
    display: flex;
    align-items: baseline;
    gap: 0;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}
/* Scrollovatelná část — jméno, třída, časy */
#seznam-zaznamu li > .li-obsah {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 6px;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.2) transparent;
}
#seznam-zaznamu li > .li-obsah > span { flex-shrink: 0; }
#seznam-zaznamu li > .li-obsah::-webkit-scrollbar { height: 5px; }
#seznam-zaznamu li > .li-obsah::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
#seznam-zaznamu li > .li-obsah::-webkit-scrollbar-track { background: transparent; }
/* Badge důvodu — vždy viditelný vpravo, mimo scroll */
#seznam-zaznamu li > .poz-duvod { flex-shrink: 0; margin-left: 6px; }

.skryt-zaznam-btn {
    pointer-events: auto;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    color: #d1d5db;
    font-size: 0.7rem;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
    user-select: none;
}

.skryt-zaznam-btn:hover {
    color: #6b7280;
    background: rgba(0,0,0,0.06);
}

#seznam-zaznamu li.nove {
    background: #fffbeb;
    border-left-color: #f59e0b;
    color: #78350f;
    pointer-events: auto;
}
#seznam-zaznamu li.nove.vlastni-zaznam { cursor: pointer; }
#seznam-zaznamu li.nove.vlastni-zaznam:hover { background: #fef3c7; }
.poz-duvod { display:inline-block; margin-left:7px; font-size:0.7rem; font-weight:600; background:rgba(40,167,69,.08); color:var(--text-muted); border:1px solid rgba(40,167,69,.15); border-radius:4px; padding:1px 6px; vertical-align:middle; white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.poz-duvod-edit { cursor:pointer; color:var(--primary-dark); background:rgba(40,167,69,.1); border-color:rgba(40,167,69,.25); }
.poz-duvod-edit:hover { background:rgba(40,167,69,.18); border-color:rgba(40,167,69,.4); }
html[data-theme="dark"] .poz-duvod { background:rgba(56,193,114,.08); color:var(--text-muted); border-color:rgba(56,193,114,.15); }
html[data-theme="dark"] .poz-duvod-edit { color:#86efac; background:rgba(56,193,114,.12); border-color:rgba(56,193,114,.25); }
html[data-theme="dark"] .poz-duvod-edit:hover { background:rgba(56,193,114,.22); }

#seznam-zaznamu li.disabled {
    border-left-color: #d1d5db;
    background: #f9fafb;
    opacity: 0.5;
    color: var(--text-muted);
}
#seznam-zaznamu li.disabled[data-klic] { cursor: pointer; pointer-events: auto; }

#seznam-zaznamu li.auto {
    border-left-color: #ef4444;
    background: #fef2f2;
}

#seznam-zaznamu li.overtime {
    border-left-color: #ef4444;
    background: #fff5f5;
    color: #7f1d1d;
    pointer-events: auto;
    animation: overtimePulse 2s infinite;
}
#seznam-zaznamu li.overtime.vlastni-zaznam { cursor: pointer; }
#seznam-zaznamu li.overtime.vlastni-zaznam:hover { background: #fee2e2; animation: none; }

@keyframes overtimePulse {
    0%, 100% { background: #fff5f5; }
    50% { background: #fee2e2; }
}
@keyframes overtimePulseDark {
    0%, 100% { background: #0f172a; }
    50% { background: #5c1a1a; }
}


/* ===== STATISTIKY V OKNĚ ZÁZNAMŮ ===== */
#stats-vnitrni {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0;
    transition: max-height 0.38s ease, opacity 0.28s ease, margin-bottom 0.3s ease;
}

#stats-vnitrni.otevrene {
    max-height: 220px;
    opacity: 1;
    margin-bottom: 10px;
}

#stats-radek {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0 4px 0;
    border-top: 1px solid var(--border);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: #f9fafb;
    border-radius: var(--radius-sm);
    padding: 9px 6px;
    border: 1px solid var(--border);
}

.stat-item-wide { flex: 1 1 100%; }

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
}

.stat-value.text {
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
}

.stat-label {
    font-size: 0.63rem;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

#stats-toggle-btn { display: none; }

/* ===== ZÁLOŽKA TŘÍDY – skrytá dokud není třída zvolena ===== */
.zaznam-filtr-btn[data-filtr="aktualni-trida"] {
    display: none;
}

/* ===== TŘÍDY ===== */
#tridy-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#tridy-toggle-btn {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
    padding: 2px 6px;
    border-radius: 6px;
}
#tridy-toggle-btn:hover { color: var(--primary-dark); }

/* Toggle zafixování scrollu — stejný styl jako #stats-toggle-btn */
#scroll-lock-wrap {
    position: absolute;
    right: 25px; /* zarovnáno s #stats-toggle-btn: 8px margin + 16px padding + 1px border */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: #d1d5db;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
#scroll-lock-wrap:hover {
    color: var(--primary);
    background: #f0faf4;
    border-color: var(--border-strong);
}
#scroll-lock-wrap.on {
    color: var(--primary-dark);
    background: #f0faf4;
    border-color: var(--border-strong);
}

/* Výběr viditelných tříd — stejný jazyk jako scroll-lock/zaci-hledat-toggle
   (šedá ikona, zelený "aktivní" stav), jen zrcadlené na levou stranu, aby
   nekolidovalo se scroll-lockem napravo */
#tridy-vyber-toggle {
    position: absolute;
    left: 25px; /* zrcadlově stejný odstup jako #scroll-lock-wrap: right: 25px */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
#tridy-vyber-toggle:hover { color: var(--primary); background: #f0faf4; border-color: var(--border-strong); }
/* .aktivni = je aplikovaný filtr (některé třídy skryté); [aria-pressed="true"]
   = editace výběru je právě otevřená — vizuálně stejné zvýraznění, ale
   nezávislé podmínky, ať se nepletou dohromady */
#tridy-vyber-toggle.aktivni,
#tridy-vyber-toggle[aria-pressed="true"] { color: var(--primary-dark); background: #f0faf4; border-color: var(--border-strong); }
html[data-theme="dark"] #tridy-vyber-toggle:hover,
html[data-theme="dark"] #tridy-vyber-toggle.aktivni,
html[data-theme="dark"] #tridy-vyber-toggle[aria-pressed="true"] { color: #d1fae5; background: #14352a; border-color: rgba(56,193,114,0.4); }

/* Editační režim — místo samostatného panelu se rovnou v seznamu tříd dá
   kliknutím přepínat viditelnost každé třídy. Malý pruh s nápovědou nad
   seznamem dá najevo, že kliknutí teď dělá něco jiného než obvykle. */
#tridy-vyber-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 8px 8px;
    padding: 6px 12px;
    background: #f0faf4;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--primary-dark);
}
#tridy-vyber-hint button {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
#tridy-vyber-hint button:hover { background: var(--primary-dark); }
html[data-theme="dark"] #tridy-vyber-hint { background: #14352a; border-color: rgba(56,193,114,0.4); color: #d1fae5; }

/* Skrytá třída v editačním režimu — pořád vidět (jinak by na ni nešlo
   kliknout a vrátit ji zpátky), ale jasně odlišená: vybledlá, přerušovaný
   okraj, přeškrtnutý text. Mimo editační režim se tyhle třídy do #tridy
   vůbec nevykreslují (viz renderTridySeznam v app.js). */
#tridy.vyber-rezim a.trida.trida-skryta {
    opacity: 0.45;
    background: #f3f4f6;
    border-style: dashed;
    box-shadow: none;
    text-decoration: line-through;
}
#tridy.vyber-rezim a.trida.trida-skryta:hover {
    opacity: 0.75;
    transform: none;
}
html[data-theme="dark"] #tridy.vyber-rezim a.trida.trida-skryta { background: #0f172a; }

.tridy-chevron {
    font-size: 0.85rem;
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}
#tridy-toggle.collapsed .tridy-chevron { transform: rotate(0deg); }

#tridy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 8px;
}

a.trida {
    background: white;
    color: var(--primary-dark);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    border: 1.5px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    letter-spacing: 0.2px;
}

a.trida:hover {
    background: #f0faf4;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--primary-dark);
}

a.trida.aktivni {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);
}

/* ===== ŽÁCI ===== */
#zaci {
    margin: 5px 8px 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Hledat žáka – toggle ikona v nadpisu ── */
#zaci-nadpis { position: relative; }
#zaci-hledat-toggle {
    position: absolute; right: 25px; top: 50%; transform: translateY(-50%);
    background: none; border: 1px solid transparent; cursor: pointer;
    color: #d1d5db; padding: 3px 7px; border-radius: 6px;
    display: inline-flex; align-items: center;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
#zaci-hledat-toggle:hover { color: var(--primary); background: #f0faf4; border-color: var(--border-strong); }
#zaci-hledat-toggle.aktivni { color: var(--primary-dark); background: #f0faf4; border-color: var(--border-strong); }
html[data-theme="dark"] #zaci-hledat-toggle:hover,
html[data-theme="dark"] #zaci-hledat-toggle.aktivni { color: #d1fae5; background: #14352a; border-color: rgba(56,193,114,0.4); }

/* ── Hledat žáka ── */
#zaci-hledat-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 8px 2px 8px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 9px;
    transition: border-color .15s, background .15s;
}
#zaci-hledat-wrap:focus-within { background: #fff; border-color: var(--primary); }
#zaci-hledat-lupa { color: var(--text-muted); flex-shrink: 0; }
#zaci-hledat {
    flex: 1; min-width: 0; border: none; background: transparent; outline: none;
    font-size: 0.85rem; font-family: inherit; color: var(--text); padding: 0;
}
#zaci-hledat::placeholder { color: var(--text-muted); }
#zaci-hledat-x {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 1.1rem; line-height: 1; padding: 0 3px;
    border-radius: 4px; transition: color .12s, background .12s;
}
#zaci-hledat-x:hover { color: var(--text); background: rgba(0,0,0,0.06); }
#zaci-hledat-pocet { flex-shrink: 0; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.zak.zak-skryt { display: none !important; }
#zaci-prazdny-hledani { width: 100%; text-align: center; color: var(--text-muted); font-size: 0.85rem; padding: 16px 0; }
/* dark */
html[data-theme="dark"] #zaci-hledat-wrap { background: #0f172a; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #zaci-hledat-wrap:focus-within { background: #1e293b; border-color: var(--primary); }
html[data-theme="dark"] #zaci-hledat-x:hover { background: rgba(255,255,255,0.1); }

/* ── Provozní zprávy ── */
#provoz-banner { display:none;position:fixed;bottom:50px;left:0;right:0;z-index:1000;padding:12px 16px;background:#fff;border:none;border-top:3px solid var(--primary);border-radius:10px 10px 0 0;color:var(--text);box-shadow:0 -4px 16px rgba(0,0,0,.08);transform:translateY(calc(100% + 60px));transition:transform .3s cubic-bezier(.4,0,.2,1);max-height:42vh;box-sizing:border-box; }
#provoz-banner { flex-direction:column; gap:0; }
#provoz-banner.show { transform:translateY(0); }
#provoz-banner-hlava { display:flex;align-items:center;gap:9px;flex-shrink:0;margin-bottom:5px;padding-right:62px; }
#provoz-banner-ikona { flex-shrink:0;color:var(--primary);display:flex;align-items:center; }
#provoz-banner-titulek { font-size:0.9rem;font-weight:700;color:var(--primary-dark);line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#provoz-banner-text { display:block;flex:1;min-height:0;overflow-y:auto;font-size:0.82rem;font-weight:400;color:var(--text-muted);line-height:1.45;word-break:break-word;text-align:justify;hyphens:auto;-webkit-hyphens:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; }
html[data-theme="dark"] #provoz-banner-text { color:var(--text-muted); }
html[data-theme="dark"] #provoz-banner-text { scrollbar-width:thin; scrollbar-color:#475569 transparent; }
html[data-theme="dark"] #provoz-banner-text::-webkit-scrollbar { width:6px; }
html[data-theme="dark"] #provoz-banner-text::-webkit-scrollbar-thumb { background:#475569; border-radius:3px; }
@media (max-width:768px) {
    #provoz-banner-text { scrollbar-width:none; -ms-overflow-style:none; }
    #provoz-banner-text::-webkit-scrollbar { display:none; }
}
#provoz-banner-akce { position:absolute;top:0;right:0;display:flex;flex-direction:row;gap:2px;align-items:center;padding:8px 8px 6px 10px;background:#fff;border-radius:0 10px 0 8px;z-index:2; }
html[data-theme="dark"] #provoz-banner-akce { background:#1e293b; }
#provoz-banner-pocet { font-size:0.68rem;font-weight:600;color:var(--text-muted);background:#f1f5f9;border-radius:10px;padding:1px 7px;margin-right:3px;white-space:nowrap; }
html[data-theme="dark"] #provoz-banner-pocet { background:#334155;color:var(--text-muted); }
#provoz-banner-zasunout { background:none;border:none;font-size:0.8rem;cursor:pointer;color:var(--text-muted);line-height:1;padding:2px 4px;display:block; }
#provoz-banner-zasunout:hover { color:var(--text); }
#provoz-banner-tab { display:none;position:fixed;bottom:54px;left:50%;transform:translateX(-50%);z-index:999;background:#fff;border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;padding:4px 12px;font-size:0.75rem;color:var(--text-muted);cursor:pointer;box-shadow:var(--shadow-sm);transition:color .15s; }
#provoz-banner-tab:hover { color:var(--primary); }
#provoz-banner-zavrit { background:none;border:none;font-size:1rem;cursor:pointer;color:var(--text-muted);line-height:1;padding:2px 4px;display:block; }
#provoz-banner-zavrit:hover { color:var(--text); }

/* ── Hlášení „žák se nevrátil" — vlastní barva (oranžová), přednost před provozní zprávou ── */
#hledani-banner { display:none;position:fixed;bottom:50px;left:0;right:0;z-index:9500;padding:12px 16px;background:#fff;border:none;border-top:3px solid #ea580c;border-radius:10px 10px 0 0;color:var(--text);box-shadow:0 -4px 16px rgba(0,0,0,.08);transform:translateY(calc(100% + 60px));transition:transform .3s cubic-bezier(.4,0,.2,1);max-height:42vh;box-sizing:border-box;flex-direction:column;gap:6px; }
#hledani-banner.show { transform:translateY(0); }
#hledani-banner-hlava { display:flex;align-items:center;gap:9px;flex-shrink:0;padding-right:40px; }
#hledani-banner-ikona { flex-shrink:0;color:#ea580c;display:flex;align-items:center; }
#hledani-banner-hlava strong { font-size:0.9rem;font-weight:700;color:#9a3412; }
#hledani-banner-text { display:block;font-size:0.85rem;font-weight:400;color:var(--text-muted);line-height:1.45;word-break:break-word; }
#hledani-banner-text strong { color:var(--text); }
#hledani-banner-vyresit { align-self:flex-start;background:#ea580c;color:#fff;border:none;border-radius:8px;padding:7px 18px;font-size:0.82rem;font-family:inherit;font-weight:600;cursor:pointer;transition:var(--transition); }
#hledani-banner-vyresit:hover { background:#c2410c; }
#hledani-banner-akce { position:absolute;top:0;right:0;display:flex;align-items:center;padding:8px 8px 6px 10px;background:#fff;border-radius:0 10px 0 8px;z-index:2; }
html[data-theme="dark"] #hledani-banner-akce { background:#1e293b; }
#hledani-banner-pocet { font-size:0.68rem;font-weight:600;color:#9a3412;background:#ffedd5;border-radius:10px;padding:1px 7px;margin-right:3px;white-space:nowrap; }
#hledani-banner-zasunout { background:none;border:none;font-size:0.8rem;cursor:pointer;color:var(--text-muted);line-height:1;padding:2px 4px;display:block; }
#hledani-banner-zasunout:hover { color:var(--text); }
#hledani-banner-tab { display:none;position:fixed;bottom:54px;left:50%;transform:translateX(-50%);z-index:999;background:#fff;border:1px solid rgba(234,88,12,0.35);border-bottom:none;border-radius:8px 8px 0 0;padding:4px 12px;font-size:0.75rem;font-weight:600;color:#c2410c;cursor:pointer;box-shadow:var(--shadow-sm);transition:color .15s; }
#hledani-banner-tab:hover { color:#9a3412; }

/* ── Tlačítko „Nahlásit" u záznamu překračujícího 5 min (overtime) ── */
/* Sdílí tvar/rozměr s .poz-duvod (přebíráno v HTML jako druhá třída) — mění jen barvu, aby bylo jasně odlišitelné jako akce, ne jako popisek */
.hledani-nahlasit-btn { cursor:pointer;font-family:inherit;border:none;background:rgba(234,88,12,.12);color:#c2410c;border:1px solid rgba(234,88,12,.3); }
.hledani-nahlasit-btn:hover { background:rgba(234,88,12,0.2);border-color:rgba(234,88,12,.5); }
html[data-theme="dark"] .hledani-nahlasit-btn { color:#fdba74;background:rgba(234,88,12,0.18);border-color:rgba(234,88,12,.35); }
html[data-theme="dark"] .hledani-nahlasit-btn:hover { background:rgba(234,88,12,0.28); }

/* ── Badge „auto" u odchodu, který appka sama zapsala po vypršení dialogu
   o limitu "Mimo třídu" (viz LIMIT_VENKU_AUTO_MS v js/app.js) — sdílí tvar
   s .poz-duvod, jen jiná barva, ať je jasně odlišitelné od běžného důvodu
   i od tlačítka „Nahlásit" ── */
.limit-auto-badge { background:rgba(124,58,237,.1); color:#6d28d9; border-color:rgba(124,58,237,.3); cursor:help; }
html[data-theme="dark"] .limit-auto-badge { color:#c4b5fd; background:rgba(124,58,237,.18); border-color:rgba(124,58,237,.35); }

/* ── Confirm nahlásit „žák se nevrátil" popup ── */
#confirmHledaniPopup { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999; }
#confirmHledaniContent { background:white;border:1px solid var(--border);border-top:3px solid #ea580c;border-radius:var(--radius);padding:28px 36px;box-sizing:border-box;text-align:center;font-size:1rem;font-weight:500;color:var(--text);box-shadow:var(--shadow-lg);width:360px;max-width:85%;min-width:260px;animation:popIn 0.25s cubic-bezier(0.34,1.56,0.64,1); }
#confirmHledaniContent p { margin:0 0 18px 0;color:#374151;line-height:1.5;font-size:0.95rem; }
#confirmHledaniContent small { color:var(--text-muted);font-size:0.78rem; }
#confirmHledaniContent strong { color:#9a3412; }
#confirmHledaniOk { background:#ea580c;color:white;box-shadow:0 2px 8px rgba(234,88,12,0.25); }
#confirmHledaniOk:hover { background:#c2410c;transform:translateY(-1px);box-shadow:0 4px 14px rgba(234,88,12,0.35); }
#confirmHledaniCancel { background:#f3f4f6;color:#374151; }
#confirmHledaniCancel:hover { background:#e5e7eb;transform:translateY(-1px); }

/* ── Confirm "Nalezen/vyřešeno" popup ── */
#confirmVyresenoPopup { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999; }
#confirmVyresenoContent { background:white;border:1px solid var(--border);border-top:3px solid #16a34a;border-radius:var(--radius);padding:28px 36px;box-sizing:border-box;text-align:center;font-size:1rem;font-weight:500;color:var(--text);box-shadow:var(--shadow-lg);width:360px;max-width:85%;min-width:260px;animation:popIn 0.25s cubic-bezier(0.34,1.56,0.64,1); }
#confirmVyresenoContent p { margin:0 0 18px 0;color:#374151;line-height:1.5;font-size:0.95rem; }
#confirmVyresenoContent small { color:var(--text-muted);font-size:0.78rem; }
#confirmVyresenoOk { background:#16a34a;color:white;box-shadow:0 2px 8px rgba(22,163,74,0.25); }
#confirmVyresenoOk:hover { background:#15803d;transform:translateY(-1px);box-shadow:0 4px 14px rgba(22,163,74,0.35); }
#confirmVyresenoCancel { background:#f3f4f6;color:#374151; }
#confirmVyresenoCancel:hover { background:#e5e7eb;transform:translateY(-1px); }
#provoz-modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:19000;align-items:center;justify-content:center; }
#provoz-modal-overlay.open { display:flex; }
#provoz-modal { background:#fff;border-radius:14px;border-top:3px solid #ef4444;padding:28px 28px 22px;box-sizing:border-box;max-width:400px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.18);text-align:center; }
#provoz-modal h3 { margin:0 0 10px;color:#374151;font-size:1.05rem; }
#provoz-modal p { margin:0 0 20px;font-size:0.9rem;color:#6b7280;line-height:1.5; }
#provoz-modal button { background:var(--primary);color:#fff;border:none;border-radius:8px;padding:9px 28px;font-size:0.9rem;font-family:inherit;font-weight:600;cursor:pointer; }

/* ── Auth gate – obsah viditelný jen přihlášeným ── */
#auth-vyzva {
    display: none;
    margin: 28px 12px 0;
    padding: 22px 20px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}
#auth-vyzva strong { display: block; font-size: 1rem; color: var(--text); margin-bottom: 6px; }
#auth-vyzva-btns { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
#auth-vyzva-btn {
    background: var(--primary); color: #fff; border: none; border-radius: 8px;
    padding: 8px 20px; font-size: 0.9rem; font-family: inherit; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
#auth-vyzva-btn:hover { background: var(--primary-dark); }
.btn-demo-vstoupit {
    background: var(--primary); color: #fff; border: none; border-radius: 8px;
    padding: 8px 20px; font-size: 0.9rem; font-family: inherit; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
.btn-demo-vstoupit:hover { background: var(--primary-dark); }
body.neprihlasen .zaznamy-obal,
body.neprihlasen #tridy-toggle,
body.neprihlasen #tridy,
body.neprihlasen #zaci-nadpis,
body.neprihlasen #zaci,
body.neprihlasen #zaci-hledat-wrap,
body.neprihlasen #alarm-btn { display: none !important; }
body.neprihlasen #auth-vyzva { display: block; }
body.neprihlasen #themeToggle { display: none; }

a.zak {
    background: white;
    color: #374151;
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.9rem;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    flex: 1 1 100%;
    position: relative;
    overflow: hidden;
}
.zak-undo-bar {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    width: 100%;
    background: var(--primary);
    transform-origin: left;
    animation: zakUndoShrink var(--zak-undo-ms, 5s) linear forwards;
    border-radius: 0;
    pointer-events: none;
}
@keyframes zakUndoShrink { from { width: 100%; } to { width: 0%; } }

a.zak:focus { outline: none; box-shadow: var(--shadow-sm); }

a.zak:hover {
    background: #f9feff;
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

a.zak.ulozeno {
    background: #f0fdf4 !important;
    border-color: rgba(40, 167, 69, 0.35) !important;
    color: var(--primary-dark) !important;
    box-shadow: 0 2px 12px rgba(40, 167, 69, 0.15) !important;
}

/* ===== BADGE ===== */
a.zak .badge {
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: default;
    transition: background-color 0.4s ease;
    min-width: 20px;
    text-align: center;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-left: 8px;
}

a.zak .badge.zero    { background: #dcfce7; color: #166534; }
a.zak .badge.nonzero { background: #fef3c7; color: #92400e; }
a.zak .badge.nonzero-high { background: #fee2e2; color: #991b1b; }

/* ===== LOADING ===== */
.loading {
    text-align: center;
    padding: 14px;
    box-sizing: border-box;
    color: var(--text-muted);
    font-size: 0.9rem;
    width: 100%;
}

/* ===== SCROLL TOP / BOTTOM ===== */
#scrollTopBtn, #scrollBottomBtn {
    position: fixed;
    bottom: 55px;
    right: 13px;
    z-index: 9001;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.09);
    border-radius: 50%;
    transition: var(--transition);
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

#scrollTopBtn:hover, #scrollBottomBtn:hover {
    color: var(--primary);
    background: #f0faf4;
    border-color: var(--border-strong);
    box-shadow: 0 4px 16px rgba(40,167,69,0.18);
    transform: translateY(-2px);
}

/* ===== ZPĚTNÁ VAZBA ===== */
#alarm-btn {
    position: fixed;
    bottom: 11px;
    left: 13px;
    z-index: 9001;
    width: 28px;
    height: 28px;
    border: 1px solid #fca5a5;
    background: #fff5f5;
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(220,38,38,0.18);
    transition: var(--transition);
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
#alarm-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
    box-shadow: 0 4px 16px rgba(220,38,38,0.3);
    transform: scale(1.05);
}
#alarm-btn.bezi {
    animation: alarmBtnBezi 1.2s ease-in-out infinite;
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
@keyframes alarmBtnBezi {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
    50%       { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}
/* Odznak "+N dalších aktivních poplachů" — appka umí sledovat víc
   nezávislých poplachů zároveň (vlastní nesynchronizovaný + cizí přes LAN),
   ale má jen jeden overlay slot; bílá na červeném #alarm-btn.bezi pozadí,
   ať je čitelný i v aktivním (siréna) stavu tlačítka. */
#alarm-btn-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #fff;
    color: #dc2626;
    border: 1.5px solid #dc2626;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    font-size: 9px;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}
#alarm-btn-badge.visible { display: flex; }

/* Trvalý odznak pro docházkové záznamy, co se appce nepodařilo uložit ani
   doručit ke schválení — vlevo hned vedle alarm tlačítka, jantarová
   (varovná, ne kritická červená jako alarm) barva, viditelný bez ohledu na
   online/offline stav, dokud se nevyřeší. Viz js/app.js's
   _nedorucenaFronta*. */
#nedorucene-pill {
    position: fixed;
    bottom: 11px;
    left: 49px;
    z-index: 9001;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #f59e0b;
    background: #fffbeb;
    color: #b45309;
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 5px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(245,158,11,0.18);
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
#nedorucene-pill.visible { display: flex; }
#nedorucene-pill:hover {
    background: #fef3c7;
    border-color: #b45309;
    box-shadow: 0 4px 16px rgba(245,158,11,0.3);
    transform: scale(1.03);
}
html[data-theme="dark"] #nedorucene-pill { background: #2d2410; color: #fbbf24; border-color: #f59e0b; }
html[data-theme="dark"] #nedorucene-pill:hover { background: #3d3010; }
#nedorucenePopup-seznam .nedoruceny-radek {
    border: 1px solid var(--border,#e5e7eb);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: 0.82rem;
}
#nedorucenePopup-seznam .nedoruceny-radek .nedoruceny-jmeno { font-weight: 600; }
#nedorucenePopup-seznam .nedoruceny-radek .nedoruceny-detail { color: var(--text-muted,#6b7280); font-size: 0.76rem; margin-top: 2px; }
#nedorucenePopup-seznam .nedoruceny-radek button {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.74rem;
    border: 1px solid var(--border,#e5e7eb);
    border-radius: 6px;
    background: var(--surface-raised,#f9fafb);
    color: var(--text,#374151);
    cursor: pointer;
}

#feedback-btn {
    position: fixed;
    bottom: 11px;
    right: 13px;   /* symetricky oproti chatu vlevo */
    z-index: 9001;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.09);
    border-radius: 50%;
    transition: var(--transition);
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
#feedback-btn:hover {
    color: var(--primary);
    background: #f0faf4;
    border-color: var(--border-strong);
    box-shadow: 0 4px 16px rgba(40,167,69,0.18);
    transform: translateY(-2px);
}
/* Odznak – stejný styl jako #chat-badge */
#feedback-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 9px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    border: 2px solid white;
}
#feedback-badge.visible { display: flex; }

/* ===== FEEDBACK PANEL (vysouvací, stejný vzor jako chat) ===== */
#feedback-panel {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 8px));
    visibility: hidden; /* zavřený panel je neviditelný → nevykoukne ani při změně mobilního viewportu */
    width: min(80%, 1100px);
    height: 420px;
    background: white;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    z-index: 8999;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s;
    overflow: hidden;
    touch-action: none;
}
#feedback-panel textarea, #feedback-panel input, #chat-panel textarea, #chat-panel input {
    touch-action: auto;
}
#feedback-panel.otevreny { transform: translateX(-50%) translateY(0); visibility: visible; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; }

@media (max-width: 768px) {
    #feedback-panel {
        width: calc(100% - 12px);
        top: 50px;
        bottom: 50px;
        height: auto;
        max-height: none;
    }
}

#feedback-hlavicka {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--primary-dark);
    gap: 7px;
    flex-shrink: 0;
}
#feedback-hlavicka-titul { flex: 1; display: flex; align-items: center; gap: 6px; }
#feedback-zavrit {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
#feedback-zavrit:hover { color: var(--text); background: #f3f4f6; }
#feedback-uvod-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}
#feedback-uvod-toggle:hover { color: var(--primary); background: #f3f4f6; }
#feedback-uvod {
    padding: 4px 2px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
#feedback-uvod .feedback-podtitul { margin-bottom: 0; }

#feedback-obsah {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 12px;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

#feedback-obsah h3 {
    margin: 0 0 4px;
    font-size: 1.0rem;
    color: var(--text);
}
#feedback-obsah .feedback-podtitul {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}

/* Kategorie – wrapper pod textareou */
.feedback-typy-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.feedback-typy-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
/* Typy – 3 pill tlačítka vedle sebe */
.feedback-typy {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.feedback-typ-btn {
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    background: white;
    color: var(--text-muted);
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.feedback-typ-btn svg { flex-shrink: 0; }
.feedback-typ-btn:hover  { border-color: var(--primary); color: var(--primary-dark); background: #f0faf4; }
.feedback-typ-btn.aktivni { border-color: var(--primary); background: #f0faf4; color: var(--primary-dark); font-weight: 600; }
/* Chybový stav – nevybraná kategorie */
.feedback-typy.chyba .feedback-typ-btn { border-color: #fca5a5; }
.feedback-typy-label.chyba { color: #f87171; }
@keyframes fbShake {
    0%,100%{ transform:translateX(0) }
    20%    { transform:translateX(-5px) }
    40%    { transform:translateX(5px) }
    60%    { transform:translateX(-4px) }
    80%    { transform:translateX(4px) }
}
.feedback-typy.chyba { animation: fbShake 0.4s ease; }

/* Identity bar */
#feedback-jmeno-znamo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #f3f4f6;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
#feedback-jmeno-znamo strong { color: var(--text); font-weight: 600; }

/* Sekce v modalu */
.feedback-sekce-nadpis {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.feedback-sekce-nadpis svg { opacity: 0.6; }

/* Historie odeslaných zpráv */
#feedback-historie { margin-top: 18px; }
#feedback-historie-obsah { display: none; margin-top: 8px; }
#feedback-historie-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    transition: color 0.15s;
}
#feedback-historie-toggle:hover { color: var(--text); }
.feedback-hist-karta {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    margin-bottom: 8px;
    font-size: 0.82rem;
}
.feedback-hist-hlavicka {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.feedback-hist-typ {
    font-size: 0.7rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 7px;
}
.feedback-hist-cas { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }

/* Mini vlákno v kartě */
.feedback-hist-vlakno {
    margin-top: 9px;
    border-top: 1px solid var(--border);
    padding-top: 9px;
    display: none;
    flex-direction: column;
    gap: 7px;
}
.feedback-hist-vlakno.open { display: flex; }
.feedback-vlakno-zprava { display: flex; flex-direction: column; max-width: 85%; }
.feedback-vlakno-zprava.uzivatel { align-self: flex-end; align-items: flex-end; }
.feedback-vlakno-zprava.admin    { align-self: flex-start; align-items: flex-start; }
.feedback-vlakno-bublina {
    padding: 7px 11px;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: #f3f4f6;
    color: var(--text);
    border-radius: 8px;
}
.feedback-vlakno-zprava.uzivatel .feedback-vlakno-bublina { border-right: 3px solid var(--primary); }
.feedback-vlakno-zprava.admin    .feedback-vlakno-bublina { border-left:  3px solid #6366f1; }
/* Popisek autora ve vlákně */
.feedback-vlakno-jmeno {
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-bottom: 2px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Vlastní zpráva – tečka vpravo */
.feedback-vlakno-zprava.uzivatel .feedback-vlakno-jmeno { flex-direction: row-reverse; }
/* Notifikační karty – klikatelné */
.feedback-odpoved-karta {
    cursor: pointer;
    transition: background 0.15s;
}
.feedback-odpoved-karta:hover { filter: brightness(0.97); }
.feedback-vlakno-cas { font-size: 0.62rem; color: var(--text-muted); margin-top: 2px; }
.feedback-vlakno-precteno { font-size: 0.6rem; color: #16a34a; margin-top: 1px; display: flex; align-items: center; gap: 3px; }
.feedback-vlakno-zprava.uzivatel .feedback-vlakno-precteno { justify-content: flex-end; }
/* Odpověď uživatele na vlákno */
.feedback-hist-reply {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    align-items: flex-end;
}
.feedback-hist-reply textarea {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 9px;
    font-family: inherit;
    font-size: 0.8rem;
    resize: none;
    height: 36px;
    outline: none;
    transition: border-color 0.18s, height 0.15s;
    overflow: hidden;
}
.feedback-hist-reply textarea:focus { border-color: var(--primary); height: 60px; }
.feedback-hist-reply button {
    border: none;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: background 0.18s;
}
.feedback-hist-reply button:hover:not(:disabled) { background: var(--primary-dark); }
.feedback-hist-reply button:disabled { background: #d1d5db; color: #9ca3af; cursor: default; }
/* Rozbalovací karta */
.feedback-hist-karta { cursor: pointer; }
.feedback-hist-karta:hover { background: #fafafa; }
.feedback-hist-karta-toggle {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.feedback-hist-karta-toggle svg { transition: transform 0.18s; }
.feedback-hist-karta.open .feedback-hist-karta-toggle svg { transform: rotate(180deg); }

#feedback-zprava {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 11px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.18s;
    display: block;
}
#feedback-zprava:focus { border-color: var(--border-strong); }
#feedback-zprava {
    resize: vertical;
    min-height: 95px;
    margin-top: 10px;
    max-height: 220px;
}
#feedback-odeslat {
    margin-top: 12px;
    width: 100%;
    padding: 10px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    font-weight: 500;
}
#feedback-odeslat:hover:not(:disabled) { background: var(--primary-dark); }
#feedback-odeslat:disabled { background: #d1d5db; color: #9ca3af; cursor: default; }
#feedback-uspech {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 8px;
    gap: 8px;
    text-align: center;
}
#feedback-uspech .feedback-uspech-ikona { font-size: 2.5rem; }
#feedback-uspech p { font-size: 0.9rem; color: var(--text-muted); }

/* Sekce odpovědí od admina */
#feedback-odpovedi { margin-bottom: 16px; }
.feedback-odpoved-karta {
    border-left: 3px solid var(--primary);
    background: #f0faf4;
    border-radius: 0 8px 8px 0;
    padding: 10px 13px;
    margin-bottom: 9px;
    font-size: 0.84rem;
}
.feedback-odpoved-karta.neprectena {
    border-left-color: #ef4444;
    background: #fef2f2;
}
.feedback-odpoved-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.feedback-odpoved-nova {
    display: inline-flex;
    background: #ef4444;
    color: white;
    font-size: 0.62rem;
    border-radius: 10px;
    padding: 1px 6px;
    font-weight: 700;
    align-items: center;
}
.feedback-odpoved-original {
    font-size: 0.73rem;
    color: #9ca3af;
    margin-bottom: 5px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feedback-odpoved-text {
    color: var(--text);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===== ENDORA PANELY ===== */
.endora-panel {
    position: fixed;
    left: 0;
    width: 100%;
    height: 50px;
    background: white;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 0.82rem;
    z-index: 9000;
    letter-spacing: 0.3px;
    box-sizing: border-box;
}

.endora-panel.endora-top {
    top: 0;
    border-bottom: 1px solid #f3f4f6;
    justify-content: center;
}

.endora-panel.endora-bottom {
    bottom: 0;
    border-top: 1px solid #f3f4f6;
}

.endora-panel a,
.endora-panel p { display: none; }

/* ===== HEADER CONTROLS GROUP ===== */
#header-controls {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9001;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ===== THEME TOGGLE ===== */
#themeToggle {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color .2s, background .2s;
    -webkit-tap-highlight-color: transparent;
}
#themeToggle:hover { color: var(--primary); background: rgba(0,0,0,0.05); }
html[data-theme="dark"] #themeToggle:hover { background: rgba(255,255,255,0.08); }

/* ===== AUDIO SWITCH ===== */
body.neprihlasen #soundToggleWrapper { display: none !important; }
body.neprihlasen #trida-fix-pill,
body.neprihlasen #trida-fix-dropdown,
body.neprihlasen #feedback-btn,
body.neprihlasen #chat-btn { display: none !important; }
#soundToggleWrapper {
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    appearance: none;
    -webkit-appearance: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    transition: 0.35s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 11px;
    background-repeat: no-repeat;
    border-radius: 50%;
    transition: transform 0.35s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

input:checked + .slider {
    background: linear-gradient(160deg, #f0faf4, #e8f5ed);
    border-color: #d8ede0;
}

input:checked + .slider:before {
    transform: translateX(20px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5' fill='%23475569'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
}

/* Toggle přepínač v profilu – bez ikony reproduktoru */
.profil-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.profil-switch input {
    opacity: 0; width: 0; height: 0;
    appearance: none; -webkit-appearance: none;
}
.profil-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 22px;
    transition: 0.3s;
}
.profil-slider:before {
    position: absolute;
    content: "";
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
input:checked + .profil-slider {
    background: var(--primary);
    border-color: var(--primary-dark);
}
input:checked + .profil-slider:before {
    transform: translateX(18px);
}

/* ===== ZÁLOŽKA PRÁVĚ VENKU – barevné číslo v závorce ===== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.venku-pocet {
    font-weight: 700;
    transition: color 0.4s ease;
    color: var(--primary-dark);
}

.venku-pocet.venku-warning { color: #92400e; }
.venku-pocet.venku-danger  { color: #991b1b; animation: pulse 1.8s infinite; }
/* Světlé barvy výše mají proti tmavému pozadí appky nedostatečný kontrast
   (~2:1, pod hranicí 3:1 pro UI text) — stejná dvojice odstínů, co appka
   už používá pro obdobná varování v tmavém režimu (#seznam-zaznamu li.nove
   / .overtime výše). */
html[data-theme="dark"] .venku-pocet.venku-warning { color: #fcd34d; }
html[data-theme="dark"] .venku-pocet.venku-danger  { color: #fca5a5; }

/* ===== ERROR POPUP ===== */
#errorPopup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#errorPopupContent {
    background: white;
    border: 1px solid var(--border);
    border-top: 3px solid #ef4444;
    border-radius: var(--radius);
    padding: 28px 36px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    width: 360px;
    max-width: 85%;
    min-width: 260px;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

#errorPopupContent p {
    margin: 0 0 18px 0;
    color: #374151;
    line-height: 1.5;
}

#errorPopupContent button {
    padding: 9px 22px;
    border: none;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.25);
}

#errorPopupContent button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(40, 167, 69, 0.35);
}

/* ===== CONFIRM SKRYT POPUP ===== */
#confirmSkrytPopup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#confirmSkrytContent {
    background: white;
    border: 1px solid var(--border);
    border-top: 3px solid #ef4444;
    border-radius: var(--radius);
    padding: 28px 36px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    width: 360px;
    max-width: 85%;
    min-width: 260px;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#confirmSkrytContent p {
    margin: 0 0 18px 0;
    color: #374151;
    line-height: 1.5;
}
.confirm-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.confirm-btns button {
    padding: 9px 22px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    transition: var(--transition);
}
#confirmSkrytOk {
    background: #ef4444;
    color: white;
    box-shadow: 0 2px 8px rgba(239,68,68,0.25);
}
#confirmSkrytOk:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(239,68,68,0.35);
}
#confirmSkrytCancel {
    background: #f3f4f6;
    color: #374151;
}
#confirmSkrytCancel:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
}

/* ===== CONFIRM UKONČIT ZÁZNAM POPUP ===== */
#confirmUkonciPopup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#confirmUkonciContent {
    background: white;
    border: 1px solid var(--border);
    border-top: 3px solid #f59e0b;
    border-radius: var(--radius);
    padding: 28px 36px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    width: 360px;
    max-width: 85%;
    min-width: 260px;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#confirmUkonciContent p {
    margin: 0 0 18px 0;
    color: #374151;
    line-height: 1.5;
    font-size: 0.95rem;
}
#confirmUkonciContent strong { color: #78350f; }
#confirmUkonciOk {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(40,167,69,0.25);
}
#confirmUkonciOk:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(40,167,69,0.35);
}
#confirmUkonciCancel {
    background: #f3f4f6;
    color: #374151;
}
#confirmUkonciCancel:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
}

/* ===== SMAZÁNÍ SKUPINY ===== */
#confirmSkupinaPopup {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; justify-content: center; align-items: center; z-index: 10001;
}
#confirmSkupinaContent {
    background: white; border: 1px solid var(--border); border-top: 3px solid #ef4444;
    border-radius: var(--radius); padding: 28px 36px; box-sizing: border-box; text-align: center;
    color: var(--text); box-shadow: var(--shadow-lg);
    width: 360px; max-width: 85%; min-width: 260px;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#confirmSkupinaContent p { margin: 0 0 18px 0; color: #374151; line-height: 1.5; font-size: 0.95rem; }
#confirmSkupinaContent strong { color: var(--text); }
#confirmSkupinaOk { background: #ef4444; color: white; box-shadow: 0 2px 8px rgba(239,68,68,0.25); }
#confirmSkupinaOk:hover { background: #dc2626; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(239,68,68,0.35); }
#confirmSkupinaCancel { background: #f3f4f6; color: #374151; }
#confirmSkupinaCancel:hover { background: #e5e7eb; transform: translateY(-1px); }
/* dark */
html[data-theme="dark"] #confirmSkupinaContent { background: #1e293b; border-color: rgba(255,255,255,0.12); border-top-color: #ef4444; }
html[data-theme="dark"] #confirmSkupinaContent p { color: var(--text); }
html[data-theme="dark"] #confirmSkupinaContent strong { color: var(--text); }
html[data-theme="dark"] #confirmSkupinaCancel { background: #334155; color: var(--text); }
html[data-theme="dark"] #confirmSkupinaCancel:hover { background: #3d4a5e; }

/* ===== PŘEVOD VLASTNICTVÍ SKUPINY ===== */
#skupiny-prevest-popup {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; justify-content: center; align-items: center; z-index: 10001;
}
#skupiny-prevest-content {
    background: white; border: 1px solid var(--border); border-top: 3px solid #8b5cf6;
    border-radius: var(--radius); padding: 24px 28px; box-sizing: border-box; text-align: left;
    color: var(--text); box-shadow: var(--shadow-lg);
    width: 320px; max-width: 85%; min-width: 260px;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#skupiny-prevest-content p { margin: 0 0 12px 0; font-weight: 600; color: var(--text); font-size: 0.92rem; }
#skupiny-prevest-select {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text);
    background: white;
}
#skupiny-prevest-ok { background: #8b5cf6; color: white; box-shadow: 0 2px 8px rgba(139,92,246,0.25); }
#skupiny-prevest-ok:hover { background: #7c3aed; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(139,92,246,0.35); }
#skupiny-prevest-zrusit { background: #f3f4f6; color: #374151; }
#skupiny-prevest-zrusit:hover { background: #e5e7eb; transform: translateY(-1px); }
html[data-theme="dark"] #skupiny-prevest-content { background: #1e293b; border-color: rgba(255,255,255,0.12); border-top-color: #8b5cf6; }
html[data-theme="dark"] #skupiny-prevest-select { background: #0f172a; border-color: rgba(255,255,255,0.12); color: var(--text); }
html[data-theme="dark"] #skupiny-prevest-zrusit { background: #334155; color: var(--text); }
html[data-theme="dark"] #skupiny-prevest-zrusit:hover { background: #3d4a5e; }

/* ===== LIMIT ŽÁKŮ VENKU ===== */
#limitVenkuPopup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#limitVenkuContent {
    background: white;
    border: 1px solid var(--border);
    border-top: 3px solid #f59e0b;
    border-radius: var(--radius);
    padding: 28px 36px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    width: 360px;
    max-width: 85%;
    min-width: 260px;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#limitVenkuContent p {
    margin: 0 0 18px 0;
    color: #374151;
    line-height: 1.5;
}
#limitVenkuOk {
    background: #f59e0b;
    color: white;
    box-shadow: 0 2px 8px rgba(245,158,11,0.25);
}
#limitVenkuOk:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245,158,11,0.35);
}

/* ===== EDOOKIT: ŽÁK VEDENÝ JAKO NEPŘÍTOMEN ===== */
/* Sdílí stejnou fialovou barvu jako .limit-auto-badge (Záznamy dne) — obojí
   je appčino vlastní "něco tu stojí za pozornost" upozornění, ne akce. */
.edookit-pryc-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(124,58,237,.12);
    color: #6d28d9;
    border: 1px solid rgba(124,58,237,.3);
    border-radius: 999px;
    padding: 1px 7px;
    vertical-align: middle;
    cursor: help;
}
html[data-theme="dark"] .edookit-pryc-badge { color: #c4b5fd; background: rgba(124,58,237,.2); border-color: rgba(124,58,237,.4); }

#edookitStavPopup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#edookitStavContent {
    background: white;
    border: 1px solid var(--border);
    border-top: 3px solid #7c3aed;
    border-radius: var(--radius);
    padding: 28px 36px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    width: 360px;
    max-width: 85%;
    min-width: 260px;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#edookitStavContent p {
    margin: 0 0 18px 0;
    color: #374151;
    line-height: 1.5;
}
#edookitStavOk {
    background: #7c3aed;
    color: white;
    box-shadow: 0 2px 8px rgba(124,58,237,0.25);
}
#edookitStavOk:hover {
    background: #6d28d9;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}

/* ===== PANEL BACKDROP – ztmavení pozadí při otevřeném chatu/zpětné vazbě ===== */
#panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 8996;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#panel-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ===== MOBILNÍ RESPONSIVITA DIALOGŮ ===== */
@media (max-width: 600px) {
    #chatSkrytContent, #chatPinContent {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        padding: 22px 20px;
    }
    #pin-auth-content {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }
    #chat-skupiny-content {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }
}

/* ===== CHAT MODÁLNÍ DIALOGY (skrýt zprávu / připnout zprávu) ===== */
#chatSkrytPopup, #chatPinPopup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
#chatSkrytContent, #chatPinContent {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 36px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    width: 360px;
    max-width: 85%;
    min-width: 260px;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#chatSkrytContent { border-top: 3px solid #ef4444; }
#chatPinContent   { border-top: 3px solid var(--primary); }
#chatSkrytContent p, #chatPinContent p {
    margin: 0 0 18px 0;
    color: #374151;
    line-height: 1.5;
}
#chatSkrytOk {
    background: #ef4444; color: white;
    box-shadow: 0 2px 8px rgba(239,68,68,0.25);
}
#chatSkrytOk:hover { background: #dc2626; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(239,68,68,0.35); }
#chatSkrytCancel, #chatPinCancel {
    background: #f3f4f6; color: #374151;
}
#chatSkrytCancel:hover, #chatPinCancel:hover { background: #e5e7eb; transform: translateY(-1px); }
.chat-pin-volby {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.chat-pin-volby button {
    background: var(--primary); color: white;
    border: none; border-radius: var(--radius-sm);
    padding: 8px 12px; font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: var(--transition);
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(40,167,69,0.2);
}
.chat-pin-volby button:hover { background: var(--primary-dark); transform: translateY(-1px); }
#chatPinOdpinovat {
    background: #f3f4f6; color: #374151;
}
#chatPinOdpinovat:hover { background: #e5e7eb; transform: translateY(-1px); }

/* ===== CHAT: PINNED ZPRÁVA – nelze skrýt ===== */
#chatSkrytPinnedPopup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
#chatSkrytPinnedContent {
    background: white;
    border: 1px solid var(--border);
    border-top: 3px solid #f59e0b;
    border-radius: var(--radius);
    padding: 28px 36px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    width: 380px;
    max-width: 85%;
    min-width: 260px;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#chatSkrytPinnedContent p {
    margin: 0 0 18px 0;
    color: #374151;
    line-height: 1.5;
    font-size: 0.9rem;
}
@media (max-width: 600px) {
    #chatSkrytPinnedContent {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        padding: 22px 20px;
    }
}

/* ===== PIN RESET – odkaz odeslán popup ===== */
#pinResetOdeslanPopup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
}
#pinResetOdeslanContent {
    background: white;
    border-radius: 16px;
    border-top: 3px solid var(--primary);
    width: 340px;
    max-width: calc(100% - 32px);
    padding: 28px 28px 24px;
    box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    text-align: center;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pin-reset-ikona {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    font-size: 1.5rem;
}
.pin-reset-ikona.ok  { background: #d1fae5; color: #16a34a; }
.pin-reset-ikona.err { background: #fee2e2; color: #dc2626; }
#pinResetOdeslanContent h3 { margin: 0 0 10px; font-size: 1rem; color: var(--text); }
#pinResetOdeslanContent p  { margin: 0 0 20px; font-size: 0.84rem; color: var(--text-muted); line-height: 1.55; }

/* ===== SNĚHOVÉ POZADÍ ===== */
#snih {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* ===== KLIKY BEZ MODRÉ ===== */
a, button { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus, a:active, button:active {
    outline: none !important;
    -webkit-focus-ring-color: transparent;
}
a:active { background-color: transparent !important; }
html[data-theme="dark"] a.zak:active { color: #fff !important; }
a { border: none; }
#soundToggle { -webkit-tap-highlight-color: transparent; appearance: none; -webkit-appearance: none; }
#soundToggle:focus { outline: none !important; box-shadow: none !important; }
#soundToggle:active { background-color: transparent !important; }
#soundToggleWrapper { -webkit-tap-highlight-color: transparent; }

/* ===== RESPONZIVITA ===== */
@media (max-width: 480px) {
    a.zak { flex: 0 1 100% !important; }
    .container {
        width: calc(100% - 12px) !important;
        margin: 6px 6px 20px 6px !important;
        padding: 8px !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    a.zak { flex: 0 1 100% !important; }
    .container {
        width: calc(100% - 16px) !important;
        margin: 8px 8px 20px 8px !important;
        padding: 12px !important;
        box-sizing: border-box;
    }
    html, body { overflow-x: hidden !important; }
}
@media (min-width: 769px) and (max-width: 900px) {
    a.zak { flex: 1 1 100% !important; }
    .container {
        width: calc(100% - 24px) !important;
        margin: 10px 12px 20px 12px !important;
        box-sizing: border-box;
    }
}
@media (min-width: 901px) and (max-width: 1024px) {
    a.zak { flex: 1 1 100%; }
    .container {
        width: calc(100% - 40px) !important;
        margin: 10px 20px 20px 20px !important;
        box-sizing: border-box;
    }
}
@media (min-width: 1024px) {
    a.zak { flex: 1 1 100%; }
    .container {
        width: min(80%, 1100px) !important;
        margin: 0 auto 20px auto !important;
        padding: 16px 20px !important;
    }
}

/* ===== CHAT ===== */
#chat-btn {
    position: fixed;
    bottom: 11px;
    right: 52px;
    z-index: 9001;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    border-radius: 50%;
    transition: var(--transition);
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
#chat-btn:hover {
    color: var(--primary);
    background: #f0faf4;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
#chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 9px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}
#chat-badge.visible { display: flex; }

/* Odznak čekající pozvánky do skupiny – opačný roh a jiná barva než odznak zpráv,
   ať jde na první pohled rozlišit "nová zpráva" od "čeká pozvánka". */
#skupiny-pozvanky-chat-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    background: #8b5cf6;
    color: white;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display: none;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--bg-card, #fff);
}
#skupiny-pozvanky-chat-badge.visible { display: block; }

@keyframes chatPulse {
    0%, 100% { transform: translateY(0) scale(1);    box-shadow: var(--shadow-sm); }
    50%       { transform: translateY(-3px) scale(1.18); box-shadow: 0 0 0 5px rgba(40,167,69,0.18), var(--shadow-md); }
}
#chat-btn.nova-zprava {
    animation: chatPulse 1.4s ease-in-out infinite;
    border-color: var(--primary);
    color: var(--primary);
    background: #f0faf4;
}

@keyframes skupinaPozvankaPulse {
    0%, 100% { transform: translateY(0) scale(1);       box-shadow: var(--shadow-sm); }
    50%       { transform: translateY(-3px) scale(1.18); box-shadow: 0 0 0 5px rgba(139,92,246,0.18), var(--shadow-md); }
}
#chat-btn.nova-pozvanka {
    animation: skupinaPozvankaPulse 1.4s ease-in-out infinite;
    border-color: #8b5cf6;
    color: #8b5cf6;
}

#chat-panel {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 8px));
    visibility: hidden; /* zavřený panel je neviditelný → nevykoukne ani při změně mobilního viewportu */
    width: min(80%, 1100px);
    height: 420px;
    background: white;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    z-index: 8999;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s;
    overflow: hidden;
    isolation: isolate;
    touch-action: none;
}
#chat-panel.otevreny { transform: translateX(-50%) translateY(0); visibility: visible; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; }

@media (max-width: 768px) {
    #chat-panel {
        width: calc(100% - 12px);
        top: 50px;
        bottom: 50px;
        height: auto;
        max-height: none;
    }
}

#chat-hlavicka {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--primary-dark);
    gap: 7px;
    flex-shrink: 0;
}
#chat-hlavicka-titul { flex: 1; }
#chat-zavrit {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
#chat-zavrit:hover { color: var(--text); background: #f3f4f6; }
#chat-uvod-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}
#chat-uvod-toggle:hover { color: var(--primary); background: #f3f4f6; }

/* Zavřít chat z footeru – jen na dotyku (tlačítko odstraněno) */
#chat-footer-zavrit {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
    #chat-footer-zavrit { display: block; }
}

#chat-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 0;
}
#chat-zpravy {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    min-height: 0;
}

.chat-zprava { display: flex; flex-direction: column; max-width: 82%; }
.chat-zprava.vlastni { align-self: flex-end; align-items: flex-end; }
.chat-zprava.cizi    { align-self: flex-start; align-items: flex-start; }

/* Jméno odesílatele */
.chat-zprava-jmeno {
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-bottom: 2px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Vlastní zpráva – tečka vpravo (nad pravým okrajem bubliny) */
.chat-zprava.vlastni .chat-zprava-jmeno { flex-direction: row-reverse; }
/* Čas pod bublinou */
.chat-zprava-cas {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 3px;
    padding: 0 4px;
}
.chat-zprava-bublina {
    padding: 7px 11px;
    font-size: 0.83rem;
    font-family: 'Segoe UI', Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
    background: #f3f4f6;
    color: var(--text);
    border-radius: 8px;
}
.chat-zprava.cizi  .chat-zprava-bublina { border-left:  3px solid transparent; }
.chat-zprava.vlastni .chat-zprava-bublina { border-right: 3px solid transparent; }

.chat-hledani-vyresit-btn { display:block;margin-top:7px;cursor:pointer;font-family:inherit;font-size:0.75rem;font-weight:600;background:rgba(234,88,12,.12);color:#c2410c;border:1px solid rgba(234,88,12,.35);border-radius:6px;padding:4px 10px; }
.chat-hledani-vyresit-btn:hover { background:rgba(234,88,12,.22); }
html[data-theme="dark"] .chat-hledani-vyresit-btn { color:#fdba74;background:rgba(234,88,12,0.18);border-color:rgba(234,88,12,.35); }
html[data-theme="dark"] .chat-hledani-vyresit-btn:hover { background:rgba(234,88,12,0.28); }

#chat-uvod {
    padding: 4px 2px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 3px;
    flex-shrink: 0;
}
#chat-uvod h3 {
    margin: 0 0 4px;
    font-size: 1.0rem;
    color: var(--text);
}
#chat-uvod p {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}

#chat-prazdno {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    padding: 24px 0;
    flex-shrink: 0;
}

.chat-soukroma-badge {
    font-size: 0.6rem;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 0 5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
    align-self: flex-start;
}
.chat-zprava.vlastni .chat-soukroma-badge { align-self: flex-end; }

.chat-zprava-bublina-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Levé zprávy: tlačítko je v HTML před bublinou, row-reverse ho vizuálně přesune za ni */
.chat-zprava.cizi .chat-zprava-bublina-wrap { flex-direction: row-reverse; }

/* Náhrobek smazané zprávy */
/* Náhrobek smazané zprávy – varianta bubliny (zachovává jméno + pozici odesílatele) */
.chat-zprava-bublina.chat-zprava-smazano {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted) !important;
    background: #f3f4f6 !important;
    border: 1px dashed var(--border) !important;
    font-style: italic;
    font-size: 0.78rem;
}
html[data-theme="dark"] .chat-zprava-bublina.chat-zprava-smazano { background: #1e293b !important; border-color: rgba(255,255,255,0.12) !important; color: var(--text-muted) !important; }

.chat-zprava-smazat {
    opacity: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0b7c3;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    padding: 0;
    transition: opacity 0.18s, color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.chat-zprava:hover .chat-zprava-smazat { opacity: 1; }
.chat-zprava-smazat:hover { color: #ef4444; border-color: #fca5a5; background: #fff5f5; }

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}
@media (hover: none) {
    /* Na dotykových zařízeních hover nefunguje — tlačítko vždy mírně viditelné */
    .chat-zprava-smazat { opacity: 0.5; }
}

/* Indikátor psaní */
#chat-pise-bar {
    padding: 3px 12px 2px;
    font-size: 0.68rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 18px;
    flex-shrink: 0;
}
.chat-pise-tecky { display: inline-flex; gap: 3px; align-items: center; }
.chat-pise-tecky span {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--text-muted);
    animation: chatPiseBlik 1.2s infinite ease-in-out;
}
.chat-pise-tecky span:nth-child(2) { animation-delay: .2s; }
.chat-pise-tecky span:nth-child(3) { animation-delay: .4s; }
@keyframes chatPiseBlik {
    0%, 80%, 100% { opacity: .25; transform: scale(.8); }
    40%           { opacity: 1;   transform: scale(1); }
}

#chat-footer {
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    touch-action: none;
}
#chat-footer textarea, #chat-footer input {
    touch-action: auto;
}


#chat-komu-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 10px 4px;
    position: relative;
    flex-shrink: 0;
    flex-wrap: wrap;
}

#chat-komu-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

#chat-komu-volba {
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: white;
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    -webkit-user-select: none;
}
#chat-komu-volba:hover { border-color: var(--border-strong); background: #f0faf4; }
#chat-komu-volba.soukromy { border-color: #fbbf24; background: #fffbeb; color: #78350f; }

#chat-komu-dropdown {
    position: absolute;
    bottom: calc(100% + 2px);
    left: 10px;
    right: 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 10;
    overflow: hidden;
    display: none;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
}
#chat-komu-dropdown.visible { display: flex; }

.chat-komu-item {
    padding: 7px 12px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.12s;
    white-space: nowrap;
}
.chat-komu-item:hover { background: #f0faf4; }
.chat-komu-item.vsichni { color: var(--primary-dark); font-weight: 600; }
.chat-komu-item .komu-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
}

#chat-vstup-radek {
    padding: 5px 8px;
    display: flex;
    gap: 6px;
    align-items: flex-end;
}
#chat-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: none;
    outline: none;
    height: 36px;
    min-height: 36px;
    max-height: 80px;
    overflow-y: hidden;
    line-height: 1.4;
    color: var(--text);
    background: white;
    box-sizing: border-box;
    transition: border-color 0.18s;
}
#chat-input:focus { border-color: var(--border-strong); }
#chat-odeslat {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    min-width: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
#chat-odeslat:hover  { background: var(--primary-dark); transform: scale(1.06); }
#chat-odeslat:disabled { background: #d1d5db; cursor: default; transform: none; }

/* ===== FIXED TŘÍDA PILL ===== */
#trida-fix-pill {
    position: fixed;
    top: 58px;
    right: 86px; /* fallback — JS přepíše ihned při zobrazení */
    z-index: 8999;
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 10px 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    display: none;
    align-items: center;
    gap: 4px;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color 0.15s, background 0.15s;
}
#trida-fix-pill:hover { background: #f0faf4; border-color: var(--primary); }
#trida-fix-pill.otevreno { border-color: var(--primary); background: #f0faf4; }
#trida-fix-pill .fp-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary); flex-shrink: 0;
}
#trida-fix-pill .fp-arrow {
    font-size: 0.6rem; color: var(--text-muted); margin-left: 1px;
}
#trida-fix-zavrit {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: 2px;
    padding: 0 2px;
    border-radius: 3px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
#trida-fix-zavrit:hover { color: #ef4444; background: #fee2e2; }
#trida-fix-dropdown {
    position: fixed;
    top: 86px;
    right: 78px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    min-width: 110px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 9000;
    display: none;
    flex-direction: column;
}
#trida-fix-dropdown.open { display: flex; }
/* desktop right nastavuje JS (_pillUpdateRight) */
#trida-fix-dropdown { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
#trida-fix-dropdown::-webkit-scrollbar { width: 7px; }
#trida-fix-dropdown::-webkit-scrollbar-track { background: transparent; }
#trida-fix-dropdown::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
#trida-fix-dropdown::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
html[data-theme="dark"] #trida-fix-dropdown { scrollbar-color: #475569 transparent; }
html[data-theme="dark"] #trida-fix-dropdown::-webkit-scrollbar-thumb { background: #475569; }
html[data-theme="dark"] #trida-fix-dropdown::-webkit-scrollbar-thumb:hover { background: #64748b; }
@media (max-width: 768px) {
    #trida-fix-dropdown { scrollbar-width: none; -ms-overflow-style: none; }
    #trida-fix-dropdown::-webkit-scrollbar { display: none; }
}
.trida-fix-item {
    padding: 7px 14px;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text);
    transition: background 0.1s;
    border-bottom: 1px solid #f3f4f6;
}
.trida-fix-item:last-child { border-bottom: none; }
.trida-fix-item:hover { background: #f0faf4; }
.trida-fix-item.aktivni { color: var(--primary-dark); font-weight: 700; }

/* ===== ORG BADGE (slug URL) ===== */
#pin-org-fixed-badge {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    background: linear-gradient(135deg, #f0faf4, #e8f5ed);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
}
html[data-theme="dark"] #pin-org-fixed-badge {
    background: var(--bg-hover);
}
#pin-org-fixed-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.pin-org-fixed-info { display: flex; flex-direction: column; gap: 2px; }
.pin-org-fixed-info strong { font-size: 0.95rem; color: var(--text); }
.pin-org-fixed-sub { font-size: 0.76rem; color: var(--text-muted); }
#pin-org-plna-warning {
    display: none;
    margin-top: 8px; padding: 9px 13px;
    background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px;
    color: #dc2626; font-size: 0.84rem; line-height: 1.4;
}

/* ===== PIN AUTH MODAL ===== */
#pin-auth-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; justify-content: center; align-items: center; z-index: 10000;
}
#pin-auth-content {
    background: white; border-radius: 16px; border-top: 3px solid var(--primary);
    width: 340px; max-width: 92vw; padding: 20px; box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18); position: relative;
    animation: popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
#pin-auth-content h3 { margin: 0 0 4px; font-size: 0.95rem; color: var(--text); }
#pin-auth-content p { margin: 0 0 12px; font-size: 0.82rem; color: var(--text-muted); }
.pin-radek { display: flex; gap: 8px; margin-bottom: 8px; }
.pin-radek input[type="text"],
.pin-radek input[type="email"],
#pin-input, #pin-potvrzeni-input {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 9px 12px; font-size: 0.9rem; font-family: inherit; outline: none;
    box-sizing: border-box; transition: border-color 0.18s; background: white;
}
.pin-radek input[type="text"]:focus,
.pin-radek input[type="email"]:focus,
#pin-input:focus, #pin-potvrzeni-input:focus { border-color: var(--primary); }
#pin-input, #pin-potvrzeni-input { letter-spacing: 4px; font-size: 0.9rem; text-align: center; font-family: inherit; }
#pin-ok-btn {
    width: 100%; box-sizing: border-box; background: var(--primary); color: white; border: none;
    border-radius: var(--radius-sm); padding: 10px; font-size: 0.9rem;
    font-family: inherit; cursor: pointer; margin-top: 4px; transition: background 0.15s;
}
#pin-ok-btn:hover:not(:disabled) { background: var(--primary-dark); }
#pin-ok-btn:disabled { background: #d1d5db; cursor: default; }
.oauth-oddelovac { display:flex; align-items:center; gap:8px; margin:12px 0 8px; }
.oauth-oddelovac::before, .oauth-oddelovac::after { content:''; flex:1; height:1px; background:var(--border); }
.oauth-oddelovac span { font-size:0.75rem; color:var(--text-muted); white-space:nowrap; }
#microsoft-login-btn { width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:9px; background:white; color:#374151; border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 10px; font-size:0.88rem; font-family:inherit; cursor:pointer; transition:background 0.15s,border-color 0.15s; }
#microsoft-login-btn:hover { background:#f3f4f6; border-color:#9ca3af; }
html[data-theme="dark"] #microsoft-login-btn { background:#1e293b; color:var(--text); border-color:rgba(255,255,255,0.12); }
html[data-theme="dark"] #microsoft-login-btn:hover { background:#334155; }
html[data-theme="dark"] #pin-auth-content { background: #1e293b; }
html[data-theme="dark"] .pin-radek input[type="text"],
html[data-theme="dark"] .pin-radek input[type="email"],
html[data-theme="dark"] #pin-input,
html[data-theme="dark"] #pin-potvrzeni-input {
    background: #0f172a; color: var(--text); border-color: rgba(255,255,255,0.15); outline: none;
}
html[data-theme="dark"] .pin-radek input[type="text"]:focus,
html[data-theme="dark"] .pin-radek input[type="email"]:focus,
html[data-theme="dark"] #pin-input:focus,
html[data-theme="dark"] #pin-potvrzeni-input:focus { border-color: var(--primary); }
#pin-auth-content input:-webkit-autofill,
#pin-auth-content input:-webkit-autofill:hover,
#pin-auth-content input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset !important;
    -webkit-text-fill-color: #1a2e1a !important;
}
html[data-theme="dark"] #pin-auth-content input:-webkit-autofill,
html[data-theme="dark"] #pin-auth-content input:-webkit-autofill:hover,
html[data-theme="dark"] #pin-auth-content input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px #0f172a inset !important;
    -webkit-text-fill-color: var(--text) !important;
}
#pin-zprava {
    display: none; border-radius: 7px; font-size: 0.82rem; line-height: 1.45;
    padding: 9px 12px; margin-top: 10px; margin-bottom: 10px;
    gap: 9px; align-items: flex-start;
    background: #fef2f2; border: 1px solid #fca5a5; border-left: 3px solid #dc2626; color: #991b1b;
}
#pin-zprava[data-typ] { display: flex; }
#pin-zprava, #pin-zprava * {
    font-family: inherit; font-size: 0.82rem; font-weight: normal;
    color: inherit; text-decoration: none; line-height: 1.45;
}
.pin-zprava-ikona { flex-shrink: 0; margin-top: 1px; }
.pzi { display: none; }
#pin-zprava[data-typ="chyba"] .pzi-chyba { display: block; }
#pin-zprava[data-typ="ok"]    .pzi-ok    { display: block; }
#pin-zprava[data-typ="info"]  .pzi-info  { display: block; }
.pin-zprava-text { display: flex; flex-direction: column; }
.pin-zprava-hlavni { display: block; }
.pin-zprava-hint { display: none; margin-top: 4px; }
#pin-zprava[data-typ="ok"]   { background: #f0fdf4; border-color: #86efac; border-left-color: #16a34a; color: #166534; }
#pin-zprava[data-typ="info"] { background: #fffbeb; border-color: #fcd34d; border-left-color: #d97706; color: #92400e; }
html[data-theme="dark"] #pin-zprava                    { background: #3b1212; border-color: #b91c1c; border-left-color: #ef4444; color: #fca5a5; }
html[data-theme="dark"] #pin-zprava[data-typ="ok"]     { background: #052e16; border-color: #16a34a; border-left-color: #22c55e; color: #86efac; }
html[data-theme="dark"] #pin-zprava[data-typ="info"]   { background: #2d2208; border-color: #a16207; border-left-color: #d97706; color: #fcd34d; }
#pin-links { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
#pin-auth-zavrit {
    position: absolute; top: 10px; right: 12px; background: none; border: none;
    cursor: pointer; color: var(--text-muted); font-size: 1rem; padding: 2px 6px;
    border-radius: 4px; line-height: 1;
}
#pin-auth-zavrit:hover { background: #f3f4f6; color: var(--text); }
.pin-odkaz { background: none; border: none; cursor: pointer; color: var(--primary);
    font-size: 0.75rem; padding: 0; font-family: inherit; text-decoration: underline; margin-top: 4px; display: block; }
.pin-odkaz:hover { color: var(--primary-dark); }

/* ===== PROFILOVÝ PANEL ===== */
#profil-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; justify-content: center; align-items: center; z-index: 10000;
}
#profil-content {
    background: white; border-radius: 16px; border-top: 3px solid var(--primary);
    width: 380px; max-width: 94vw; max-height: 90vh; overflow-y: auto;
    padding: 22px 22px 18px; box-sizing: border-box; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    position: relative; animation: popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
#profil-zavrit {
    position: absolute; top: 10px; right: 12px; background: none; border: none;
    cursor: pointer; color: var(--text-muted); font-size: 1rem; padding: 2px 6px;
    border-radius: 4px; line-height: 1;
}
#profil-zavrit:hover { background: #f3f4f6; color: var(--text); }
#profil-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.3rem; font-weight: 700; margin-bottom: 10px;
}
#profil-jmeno { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 2px; }
#profil-username { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 16px; }
.profil-sekce {
    border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px;
}
.profil-sekce-nadpis {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 10px;
}
.profil-radek {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; gap: 12px;
}
.profil-radek-popis { font-size: 0.82rem; color: var(--text); line-height: 1.3; }
.profil-radek-popis small { display: block; font-size: 0.72rem; color: var(--text-muted); }
/* Přepínač (toggle) v profilu – stejný jako #soundToggle */
.profil-toggle { flex-shrink: 0; }
.profil-input {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 7px 10px; font-size: 0.85rem; font-family: inherit; outline: none;
    box-sizing: border-box; transition: border-color 0.18s; background: white; color: var(--text);
}
.profil-input:focus { border-color: var(--primary); }
#profil-ulozit-profil {
    width: 100%; box-sizing: border-box; background: var(--primary); color: white; border: none;
    border-radius: var(--radius-sm); padding: 9px; font-size: 0.88rem;
    font-family: inherit; cursor: pointer; margin-top: 10px; transition: background 0.15s;
}
#profil-ulozit-profil:hover { background: var(--primary-dark); }
#profil-ulozit-profil:disabled { background: #d1d5db; cursor: default; }
#profil-ulozit-info { font-size: 0.75rem; min-height: 16px; margin-top: 5px; text-align: center; }
.profil-akce-btn {
    width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: white; color: var(--text);
    border-radius: var(--radius-sm); padding: 9px; font-size: 0.85rem;
    font-family: inherit; cursor: pointer; margin-top: 6px; transition: background 0.15s;
    text-align: center;
}
.profil-akce-btn:hover { background: #f3f4f6; }
.profil-akce-btn.danger { color: #dc2626; border-color: #fecaca; }
.profil-akce-btn.danger:hover { background: #fef2f2; }
#profil-sync-info {
    font-size: 0.68rem; color: var(--text-muted); text-align: center;
    margin-top: 10px; opacity: 0; transition: opacity 0.4s;
}
#profil-sync-info.visible { opacity: 1; }

/* Záložky profilového panelu */
.profil-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    margin-top: 4px;
}
.profil-tab-btn {
    flex: 1;
    background: none; border: none;
    padding: 8px 4px;
    font-size: 0.72rem; font-family: inherit;
    color: var(--text-muted); cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.profil-tab-btn:hover { color: var(--text); }
.profil-tab-btn.aktivni { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.profil-tab-panel { display: none; }
.profil-tab-panel.aktivni { display: block; }

/* Malé dropdown menu pod user ikonou */
#user-dropdown {
    position: absolute;
    top: calc(100% + 6px); left: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 170px;
    z-index: 9002;
    overflow: hidden;
    display: none;
    animation: popIn 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
#user-dropdown-header {
    padding: 10px 13px 8px;
    border-bottom: 1px solid var(--border);
}
#user-dropdown-jmeno {
    font-size: 0.82rem; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-dropdown-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; box-sizing: border-box; border: none; background: transparent;
    padding: 9px 13px; font-size: 0.8rem; font-family: inherit;
    color: var(--text); cursor: pointer; text-align: left;
    transition: background 0.12s;
}
.user-dropdown-btn:hover { background: #f3f4f6; }
.user-dropdown-btn.danger { color: #dc2626; }
.user-dropdown-btn.danger:hover { background: #fef2f2; }

/* Dialog potvrzení odhlášení */
#odhlasitPopup {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; justify-content: center; align-items: center;
    z-index: 10001;
}
#odhlasitContent {
    background: white; border: 1px solid var(--border);
    border-top: 3px solid #6b7280;
    border-radius: var(--radius); padding: 28px 36px; box-sizing: border-box;
    text-align: center; font-size: 1rem; font-weight: 500;
    color: var(--text); box-shadow: var(--shadow-lg);
    width: 340px; max-width: 85%; min-width: 260px;
    animation: popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
#odhlasitContent p { margin: 0 0 6px 0; color: #374151; line-height: 1.5; }
#odhlasitContent .odhlasit-uzivatel { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 18px; }
#odhlasitOk { background: #374151; color: white; box-shadow: 0 2px 8px rgba(55,65,81,0.25); }
#odhlasitOk:hover { background: #1f2937; transform: translateY(-1px); }
#odhlasitCancel { background: #f3f4f6; color: #374151; }
#odhlasitCancel:hover { background: #e5e7eb; transform: translateY(-1px); }

/* Přihlášení indikátor */
/* ===== USER WIDGET (ikona + hover tooltip) ===== */
#user-widget {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    z-index: 9001;
}
#auth-status-btn {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #c4c9d0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0;
}
#auth-status-btn:hover {
    background: white; border-color: var(--border); color: var(--text-muted);
    box-shadow: var(--shadow-sm);
}
#auth-admin-badge {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
}
html[data-theme="dark"] #auth-admin-badge { border-color: #1e293b; }
#auth-status-btn.prihlasen { color: var(--primary); }
#auth-status-btn.prihlasen:hover { border-color: var(--border-strong); background: white; }

/* Malý badge – stav připojení */
/* ===== CONNECTION STRIP – vysouvací pruh v horní části okna ===== */
#connection-strip {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #22c55e;
    z-index: 10100;
    overflow: hidden;
    transition: height 0.28s cubic-bezier(0.4,0,0.2,1), background 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}
#connection-strip:hover { height: 44px; }
#connection-strip.offline,
#connection-strip.msg-err  { background: #ef4444; height: 44px; }
#connection-strip.msg-ok   { background: #22c55e; height: 44px; }
#connection-strip.msg-info { background: #475569; height: 44px; }
#connection-strip-text {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.95);
    opacity: 0;
    transition: opacity 0.18s;
    pointer-events: none;
    user-select: none;
}
#connection-strip:hover #connection-strip-text,
#connection-strip.offline #connection-strip-text,
#connection-strip.msg-ok #connection-strip-text,
#connection-strip.msg-err #connection-strip-text,
#connection-strip.msg-info #connection-strip-text { opacity: 1; }

/* Tooltip – zobrazí se při najetí myší */
#user-tooltip {
    position: absolute;
    top: calc(100% + 7px); left: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 13px 8px;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    font-size: 0.75rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
    min-width: 130px;
}
#user-widget:hover #user-tooltip {
    opacity: 1; transform: translateY(0);
}
#auth-status-text {
    font-weight: 600; color: var(--text); margin-bottom: 4px;
}

/* ===== TOUCH: reset přilepeného hover stavu po uvolnění prstu ===== */
/* :hover:not(:active) = prst uvolněn, ale iOS/Android drží hover stav dál */
/* Při stisku (:active je aktivní) se reset NEaplikuje → efekt stisku je vidět normálně */
@media (hover: none) {
    /* Třídy a žáci */
    a.trida:hover:not(:active):not(.aktivni) { background: white !important; }
    a.zak:hover:not(:active):not(.ulozeno)   { background: white !important; }
    html[data-theme="dark"] a.trida:hover:not(:active):not(.aktivni) { background: #334155 !important; }
    html[data-theme="dark"] a.zak:hover:not(:active):not(.ulozeno)   { background: #334155 !important; color: #e2e8f0 !important; }

    /* Záznamy – filtry a řádky */
    .zaznam-filtr-btn:hover:not(:active):not(.aktivni)            { background: transparent !important; color: var(--text-muted) !important; }
    #seznam-zaznamu li.vlastni-zaznam:hover:not(:active)          { background: transparent !important; }
    .skryt-zaznam-btn:hover:not(:active)                          { color: #d1d5db !important; }

    /* Záhlaví */
    #stats-toggle-btn:hover:not(:active):not(.otevrene)           { color: var(--text-muted) !important; background: none !important; border-color: transparent !important; }
    #tridy-toggle-btn:hover:not(:active)                          { color: inherit !important; }
    #scroll-lock-wrap:hover:not(:active):not(.on)                 { color: var(--text-muted) !important; background: transparent !important; border-color: var(--border) !important; }
    #zaci-hledat-toggle:hover:not(:active):not(.aktivni)          { color: #d1d5db !important; background: none !important; border-color: transparent !important; }

    /* Plovoucí tlačítka – mají vlastní bílé pozadí */
    #scrollTopBtn:hover:not(:active), #scrollBottomBtn:hover:not(:active) { color: var(--text-muted) !important; background: white !important; border-color: var(--border) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.09) !important; transform: none !important; }
    #feedback-btn:hover:not(:active)  { color: var(--text-muted) !important; background: white !important; border-color: var(--border) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.09) !important; transform: none !important; }
    html[data-theme="dark"] #scrollTopBtn:hover:not(:active),
    html[data-theme="dark"] #scrollBottomBtn:hover:not(:active) { background: #1e293b !important; border-color: rgba(255,255,255,0.12) !important; }
    html[data-theme="dark"] #feedback-btn:hover:not(:active) { background: #1e293b !important; border-color: rgba(255,255,255,0.12) !important; }

    /* Panely – zavřít, toggle nápovědy */
    #feedback-zavrit:hover:not(:active), #chat-zavrit:hover:not(:active),
    #feedback-uvod-toggle:hover:not(:active), #chat-uvod-toggle:hover:not(:active) { color: var(--text-muted) !important; background: transparent !important; }

    /* Zpětná vazba – kategorie */
    .feedback-typ-btn:hover:not(:active):not(.aktivni) { border-color: var(--border) !important; color: var(--text-muted) !important; background: white !important; }
    html[data-theme="dark"] .feedback-typ-btn:hover:not(:active):not(.aktivni) { border-color: rgba(255,255,255,0.12) !important; color: var(--text-muted) !important; background: #0f172a !important; }

    /* Zpětná vazba – karty a toggle */
    .feedback-hist-karta:hover:not(:active)      { background: white !important; }
    html[data-theme="dark"] .feedback-hist-karta:hover:not(:active) { background: #0f172a !important; }
    .feedback-odpoved-karta:hover:not(:active)   { filter: none !important; }
    #feedback-historie-toggle:hover:not(:active) { color: var(--text-muted) !important; }

    /* Chat – dropdown */
    .chat-komu-item:hover:not(:active)                                   { background: transparent !important; }
    /* Chat – připnutí a skupiny */
    .chat-zprava-pin:hover:not(:active):not(.pinned) { color: #b0b7c3 !important; border-color: #e5e7eb !important; background: white !important; }
    html[data-theme="dark"] .chat-zprava-pin:hover:not(:active):not(.pinned) { color: #94a3b8 !important; border-color: rgba(255,255,255,0.12) !important; background: #334155 !important; }
    .chat-komu-sekce-btn:hover:not(:active) { color: var(--primary) !important; }
    #skupiny-nova-btn:hover:not(:active) { background: var(--primary) !important; }
    #skupiny-prevest-btn:hover:not(:active) { background: none !important; border-color: var(--border-strong) !important; }
    #skupiny-prevest-ok:hover:not(:active) { background: #8b5cf6 !important; transform: none !important; box-shadow: 0 2px 8px rgba(139,92,246,0.25) !important; }
    #skupiny-prevest-zrusit:hover:not(:active) { background: #f3f4f6 !important; transform: none !important; }
    #skupiny-navrh-zrusit-btn:hover:not(:active) { color: var(--text-muted) !important; }
    .chat-skupina-edit-btn:hover:not(:active), .chat-skupina-del-btn:hover:not(:active), .chat-skupina-opustit-btn:hover:not(:active) { color: var(--text-muted) !important; background: transparent !important; }
    .chat-skupina-karta:hover:not(:active) { background: transparent !important; border-color: var(--border) !important; }
}

/* ===== CHAT: SKUPINY + PINNOVÁNÍ ===== */
.chat-skupina-badge {
    font-size: 0.6rem;
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
    border-radius: 8px;
    padding: 0 6px;
    font-weight: 600;
    margin-bottom: 2px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.chat-zprava.vlastni .chat-skupina-badge { align-self: flex-end; }

.chat-zprava-pinned {
    font-size: 0.6rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    padding: 0 6px;
    align-self: flex-start;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.chat-zprava.vlastni .chat-zprava-pinned { align-self: flex-end; }

/* Tlačítko pro připnutí */
.chat-zprava-pin {
    opacity: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0b7c3;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    padding: 0;
    transition: opacity 0.18s, color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.chat-zprava:hover .chat-zprava-pin { opacity: 1; }
.chat-zprava-pin:hover { color: #f59e0b; border-color: #fbbf24; background: #fffbeb; }
.chat-zprava-pin.pinned { color: #f59e0b; border-color: #fbbf24; background: #fffbeb; opacity: 1; }
@media (hover: none) { .chat-zprava-pin { opacity: 0.5; } }

/* Skupiny v "Komu" dropdown */
.chat-komu-sekce {
    padding: 5px 12px 3px;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    cursor: default;
}
.chat-komu-sekce-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    font-size: 0.67rem;
    font-weight: 700;
    padding: 0;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: underline;
}
.chat-komu-sekce-btn:hover { color: var(--primary-dark); }
.chat-komu-item.skupina { color: #5b21b6; }
.chat-komu-item.skupina .komu-dot { background: #8b5cf6; }
#chat-komu-volba.skupina { border-color: #c4b5fd; background: #ede9fe; color: #5b21b6; }

/* ===== MODAL: SPRÁVA SKUPIN ===== */
#chat-skupiny-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#chat-skupiny-content {
    background: white;
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: var(--radius);
    width: 380px;
    max-width: 92vw;
    max-height: 85vh;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#chat-skupiny-hlavicka {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
    flex-shrink: 0;
}
#chat-skupiny-hlavicka h3 {
    flex: 1;
    margin: 0;
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 700;
}
#chat-skupiny-zavrit {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
#chat-skupiny-zavrit:hover { color: var(--text); background: #f3f4f6; }
#chat-skupiny-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-skupina-karta {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.12s, border-color 0.12s;
}
.chat-skupina-karta:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.chat-skupina-karta-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.chat-skupina-karta-nazev { font-size: 0.9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-skupina-karta-pocet {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--text-muted);
}
.skupiny-vlastnik-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-hover);
    border-radius: 20px;
    padding: 1px 8px;
    box-sizing: border-box;
    font-size: 0.72rem;
    color: var(--text-muted);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-skupina-karta-btns { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.chat-skupina-edit-btn, .chat-skupina-del-btn, .chat-skupina-opustit-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color 0.12s, background 0.12s;
    flex-shrink: 0;
}
.chat-skupina-edit-btn:hover { color: var(--primary); background: var(--bg-card); }
.chat-skupina-del-btn:hover, .chat-skupina-opustit-btn:hover { color: #ef4444; background: var(--bg-card); }
#chat-skupiny-formular {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#chat-skupiny-formular h4 { margin: 0; font-size: 0.85rem; color: var(--text); }
#skupiny-nazev-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.18s;
}
#skupiny-nazev-input:focus { border-color: var(--primary); }
#skupiny-clenove-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 32px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
}
.skupiny-clen-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f0faf4;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--primary-dark);
}
/* Čeká na přijetí – jiná barva a přerušovaný okraj, ať je stav vidět na první
   pohled bez čtení textu (nahrazuje dřívější "(čeká na přijetí)" natěsnané v pilulce) */
.skupiny-clen-chip.pozvan {
    background: #fef9e7;
    border: 1px dashed #d4a017;
    color: #92400e;
}
html[data-theme="dark"] .skupiny-clen-chip.pozvan { background: rgba(217,164,6,0.12); border-color: rgba(217,164,6,0.55); color: #fcd34d; }
.skupiny-clen-chip-x {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    font-size: 0.72rem;
    line-height: 1;
}
.skupiny-clen-chip-x:hover { color: #ef4444; }
#skupiny-pridat-select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    background: white;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.18s;
}
#skupiny-pridat-select:focus { border-color: var(--primary); }
#skupiny-nazev-hint { font-size: 0.68rem; color: var(--text-muted); margin: -4px 0 2px; }
.skupiny-form-btns { display: flex; gap: 8px; }
#skupiny-vytvorit-btn {
    flex: 1;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
#skupiny-vytvorit-btn:hover:not(:disabled) { background: var(--primary-dark); }
#skupiny-vytvorit-btn:disabled { background: #d1d5db; cursor: default; }
#skupiny-zrusit-btn {
    flex: 1;
    background: #f3f4f6;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
#skupiny-zrusit-btn:hover { background: #e5e7eb; }
/* Sekce "Vlastnictví skupiny" – oddělená od pole jména (auto-save na blur) a členů
   (ukládají se okamžitě při kliknutí). Převod vlastnictví má navíc vlastní potvrzovací
   okno — vizuální oddělovač a nadpis tomu dává jasno, stejný princip jako "Danger Zone"
   v GitHubu. */
#skupiny-vlastnictvi-sekce {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#skupiny-vlastnictvi-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
#skupiny-prevest-btn {
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 0.8rem;
    font-family: inherit;
    color: #8b5cf6;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
#skupiny-prevest-btn:hover { background: rgba(139,92,246,0.08); border-color: #8b5cf6; }
/* Stav "nabídka převodu čeká na potvrzení" – nahrazuje tlačítko Převést vlastnictví,
   dokud příjemce nabídku nevyřídí (nemá smysl nabízet dvakrát souběžně) */
#skupiny-navrh-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(139,92,246,0.08);
    border: 1px dashed #8b5cf6;
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 0.78rem;
    color: #6d28d9;
}
html[data-theme="dark"] #skupiny-navrh-status { color: #c4b5fd; }
#skupiny-navrh-zrusit-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-decoration: underline;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
#skupiny-navrh-zrusit-btn:hover { color: #ef4444; }
#skupiny-nova-btn {
    width: 100%;
    box-sizing: border-box;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
#skupiny-nova-btn:hover { background: var(--primary-dark); }