/* ============================================================================
   Evidence klientů – světlý prémiový skleněný design
   Konvence: české názvy tříd s jedním podtržítkem, kontejner 1200 px
   ========================================================================= */

:root {
    --barva_pozadi: #eef2f9;
    --barva_text: #1f2a44;
    --barva_text_slaby: #6b7796;
    --barva_akcent: #3b6fe0;
    --barva_akcent_tmava: #2a55bd;
    --barva_modra_zar: rgba(96, 150, 255, 0.55);
    --sklo_pozadi: rgba(255, 255, 255, 0.65);
    --sklo_okraj: rgba(255, 255, 255, 0.8);
    --stin_jemny: 0 10px 30px rgba(63, 94, 168, 0.12);
    --stin_silny: 0 18px 50px rgba(63, 94, 168, 0.18);
    --radius: 18px;
    --radius_velky: 26px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    color: var(--barva_text);
    background: var(--barva_pozadi);
    position: relative;
    overflow-x: hidden;
}

/* Jemné namodralé záře na světlém pozadí. */
.zare {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
}
.zare_1 { width: 520px; height: 520px; top: -160px; left: -120px;
    background: radial-gradient(circle, var(--barva_modra_zar), transparent 70%); }
.zare_2 { width: 460px; height: 460px; top: 30%; right: -160px;
    background: radial-gradient(circle, rgba(120, 170, 255, 0.45), transparent 70%); }
.zare_3 { width: 600px; height: 600px; bottom: -260px; left: 30%;
    background: radial-gradient(circle, rgba(150, 190, 255, 0.4), transparent 70%); }

/* Skleněný efekt – sdílená třída. */
.sklo {
    background: var(--sklo_pozadi);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--sklo_okraj);
    box-shadow: var(--stin_jemny);
}

.stranka {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px 80px;
}

/* ----------------------------------------------------------------------------
   Hlavička a fazolkové menu
   ------------------------------------------------------------------------- */
.hlavni_hlavicka {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 12px 0 28px;
}
/* Auto-marginy loga a profilu drží skupinu kolečko + lišta menu na středu
   mezi logem a profilem (stejné volné mezery po obou stranách); malý gap
   (10px) drží kolečko těsně u lišty. Mobilní blok ≤620 px je přebíjí. */
.znacka { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.znacka_obrazek { display: block; height: 44px; width: auto; }
.mobil_menu_spoustec {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--barva_text_slaby);
    box-shadow: none;
    font: inherit;
    cursor: pointer;
    transition: color 0.16s;
}
.mobil_menu_spoustec span { display: none; }
.mobil_menu_spoustec svg { width: 25px; height: 25px; flex: none; opacity: 0.9; }
.mobil_menu_spoustec:hover,
.mobil_menu_otevreno .mobil_menu_spoustec { color: var(--barva_text); }

/* Podlouhlá zakulacená lišta menu s aktivním tlačítkem ve stylu fazolky. */
.menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 6px;
    border-radius: 999px;
    background: var(--sklo_pozadi);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--sklo_okraj);
    box-shadow: var(--stin_jemny);
}
.menu_polozka {
    position: relative;
    z-index: 1;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--barva_text_slaby);
    font-weight: 600;
    font-size: 14px;
    transition: color 0.25s;
    white-space: nowrap;
}
.menu_polozka:hover { color: var(--barva_text); }
.menu_polozka_aktivni {
    color: #fff;
    background: linear-gradient(140deg, #4f86ff, #2f59c4);
    box-shadow: 0 8px 18px rgba(59, 111, 224, 0.4);
}

/* Klouzavá fazolka – jeden sdílený element, který JS posune pod aktivní položku.
   Jakmile JS lištu převezme (třída „ma_fazolku“), vlastní pozadí položek zmizí
   a barvu/pohyb řeší tahle fazolka. Bez JS zůstává klasické pozadí na položce. */
.ma_fazolku .menu_polozka_aktivni {
    background: transparent;
    box-shadow: none;
}
/* Pozici i rozměr (top/left přes transform, width, height) řídí výhradně JS
   podle aktivní položky – tady necháváme jen vzhled, ať se posuny nesčítají. */
.fazolka {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 999px;
    background: linear-gradient(140deg, #4f86ff, #2f59c4);
    box-shadow: 0 8px 18px rgba(59, 111, 224, 0.4);
    opacity: 0;
    z-index: 0;
    transition: transform 0.38s cubic-bezier(0.34, 1.4, 0.5, 1),
                width 0.38s cubic-bezier(0.34, 1.4, 0.5, 1),
                height 0.38s cubic-bezier(0.34, 1.4, 0.5, 1),
                opacity 0.2s ease;
    pointer-events: none;
}
.fazolka_viditelna { opacity: 1; }

/* Duch – světlá fazolka, která sleduje kurzor po neaktivních položkách.
   Leží pod modrou fazolkou i pod textem, takže na aktivní položku nesahá
   (JS ji tam schová). Rozměr i pozici řídí JS stejně jako u fazolky. */
.duch {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 999px;
    opacity: 0;
    z-index: 0;
    /* Sklouznutí s jemným přehoupnutím (overshoot v cubic-bezier), zmizení
       o poznání rychleji než příchod – ať lišta nepůsobí líně. */
    transition: transform 0.42s cubic-bezier(0.34, 1.42, 0.44, 1),
                width 0.42s cubic-bezier(0.34, 1.42, 0.44, 1),
                height 0.42s cubic-bezier(0.34, 1.42, 0.44, 1),
                opacity 0.16s ease;
    pointer-events: none;
}
/* Vlastní světlá plocha je ve vnitřní vrstvě: .duch nese pozici (transform),
   ::before škálování – jinak by se oba transformy přebíjely.
   Příchod: „nadechnutí“ z 0.86 na 1 s odrazem. */
.duch::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Stejná barva jako pozadí stránky – pill vypadá, jako by lišta byla
       pod kurzorem „vykousnutá“. Bez vnitřního okraje: linka na skleněné
       liště čte jako špína. */
    background: var(--barva_pozadi);
    transform: scale(0.86);
    transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.36, 1);
}
.duch_viditelny { opacity: 1; }
.duch_viditelny::before { transform: scale(1); }
/* Během přeletu mezi položkami se duch nepatrně zmáčkne – dojem hmoty. */
.duch_leti::before { transform: scale(1.02, 0.9); }

.profil { display: flex; align-items: center; gap: 12px; margin-left: auto; position: relative; }
.profil_jmeno { font-weight: 600; }
.profil_role {
    font-size: 12px;
    color: var(--barva_text_slaby);
    background: rgba(255, 255, 255, 0.6);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--sklo_okraj);
}

/* ----------------------------------------------------------------------------
   Tlačítka
   ------------------------------------------------------------------------- */
.tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.2s, background 0.2s;
    font-family: inherit;
}
.tlacitko:active { transform: translateY(1px); }
/* Ikony uvnitř tlačítek – sjednocená velikost a zarovnání s textem. */
.tlacitko svg {
    width: 18px;
    height: 18px;
    flex: none;
}
.tlacitko_hlavni {
    color: #fff;
    background: linear-gradient(140deg, #4f86ff, #2a55bd);
    box-shadow: 0 8px 18px rgba(59, 111, 224, 0.35);
}
.tlacitko_hlavni:hover { box-shadow: 0 10px 24px rgba(59, 111, 224, 0.45); }
.tlacitko_jemne {
    color: var(--barva_akcent_tmava);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--sklo_okraj);
}
.tlacitko_jemne:hover { background: #fff; }
/* Deklarováno AŽ ZA .tlacitko_jemne:hover – „Smazat defekt" nese obě třídy
   a bílý hover jemného tlačítka by jinak přebil červené pozadí (stejná
   specificita, rozhoduje pořadí) a nechal bílý text na bílém. */
.tlacitko_nebezpeci {
    color: #fff;
    background: linear-gradient(140deg, #f0746a, #d23b3b);
    box-shadow: 0 8px 18px rgba(210, 59, 59, 0.3);
    /* Přebíjí bílý rámeček z .tlacitko_jemne, ať „Smazat defekt" vypadá stejně
       jako ostatní nebezpečná tlačítka (ta mají průhledný okraj z .tlacitko). */
    border-color: transparent;
}
.tlacitko_nebezpeci:hover {
    background: linear-gradient(140deg, #ee6459, #c22f2f);
    box-shadow: 0 10px 24px rgba(210, 59, 59, 0.42);
}
.tlacitko_plne { width: 100%; text-align: center; }
.tlacitko_ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    border: 1px solid var(--sklo_okraj);
    background: rgba(255, 255, 255, 0.7);
    color: var(--barva_text_slaby);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.tlacitko_ikona svg { width: 16px; height: 16px; }
.tlacitko_ikona:hover {
    color: #d23b3b;
    background: rgba(210, 59, 59, 0.08);
    border-color: rgba(210, 59, 59, 0.3);
}

/* ----------------------------------------------------------------------------
   Nadpisy a panely
   ------------------------------------------------------------------------- */
.panel_hlava {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.nadpis { font-size: 28px; margin: 4px 0; font-weight: 700; }
.podnadpis { color: var(--barva_text_slaby); margin: 0; font-size: 14px; }
.panel_akce { display: flex; gap: 10px; }
.zpet {
    text-decoration: none;
    color: var(--barva_text_slaby);
    font-size: 14px;
    font-weight: 600;
}
.zpet:hover { color: var(--barva_akcent); }

/* ----------------------------------------------------------------------------
   Filtr lišta
   ------------------------------------------------------------------------- */
.filtr_lista {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.filtr_hledej { flex: 1; min-width: 200px; }
.filtr_archiv {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--barva_text_slaby);
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   Klikací abeceda (filtr podle prvního písmene příjmení)
   ------------------------------------------------------------------------- */
.abeceda {
    position: relative; /* kotva pro klouzavou fazolku (position: absolute) */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    background: var(--sklo_pozadi);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--sklo_okraj);
    box-shadow: var(--stin_jemny);
}
.pismeno {
    /* Dotyk-friendly cíl: min. 40×40 px. */
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-decoration: none;
    color: var(--barva_text_slaby);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    transition: color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.pismeno:hover { color: var(--barva_text); background: rgba(255, 255, 255, 0.6); }
.pismeno:active { transform: scale(0.92); }
.pismeno_aktivni,
.pismeno_aktivni:hover {
    color: #fff;
    background: linear-gradient(140deg, #4f86ff, #2f59c4);
    box-shadow: 0 8px 18px rgba(59, 111, 224, 0.4);
}
/* V režimu fazolky (ma_fazolku) pozadí přebírá klouzavá fazolka – text necháme
   bílý a nad fazolkou (z-index). Bez JS zůstává klasické pozadí výše. */
.abeceda.ma_fazolku .pismeno_aktivni,
.abeceda.ma_fazolku .pismeno_aktivni:hover {
    background: transparent;
    box-shadow: none;
}
.abeceda.ma_fazolku .pismeno { position: relative; z-index: 1; }
/* „Vše“ je širší než písmena – ať se nemačká. */
.abeceda .pismeno[data-pismeno=""] { padding: 0 16px; }

/* Archivační přepínač už není v liště formuláře – dáme mu samostatný odstup. */
.filtr_archiv_samostatne { margin: 0 0 16px 2px; }

/* Přepínače domovů – stejný vzhled jako menu, ale jako tlačítka pod lištou. */
.domovy_prepinace {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: var(--sklo_pozadi);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--sklo_okraj);
    box-shadow: var(--stin_jemny);
    margin-bottom: 20px;
}
/* menu_polozka je jinde odkaz; tady je to tlačítko, tak srovnáme reset. */
.domovy_prepinace .menu_polozka {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.domovy_prepinace .menu_polozka:hover { color: var(--barva_text); }
/* Aktivní přepínač musí přebít reset výše – jinak bílý text leží na světle.
   V režimu fazolky (ma_fazolku) pozadí přebírá klouzavá fazolka. */
.domovy_prepinace .menu_polozka_aktivni,
.domovy_prepinace .menu_polozka_aktivni:hover {
    color: #fff;
    background: linear-gradient(140deg, #4f86ff, #2f59c4);
    box-shadow: 0 8px 18px rgba(59, 111, 224, 0.4);
}
.domovy_prepinace.ma_fazolku .menu_polozka_aktivni,
.domovy_prepinace.ma_fazolku .menu_polozka_aktivni:hover {
    background: transparent;
    box-shadow: none;
}

/* Přepínač domovů v chatu (zprávy). Nad ním je hlavní menu a pod ním input –
   všechno „sklo-pilulky", což působilo rušivě a tři lišty splývaly. Proto je
   přepínač záměrně ODLEHČENÝ: žádné sklo-pozadí ani stín za celou lištou, jen
   jemné čipy. Aktivní domov má jen světle modré pozadí (ne sytě modrou pilulku
   jako hlavní menu), takže s primární navigací vizuálně nesoupeří.
   Je vystředěný a jen tak široký, kolik potřebuje. */
.domovy_prepinace.zpravy_prepinace {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* Decentní vzduch navíc nad i pod přepínačem, ať nelepí na menu/nadpis chatu.
       (Nad bylo 0 → 7px; pod dědí 20px ze základu → +7px = 27px.) */
    margin-top: 7px;
    margin-bottom: 27px;
    justify-content: center;
    padding: 0;
    gap: 16px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
/* Čip neaktivního domova – tlumený, lehký. */
.zpravy_prepinace .menu_polozka {
    color: var(--barva_text_slaby);
    padding: 7px 14px;
}
.zpravy_prepinace .menu_polozka:hover {
    color: var(--barva_akcent_tmava);
    background: rgba(59, 111, 224, 0.08);
}
/* Aktivní domov: jen jemné světle modré pozadí + barevný text, žádný gradient
   ani stín. Přebíjí sytou pilulku z .domovy_prepinace. */
.zpravy_prepinace .menu_polozka_aktivni,
.zpravy_prepinace .menu_polozka_aktivni:hover {
    color: var(--barva_akcent_tmava);
    background: rgba(59, 111, 224, 0.14);
    box-shadow: none;
}
/* Odznak počtu úkolů zjemníme (menší, bez stínu) – v odlehčené liště by sytá
   pilulka se stínem zase přitahovala přílišnou pozornost. Aktivní položka je tu
   světlá, takže odznak zůstává červený i na ní (čitelný na světlém podkladu). */
.zpravy_prepinace .menu_odznak,
.zpravy_prepinace .menu_polozka_aktivni .menu_odznak {
    /* V této odlehčené liště sedí odznak v řádku za názvem (ne na horní hraně
       jako v hlavní navigaci) – proto rušíme absolutní polohu i poskok. */
    position: static;
    transform: none;
    margin-left: 6px;
    animation: none;
    color: #fff;
    background: #e0563b;
    box-shadow: none;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
}

/* Decentní počet klientů v tlačítku domova – malá tlumená pilulka za názvem.
   Nechce na sebe strhávat pozornost, jen tichý doplněk. */
.domov_pocet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 7px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--barva_text_slaby);
    background: rgba(63, 94, 168, 0.1);
    /* Skryje prázdný odznak, než ho JS naplní (zabrání bliknutí „0"/prázdna). */
    transition: background 0.18s, color 0.18s;
}
.domov_pocet:empty { display: none; }
/* Na aktivním (modrém) tlačítku musí být počet čitelný – světlá varianta. */
.domovy_prepinace .menu_polozka_aktivni .domov_pocet {
    color: #fff;
    background: rgba(255, 255, 255, 0.25);
}

/* Jemné ztlumení tabulky během načítání přes AJAX. */
#vysledky { transition: opacity 0.15s; }
#vysledky.nacita { opacity: 0.5; }

/* ----------------------------------------------------------------------------
   Tabulky
   ------------------------------------------------------------------------- */
.tabulka_obal {
    border-radius: var(--radius);
    overflow: hidden;
}
.tabulka {
    width: 100%;
    border-collapse: collapse;
}
.tabulka th {
    text-align: left;
    padding: 14px 18px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--barva_text_slaby);
    border-bottom: 1px solid rgba(63, 94, 168, 0.12);
}
.tabulka td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(63, 94, 168, 0.08);
    font-size: 15px;
}
.tabulka tbody tr:last-child td { border-bottom: none; }
/* Spring hover – řádek se jemně nadzvedne a podbarví. */
.tabulka tbody tr {
    transition: background 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.tabulka tbody tr:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px) scale(1.004);
    box-shadow: 0 8px 20px rgba(63, 94, 168, 0.12);
}
.bunka_jmeno { font-weight: 600; }
.bunka_akce { text-align: right; }
.radek_archiv { opacity: 0.55; }
.odkaz { color: var(--barva_akcent); text-decoration: none; font-weight: 600; }
.odkaz:hover { text-decoration: underline; }

/* Akce na konci řádku klienta – ikonová tlačítka (Detail, PDF). */
.radek_akce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
.akce_ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    border: 1px solid var(--sklo_okraj);
    background: rgba(255, 255, 255, 0.6);
    color: var(--barva_akcent);
    transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.12s;
}
.akce_ikona svg { width: 18px; height: 18px; }
.akce_ikona:hover {
    background: #fff;
    border-color: var(--barva_akcent);
    transform: translateY(-1px);
}
.akce_ikona:active { transform: translateY(0); }
.akce_ikona_pdf { color: var(--barva_text_slaby); }
.akce_ikona_pdf:hover { color: var(--barva_text); border-color: var(--barva_text_slaby); }

/* Klikací řádek klienta – celý otevírá detail. */
.radek_klikaci { cursor: pointer; }

/* Sloupec Info – sada informačních ikonek vedle sebe (léky, fotodokumentace, …).
   Snadno rozšiřitelné: stačí přidat další .info_ikona se svou barvou/ikonou. */
.bunka_info { white-space: nowrap; }
.info_ikony { display: inline-flex; align-items: center; gap: 12px; }

/* Sloupec „Vývoj" – mini-graf jedné nejrelevantnější veličiny klienta.
   Štítek říká, na co se člověk dívá (TK/°C/SpO₂/ml); barvu křivky nese
   závažnost (neutrální = v normě). Vykresluje sdílený renderer v app.js. */
.bunka_trend { white-space: nowrap; }
.th_trend { white-space: nowrap; }
.trend_obal { display: inline-flex; align-items: center; gap: 7px; }
.trend_stitek {
    min-width: 32px; text-align: right;
    font-size: 10.5px; font-weight: 700;
    color: var(--barva_text_slaby);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.trend_graf { display: inline-flex; align-items: center; min-width: 64px; }
.trend_prazdno { color: var(--barva_text_slaby); opacity: 0.5; }
.info_ikona {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
}
.info_ikona svg { flex: none; }
/* Buňka s ikonami je interaktivní (najetí/klik/fokus → karta s přehledem). */
.info_ikony[data-info-tip] { cursor: help; border-radius: 8px; }
.info_ikony[data-info-tip]:focus-visible {
    outline: 2px solid var(--barva_akcent, #3b8fd6);
    outline-offset: 3px;
}
/* Léky – ikona pilulky + počet léků v lékovém záznamu. */
.ikona_leky { color: var(--barva_text_slaby); }
/* Fotodokumentace – decentní šedý fotoaparát (jen správce). */
.ikona_foto { color: var(--barva_text_slaby); opacity: 0.65; }
.ikona_foto svg { width: 18px; height: 18px; }
/* Individuální prahy upozornění – decentní modrá „posuvníky" (jen správce).
   Nenápadné odlišení, že klient má vlastní prahy oproti globálním. */
.ikona_prahy { color: var(--barva_akcent); opacity: 0.7; }
/* Aktivní sdílení s lékařem – decentní zelenkavá (jen správce). Číslo = počet
   aktivních (platných, nezneplatněných) sdílecích odkazů. */
.ikona_sdileno { color: #2a9d6f; opacity: 0.8; }
/* Upozornění „bez stolice" – varovná oranžovo-červená, jemné pulzování, ať
   ji oko zachytí. Číslo = počet dní bez stolice po sobě. */
.ikona_stolice { color: #d9622b; }
.ikona_stolice svg { animation: stolice_puls 2.4s ease-in-out infinite; }
@keyframes stolice_puls {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
    .ikona_stolice svg { animation: none; }
}
/* Zdravotní signály z triage (teplota/tlak/SpO₂/tekutiny) – kvůli kompaktnosti
   jen barevné ikony vedle sebe v jednom pilulkovém obalu; podrobné hodnoty
   (naměřeno + norma) nese plovoucí karta .info_tip. Barva = závažnost,
   shodná s nástěnkou. */
.info_zdravi {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--barva_plocha_jemna, rgba(120, 130, 150, 0.08));
}
.info_zdravi_ikona { display: inline-flex; }
.info_zdravi_ikona .info_ikona_svg { flex: none; width: 16px; height: 16px; }
.info_ikona_varovani { color: #c4701f; }
.info_ikona_kriticke { color: #d23a5b; }
/* Kritický signál jemně pulzuje, ať ho oko v seznamu zachytí. */
.info_ikona_kriticke .info_ikona_svg { animation: stolice_puls 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .info_ikona_kriticke .info_ikona_svg { animation: none; }
}

/* Žádná doplňující informace – ztlumená pomlčka. */
.info_prazdno { color: var(--barva_text_slaby); opacity: 0.5; }

/* ===========================================================================
   Plovoucí karta s přehledem klienta (sloupec Info) — „high-end" tooltip.
   Světlá karta se sklem, jemným rámečkem a stínem; zdravotní řádky s ikonou,
   názvem, barevnou hodnotou a normou; provozní info v patičce. Pozici a překlopení
   (nad/pod) řídí JS; --sipka-x posouvá špičku tak, ať míří na ikony.
   =========================================================================== */
.info_tip {
    position: fixed;
    z-index: 1200;
    left: 0; top: 0;
    transform: translate(-50%, -100%);
    width: max-content;
    max-width: 320px;
    padding: 0;
    border-radius: 14px;
    background: var(--barva_panel, #fff);
    border: 1px solid rgba(120, 135, 165, 0.22);
    box-shadow: 0 18px 40px -12px rgba(22, 40, 80, 0.32), 0 4px 12px rgba(22, 40, 80, 0.12);
    color: var(--barva_text, #243049);
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.16s ease, transform 0.16s ease;
    margin-top: -8px; /* odsazení od ikon (nad nimi) */
}
.info_tip[hidden] { display: none; }
.info_tip.info_tip_dole { transform: translate(-50%, 0); margin-top: 8px; }
.info_tip.info_tip_otevrena { opacity: 1; }
.info_tip.info_tip_otevrena:not(.info_tip_dole) { transform: translate(-50%, -100%) translateY(-2px); }
.info_tip.info_tip_otevrena.info_tip_dole { transform: translate(-50%, 0) translateY(2px); }

/* Špička karty (míří na ikony). Posun --sipka-x dorovná horizontální ořez. */
.info_tip::after {
    content: "";
    position: absolute;
    left: calc(50% + var(--sipka-x, 0px));
    width: 12px; height: 12px;
    background: var(--barva_panel, #fff);
    border: 1px solid rgba(120, 135, 165, 0.22);
    transform: translateX(-50%) rotate(45deg);
}
.info_tip:not(.info_tip_dole)::after { bottom: -7px; border-top: 0; border-left: 0; }
.info_tip.info_tip_dole::after { top: -7px; border-bottom: 0; border-right: 0; }

.info_tip_karta { padding: 12px 14px; }

/* Hlavička: jméno + odznak celkové závažnosti, oddělená jemnou linkou. */
.info_tip_hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 9px;
    margin-bottom: 9px;
    border-bottom: 1px solid rgba(120, 135, 165, 0.16);
}
.info_tip_jmeno { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.info_tip_odznak {
    flex: none;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
}
.info_tip_odznak.info_ikona_varovani { background: rgba(232, 146, 58, 0.16); }
.info_tip_odznak.info_ikona_kriticke { background: rgba(224, 85, 111, 0.18); }
/* Klidný stav (jen provozní info) – hlavička bez spodní linky a odznaku. */
.info_tip_klid .info_tip_hlava { border-bottom: 0; padding-bottom: 0; margin-bottom: 2px; }

/* Zdravotní řádky. */
.info_tip_seznam { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.info_tip_radek { display: flex; align-items: flex-start; gap: 10px; }
.info_tip_ikona {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 9px;
}
.info_tip_ikona.info_ikona_varovani { background: rgba(232, 146, 58, 0.14); }
.info_tip_ikona.info_ikona_kriticke { background: rgba(224, 85, 111, 0.15); }

/* Karta triage (nástěnka) sdílí vzhled s kartou v seznamu klientů. U trendů je
   klidná (info_tip_klid), ale pod hlavičkou má seznam signálů, takže linku pod
   hlavičkou i tady ponecháme + neutrální „trend" odznak a neutrální ikonu. */
.triage_tip_karta.info_tip_klid .info_tip_hlava {
    border-bottom: 1px solid rgba(120, 135, 165, 0.16);
    padding-bottom: 9px; margin-bottom: 9px;
}
.triage_tip_odznak_trend {
    background: rgba(120, 135, 165, 0.16); color: var(--barva_text_slaby, #6b7891);
}
.triage_tip_karta .info_tip_ikona.info_ikona_klid { background: rgba(120, 135, 165, 0.14); }
.info_tip_ikona .info_ikona_svg { width: 18px; height: 18px; }
.info_tip_text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.info_tip_nazev { font-weight: 700; font-size: 13px; }
.info_tip_hodnota { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.info_tip_norma { font-size: 11.5px; color: var(--barva_text_slaby, #6b7891); margin-top: 1px; }

/* Provozní patička (stolice / léky / foto). */
.info_tip_provoz {
    list-style: none;
    margin: 11px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(120, 135, 165, 0.16);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.info_tip_seznam + .info_tip_provoz { margin-top: 11px; }
.info_tip_provoz_radek { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--barva_text_slaby, #6b7891); }
.info_tip_provoz_radek.info_ikona_varovani { color: #c4701f; font-weight: 600; }
.info_tip_provoz_ikona { flex: none; display: inline-flex; opacity: 0.85; }
.info_tip_provoz_ikona .info_ikona_svg { width: 15px; height: 15px; }

/* Karta „Vývoj" – sledovaná veličina, větší sparkline a shrnutí hodnot.
   Sdílí obal a chování s info-kartou (plovoucí bublina #info_tip). */
.trend_tip_karta { min-width: 210px; }
.trend_tip_veličina { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.trend_tip_ikona { flex: none; display: inline-flex; }
.trend_tip_ikona .info_ikona_svg { width: 18px; height: 18px; }
.trend_tip_nazev { font-size: 12.5px; font-weight: 600; color: var(--barva_text_slaby, #6b7891); }
.trend_tip_graf { display: block; margin: 0 0 10px; }
.trend_tip_hodnoty {
    list-style: none; margin: 0; padding: 10px 0 0;
    border-top: 1px solid rgba(120, 135, 165, 0.16);
    display: flex; flex-direction: column; gap: 6px;
}
.trend_tip_hodnoty li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 12.5px; }
.trend_tip_stitek { color: var(--barva_text_slaby, #6b7891); }
.trend_tip_cislo { font-weight: 700; font-variant-numeric: tabular-nums; }
.trend_tip_nahoru { color: #c4701f; }
.trend_tip_dolu { color: #2f79c9; }
.trend_tip_rovina { color: var(--barva_text_slaby, #6b7891); }

@media (prefers-reduced-motion: reduce) {
    .info_tip { transition: opacity 0.16s ease; }
}

/* Decentní „dýchnutí" tabulky po přefiltrování (přidává JS třídu na .tabulka_obal). */
@keyframes tabulka_preblesk {
    from { opacity: 0.55; transform: translateY(4px); }
    to   { opacity: 1;    transform: translateY(0); }
}
.tabulka_prebleskla {
    animation: tabulka_preblesk 0.26s ease;
}
@media (prefers-reduced-motion: reduce) {
    .tabulka_prebleskla { animation: none; }
}

.odznak {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(59, 111, 224, 0.12);
    color: var(--barva_akcent_tmava);
    margin-left: 6px;
    vertical-align: middle;
}
.odznak_archiv { background: rgba(150, 120, 60, 0.15); color: #8a6d2f; }

/* Sloupec Koupání – kompaktní zkratky koupacích dnů (Po St Pá) jako jemné odznaky. */
.bunka_koupani { white-space: nowrap; }
.koupani_dny { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.koupani_den {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(59, 111, 224, 0.12);
    color: var(--barva_akcent_tmava);
}
.koupani_prazdno { color: var(--barva_text_slaby); opacity: 0.5; }
/* Dnešní den – jemné, ale zřetelné zvýraznění zkratky (Po/St/…), ať je hned
   vidět „dneska se to dělá". Plnější akcent + bílý text, bez křiklavosti. */
.koupani_den_dnes {
    background: var(--barva_akcent);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(59, 111, 224, 0.18);
}

/* Hlavičky sloupců dnů péče (Koupání / Náplasti / PMK) jako klikací ikona
   s tooltipem – stejné chování i styl jako hlavičky úkolů (.dnes_th_napoveda,
   .dnes_napoveda_bublina). Text zůstává pro čtečky (skrytý mimo obraz); popisek
   ukáže tooltip po najetí myší i po kliknutí na dotykovém zařízení. */
.th_dny_pece { color: var(--barva_text_slaby); text-align: center; white-space: nowrap; }
.th_dny_pece .dny_pece_ikona { display: block; }
.th_dny_pece_text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------------------
   Karty detailu
   ------------------------------------------------------------------------- */
.karta {
    border-radius: var(--radius_velky);
    padding: 26px;
    margin-bottom: 22px;
}
.karta_nadpis { font-size: 16px; margin: 0 0 18px; font-weight: 700; }
.karta_hlava { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.mrizka_detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
@media (max-width: 820px) { .mrizka_detail { grid-template-columns: 1fr; } }

.udaje { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; }
.udaj_popisek { color: var(--barva_text_slaby); font-size: 13px; font-weight: 600; }
.udaj_hodnota { margin: 0; font-size: 15px; }
.udaj_rc,
.udaj_rc a { color: inherit !important; text-decoration: none !important; pointer-events: none; }
.udaj_hodnota_text { grid-column: 1 / -1; padding-top: 2px; }
.prazdny_text { color: var(--barva_text_slaby); font-style: italic; }

/* Alergická anamnéza – kriticky důležitý údaj, nesmí se přehlédnout. Ikona je
   inline SVG (viz udaj() v klient.php); margin-top ji opticky centruje na
   první řádek textu (líc řádkového boxu 15 px × 1.45 vs. 18px ikona). */
.udaj_hodnota_zvyrazneny {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(224, 85, 111, 0.12);
    border: 1px solid rgba(224, 85, 111, 0.2);
    border-radius: 8px;
    color: #a3203f;
    font-weight: 700;
    line-height: 1.45;
}
.udaj_popisek_zvyrazneny { color: #c23052; }
.udaj_zvyrazneni_ikona { flex: none; margin-top: 2px; }

/* Samostatný široký blok poznámek pod lékovým záznamem. */
.karta_poznamky .poznamky_text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-line;
}

/* ----------------------------------------------------------------------------
   Medikace
   ------------------------------------------------------------------------- */
.karta_medikace { padding-bottom: 22px; }
.tabulka_medikace td, .tabulka_medikace th { padding: 10px 12px; }
.bunka_lek { font-weight: 600; }
.vstup_davka { max-width: 90px; }
/* Čtecí tabulka (pečovatel) i editační formulář (správce): buňky dávek */
.davka_ma { font-weight: 700; color: var(--barva_text); }
.davka_nema { color: var(--barva_text_slaby); opacity: 0.4; }
/* Dávka „0" – lék se v tuto denní dobu nepodává. Tlumeně šedě (ne skrytě jako
   prázdná buňka), ať pečovatel odliší od reálné dávky (1, 2, …). */
.davka_nula { font-weight: 400; color: var(--barva_text_slaby); opacity: 0.55; }
.tabulka_medikace_edit .formular_vstup { padding: 8px 10px; }
.bunka_odebrat { width: 44px; text-align: center; }

/* Editace dávky: zaškrtávátko 0/1 + únikové pole „jiná" hodnota. Skryté pole
   drží skutečnou hodnotu odesílanou na server (a do PDF). */
.davka_pole { display: flex; align-items: center; gap: 6px; }

/* Vlastní zaškrtávátko – stejný vzhled i velikost jako v Úkonech (.dnes_check).
   Skrytý nativní input + rámeček .davka_check_box. */
.davka_check { display: inline-flex; cursor: pointer; flex: none; }
.davka_check input { position: absolute; opacity: 0; width: 0; height: 0; }
.davka_check_box {
    width: 24px; height: 24px;
    border-radius: 7px;
    border: 2px solid rgba(63, 94, 168, 0.35);
    background: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.davka_check_box::after {
    content: "✓";
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.12s, transform 0.12s;
}
.davka_check input:checked + .davka_check_box {
    background: var(--barva_akcent);
    border-color: var(--barva_akcent);
}
.davka_check input:checked + .davka_check_box::after { opacity: 1; transform: scale(1); }
.davka_check input:focus-visible + .davka_check_box { box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.3); }
.davka_check input:disabled + .davka_check_box { opacity: 0.45; cursor: default; }
.davka_check:active .davka_check_box { transform: scale(0.92); }
/* Při „jiné dávce" se místo zaškrtávátka ukazuje textové pole – rámeček schováme. */
.davka_check_skryty { display: none; }
.davka_jine { max-width: 70px; }
.davka_prepinac {
    flex: none;
    width: 30px; height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--barva_text_slaby);
    font-size: 16px; line-height: 1;
    cursor: pointer;
    touch-action: manipulation; /* žádný 300ms delay / scroll-gesture na tapnutí */
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
/* Přepínač „⋯" se zjeví až při zájmu o buňku, ať tabulka není zaplevelená.
   Na dotyku hover neaplikujeme (první tap by jen „hovernul" místo kliku) –
   tam ho zobrazuje natrvalo třída .dotyk níže. */
.davka_pole_jine .davka_prepinac { opacity: 1; color: var(--barva_akcent); }
.davka_prepinac:hover { background: rgba(59, 111, 224, 0.1); color: var(--barva_akcent); }

@media (hover: hover) {
    .davka_pole:hover .davka_prepinac,
    .davka_pole:focus-within .davka_prepinac { opacity: 1; }
}

/* Dotyková zařízení nemají hover – přepínač „⋯" proto zobrazujeme vždy.
   Třídu .dotyk nasazuje app.js (spolehlivější než @media hover u hybridů). */
.dotyk .davka_prepinac { opacity: 1; }
.medikace_akce { display: flex; gap: 10px; margin-top: 16px; }

/* Plynulé přidávání/odebírání řádků medikace. Animujeme obsah buněk (řádek
   <tr> sám se animovat nedá spolehlivě) – buňky se rozevřou / složí. */
.medikace_radek.radek_prichod > td > * {
    animation: med_radek_pop 0.34s cubic-bezier(0.34, 1.5, 0.5, 1) both;
}
@keyframes med_radek_pop {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Krátké zvýraznění nového řádku, ať je vidět, kam přibyl. */
.medikace_radek.radek_zvyrazneny > td {
    animation: med_radek_zar 1.1s ease;
}
@keyframes med_radek_zar {
    0%   { background: rgba(59, 111, 224, 0.16); }
    100% { background: transparent; }
}
/* Odebrání: řádek se složí (buňky ztratí výšku i obsah). */
.medikace_radek.radek_odchod > td {
    padding-top: 0;
    padding-bottom: 0;
    transition: padding 0.28s ease;
}
.medikace_radek.radek_odchod > td > * {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.22s ease, transform 0.28s ease;
}

/* ----------------------------------------------------------------------------
   Historie lékového záznamu – svislá časová osa s rozbalitelným barevným diffem
   ------------------------------------------------------------------------- */
.historie_pocet {
    font-size: 12px;
    font-weight: 700;
    color: var(--barva_text_slaby);
    background: rgba(59, 111, 224, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
}

.historie_osa {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    position: relative;
}
/* Souvislá svislá linka osy – vede středem teček. */
.historie_osa::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(59, 111, 224, 0.35), rgba(59, 111, 224, 0.08));
}

.historie_uzel { position: relative; padding: 0 0 6px 0; }

.historie_hlava {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 10px 10px 10px 0;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.18s ease;
    font: inherit;
    color: inherit;
}
.historie_hlava:hover { background: rgba(59, 111, 224, 0.05); }

/* Tečka na ose – u aktuální verze plná akcentní s jemným pulzem. */
.historie_tecka {
    flex: none;
    width: 20px; height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(59, 111, 224, 0.4);
    box-shadow: 0 0 0 4px var(--sklo_pozadi);
    position: relative;
    z-index: 1;
}
.historie_uzel_aktualni .historie_tecka {
    background: var(--barva_akcent);
    border-color: var(--barva_akcent);
    box-shadow: 0 0 0 4px var(--sklo_pozadi), 0 0 0 7px rgba(59, 111, 224, 0.18);
}

.historie_info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.historie_radek_horni { display: flex; align-items: center; gap: 8px; }
.historie_verze { font-weight: 700; font-size: 15px; }
/* Titulek aktuálního (nejnovějšího) uzlu „Aktuální" – akcentní barvou, ať vynikne. */
.historie_uzel_aktualni .historie_verze { color: var(--barva_akcent_tmava); }
.historie_meta { font-size: 13px; color: var(--barva_text_slaby); }

.historie_souhrn { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.historie_chip {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.historie_chip_pridano  { background: rgba(34, 153, 84, 0.13);  color: #1f7a44; }
.historie_chip_odebrano { background: rgba(214, 69, 69, 0.12);  color: #b23b3b; }
.historie_chip_zmeneno  { background: rgba(196, 149, 32, 0.16); color: #8a6516; }
.historie_chip_nic      { background: rgba(107, 119, 150, 0.12); color: var(--barva_text_slaby); }

/* Šipka rozbalení – otáčí se podle aria-expanded. */
.historie_sipka {
    flex: none;
    width: 20px; height: 20px;
    margin-top: 4px;
    color: var(--barva_text_slaby);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.historie_hlava[aria-expanded="true"] .historie_sipka { transform: rotate(180deg); }

/* Rozbalovací tělo – plynulá animace výšky přes grid-template-rows (0fr → 1fr),
   spolehlivější než animace max-height. JS jen přepíná hidden + třídu. */
.historie_telo {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    margin-left: 32px;
}
.historie_telo[hidden] {
    display: grid;          /* přebíjíme hidden, ať můžeme animovat z 0fr */
    grid-template-rows: 0fr;
    opacity: 0;
}
.historie_telo_vnitrek { overflow: hidden; min-height: 0; padding-left: 10px; border-left: 2px solid rgba(59, 111, 224, 0.12); }

.historie_zmeny { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.historie_zmena {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    padding: 7px 11px;
    border-radius: 10px;
    line-height: 1.45;
}
.historie_zmena_pridano  { background: rgba(34, 153, 84, 0.08); }
.historie_zmena_odebrano { background: rgba(214, 69, 69, 0.07); }
.historie_zmena_zmeneno  { background: rgba(196, 149, 32, 0.09); }
.historie_znak {
    flex: none;
    width: 18px; height: 18px;
    /* Inline-flex + centrování spolehlivě vycentruje glyf (+/−/~) v kolečku.
       margin-top srovná kolečko na výšku prvního řádku textu (line-height 1.45). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 13px;
    color: #fff;
    line-height: 1;
}
.historie_zmena_pridano  .historie_znak { background: #2a9d54; }
.historie_zmena_odebrano .historie_znak { background: #cf4a4a; }
.historie_zmena_zmeneno  .historie_znak { background: #c49520; }
.historie_zmena_odebrano .historie_zmena_text strong { text-decoration: line-through; opacity: 0.85; }

.historie_pole { color: var(--barva_text_slaby); font-size: 13px; }
.historie_ze { color: #b23b3b; font-weight: 600; }
.historie_na { color: #1f7a44; font-weight: 700; }
.historie_sip { color: var(--barva_text_slaby); margin: 0 1px; }
.historie_davky { color: var(--barva_text_slaby); font-weight: 600; }
.historie_beze_zmen { color: var(--barva_text_slaby); font-style: italic; font-size: 14px; margin: 8px 0 0; }

/* Sbalitelný úplný snímek verze – decentní, sekundární k diffu. */
.historie_snimek { margin-top: 12px; }
.historie_snimek > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--barva_akcent);
    padding: 4px 0;
    list-style: none;
    user-select: none;
}
.historie_snimek > summary::-webkit-details-marker { display: none; }
.historie_snimek > summary::before { content: "▸ "; color: var(--barva_text_slaby); }
.historie_snimek[open] > summary::before { content: "▾ "; }
.tabulka_historie { margin-top: 8px; font-size: 13px; }
.tabulka_historie td, .tabulka_historie th { padding: 7px 10px; }

/* Náběh uzlů osy při načtení – kaskádově zdola, ať se osa „vykreslí“. */
.historie_uzel {
    animation: historie_prichod 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.historie_uzel:nth-child(1) { animation-delay: 0.02s; }
.historie_uzel:nth-child(2) { animation-delay: 0.07s; }
.historie_uzel:nth-child(3) { animation-delay: 0.12s; }
.historie_uzel:nth-child(4) { animation-delay: 0.17s; }
.historie_uzel:nth-child(n+5) { animation-delay: 0.2s; }
@keyframes historie_prichod {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .historie_uzel { animation: none; }
    .historie_telo, .historie_sipka { transition: none; }
}

/* ----------------------------------------------------------------------------
   Formuláře
   ------------------------------------------------------------------------- */

.leciva_naseptavac {
    position: absolute;
    z-index: 1200;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--sklo_okraj);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--stin_silny);
}
.leciva_naseptavac[hidden] { display: none; }
.leciva_naseptavac_polozka {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--barva_text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.leciva_naseptavac_polozka:hover,
.leciva_naseptavac_polozka_aktivni {
    color: var(--barva_akcent_tmava);
    background: rgba(59, 111, 224, 0.1);
}
.formular_pole { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.formular_popisek { font-size: 13px; font-weight: 600; color: var(--barva_text_slaby); }
.formular_vstup {
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid rgba(63, 94, 168, 0.2);
    background: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    font-family: inherit;
    color: var(--barva_text);
    transition: border 0.2s, box-shadow 0.2s;
    width: 100%;
}
.formular_vstup:focus {
    outline: none;
    border-color: var(--barva_akcent);
    box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.15);
}
/* Ukazatel síly hesla (uzivatele.php): proužek + slovní hodnocení.
   Úroveň řídí JS třídou heslo_sila_uroven_N (0 skryté, 1 slabé, 2 střední, 3 silné). */
.heslo_sila { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.heslo_sila_pruh {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(63, 94, 168, 0.14);
    overflow: hidden;
}
.heslo_sila_vypln {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--barva_text_slaby);
    transition: width 0.2s, background 0.2s;
}
.heslo_sila_text { font-size: 12px; font-weight: 600; color: var(--barva_text_slaby); min-width: 46px; }
.heslo_sila_uroven_1 .heslo_sila_vypln { background: #d84a4a; }
.heslo_sila_uroven_1 .heslo_sila_text { color: #b23636; }
.heslo_sila_uroven_2 .heslo_sila_vypln { background: #e0902f; }
.heslo_sila_uroven_2 .heslo_sila_text { color: #9a6418; }
.heslo_sila_uroven_3 .heslo_sila_vypln { background: #2db478; }
.heslo_sila_uroven_3 .heslo_sila_text { color: #1c7a52; }
.heslo_shoda_text { font-size: 12px; font-weight: 600; color: #b23636; margin-top: 2px; }

.formular_textarea { min-height: 70px; resize: vertical; }
/* Auto-výška: JS přepočítává height podle obsahu, scrollbar tak nepotřebujeme. */
.formular_textarea[data-autovyska] { resize: none; overflow: hidden; }
.formular_textarea_velke { min-height: 130px; }

.formular_mrizka {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
}
.formular_pole_siroke { grid-column: 1 / -1; }
@media (max-width: 680px) { .formular_mrizka { grid-template-columns: 1fr; } }

/* Koupací dny – sedm zaškrtávacích „čipů“ Po–Ne. Skrytý nativní checkbox, stav
   nese vizuální čip (label). Zaškrtnutý den se zvýrazní barvou akcentu. */
.koupaci_volba { display: flex; flex-wrap: wrap; gap: 8px; }
.koupaci_den {
    position: relative;
    cursor: pointer;
    user-select: none;
}
.koupaci_den input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.koupaci_den_zkratka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(63, 94, 168, 0.2);
    background: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    font-weight: 600;
    color: var(--barva_text);
    transition: border 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.koupaci_den input:checked + .koupaci_den_zkratka {
    border-color: var(--barva_akcent);
    background: rgba(59, 111, 224, 0.14);
    color: var(--barva_akcent_tmava);
    font-weight: 700;
}
.koupaci_den input:focus-visible + .koupaci_den_zkratka {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.15);
}
@media (hover: hover) {
    .koupaci_den:hover .koupaci_den_zkratka { border-color: var(--barva_akcent); }
}

.formular_patka { margin-top: 12px; }

/* ----------------------------------------------------------------------------
   Sekce nebezpečí (archivace/smazání)
   ------------------------------------------------------------------------- */
.karta_nebezpeci { border: 1px solid rgba(210, 59, 59, 0.2); }
.nebezpeci_radek { display: flex; gap: 12px; flex-wrap: wrap; }
.vlozeny_formular { display: inline; margin: 0; }
.poznamka_text { color: var(--barva_text_slaby); font-size: 13px; margin: 14px 0 0; }

/* ----------------------------------------------------------------------------
   Správa uživatelů – rozbalovací úprava
   ------------------------------------------------------------------------- */
.bunka_akce_uziv { width: 120px; }
.rozbal summary { cursor: pointer; list-style: none; }
.rozbal summary::-webkit-details-marker { display: none; }
.rozbal_obsah {
    margin-top: 10px;
    padding: 16px;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 260px;
}
.mini_formular { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mini_formular .formular_vstup { flex: 1; min-width: 120px; }

/* ----------------------------------------------------------------------------
   Flash zprávy
   ------------------------------------------------------------------------- */
.flash {
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
}
.flash_uspech { background: rgba(45, 180, 120, 0.15); color: #1c7a52; border-color: rgba(45, 180, 120, 0.3); }
.flash_chyba { background: rgba(210, 59, 59, 0.12); color: #b62f2f; border-color: rgba(210, 59, 59, 0.3); }

.prazdno {
    padding: 48px 40px;
    text-align: center;
    color: var(--barva_text_slaby);
    border-radius: var(--radius);
}
.prazdno_ikona {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(59, 111, 224, 0.1);
    color: var(--barva_akcent);
    font-size: 28px;
}
.prazdno_ikona svg { width: 30px; height: 30px; display: block; }
.prazdno_nadpis { font-weight: 700; color: var(--barva_text); margin: 0 0 6px; font-size: 16px; }
.prazdno_text { margin: 0 0 6px; font-size: 14px; }

/* ----------------------------------------------------------------------------
   Přihlašovací stránka
   ------------------------------------------------------------------------- */
.telo_login { display: grid; place-items: center; min-height: 100vh; }
.login_obal { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 24px; }
.login_karta { padding: 38px; border-radius: var(--radius_velky); }
.login_znacka { text-align: center; margin-bottom: 26px; }
.login_logo { display: block; margin: 0 auto 18px; height: 54px; width: auto; max-width: 100%; }
.login_nadpis { font-size: 24px; margin: 0 0 4px; }
.login_podtitulek { color: var(--barva_text_slaby); margin: 0; font-size: 14px; }

/* ----------------------------------------------------------------------------
   Toast notifikace (vyjíždějí vpravo dole, z flash zpráv)
   ------------------------------------------------------------------------- */
.toast_obal {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: min(440px, calc(100vw - 48px));
}
.toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 16px;
    color: var(--barva_text);
    background: var(--sklo_pozadi);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--sklo_okraj);
    box-shadow: var(--stin_silny);
    animation: toast_prichod 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast.toast_odchod { animation: toast_odchod 0.3s ease forwards; }
.toast_ikona {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
}
.toast_uspech .toast_ikona { background: linear-gradient(140deg, #34c47f, #1c7a52); }
.toast_chyba .toast_ikona { background: linear-gradient(140deg, #f0746a, #d23b3b); }
@keyframes toast_prichod {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast_odchod {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}

/* ----------------------------------------------------------------------------
   Přístupnost: viditelný fokus z klávesnice + respekt k omezení pohybu
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
.menu_polozka:focus-visible {
    outline: 3px solid rgba(59, 111, 224, 0.55);
    outline-offset: 2px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----------------------------------------------------------------------------
   Sekce Zprávy – odznak v menu, dlaždice domovů, chat
   ------------------------------------------------------------------------- */

/* Bublina s počtem neodbavených úkolů u položky „Zprávy“ v menu. */
/* Odznak je polohovaný ABSOLUTNĚ na HORNÍ HRANU položky, vodorovně na střed,
   a zhruba z 1/3 přesahuje nad lištu menu. Nezvyšuje šířku tlačítka (žádný
   padding navíc) ani jeho výšku – fazolka (která kopíruje offsetHeight aktivní
   položky) tak zůstane u všech položek stejně vysoká. Vyšší z-index drží odznak
   ve vrstvě nad klouzavou fazolkou i nad aktivním (modrým) pill pozadím. */
.menu_odznak {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #e0563b;
    box-shadow: 0 4px 10px rgba(224, 86, 59, 0.35);
    /* Každých 5 s propracovaný bounce: dva odskoky s klesající amplitudou a
       jemným squash-and-stretch při dopadu (drahý „high-end" detail). Bounce
       proběhne na začátku cyklu, zbytek je klid. Kvůli squashi řídíme scaleX/Y
       zvlášť, transform-origin je pata odznaku, ať se „odráží" od tlačítka.
       translateX(-50%) drží vodorovný střed v každém keyframe. */
    transform-origin: 50% 100%;
    animation: menu_odznak_bounce 5s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}
@keyframes menu_odznak_bounce {
    /* --- klid --- */
    0%    { transform: translateX(-50%) translateY(0)      scale(1, 1); }
    /* --- 1. odskok: nádech, výskok, dopad se squashem --- */
    3%    { transform: translateX(-50%) translateY(1px)    scale(1.08, 0.92); }  /* podřep */
    8%    { transform: translateX(-50%) translateY(-5px)   scale(0.94, 1.08); }  /* stretch nahoře */
    13%   { transform: translateX(-50%) translateY(0)      scale(1.1, 0.9); }    /* squash při dopadu */
    /* --- 2. odskok: menší amplituda --- */
    18%   { transform: translateX(-50%) translateY(-2.5px) scale(0.97, 1.03); }
    22%   { transform: translateX(-50%) translateY(0)      scale(1.05, 0.95); }  /* jemný doskok */
    26%   { transform: translateX(-50%) translateY(0)      scale(1, 1); }        /* dosednutí */
    /* --- klid až do konce cyklu --- */
    100%  { transform: translateX(-50%) translateY(0)      scale(1, 1); }
}
/* Na aktivní (modré) položce odznak zesvětlíme, ať je čitelný. */
.menu_polozka_aktivni .menu_odznak { background: #fff; color: #c4452f; box-shadow: none; }

/* Zpět na přehled domovů. */
.odkaz_zpet { display: inline-block; font-size: 14px; margin-bottom: 4px; }

/* ----------------------------------------------------------------------------
   Chat – bubliny volně na stránce (žádné pozadí bloku), nejnovější nahoře.
   Užší boční rozestup, větší vertikální mezera = vzdušný, prémiový vzhled.
   ------------------------------------------------------------------------- */
/* Hlavička chatu domova – nadpis i popisek na střed, víc vzduchu pod ním. */
.panel_hlava_chat {
    text-align: center;
    justify-content: center;
    margin-bottom: 36px;
}
.panel_hlava_chat .odkaz_zpet { margin-bottom: 8px; }

/* Obal celého chatu (psaní + zprávy) – užší a vycentrovaný, ať není roztažený. */
.chat_obal {
    max-width: 900px;
    margin: 0 auto;
}
.chat_zpravy {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.chat_zprava { display: flex; }
.chat_zprava_moje { justify-content: flex-end; }
.chat_zprava_cizi { justify-content: flex-start; }

/* Bublina je samostatná skleněná karta přímo na stránce. Skleněný dojem dělá
   poloprůhledné pozadí + blur + jemné světlo na horní hraně (inset highlight),
   ne tvrdý plný okraj. */
.chat_bublina {
    max-width: 64%;
    padding: 14px 18px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42));
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: var(--stin_jemny), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Vlastní zprávy přihlášeného uživatele – jemně modré sklo, doprava. Okraj
   necháme poloprůhledný (sklo), ne plnou linku. */
.chat_zprava_moje .chat_bublina {
    background: linear-gradient(160deg, rgba(225, 236, 255, 0.66), rgba(208, 223, 255, 0.42));
    border-color: rgba(120, 165, 255, 0.4);
    box-shadow: 0 10px 30px rgba(63, 94, 168, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.chat_hlavicka {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
}
.chat_autor { font-weight: 700; color: var(--barva_text); font-size: 13px; }
.chat_cas { color: var(--barva_text_slaby); margin-left: auto; padding-left: 12px; }
.chat_text { font-size: 17px; line-height: 1.6; word-break: break-word; }

/* Fotka v bublině – zaoblený náhled, po kliknutí otevře plnou velikost. */
.chat_foto {
    display: block;
    width: 100%;
    height: 260px;
    margin-top: 10px;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 6px 18px rgba(31, 42, 68, 0.16);
    transition: transform 0.18s, box-shadow 0.18s;
}
.chat_foto:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(31, 42, 68, 0.22); }
.chat_foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chat_text + .chat_foto { margin-top: 12px; }

.odznak_ukol { background: rgba(224, 162, 59, 0.18); color: #97681f; margin-left: 0; }

.chat_ukol_patka { margin-top: 10px; }
.tlacitko_hotovo { font-size: 13px; }
.chat_hotovo_form { margin: 0; }
/* Vyřízeno – zelený štítek pro výrazné odlišení splněného úkolu. */
.chat_hotovo_znacka {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #1f6b41;
    background: rgba(90, 167, 118, 0.18);
    border: 1px solid rgba(90, 167, 118, 0.35);
    padding: 4px 12px;
    border-radius: 999px;
}

/* Mazání zprávy (jen správce) – decentní křížek v rohu bubliny, výraznější při hoveru. */
.chat_smazat_form { margin: 0; line-height: 0; }
.chat_smazat {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    color: var(--barva_text_slaby);
    opacity: 0.45;
    border-radius: 8px;
    transition: opacity 0.18s, color 0.18s, background 0.18s;
}
.chat_zprava:hover .chat_smazat { opacity: 0.8; }
.chat_smazat:hover { color: #d23b3b; opacity: 1; background: rgba(210, 59, 59, 0.1); }

/* Prázdný stav chatu (žádné zprávy). */
.chat_prazdno {
    text-align: center;
    padding: 40px 20px;
    color: var(--barva_text_slaby);
}

/* Nově dorazilá zpráva (AJAX) – krátké zvýraznění příchodu. */
/* Nová zpráva – výrazný příchod: spring náběh shora + krátký barevný záblesk
   kolem bubliny, ať je okamžitě jasné, že právě dorazila. */
.chat_zprava_nova { animation: chat_prichod 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chat_zprava_nova .chat_bublina { animation: chat_zableskni 1.5s ease-out; }
@keyframes chat_prichod {
    0%   { opacity: 0; transform: translateY(-18px) scale(0.94); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chat_zableskni {
    0%   { box-shadow: 0 0 0 3px rgba(96, 150, 255, 0.7), 0 12px 30px rgba(63, 94, 168, 0.3); }
    35%  { box-shadow: 0 0 0 4px rgba(96, 150, 255, 0.35), 0 12px 30px rgba(63, 94, 168, 0.22); }
    100% { box-shadow: var(--stin_jemny), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
    .chat_zprava_nova, .chat_zprava_nova .chat_bublina { animation: none; }
}

/* Vstup pro novou zprávu – nahoře nad chatem. Defaultně dlouhá „fazolka“
   (pilulka), která se s delším textem / novými řádky natáhne do výšky a její
   rohy zůstanou kulaté. Skleněný, vzdušný, high-end vzhled. */
.chat_vstup {
    display: flex;
    gap: 10px;
    align-items: center;             /* ikona i Odeslat zůstanou svisle na střed i při růstu pole */
    padding: 7px 7px 7px 24px;
    border-radius: 999px;            /* fazolka; při růstu textu se z ní stane měkká karta */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.66));
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--sklo_okraj);
    box-shadow: 0 12px 34px rgba(63, 94, 168, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    margin-bottom: 52px;             /* víc vzduchu pod polem = čistota */
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Zafokusovaná fazolka decentně „nadechne“ – jemný modrý glow, žádný tvrdý okraj. */
.chat_vstup:focus-within {
    border-color: rgba(96, 150, 255, 0.55);
    box-shadow: 0 14px 40px rgba(63, 94, 168, 0.18),
                0 0 0 4px rgba(96, 150, 255, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.chat_textarea {
    flex: 1;
    border: none;
    background: transparent;
    resize: none;                    /* výšku řídí JS podle obsahu */
    overflow-y: auto;
    max-height: 180px;               /* strop, pak naskočí scrollbar */
    padding: 12px 0;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: var(--barva_text);
}
.chat_textarea:focus { outline: none; }
.chat_textarea::placeholder { color: var(--barva_text_slaby); }

/* Odeslat jako kulaté tlačítko sedící na konci fazolky. */
.chat_odeslat {
    flex: none;
    border-radius: 999px;
    padding: 12px 28px;
    white-space: nowrap;
}

/* Sponka pro přílohu – kulaté jemné tlačítko vlevo ve fazolce. */
.chat_priloha {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 19px;
    color: var(--barva_text_slaby);
    transition: background 0.18s, color 0.18s, transform 0.18s;
}
.chat_priloha:hover { background: rgba(59, 111, 224, 0.1); color: var(--barva_akcent); transform: translateY(-1px); }
.chat_priloha_ikona { display: block; }
/* Skrytý file-input přílohy: vizuálně skrytý, ale NE display:none/hidden – na iOS
   Safari display:none input při tapu na label nespolehlivě otevírá dialog. Takto
   zůstává funkční a tap na ikonu spolehlivě nabídne i výběr z knihovny. */
.chat_skryty_vstup {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Mikrofon je <button>, ne <label> – srovnáme rámeček, kurzor i barvu s přílohou.
   Záporný margin přitáhne mikrofon blíž k ikoně fotky (gap kontejneru je 10px). */
.chat_mikrofon { border: none; background: transparent; cursor: pointer; color: var(--barva_text_slaby); margin-left: -10px; }
/* Aktivní nahrávání – červené, jemně tepe. */
.chat_mikrofon_nahrava { background: rgba(210, 59, 59, 0.14); color: #d23b3b; animation: mikrofon_tep 1.1s ease-in-out infinite; }
.chat_mikrofon_nahrava:hover { background: rgba(210, 59, 59, 0.2); color: #d23b3b; }
@keyframes mikrofon_tep { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .chat_mikrofon_nahrava { animation: none; } }

/* Stav/náhled nahrávky pod polem psaní. */
.chat_audio_nahled {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -28px 0 28px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--sklo_okraj);
}
.chat_audio_stav { font-size: 13px; color: var(--barva_text_slaby); font-weight: 600; }
.chat_audio_nahled .chat_nahled_zrusit { margin-left: auto; position: static; }
/* hidden musí přebít display z tříd výše (jinak se náhled ukazuje prázdný). */
.chat_nahled[hidden], .chat_audio_nahled[hidden] { display: none; }

/* ----------------------------------------------------------------------------
   Audio přehrávač – nízký, široký, čistý. Nativní ovládání lze v Chromu/Safari
   stylovat jen přes ::-webkit-media-controls-* (shadow DOM), proto ladíme hlavně
   panel (pozadí, zaoblení, výška). Ve Firefoxu vezme aspoň výšku a barvu.
   ------------------------------------------------------------------------- */
.chat_audio,
.chat_audio_nahled audio {
    display: block;
    width: 100%;
    height: 38px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--barva_text);
    outline: none;
}
.chat_audio { max-width: 100%; margin-top: 14px; }
/* Bublina s nahrávkou je širší – přehrávač potřebuje místo na čas i posuvník. */
.chat_zprava:has(.chat_audio) .chat_bublina { max-width: 78%; }
.chat_zprava:has(.chat_audio) .chat_bublina { min-width: 320px; }
.chat_audio_nahled audio { flex: 1; min-width: 0; max-width: none; }

/* Sladění nativního panelu s bublinou (WebKit/Blink). */
.chat_audio::-webkit-media-controls-panel,
.chat_audio_nahled audio::-webkit-media-controls-panel {
    background: rgba(255, 255, 255, 0.75);
    padding: 0 6px;
}
.chat_audio::-webkit-media-controls-enclosure,
.chat_audio_nahled audio::-webkit-media-controls-enclosure {
    border-radius: 999px;
    background: transparent;
}
/* Schováme méně podstatná tlačítka (přetáčení necháme přes lištu, hlasitost+menu pryč),
   ať je přehrávač čistší a delší se vejde čas i posuvník. */
.chat_audio::-webkit-media-controls-volume-control-container,
.chat_audio::-webkit-media-controls-mute-button,
.chat_audio::-webkit-media-controls-overflow-button {
    display: none;
}
/* V bublině moje (modré) zprávy ať je panel jemně světlý, ne tmavý default. */
.chat_zprava_moje .chat_audio { background: rgba(255, 255, 255, 0.9); }
.chat_zprava_moje .chat_audio::-webkit-media-controls-panel { background: rgba(255, 255, 255, 0.9); }
/* Vlevo přidá fazolce trochu místa, ať ikona nesedí na kraji. */
.chat_vstup { padding-left: 8px; }

/* Náhled vybrané fotky před odesláním – malá karta pod polem psaní. */
.chat_nahled {
    position: relative;
    display: inline-block;
    margin: -36px 0 28px;        /* vytáhneme blíž pod fazolku, pak vzduch před chatem */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--stin_jemny), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid var(--sklo_okraj);
    line-height: 0;
}
/* Skrytý náhled nesmí zůstat zobrazený – display: inline-block by jinak přebil
   atribut hidden a ukázal prázdný rozbitý obrázek. */
.chat_nahled[hidden] { display: none; }
.chat_nahled img { display: block; width: 200px; height: 200px; object-fit: cover; }
.chat_nahled_zrusit {
    position: absolute;
    top: 8px; right: 8px;
    width: 28px; height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    background: rgba(31, 42, 68, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.18s;
}
.chat_nahled_zrusit:hover { background: rgba(210, 59, 59, 0.85); }

/* ----------------------------------------------------------------------------
   Overlay loader (při odesílání / nahrávání fotky)
   ------------------------------------------------------------------------- */
.loader_obal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    background: rgba(31, 42, 68, 0.32);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.loader_obal[hidden] { display: none; }   /* aby hidden přebil display: grid */
/* Plynulý náběh (shodně s ostatními overlayi – třída se přidá až v dalším
   snímku přes otevriOverlay). Bez třídy je overlay průhledný. */
.loader_obal {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.loader_obal_otevreny { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .loader_obal { transition: none; }
}
.loader_kruh {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.55);
    border-top-color: var(--barva_akcent);
    animation: loader_tocse 0.8s linear infinite;
}
@keyframes loader_tocse { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .loader_kruh { animation-duration: 2s; }
}

/* Skleněná kartička s progresem nahrávání (fotka apod.). Ukazuje se místo
   samotného kolečka, když známe průběh (XHR upload.onprogress). */
.loader_karta {
    display: grid;
    justify-items: center;
    gap: 14px;
    min-width: 240px;
    max-width: min(88vw, 340px);
    padding: 22px 26px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 44px rgba(31, 42, 68, 0.28);
    color: var(--barva_text);
    text-align: center;
}
.loader_popisek {
    font-weight: 600;
    font-size: 0.98rem;
}
.loader_bar {
    display: block;
    /* Kartička je grid s justify-items:center – bez stretch by se span smrsknul
       na obsah (0 px) a výplň by nikdy nebyla vidět. */
    justify-self: stretch;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(31, 42, 68, 0.12);
    overflow: hidden;
}
.loader_bar_vypln {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--barva_akcent), var(--barva_akcent_tmava));
    transition: width 0.18s ease;
}
/* Neurčitý režim (tělo je odeslané, server zpracovává/ukládá fotku): výplň
   zůstává na dosaženém procentu a jen jemně „dýchá", takže bar není nikdy
   prázdný. Přes ni přejíždí světlý lesk, aby bylo poznat, že se pracuje. */
.loader_bar_neurcity .loader_bar_vypln {
    position: relative;
    animation: loader_bar_dychej 1.2s ease-in-out infinite;
}
.loader_bar_neurcity .loader_bar_vypln::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    animation: loader_bar_lesk 1.2s linear infinite;
}
@keyframes loader_bar_dychej {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}
@keyframes loader_bar_lesk {
    to { transform: translateX(100%); }
}
.loader_procenta {
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: var(--barva_text_slaby);
}
@media (prefers-reduced-motion: reduce) {
    .loader_bar_neurcity .loader_bar_vypln { animation-duration: 2.4s; }
}

/* ----------------------------------------------------------------------------
   Potvrzovací modal (mazání) – skleněná karta s ztmaveným blur pozadím.
   ------------------------------------------------------------------------- */
.modal_obal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
}
/* Skrytý modal nesmí zůstat v toku – display: grid by jinak přebil atribut
   hidden a neviditelný overlay by přes celou stránku chytal kliky. */
.modal_obal[hidden] { display: none; }

.modal_pozadi {
    position: absolute;
    inset: 0;
    background: rgba(31, 42, 68, 0.38);
    /* Blur je pritomny uz v zavrenem snimku; plynule se nabira pres opacity.
       Animace samotneho backdrop-filteru v Chromu/Edge umi doskocit az na konci. */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.26s ease;
    will-change: opacity;
}
.modal_obal_otevreny .modal_pozadi { opacity: 1; }
.modal {
    position: relative;
    width: min(420px, 100%);
    border-radius: var(--radius_velky);
    padding: 30px 30px 24px;
    text-align: center;
    /* Decentni nabeh: lehke priblizeni + posun zdola. */
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal_obal_otevreny .modal { opacity: 1; transform: translateY(0) scale(1); }

.modal_ikona {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 12px;
}
.modal_nadpis { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.modal_text { color: var(--barva_text_slaby); font-size: 14px; line-height: 1.55; margin: 0 0 22px; }
.modal_akce { display: flex; gap: 10px; justify-content: center; }
.modal_akce .tlacitko { min-width: 120px; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .modal_obal, .modal, .modal_pozadi { transition: none; }
    .modal_obal_otevreny .modal_pozadi { animation: none; }
}

/* ----------------------------------------------------------------------------
   Nástěnka (dashboard)
   ------------------------------------------------------------------------- */
.nastenka_karty {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
.nastenka_karta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 26px 28px;
    border-radius: var(--radius_velky);
    text-decoration: none;
    color: var(--barva_text);
    transition: transform 0.18s, box-shadow 0.18s;
}
.nastenka_karta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(31, 42, 68, 0.14); }
.nastenka_cislo { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; }
.nastenka_popis { color: var(--barva_text_slaby); font-size: 14px; font-weight: 600; }
.nastenka_odkaz { margin-top: 12px; color: var(--barva_akcent); font-weight: 600; font-size: 13px; }

/* Kompaktní řada dlaždic nahoře – na širších obrazovkách zůstává původní rytmus. */
.nastenka_karty_kompakt .nastenka_karta { padding: 16px 20px; }
.nastenka_karty_kompakt .nastenka_cislo { font-size: 32px; }
.nastenka_karty_kompakt .nastenka_odkaz { margin-top: 6px; }

/* Karta s neodbavenými úkoly upozorní teplým akcentem. */
.nastenka_karta_alert .nastenka_cislo { color: #d2622f; }

/* Stavová dlaždice (zdravotní triage) – téma --stav podle závažnosti jen
   obarví číslo a odkaz; jinak vypadá stejně jako ostatní dlaždice. */
.nastenka_karta_stav { --stav: 31, 138, 90; }
.nastenka_karta_stav .nastenka_cislo { color: rgb(var(--stav)); }
.nastenka_karta_stav .nastenka_odkaz { color: rgb(var(--stav)); }
.nastenka_karta_ok   { --stav: 31, 138, 90; }   /* zelená */
.nastenka_karta_var  { --stav: 200, 110, 40; }  /* oranžová */
.nastenka_karta_krit { --stav: 214, 64, 96; }   /* červená */

.nastenka_aktivita { border-radius: var(--radius_velky); padding: 24px 26px; }
.nastenka_aktivita .karta_hlava { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }

.nastenka_zpravy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nastenka_zprava + .nastenka_zprava { border-top: 1px solid rgba(63, 94, 168, 0.1); }
.nastenka_zprava_odkaz {
    display: block;
    padding: 14px 12px;
    margin: 0 -12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--barva_text);
    transition: background 0.16s;
}
.nastenka_zprava_odkaz:hover { background: rgba(255, 255, 255, 0.55); }
.nastenka_zprava_hlava { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 3px; }
.nastenka_zprava_autor { font-weight: 700; }
.nastenka_zprava_domov {
    font-size: 11px; font-weight: 600; color: var(--barva_akcent_tmava);
    background: rgba(59, 111, 224, 0.1); padding: 1px 8px; border-radius: 999px;
}
.nastenka_zprava_cas { margin-left: auto; color: var(--barva_text_slaby); }
.nastenka_zprava_text { font-size: 14px; color: var(--barva_text_slaby); }
.nastenka_zprava_foto { font-size: 13px; }
.odznak_hotovo { background: rgba(90, 167, 118, 0.18); color: #1f6b41; }

@media (max-width: 560px) {
    .nastenka_karty:not(.nastenka_karty_kompakt) { grid-template-columns: 1fr; }
    .nastenka_karty_kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
   RESPONZIVNÍ VRSTVA – tablet a mobil
   Sjednocené breakpointy:
     ≤ 900 px  (tablet/úzké okno) – hlavička se zalomí, dlaždice do 2/1 sloupců
     ≤ 620 px  (telefon)          – horní mobilní menu, tabulky jako karty
     ≤ 380 px  (malý telefon)     – doladění hustoty
   ========================================================================= */

/* ----------------------------------------------------------------------------
   ≤ 900 px – tablet / úzké okno
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .stranka { padding: 18px 16px 64px; }

    /* Hlavička se ze tří sloupců (logo | menu | profil) zalomí: logo + profil
       v jedné řadě nahoře, menu přes celou šířku pod nimi. */
    .hlavni_hlavicka {
        flex-wrap: wrap;
        gap: 12px 14px;
        margin: 8px 0 22px;
    }
    .menu {
        order: 3;
        width: 100%;
        justify-content: space-between;
        overflow-x: auto;            /* kdyby se položky přece jen nevešly */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .menu::-webkit-scrollbar { display: none; }
    .menu_polozka { flex: 1 1 auto; text-align: center; padding: 10px 14px; }
    .profil { margin-left: auto; }

    /* Header se zalomil (logo+profil nahoře, menu přes celou šířku pod nimi).
       Hlasové kolečko putuje do stejného řádku jako lišta menu, těsně před ni. */
    .menu_hlas { order: 3; }

    .nadpis { font-size: 24px; }
}

/* ----------------------------------------------------------------------------
   ≤ 620 px – telefon
   ------------------------------------------------------------------------- */
@media (max-width: 620px) {
    /* Obsah jede pod pevnou horní lištou; přidáváme prostor pro safe-area. */
    .stranka { padding: calc(72px + env(safe-area-inset-top, 0px)) 12px 40px; }

    .nastenka_karty_kompakt {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
    }
    .nastenka_karty_kompakt .nastenka_karta {
        min-width: 0;
        min-height: 88px;
        gap: 5px;
        padding: 12px 13px;
        border-radius: 18px;
    }
    .nastenka_karty_kompakt .nastenka_cislo {
        font-size: 28px;
        letter-spacing: 0;
    }
    .nastenka_karty_kompakt .nastenka_popis {
        font-size: 12px;
        line-height: 1.25;
    }
    .nastenka_karty_kompakt .nastenka_odkaz { display: none; }

    .hlavni_hlavicka {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 50;
        margin: 0;
        gap: 8px;
        flex-wrap: nowrap;
        align-items: center;
        padding: 10px 12px;
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        border-radius: 0 0 20px 20px;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(20px) saturate(165%);
        -webkit-backdrop-filter: blur(20px) saturate(165%);
        border-bottom: 1px solid var(--sklo_okraj);
        box-shadow: 0 10px 30px rgba(63, 94, 168, 0.16);
    }

    .znacka {
        display: inline-flex;
        flex: 1 1 auto;
        min-width: 0;
        order: 0;
    }
    .znacka_obrazek {
        height: 34px;
        max-width: min(168px, 42vw);
        object-fit: contain;
    }

    .mobil_menu_spoustec {
        display: inline-flex;
        order: 2;
        flex: none;
    }
    .mobil_menu_spoustec svg,
    .profil_spoustec .profil_ikona {
        width: 25px;
        height: 25px;
        opacity: 0.9;
        color: var(--barva_text_slaby);
    }

    /* Hlasové kolečko v horní liště: za logem (order 0), před hamburgerem
       (order 2) a profilem (order 3). Velikost srovnaná s hamburgerem (44px).
       Prefix .hlavni_hlavicka kvůli specificitě – základní blok .menu_hlas
       je v souboru až za media queries, jinak by rozměry přebil. */
    .hlavni_hlavicka .menu_hlas {
        order: 1;
        width: 44px;
        height: 44px;
        margin-right: 7px;   /* větší odstup od hamburgeru (přičítá se ke gapu 8px) */
    }

    .menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 12px;
        right: 12px;
        width: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(20px) saturate(165%);
        -webkit-backdrop-filter: blur(20px) saturate(165%);
        border: 1px solid var(--sklo_okraj);
        box-shadow: 0 20px 48px rgba(20, 40, 90, 0.18);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px) scale(0.98);
        transform-origin: top right;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        overflow: visible;
    }
    .hlavni_hlavicka.mobil_menu_otevreno .menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
    .menu .fazolka,
    .menu .duch { display: none; }
    .menu_polozka,
    .ma_fazolku .menu_polozka_aktivni {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        padding: 11px 13px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.72);
        background: rgba(255, 255, 255, 0.56);
        box-shadow: none;
        color: var(--barva_text_slaby);
        font-size: 14px;
        line-height: 1.15;
        text-align: left;
        white-space: nowrap;
    }
    .menu_polozka:hover { color: var(--barva_text); background: rgba(255, 255, 255, 0.85); }
    .menu_polozka_aktivni,
    .ma_fazolku .menu_polozka_aktivni {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.5);
        background: linear-gradient(140deg, #4f86ff, #2f59c4);
        box-shadow: 0 8px 18px rgba(59, 111, 224, 0.32);
    }
    /* V mobilním rozbalovacím panelu jsou položky na výšku – odznak vrátíme
       do řádku (vpravo), ne na horní hranu jako na vodorovné liště. */
    .menu_odznak {
        position: static;
        transform: none;
        margin-left: auto;
        animation: none;
    }

    .profil { order: 3; gap: 0; margin-left: 0; flex: none; }
    .profil_jmeno, .profil_role, .profil_sipka { display: none; }
    .profil::before { content: none; }
    .profil_spoustec {
        padding: 9px;
        width: 44px; height: 44px;
        background: transparent;
        border-color: transparent;
    }
    .profil_spoustec:hover,
    .profil_otevreno .profil_spoustec { background: transparent; }
    .profil_spoustec:hover .profil_ikona,
    .profil_otevreno .profil_ikona { color: var(--barva_text); }
    .profil_menu {
        position: fixed;
        top: calc(58px + env(safe-area-inset-top, 0px));
        right: 12px;
        min-width: 220px;
        max-width: calc(100vw - 24px);
    }

    /* --- Nadpisová hlava sekce --- */
    .panel_hlava {
        margin-bottom: 16px;
        gap: 12px;
    }
    .nadpis { font-size: 22px; }
    /* Hlavní akce („+ Nový klient“) přes celou šířku, ať se dobře trefí palcem. */
    .panel_hlava > .tlacitko_hlavni { width: 100%; }
    .panel_akce { width: 100%; }
    .panel_akce .tlacitko { flex: 1; }

    /* --- Filtry / abeceda / domovy: vzdušnější, plynou přes šířku --- */
    .abeceda { gap: 5px; padding: 8px 10px; }
    .pismeno { min-width: 38px; height: 38px; font-size: 14px; }

    .domovy_prepinace {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: 18px;
    }
    .domovy_prepinace::-webkit-scrollbar { display: none; }
    .domovy_prepinace .menu_polozka { white-space: nowrap; flex: 0 0 auto; }
    /* Na úzkém displeji nechá přepínač chatu plnou šířku (vodorovný scroll),
       místo centrování na obsah – jinak by se zúžil a špatně scrolloval.
       Specificita musí dorovnat .domovy_prepinace.zpravy_prepinace výše. */
    .domovy_prepinace.zpravy_prepinace { width: auto; justify-content: flex-start; }

    /* --- Tabulky → kartičky (label : hodnota) ---
       Převádějí se: seznam klientů, uživatelé a ČTECÍ tabulka medikace.
       Editační tabulka medikace (.tabulka_medikace_edit) se NEPŘEVÁDÍ – zůstává
       tabulkou ve vodorovném scrollu (7 sloupců párových vstupů). Společný
       selektor proto cílí „všechny .tabulka kromě editační medikace“. */
    .tabulka_obal { border-radius: var(--radius); overflow: visible; }
    .tabulka:not(.tabulka_medikace_edit) { display: block; }
    .tabulka:not(.tabulka_medikace_edit) thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .tabulka:not(.tabulka_medikace_edit) tbody { display: block; }

    .tabulka:not(.tabulka_medikace_edit) tbody tr {
        display: block;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(63, 94, 168, 0.1);
    }
    .tabulka:not(.tabulka_medikace_edit) tbody tr:last-child { border-bottom: none; }
    /* „display: block/grid" výše (u #vysledky až s ID-specificitou) přebíjí výchozí
       [hidden]{display:none}, takže by JS filtr (tr.hidden) v kartovém režimu řádky
       neskryl – proto [hidden] vynutíme s !important, ať vždy vyhraje. */
    .tabulka:not(.tabulka_medikace_edit) tbody tr[hidden] { display: none !important; }
    /* Hover „nadzvednutí“ na dotyku nemá smysl – zruším, ať řádek neposkakuje. */
    .tabulka tbody tr:hover { transform: none; box-shadow: none; background: transparent; }
    #vysledky .tabulka tbody tr:active { background: rgba(255, 255, 255, 0.6); }

    /* Buňka = řádek „popisek nad hodnotou". Stohované zarovnání vlevo je odolné
       i pro dlouhé hodnoty (např. „Uherské Hradiště") – nepřetékají vpravo. */
    .tabulka:not(.tabulka_medikace_edit) tbody td {
        display: block;
        padding: 4px 0;
        border-bottom: none;
        font-size: 15px;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    /* Popisek sloupce nad hodnotou (z data-popisek na buňce). */
    .tabulka:not(.tabulka_medikace_edit) tbody td[data-popisek]::before {
        content: attr(data-popisek);
        display: block;
        margin-bottom: 1px;
        color: var(--barva_text_slaby);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    /* Jméno klienta / lék = nadpis karty (přes celou šířku, větší). */
    .tabulka:not(.tabulka_medikace_edit) tbody .bunka_jmeno,
    .tabulka:not(.tabulka_medikace_edit) tbody .bunka_lek {
        font-size: 17px;
        font-weight: 700;
        padding-bottom: 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(63, 94, 168, 0.08);
    }
    .bunka_jmeno::before, .bunka_lek::before { display: none; }   /* u nadpisu popisek nechceme */

    /* Akce zarovnáme doleva a roztáhneme na šířku karty. */
    .bunka_akce { text-align: left; }
    .radek_akce { justify-content: flex-start; width: 100%; }
    .akce_ikona { width: 40px; height: 40px; }   /* větší dotykový cíl */

    /* === Seznam klientů (#vysledky) – KOMPAKTNÍ ŘÁDKY ===
       Přebíjí obecné kartové zobrazení výše. Řádek je 2sloupcová mřížka:
         ┌─────────────────────────┬──────────┐
         │ Příjmení Jméno          │  ikony   │
         │ Domov · Léky            │ (vpravo) │
         └─────────────────────────┴──────────┘
       Cíl: co nejvíc klientů na obrazovku, využít i pravou půlku. */
    #vysledky .tabulka tbody tr {
        display: grid;
        /* domov | léky | pružná mezera | ikony. Domov+léky drží těsně vlevo,
           „1fr" mezera je odsune od ikon vpravo. */
        grid-template-columns: minmax(0, auto) auto 1fr auto;
        grid-template-areas:
            "jmeno jmeno jmeno akce"
            "domov leky  .     akce";
        align-items: center;
        column-gap: 10px;
        row-gap: 3px;
        padding: 10px 14px;
    }
    #vysledky .tabulka .bunka_jmeno {
        grid-area: jmeno;
        font-size: 16px;
        font-weight: 700;
        /* zrušíme oddělovač/odsazení z obecného kartového nadpisu */
        padding: 0;
        margin: 0;
        border-bottom: none;
        line-height: 1.25;
        min-width: 0;
    }
    /* Druhý řádek: Domov vlevo (utne se s …), Léky hned vedle. Bez popisků. */
    #vysledky .tabulka td[data-popisek="Domov"] {
        grid-area: domov;
        padding: 0;
        font-size: 13px;
        color: var(--barva_text_slaby);
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #vysledky .tabulka td[data-popisek="Info"] {
        grid-area: leky;
        justify-self: start;
        padding: 0;
        font-size: 13px;
        min-width: 0;
        white-space: nowrap;
    }
    /* Tečka oddělující domov a info-ikony v meta-řádku. */
    #vysledky .tabulka td[data-popisek="Info"]::before {
        content: "·";
        display: inline-block;
        margin-right: 8px;
        color: var(--barva_text_slaby);
        opacity: 0.6;
    }
    #vysledky .tabulka td[data-popisek="Domov"]::before { display: none; }
    #vysledky .tabulka .bunka_info .info_ikony { font-size: 13px; gap: 10px; }

    /* Ikony akcí vpravo, přes oba řádky, kompaktní. */
    #vysledky .tabulka .bunka_akce {
        grid-area: akce;
        align-self: center;
    }
    #vysledky .tabulka .radek_akce { width: auto; justify-content: flex-end; gap: 4px; }
    #vysledky .tabulka .akce_ikona { width: 34px; height: 34px; }

    /* Mini-graf „Vývoj" na kompaktním mobilním seznamu skryjeme – zdravotní stav
       nesou info-ikony a křivka by rozbila dvouřádkovou mřížku (stejný přístup
       jako skrytí sparkline v triage na úzkém mobilu). */
    #vysledky .tabulka .bunka_trend { display: none; }

    /* V kartě léku ukážeme jen časy, kdy se lék podává – prázdné dávky („—")
       i prázdnou poznámku skryjeme, ať je karta krátká a dobře se scanuje.
       (Na desktopu zůstávají jako buňky tabulky a drží zarovnání sloupců.) */
    .tabulka.tabulka_medikace tbody td.davka_nema,
    .tabulka:not(.tabulka_medikace_edit) tbody td.bunka_prazdna { display: none !important; }
    /* Pojistka: kdyby měl lék úplně prázdné dávkování, ať karta není „holá". */
    .tabulka_medikace tbody tr .bunka_lek { margin-bottom: 4px; }

    /* --- Editační tabulka medikace zůstává tabulkou, ale ve vodorovném scrollu.
           7 sloupců párových vstupů se na karty rozumně nepřevede. --- */
    #formular_medikace { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tabulka_medikace_edit { min-width: 640px; }
    .medikace_akce { flex-direction: column; }
    .medikace_akce .tlacitko { width: 100%; }

    /* --- Karty detailu klienta --- */
    .karta { padding: 20px; border-radius: var(--radius); }
    .udaje { grid-template-columns: 1fr; gap: 4px 0; }
    .udaj_popisek { margin-top: 8px; }
    .udaj_hodnota_text { padding-top: 0; }

    /* Sekce nebezpečí – tlačítka pod sebe, na celou šířku. */
    .nebezpeci_radek { flex-direction: column; }
    .nebezpeci_radek .vlozeny_formular,
    .nebezpeci_radek .tlacitko { width: 100%; }

    /* --- Chat – víc místa pro bubliny, lepené pole psaní --- */
    .chat_bublina { max-width: 86%; }
    .chat_zprava:has(.chat_audio) .chat_bublina { max-width: 92%; min-width: 0; }
    .chat_text { font-size: 16px; }

    /* Pole psaní je nad výpisem (nejnovější zprávy jsou hned pod ním), proto ho
       lepíme pod horní lištu menu – při scrollu seznamem zůstává po ruce. */
    .chat_vstup {
        position: sticky;
        top: calc(66px + env(safe-area-inset-top, 0px));   /* pod nalepenou lištou */
        z-index: 30;
        padding-left: 6px;
        margin-bottom: 24px;
    }
    .chat_odeslat { padding: 12px 20px; }
    .panel_hlava_chat { margin-bottom: 24px; }

    /* --- Toasty: přes šířku displeje, u dolního okraje --- */
    .toast_obal {
        right: 12px; left: 12px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        max-width: none;
    }
    .toast { padding: 14px 18px; font-size: 15px; }

    /* --- Login – menší vnitřní odsazení karty --- */
    .login_obal { padding: 16px; }
    .login_karta { padding: 28px 22px; }

    /* --- Modal blíž k okrajům --- */
    .modal { width: 100%; padding: 24px 20px 20px; }
    .modal_akce { flex-direction: column-reverse; }
    .modal_akce .tlacitko { width: 100%; }

    /* Buňka „Akce“ v tabulce uživatelů/pečovatelů: ikony akcí zarovnané vlevo
       pod popiskem (na mobilu je řádek dvousloupcová mřížka). */
    .tabulka .bunka_akce_uziv { width: auto; }
    .bunka_akce_uziv .radek_akce { justify-content: flex-start; }

    /* === Tabulka uživatelů / pečovatelů – KARTA ===
       Přebíjí obecné kartové zobrazení výše. Cíl: klidná, moderní karta místo
       „úřednické" tabulky. Řádek = mřížka 2 sloupců:
         ┌───────────────────────────────┬────────┐
         │ Jméno (nadpis)                │ ikony  │  ← ikony svisle vystředěné
         │ [chip Role] [chip Domov] …    │ (pill) │     přes obě řady
         └───────────────────────────────┴────────┘
       Meta pole jsou vzdušné „chipy" (jemné zaoblené štítky), ne text oddělený
       svislými čárkami – čte se to měkčeji. Ikony akcí jsou seskupené v jemném
       pillu vpravo, vystředěné přes celou výšku karty. */
    .tabulka_obal_sekce { overflow: hidden; }
    /* Řádek = karta. Flex-wrap: jméno přes celou šířku nahoře, pod ním meta-chipy
       v zalomitelné řadě. Ikony akcí jsou absolutně napolohované vpravo (svisle
       vystředěné) – 4 samostatná meta <td> nejde dát do jednoho grid regionu,
       flex-wrap je poskládá vedle sebe přirozeně. */
    .tabulka_obal_sekce .tabulka tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 14px 96px 14px 16px;   /* vpravo místo pro pill s ikonami */
        column-gap: 6px;
        row-gap: 8px;
        transition: background 0.15s ease;
    }
    .tabulka_obal_sekce .tabulka tbody tr:active { background: rgba(255, 255, 255, 0.55); }

    /* --- Tabulka pečovatelů je vnořená v .karta (má vlastní 20px padding),
           takže by karty byly odsazené a „panel v panelu". Roztáhneme obal na
           plnou šířku karty (záporný margin), aby řádky lícovaly s nadpisem
           „Pečovatelé" a využily celou šířku – stejně vzdušně jako tabulka
           uživatelů výše. Řádkový levý padding pak srovná jméno pod nadpis. --- */
    .karta .tabulka_obal_sekce {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 4px;
    }
    .karta .tabulka_obal_sekce .tabulka tbody tr {
        padding-left: 20px;
        padding-right: 96px;
    }
    /* Jemná dělící linka mezi kartami pečovatelů (obal nemá vlastní pozadí). */
    .karta .tabulka_obal_sekce .tabulka tbody tr {
        border-top: 1px solid rgba(63, 94, 168, 0.08);
    }
    .karta .tabulka_obal_sekce .tabulka tbody tr:first-child { border-top: none; }

    /* Jméno = nadpis karty. Odznak „vy" zůstane inline vedle jména. */
    .tabulka_obal_sekce .tabulka .bunka_jmeno {
        flex: 1 0 100%;
        padding: 0;
        margin: 0;
        border-bottom: none;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.2;
        min-width: 0;
    }
    .tabulka_obal_sekce .tabulka .bunka_jmeno .odznak { font-size: 11px; vertical-align: 1px; }

    /* Meta pole → vzdušné chipy (jemný zaoblený štítek: titěrný label + hodnota),
       zalamují se vedle sebe do jedné řady. Měkčí než text oddělený svislicemi. */
    .tabulka_obal_sekce .tabulka td[data-popisek="Role"],
    .tabulka_obal_sekce .tabulka td[data-popisek="Domov"],
    .tabulka_obal_sekce .tabulka td[data-popisek="2FA"],
    .tabulka_obal_sekce .tabulka td[data-popisek="Zařízení"] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 11px;
        font-size: 13px;
        color: var(--barva_text);
        background: rgba(63, 94, 168, 0.06);
        border-radius: 999px;
        min-width: 0;
    }
    /* Label chipu (z data-popisek): titěrné verzálky. */
    .tabulka_obal_sekce .tabulka td[data-popisek="Role"]::before,
    .tabulka_obal_sekce .tabulka td[data-popisek="Domov"]::before,
    .tabulka_obal_sekce .tabulka td[data-popisek="2FA"]::before,
    .tabulka_obal_sekce .tabulka td[data-popisek="Zařízení"]::before {
        display: inline;
        content: attr(data-popisek);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--barva_text_slaby);
    }
    /* Odznaky uvnitř chipů (Zapnuto/Vypnuto, počet zařízení) bez extra marginu. */
    .tabulka_obal_sekce .tabulka td .odznak { font-size: 11px; margin: 0; padding: 1px 7px; }

    /* Ikony akcí (tužka/koš) seskupené v jemném pillu vpravo, svisle vystředěné
       přes celou výšku karty. Absolutní pozice → nezabírají vlastní řádek dole;
       místo jim drží pravý padding řádku výše. */
    .tabulka_obal_sekce .tabulka .bunka_akce_uziv {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        padding: 0;
    }
    /* Popisek „Akce" u ikonového sloupce nechceme. Selektor dorovnává specificitu
       obecného „td[data-popisek]::before". */
    .tabulka_obal_sekce .tabulka tbody td.bunka_akce_uziv[data-popisek]::before { display: none; }
    .tabulka_obal_sekce .tabulka .bunka_akce_uziv .radek_akce {
        justify-content: flex-end;
        gap: 4px;
        padding: 3px;
        border-radius: 12px;
        background: rgba(63, 94, 168, 0.05);
    }
    .tabulka_obal_sekce .tabulka .akce_ikona {
        width: 32px; height: 32px;
        background: rgba(255, 255, 255, 0.85);
        border-color: transparent;
    }

    /* Mini-formuláře v modálu úpravy uživatele – prvky pod sebe. */
    .mini_formular { flex-direction: column; align-items: stretch; }
    .mini_formular .formular_vstup { min-width: 0; }
}

/* ----------------------------------------------------------------------------
   Fotodokumentace klienta (jen správce)
   ------------------------------------------------------------------------- */
.odznak_jen_spravce { background: rgba(59, 111, 224, 0.12); color: var(--barva_akcent_tmava); margin-left: 6px; }

.tlacitko_ikona_nebezpeci:hover {
    color: #d23b3b;
    background: rgba(210, 59, 59, 0.1);
    border-color: rgba(210, 59, 59, 0.35);
}

/* Hlava sekce: nadpis vlevo, tlačítko „Přidat fotku" vpravo nahoře
   (karta_hlava je space-between). Odznak „jen správce" je v patce sekce
   zarovnaný do pravého dolního rohu karty. */
.karta_fotodok .karta_hlava { gap: 10px; }
.fotodok_pridat { flex: none; }
.fotodok_patka { display: flex; justify-content: flex-end; margin-top: 14px; }
.fotodok_patka .odznak_jen_spravce { margin-left: 0; }

/* Karta fotodokumentace: prvek s backdrop-filter (.sklo) ořezává absolutně
   pozicované potomky ke svému boxu → rozbalený popup kalendáře se usekne.
   Vypneme tu backdrop-filter a nahradíme krycím pozadím (vizuálně téměř totožné),
   čímž clipping zmizí a popup se vykreslí celý. */
.karta_fotodok {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
    overflow: visible;
}

/* Nahrávací formulář žije v modalu „Přidat fotku" – pole pod sebou, tlačítka
   nahrání/zrušení v patce (.modal_akce). */
.fotodok_nahravani { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 0; }
.fotodok_nahravani .formular_pole { min-width: 0; }
.fotodok_nahravani .formular_vstup {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}

/* Vlastní vzhled výběru souboru: nativní input úplně vizuálně schováme (ne přes
   opacity-overlay, ten na iPadu/iOS Safari nespolehlivě chytá tapy). Celý blok je
   uvnitř <label>, takže tap na tlačítko otevře nativní dialog přes propojení labelu –
   to iOS zvládá spolehlivě a nabídne i výběr z knihovny (bez atributu capture). */
.fotodok_soubor {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fotodok_soubor_vstup {
    /* Vizuálně skryté, ale stále funkční a přístupné (ne display:none). */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.fotodok_soubor_tlacitko {
    white-space: nowrap;
    cursor: pointer;
}
.fotodok_soubor_vstup:focus-visible ~ .fotodok_soubor_tlacitko {
    border-color: var(--barva_akcent);
    box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.15);
}
.fotodok_soubor_nazev {
    font-size: 13px;
    color: var(--barva_text_slaby);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.fotodok_soubor_nazev.fotodok_soubor_ma { color: var(--barva_text); font-weight: 600; }

/* Galerie miniatur – řazeno chronologicky (řadí PHP), responzivní mřížka. */
.fotodok_galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.fotodok_prazdno { margin-top: 16px; }

.fotodok_polozka {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--sklo_okraj);
    display: flex;
    flex-direction: column;
    position: relative;
}
.fotodok_nahled {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(31, 42, 68, 0.06);
}
.fotodok_nahled img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.fotodok_nahled:hover img { transform: scale(1.04); }

.fotodok_popis { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.fotodok_datum { font-size: 13px; font-weight: 700; }
.fotodok_text { font-size: 13px; color: var(--barva_text_slaby); line-height: 1.4; }

/* Nadpisy skupin galerie – fotky se člení podle kategorie defektu, fotky
   bez defektu jdou do „Nezařazeno" (viz zobraz_fotodokumentaci v klient.php). */
.fotodok_skupina_nadpis {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0;
    font-size: 14px;
    font-weight: 700;
}
.fotodok_skupina_nadpis + .fotodok_galerie { margin-top: 10px; }
.fotodok_skupina_pocet {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--barva_text_slaby);
    background: rgba(31, 42, 68, 0.07);
    border: 1px solid var(--sklo_okraj);
}

/* Tlačítka úprav/smazání – jemně schovaná, na dotykových zařízeních vidět vždy. */
.fotodok_akce {
    position: absolute;
    top: 8px; right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}
.fotodok_polozka:hover .fotodok_akce,
.fotodok_polozka:focus-within .fotodok_akce { opacity: 1; }
.dotyk .fotodok_akce { opacity: 1; }
.fotodok_akce .tlacitko_ikona { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.9); }

/* Modal přidání i editace fotky: formulář zarovnaný vlevo (modal je jinak na
   střed). Stejně jako u karty fotodokumentace: vypnout backdrop-filter (.sklo),
   ať rozbalený popup kalendáře v modalu není ořezán k boxu modalu. */
#modal_fotodok .modal,
#modal_fotodok_novy .modal {
    width: min(560px, 100%);
    text-align: left;
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
#modal_fotodok.modal_obal_otevreny .modal,
#modal_fotodok_novy.modal_obal_otevreny .modal,
#modal_prahy.modal_obal_otevreny .modal,
#modal_prahy_klient.modal_obal_otevreny .modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}
#modal_fotodok .modal_nadpis,
#modal_fotodok_novy .modal_nadpis { text-align: left; }
#modal_fotodok .modal_akce,
#modal_fotodok_novy .modal_akce { justify-content: flex-end; margin-top: 6px; }

/* Lightbox – velká fotka přes celou obrazovku. */
.fotodok_lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(20, 28, 48, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.fotodok_lightbox[hidden] { display: none; }
.fotodok_lightbox_otevreny { opacity: 1; }
.fotodok_lightbox_ramecek {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
/* Plocha fotky: drží spinner na místě fotky. Swipe na dotyku nesmí rolovat. */
.fotodok_lightbox_plocha {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 60px;
    min-height: 60px;
    touch-action: pan-y;
}
.fotodok_lightbox_obrazek {
    max-width: 100%;
    max-height: 82vh;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    object-fit: contain;
    transition: opacity 0.18s ease;
}
/* Načítání: fotka ustoupí spinneru (starou nechceme ukazovat jako novou). */
.fotodok_lightbox_nacita .fotodok_lightbox_obrazek { opacity: 0.25; }
.fotodok_lightbox_kruh {
    position: absolute;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    animation: loader_tocse 0.8s linear infinite;
}
.fotodok_lightbox_nacita .fotodok_lightbox_kruh { opacity: 1; }

/* Přílet nové fotky ve směru listování – lehké dojetí zvenčí, ne skok. */
@keyframes fotodok_lightbox_prilet_vpred {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fotodok_lightbox_prilet_zpet {
    from { opacity: 0; transform: translateX(-26px); }
    to   { opacity: 1; transform: none; }
}
.fotodok_lightbox_prilet_vpred { animation: fotodok_lightbox_prilet_vpred 0.28s ease-out; }
.fotodok_lightbox_prilet_zpet  { animation: fotodok_lightbox_prilet_zpet 0.28s ease-out; }

.fotodok_lightbox_popis {
    color: #fff;
    font-size: 14px;
    text-align: center;
    max-width: 600px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* Počítadlo „3 / 12" – plovoucí pilulka dole, ať nepodpírá popis fotky. */
.fotodok_lightbox_pocitadlo {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    pointer-events: none;
}
.fotodok_lightbox_pocitadlo[hidden] { display: none; }

.fotodok_lightbox_zavri {
    position: absolute;
    top: 16px; right: 20px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}
.fotodok_lightbox_zavri:hover { background: rgba(255, 255, 255, 0.3); }

/* Šipky listování – skleněné kruhy u okrajů, mimo fotku. */
.fotodok_lightbox_sip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.fotodok_lightbox_sip[hidden] { display: none; }
.fotodok_lightbox_sip svg {
    width: 24px; height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fotodok_lightbox_sip_zpet  { left: 18px; }
.fotodok_lightbox_sip_vpred { right: 18px; }
.fotodok_lightbox_sip:hover {
    background: rgba(255, 255, 255, 0.26);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.fotodok_lightbox_sip_zpet:hover  { transform: translateY(-50%) translateX(-2px); }
.fotodok_lightbox_sip_vpred:hover { transform: translateY(-50%) translateX(2px); }
.fotodok_lightbox_sip:active { background: rgba(255, 255, 255, 0.34); }
.fotodok_lightbox_sip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
/* Na úzkých displejích si fotka bere celou šířku – šipky posadíme na ni. */
@media (max-width: 640px) {
    .fotodok_lightbox_sip { width: 44px; height: 44px; }
    .fotodok_lightbox_sip_zpet  { left: 8px; }
    .fotodok_lightbox_sip_vpred { right: 8px; }
}

/* Vnořený label pro výběr souboru (input + tlačítko), kliknutí kdekoli v něm
   otevře nativní dialog. Tlačítko „Vyfotit" stojí vedle NĚJ (mimo label),
   aby v labelu nebyly dva ovladatelné prvky. */
.fotodok_soubor_vyber { display: inline-flex; cursor: pointer; }

/* --- Porovnání dvou fotek (posuvník před/po) ----------------------------- */

/* Štíhlá lišta nad galerií: tlačítko porovnání vlevo. Vysvětlení porovnání
   nese title tlačítka, ne viditelný text. */
.fotodok_galerie_lista {
    display: flex;
    align-items: center;
    gap: 10px 18px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.fotodok_tlacitko_porovnat,
.fotodok_tlacitko_email { padding: 7px 14px; font-size: 13px; }
/* Dokud nejsou vybrané právě dvě fotky, tlačítko je neaktivní a zašedlé. */
.fotodok_tlacitko_porovnat:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
}
.fotodok_tlacitko_porovnat:disabled:hover { background: rgba(255, 255, 255, 0.7); }

/* Modal odeslání e-mailem: varování (chybí RČ) a zašedlé tlačítko Odeslat. */
.fotodok_email_varovani { color: #c4701f; font-weight: 600; margin-bottom: 14px; }
#modal_fotodok_email .tlacitko_hlavni:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
}

/* Tlačítko „Odeslat": za běhu odesílání se ikona letadla schová a místo ní se
   točí spinner; text se přepne na „Odesílám…". */
.fotodok_email_spinner { display: none; }
.fotodok_email_odesila { cursor: default; }
.fotodok_email_odesila .fotodok_email_ikona { display: none; }
.fotodok_email_odesila .fotodok_email_spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: none;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fotodok_email_tocit 0.7s linear infinite;
}
@keyframes fotodok_email_tocit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .fotodok_email_odesila .fotodok_email_spinner { animation: none; }
}

/* Zaškrtávátko výběru k porovnání – levý horní roh fotky, viditelné vždy
   (výchozí výběr dvou nejnovějších musí být vidět hned). */
.fotodok_vyber {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    cursor: pointer;
}
.fotodok_vyber_vstup {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.fotodok_vyber_znak {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--sklo_okraj);
    /* Ikona porovnání „mluví" – naznačuje účel, tak ji necháme vidět i nezaškrtnutou
       (jemně šedou). Po zaškrtnutí zbělá na modrém pozadí. */
    color: var(--barva_text_slaby);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fotodok_vyber_znak svg { width: 15px; height: 15px; }
.fotodok_vyber_vstup:checked + .fotodok_vyber_znak {
    background: var(--barva_akcent);
    border-color: var(--barva_akcent);
    color: #fff;
}
.fotodok_vyber_vstup:focus-visible + .fotodok_vyber_znak {
    box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.3);
}

/* Overlay porovnání i in-app fotoaparátu – sdílený celoobrazovkový podklad. */
.fotodok_porovnani,
.fotodok_fotak {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 16px;
    background: rgba(20, 28, 48, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.fotodok_porovnani[hidden],
.fotodok_fotak[hidden] { display: none; }
.fotodok_porovnani_otevreny,
.fotodok_fotak_otevreny { opacity: 1; }

/* Scéna porovnání: obě fotky přes sebe, horní (starší) ořezaná zprava.
   Rozměr (aspect-ratio + width) dopočítá JS podle novější fotky. */
.fotodok_porovnani_scena {
    position: relative;
    width: min(92vw, 101vh);
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: #10182c;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    touch-action: none; /* tažení posuvníku nesmí rolovat stránku */
    cursor: ew-resize;
}
.fotodok_porovnani_obrazek {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
/* Obal starší fotky: nese ořez posuvníku (clip-path), aby hrana ořezu stála
   na místě, i když se samotná fotka uvnitř posouvá/otáčí/zvětšuje. */
.fotodok_porovnani_pred_obal {
    position: absolute;
    inset: 0;
}
.fotodok_porovnani_pred { will-change: transform; }
/* Dělicí čára: vlas s jemnou září, aby hrana četla i na světlé fotce. */
.fotodok_porovnani_delic {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.55) 0%,
        #fff 12%,
        #fff 88%,
        rgba(255, 255, 255, 0.55) 100%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
    transition: opacity 0.2s ease;
}
/* Madlo: skleněný kruh s dvojšipkou. Prstenec kolem ukazuje, že se s ním táhne;
   při najetí a tažení lehce povyroste. */
.fotodok_porovnani_madlo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.fotodok_porovnani_madlo svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.fotodok_porovnani_scena:hover .fotodok_porovnani_madlo {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.fotodok_porovnani_scena:active .fotodok_porovnani_madlo {
    transform: translate(-50%, -50%) scale(0.96);
}
@media (prefers-reduced-motion: reduce) {
    .fotodok_porovnani_madlo { transition: none; }
}

/* Loader scény: fotky v plné velikosti se stahují klidně pár vteřin, do té
   doby by scéna byla černá a prázdná. Sedí přes ni, dokud nedojedou obě. */
.fotodok_porovnani_nacitani {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(16, 24, 44, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.fotodok_porovnani_nacita .fotodok_porovnani_nacitani { display: flex; }
/* Dokud se stahuje, schováme i ovládání – není co porovnávat ani táhnout. */
.fotodok_porovnani_nacita .fotodok_porovnani_delic,
.fotodok_porovnani_nacita .fotodok_porovnani_stitek { opacity: 0; }
.fotodok_porovnani_nacita .fotodok_porovnani_scena { cursor: progress; }
.fotodok_porovnani_nacitani_text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
}
.fotodok_porovnani_stitek {
    position: absolute;
    bottom: 10px;
    z-index: 1;
    max-width: 44%;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20, 28, 48, 0.72);
    color: #fff;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.fotodok_porovnani_stitek_pred { left: 10px; }
.fotodok_porovnani_stitek_po { right: 10px; }
.fotodok_porovnani_napoveda {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    text-align: center;
}

/* Patka porovnání: nápověda + přepínač režimu dolaďování. */
.fotodok_porovnani_patka {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    flex-wrap: wrap;
    max-width: 92vw;
}
.fotodok_porovnani_patka[hidden] { display: none; }

/* Tlačítka na tmavém overlayi (přepínač, reset, hotovo). */
.fotodok_porovnani_tlacitko {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.fotodok_porovnani_tlacitko:hover { background: rgba(255, 255, 255, 0.25); }
.fotodok_porovnani_tlacitko_hlavni {
    background: var(--barva_akcent);
    border-color: var(--barva_akcent);
}
.fotodok_porovnani_tlacitko_hlavni:hover {
    background: var(--barva_akcent);
    filter: brightness(1.12);
}

/* Panel dolaďování zarovnání starší fotky (posun/zvětšení/otočení). */
.fotodok_porovnani_ladeni {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 92vw;
}
.fotodok_porovnani_ladeni[hidden] { display: none; }
.fotodok_porovnani_ladeni_radek {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px 18px;
    flex-wrap: wrap;
}
.fotodok_porovnani_ladeni_pole {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
}
.fotodok_porovnani_ladeni_pole input { width: 150px; }

/* Aktivní režim dolaďování: starší fotka průhledně přes celou novější
   (ořez i dělicí čára jsou schované), tažení hýbe fotkou. */
.fotodok_porovnani_ladi .fotodok_porovnani_pred { opacity: 0.55; }
.fotodok_porovnani_ladi .fotodok_porovnani_delic { display: none; }
.fotodok_porovnani_ladi .fotodok_porovnani_scena { cursor: move; }

/* --- In-app fotoaparát (getUserMedia + poloprůhledná předloha) ----------- */

.fotodok_fotak_scena {
    position: relative;
    min-width: min(92vw, 420px);
    min-height: 200px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #10182c;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.fotodok_fotak_video {
    display: block;
    max-width: 92vw;
    max-height: 68vh;
}
/* Předloha (poslední fotka) leží přes video se stejným object-fit: contain –
   vyfocený snímek je celý záběr videa, takže překryv odpovídá výsledku. */
.fotodok_fotak_duch {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0.45;
    pointer-events: none;
}
.fotodok_fotak_chyba {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 20px;
    color: #fff;
    font-size: 14px;
    text-align: center;
}
.fotodok_fotak_ovladani {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    width: min(92vw, 560px);
}
.fotodok_fotak_pruhlednost {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
}
.fotodok_fotak_pruhlednost input { width: 100%; max-width: 180px; }
.fotodok_fotak_spoust {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.fotodok_fotak_spoust:not(:disabled):hover { background: rgba(255, 255, 255, 0.55); }
.fotodok_fotak_spoust:not(:disabled):active { transform: scale(0.94); }
.fotodok_fotak_spoust:disabled { opacity: 0.45; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .fotodok_lightbox,
    .fotodok_porovnani,
    .fotodok_fotak { transition: none; }
    /* Listování v lightboxu bez přeletu fotky; spinner se točí pomaleji
       (loader_kruh si zpomalení řeší sám v sekci loaderu). */
    .fotodok_lightbox_prilet_vpred,
    .fotodok_lightbox_prilet_zpet { animation: none; }
    .fotodok_lightbox_sip { transition: none; }
    .fotodok_lightbox_sip:hover { transform: translateY(-50%); }
    .fotodok_lightbox_kruh { animation-duration: 2s; }
}

/* ----------------------------------------------------------------------------
   ≤ 380 px – malý telefon, dolazení hustoty
   ------------------------------------------------------------------------- */
@media (max-width: 380px) {
    .stranka { padding: calc(70px + env(safe-area-inset-top, 0px)) 10px 40px; }
    .hlavni_hlavicka { padding-left: 10px; padding-right: 10px; gap: 6px; }
    .znacka_obrazek { max-width: min(148px, 38vw); }
    .mobil_menu_spoustec { width: 40px; height: 40px; min-height: 40px; padding: 8px; }
    .mobil_menu_spoustec svg { width: 24px; height: 24px; }
    .hlavni_hlavicka .menu_hlas { width: 40px; height: 40px; }
    .menu { left: 10px; right: 10px; gap: 7px; padding: 9px; }
    .menu_polozka { min-height: 42px; font-size: 13px; padding: 10px 11px; }
    .menu_odznak { min-width: 17px; height: 17px; margin-left: 6px; }
    .profil_spoustec { width: 40px; height: 40px; padding: 8px; }
    .profil_spoustec .profil_ikona { width: 24px; height: 24px; }
    .nastenka_karty_kompakt { gap: 8px; }
    .nastenka_karty_kompakt .nastenka_karta { min-height: 84px; padding: 11px 10px; }
    .nastenka_karty_kompakt .nastenka_cislo { font-size: 26px; }
    .nastenka_karty_kompakt .nastenka_popis { font-size: 11.5px; }

    .nadpis { font-size: 20px; }
    .pismeno { min-width: 34px; height: 36px; padding: 0 6px; }
}

/* ============================================================================
   Dnes – denní checklist péče
   ========================================================================= */

/* Odznak v menu pro „Dnes" je varovný (žlutooranžový), ať se vizuálně liší od
   červeného odznaku neodbavených zpráv. */
.menu_odznak_alert { background: #e0902f; box-shadow: 0 4px 10px rgba(224, 144, 47, 0.35); }
.menu_polozka_aktivni .menu_odznak_alert { background: #fff; color: #a6661a; box-shadow: none; }

/* Upozornění nad tabulkou (i na nástěnce). */
/* Nedokončené úkony – rozbalitelné přes tlačítko (místo výrazné hlášky). */
.dnes_nedokoncene { margin-bottom: 18px; }

.dnes_nedokoncene_prepinac {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dnes_nedokoncene_prepinac svg { flex: none; }
/* Počet nedokončených – jemná pilulka s číslem. */
.dnes_nedokoncene_pocet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(217, 98, 43, 0.14);
    color: #c4452f;
    font-size: 12.5px;
    font-weight: 700;
}
/* Šipka se otočí při rozbalení. */
.dnes_nedokoncene_sip { transition: transform 0.2s ease; }
.dnes_nedokoncene_otevreno .dnes_nedokoncene_sip { transform: rotate(180deg); }

/* Rozbalovací tělo – animovaná výška. */
.dnes_nedokoncene_telo {
    overflow: hidden;
    transition: height 0.28s ease;
}
.dnes_nedokoncene_telo[hidden] { display: none; }
.dnes_nedokoncene_napoveda {
    margin: 12px 0 10px;
    font-size: 13px;
    color: var(--barva_text_slaby);
}

.dnes_nedokoncene_list { list-style: none; margin: 0; padding: 0; }
.dnes_nedokoncene_polozka + .dnes_nedokoncene_polozka { margin-top: 8px; }

/* Jeden nedokončený den jako klikací karta vedoucí na ten den v Úkonech. */
.dnes_nedokoncene_odkaz {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--barva_text);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(63, 94, 168, 0.12);
    border-left: 3px solid #e0902f;
    transition: background 0.16s, border-color 0.16s, transform 0.1s;
}
.dnes_nedokoncene_odkaz:hover {
    background: rgba(255, 255, 255, 0.85);
    border-left-color: #d9622b;
    transform: translateX(2px);
}
.dnes_nedokoncene_hlava {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 7px;
}
.dnes_nedokoncene_jmeno { font-weight: 700; }
.dnes_nedokoncene_domov {
    font-size: 11px; font-weight: 600;
    color: var(--barva_akcent_tmava);
    background: rgba(59, 111, 224, 0.1);
    padding: 1px 8px; border-radius: 999px;
}
.dnes_nedokoncene_datum {
    margin-left: auto;
    font-size: 13px; font-weight: 600;
    color: var(--barva_text_slaby);
}
/* Chybějící úkoly jako drobné chipy. */
.dnes_nedokoncene_chybi { display: flex; flex-wrap: wrap; gap: 6px; }
.dnes_nedokoncene_chip {
    font-size: 12px; font-weight: 600;
    color: #c4452f;
    background: rgba(217, 98, 43, 0.1);
    padding: 2px 9px; border-radius: 999px;
}
.dnes_nedokoncene_kdo {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    color: var(--barva_text_slaby);
}

/* Lišta s navigací dní + souhrnem. */
.dnes_nastroje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.dnes_navigace { display: flex; align-items: center; gap: 8px; }
.dnes_datum_popisek { font-weight: 700; font-size: 15px; min-width: 150px; text-align: center; }
.dnes_datum_dnes { color: var(--barva_akcent_tmava); }
.dnes_souhrn { color: var(--barva_text_slaby); font-size: 14px; font-weight: 600; }
.dnes_souhrn strong { color: var(--barva_text); }
.tlacitko_zakazane { opacity: 0.4; pointer-events: none; cursor: default; }
.dnes_jen_cteni {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(107, 119, 150, 0.1);
    color: var(--barva_text_slaby);
    font-size: 13px;
    font-weight: 600;
}

/* Tabulka checklistu. Hlavičky úkolů úzké a vystředěné. */
/* Hlavičky úkolů vystředěné. Klient a Domov vlevo – ať ikona sedí nad daty
   (jména i názvy domovů jsou zarovnané doleva). Vyšší specificita (thead)
   přebije obecné .tabulka th. */
.dnes_tabulka thead th { text-align: center; }
.dnes_tabulka thead .dnes_th_klient,
.dnes_tabulka thead .dnes_th_domov { text-align: left; }
.dnes_th_ukol { font-size: 12px; white-space: normal; line-height: 1.25; }
/* Hlavička jako ikona (šetří šířku) – text je k dispozici jen pro čtečky/tooltip. */
.dnes_th_ukol_ikona { color: var(--barva_text_slaby); }
.dnes_th_ukol_ikona .dnes_th_ukol_text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Klikací ikona hlavičky (zobrazí nápovědu). Dostatečný dotykový cíl. */
.dnes_th_napoveda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dnes_th_napoveda:hover,
.dnes_th_napoveda:focus-visible {
    background: rgba(59, 111, 224, 0.1);
    color: var(--barva_akcent);
    outline: none;
}
.dnes_th_napoveda svg { display: block; }
.dnes_th_napoveda svg.dnes_th_ikona_poznamka { width: 16px; height: 16px; }

/* Bublina nápovědy – plovoucí nad ikonou, s šipkou dolů. */
.dnes_napoveda_bublina {
    position: fixed;
    z-index: 1200;
    transform: translate(-50%, -100%) translateY(4px);
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(31, 42, 68, 0.95);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(20, 40, 90, 0.28);
    opacity: 0;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.dnes_napoveda_bublina[hidden] { display: none; }
.dnes_napoveda_bublina_otevrena {
    opacity: 1;
    transform: translate(-50%, -100%) translateY(0);
}
/* Šipka dolů pod bublinou. */
.dnes_napoveda_bublina::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px; height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(31, 42, 68, 0.95);
    border-radius: 0 0 2px 0;
}
@media (prefers-reduced-motion: reduce) {
    .dnes_napoveda_bublina { transition: opacity 0.16s ease; }
    .dnes_napoveda_bublina,
    .dnes_napoveda_bublina_otevrena { transform: translate(-50%, -100%); }
}
.dnes_bunka { text-align: center; vertical-align: middle; }
.dnes_neaktualni { color: var(--barva_text_slaby); opacity: 0.4; }

/* Sloupec klienta dostane dost místa, ať se jméno i fajfka vejdou na jeden řádek. */
.dnes_tabulka .bunka_jmeno { min-width: 190px; white-space: nowrap; }
/* Jméno je odkaz na kartu klienta. Fajfka drží pohromadě (nezalomí se na nový
   řádek). inline-flex kolabuje mezeru mezi příjmením a jménem → vrátíme ji gapem. */
.dnes_jmeno {
    display: inline-flex;
    align-items: center;
    gap: 0.34em;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.dnes_jmeno:hover { color: var(--barva_akcent); }
.dnes_jmeno .dnes_znacka_hotovo { margin-left: 0; }

/* V Úkonech řádek NEpozvedáme při hoveru – nevhodné pro klikání do checkboxů
   (cíl by „ujížděl" pod kurzorem). Potlačíme obecný spring-hover tabulky. */
.dnes_tabulka tbody tr:hover {
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.45);
}

/* Splněný řádek = jemné zelené podbarvení + zobrazená fajfka u jména. */
.dnes_radek_hotovo { background: rgba(90, 167, 118, 0.12); }
/* Hover nad splněným řádkem NEsmí spadnout do bílé (matoucí) – zůstane zelený,
   jen o odstín tmavší. Musí přebít obecný .dnes_tabulka tbody tr:hover výše. */
.dnes_tabulka tbody tr.dnes_radek_hotovo:hover { background: rgba(90, 167, 118, 0.18); }
.dnes_znacka_hotovo {
    display: none;
    margin-left: 6px;
    color: #1f6b41;
    font-weight: 800;
}
.dnes_radek_hotovo .dnes_znacka_hotovo { display: inline; }

/* Velký, příjemný checkbox (skrytý nativní input + vlastní rámeček). */
.dnes_check { display: inline-flex; cursor: pointer; }
/* Ikona úkolu v checkboxu – jen pro mobilní dlaždice (na desktopu je název ve
   sloupci, v tabulce ji nechceme). Zapíná ji media query v mobilní kartě. */
.dnes_check_ikona { display: none; }
.dnes_check input { position: absolute; opacity: 0; width: 0; height: 0; }
.dnes_check_box {
    width: 26px; height: 26px;
    border-radius: 8px;
    border: 2px solid rgba(63, 94, 168, 0.35);
    background: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.dnes_check_box::after {
    content: "✓";
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.12s, transform 0.12s;
}
.dnes_check input:checked + .dnes_check_box {
    background: var(--barva_akcent);
    border-color: var(--barva_akcent);
}
.dnes_check input:checked + .dnes_check_box::after { opacity: 1; transform: scale(1); }
.dnes_check input:focus-visible + .dnes_check_box { box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.3); }
.dnes_check input:disabled + .dnes_check_box { opacity: 0.45; cursor: default; }
.dnes_check:active .dnes_check_box { transform: scale(0.92); }

/* Bilance tekutin: select + volné pole. */
.dnes_tekutiny { display: inline-flex; align-items: center; gap: 6px; }
.dnes_tekutiny_select,
.dnes_tekutiny_vlastni {
    border: 1px solid rgba(63, 94, 168, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    font: inherit;
    color: var(--barva_text);
    padding: 6px 8px;
}
.dnes_tekutiny_select { min-width: 92px; }
.dnes_tekutiny_vlastni { width: 78px; }
.dnes_tekutiny_select:focus,
.dnes_tekutiny_vlastni:focus {
    outline: none;
    border-color: var(--barva_akcent);
    box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.18);
}

/* Slovní stav: tlačítko v buňce otevře modal s editací (pole se do mřížky nevejde).
   Tlačítko mění vzhled podle toho, zda už poznámka existuje. */
.dnes_stav_tlacitko {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(63, 94, 168, 0.29);
    border-radius: 999px;
    /* NEprůhledné pozadí – na splněném (zeleném) řádku se přes tlačítko nesmí
       propsat zelená (jinak by tlačítko působilo nazelenale / modrozeleně). */
    background: #f4f6fb;
    color: #5c6885;  /* ~15 % tmavší než --barva_text_slaby (#6b7796) */
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dnes_stav_tlacitko:hover { color: var(--barva_text); border-color: var(--barva_akcent); }
.dnes_stav_tlacitko:disabled { opacity: 0.5; cursor: default; }
.dnes_stav_tlacitko_ma {
    color: var(--barva_akcent_tmava);
    border-color: rgba(59, 111, 224, 0.4);
    background: #e6ecfb;  /* neprůhledná světle modrá (bez propisu zelené řádku) */
}

/* Pole v modálu poznámky. */
.dnes_stav_modal_pole { resize: vertical; line-height: 1.4; min-height: 90px; }
#stav_modal_jmeno { color: var(--barva_akcent_tmava); font-weight: 700; margin-top: -6px; }

/* --- Tlačítko „Měření" v buňce sekce Úkony (vzor: tlačítko poznámky) --- */
.dnes_mereni_tlacitko {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 11px;
    border: 1px solid rgba(63, 94, 168, 0.29);
    border-radius: 999px;
    /* NEprůhledné pozadí – viz .dnes_stav_tlacitko (zelený řádek nesmí prosvítat). */
    background: #f4f6fb;
    color: #5c6885;  /* ~15 % tmavší než --barva_text_slaby (#6b7796) */
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dnes_mereni_tlacitko svg { flex: none; }
.dnes_mereni_tlacitko_text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dnes_mereni_tlacitko:hover { color: var(--barva_text); border-color: var(--barva_akcent); }
.dnes_mereni_tlacitko:disabled { opacity: 0.5; cursor: default; }
.dnes_mereni_tlacitko_ma {
    color: var(--barva_akcent_tmava);
    border-color: rgba(59, 111, 224, 0.4);
    background: #e6ecfb;  /* neprůhledná světle modrá (bez propisu zelené řádku) */
}

/* --- Modal měření --- */
#mereni_modal_jmeno { color: var(--barva_akcent_tmava); font-weight: 700; margin-top: -6px; }
.modal_mereni { max-width: 460px; }
.mereni_mrizka {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin: 4px 0 18px;
}
.mereni_pole { margin: 0; }
/* Tlak zabere celý řádek (dvě políčka vedle sebe). */
.mereni_pole_tlak { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; min-width: 0; }
.mereni_jednotka { color: var(--barva_text_slaby); font-weight: 500; font-size: 0.85em; }

/* --- Tlačítko potvrzení léků (eMAR) – stejný vzhled jako tlačítko měření --- */
.dnes_leky_tlacitko {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 11px;
    border: 1px solid rgba(63, 94, 168, 0.29);
    border-radius: 999px;
    background: #f4f6fb;   /* neprůhledné – zelený řádek nesmí prosvítat */
    color: #5c6885;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dnes_leky_tlacitko svg { flex: none; }
.dnes_leky_tlacitko_text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dnes_leky_tlacitko:hover { color: var(--barva_text); border-color: var(--barva_akcent); }
.dnes_leky_tlacitko:disabled { opacity: 0.5; cursor: default; }
.dnes_leky_tlacitko_ma {
    color: var(--barva_akcent_tmava);
    border-color: rgba(59, 111, 224, 0.4);
    background: #e6ecfb;
}

/* --- Modal potvrzení léků --- */
#leky_modal_jmeno { color: var(--barva_akcent_tmava); font-weight: 700; margin-top: -6px; }
.modal_leky { max-width: 480px; }
/* Hromadná akce „Vše podáno" – jen tlačítko, bez obalového boxu (šetří místo). */
.dnes_leky_vse {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 0 12px;
    border-color: rgba(63, 94, 168, 0.35);
    color: var(--barva_akcent_tmava, #2b4a8f);
    font-weight: 700;
}
.dnes_leky_vse svg { flex: none; }
.dnes_leky_vse:hover { border-color: var(--barva_akcent); background: rgba(63, 94, 168, 0.08); }
/* Vše podáno: tlačítko zezelená, ať je hned vidět, že už není co řešit. */
.dnes_leky_vse_hotovo {
    border-color: rgba(31, 157, 85, 0.45);
    color: #147a3f;
    background: #e3f5ea;
}
.dnes_leky_vse_hotovo svg { color: var(--barva_uspech, #1f9d55); }
.dnes_leky_vse_hotovo:hover { border-color: #1f9d55; background: #d5f0e0; }
.dnes_leky_seznam {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 52vh; overflow-y: auto;
    margin-bottom: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 111, 224, 0.35) transparent;
}
.dnes_leky_seznam::-webkit-scrollbar { width: 10px; }
.dnes_leky_seznam::-webkit-scrollbar-track { background: transparent; }
.dnes_leky_seznam::-webkit-scrollbar-thumb {
    background: rgba(59, 111, 224, 0.35);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.dnes_leky_seznam::-webkit-scrollbar-thumb:hover { background: rgba(59, 111, 224, 0.6); }
.dnes_lek_radek {
    padding: 10px 12px;
    border: 1px solid var(--barva_ramecek, rgba(63, 94, 168, 0.18));
    border-radius: 12px;
    background: var(--barva_povrch, #fafbfe);
}
.dnes_lek_hlava { display: flex; align-items: center; gap: 8px 10px; margin-bottom: 8px; flex-wrap: wrap; }
.dnes_lek_nazev { font-weight: 700; }
/* Dávkování jako mřížka slotů R/P/V/V2 – odsazená doprava od názvu léku. */
.dnes_lek_davky { display: inline-flex; gap: 4px; margin-left: auto; }
.dnes_lek_davka_slot {
    display: inline-flex; flex-direction: column; align-items: center;
    min-width: 26px; padding: 2px 4px;
    border-radius: 7px;
    background: rgba(63, 94, 168, 0.05);
    line-height: 1.2;
}
.dnes_lek_davka_popis {
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--barva_text_slaby);
    opacity: 0.7;
}
.dnes_lek_davka_hod {
    font-size: 10px; font-variant-numeric: tabular-nums;
    color: var(--barva_text_slaby); opacity: 0.4;  /* prázdný slot: tlumená tečka */
}
/* Vyplněný slot: výrazné pozadí + tučná modrá číslice, ať dávka „vyskočí". */
.dnes_lek_davka_slot_ma { background: #e6ecfb; }
.dnes_lek_davka_slot_ma .dnes_lek_davka_popis { opacity: 1; color: var(--barva_akcent_tmava); }
.dnes_lek_davka_slot_ma .dnes_lek_davka_hod {
    font-size: 12px; font-weight: 800; opacity: 1;
    color: var(--barva_akcent_tmava);
}
.dnes_lek_volby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dnes_lek_volba {
    padding: 8px 6px;
    border: 1px solid rgba(63, 94, 168, 0.25);
    border-radius: 9px;
    background: #f4f6fb;
    color: #5c6885;
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.dnes_lek_volba:hover { border-color: var(--barva_akcent); }
/* Aktivní stav barevně: podáno zelené, nepodáno červené, nepodává se šedé. */
.dnes_lek_volba_podano.dnes_lek_volba_aktivni {
    background: #e3f5ea; border-color: #1f9d55; color: #147a3f;
}
.dnes_lek_volba_nepodano.dnes_lek_volba_aktivni {
    background: #fbe6e6; border-color: #d64545; color: #a32020;
}
.dnes_lek_volba_nepodava.dnes_lek_volba_aktivni {
    background: #eceef3; border-color: #94a0b8; color: #5c6885;
}
.dnes_lek_duvod { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dnes_lek_duvod[hidden] { display: none; }
.dnes_lek_duvod_chipy { display: flex; flex-wrap: wrap; gap: 5px; }
.dnes_lek_duvod_chip {
    padding: 4px 10px;
    border: 1px solid rgba(63, 94, 168, 0.25);
    border-radius: 999px;
    background: #f4f6fb; color: #5c6885;
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.dnes_lek_duvod_chip:hover { border-color: var(--barva_akcent); }
.dnes_lek_duvod_chip_aktivni { background: #fbe6e6; border-color: #d64545; color: #a32020; }
.dnes_lek_duvod_pole { font-size: 13px; }
@media (max-width: 480px) {
    .dnes_lek_volby { grid-template-columns: 1fr; }
}

/* --- Nástěnka: vynechané léky (červená vlajka) --- */
.nastenka_vynechane_leky .karta_nadpis { color: #a32020; }
.nastenka_vynechane_okno { color: var(--barva_text_slaby); font-weight: 500; font-size: 0.8em; }
.nastenka_vynechane_ikona { font-size: 16px; }
.nastenka_vynechane_duvod { color: #a32020; }
.nastenka_vynechane_datum { color: var(--barva_text_slaby); font-size: 0.85em; }
.mereni_tlak_vstupy { display: flex; align-items: center; gap: 10px; }
.mereni_tlak_vstupy .formular_vstup { text-align: center; }
.mereni_tlak_lomeno { color: var(--barva_text_slaby); font-size: 20px; font-weight: 300; }
.modal_akce_mezera { flex: 1; }

/* --- Hlasové zadání měření (Web Speech API) ---
   Sekce je v HTML skrytá; JS ji ukáže, jen když prohlížeč rozpoznávání umí.
   Při poslechu tlačítko zčervená a pulzuje; doplněná pole bliknou zeleně. */
.mereni_hlas {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    text-align: center; gap: 10px 14px;
    margin: -6px 0 14px;
}
.mereni_hlas[hidden] { display: none; }
.mereni_hlas_tlacitko {
    display: inline-flex; align-items: center; gap: 8px;
    flex: 0 0 auto;
    padding: 9px 16px; border: none; border-radius: 999px;
    background: var(--barva_akcent); color: #fff;
    font-size: 14px; font-weight: 700; cursor: pointer;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.mereni_hlas_tlacitko.mereni_hlas_posloucha {
    background: #e0556f;
    animation: mereni_hlas_puls 1.2s ease-out infinite;
}
/* Tep: prstenec vyrazí z tlačítka, roztáhne se do 14 px a vybledne. Kompromis
   mezi původním sotva znatelným blikem a výraznější verzí – aktivní diktování
   upoutá, ale nekřičí. */
@keyframes mereni_hlas_puls {
    0%   { box-shadow: 0 0 0 0 rgba(224, 85, 111, 0.35); }
    70%  { box-shadow: 0 0 0 14px rgba(224, 85, 111, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 85, 111, 0); }
}
/* flex-basis 100% zalomí přepis na vlastní řádek pod tlačítko, jakmile se
   nevejde vedle něj (viz .mereni_hlas_tlacitko flex: 0 0 auto) – řeší to
   i bez media query, ne jen na úzkém mobilu. */
.mereni_hlas_prepis {
    flex: 1 1 100%;
    font-size: 14.5px; line-height: 1.5;
    color: var(--barva_text_slaby); min-width: 0;
}
/* Efekt polí právě doplněných diktováním: pole pulzne (jemné zvětšení),
   rozzáří se zeleným prstencem a podbarvení pomalu vybledne – zatímco JS
   nechává číslo „dojet" count-up animací k cílové hodnotě. Restart animace
   při dalším diktátu řeší JS vynuceným reflow. */
.mereni_vstup_diktovano {
    animation: mereni_diktovano 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
@keyframes mereni_diktovano {
    0% {
        background: rgba(43, 179, 163, 0.4);
        box-shadow: 0 0 0 0 rgba(43, 179, 163, 0.55);
        transform: scale(1);
    }
    30% {
        transform: scale(1.06);
        box-shadow: 0 0 0 12px rgba(43, 179, 163, 0);
    }
    60% {
        background: rgba(43, 179, 163, 0.22);
        transform: scale(1);
    }
    100% {
        background: transparent;
        box-shadow: 0 0 0 0 rgba(43, 179, 163, 0);
        transform: scale(1);
    }
}
/* --- Označení polí, která umí hlas (modal měření rány) ---
   Diktovat jde jen do části formuláře (rozměry, spodina, okraje, bolest,
   poznámka) – exsudát se vybírá ručně. Pole se proto značí u popisku ikonou
   mikrofonu a samotný vstup dostane jemný akcentní rámeček s tečkou mikrofonu
   v rohu. Vše svítí, jen když JS potvrdí podporu rozpoznávání (.modal_ma_hlas
   na modalu), aby značka neslibovala nedostupnou funkci. */
.pole_hlas_znacka { display: none; }
.modal_ma_hlas .pole_hlas_znacka {
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: -2px;
    width: 16px; height: 16px; margin-left: 2px;
    border-radius: 50%;
    background: rgba(59, 111, 224, 0.12);
    color: var(--barva_akcent);
}
.modal_ma_hlas .pole_hlas_znacka svg { width: 10px; height: 10px; }

/* Vstupy, do kterých hlas píše: akcentní rámeček + tenký proužek u levé hrany,
   ať je „hlasová" část formuláře čitelná na první pohled i bez čtení popisků.
   Proužek je gradient nad bílým podkladem vstupu (žádný pseudo-prvek – ten na
   <input> nejde), text proto o kousek odsadíme, aby na proužek nedosedl. */
.modal_ma_hlas .formular_vstup.pole_hlas {
    border-color: rgba(59, 111, 224, 0.38);
    padding-left: 18px;
    background:
        linear-gradient(to right, rgba(59, 111, 224, 0.55) 0 3px, transparent 3px),
        linear-gradient(rgba(59, 111, 224, 0.06), rgba(59, 111, 224, 0.06)),
        rgba(255, 255, 255, 0.75);
}
.modal_ma_hlas .formular_vstup.pole_hlas::placeholder { color: rgba(63, 94, 168, 0.5); }
.modal_ma_hlas .formular_vstup.pole_hlas:focus { border-color: var(--barva_akcent); }

/* Legenda pod tlačítkem Diktovat („Hlasem lze vyplnit pole označená 🎤").
   Značka uvnitř se zobrazí stejným pravidlem jako u popisků – celá sekce
   .mereni_hlas je stejně skrytá, dokud JS nepotvrdí podporu. */
.mereni_hlas_legenda {
    flex: 1 1 100%;
    font-size: 12.5px; line-height: 1.5;
    color: var(--barva_text_slaby);
}

/* Text jen pro odečítače obrazovky (vizuálně skryto, ale čte se). */
.jen_ctecka {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Při omezení pohybu žádné pulzování ani blikání. */
@media (prefers-reduced-motion: reduce) {
    .mereni_hlas_tlacitko.mereni_hlas_posloucha { animation: none; }
    .mereni_vstup_diktovano { animation: none; background: rgba(43, 179, 163, 0.2); }
}

@media (max-width: 520px) {
    .mereni_mrizka { grid-template-columns: 1fr; }
    .mereni_hlas { gap: 8px; }
    .mereni_hlas_tlacitko { padding: 12px 16px; }
}

/* Sekce „Stav klienta ke dni" – dvousloupcový grid:
   vlevo nadpis + úkony + naměřené hodnoty (.report_hlavni), vpravo kalendář,
   a MEDIKACE přes celou šířku dole (využije prázdné místo pod kalendářem).
   report_telo má display:contents, takže jeho děti vstupují přímo do gridu. */
.karta_report_telo {
    display: grid;
    grid-template-columns: 1fr 300px;
    column-gap: 24px;
    row-gap: 8px;
    align-items: start;
}
.report_telo { display: contents; }
.report_hlavni { grid-column: 1; grid-row: 1; min-width: 0; }
.report_kalendar { grid-column: 2; grid-row: 1; }
/* Medikace + patička „naposledy zapsáno" přes celou šířku pod gridem. */
.report_medikace { grid-column: 1 / -1; }
.report_meta { grid-column: 1 / -1; }
/* Prázdný stav (žádný report) zabere celý grid. */
.report_telo > .report_hlavni:only-child,
.report_hlavni:only-child { grid-column: 1 / -1; }

/* Kalendář v reportu klienta: čistý styl – splývá se sekcí, bez rámečku a stínu.
   Zvýšená specificita (.karta_report_telo …), aby přebila základní .kalendar,
   která je v souboru dál a jinak by vrátila šedé pozadí a rámeček. */
.karta_report_telo .report_kalendar {
    margin: 0; max-width: none; padding: 0 4px;
    background: transparent; border: 0; box-shadow: none;
}
.karta_report_telo .kalendar_den,
.karta_report_telo .kalendar_prazdne { height: 38px; }
.karta_report_telo .kalendar_nazev_dne { font-size: 11px; padding-bottom: 4px; }
.karta_report_telo .kalendar_titulek { font-size: 14px; }
.karta_report_telo .kalendar_sip { width: 30px; height: 30px; font-size: 17px; }
.karta_report_telo .kalendar_den { font-size: 13px; }

@media (max-width: 700px) {
    /* Úzký displej: jeden sloupec, kalendář nad obsahem. */
    .karta_report_telo { grid-template-columns: 1fr; }
    .report_hlavni { grid-column: 1; grid-row: 2; }
    .report_kalendar { grid-column: 1; grid-row: 1; }
    .report_medikace, .report_meta { grid-column: 1; }
}

/* --- Grafy vývoje měření na kartě klienta --- */
.karta_grafy .karta_hlava { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px; }

/* Přepínače veličin – stejný pásek + klouzavá fazolka jako výběr domova
   (.domovy_prepinace). Barevné odlišení nese barva aktivního tlačítka (--barva),
   ikona je SVG. Pilulka (fazolka) přebírá barvu aktivní veličiny z JS. */
.graf_prepinace {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: var(--sklo_pozadi);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--sklo_okraj);
    box-shadow: var(--stin_jemny);
    margin: 0 0 18px;
}
.graf_prepinac {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--barva_text_slaby);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s;
}
.graf_prepinac:hover { color: var(--barva); }
.graf_prepinac_ikona {
    width: 16px; height: 16px; flex: none;
}
/* Aktivní přepínač – plné pozadí v barvě veličiny (čitelný bílý text).
   V režimu fazolky (ma_fazolku) pozadí přebírá klouzavá pilulka. */
.graf_prepinac_aktivni,
.graf_prepinac_aktivni:hover {
    color: #fff;
    background: var(--barva);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--barva) 40%, transparent);
}
.graf_prepinace.ma_fazolku .graf_prepinac_aktivni,
.graf_prepinace.ma_fazolku .graf_prepinac_aktivni:hover {
    background: transparent;
    box-shadow: none;
}

/* Plocha grafu – SVG roztažené na šířku, tooltip plovoucí nad ním. */
.graf_plocha { position: relative; width: 100%; }
.graf_svg {
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 280;
    overflow: visible;
    display: block;
}
.graf_osa_text { fill: var(--barva_text_slaby); font-size: 11px; font-weight: 500; }
.graf_cara { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)); }
.graf_bod { transition: r 0.12s; cursor: pointer; }
/* Neviditelný zásahový terč nad bodem – ten skutečně chytá myš, takže kurzor
   pointer musí být i na něm (jinak se nad bodem ukáže šipka a nepůsobí klikací). */
.graf_hit { cursor: pointer; }
.graf_hit:hover + .graf_bod, .graf_bod:hover { r: 5; }
.graf_sloupec { cursor: pointer; }

/* Tooltip – sklíčko nad bodem. */
.graf_tooltip {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: none;
    z-index: 5;
    min-width: 90px;
    padding: 8px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(63, 94, 168, 0.18);
    box-shadow: 0 6px 22px rgba(20, 40, 90, 0.18);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
}
.graf_tt_datum { font-weight: 700; color: var(--barva_akcent_tmava); margin-bottom: 3px; }
.graf_tt_radek { display: flex; align-items: center; gap: 6px; }
.graf_tt_tecka { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* Miniatura fotky měření v tooltipu bodu – náhled nad textem. */
.graf_tt_foto {
    display: block;
    margin-top: 6px;
    width: 128px;
    max-width: 40vw;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(63, 94, 168, 0.18);
}

/* Legenda pod grafem – poslední hodnota a průměr. */
.graf_legenda {
    display: flex; flex-wrap: wrap; gap: 6px 20px;
    margin: 14px 0 0; color: var(--barva_text_slaby);
    font-size: 13px;
}
.graf_leg_polozka { display: inline-flex; align-items: center; gap: 7px; }
.graf_leg_polozka strong { color: var(--barva_text); font-variant-numeric: tabular-nums; }

/* Volba období grafu – rychlé presety + vlastní rozsah od–do. */
/* Ovládací řádek: vlevo přepínače veličin, vpravo blok období (kalendáře nahoře,
   presety pod nimi). Oba sloupce začínají úplně nahoře (align-items: flex-start). */
.graf_ovladani {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 14px 24px; margin-bottom: 20px;
}
.graf_ovladani .graf_prepinace { margin-bottom: 0; }

/* Blok období – datepickery nahoře, presety pod nimi; vše zarovnané vpravo.
   Větší rozestup mezi kalendáři a presety, ať to dýchá. Záporný horní margin
   vytáhne kalendáře nahoru na úroveň nadpisu sekce „Vývoj měření" (vpravo od
   nadpisu je volné místo), ať nahoře nezbývá prázdno. */
.graf_obdobi {
    display: flex; flex-direction: column-reverse; align-items: flex-end;
    gap: 16px; margin: -44px 0 0;
}
.graf_presety { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.graf_preset {
    padding: 7px 13px; border: 1px solid var(--sklo_okraj); border-radius: 999px;
    background: rgba(63, 94, 168, 0.05); color: var(--barva_text_slaby);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.graf_preset:hover { color: var(--barva_text); border-color: rgba(63, 94, 168, 0.3); }
.graf_preset_aktivni, .graf_preset_aktivni:hover {
    background: var(--barva_akcent, #3f5ea8); color: #fff;
    border-color: transparent;
}
.graf_rozsah { display: inline-flex; align-items: flex-end; gap: 10px; }
.graf_rozsah_pole { display: inline-flex; flex-direction: column; gap: 3px; }
.graf_rozsah_popisek { font-size: 11px; font-weight: 600; color: var(--barva_text_slaby); }
/* Rozbalovací datepicker rozsahu grafu – kompaktnější než ve formuláři, plovoucí
   kalendář se zarovná pod tlačítko. */
.graf_rozsah_picker { position: relative; }
.graf_rozsah_picker .kalendar_pole_tlacitko { min-width: 140px; padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.graf_rozsah_picker .kalendar_plovouci { left: auto; right: 0; }

/* Stav načítání nového období (jemné ztlumení plochy). */
.karta_grafy_nacita .graf_plocha { opacity: 0.45; transition: opacity 0.2s; }
.graf_prazdno {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--barva_text_slaby); font-size: 13.5px; font-style: italic;
    pointer-events: none; /* nikdy nesmí blokovat hover/klik na body grafu */
}
/* Atribut hidden musí vyhrát nad display:flex (jinak se prázdný stav zobrazuje i s daty). */
.graf_prazdno[hidden] { display: none; }

/* Medikační anotace v grafu (svislé značky změn léků). */
/* Medikační anotace – modrá ikona léku nahoře na svislé čáře.
   POZOR: ikona je <g> s transform: translate(...); CSS hover transform by translate
   přepsal a ikona by „odletěla" do (0,0). Vizuální odezvu proto děláme přes opacity. */
.graf_anotace_znacka { cursor: pointer; transition: opacity 0.12s; }
.graf_anotace_znacka:hover { opacity: 0.75; }
.graf_kurzor { pointer-events: none; }
.graf_bod_prah { filter: drop-shadow(0 1px 3px rgba(224, 85, 111, 0.55)); }

/* Tooltip varianta pro změnu medikace – větší a výraznější než u měření. */
.graf_tooltip_med {
    white-space: normal; max-width: 300px; min-width: 180px;
    padding: 12px 14px; border-radius: 13px;
    border-color: rgba(47, 143, 214, 0.32);
    box-shadow: 0 10px 30px rgba(20, 60, 110, 0.24);
}
.graf_tt_med_hlava {
    display: flex; align-items: center; gap: 8px;
    color: #2f8fd6; font-weight: 600; font-size: 16px;
}
.graf_tt_med_ikona { width: 21px; height: 21px; flex: none; }
.graf_tooltip_med .graf_tt_datum {
    color: var(--barva_text); font-weight: 700; font-size: 13.5px;
    margin: 3px 0 8px;
}
.graf_tt_med {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 14px; font-weight: 700; line-height: 1.5; margin-top: 3px;
}
.graf_tt_med em { font-style: normal; font-weight: 600; color: var(--barva_text_slaby); font-size: 13px; }
.graf_tt_znak { font-weight: 800; font-size: 15px; flex: none; width: 12px; text-align: center; }
.graf_tt_med_pri { color: #1f7a44; }
.graf_tt_med_pri em { color: #2a9d54; }
.graf_tt_med_od { color: #b23b3b; }
.graf_tt_med_od em { color: #cf4a4a; }
.graf_tt_med_zm { color: #8a6516; }
.graf_tt_med_zm em { color: #b07d1c; }

/* Tooltip varianta pro kurzor vybraného dne – stejný styl jako medikační, zeleně. */
.graf_tooltip_den {
    white-space: normal; max-width: 260px; min-width: 150px;
    padding: 12px 14px; border-radius: 13px;
    border-color: rgba(43, 179, 163, 0.34);
    box-shadow: 0 10px 30px rgba(16, 90, 82, 0.22);
}
.graf_tt_den_hlava {
    display: flex; align-items: center; gap: 8px;
    color: #1f9e90; font-weight: 600; font-size: 16px;
}
.graf_tt_den_ikona { width: 20px; height: 20px; flex: none; }
.graf_tooltip_den .graf_tt_datum {
    color: var(--barva_text); font-weight: 700; font-size: 13.5px;
    margin: 3px 0 0;
}

/* Lékařský souhrn pod grafem (min/⌀/max + změny medikace). */
.graf_souhrn { margin-top: 14px; }
.graf_souhrn_blok {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    padding: 8px 0; border-top: 1px solid var(--sklo_okraj);
    font-size: 13px; color: var(--barva_text_slaby);
}
.graf_souhrn_nazev { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--barva_text); min-width: 110px; }
.graf_souhrn_stat { font-variant-numeric: tabular-nums; }
.graf_souhrn_stat strong { color: var(--barva_text); }
.graf_souhrn_med { margin-top: 10px; }
.graf_souhrn_med_nadpis { display: block; font-weight: 700; color: var(--barva_akcent_tmava); font-size: 13px; margin-bottom: 6px; }
.graf_souhrn_med ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.graf_souhrn_med li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    font-size: 12.5px; color: var(--barva_text_slaby);
}
.graf_souhrn_med_datum { font-weight: 700; color: var(--barva_text); font-variant-numeric: tabular-nums; min-width: 92px; }
.graf_souhrn_med_detail { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
/* Konkrétní změny (který lék) – jen barevný text, bez štítku/rámečku. */
.graf_zmena_stitek { font-size: 13px; font-weight: 600; }
.graf_zmena_pri { color: #1f7a44; }
.graf_zmena_od  { color: #b23b3b; }
.graf_zmena_zm  { color: #8a6516; }

/* Sekce „Stav klienta ke dni" je rozdělená do bloků: Úkony / Naměřené hodnoty /
   Medikace. Každý blok má jemné orámování, vlastní nadpis s ikonou – aby byl
   stav přehledný a logicky členěný (ne jeden dlouhý seznam). */
/* Bloky bez šedého pozadí – čistě na bílé kartě, oddělené jen nadpisem
   a jemnou horní linkou. Vzdušné, ne přeplácané. */
.report_blok { margin-top: 18px; padding: 0; background: none; border: 0; }
/* Mezi bloky o trochu větší vzduch (Úkony → Naměřené hodnoty). */
.report_blok + .report_blok { margin-top: 28px; padding-top: 0; border-top: 0; }
.report_blok_nadpis {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 10px; font-size: 13.5px; font-weight: 700;
    color: var(--barva_akcent_tmava); letter-spacing: 0.2px;
}
.report_blok_ikona { width: 17px; height: 17px; flex: none; color: var(--barva_akcent); }

/* Slovní stav klienta pod naměřenými hodnotami (bez dělící linky). */
.report_stav_text { margin-top: 14px; padding-top: 0; border-top: 0; }
.report_stav_text_telo { margin: 4px 0 0; line-height: 1.55; }

/* Blok medikace ke dni (full-width pod gridem) – hlavička s nadpisem vlevo
   a značkou stavu vpravo. Oddělený jemnou horní linkou jako ostatní bloky. */
.report_medikace { margin-top: 18px; padding-top: 0; border-top: 0; }
.report_medikace_hlava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.report_medikace_hlava .report_blok_nadpis { margin: 0; }
.report_medikace_znacka {
    padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: rgba(63, 94, 168, 0.08); color: var(--barva_text_slaby);
}
.report_medikace_znacka_zmena { background: rgba(232, 146, 58, 0.16); color: #a86018; }
.tabulka_medikace_kompakt th, .tabulka_medikace_kompakt td { padding: 5px 8px; font-size: 13px; }
.report_medikace_pozn { color: var(--barva_text_slaby); font-size: 12px; }

@media (max-width: 600px) {
    .graf_svg { aspect-ratio: 360 / 240; }
    .graf_prepinac { padding: 8px 12px; font-size: 12.5px; }
    /* Na mobilu jde období pod přepínače a roztáhne se na plnou šířku.
       Záporný margin (co tahá kalendáře k nadpisu) tu nedává smysl – zrušíme. */
    .graf_ovladani { flex-direction: column; align-items: stretch; }
    .graf_obdobi { align-items: stretch; width: 100%; margin-top: 0; }
    .graf_presety { justify-content: flex-start; }
    .graf_rozsah { justify-content: space-between; }
    .graf_rozsah_pole { flex: 1; }
    .graf_rozsah_picker .kalendar_pole_tlacitko { min-width: 0; width: 100%; }
    .graf_rozsah_picker .kalendar_plovouci { right: auto; left: 0; }
}

/* Rozklikávací kalendář (výběr dne reportu / úkonů). */
.kalendar {
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(63, 94, 168, 0.05);
    border: 1px solid rgba(63, 94, 168, 0.1);
    max-width: 320px;
}
.kalendar_hlava {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px;
}
.kalendar_titulek { font-size: 14px; font-weight: 700; text-transform: capitalize; }
.kalendar_sip {
    appearance: none; border: 0; cursor: pointer;
    width: 30px; height: 30px; border-radius: 8px;
    font-size: 18px; line-height: 1; color: var(--barva_akcent_tmava);
    background: rgba(63, 94, 168, 0.08);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.kalendar_sip:hover { background: rgba(63, 94, 168, 0.16); }
.kalendar_mrizka {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.kalendar_nazev_dne {
    text-align: center; font-size: 11px; font-weight: 700;
    color: var(--barva_text_slaby); padding-bottom: 4px;
}
.kalendar_prazdne { height: 34px; }
.kalendar_den {
    appearance: none; border: 0; cursor: pointer;
    width: 100%; height: 34px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--barva_text);
    background: rgba(255, 255, 255, 0.6);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}
.kalendar_den:hover { background: rgba(63, 94, 168, 0.16); }
/* Dny bez záznamu – zašedlé, ale stále klikatelné. */
.kalendar_den_bez { color: var(--barva_text_slaby); background: transparent; opacity: 0.5; }
.kalendar_den_bez:hover { opacity: 0.85; }
.kalendar_den_dnes { box-shadow: inset 0 0 0 1.5px rgba(63, 94, 168, 0.4); }
.kalendar_den_vybrany,
.kalendar_den_vybrany:hover {
    background: var(--barva_akcent); color: #fff; opacity: 1;
}
/* V kalendáři „Stav ke dni" (report_kalendar) je vybraný den ZELENÝ – stejná
   barva jako svislý kurzor v grafu vývoje měření, ať je propojení report ↔ graf
   na první pohled čitelné. Datepickery grafu/fotek (jiné .kalendar) zůstávají modré. */
.report_kalendar .kalendar_den_vybrany,
.report_kalendar .kalendar_den_vybrany:hover {
    background: #2bb3a3;
}
.kalendar_den[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }

/* Plovoucí kalendář (sekce Úkony i pole fotodokumentace) – jednotné prémiové
   matné sklo: silný blur + saturace, jemné světlé orámování a hluboký stín.
   Podklad je dost krycí, aby vypadal dobře i tam, kde backdrop-filter nemá co
   rozmazat (nebo je popup ve skleněném modalu a vnořený filter se neuplatní). */
.kalendar_rozbal { position: relative; }
.kalendar_plovouci {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
    margin-bottom: 0; width: 300px;
    /* Přepisuje pozadí/okraj základní .kalendar (stejná specificita, pozdější). */
    background: rgba(244, 247, 253, 0.86);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--sklo_okraj);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(20, 40, 90, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Tlačítko, které ve formuláři nahrazuje nativní <input type="date"> – tváří se
   jako vstupní pole, ale otevírá vlastní rozbalovací kalendář. */
.kalendar_pole_tlacitko {
    display: flex; align-items: center; gap: 8px;
    text-align: left; cursor: pointer;
}
.kalendar_pole_tlacitko svg {
    width: 18px; height: 18px; flex: 0 0 auto;
    color: var(--barva_text_slaby);
}
.kalendar_pole_tlacitko[aria-expanded="true"] {
    border-color: var(--barva_akcent);
    box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.15);
}
/* Plovoucí kalendář pole nesmí na úzkém displeji přetéct z karty. */
.kalendar_rozbal[data-kalendar-pole] .kalendar_plovouci { max-width: calc(100vw - 48px); }

/* Tělo reportu – během AJAX načítání jemně ztlumit. report_telo má
   display:contents (nemá vlastní box), proto ztlumíme jeho přímé děti. */
.report_telo_nacita > * { opacity: 0.5; transition: opacity 0.15s ease; }

/* Hlava: nadpis „Stav ke dni DATUM" + štítek stavu – vše na jednom řádku.
   Datum má stejnou barvu jako nadpis (jen splývá s názvem). */
.report_hlava { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 20px; }
.report_nadpis { margin: 0; }
.report_nadpis_datum { font-weight: 700; color: inherit; }
.report_datum { font-size: 16px; font-weight: 700; }
.report_stav { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; align-self: center; }
.report_stav_ok { color: #1f6b41; background: rgba(90, 167, 118, 0.18); }
.report_stav_chybi { color: #c4452f; background: rgba(224, 86, 59, 0.15); }

/* Chipy splněných/chybějících úkonů (uvnitř bloku Úkony). */
.report_chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.report_chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.report_chip_ok { color: #1f6b41; background: rgba(90, 167, 118, 0.14); }
.report_chip_chybi { color: #c4452f; background: rgba(224, 86, 59, 0.12); }

/* Kompaktní řádky „klíč: hodnota" – popisek vlevo, hodnota hned vedle (žádné
   velké odskočení jako u obecných .udaje). Na úzkém displeji se zalomí jen
   v rámci řádku, ne na velkou mezeru. */
.report_radky { display: flex; flex-direction: column; gap: 0; }
.report_radek {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 6px 0;
    border-top: 1px solid rgba(63, 94, 168, 0.06);
    font-size: 14.5px;
}
.report_radky .report_radek:first-child { border-top: 0; padding-top: 0; }
/* Kontrast: popisek lehký a tlumený (ustoupí), hodnota výraznější (vynikne). */
.report_klic {
    flex: 0 0 130px;
    font-size: 14px; font-weight: 500; color: var(--barva_text_slaby);
}
.report_hodnota { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--barva_text); }
.report_hodnota_chybi { color: #c4452f; }
.report_meta { margin: 12px 0 0; font-size: 13px; color: var(--barva_text_slaby); }

@media (max-width: 480px) {
    /* Na malém displeji klíč nad hodnotou, ale těsně – ne velký odstup. */
    .report_klic { flex-basis: 100%; }
}

/* Lišta s tlačítkem „Uložit úkony" – přilepená dole, ať je palcem dostupná. */
.dnes_ulozit_lista {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--radius_velky);
    /* Výraznější efekt skla: průhlednější pozadí + silnější rozostření. */
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--sklo_okraj);
    box-shadow: 0 8px 24px rgba(63, 94, 168, 0.12);
}
.dnes_ulozit_stav { color: var(--barva_text_slaby); font-size: 14px; font-weight: 600; }
/* Když jsou neuložené změny, stav zvýrazníme a tlačítko „dýchne". */
.dnes_ulozit_lista_aktivni .dnes_ulozit_stav { color: #c4452f; }
/* Neuložené změny: tlačítko Uložit pulzuje, ať upoutá pozornost. */
.dnes_ulozit_lista_aktivni #dnes_ulozit_tlacitko {
    animation: dnes_ulozit_puls 1.5s ease-in-out infinite;
}
@keyframes dnes_ulozit_puls {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 111, 224, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(59, 111, 224, 0);
        transform: scale(1.04);
    }
}
@media (prefers-reduced-motion: reduce) {
    .dnes_ulozit_lista_aktivni #dnes_ulozit_tlacitko {
        animation: none;
        box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.35);
    }
}

/* Nástěnka – karta „checklist v pořádku" zezelená, dlaždice se třemi v řadě. */
.nastenka_karta_ok .nastenka_cislo { color: #1f6b41; }
/* Blok „Nedokončené úkony" – varovný (oranžový) akcent sladěný s triage. */
.nastenka_nekompletni {
    --ukol: 210, 98, 47;            /* RGB varovné oranžové (jeden zdroj barvy) */
    position: relative;
    border-radius: var(--radius_velky);
    padding: 24px 26px;
    margin-bottom: 22px;
}
.nastenka_nekompletni .karta_hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* Hlavička: nadpis + počítadlo. */
.nastenka_nekompletni_nadpis { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.nastenka_nekompletni_pocet {
    font-size: 12px; font-weight: 800; line-height: 1;
    color: rgb(var(--ukol));
    background: rgba(var(--ukol), 0.14);
    padding: 4px 9px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.nastenka_nekompletni_seznam { list-style: none; margin: 0; padding: 0; }
.nastenka_nekompletni_polozka + .nastenka_nekompletni_polozka { border-top: 1px solid rgba(63, 94, 168, 0.1); }
.nastenka_nekompletni_odkaz {
    position: relative;
    display: block;
    padding: 12px 30px 12px 12px;       /* místo vpravo na šipku */
    margin: 0 -12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--barva_text);
    transition: background 0.16s;
}
.nastenka_nekompletni_odkaz:hover { background: rgba(var(--ukol), 0.06); }

.nastenka_nekompletni_radek { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.nastenka_nekompletni_jmeno { font-weight: 700; font-size: 14px; }
.nastenka_nekompletni_domov {
    font-size: 11px; font-weight: 600; color: var(--barva_akcent_tmava);
    background: rgba(59, 111, 224, 0.1); padding: 1px 8px; border-radius: 999px;
}
/* Datum jako prostý šedý text vpravo – stejně jako čas u posledních zpráv. */
.nastenka_nekompletni_cas {
    margin-left: auto;
    font-size: 13px;
    color: var(--barva_text_slaby);
    font-variant-numeric: tabular-nums;
}
.nastenka_nekompletni_detail { display: block; font-size: 13px; color: var(--barva_text_slaby); margin-top: 4px; }
.nastenka_nekompletni_chybi { color: var(--barva_text); font-weight: 600; }
.nastenka_nekompletni_dalsi {
    margin-left: 6px; font-size: 11px; font-weight: 600;
    color: var(--barva_text_slaby); opacity: 0.85;
}
/* Šipka napravo – decentní, posune se při najetí. */
.nastenka_nekompletni_sipka {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: rgb(var(--ukol)); opacity: 0; transition: opacity 0.16s, transform 0.16s;
}
.nastenka_nekompletni_odkaz:hover .nastenka_nekompletni_sipka { opacity: 0.8; transform: translateY(-50%) translateX(3px); }

/* Sekce „Dnešní výměny" (opiátové náplasti, PMK) – řádky odkazů na kartu klienta. */
.nastenka_vymeny_seznam { list-style: none; margin: 0; padding: 0; }
.nastenka_vymeny_polozka + .nastenka_vymeny_polozka { border-top: 1px solid rgba(63, 94, 168, 0.1); }
.nastenka_vymeny_odkaz {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 26px 10px 4px;
    color: inherit; text-decoration: none; border-radius: 10px;
}
.nastenka_vymeny_odkaz:hover { background: rgba(59, 111, 224, 0.06); }
.nastenka_vymeny_ikona { display: inline-flex; color: var(--barva_akcent); flex-shrink: 0; }
.nastenka_vymeny_text { flex: 1; min-width: 0; }
.nastenka_vymeny_jmeno { font-weight: 700; }
.nastenka_vymeny_domov { color: var(--barva_text_slaby); font-size: 13px; margin-left: 6px; }
.nastenka_vymeny_sipka {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    opacity: 0.4; transition: opacity 0.15s, transform 0.15s;
}
.nastenka_vymeny_odkaz:hover .nastenka_vymeny_sipka { opacity: 0.8; transform: translateY(-50%) translateX(3px); }

/* Sekce „Dnešní narozeniny" – stejný vzhled jako výměny, ikona dárečku v odlišné (oslavné) barvě. */
.nastenka_narozeniny_ikona { color: #d6488a; }

/* Patička „…a dalších N" jako odkaz na celou sekci Úkony. */
.nastenka_nekompletni_vice {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 12px;
    font-size: 13px; font-weight: 600;
    color: rgb(var(--ukol));
    text-decoration: none;
    transition: gap 0.16s;
}
.nastenka_nekompletni_vice:hover { gap: 10px; }

/* Dotyková zařízení nemají hover → šipka je trvale viditelná. */
@media (hover: none) {
    .nastenka_nekompletni_sipka { opacity: 0.6; }
}

/* Širší rozložení dlaždic na nástěnce. */
@media (min-width: 561px) { .nastenka_karty { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .nastenka_karty { grid-template-columns: repeat(4, 1fr); } }

/* Dvě sekce vedle sebe na poloviny (Nedokončené úkony | Poslední zprávy).
   Když nedokončené úkony nejsou, zůstane jen jeden sloupec (zprávy přes celou šířku). */
.nastenka_dva_sloupce {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.nastenka_dva_sloupce_jeden { grid-template-columns: 1fr; }
/* Sekce uvnitř už nemají vlastní spodní mezeru – rozestup řeší grid gap. */
.nastenka_dva_sloupce .nastenka_nekompletni,
.nastenka_dva_sloupce .nastenka_aktivita { margin-bottom: 0; }
@media (max-width: 760px) {
    .nastenka_dva_sloupce { grid-template-columns: 1fr; }
}

/* ============================================================================
   Zdravotní triage na nástěnce – „Vyžaduje pozornost“
   ========================================================================== */

/* Triage sekce. */
.nastenka_triage {
    border-radius: var(--radius_velky);
    padding: 22px 26px;
    margin-bottom: 22px;
}
.nastenka_triage .karta_hlava {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;
}

/* Nadpis sekce – ikona vedle textu, barva dle stavu. */
.nastenka_triage .karta_nadpis { display: inline-flex; align-items: center; gap: 9px; }
.triage_nadpis_ikona { flex: none; }
.triage_nadpis_ikona_alert { color: #e0556f; }
.triage_nadpis_ikona_ok { color: #1f6b41; }

.nastenka_triage_prazdno {
    display: flex; align-items: center; gap: 12px;
    margin: 6px 0 2px; color: var(--barva_text_slaby); font-size: 15px;
}
.nastenka_triage_prazdno_ikona {
    display: inline-flex; flex: none;
    width: 38px; height: 38px; border-radius: 50%;
    align-items: center; justify-content: center;
    background: rgba(31, 107, 65, 0.12); color: #1f6b41;
}

/* Společné: ikona signálu/chipu se vizuálně zarovná na střed řádku. */
.triage_ikona { flex: none; display: block; }

/* Filtr signálů ve stejném fazolkovém pásku jako přepínače domovů. */
.triage_filtry.domovy_prepinace {
    width: max-content;
    max-width: 100%;
    margin: 0 0 16px;
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 32px rgba(63, 94, 168, 0.13);
}
.triage_filtry.domovy_prepinace .triage_chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    font-size: 13px;
}
.triage_filtry.domovy_prepinace .triage_chip:hover { color: var(--barva, var(--barva_text)); }
.triage_filtry.domovy_prepinace .triage_chip_aktivni,
.triage_filtry.domovy_prepinace .triage_chip_aktivni:hover { color: #fff; }
/* Aktivní chip bez JS/fazolky – plné pozadí v barvě veličiny (Vše = výchozí modrá). */
.triage_filtry.domovy_prepinace .triage_chip_aktivni {
    background: var(--barva, linear-gradient(140deg, #4f86ff, #2f59c4));
}
.triage_filtry.domovy_prepinace.ma_fazolku .triage_chip_aktivni,
.triage_filtry.domovy_prepinace.ma_fazolku .triage_chip_aktivni:hover {
    background: transparent;
    box-shadow: none;
}
.triage_chip_pocet {
    display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px;
    align-items: center; justify-content: center;
    border-radius: 999px; font-size: 11px; font-weight: 800;
    color: var(--barva_text_slaby);
    background: rgba(63, 94, 168, 0.1);
    transition: background 0.18s, color 0.18s;
}
.triage_chip_aktivni .triage_chip_pocet,
.triage_filtry.domovy_prepinace .menu_polozka_aktivni .triage_chip_pocet {
    color: #fff;
    background: rgba(255, 255, 255, 0.28);
}

/* Seznam rizikových klientů. */
.triage_seznam { list-style: none; margin: 0; padding: 0; }
.triage_polozka + .triage_polozka { border-top: 1px solid rgba(63, 94, 168, 0.1); }
.triage_polozka[hidden] { display: none; }

.triage_odkaz {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.triage_odkaz:hover { background: rgba(255, 255, 255, 0.55); }

.triage_zav_tecka {
    width: 10px; height: 10px; border-radius: 50%;
    background: #e8923a;
    box-shadow: 0 0 0 4px rgba(232, 146, 58, 0.14);
}
.triage_polozka_kriticke .triage_zav_tecka {
    background: #e0556f; box-shadow: 0 0 0 4px rgba(224, 85, 111, 0.16);
    animation: triage_tecka_puls 1.7s ease-in-out infinite;
}
/* Pulzující tečka u kritických klientů – jemně přitáhne oko k nejnaléhavějšímu. */
@keyframes triage_tecka_puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 85, 111, 0.5); }
    50%      { box-shadow: 0 0 0 7px rgba(224, 85, 111, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .triage_polozka_kriticke .triage_zav_tecka { animation: none; }
}

/* Postupný nástup obsahu ([data-nast]) – výchozí skrytý stav nastaví JS třídou
   nast_pred, nast_in pak spustí přechod. Bez JS / reduced-motion zůstane viditelné. */
.nast_pred { opacity: 0; transform: translateY(12px); }
.nast_pred.nast_in {
    opacity: 1; transform: none;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.triage_klient { display: flex; flex-direction: column; min-width: 0; }
.triage_jmeno { font-weight: 700; }
.triage_domov {
    font-size: 12px; color: var(--barva_text_slaby);
    text-transform: uppercase; letter-spacing: 0.03em;
}

/* Pořadí sloupců: jméno | trendy | stavy. Sloupce jsou bez svislých oddělovačů. */
.triage_trendy,
.triage_signaly { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.triage_signal {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.triage_signal_ikona { display: inline-flex; align-items: center; }
.triage_signal_varovani { background: rgba(232, 146, 58, 0.14); color: #b5511f; }
.triage_signal_kriticke { background: rgba(224, 85, 111, 0.16); color: #c23052; }

/* Trendový signál (plíživé zhoršování) – hodnoty ještě v mezích, jde o vývoj.
   Modré podbarvení ve stejném stylu jako ostatní chipy, bez orámování; navíc
   ho odlišuje mini-štítek „trend". Modrá přebíjí barvu z varovani/kriticke. */
.triage_signal_trend { background: rgba(59, 143, 214, 0.10); color: #2f79c9; }
.triage_signal_trend_stitek {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.06em; opacity: 0.75;
    border: 1px dashed currentColor; border-radius: 4px; padding: 0 4px;
}

.triage_sparkline { display: inline-flex; align-items: center; }
.triage_spark_svg { display: block; }

.triage_sipka { color: var(--barva_text_slaby); font-weight: 700; }
.triage_odkaz:hover .triage_sipka { color: var(--barva_akcent); }

/* Mobil: zalom do dvou řádků (klient + signály pod sebou). Detaily signálů
   musí zůstat vidět vždy – na dotyku není hover (viz pravidlo projektu). */
@media (max-width: 620px) {
    .triage_odkaz {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "tecka klient sipka"
            "tecka trendy sipka"
            "tecka signaly sipka";
        row-gap: 8px;
    }
    .triage_zav_tecka { grid-area: tecka; align-self: start; margin-top: 5px; }
    .triage_klient    { grid-area: klient; }
    /* Trendy nad prahovými stavy; na mobilu pod sebou → bez svislých linek.
       Prázdný sloupec schováme, ať nevzniká mezera navíc (row-gap). */
    .triage_trendy    { grid-area: trendy; justify-content: flex-start; }
    .triage_signaly   { grid-area: signaly; justify-content: flex-start; }
    .triage_trendy:empty,
    .triage_signaly:empty { display: none; }
    .triage_trendy:not(:empty),
    .triage_signaly:not(:empty) { padding-left: 0; border-left: 0; }
    .triage_sipka     { grid-area: sipka; }
    /* Sparkline na úzkém mobilu skryjeme – signály s čísly nesou info i bez něj. */
    .triage_sparkline { display: none; }
}

/* Mobilní doladění nástěnky – jen telefonní breakpoint. */
@media (max-width: 620px) {
    .nastenka_vymeny,
    .nastenka_triage,
    .nastenka_nekompletni,
    .nastenka_aktivita {
        padding: 16px;
        margin-bottom: 14px;
        border-radius: 20px;
    }

    .nastenka_vymeny .karta_hlava,
    .nastenka_triage .karta_hlava,
    .nastenka_nekompletni .karta_hlava,
    .nastenka_aktivita .karta_hlava {
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 10px;
    }
    .nastenka_vymeny .karta_nadpis,
    .nastenka_triage .karta_nadpis,
    .nastenka_nekompletni .karta_nadpis,
    .nastenka_aktivita .karta_nadpis {
        margin-bottom: 0;
        font-size: 15px;
        line-height: 1.25;
    }

    .nastenka_vymeny_odkaz {
        gap: 8px;
        padding: 10px 22px 10px 2px;
        border-radius: 12px;
        font-size: 13.5px;
        line-height: 1.35;
    }
    .nastenka_vymeny_ikona svg { width: 18px; height: 18px; }
    .nastenka_vymeny_domov {
        display: block;
        margin-left: 0;
        font-size: 12px;
    }
    .nastenka_vymeny_sipka { right: 4px; opacity: 0.45; }

    .nastenka_triage .karta_hlava {
        flex-wrap: wrap;
    }
    .triage_hlava_akce {
        width: 100%;
        justify-content: flex-start;
    }
    .triage_prahy_tl {
        font-size: 13px;
    }

    .triage_filtry.domovy_prepinace {
        width: auto;
        max-width: none;
        margin: 0 -4px 12px;
        padding: 5px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .triage_filtry.domovy_prepinace .triage_chip {
        min-height: 34px;
        padding: 8px 11px;
        gap: 6px;
        font-size: 12.5px;
        flex: 0 0 auto;
    }
    .triage_chip_pocet {
        min-width: 17px;
        height: 17px;
        font-size: 10.5px;
        padding: 0 5px;
    }

    .triage_odkaz {
        gap: 8px;
        row-gap: 7px;
        padding: 10px 8px;
        border-radius: 14px;
    }
    .triage_jmeno { font-size: 14px; line-height: 1.25; }
    .triage_domov { font-size: 11px; letter-spacing: 0.02em; }
    .triage_signal {
        max-width: 100%;
        padding: 3px 8px;
        font-size: 11.5px;
    }
    .triage_signal_popis {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .triage_signal_trend_stitek { font-size: 9px; }
    .nastenka_triage_prazdno {
        align-items: flex-start;
        gap: 10px;
        margin: 2px 0;
        font-size: 13.5px;
        line-height: 1.4;
    }
    .nastenka_triage_prazdno_ikona {
        width: 32px;
        height: 32px;
    }

    .nastenka_dva_sloupce {
        gap: 14px;
    }
    .nastenka_nekompletni_odkaz {
        padding: 10px 22px 10px 2px;
        margin: 0;
        border-radius: 12px;
    }
    .nastenka_nekompletni_radek {
        gap: 5px 7px;
    }
    .nastenka_nekompletni_jmeno {
        font-size: 13.5px;
        line-height: 1.25;
    }
    .nastenka_nekompletni_cas {
        margin-left: 0;
        font-size: 12px;
    }
    .nastenka_nekompletni_detail {
        margin-top: 3px;
        font-size: 12.5px;
        line-height: 1.35;
    }
    .nastenka_nekompletni_dalsi {
        display: inline-block;
        margin-left: 4px;
    }
    .nastenka_nekompletni_sipka { right: 4px; }
    .nastenka_nekompletni_vice {
        margin-top: 9px;
        font-size: 12.5px;
    }

    .nastenka_aktivita .karta_hlava {
        align-items: baseline;
    }
    .nastenka_zprava_odkaz {
        padding: 11px 2px;
        margin: 0;
        border-radius: 12px;
    }
    .nastenka_zprava_hlava {
        gap: 6px;
        font-size: 11.5px;
        flex-wrap: wrap;
    }
    .nastenka_zprava_cas {
        margin-left: 0;
        font-size: 11.5px;
    }
    .nastenka_zprava_text {
        font-size: 13px;
        line-height: 1.4;
    }
}

@media (max-width: 380px) {
    .nastenka_vymeny,
    .nastenka_triage,
    .nastenka_nekompletni,
    .nastenka_aktivita {
        padding: 14px;
        border-radius: 18px;
    }
    .triage_filtry.domovy_prepinace .triage_chip {
        min-height: 32px;
        padding: 7px 10px;
        font-size: 12px;
    }
    .triage_signal { font-size: 11px; }
    .nastenka_vymeny_odkaz,
    .nastenka_nekompletni_odkaz { padding-right: 18px; }
}
/* Finální mobilní dorovnání nástěnky: optická osa, mezery, hierarchie. */
@media (max-width: 620px) {
    .nastenka_vymeny,
    .nastenka_triage,
    .nastenka_nekompletni,
    .nastenka_aktivita {
        overflow: hidden;
    }

    .nastenka_vymeny .karta_hlava,
    .nastenka_triage .karta_hlava,
    .nastenka_nekompletni .karta_hlava,
    .nastenka_aktivita .karta_hlava {
        margin-bottom: 7px;
    }
    .nastenka_vymeny .karta_nadpis,
    .nastenka_triage .karta_nadpis,
    .nastenka_nekompletni .karta_nadpis,
    .nastenka_aktivita .karta_nadpis {
        font-size: 16px;
        line-height: 1.2;
    }
    .nastenka_vymeny .karta_nadpis svg,
    .nastenka_triage .karta_nadpis svg {
        width: 20px;
        height: 20px;
    }

    .nastenka_vymeny_odkaz {
        min-height: 48px;
        padding: 7px 22px 7px 4px;
    }
    .nastenka_vymeny_ikona {
        width: 22px;
        justify-content: center;
    }
    .nastenka_vymeny_sipka,
    .nastenka_nekompletni_sipka,
    .triage_sipka {
        color: var(--barva_text_slaby);
        opacity: 0.62;
        font-size: 13px;
    }

    .nastenka_triage .karta_hlava {
        margin-bottom: 8px;
        gap: 5px 8px;
    }
    .triage_hlava_akce {
        margin-top: -1px;
    }
    .triage_prahy_tl {
        color: var(--barva_text_slaby);
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
    }
    .triage_prahy_tl svg {
        width: 14px;
        height: 14px;
    }

    .triage_filtry.domovy_prepinace {
        margin-top: 8px;
        margin-bottom: 10px;
        border-radius: 17px;
    }
    .triage_filtry.domovy_prepinace .triage_chip {
        border-radius: 14px;
    }

    .triage_polozka + .triage_polozka,
    .nastenka_nekompletni_polozka + .nastenka_nekompletni_polozka,
    .nastenka_zprava + .nastenka_zprava,
    .nastenka_vymeny_polozka + .nastenka_vymeny_polozka {
        border-top-color: rgba(63, 94, 168, 0.08);
    }
    .triage_odkaz {
        padding: 9px 6px;
        column-gap: 9px;
        row-gap: 6px;
    }
    .triage_zav_tecka {
        width: 9px;
        height: 9px;
        margin-top: 4px;
        box-shadow: 0 0 0 4px rgba(232, 146, 58, 0.12);
    }
    .triage_polozka_kriticke .triage_zav_tecka {
        box-shadow: 0 0 0 4px rgba(224, 85, 111, 0.14);
    }
    .triage_trendy,
    .triage_signaly {
        gap: 5px;
    }
    .triage_signal {
        min-height: 23px;
        line-height: 1.15;
    }

    .nastenka_nekompletni_odkaz {
        padding: 9px 22px 9px 4px;
    }
    .nastenka_nekompletni_pocet {
        padding: 3px 8px;
    }
    .nastenka_nekompletni_vice {
        margin-left: 4px;
    }

    .nastenka_zprava_odkaz {
        padding: 10px 4px;
    }
    .nastenka_zprava_autor {
        line-height: 1.2;
    }
    .nastenka_zprava_domov {
        padding: 1px 7px;
    }
}

@media (max-width: 380px) {
    .nastenka_vymeny .karta_nadpis,
    .nastenka_triage .karta_nadpis,
    .nastenka_nekompletni .karta_nadpis,
    .nastenka_aktivita .karta_nadpis {
        font-size: 15.5px;
    }
    .triage_prahy_tl {
        font-size: 12px;
    }
    .triage_odkaz {
        padding-left: 4px;
        padding-right: 4px;
    }
}
/* Mobilní nástěnka – finální korekce zarovnání a typografie. */
@media (max-width: 620px) {
    .nastenka_vymeny .karta_hlava {
        margin-bottom: 12px;
    }
    .nastenka_vymeny_odkaz {
        gap: 7px;
        padding-left: 0;
    }
    .nastenka_vymeny_ikona {
        width: 20px;
    }
    .nastenka_vymeny_text {
        font-size: 13.5px;
        line-height: 1.35;
    }

    .nastenka_triage .karta_hlava {
        margin-bottom: 14px;
        gap: 8px 10px;
    }
    .triage_hlava_akce {
        margin-top: 4px;
    }
    .nastenka_triage .triage_prahy_tl {
        font-size: 13px;
        color: var(--barva_text_slaby);
    }
    .triage_filtry.domovy_prepinace {
        margin-top: 12px;
        margin-bottom: 14px;
    }

    .nastenka_nekompletni_jmeno,
    .nastenka_zprava_autor {
        font-size: 13.5px;
        line-height: 1.25;
    }
    .nastenka_nekompletni_detail,
    .nastenka_zprava_text {
        font-size: 12.75px;
        line-height: 1.4;
    }
    .nastenka_nekompletni_cas,
    .nastenka_zprava_cas,
    .nastenka_nekompletni_domov,
    .nastenka_zprava_domov,
    .nastenka_zprava_foto {
        font-size: 11.5px;
    }
    .nastenka_nekompletni_odkaz,
    .nastenka_zprava_odkaz {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (max-width: 380px) {
    .nastenka_triage .triage_prahy_tl { font-size: 12.5px; }
    .nastenka_vymeny_text,
    .nastenka_nekompletni_jmeno,
    .nastenka_zprava_autor { font-size: 13px; }
}
/* --- Úkony na mobilu: nástroje nad kartami (samotná karta klienta má vlastní
   konsolidovaný blok níž). Pozn.: prvky se na dotyku NESMÍ schovávat. --- */
@media (max-width: 620px) {
    .dnes_nastroje { justify-content: center; }
    .dnes_datum_popisek { min-width: 120px; }
    /* Tlačítko Uložit přes celou šířku karty pro snadný zásah palcem. */
    .dnes_ulozit_lista { flex-direction: column; align-items: stretch; }
    .dnes_ulozit_lista #dnes_ulozit_tlacitko { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Prahy zdravotních upozornění – tlačítko v hlavičce triage + nastavovací modál
   (nastenka.php, jen správce). Modál je formulářový → levé zarovnání a širší
   než výchozí potvrzovací modal.
   ------------------------------------------------------------------------- */
.triage_hlava_akce { display: flex; align-items: center; gap: 16px; }

/* Tlačítko „Prahy" vypadá jako textový odkaz s ikonou ozubeného kola. */
.triage_prahy_tl {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600;
}
.triage_prahy_tl svg { opacity: 0.85; }

@media (max-width: 620px) {
    .nastenka_triage .triage_prahy_tl {
        color: var(--barva_text_slaby);
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
    }
    .nastenka_triage .triage_prahy_tl svg {
        width: 14px;
        height: 14px;
    }
}
@media (max-width: 380px) {
    .nastenka_triage .triage_prahy_tl { font-size: 12px; }
}

/* Modál prahů – širší, text vlevo (formulář, ne potvrzení). Platí pro globální
   modál na nástěnce (#modal_prahy) i individuální modál klienta (#modal_prahy_klient) –
   selektory míří na sdílenou třídu .modal_prahy. */
.modal_prahy.modal {
    width: min(760px, 100%);
    max-height: min(86vh, 760px);
    overflow-y: auto;
    text-align: left;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal_prahy.modal::-webkit-scrollbar { width: 10px; }
.modal_prahy.modal::-webkit-scrollbar-track {
    background: transparent;
    margin: 12px 0;            /* dráha nesahá až do zaoblených rohů modálu */
}
.modal_prahy.modal::-webkit-scrollbar-thumb {
    background: rgba(59, 111, 224, 0.35);
    border-radius: 8px;
    /* Průhledný okraj „odsadí" palec od kraje (působí tenčí, čistší). */
    border: 2px solid transparent;
    background-clip: padding-box;
}
.modal_prahy.modal::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 111, 224, 0.6);
    background-clip: padding-box;
}
.modal_prahy .modal_nadpis,
.modal_prahy .modal_text { text-align: left; }
.modal_prahy .modal_text { margin-bottom: 18px; }
.modal_prahy .modal_akce { justify-content: flex-end; margin-top: 8px; }

.prahy_skupina { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.prahy_skupina_nadpis {
    padding: 0; margin-bottom: 10px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--barva_text_slaby);
}
.prahy_mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.prahy_pole { margin: 0; min-width: 0; }

/* Vstup + jednotka na jednom řádku (jednotka uvnitř pravého okraje pole). */
.prahy_vstup_obal { position: relative; display: flex; align-items: center; }
.prahy_vstup { width: 100%; box-sizing: border-box; padding-right: 52px; }
.prahy_jednotka {
    position: absolute; right: 12px;
    pointer-events: none;
    color: var(--barva_text_slaby); font-size: 0.85em; font-weight: 500;
}
.prahy_napoveda { font-size: 12px; color: var(--barva_text_slaby); line-height: 1.4; }
.prahy_chyba_text { font-size: 12px; color: #b62f2f; font-weight: 600; line-height: 1.4; }
.prahy_pole_chyba .prahy_vstup {
    border-color: rgba(210, 59, 59, 0.55);
    box-shadow: 0 0 0 3px rgba(210, 59, 59, 0.12);
}
/* Individuální modál: pole s vyplněnou (přepsanou) hodnotou jemně zvýrazníme,
   ať správce na první pohled vidí, které prahy se u klienta liší od globálu. */
.prahy_pole_vlastni .prahy_vstup {
    border-color: rgba(59, 111, 224, 0.5);
    background: rgba(59, 111, 224, 0.04);
}
/* Placeholder (globální hodnota, kterou pole dědí) záměrně tlumený. */
.modal_prahy .prahy_vstup::placeholder { color: var(--barva_text_slaby); opacity: 0.6; }
.prahy_reset_text {
    margin: 14px 0 0; font-size: 12px; color: var(--barva_text_slaby); line-height: 1.4;
}

/* Tlačítka v hlavě karty klienta („Prahy upozornění“, „Sdílet s lékařem“) –
   kroužek s počtem, když je u klienta něco nastaveno/aktivní (bez zvýraznění
   rámečku tlačítka samotného). */
.prahy_klient_tl,
.tlacitko_s_poctem { position: relative; }
.prahy_klient_pocet,
.tlacitko_pocet {
    min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px;
    border-radius: 999px; background: var(--barva_akcent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; font-size: 10px; font-weight: 700; line-height: 1;
}

@media (max-width: 520px) {
    .prahy_mrizka { grid-template-columns: 1fr; }
    .modal_prahy .modal_akce { flex-direction: column-reverse; }
    .modal_prahy .modal_akce .tlacitko { width: 100%; }
}
/* Profilové menu v hlavičce (spouštěč + rozbalovací panel) */
.profil_spoustec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.profil_spoustec:hover { background: rgba(63, 94, 168, 0.08); }
.profil_ikona { width: 17px; height: 17px; color: var(--barva_text_slaby); opacity: 0.65; flex: none; }
.profil_otevreno .profil_spoustec {
    background: rgba(63, 94, 168, 0.1);
    border-color: var(--sklo_okraj);
}
.profil_sipka {
    width: 16px; height: 16px;
    color: var(--barva_text_slaby);
    transition: transform 0.18s;
}
.profil_otevreno .profil_sipka { transform: rotate(180deg); }

/* Výběr jména pečovatele (fáze 2) – kdo právě pracuje na sdíleném loginu.
   Sídlí v profilovém menu; nevybraný stav pobízí přímo na spouštěči. */

/* Nevybráno: spouštěč se rozsvítí červeně a pulzuje jako upozornění, ať personál
   výběr jména nezapomene (bez jména se záznamy uloží anonymně). */
.profil_nevybrano .profil_spoustec {
    border-color: rgba(214, 69, 69, 0.7);
    background: rgba(214, 69, 69, 0.12);
}
.profil_nevybrano .profil_spoustec:hover { background: rgba(214, 69, 69, 0.2); }
.profil_jmeno_pobidka { color: #c0392b; font-weight: 700; }
.profil_ikona_pobidka {
    color: #d64545;
    opacity: 1;
    animation: profil_pobidka_puls 1.8s ease-in-out infinite;
}
@keyframes profil_pobidka_puls {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.18); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .profil_ikona_pobidka { animation: none; }
}

/* Sekce „Přihlášen(a) jako“ nahoře v profilovém panelu, oddělená linkou. */
.profil_menu_sekce {
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--sklo_okraj);
}
.profil_menu_nadpis {
    margin: 4px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--barva_text_slaby);
}
.profil_menu_jmena { display: flex; flex-direction: column; margin: 0; }
.profil_menu_jmeno_aktivni { background: rgba(63, 94, 168, 0.08); font-weight: 700; }
.profil_menu_jmeno_aktivni svg:first-of-type { color: var(--barva_zvyrazneni, #3f5ea8); }
.profil_menu_fajfka {
    width: 16px !important; height: 16px !important;
    color: var(--barva_zvyrazneni, #3f5ea8) !important;
    margin-left: auto;
}

/* --- Blokující modal „Kdo dnes slouží?" (layout.php) --------------------- *
   Dědí .modal_obal/.modal; přidáváme jen seznam jmen jako velká klikací
   tlačítka (dotykově pohodlná na tabletu) a kruhovou ikonu uživatele. */
.telo_modal_zamek { overflow: hidden; } /* zámek rolování pozadí pod modálem */

.modal_pecovatel_vyber { width: min(440px, 100%); }
.modal_pecovatel_vyber .modal_ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: rgba(63, 94, 168, 0.1);
    color: var(--barva_akcent, #3b6fe0);
}
.modal_pecovatel_vyber .modal_ikona svg { width: 28px; height: 28px; }

.pecovatel_vyber_seznam {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
    text-align: left;
}
.pecovatel_vyber_jmeno {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--sklo_okraj);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--barva_text);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, transform 0.06s;
}
.pecovatel_vyber_jmeno svg { width: 20px; height: 20px; color: var(--barva_text_slaby); flex: none; }
.pecovatel_vyber_jmeno:hover {
    background: rgba(63, 94, 168, 0.1);
    border-color: var(--barva_akcent, #3b6fe0);
}
.pecovatel_vyber_jmeno:hover svg { color: var(--barva_akcent, #3b6fe0); }
.pecovatel_vyber_jmeno:active { transform: scale(0.98); }
.pecovatel_vyber_jmeno:focus-visible {
    outline: 2px solid var(--barva_akcent, #3b6fe0);
    outline-offset: 2px;
}
.pecovatel_vyber_odhlasit { margin: 0; }
.pecovatel_vyber_odhlasit .tlacitko { width: 100%; }

.profil_menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 6px;
    background: var(--sklo_pozadi, rgba(255, 255, 255, 0.92));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--sklo_okraj);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(20, 40, 90, 0.18);
    z-index: 60;
}
.profil_menu[hidden] { display: none; }
.profil_menu_odhlasit { margin: 0; }
.profil_menu_polozka {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--barva_text);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s;
}
.profil_menu_polozka:hover { background: rgba(63, 94, 168, 0.1); }
/* Obrys fokusu dovnitř – jinak by u krajních položek přesahoval za zaoblený
   roh panelu .profil_menu (ten nemá overflow: hidden). */
.profil_menu_polozka:focus-visible { outline-offset: -2px; }
.profil_menu_polozka svg { width: 18px; height: 18px; color: var(--barva_text_slaby); flex: none; }
.profil_menu_polozka > span:first-of-type { flex: 1; }
.profil_menu_odznak {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.odznak_ok { background: rgba(45, 180, 120, 0.15); color: #1c7a52; }
.odznak_varovani { background: rgba(224, 144, 47, 0.16); color: #9a6418; }
.login_obal_2fa { max-width: 760px; }
.login_2fa_hlava { text-align: center; margin-bottom: 22px; }
.login_2fa_hlava .totp_open_app_button { margin-top: 16px; }
.totp_setup {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin: 18px 0 22px;
}
.totp_setup_overeni {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    margin-top: 8px;
}
.totp_qr {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    display: inline-grid;
    place-items: center;
    justify-self: center;
    padding: 12px;
    box-sizing: border-box;
    overflow: visible;
    background: #fff;
    border: 1px solid rgba(31, 42, 68, 0.12);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgba(31, 42, 68, 0.09);
}
.totp_setup_overeni .totp_qr { max-width: 190px; }
.totp_qr svg {
    width: min(220px, calc(100vw - 96px));
    max-width: 100%;
    height: auto;
    display: block;
}
.totp_setup_overeni .totp_qr svg { width: min(166px, calc(100vw - 96px)); }
.totp_qr .qr {
    width: auto !important;
    height: auto !important;
    border-collapse: collapse;
    table-layout: auto;
    margin: 0;
    font-size: 0 !important;
}
.totp_qr .qr tr { height: 3px !important; }
.totp_qr .qr td {
    width: 3px !important;
    min-width: 3px !important;
    height: 3px !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
.totp_setup_overeni .totp_qr .qr tr { height: 5px !important; }
.totp_setup_overeni .totp_qr .qr td {
    width: 5px !important;
    min-width: 5px !important;
    height: 5px !important;
}
.totp_navod { min-width: 0; }
.totp_app_button,
.totp_open_app_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

/* Běžné 2FA ověření: tablet často zobrazuje systém, telefon skenuje QR. */
.login_karta .totp_setup_overeni {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    max-width: 238px;
    margin: 12px auto 18px;
}
.login_karta .totp_setup_overeni .totp_qr {
    width: 180px;
    max-width: calc(100vw - 116px);
    aspect-ratio: 1;
    padding: 6px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(31, 42, 68, 0.08);
}
.login_karta .totp_setup_overeni .totp_qr svg {
    width: 100%;
    height: 100%;
    display: block;
}
.login_karta .totp_setup_overeni .totp_qr .qr {
    margin: auto;
}
.login_karta .totp_setup_overeni .totp_qr .qr tr { height: 4px !important; }
.login_karta .totp_setup_overeni .totp_qr .qr td {
    width: 4px !important;
    min-width: 4px !important;
    height: 4px !important;
}
.login_karta .totp_setup_overeni .totp_navod {
    width: 100%;
    max-width: 238px;
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}
.login_karta .totp_setup_overeni .totp_open_app_button {
    width: auto;
    max-width: 100%;
    min-height: 38px;
    padding: 9px 18px;
    font-size: 13px;
    white-space: normal;
    line-height: 1.25;
    box-shadow: 0 10px 20px rgba(59, 92, 190, 0.18);
}
.login_karta .totp_setup_overeni .totp_text {
    max-width: 300px;
    margin: 0 auto;
}
.totp_text {
    margin: 12px 0;
    color: var(--barva_text_slaby);
    font-size: 14px;
    line-height: 1.55;
}
.totp_secret_box {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(31, 42, 68, 0.1);
    border-radius: var(--radius);
}
.totp_secret_box code {
    color: var(--barva_text);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}
.kod_vstup {
    text-align: center;
    font-size: 22px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.formular_2fa {
    display: grid;
    gap: 9px;
}
.formular_2fa .kod_pole { margin-bottom: 0; }
.formular_2fa .kod_vstup {
    min-height: 62px;
    font-size: 28px;
    border-width: 2px;
    background: rgba(255, 255, 255, 0.94);
}
.kod_vstup {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.kod_vstup:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(88, 122, 245, 0.16), 0 12px 26px rgba(59, 92, 190, 0.12);
}
.kod_vstup_overuje {
    border-color: rgba(59, 92, 190, 0.72);
    box-shadow: 0 0 0 4px rgba(88, 122, 245, 0.14);
}
.totp_kod_pole {
    position: relative;
    display: grid;
    gap: 8px;
}
.totp_kod_pole .formular_popisek {
    justify-self: center;
}
.kod_vstup_skryty {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    min-height: 62px;
    padding: 0;
    color: transparent;
    caret-color: transparent;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    opacity: 0.02;
}
.kod_vstup_skryty:focus {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}
.totp_kod_boxy {
    display: grid;
    grid-template-columns: repeat(6, minmax(34px, 1fr));
    gap: clamp(6px, 1.6vw, 10px);
    width: min(100%, 382px);
    margin: 0 auto;
}
.totp_kod_box {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 0.82;
    min-height: 54px;
    border: 1px solid rgba(31, 42, 68, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.9));
    color: var(--barva_text);
    box-shadow: 0 12px 26px rgba(31, 42, 68, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}
.totp_kod_box::after {
    content: '';
    position: absolute;
    left: 24%;
    right: 24%;
    bottom: 8px;
    height: 3px;
    border-radius: 999px;
    background: rgba(59, 92, 190, 0.48);
    opacity: 0;
    transform: scaleX(0.55);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.totp_kod_box_vyplneny {
    border-color: rgba(59, 92, 190, 0.26);
    background: linear-gradient(180deg, #fff, rgba(240, 245, 255, 0.94));
}
.totp_kod_boxy_focus .totp_kod_box {
    border-color: rgba(59, 92, 190, 0.38);
    background: linear-gradient(180deg, #fff, rgba(243, 247, 255, 0.96));
    box-shadow: 0 14px 30px rgba(31, 42, 68, 0.1), 0 0 0 3px rgba(88, 122, 245, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.totp_kod_boxy_focus .totp_kod_box_aktivni {
    border-color: rgba(59, 92, 190, 0.86);
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(59, 92, 190, 0.17), 0 0 0 4px rgba(88, 122, 245, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.totp_kod_boxy_focus .totp_kod_box_aktivni::after {
    opacity: 1;
    transform: scaleX(1);
}
.totp_kod_boxy_overuje .totp_kod_box {
    border-color: rgba(59, 92, 190, 0.58);
    box-shadow: 0 14px 30px rgba(31, 42, 68, 0.1), 0 0 0 3px rgba(88, 122, 245, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}
.totp_kod_boxy_chyba .totp_kod_box {
    border-color: rgba(198, 67, 67, 0.58);
    background: linear-gradient(180deg, #fff, rgba(255, 245, 245, 0.96));
    box-shadow: 0 14px 30px rgba(31, 42, 68, 0.1), 0 0 0 3px rgba(198, 67, 67, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}
.totp_stav {
    min-height: 18px;
    color: var(--barva_text_slaby);
    font-size: 12px;
    text-align: center;
}
.totp_stav_bezi { color: var(--barva_akcent_tmava); }
.overit_fallback {
    justify-self: center;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 4px 8px;
    color: var(--barva_akcent_tmava);
    background: transparent !important;
    border: 0;
    box-shadow: none !important;
    opacity: 0.78;
}
.overit_fallback:hover {
    opacity: 1;
    text-decoration: underline;
    background: transparent !important;
    box-shadow: none !important;
}
.login_karta .totp_qr {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.login_karta .totp_qr:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(31, 42, 68, 0.13);
}
@media (prefers-reduced-motion: reduce) {
    .kod_vstup,
    .totp_kod_box,
    .totp_kod_box::after,
    .login_karta .totp_qr {
        transition: none;
    }
    .kod_vstup:focus,
    .totp_kod_boxy_focus .totp_kod_box_aktivni,
    .login_karta .totp_qr:hover {
        transform: none;
    }
}
.bezpecnost_text { color: var(--barva_text_slaby); margin-top: 0; }
.zabezpeceni_karta { max-width: 860px; }
.zabezpeceni_akce {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.zabezpeceni_akce .formular { margin: 0; }
@media (max-width: 680px) {
    .totp_setup,
    .totp_setup_overeni {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .totp_navod { width: 100%; }
    .totp_qr { max-width: 220px; }
    .totp_setup_overeni .totp_qr { max-width: 190px; }
    .totp_kod_boxy {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }
    .totp_kod_box {
        min-height: 48px;
        border-radius: 7px;
    }
}
/* Přihlášená zařízení */
.relace_skupina { margin: 0 0 22px; }
.relace_skupina_hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 10px;
}
.relace_skupina_nadpis {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 3px;
    font-size: 19px;
}
.relace_skupina_hlava .mini_formular { justify-content: flex-end; }

@media (max-width: 720px) {
    .relace_skupina_hlava { align-items: stretch; flex-direction: column; }
    .relace_skupina_hlava .mini_formular .tlacitko { width: 100%; }
}
.relace_tabulka .relace_akce { width: 170px; }
.relace_tabulka .relace_akce .tlacitko { white-space: nowrap; }
/* Nejnovější aktivita uživatele ve sloupci „Naposledy" */
.relace_tabulka td.relace_nejnovejsi {
    background: rgba(96, 150, 255, 0.13);
    color: var(--barva_akcent_tmava);
    font-weight: 600;
}

/* ============================================================================
   Sdílení karty s lékařem
   ----------------------------------------------------------------------------
   (A) Modál „Sdílet s lékařem" v klient.php (jen správce).
   (B) Veřejná stránka sdileni.php – brána (RČ) a read-only karta pro lékaře.
   ========================================================================= */

/* Drobné pomocné třídy. */
.muted { color: var(--barva_text_slaby); }
.tlacitko_male { padding: 6px 12px; font-size: 13px; }
.tlacitko_kopirovano { background: linear-gradient(140deg, #46c08a, #2f9e6e) !important; color: #fff !important; }

/* --- (A) Modál sdílení -------------------------------------------------- */
/* Široká varianta modálu (víc obsahu než potvrzovací dialog) + scroll. */
.modal_siroky {
    width: min(680px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 111, 224, 0.35) transparent;
}
.modal_siroky::-webkit-scrollbar { width: 10px; }
.modal_siroky::-webkit-scrollbar-track {
    background: transparent;
    margin: 12px 0;
}
.modal_siroky::-webkit-scrollbar-thumb {
    background: rgba(59, 111, 224, 0.35);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.modal_siroky::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 111, 224, 0.6);
    background-clip: padding-box;
}
.modal_zavrit {
    position: absolute;
    top: 14px; right: 16px;
    width: 34px; height: 34px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--barva_text_slaby);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.modal_zavrit:hover { background: #fff; color: var(--barva_text); }

.sdileni_modal_uvod { margin-bottom: 18px; }
.sdileni_modal_varovani {
    background: rgba(232, 146, 58, 0.12);
    border: 1px solid rgba(232, 146, 58, 0.35);
    color: #9a5a16;
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 13px;
    margin: 0 0 18px;
}

/* Box s čerstvě vytvořeným odkazem (QR + URL + kopírování). */
.sdileni_novy {
    background: rgba(70, 192, 138, 0.08);
    border: 1px solid rgba(70, 192, 138, 0.3);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 22px;
}
.sdileni_novy_nadpis { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.sdileni_novy_telo { display: flex; gap: 18px; align-items: flex-start; }
.sdileni_qr {
    flex: 0 0 auto;
    width: 160px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 14px;
    padding: 8px;
    box-shadow: var(--stin_jemny);
    /* QR musí zůstat čtvercový a vejít se i s paddingem do boxu. */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sdileni_qr svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: block;
}
.sdileni_novy_akce { flex: 1 1 auto; min-width: 0; }
.sdileni_url_vstup { font-family: 'Segoe UI', monospace; font-size: 13px; }
.sdileni_novy_napoveda { margin: 12px 0 0; font-size: 12px; color: var(--barva_text_slaby); line-height: 1.55; }

.sdileni_modal_formular { margin-bottom: 8px; }
.sdileni_seznam_obal { margin-top: 22px; border-top: 1px solid var(--sklo_okraj); padding-top: 18px; }
.sdileni_seznam_nadpis { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.tabulka_sdileni th, .tabulka_sdileni td { font-size: 13px; }
.tabulka_sdileni .vlozeny_formular { margin: 0; }

@media (max-width: 600px) {
    .sdileni_novy_telo { flex-direction: column; align-items: center; text-align: center; }
    .sdileni_qr { width: 180px; }
}

/* --- (B) Veřejná stránka sdileni.php ------------------------------------ */
.sdileni_body { min-height: 100vh; }
.sdileni_stranka {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}
.sdileni_hlavicka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.sdileni_logo { height: 44px; width: auto; }
.sdileni_znacka_popis {
    font-size: 13px;
    color: var(--barva_text_slaby);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.sdileni_obsah { display: flex; flex-direction: column; gap: 18px; }
.sdileni_karta { border-radius: var(--radius_velky); padding: 24px; }
.sdileni_sekce_nadpis { margin: 0 0 16px; font-size: 17px; font-weight: 700; }

/* Hlavička karty (jméno + platnost). */
.sdileni_panel_hlava {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}
.sdileni_nadpis { margin: 0; font-size: 26px; font-weight: 800; }
.sdileni_podnadpis { margin: 4px 0 0; color: var(--barva_text_slaby); }
.sdileni_platnost {
    font-size: 12px;
    color: var(--barva_text_slaby);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--sklo_okraj);
    border-radius: 999px;
    padding: 6px 14px;
    white-space: nowrap;
}

.sdileni_mrizka {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 720px) { .sdileni_mrizka { grid-template-columns: 1fr; } }

/* Definiční seznam údajů. */
.sdileni_udaje { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sdileni_udaj { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; }
.sdileni_udaj_blok { grid-template-columns: 1fr; gap: 4px; }
.sdileni_udaj_klic { margin: 0; color: var(--barva_text_slaby); font-size: 13px; font-weight: 600; }
.sdileni_udaj_hodnota { margin: 0; font-size: 15px; line-height: 1.5; }
.sdileni_poznamky { margin: 0; line-height: 1.6; white-space: normal; }
.sdileni_tabulka_obal { overflow-x: auto; }

/* Report (stav klienta) – znovupoužívá report_* třídy z hlavní karty. */
.sdileni_report_hlava {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.sdileni_report_datum { font-weight: 700; font-size: 15px; }
.sdileni_report_blok { margin-top: 16px; }
.sdileni_report_blok_nadpis { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--barva_text_slaby); }

/* Historie medikace – jednoduchá časová osa. */
.sdileni_historie { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sdileni_historie_polozka {
    border-left: 3px solid var(--barva_akcent);
    padding-left: 14px;
}
.sdileni_historie_hlava {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.sdileni_historie_verze { font-weight: 700; }
.sdileni_historie_datum { color: var(--barva_text_slaby); font-size: 13px; }
.sdileni_historie_pocet { color: var(--barva_text_slaby); font-size: 13px; margin-left: auto; }

/* Vývoj měření – statické SVG grafy (sdílený generátor graf.php). */
.sdileni_graf_popis { margin: -6px 0 18px; font-size: 13px; color: var(--barva_text_slaby); }
.sdileni_graf_blok { margin-bottom: 22px; }
.sdileni_graf_blok:last-child { margin-bottom: 0; }
.sdileni_graf_nadpis { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.sdileni_graf_jedn { color: var(--barva_text_slaby); font-weight: 400; font-size: 13px; }
.sdileni_graf_plocha {
    background: #fff;
    border: 1px solid var(--sklo_okraj);
    border-radius: var(--radius);
    padding: 10px;
    overflow: hidden;
}
.sdileni_graf_plocha svg { width: 100%; height: auto; display: block; }
.sdileni_graf_stat {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--barva_text_slaby);
}
.sdileni_graf_stat_polozka { display: inline-flex; align-items: center; gap: 6px; }
.sdileni_graf_stat_polozka strong { color: var(--barva_text); font-weight: 600; }
.sdileni_graf_tecka { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

.sdileni_graf_zmeny { margin-top: 20px; border-top: 1px solid var(--sklo_okraj); padding-top: 16px; }
.sdileni_graf_zmeny_seznam { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sdileni_graf_zmeny_seznam li { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.sdileni_graf_zmeny_datum { color: var(--barva_text_slaby); font-size: 13px; font-weight: 600; flex: 0 0 92px; }
.sdileni_graf_zmeny_text { flex: 1 1 0; min-width: 0; }

/* Štítky změn medikace (sdílené třídy graf_stitek* – generuje graf_zmena_html). */
.graf_stitek {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    margin: 0 4px 4px 0;
    line-height: 1.5;
}
.graf_stitek_pri { background: rgba(70, 192, 138, 0.14); color: #2f7d5a; }
.graf_stitek_zm  { background: rgba(232, 146, 58, 0.14); color: #9a5a16; }
.graf_stitek_od  { background: rgba(210, 59, 59, 0.12); color: #b5302f; }

/* Brána – formulář pro zadání RČ (vystředěný). */
.sdileni_brana, .sdileni_zprava {
    max-width: 460px;
    margin: 40px auto;
    text-align: center;
    padding: 36px 30px;
    border-radius: var(--radius_velky);
}
.sdileni_brana_ikona {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: rgba(59, 111, 224, 0.1);
    color: var(--barva_akcent);
}
.sdileni_brana_ikona svg { width: 30px; height: 30px; }
.sdileni_brana_nadpis { margin: 0 0 10px; font-size: 22px; font-weight: 800; }
.sdileni_brana_text { margin: 0 0 22px; color: var(--barva_text_slaby); line-height: 1.6; }
.sdileni_brana_formular { text-align: left; }
.sdileni_brana_pole { display: block; margin-bottom: 16px; }
.sdileni_brana_vstup { text-align: center; font-size: 18px; letter-spacing: 0.08em; }
.sdileni_brana_chyba {
    background: rgba(210, 59, 59, 0.1);
    border: 1px solid rgba(210, 59, 59, 0.3);
    color: #b5302f;
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 14px;
    margin: 0 0 18px;
}
.sdileni_brana_napoveda { margin: 14px 0 0; font-size: 12px; color: var(--barva_text_slaby); }

/* Chybová/info obrazovka. */
.sdileni_zprava_ikona { font-size: 40px; margin-bottom: 12px; }
.sdileni_zprava_nadpis { margin: 0 0 10px; font-size: 22px; font-weight: 800; }
.sdileni_zprava_text { margin: 0; color: var(--barva_text_slaby); line-height: 1.6; }

.sdileni_paticka {
    margin-top: 28px;
    text-align: center;
}
.sdileni_paticka p { margin: 0; font-size: 12px; color: var(--barva_text_slaby); line-height: 1.5; }

/* ----------------------------------------------------------------------------
   Sekce Uživatelé + Pečovatelé (uzivatele.php)
   ------------------------------------------------------------------------- */

/* Samostatný tabulkový obal (mimo .karta) nemá vlastní spodní margin, takže
   by na něj další sekce nasedla těsně. Dorovnáme na mezeru mezi kartami. */
.tabulka_obal_sekce { margin-bottom: 22px; }

/* Akce Upravit/Smazat jako ikony (stejné jako v tabulce klientů, .akce_ikona).
   Ikony sedí i na <button>, jen srovnáme font a zrušíme nativní odsazení. */
.radek_akce button.akce_ikona { font: inherit; cursor: pointer; }
/* Mazací ikona – nebezpečná varianta (zvýrazní se červeně až na hover). */
.akce_ikona_smazat { color: var(--barva_text_slaby); }
.akce_ikona_smazat:hover { color: #d23b3b; border-color: #d23b3b; }
/* Formulář kolem mazací ikony nesmí rozbít zarovnání řádku akcí. */
.radek_akce form { display: inline-flex; margin: 0; }

/* Řádky formulářů v modálu úpravy uživatele pod sebe (ne vedle). */
.mini_formular_modal { margin-bottom: 12px; }

/* Klienti – finální mobilní layout seznamu a filtrů. */
@media (max-width: 620px) {
    .filtr_lista {
        gap: 8px;
        padding: 10px 12px;
        margin-bottom: 12px;
        border-radius: 16px;
    }
    .filtr_hledej {
        min-width: 0;
    }
    .filtr_hledej .formular_vstup,
    .filtr_lista .formular_vstup {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 13px;
    }
    .filtr_archiv,
    .filtr_archiv_samostatne {
        font-size: 12.5px;
        margin-bottom: 12px;
    }
    .abeceda {
        gap: 4px;
        padding: 6px 8px;
        margin-bottom: 12px;
        border-radius: 16px;
    }
    .pismeno {
        min-width: 32px;
        height: 32px;
        padding: 0 9px;
        font-size: 12.5px;
    }
    .domovy_prepinace {
        gap: 4px;
        padding: 5px;
        margin-bottom: 14px;
        border-radius: 16px;
    }
    .domovy_prepinace .menu_polozka {
        min-height: 34px;
        padding: 8px 11px;
        font-size: 12.5px;
    }
    .domovy_prepinace .domov_pocet {
        min-width: 17px;
        height: 17px;
        padding: 0 5px;
        font-size: 10.5px;
    }

    #vysledky .tabulka_obal {
        border-radius: 20px;
        overflow: hidden;
    }
    #vysledky .tabulka tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "jmeno akce"
            "domov akce"
            "info info"
            "koupani koupani"
            "naplasti pmk";
        align-items: start;
        column-gap: 10px;
        row-gap: 7px;
        padding: 14px 12px 13px 18px;
        min-height: 0;
    }
    #vysledky .tabulka .bunka_jmeno {
        font-size: 17px;
        line-height: 1.2;
        padding-right: 4px;
    }
    #vysledky .tabulka td[data-popisek="Domov"] {
        font-size: 13px;
        line-height: 1.25;
        max-width: 100%;
    }
    #vysledky .tabulka td[data-popisek="Info"] {
        grid-area: info;
        padding: 0;
        white-space: normal;
    }
    #vysledky .tabulka td[data-popisek="Info"]::before {
        display: none;
    }
    #vysledky .tabulka .bunka_info .info_ikony {
        justify-content: flex-start;
        gap: 8px;
        min-height: 22px;
        font-size: 13px;
        flex-wrap: wrap;
    }
    #vysledky .tabulka .bunka_info .info_zdravi {
        gap: 5px;
    }

    #vysledky .tabulka td[data-popisek="Koupání"] { grid-area: koupani; }
    #vysledky .tabulka td[data-popisek="Náplasti"] { grid-area: naplasti; }
    #vysledky .tabulka td[data-popisek="PMK"] { grid-area: pmk; }
    #vysledky .tabulka .bunka_koupani {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 0;
        font-size: 12.5px;
        overflow: visible;
    }
    #vysledky .tabulka .bunka_koupani[data-popisek]::before {
        display: inline-flex;
        flex: 0 0 auto;
        min-width: 66px;
        margin: 0;
        color: var(--barva_text_slaby);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    #vysledky .tabulka td[data-popisek="PMK"]::before {
        min-width: 30px;
    }
    #vysledky .tabulka .koupani_dny {
        gap: 4px;
        min-width: 0;
    }
    #vysledky .tabulka .koupani_den {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 7px;
        font-size: 12px;
        line-height: 1;
    }
    #vysledky .tabulka .koupani_prazdno {
        font-size: 13px;
    }

    #vysledky .tabulka .bunka_akce {
        align-self: start;
        padding-top: 0;
    }
    #vysledky .tabulka .radek_akce {
        gap: 6px;
        padding: 0;
    }
    #vysledky .tabulka .akce_ikona {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.66);
    }
    #vysledky .tabulka .akce_ikona svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 380px) {
    .filtr_lista { padding: 9px 10px; }
    .pismeno { min-width: 30px; height: 31px; padding: 0 8px; font-size: 12px; }
    .domovy_prepinace .menu_polozka { min-height: 32px; padding: 7px 10px; font-size: 12px; }
    #vysledky .tabulka tbody tr {
        padding-left: 14px;
        padding-right: 10px;
        column-gap: 8px;
        row-gap: 6px;
    }
    #vysledky .tabulka .bunka_jmeno { font-size: 16px; }
    #vysledky .tabulka .akce_ikona { width: 36px; height: 36px; }
    #vysledky .tabulka .bunka_koupani[data-popisek]::before { min-width: 58px; font-size: 11px; }
    #vysledky .tabulka td[data-popisek="PMK"]::before { min-width: 28px; }
    #vysledky .tabulka .koupani_den { min-width: 23px; height: 23px; font-size: 11.5px; line-height: 1; }
}
/* Klienti – mobilní polish: zdravotní info vpravo, péče jako sekundární seznam. */
@media (max-width: 620px) {
    #vysledky .tabulka tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "jmeno akce"
            "domov info"
            "koupani koupani"
            "naplasti naplasti"
            "pmk pmk";
        row-gap: 6px;
        padding-top: 13px;
        padding-bottom: 12px;
    }
    #vysledky .tabulka td[data-popisek="Domov"] {
        align-self: center;
    }
    #vysledky .tabulka td[data-popisek="Info"] {
        justify-self: end;
        align-self: center;
        max-width: 46vw;
    }
    #vysledky .tabulka .bunka_info .info_ikony {
        justify-content: flex-end;
        gap: 7px;
        min-height: 20px;
    }
    #vysledky .tabulka .bunka_info .info_ikona,
    #vysledky .tabulka .bunka_info .info_zdravi_ikona {
        font-size: 12px;
    }
    #vysledky .tabulka .bunka_koupani {
        gap: 7px;
        min-height: 21px;
        font-size: 11.5px;
        color: var(--barva_text_slaby);
    }
    #vysledky .tabulka .bunka_koupani[data-popisek]::before {
        min-width: 58px;
        font-size: 10.5px;
        letter-spacing: 0.05em;
    }
    #vysledky .tabulka td[data-popisek="PMK"]::before {
        min-width: 58px;
    }
    #vysledky .tabulka .koupani_den {
        min-width: 21px;
        height: 21px;
        padding: 0 6px;
        font-size: 11px;
    }
    #vysledky .tabulka .koupani_prazdno {
        font-size: 12px;
        opacity: 0.55;
    }
}

@media (max-width: 380px) {
    #vysledky .tabulka td[data-popisek="Info"] { max-width: 42vw; }
    #vysledky .tabulka .bunka_koupani[data-popisek]::before,
    #vysledky .tabulka td[data-popisek="PMK"]::before {
        min-width: 54px;
    }
    #vysledky .tabulka .koupani_den {
        min-width: 20px;
        height: 20px;
        font-size: 10.5px;
    }
}
/* Klienti – mobilní korekce: bez mezery po ikonách, zdravotní info níž vpravo. */
@media (max-width: 620px) {
    #vysledky .tabulka tbody tr {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "jmeno"
            "domov"
            "koupani"
            "naplasti"
            "pmk";
        padding-right: 140px;
        row-gap: 5px;
    }
    #vysledky .tabulka .bunka_akce {
        position: absolute;
        top: 13px;
        right: 12px;
        padding: 0;
    }
    #vysledky .tabulka td[data-popisek="Info"] {
        position: absolute;
        top: 78px;
        right: 18px;
        max-width: 126px;
        padding: 0;
    }
    #vysledky .tabulka .bunka_info .info_ikony {
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        min-height: 22px;
    }
    #vysledky .tabulka .bunka_koupani {
        padding-right: 122px;
    }
}

@media (max-width: 380px) {
    #vysledky .tabulka tbody tr {
        padding-right: 126px;
    }
    #vysledky .tabulka .bunka_akce {
        right: 10px;
    }
    #vysledky .tabulka td[data-popisek="Info"] {
        top: 74px;
        right: 14px;
        max-width: 112px;
    }
    #vysledky .tabulka .bunka_info .info_ikony { gap: 6px; }
    #vysledky .tabulka .bunka_koupani { padding-right: 108px; }
}
/* Klienti - mobilni dorovnani radku pece. */
@media (max-width: 620px) {
    #vysledky .tabulka .bunka_jmeno {
        font-size: 18px;
        line-height: 1.18;
        font-weight: 800;
    }

    #vysledky .tabulka .bunka_koupani {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr);
        align-items: center;
        gap: 7px;
        width: 100%;
        min-height: 22px;
        padding-right: 0;
        font-size: 11px;
        font-weight: 500;
    }

    #vysledky .tabulka .bunka_koupani[data-popisek]::before,
    #vysledky .tabulka td[data-popisek="PMK"]::before {
        min-width: 0;
        width: 70px;
        font-size: 10.5px;
        font-weight: 650;
        letter-spacing: 0.035em;
    }

    #vysledky .tabulka .koupani_dny {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        min-width: 0;
    }

    #vysledky .tabulka .koupani_prazdno {
        font-weight: 500;
    }
}

@media (max-width: 380px) {
    #vysledky .tabulka .bunka_jmeno {
        font-size: 17px;
    }

    #vysledky .tabulka .bunka_koupani {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 6px;
        padding-right: 0;
    }

    #vysledky .tabulka .bunka_koupani[data-popisek]::before,
    #vysledky .tabulka td[data-popisek="PMK"]::before {
        width: 64px;
    }
}

/* Zpravy - mobilni polish prepinace domovu a composeru. */
@media (max-width: 620px) {
    .domovy_prepinace.zpravy_prepinace {
        width: auto;
        max-width: calc(100vw - 24px);
        justify-content: flex-start;
        gap: 6px;
        padding: 5px;
        margin: -2px 0 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.46);
        border-color: rgba(255, 255, 255, 0.62);
        box-shadow: 0 8px 22px rgba(63, 94, 168, 0.1);
    }

    .zpravy_prepinace .menu_polozka,
    .zpravy_prepinace.ma_fazolku .menu_polozka_aktivni {
        min-height: 34px;
        padding: 8px 11px;
        gap: 7px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        box-shadow: none;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1;
    }

    .zpravy_prepinace .menu_polozka_aktivni,
    .zpravy_prepinace.ma_fazolku .menu_polozka_aktivni,
    .zpravy_prepinace .menu_polozka_aktivni:hover {
        color: #fff;
        background: linear-gradient(140deg, #5b7df0, #3b63da);
        box-shadow: 0 7px 16px rgba(59, 99, 218, 0.26);
    }

    .zpravy_prepinace .menu_polozka:has(.menu_odznak) {
        padding-right: 10px;
    }

    .zpravy_prepinace .menu_odznak,
    .zpravy_prepinace .menu_polozka_aktivni .menu_odznak {
        position: static;
        top: auto;
        right: auto;
        animation: none;
        min-width: 18px;
        height: 18px;
        margin: 0;
        padding: 0 5px;
        font-size: 10.5px;
        font-weight: 800;
        color: #fff;
        background: #df6048;
        box-shadow: none;
    }

    .zpravy_prepinace .menu_polozka_aktivni .menu_odznak {
        color: #3459c8;
        background: rgba(255, 255, 255, 0.9);
    }

    .panel_hlava_chat {
        margin-bottom: 16px;
    }

    .chat_vstup {
        top: calc(62px + env(safe-area-inset-top, 0px));
        display: grid;
        grid-template-columns: 40px 40px minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px;
        padding: 6px 7px 6px 8px;
        margin-bottom: 20px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 10px 28px rgba(63, 94, 168, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.68);
    }

    .chat_priloha {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .chat_priloha_ikona {
        width: 21px;
        height: 21px;
    }

    .chat_mikrofon {
        margin-left: 0;
    }

    .chat_textarea {
        min-height: 40px;
        max-height: 104px;
        padding: 8px 3px;
        font-size: 15px;
        line-height: 1.35;
    }

    .chat_odeslat {
        min-height: 40px;
        padding: 10px 17px;
        font-size: 14px;
        border-radius: 999px;
    }

    .chat_nahled {
        margin-top: -8px;
    }

    .chat_audio_nahled {
        margin-top: -8px;
        margin-bottom: 20px;
    }
}

@media (max-width: 380px) {
    .zpravy_prepinace .menu_polozka,
    .zpravy_prepinace.ma_fazolku .menu_polozka_aktivni {
        min-height: 32px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .chat_vstup {
        grid-template-columns: 38px 38px minmax(0, 1fr) auto;
        gap: 2px;
        padding-left: 6px;
    }

    .chat_priloha {
        width: 38px;
        height: 38px;
    }

    .chat_textarea {
        font-size: 14.5px;
    }

    .chat_odeslat {
        min-height: 38px;
        padding: 9px 13px;
        font-size: 13.5px;
    }
}

/* Zpravy - pojistka gridu composeru pri skrytem mikrofonu. */
@media (max-width: 620px) {
    .chat_vstup > label.chat_priloha { grid-column: 1; }
    .chat_vstup > .chat_mikrofon { grid-column: 2; }
    .chat_vstup > .chat_textarea { grid-column: 3; }
    .chat_vstup > .chat_odeslat { grid-column: 4; }

    .chat_vstup:not(:has(.chat_mikrofon:not([hidden]))) {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    .chat_vstup:not(:has(.chat_mikrofon:not([hidden]))) > .chat_textarea { grid-column: 2; }
    .chat_vstup:not(:has(.chat_mikrofon:not([hidden]))) > .chat_odeslat { grid-column: 3; }
}

@media (max-width: 380px) {
    .chat_vstup:not(:has(.chat_mikrofon:not([hidden]))) {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }
}

/* Zpravy - mobilni zhutneni samotnych zprav. */
@media (max-width: 620px) {
    .chat_zpravy {
        gap: 16px;
    }

    .chat_bublina {
        padding: 12px 15px;
        border-radius: 18px;
    }

    .chat_hlavicka {
        gap: 6px;
        margin-bottom: 4px;
        font-size: 11.5px;
    }

    .chat_autor {
        font-size: 12.5px;
    }

    .chat_cas {
        padding-left: 8px;
    }

    .chat_text {
        font-size: 14.5px;
        line-height: 1.44;
    }

    .chat_foto {
        height: 200px;
        margin-top: 9px;
        border-radius: 12px;
    }

    .chat_text + .chat_foto {
        margin-top: 10px;
    }

    .chat_ukol_patka {
        margin-top: 8px;
    }
}

@media (max-width: 380px) {
    .chat_zpravy {
        gap: 14px;
    }

    .chat_bublina {
        padding: 11px 13px;
    }

    .chat_text {
        font-size: 14px;
        line-height: 1.42;
    }
}

/* Zpravy - plne kulata mobilni lista kategorii. */
@media (max-width: 620px) {
    .domovy_prepinace.zpravy_prepinace {
        border-radius: 999px;
    }

    .zpravy_prepinace .menu_polozka,
    .zpravy_prepinace.ma_fazolku .menu_polozka_aktivni,
    .zpravy_prepinace .menu_polozka_aktivni,
    .zpravy_prepinace .menu_polozka_aktivni:hover {
        border-radius: 999px;
    }

    .zpravy_prepinace .fazolka {
        border-radius: 999px;
    }
}

/* Zpravy - mobilne skryty popisek pod nadpisem. */
@media (max-width: 620px) {
    .panel_hlava_chat .podnadpis {
        display: none;
    }
}

/* Zpravy - vertikalni vystredeni textu v mobilnim composeru. */
@media (max-width: 620px) {
    .chat_textarea {
        height: 40px;
        min-height: 40px;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 40px;
        overflow-y: hidden;
    }

    .chat_textarea:not(:placeholder-shown) {
        line-height: 1.35;
        padding-top: 9px;
        padding-bottom: 9px;
        overflow-y: auto;
    }
}

@media (max-width: 380px) {
    .chat_textarea {
        height: 38px;
        min-height: 38px;
        line-height: 38px;
    }

    .chat_textarea:not(:placeholder-shown) {
        line-height: 1.32;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* Zpravy - mobilni odeslani jako ikona vlastovky. */
.chat_odeslat_ikona {
    display: none;
    width: 20px;
    height: 20px;
}

@media (max-width: 620px) {
    .chat_odeslat {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        gap: 0;
        border-radius: 999px;
    }

    .chat_odeslat_text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .chat_odeslat_ikona {
        display: block;
        width: 21px;
        height: 21px;
        transform: translateX(1px);
    }
}

@media (max-width: 380px) {
    .chat_odeslat {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .chat_odeslat_ikona {
        width: 20px;
        height: 20px;
    }
}

/* Zpravy - dorovnani ikony odeslani pro vsechny breakpointy. */
.chat_odeslat {
    display: inline-grid;
    grid-auto-flow: column;
    place-items: center;
    align-items: center;
    justify-content: center;
}

.chat_odeslat_ikona {
    display: block;
    flex: none;
    width: 19px;
    height: 19px;
}

@media (max-width: 620px) {
    .chat_odeslat {
        display: grid;
        place-items: center;
    }

    .chat_odeslat_ikona {
        width: 21px;
        height: 21px;
        transform: none;
    }
}

/* Zpravy - desktopove zkraceni praveho odsazeni tlacitka odeslani. */
.chat_odeslat {
    column-gap: 7px;
    padding-right: 22px;
}

/* Zpravy - desktopove opticke snizeni ikony odeslani. */
.chat_odeslat_ikona {
    transform: translateY(2px);
}

@media (max-width: 620px) {
    .chat_odeslat_ikona {
        transform: none;
    }
}

/* Zpravy - vraceni desktopove ikony odeslani na stred. */
.chat_odeslat_ikona {
    transform: none;
}

/* Zpravy - oprava centrovani mobilni ikony odeslani po desktop upravach. */
@media (max-width: 620px) {
    .chat_odeslat {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        column-gap: 0 !important;
        border-radius: 999px;
    }

    .chat_odeslat_ikona {
        display: block !important;
        width: 21px;
        height: 21px;
        margin: 0;
        transform: translateX(1px);
    }
}

@media (max-width: 380px) {
    .chat_odeslat {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .chat_odeslat_ikona {
        width: 20px;
        height: 20px;
    }
}

/* Zpravy - jemne doleva mobilni ikona odeslani. */
@media (max-width: 620px) {
    .chat_odeslat_ikona {
        transform: translateX(-0.5px);
    }
}

/* Uzivatele - mobilni polish akci a tabulky pecovatelu. */
@media (max-width: 620px) {
    body:has([data-pecovatel-pridat]) .panel_hlava > .panel_akce {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    body:has([data-pecovatel-pridat]) .panel_hlava > .panel_akce .tlacitko {
        width: 100%;
        min-height: 48px;
        padding: 10px 14px;
        border-radius: 999px;
        gap: 8px;
        justify-content: center;
        white-space: nowrap;
        font-size: 13.5px;
        line-height: 1;
    }

    body:has([data-pecovatel-pridat]) .panel_hlava > .panel_akce .tlacitko svg {
        width: 18px;
        height: 18px;
    }

    body:has([data-pecovatel-pridat]) .panel_hlava > .panel_akce .tlacitko {
        text-wrap: nowrap;
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce {
        margin-top: 10px;
        margin-left: -20px;
        margin-right: -20px;
        overflow: hidden;
        border-radius: 0;
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "jmeno akce"
            "domov akce";
        align-items: center;
        gap: 8px 12px;
        padding: 16px 18px;
        border-top: 0;
        border-bottom: 1px solid rgba(63, 94, 168, 0.1);
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka tbody tr:last-child {
        border-bottom: 0;
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka .bunka_jmeno {
        grid-area: jmeno;
        flex: initial;
        width: auto;
        padding: 0;
        margin: 0;
        border: 0;
        font-size: 18px;
        line-height: 1.15;
        font-weight: 800;
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka td[data-popisek="Domov"] {
        grid-area: domov;
        display: inline-flex;
        justify-self: start;
        width: auto;
        max-width: 100%;
        padding: 5px 12px;
        border-radius: 999px;
        background: rgba(63, 94, 168, 0.06);
        font-size: 13px;
        line-height: 1;
        color: var(--barva_text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka td[data-popisek="Domov"]::before {
        display: inline;
        margin: 0 6px 0 0;
        font-size: 10.5px;
        line-height: 1;
        letter-spacing: 0.04em;
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka .bunka_akce_uziv {
        grid-area: akce;
        position: static;
        transform: none;
        align-self: center;
        justify-self: end;
        padding: 0;
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka .bunka_akce_uziv .radek_akce {
        gap: 5px;
        padding: 0;
        background: transparent;
        border-radius: 0;
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka .akce_ikona {
        width: 39px;
        height: 39px;
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.72);
        border-color: rgba(255, 255, 255, 0.82);
        box-shadow: 0 4px 12px rgba(63, 94, 168, 0.08);
    }
}

@media (max-width: 380px) {
    body:has([data-pecovatel-pridat]) .panel_hlava > .panel_akce .tlacitko {
        min-height: 44px;
        padding: 9px 10px;
        gap: 6px;
        font-size: 12.5px;
    }

    body:has([data-pecovatel-pridat]) .panel_hlava > .panel_akce .tlacitko svg {
        width: 17px;
        height: 17px;
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka tbody tr {
        padding: 15px 14px;
    }

    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka .akce_ikona {
        width: 37px;
        height: 37px;
    }
}

/* Uzivatele - sjednoceni jmen pecovatelu s kartami uzivatelu. */
@media (max-width: 620px) {
    body:has([data-pecovatel-pridat]) .karta .tabulka_obal_sekce .tabulka .bunka_jmeno {
        font-size: 17px;
        line-height: 1.2;
        font-weight: 700;
    }
}

/* Ukony - mobilni redesign checklistu do kompaktnich karet. */
@media (max-width: 620px) {
    body:has(.dnes_formular) .panel_hlava {
        margin-bottom: 12px;
    }

    body:has(.dnes_formular) .panel_hlava .podnadpis {
        display: none;
    }

    .dnes_nedokoncene {
        margin-bottom: 16px;
    }

    .dnes_nedokoncene_prepinac {
        width: 100%;
        min-height: 44px;
        padding: 9px 14px;
        border-radius: 999px;
        gap: 9px;
        font-size: 14px;
        justify-content: flex-start;
    }

    .dnes_nedokoncene_prepinac > span:first-of-type {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dnes_nedokoncene_pocet {
        margin-left: auto;
        min-width: 28px;
        height: 24px;
        font-size: 12px;
    }

    .dnes_nastroje {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .dnes_navigace {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .dnes_navigace > .tlacitko,
    .dnes_navigace > .tlacitko_zakazane {
        min-width: 0;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 999px;
        font-size: 18px;
    }

    .dnes_datum_popisek {
        min-width: 0;
        font-size: 16px;
        line-height: 1.25;
    }

    .dnes_navigace .kalendar_rozbal {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .dnes_navigace .kalendar_rozbal > .tlacitko {
        width: 100%;
        min-height: 42px;
        border-radius: 999px;
        font-size: 14px;
    }

    .dnes_souhrn {
        justify-self: center;
        font-size: 14px;
    }

    body:has(.dnes_formular) .domovy_prepinace#domovy {
        width: auto;
        max-width: none;
        margin: 0 0 14px;
        padding: 5px;
        border-radius: 999px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body:has(.dnes_formular) .domovy_prepinace#domovy::-webkit-scrollbar {
        display: none;
    }

    body:has(.dnes_formular) .domovy_prepinace#domovy .menu_polozka {
        min-height: 34px;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 12.5px;
        flex: 0 0 auto;
    }

    .dnes_obal {
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* =========================================================================
       ÚKONY – mobilní karta klienta (konsolidováno do JEDNOHO bloku).
       Řádek tabulky = skleněná karta. Uvnitř:
         · hlavička  = jméno + chip domova (celá šířka),
         · úkoly     = pravidelná 4sloupcová mřížka dlaždic (ikona úkolu + checkbox);
                       místo textu jen ikona s tooltipem jako v hlavičce tabulky
                       → 4 vedle sebe, stejně velké dlaždice = profesionální rytmus,
         · měření+stav = spodní řádky přes celou šířku (popisek vlevo, tlačítko vpravo).
       Cíl: víc obsahu na méně místa, žádné mrtvé svislé mezery. ======= */
    .dnes_tabulka,
    .dnes_tabulka tbody {
        display: block;
        width: 100%;
    }

    .dnes_tabulka thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .dnes_tabulka tbody tr.dnes_radek {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        column-gap: 8px;
        row-gap: 8px;
        margin-bottom: 12px;
        padding: 14px 14px 13px;
        border: 1px solid rgba(255, 255, 255, 0.82);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.58);
        box-shadow: 0 10px 26px rgba(63, 94, 168, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.62);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
    }

    .dnes_tabulka tbody tr.dnes_radek:last-child {
        margin-bottom: 0;
    }

    .dnes_tabulka tbody tr.dnes_radek:hover {
        background: rgba(255, 255, 255, 0.58);
    }

    .dnes_tabulka tbody tr.dnes_radek_hotovo {
        background: rgba(213, 240, 224, 0.82);
        border-color: rgba(90, 167, 118, 0.4);
    }

    /* Hlavička karty: jen jméno a pod ním název domova. Žádné „KLIENT"/„DOMOV",
       žádné pozadí ani čáry – čistě a kompaktně pod sebou.
       (:not(.tabulka_medikace_edit) dorovnává specificitu obecného kartového
       pravidla, které jinak přidá spodní čáru pod jméno.) */
    .dnes_tabulka:not(.tabulka_medikace_edit) tbody .bunka_jmeno {
        grid-column: 1 / -1;
        display: block;
        min-width: 0;
        padding: 0;
        margin: 0;
        border: 0;
        border-bottom: 0;
        white-space: normal;
    }

    /* „KLIENT" nad jménem NECHCEME – přebíjí obecné td[data-popisek]::before. */
    .dnes_tabulka:not(.tabulka_medikace_edit) tbody .bunka_jmeno[data-popisek]::before,
    .dnes_tabulka tbody .bunka_jmeno::before {
        content: none;
        display: none;
    }

    .dnes_jmeno {
        font-size: 18px;
        font-weight: 800;
        line-height: 1.15;
        white-space: normal;
    }

    /* Název domova jako prostý řádek pod jménem – bez chipu, bez popisku „DOMOV". */
    .dnes_tabulka:not(.tabulka_medikace_edit) tbody td[data-popisek="Domov"] {
        grid-column: 1 / -1;
        display: block;
        width: auto;
        max-width: 100%;
        min-height: 0;
        padding: 0;
        margin: 1px 0 10px;
        border: 0;
        background: transparent;
        color: var(--barva_text_slaby);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
    }

    .dnes_tabulka:not(.tabulka_medikace_edit) tbody td[data-popisek="Domov"]::before,
    .dnes_tabulka tbody td[data-popisek="Domov"]::before {
        content: none;
        display: none;
    }

    /* Úkol, který se v tento den nevyžaduje, dlaždici vůbec nezabírá. */
    .dnes_tabulka tbody .dnes_bunka:has(.dnes_neaktualni) {
        display: none;
    }

    /* Dlaždice zaškrtávacího úkolu: JEN ikona nahoře a checkbox dole. Žádný text –
       identifikaci nese ikona s tooltipem (klik/tap). Vejdou se 4 vedle sebe. */
    .dnes_tabulka tbody .dnes_bunka {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        /* Jednotná výška všech dlaždic (checkbox i text) → řádky karty jsou
           zarovnané bez ohledu na to, zda dlaždice nese ikonu+checkbox nebo text. */
        min-height: 46px;
        padding: 9px 4px;
        border: 1px solid rgba(63, 94, 168, 0.08);
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.5);
    }

    /* Textový popisek dlaždic na mobilu NEZOBRAZUJEME u ŽÁDNÉ dlaždice (přebíjí
       i obecné „td[data-popisek]::before" z kartového režimu – proto plná cesta
       selektoru). Identifikaci nese ikona; Měření/Stav navíc krátký text v tlačítku. */
    .dnes_tabulka:not(.tabulka_medikace_edit) tbody .dnes_bunka[data-popisek]::before,
    .dnes_tabulka tbody .dnes_bunka[data-popisek]::before {
        content: none;
        display: none;
    }

    /* Ikona úkolu v dlaždici (na mobilu viditelná). Klik/tap na ni ukáže tooltip
       s názvem úkolu; label ji obklopuje, takže tap poblíž zaškrtne checkbox.
       Ikona a checkbox VEDLE sebe (ne pod sebou) → dlaždice je nižší, ušetří
       se svislé místo a vyplní se jinak prázdná šířka. */
    .dnes_check { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; }
    .dnes_check_ikona {
        display: block;
        width: 22px;
        height: 22px;
        color: var(--barva_text_slaby);
    }

    .dnes_check_box {
        width: 24px;
        height: 24px;
        border-radius: 8px;
    }

    /* Měření + Stav = stejné dlaždice jako zaškrtávátka (span 1, 3 na řádek).
       Bez popisku; celá dlaždice je tlačítko: ikona nahoře, krátký stav dole
       („Zadat" / „Vyplněno" / „Poznámka"…). */
    .dnes_tabulka tbody .dnes_bunka_mereni,
    .dnes_tabulka tbody .dnes_bunka_text {
        grid-column: auto;
        padding: 0;                     /* tlačítko vyplní celou dlaždici */
        overflow: hidden;
    }

    .dnes_bunka_mereni .dnes_mereni_tlacitko,
    .dnes_bunka_text .dnes_stav_tlacitko {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 9px 4px;
        border: 0;
        border-radius: 13px;
        background: transparent;
        color: var(--barva_text_slaby);
        font-size: 12px;
        line-height: 1.1;
        text-align: center;
    }

    .dnes_mereni_tlacitko svg,
    .dnes_stav_tlacitko svg {
        width: 22px;
        height: 22px;
    }

    /* Na splněném (zeleném) řádku by se do průhledných dlaždic a tlačítek prosvítalo
       zelené pozadí řádku (→ modrozelený mix). Dáme jim proto NEprůhledné pozadí
       shodné s tím, jak dlaždice vypadá na běžném řádku – zelená se nepropíše.
       Plná cesta selektoru (.dnes_tabulka tbody …) musí přebít pravidlo pozadí
       dlaždice výše, které má vyšší specificitu. */
    .dnes_tabulka tbody .dnes_radek_hotovo .dnes_bunka,
    .dnes_tabulka tbody .dnes_radek_hotovo .dnes_mereni_tlacitko,
    .dnes_tabulka tbody .dnes_radek_hotovo .dnes_stav_tlacitko {
        background: #f2f5fb;
    }

    /* Sjednocení ikon v dlaždicích: check-ikony mají v HTML tah 1.8, tlačítka
       Měření/Stav tah 2 → vypadaly „tučnější". Srovnáme rozměr i tloušťku tahu,
       ať všechny ikony na kartě působí jako jedna sada. */
    .dnes_tabulka tbody .dnes_check_ikona,
    .dnes_tabulka tbody .dnes_mereni_tlacitko svg,
    .dnes_tabulka tbody .dnes_stav_tlacitko svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.8;
    }

    .dnes_ulozit_lista {
        position: sticky;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 50;
        margin-top: 14px;
        padding: 10px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.82);
    }

    .dnes_ulozit_stav:empty {
        display: none;
    }
}

@media (max-width: 380px) {
    .dnes_tabulka tbody tr.dnes_radek {
        padding: 13px 12px;
        column-gap: 4px;
        border-radius: 20px;
    }

    .dnes_jmeno {
        font-size: 17px;
    }

    /* Užší telefon: dlaždice i ikony o kousek menší, ať 3 v řadě dýchají. */
    .dnes_tabulka tbody .dnes_bunka {
        padding: 8px 2px;
    }

    .dnes_check_ikona,
    .dnes_mereni_tlacitko svg,
    .dnes_stav_tlacitko svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.8;
    }

    /* Užší telefon: menší rozestup ikona↔checkbox, ať se do úzké dlaždice vejdou. */
    .dnes_check { gap: 9px; }
}

/* Ukony - mobilni druhy radek navigace Dnes + Kalendar. */
@media (max-width: 620px) {
    .dnes_navigace > a.tlacitko[href="ukony.php"] {
        grid-column: 1 / 2;
        width: 100%;
        height: 42px;
        min-height: 42px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 700;
    }

    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) .kalendar_rozbal {
        grid-column: 2 / -1;
    }

    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) .kalendar_rozbal > .tlacitko {
        min-height: 42px;
    }
}

/* Ukony - mobilni Dnes a Kalendar jako stejne poloviny. */
@media (max-width: 620px) {
    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-flow: row;
    }

    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) > .tlacitko:not([href="ukony.php"]),
    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) > .tlacitko_zakazane,
    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) > .dnes_datum_popisek {
        grid-column: auto;
    }

    .dnes_navigace > a.tlacitko[href="ukony.php"] {
        grid-column: 1 / 2;
        width: 100%;
        min-width: 0;
        height: 42px;
        min-height: 42px;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 700;
    }

    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) .kalendar_rozbal {
        grid-column: 2 / 3;
        width: 100%;
        min-width: 0;
    }

    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) .kalendar_rozbal > .tlacitko {
        width: 100%;
        min-height: 42px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Ukony - stabilni mobilni navigace s druhym radkem 50/50. */
@media (max-width: 620px) {
    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) > .tlacitko:first-child,
    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) > .tlacitko_zakazane:first-child {
        grid-column: 1 / 2;
        justify-self: start;
        width: 46px;
    }

    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) > .dnes_datum_popisek {
        grid-column: 2 / 4;
        justify-self: center;
    }

    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) > .dnes_datum_popisek + .tlacitko,
    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) > .dnes_datum_popisek + .tlacitko_zakazane {
        grid-column: 4 / 5;
        justify-self: end;
        width: 46px;
    }

    .dnes_navigace > a.tlacitko[href="ukony.php"] {
        grid-column: 1 / 3;
        justify-self: stretch;
        width: 100%;
    }

    .dnes_navigace:has(> a.tlacitko[href="ukony.php"]) .kalendar_rozbal {
        grid-column: 3 / 5;
        justify-self: stretch;
        width: 100%;
    }
}



/* ----------------------------------------------------------------------------
   Hlasový asistent (nástěnka) – spouštěč, overlay, odpovědi
   ------------------------------------------------------------------------- */
/* Hlasový asistent – jedno samostatné kolečko pro všechny šířky (spouští
   overlay): na desktopu těsně před lištou menu, o chlup menší než lišta
   (53 px) a vycentrované na její osu; na mobilu v horní liště před
   hamburgerem (order řeší media queries níže). */
.menu_hlas {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sklo_okraj);
    border-radius: 50%;
    background: var(--sklo_pozadi);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--stin_jemny);
    color: var(--barva_akcent);
    cursor: pointer;
    /* Hover kolečko nadzvedne a rozsvítí pod ním modrou záři. Nic se neškáluje:
       tlačítko má backdrop-filter, tedy sedí ve vlastní vrstvě, a jakékoli
       zvětšení (transform: scale i růst SVG) tu vrstvu roztahuje jako hotový
       obraz – ikona se rozmaže. Posun po ose Y vrstvou jen pohne, obsah zůstane
       ostrý. */
    transition: transform 0.24s ease, box-shadow 0.24s ease, color 0.24s;
}
.menu_hlas svg { position: relative; z-index: 2; }
.menu_hlas:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 22px -4px rgba(59, 111, 224, 0.45),
        0 4px 10px rgba(31, 42, 68, 0.16);
    color: var(--barva_akcent_tmava);
}
/* Stisk kolečko posadí zpět a záři stáhne pod něj – jako by dosedlo. */
.menu_hlas:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px -2px rgba(59, 111, 224, 0.4);
    transition-duration: 0.08s;
}
@media (prefers-reduced-motion: reduce) {
    .menu_hlas { transition: box-shadow 0.2s ease, color 0.2s; }
    .menu_hlas:hover, .menu_hlas:active { transform: none; }
}
/* Dýchající puls – velmi jemné modré halo, naznačí připravený mikrofon. */
.menu_hlas::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1.6px solid rgba(59, 111, 224, 0.375);
    animation: hlas_halo 3.2s ease-out infinite;
    pointer-events: none;
}
@keyframes hlas_halo {
    0%   { transform: scale(0.85); opacity: 0.375; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* ---- Overlay ---- */
.hlas_modal {
    max-width: 640px;
    width: min(640px, calc(100vw - 32px));
    text-align: center;
}
.hlas_hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.hlas_hlava .modal_nadpis { margin: 0; }
.hlas_hlava_akce { display: flex; gap: 6px; }
.hlas_zvuk,
.hlas_zavrit {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(63, 94, 168, 0.2);
    background: rgba(255, 255, 255, 0.7);
    color: var(--barva_text_slaby);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.hlas_zvuk:hover, .hlas_zavrit:hover { color: var(--barva_akcent); border-color: var(--barva_akcent); }
.hlas_zvuk_vypnuty { opacity: 0.55; }
.hlas_zvuk_vypnuty .hlas_zvuk_vlnky { display: none; }

/* ---- Velký mikrofon ---- */
.hlas_mikrofon {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 20px auto 4px;
    border: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--barva_akcent), #7c4fe0);
    box-shadow: 0 16px 38px rgba(101, 84, 220, 0.38);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.hlas_mikrofon:hover { transform: scale(1.05); box-shadow: 0 20px 46px rgba(101, 84, 220, 0.48); }
.hlas_mikrofon_posloucha { animation: hlas_dych 1.6s ease-in-out infinite; }
@keyframes hlas_dych {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
/* Expandující vlny během poslechu. */
.hlas_vlna {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(124, 79, 224, 0.55);
    opacity: 0;
    pointer-events: none;
}
.hlas_mikrofon_posloucha .hlas_vlna_1 { animation: hlas_vlna 1.8s ease-out infinite; }
.hlas_mikrofon_posloucha .hlas_vlna_2 { animation: hlas_vlna 1.8s ease-out 0.6s infinite; }
@keyframes hlas_vlna {
    from { transform: scale(1);   opacity: 0.7; }
    to   { transform: scale(1.9); opacity: 0; }
}

.hlas_prepis {
    min-height: 1.5em;
    margin: 14px auto 2px;
    max-width: 480px;
    color: var(--barva_text_slaby);
    font-size: 15px;
}
.hlas_nepodporovano {
    margin: 16px auto 2px;
    max-width: 440px;
    color: var(--barva_text_slaby);
    font-size: 14px;
}

/* ---- Odpověď ---- */
.hlas_vysledek { text-align: left; margin-top: 14px; }
.hlas_cekam {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--barva_text_slaby);
    margin: 10px 0;
}
.hlas_cekam_tecka {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--barva_akcent);
    animation: hlas_tecka 0.9s ease-in-out infinite;
}
@keyframes hlas_tecka {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.15); }
}
.hlas_zprava { margin: 10px 0 2px; text-align: center; color: var(--barva_text); }
.hlas_zprava_chyba { color: #b23a52; }

.hlas_karta_vysledek {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(63, 94, 168, 0.16);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--stin_jemny);
}
.hlas_karta_hlava {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.hlas_karta_jmeno { font-weight: 700; font-size: 17px; }
.hlas_karta_domov { color: var(--barva_text_slaby); font-size: 13px; }
.hlas_karta_stitek {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #6a48c9;
    background: rgba(124, 79, 224, 0.12);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}
.hlas_karta_prazdno { color: var(--barva_text_slaby); margin: 8px 0; }
.hlas_tabulka_obal { overflow-x: auto; }
.hlas_tabulka { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hlas_tabulka th {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--barva_text_slaby);
    padding: 6px 8px;
    border-bottom: 1px solid rgba(63, 94, 168, 0.18);
}
.hlas_tabulka th:first-child { text-align: left; }
.hlas_tabulka td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid rgba(63, 94, 168, 0.09);
}
.hlas_tabulka tr:last-child td { border-bottom: none; }
.hlas_tabulka_lek { text-align: left; font-weight: 600; }
.hlas_tabulka_pozn { display: block; font-weight: 400; font-size: 12.5px; color: var(--barva_text_slaby); }
.hlas_karta_odkaz {
    display: inline-block;
    margin-top: 12px;
    font-weight: 600;
    color: var(--barva_akcent);
    text-decoration: none;
}
.hlas_karta_odkaz:hover { text-decoration: underline; }

/* Seznamové odpovědi (koupání, narozeniny, upozornění). */
.hlas_seznam { list-style: none; margin: 6px 0 0; padding: 0; }
.hlas_seznam li + li { margin-top: 6px; }
.hlas_seznam a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(63, 94, 168, 0.14);
    text-decoration: none;
    color: var(--barva_text);
    transition: border-color 0.2s, background 0.2s;
}
.hlas_seznam a:hover { border-color: var(--barva_akcent); background: rgba(255, 255, 255, 0.9); }
.hlas_seznam_jmeno { font-weight: 600; }
.hlas_seznam_domov { color: var(--barva_text_slaby); font-size: 12.5px; }
.hlas_seznam_info { margin-left: auto; color: var(--barva_text_slaby); font-size: 13px; }
.hlas_seznam_kriticke a { border-left: 3px solid #d64561; }
.hlas_seznam_varovani a { border-left: 3px solid #e8923a; }

/* Signály jako barevné chipy s ikonou (stejný vzhled jako triage na nástěnce). */
.hlas_seznam_signaly { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; justify-content: flex-end; }
.hlas_signal {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.hlas_signal_ikona_svg { display: block; flex: 0 0 auto; }
.hlas_signal_varovani { background: rgba(232, 146, 58, 0.14); color: #b5511f; }
.hlas_signal_kriticke { background: rgba(224, 85, 111, 0.16); color: #c23052; }

/* Poslední měření – dlaždice ikona + hodnota (místo textového souhrnu). */
.hlas_mereni_dlazdice_obal { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.hlas_mereni_dlazdice {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(63, 94, 168, 0.14);
    color: var(--barva_akcent);
}
.hlas_mereni_hodnota { font-size: 16px; font-weight: 700; color: var(--barva_text); }
/* Hodnota z dřívějška (dnes nezměřeno) – tlumená dlaždice s datem měření. */
.hlas_mereni_dlazdice.hlas_mereni_stara { background: rgba(255, 255, 255, 0.42); border-style: dashed; }
.hlas_mereni_stara .hlas_mereni_hodnota { color: var(--barva_text_slaby); }
.hlas_mereni_kdy { font-size: 12px; font-weight: 600; color: var(--barva_text_slaby); white-space: nowrap; }

/* Souhrn dne – jméno s inline SVG ikonou úkonu (výměny). */
.hlas_souhrn_polozka { display: inline-flex; align-items: center; gap: 4px; }
.hlas_souhrn_polozka .hlas_signal_ikona_svg { color: var(--barva_akcent); }

/* Řádek seznamu bez odkazu (kdo slouží – jen jméno a směna). */
.hlas_seznam_radek {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(63, 94, 168, 0.14);
}

/* Souhrn dne / briefing. */
.hlas_souhrn_seznam { list-style: none; margin: 6px 0 0; padding: 0; }
.hlas_souhrn_radek {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(63, 94, 168, 0.14);
}
.hlas_souhrn_radek + .hlas_souhrn_radek { margin-top: 6px; }
/* Ikona řádku – profesionální SVG (stejné jako jinde v systému), ne emoji.
   Sladěná velikost a barevný akcent; nepatrný posun, ať sedí na první řádek. */
.hlas_souhrn_ikona {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 1px;
    color: var(--barva_akcent);
}
.hlas_souhrn_ikona svg { display: block; }
/* Pozornost je varovný řádek – ikona i lišta v červené. */
.hlas_souhrn_pozor { border-left: 3px solid #d64561; }
.hlas_souhrn_pozor .hlas_souhrn_ikona { color: #d64561; }

/* Kdo slouží – seskupení po domovech. */
.hlas_sluzba_domov + .hlas_sluzba_domov { margin-top: 12px; }
.hlas_sluzba_nazev {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--barva_text_slaby);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Chipy (ukázky, výběr z více klientů) ---- */
.hlas_priklady, .hlas_volby {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.hlas_volby { margin-top: 10px; }
.hlas_cip {
    border: 1px solid rgba(63, 94, 168, 0.22);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--barva_text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.hlas_cip:hover { border-color: var(--barva_akcent); color: var(--barva_akcent); background: rgba(255, 255, 255, 0.95); }
.hlas_cip_domov { color: var(--barva_text_slaby); font-size: 12px; }

/* ---- Nápověda a psaný příkaz ---- */
.hlas_napoveda_prepinac {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 7px 15px 7px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(124, 79, 224, 0.1), rgba(59, 111, 224, 0.05));
    color: var(--barva_akcent);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s, background 0.2s, transform 0.2s;
}
.hlas_napoveda_prepinac:hover {
    text-decoration: none;
    background: linear-gradient(135deg, rgba(124, 79, 224, 0.18), rgba(59, 111, 224, 0.1));
    transform: translateY(-1px);
}
/* Šipka v kolečku – ukazuje dolů, po rozbalení se otočí. */
.hlas_napoveda_prepinac::before {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.25s ease;
}
.hlas_napoveda_prepinac[aria-expanded="true"]::before {
    transform: rotate(-135deg) translate(-1px, -1px);
}
.hlas_napoveda { text-align: left; margin-top: 8px; }
.hlas_napoveda_seznam {
    list-style: none;
    margin: 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(63, 94, 168, 0.14);
    border-radius: 12px;
    font-size: 14px;
}
.hlas_napoveda_seznam li + li { margin-top: 6px; }
.hlas_psani { display: flex; gap: 8px; margin-top: 16px; }
.hlas_vstup { flex: 1; min-width: 0; }
.hlas_odeslat { flex: none; }

@media (prefers-reduced-motion: reduce) {
    .menu_hlas::after,
    .hlas_mikrofon_posloucha,
    .hlas_mikrofon_posloucha .hlas_vlna_1,
    .hlas_mikrofon_posloucha .hlas_vlna_2,
    .hlas_cekam_tecka { animation: none; }
    .hlas_mikrofon_posloucha .hlas_vlna { opacity: 0.5; }
}

/* ============================================================================
   Termíny klienta (karta klienta) + Mimořádné události
   ========================================================================== */

/* Seznam termínů – řádky s odznakem data, názvem a akcemi vpravo. */
.terminy_seznam { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.termin_polozka {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(63, 94, 168, 0.08);
}
.terminy_seznam .termin_polozka:last-child { border-bottom: none; }

/* Hlavička řádku – odznak data + název vedle sebe, kompaktně nad detailem. */
.termin_hlavicka { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Odznak data: výchozí modrý (datum), oranžový (dnes/zítra), červený (po termínu). */
.termin_stitek { flex-shrink: 0; white-space: nowrap; }
.termin_stitek.termin_dnes { background: rgba(196, 112, 31, 0.15); color: var(--oranzova_varovani, #c4701f); }
.termin_stitek.termin_proslo { background: rgba(210, 58, 91, 0.14); color: #d23a5b; }
.termin_stitek_vyrizeno { background: rgba(90, 167, 118, 0.18); color: #1f6b41; }

.termin_telo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.termin_nazev { font-weight: 600; font-size: 15px; }
.termin_detail { color: var(--barva_text_slaby); font-size: 13px; }
.termin_akce { display: inline-flex; gap: 6px; flex-shrink: 0; }

/* Fajfka „vyřízeno" – zelená (výchozí hover ikonových tlačítek je červený). */
.termin_hotovo_tl:hover {
    color: #1f7a44;
    background: rgba(42, 157, 84, 0.1);
    border-color: rgba(42, 157, 84, 0.35);
}

/* Vyřízené termíny – tlumené, sbalené v <details>. */
.terminy_vyrizene { margin-top: 10px; }
.terminy_vyrizene_prepinac {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--barva_text_slaby);
    user-select: none;
}
.terminy_vyrizene_prepinac:hover { color: var(--barva_text); }
.termin_polozka_vyrizena .termin_nazev { color: var(--barva_text_slaby); }

/* Řádek datum + čas v modálech termínu/události. */
.termin_datum_radek { display: grid; grid-template-columns: 1fr 130px; gap: 12px; align-items: start; }
.termin_pole_cas input { width: 100%; }
@media (max-width: 480px) {
    .termin_datum_radek { grid-template-columns: 1fr; gap: 0; }
}

/* Mimořádné události – karta se seznamem záznamů (typ, datum, popis, opatření). */
.udalosti_seznam { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.udalost_polozka { padding: 12px 0; border-bottom: 1px solid rgba(63, 94, 168, 0.08); }
.udalosti_seznam .udalost_polozka:last-child { border-bottom: none; padding-bottom: 4px; }

.udalost_hlava { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.udalost_datum { font-size: 13px; font-weight: 600; }
.udalost_zapsal { font-size: 12px; color: var(--barva_text_slaby); }
.udalost_akce { margin-left: auto; display: inline-flex; gap: 6px; }

/* Barvy odznaků podle typu události (tlumené pozadí + sytý text jako ostatní odznaky). */
.udalost_typ_pad      { background: rgba(210, 58, 91, 0.14);  color: #d23a5b; }
.udalost_typ_zraneni  { background: rgba(196, 112, 31, 0.15); color: #c4701f; }
.udalost_typ_dekubit  { background: rgba(138, 109, 74, 0.16); color: #8a6d4a; }
.udalost_typ_zhorseni { background: rgba(217, 98, 43, 0.15);  color: #d9622b; }
.udalost_typ_jina     { background: rgba(47, 121, 201, 0.14); color: #2f79c9; }

.udalost_popis { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.udalost_opatreni { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.udalost_opatreni_stitek { font-weight: 700; color: #1f6b41; }

/* Nástěnka – nadcházející termíny (sdílí vzhled s Dnešními výměnami). */
.nastenka_termin_ikona { color: var(--barva_akcent); }
.nastenka_termin_ikona_proslo { color: #d23a5b; }
.nastenka_termin_stitek.termin_dnes { color: var(--oranzova_varovani, #c4701f); }
.nastenka_termin_stitek.termin_proslo { color: #d23a5b; }
.nastenka_termin_nazev { font-weight: 600; }

@media (max-width: 560px) {
    /* Řádek termínu na mobilu: akce se zalomí pod text, ať nic nepřetéká. */
    .termin_polozka { flex-wrap: wrap; }
    .termin_akce { margin-left: auto; }
}

/* ----------------------------------------------------------------------------
   Předávka směny (predavka.php + spouštěcí karta na nástěnce)
   ------------------------------------------------------------------------- */
/* Karta-spouštěč na nástěnce: úzký vodorovný pás nad statistikami. */
.nastenka_predavka {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    margin-bottom: 16px;
    border-radius: var(--radius_velky);
    text-decoration: none;
    color: var(--barva_text);
    transition: transform 0.18s, box-shadow 0.2s;
}
.nastenka_predavka:hover {
    transform: translateY(-2px);
    box-shadow: var(--stin_silny);
}
.nastenka_predavka_ikona {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(140deg, #4f86ff, #2a55bd);
    box-shadow: 0 8px 18px rgba(59, 111, 224, 0.35);
}
.nastenka_predavka_text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nastenka_predavka_nadpis { font-size: 15px; font-weight: 700; }
.nastenka_predavka_popis { font-size: 13px; color: var(--barva_text_slaby); }
.nastenka_predavka_tlacitko {
    margin-left: auto;
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--barva_akcent_tmava);
    white-space: nowrap;
}
@media (max-width: 560px) {
    .nastenka_predavka { padding: 12px 14px; gap: 10px; }
    .nastenka_predavka_ikona { width: 38px; height: 38px; }
    .nastenka_predavka_popis { display: none; }
}

/* Stránka předávky – „klid na směně" (nic mimořádného k hlášení). */
.predavka_klid {
    display: flex;
    align-items: center;
    gap: 18px;
}
.predavka_klid_ikona {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #1f7a44;
    background: rgba(42, 157, 84, 0.14);
}
.predavka_klid_nadpis { margin: 0 0 4px; font-size: 18px; }
.predavka_klid_text { margin: 0; font-size: 14px; color: var(--barva_text_slaby); line-height: 1.5; }

/* Sekce předávky sdílí seznamy s nástěnkou (nastenka_vymeny_*); tady jen
   doplňky: závažnostní tečka, tlumený čas/datum, druhý řádek s popisem. */
.predavka_sekce { padding: 20px 22px; }
.predavka_tecka {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
}
.predavka_tecka_kriticke { background: #d23a5b; box-shadow: 0 0 0 4px rgba(210, 58, 91, 0.15); }
.predavka_tecka_varovani { background: #e0902f; box-shadow: 0 0 0 4px rgba(224, 144, 47, 0.15); }
.predavka_slabe { font-size: 12.5px; color: var(--barva_text_slaby); white-space: nowrap; }
.predavka_popis {
    display: block;
    width: 100%;
    margin-top: 3px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--barva_text);
}
.predavka_opatreni { color: #1f6b41; }
.predavka_citace { font-style: italic; color: var(--barva_text_slaby); }
/* Položky s druhým řádkem (události, poznámky, medikace) zarovnat nahoru. */
.predavka_odkaz_vice { align-items: flex-start; }
.predavka_odkaz_vice .nastenka_vymeny_text { flex-wrap: wrap; }

/* Patka s potvrzením – ať je hlavní akce vidět i na konci dlouhého souhrnu. */
.predavka_pata {
    display: flex;
    justify-content: center;
    margin: 6px 0 26px;
}
.predavka_potvrdit { padding: 13px 34px; font-size: 15px; }

@media (max-width: 560px) {
    .predavka_sekce { padding: 14px; }
    .predavka_zpet { display: none; } /* na mobilu stačí potvrzení dole */
}

/* ============================================================================
   Defekty (rány) – seznam na kartě klienta + detail s časovou osou hojení
   ========================================================================= */

/* --- Formulářové pomocné třídy (sdílené modaly defektů) --- */
.formular_radek { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.formular_radek.defekt_rozmery_pole { grid-template-columns: 1fr 1fr 1fr; }
.formular_skupina { border: none; padding: 0; margin: 0 0 14px; }
.formular_skupina > .formular_popisek {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--barva_text_slaby); margin-bottom: 6px; padding: 0;
}
.formular_popisek_maly { font-size: 12px; font-weight: 600; color: var(--barva_text_slaby); }
.formular_napoveda { font-size: 12px; color: var(--barva_text_slaby); }

/* --- Seznam defektů na kartě klienta --- */
.defekt_seznam {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 4px;
}
.defekt_karta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--sklo_okraj);
    border-radius: var(--radius);
    background: var(--sklo_pozadi);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.defekt_karta:hover {
    transform: translateY(-2px);
    box-shadow: var(--stin_jemny);
    border-color: var(--barva_akcent);
}
.defekt_karta_zhojeno { opacity: 0.72; }
.defekt_karta_hlava { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.defekt_nazev { font-weight: 700; font-size: 15px; line-height: 1.25; }
.defekt_karta_meta { display: flex; flex-wrap: wrap; gap: 6px; }
.defekt_meta_polozka {
    font-size: 12px; color: var(--barva_text_slaby);
    background: rgba(59, 111, 224, 0.08);
    padding: 2px 8px; border-radius: 999px;
}
.defekt_karta_paticka { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.defekt_plocha { font-weight: 700; font-size: 14px; }
.defekt_plocha_prazdna { color: var(--barva_text_slaby); font-weight: 500; }
.defekt_pocet { font-size: 12px; color: var(--barva_text_slaby); margin-left: auto; }

/* --- Sparkline plochy rány --- */
.defekt_spark { width: 88px; height: 26px; display: block; }
.defekt_spark_lepsi { color: #1f6b41; }   /* plocha klesá → hojení */
.defekt_spark_horsi { color: #c0392b; }   /* plocha roste → zhoršení */

/* --- Velký graf hojení rány (detail defektu) ---
   Kreslí ho stejné jádro jako „Vývoj měření" na kartě klienta, takže dědí
   všechny .graf_* styly výše (plocha, svg, tooltip, přepínače, souhrn).
   Tady jen doladíme, co je specifické pro defekt. */
.karta_defekt_graf .karta_hlava { align-items: baseline; }
.defekt_graf_aktualni { font-weight: 800; font-size: 15px; color: var(--barva_text); white-space: nowrap; }
/* Bez přepínačů (jen plocha) by graf jinak seděl těsně pod hlavičkou. */
.karta_defekt_graf .graf_plocha { margin-top: 10px; }
/* U defektu je legenda jedna věta, ne seznam řad – blokový text čte líp. */
.karta_defekt_graf .graf_legenda { display: block; margin-top: 10px; }
/* Doplňkové řádky tooltipu (rozměry, hloubka) – tišší než hlavní hodnota. */
.graf_tt_vedlejsi { color: var(--barva_text_slaby); font-size: 12px; }

/* --- Odznaky trendu --- */
.defekt_trend {
    font-size: 12px; font-weight: 700; white-space: nowrap;
    padding: 3px 9px; border-radius: 999px;
}
.defekt_trend_lepsi { background: #e3f3ea; color: #1f6b41; }
.defekt_trend_horsi { background: #fbe6e6; color: #a32020; }
.defekt_trend_stabilni { background: rgba(107, 119, 150, 0.14); color: var(--barva_text_slaby); }
.defekt_trend_zhojeno { background: #e3f3ea; color: #1f6b41; }

/* --- Detail defektu --- */
.defekt_detail_obal { display: flex; flex-direction: column; gap: 16px; }
.karta_defekt_detail .karta_hlava { align-items: flex-start; }
.karta_defekt_detail .karta_nadpis { margin: 0 0 6px; }
.defekt_popis_text { margin: 6px 0 0; color: var(--barva_text); line-height: 1.5; }
.defekt_detail_akce { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* --- Časová osa hojení --- */
.defekt_osa { list-style: none; margin: 6px 0 0; padding: 0; }
.defekt_osa_polozka {
    position: relative;
    padding: 0 0 20px 22px;
    border-left: 2px solid rgba(59, 111, 224, 0.25);
}
.defekt_osa_polozka:last-child { border-left-color: transparent; padding-bottom: 0; }
.defekt_osa_polozka::before {
    content: ""; position: absolute; left: -7px; top: 3px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--barva_akcent); box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.15);
}
.defekt_osa_datum { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.defekt_osa_obsah { display: flex; gap: 14px; align-items: flex-start; }
.defekt_osa_foto {
    flex: 0 0 auto; display: block; width: 110px; height: 110px;
    border-radius: 12px; overflow: hidden; border: 1px solid var(--sklo_okraj);
}
.defekt_osa_foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.defekt_osa_data { flex: 1 1 auto; min-width: 0; }
.defekt_osa_rozmery { margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.defekt_osa_rozmery strong { font-size: 16px; }
.defekt_osa_plocha { font-size: 13px; color: var(--barva_text_slaby); }
.defekt_osa_hodnoceni { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.defekt_osa_hodnoceni .defekt_udaj { display: contents; }
.defekt_osa_hodnoceni dt { font-size: 12px; color: var(--barva_text_slaby); font-weight: 600; }
.defekt_osa_hodnoceni dd { margin: 0; font-size: 13px; }
.defekt_osa_pozn { margin: 8px 0 0; font-size: 13px; line-height: 1.45; }
.defekt_osa_zapsal { margin: 8px 0 0; font-size: 11px; color: var(--barva_text_slaby); }
.defekt_osa_smaz { margin-left: auto; flex: 0 0 auto; }

@media (max-width: 560px) {
    .formular_radek, .formular_radek.defekt_rozmery_pole { grid-template-columns: 1fr; gap: 0; }
    .defekt_osa_obsah { flex-direction: column; }
    .defekt_osa_foto { width: 100%; height: 200px; }
    .defekt_osa_smaz { margin-left: 0; }
}

/* ============================================================================
   PWA – pobídka „Přidat na plochu“ (fixed pruh dole). Skrytá, dokud ji
   js/pwa.js neukáže (jen v běžném prohlížeči, ne v nainstalované appce).
   ========================================================================= */
.pwa_pobidka {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 32px);
    max-width: 520px;
    padding: 14px 16px;
    background: var(--sklo_pozadi);
    border: 1px solid var(--sklo_okraj);
    border-radius: var(--radius);
    box-shadow: var(--stin_silny);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.pwa_pobidka[hidden] { display: none; }

.pwa_pobidka_ikona {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    color: var(--barva_akcent);
    background: rgba(59, 111, 224, 0.1);
    border-radius: 12px;
}
.pwa_pobidka_ikona svg { width: 22px; height: 22px; }

.pwa_pobidka_telo { flex: 1 1 auto; min-width: 0; }
.pwa_pobidka_text { margin: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.pwa_pobidka_navod { margin: 4px 0 0; font-size: 0.85rem; color: var(--barva_text_slaby); line-height: 1.4; }
.pwa_pobidka_navod[hidden] { display: none; }

.pwa_pobidka_akce { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.pwa_pobidka_instalovat { padding: 8px 16px; font-size: 0.9rem; white-space: nowrap; }
.pwa_pobidka_instalovat[hidden] { display: none; }

.pwa_pobidka_zavrit {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    font-size: 1.3rem; line-height: 1;
    color: var(--barva_text_slaby);
    background: transparent; border: 0; border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.pwa_pobidka_zavrit:hover { background: rgba(255, 255, 255, 0.6); color: var(--barva_text); }

@media (max-width: 560px) {
    .pwa_pobidka { gap: 10px; padding: 12px 12px; }
    .pwa_pobidka_ikona { width: 34px; height: 34px; }
    .pwa_pobidka_ikona svg { width: 18px; height: 18px; }
    .pwa_pobidka_text { font-size: 0.9rem; }
}