/* ============================================================
   CORE — MAGNAPRO design systém (revize 18. 8. 2026 — směr
   „Materiál a hloubka“): navy #343E5B + tyrkys #55D0D4 identita.
   Písmo: Manrope Variable (samohostované), JetBrains Mono pro
   čísla a kódy. Zásady: tónované plátno, karty jako vyvýšené
   vrstvy s měkkou vícevrstvou hloubkou MÍSTO okrajů, plovoucí
   tmavý sidebar, aurora gradient v hero. Tyrkys jen pro aktivní/
   akcentní stavy a fokus.
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  src: url("fonty/MontserratVariable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonty/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("fonty/manrope-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("fonty/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonty/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonty/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* — barvy (názvy zachovány, hodnoty sladěny s navy podtónem) — */
  --navy: #343E5B;
  --navy-tmava: #2A3249;
  --tyrkys: #55D0D4;
  --tyrkys-tmavy: #2C9EA3;          /* čitelný akcent na světlé ploše */
  --akcent-text: #FFFFFF;           /* text NA akcentní výplni (tyrkys-tmavy) */
  --seda: #66708C;
  --plocha: #EAEEF6;
  --karta: #FFFFFF;
  --okraj: #DFE5F0;
  --inkoust: #232B42;               /* text — tmavší než navy, lepší kontrast */
  --ok: #3E9A6E;
  --chyba: #C75B5B;
  --varovani: #A9741F; --varovani-pozadi: #F7EFDE;
  --varovani-okraj: #E8D9B8;
  --ok-pozadi: #E4F2EA; --ok-text: #2F7A54; --ok-okraj: #CBE5D6;
  --chyba-pozadi: #F9ECEC; --chyba-okraj: #EDD3D3;
  --akcent-pozadi: #E9FAFA;
  --plocha-jemna: #F7F9FC; --okraj-jemny: #F0F3F9; --okraj-silny: #C9D2E4;
  --pole: #FFFFFF;
  --odkaz: var(--navy); --navy-text: var(--navy);
  color-scheme: light;
  --pismo: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace;
  /* — hloubka a tvar (materiál: vrstvený měkký stín místo okraje) — */
  --stin-1: 0 1px 2px rgba(18, 23, 43, .04), 0 2px 6px rgba(18, 23, 43, .05),
            0 14px 34px -18px rgba(18, 23, 43, .22);
  --stin-2: 0 2px 6px rgba(18, 23, 43, .06), 0 8px 18px -6px rgba(18, 23, 43, .12),
            0 26px 48px -20px rgba(18, 23, 43, .28);
  --stin-vyrazny: 0 18px 50px rgba(20, 26, 45, .45);
  --r-karta: 16px;
  --r-prvek: 10px;
  /* ZÁVAZNÉ: vodorovné odsazení VŠECH pásem modalu (hlava, tělo, patička)
     i obsahu v nich — nadpis, text a akce tak stojí na jedné svislici.
     Modal nikdy nesmí mít vlastní padding/margin do stran. */
  --modal-okraj: 1.2rem;
  /* okraj karet zrušen designem — token drží průhlednou barvu, aby staré
     border-deklarace (kalendar.css, chat.css) nerozbily rozměry */
  --okraj-karty: transparent;
}

/* ---- tmavé motivy: přepisují jen tokeny; navy/tyrkys identita zůstává.
   „tmavy“ = midnight-blue (navy podtón), „cerny“ = midnight-black (neutrální
   černá — sdílí všechny tmavé tokeny, přepisuje jen povrchy). ---- */
html[data-theme="tmavy"], html[data-theme="cerny"] {
  color-scheme: dark;
  --seda: #96A0BE;
  --plocha: #151A28;
  --karta: #1D2334;
  --okraj: #2B3450;
  --inkoust: #E3E8F4;
  --tyrkys-tmavy: #5FC9CE;          /* akcent musí svítit na tmavé ploše */
  --akcent-text: #12172B;           /* na světlé cyan výplni musí být text TMAVÝ */
  --ok: #62BE95;
  --chyba: #E28C8C;
  --varovani: #D9AC55; --varovani-pozadi: #33290F; --varovani-okraj: #574A22;
  --ok-pozadi: #16301F; --ok-text: #82CBA6; --ok-okraj: #275239;
  --chyba-pozadi: #33191B; --chyba-okraj: #5C3639;
  --akcent-pozadi: #12333A;
  --plocha-jemna: #222941; --okraj-jemny: #242C42; --okraj-silny: #3B4566;
  --pole: #141927;
  --odkaz: #A9B6DC; --navy-text: #C7D0E8;
  --stin-1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 6px rgba(0, 0, 0, .25);
  --stin-2: 0 4px 14px rgba(0, 0, 0, .45);
  --stin-vyrazny: 0 18px 50px rgba(0, 0, 0, .60);
}

html[data-theme="cerny"] {
  --plocha: #0E0E12;
  --karta: #17171C;
  --okraj: #27272F;
  --inkoust: #E9E9EE;
  --seda: #9B9BA8;
  --plocha-jemna: #1C1C22;
  --okraj-jemny: #202027;
  --okraj-silny: #3A3A46;
  --pole: #101015;
}

* { box-sizing: border-box; }
/* [hidden] MUSÍ vyhrát nad display třídek (inline-flex/flex/grid) — jinak se
   „skryté“ prvky vykreslují (viděno 3×: našeptávač, Označit vše, chp-main) */
[hidden] { display: none !important; }
/* čitelnost (18. 8.): celé UI je v rem → kořenový font 17px zvětší všechny
   texty o ~6 % se zachováním hierarchie; hustota layoutu zůstává */
html { font-size: 17px; }
body {
  margin: 0; font-family: var(--pismo); background: var(--plocha);
  color: var(--inkoust); font-size: .875rem; line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
/* odkazy globálně BEZ podtržení (rozhodnutí 21. 8. 2026) — underline jen tam,
   kde ho konkrétní styl explicitně zapne (např. :hover afordance) */
a { color: var(--odkaz); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tyrkys-tmavy); }

/* — typografická škála — */
h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .8rem; }
h2 { font-size: .94rem; font-weight: 640; letter-spacing: -0.01em; margin: 1.1rem 0 .45rem; }
h3 { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
     color: var(--seda); margin: 0 0 .35rem; font-weight: 620; }

/* ============ kostra: sidebar + obsah ============ */
.kostra { display: flex; min-height: 100vh; gap: .2rem; }
.sidebar {
  width: 216px; flex-shrink: 0;
  background: linear-gradient(178deg, #1A2138 0%, #12172B 100%);
  color: #fff; display: flex; flex-direction: column; padding: 1.1rem 0 0;
  /* scroll má VÝHRADNĚ nav (jen položky menu, a jen když se nevejdou) —
     overflow hidden tu drží zaoblený box a brání scrollbaru celého menu
     (absolutní toast v patičce dřív o pár px přetekl → scrollbar) */
  position: sticky; top: .7rem; max-height: calc(100vh - 1.4rem); overflow: hidden;
  margin: .7rem 0 .7rem .7rem; border-radius: 18px;
  box-shadow: 0 4px 12px rgba(18, 23, 43, .18), 0 24px 48px -20px rgba(18, 23, 43, .5);
}
/* scrolluje jen seznam položek (auto = scrollbar pouze když se nevejdou);
   logo nahoře a patička s hodinami zůstávají na místě */
.sidebar nav {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;   /* bez viditelného scrollbaru — scroll kolečkem/dotykem funguje dál */
}
.sidebar nav::-webkit-scrollbar { display: none; }
.sidebar .logo-odkaz { align-self: center; display: block; margin: .4rem 0 .45rem; }
.sidebar .logo { width: 184px; height: auto; display: block; }
.sidebar .core-nazev {
  text-align: center; color: var(--tyrkys);
  font-family: "Montserrat", var(--pismo); font-weight: 640;
  letter-spacing: .52em; font-size: .74rem; margin: -0.1rem 0 0;
  text-indent: .52em; text-transform: uppercase;
  padding-bottom: .85rem; border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: .35rem;
}
.sidebar nav a, .sidebar nav span {
  display: block; padding: .36rem .75rem; margin: 0 .55rem; border-radius: 9px;
  color: #B8C1DA; text-decoration: none; font-size: .86rem; line-height: 1.4;
  transition: background-color .14s ease, color .14s ease;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* aktivní položka: jemný tyrkysový nádech zleva + svítící indikátor
   (plná gradientní výplň působila lacině) */
.sidebar nav a.aktivni {
  position: relative; color: #fff; font-weight: 640;
  background: linear-gradient(90deg, rgba(85, 208, 212, .15), rgba(255, 255, 255, .04) 72%);
}
.sidebar nav a.aktivni::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px;
  border-radius: 3px; background: var(--tyrkys);
  box-shadow: 0 0 9px rgba(85, 208, 212, .85);
}
.sidebar nav .nav-eyebrow {
  display: flex; align-items: center; gap: .5rem;
  padding: 1.05rem .2rem .3rem; margin: 0 .75rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .15em;
  color: #97A5C9; font-weight: 700; cursor: default; border-radius: 0;
}
.sidebar nav .nav-eyebrow::before {   /* tyrkysová odrážka kategorie */
  content: ""; flex: 0 0 14px; height: 2px; border-radius: 2px;
  background: var(--tyrkys); opacity: .7;
}
.sidebar nav .nav-eyebrow:first-child { padding-top: .25rem; }
/* rozevírací sekce: klik na hlavní položku naviguje a podmenu se rozbalí
   (stav rendruje server dle aktuální cesty); šipka ukazuje rozbalení */
.sidebar nav a.ma-sub { display: flex; align-items: center; justify-content: space-between; }
.sidebar nav a.ma-sub::after { content: "›"; font-size: 1rem; line-height: 1;
  color: #7C86A3; transition: transform .18s ease; }
.sidebar nav a.ma-sub.otevrene::after { transform: rotate(90deg); }
.sidebar nav a.ma-sub.aktivni::after { color: inherit; }
.nav-podmenu { display: none; }
.nav-podmenu.otevrene { display: block; }
/* podpoložky: odsazené, s vodicí linkou stromu */
.sidebar nav a.nav-sub {
  margin: 0 .55rem 0 1.6rem; padding: .3rem .7rem;
  font-size: .82rem; color: #96A3C5;
  border-left: 2px solid rgba(255, 255, 255, .16);
  border-radius: 0 9px 9px 0;
}
.sidebar nav a.nav-sub:hover {
  color: #fff; background: rgba(255, 255, 255, .07);
  border-left-color: rgba(255, 255, 255, .38);
}
.sidebar nav a.nav-sub.aktivni {
  color: #fff; font-weight: 640; border-left-color: var(--tyrkys);
  background: linear-gradient(90deg, rgba(85, 208, 212, .13), transparent 75%);
}
.sidebar nav a.nav-sub.aktivni::before { content: none; }  /* linku dělá border-left */
.sidebar nav span.neaktivni { color: #7C86A3; cursor: default; }
/* decentní badge počtu čekajících oznámení u názvu sekce (TYP_NAV) —
   živě ho obnovuje polling zvonečku */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  margin-left: auto; border-radius: 999px; flex: none;
  background: rgba(85, 208, 212, .16); color: var(--tyrkys);
  font-size: .64rem; font-weight: 700; line-height: 1;
}
/* odkaz s viditelným badge = flex řádek (badge vpravo, nezalamuje se);
   ostatní odkazy zůstávají beze změny */
.sidebar nav a:has(.nav-badge:not([hidden])) {
  display: flex; align-items: center;
}
.sidebar .paticka {
  margin-top: auto; position: sticky; bottom: 0;
  /* horní padding = vzduch od separátoru; spodní = volný pruh pro nativní
     náhled odkazu prohlížeče (kreslí se vlevo dole PŘES obsah) */
  padding: 12px .9rem 24px; display: flex; justify-content: space-between; align-items: center;
  background: #101528; border-top: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0 0 18px 18px;
}
/* toast „Uloženo" ve spodním (rezervovaném) pruhu patičky — vyjede na 2 s */
.paticka-toast {
  position: absolute; left: .9rem; right: .9rem; bottom: 3px;
  font-size: .74rem; font-weight: 580; color: var(--tyrkys);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(3px); pointer-events: none;  /* 3px = zůstává uvnitř patičky (nevyvolá overflow) */
  transition: opacity .22s ease, transform .22s ease;
}
.paticka-toast.zobraz { opacity: 1; transform: none; }
.paticka-cas { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; }
.paticka-cas .pc-cas { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.28rem; font-weight: 660; color: #FFFFFF; letter-spacing: .02em; }
.paticka-cas .pc-datum { font-size: .78rem; font-weight: 540; color: #C2C9DC; }
a.paticka-cas:hover .pc-cas { color: var(--tyrkys); }
.obsah { flex: 1; padding: .6rem clamp(.9rem, 1.6vw, 1.6rem) 2.5rem; min-width: 0; }

/* ---- hero-bar: horní pruh stránky zarovnaný s clusterem zvoneček+avatar ----
   Rezervovaný pro nadpis a ovládací prvky aktuální stránky (výška = 38px tlačítek,
   pravý sloupec drží padding-right na .obsah). Pokrývá všechny vzory hlaviček:
   .hlavicka-sekce, holé <h1>, drobečky .drobky i kalendářní toolbar. */
/* ovládání hlavičky se centruje na výšku celého bloku (align-items: center
   z .hlavicka-sekce); cluster ikon dorovnává na tentýž střed skript
   v base.html (fixed prvek nezná výšku hlavičky) */
/* jednotná výška HERO řádku napříč portálem — vzor dashboard (H1 + stavový řádek) */
.kal > .kal-toolbar { min-height: 4.5rem; align-items: center; }
.obsah > .hlavicka-sekce:first-of-type { min-height: 4.5rem; margin-top: 0; }
.obsah > .hlavicka-sekce:first-of-type .prepinac { height: 38px;  /* výška tlačítek clusteru */
  /* flex centruje v content-boxu — kompenzace padding-bottom+border hlavičky,
     ať střed sedí na střed CELÉHO bloku (stejně jako cluster) */
  margin-bottom: calc(-.55rem - 1px); }
.profil-menu { transition: none; }   /* top nastavuje skript — bez animace skoku */
.obsah > h1:first-of-type {
  min-height: 4.5rem; display: flex; align-items: center; gap: .55rem;
  flex-wrap: wrap; margin-top: 0; /* jednotná výška HERO řádku (vzor dashboard) */
}
.obsah > .drobky:first-child { min-height: 38px; display: flex; align-items: center; margin: 0 0 .3rem; }

/* sticky HERO (20. 8.): hlavička sekce zůstává při scrollu přišpendlená
   nahoře — drží kontext stránky; border-bottom funguje jako oddělovač.
   Negativní margin + padding pohlcují horní padding .obsah, ať obsah
   neprosvítá nad hlavičkou. Na mobilu (sloupcová hlavička) se vypíná. */
@media (min-width: 960px) {
  .obsah > .hlavicka-sekce:first-of-type, .obsah > h1:first-of-type {
    position: sticky; top: 0; z-index: 60; background: var(--plocha);
    margin-top: -.6rem; padding-top: .6rem;
  }
}

/* ============ karty a dlaždice ============ */
.karta {
  background: var(--karta); border: 1px solid var(--okraj-karty);
  border-radius: var(--r-karta); padding: .8rem 1rem; margin: 0 0 .7rem;
  box-shadow: var(--stin-1);
}
/* auto-fit (NE auto-fill — to na širokých monitorech tvoří prázdné ghost
   sloupce a mačká karty do ~200px pruhů); strop 640px drží karty čitelné
   a zároveň brání absurdně širokým kartám při malém počtu */
.dlazdice { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 640px)); gap: .6rem; align-items: start; }
/* kompaktní varianta pro číselné stat dlaždice (velká karta na jedno číslo působí prázdně) */
.dlazdice-staty { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dlazdice .karta { margin: 0; min-width: 0; overflow-x: auto; }
/* široká varianta pro karty s tabulkami/kódem — 200px sloupce je rozsypou */
.dlazdice-siroke { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.karta.stat .cislo {
  font-family: var(--mono); font-size: 1.45rem; font-weight: 620;
  margin: .1rem 0; color: var(--navy-text); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.karta.stat small { color: var(--seda); font-size: .74rem; }
.karta p { margin: .3rem 0; }
.karta h2:first-child, .karta h3:first-child { margin-top: 0; }

/* ============ tabulky ============ */
.tabulka {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--karta); border: 1px solid var(--okraj-karty);
  border-radius: var(--r-karta); overflow: hidden; box-shadow: var(--stin-1);
  margin: 0 0 .7rem;
}
.tabulka th {
  text-align: left; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--seda); font-weight: 640;
  padding: .4rem .6rem; border-bottom: 1px solid var(--okraj);
  background: var(--plocha-jemna); white-space: nowrap;
}
.tabulka td { padding: .34rem .6rem; border-bottom: 1px solid var(--okraj-jemny); vertical-align: middle; font-size: .9rem; }
.tabulka tr:last-child td { border-bottom: 0; }
.tabulka tr:hover td { background: var(--plocha-jemna); }
.tabulka td form { margin: 0; }
/* tabulka vnořená v kartě: bez vlastní elevace (stín na stínu ruší hierarchii) */
.karta .tabulka { box-shadow: none; border: 1px solid var(--okraj-jemny); }

/* ============ tlačítka ============ */
.btn {
  display: inline-block; background: linear-gradient(170deg, #3D486A, var(--navy-tmava));
  color: #fff; border: 0;
  border-radius: var(--r-prvek); padding: .38rem .85rem; font: inherit;
  font-size: .84rem; font-weight: 640; cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px rgba(18, 23, 43, .2), 0 8px 18px -8px rgba(18, 23, 43, .45);
  line-height: 1.4; text-align: center;
  transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.btn:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(18, 23, 43, .2), 0 12px 24px -8px rgba(18, 23, 43, .5); }
/* sekundární: hover NESMÍ ztmavit pozadí pod tmavým textem (fix čitelnosti) */
.btn-vedlejsi { background: var(--karta); color: var(--navy-text); border: 1px solid var(--okraj); box-shadow: none; }
.btn-vedlejsi:hover { background: var(--plocha); color: var(--navy-text); border-color: var(--okraj-silny); box-shadow: none; }
.btn-maly { padding: .16rem .5rem; font-size: .76rem; font-weight: 560; }
.btn-nebezpecny { background: transparent; color: var(--chyba); border: 1px solid var(--chyba-okraj); box-shadow: none; }
.btn-nebezpecny:hover { background: var(--chyba); color: #fff; border-color: var(--chyba); box-shadow: none; }
.btn:disabled { opacity: .55; cursor: default; }

/* ============ formuláře ============ */
label { display: block; margin: .4rem 0; font-size: .84rem; color: var(--inkoust); }
input, select, textarea {
  width: 100%; max-width: 24rem; padding: .34rem .55rem; margin-top: .18rem;
  border: 1px solid var(--okraj); border-radius: var(--r-prvek); font: inherit;
  font-size: .85rem; background: var(--pole); color: var(--inkoust);
}
/* rozbalené <option> seznamy: explicitní paleta — bez ní prohlížeč míchá
   světlé pozadí popupu s barvou textu selectu (nečitelné v tmavých motivech) */
option, optgroup { background-color: var(--karta); color: var(--inkoust); }
textarea { resize: vertical; }  /* roztahování jen svisle — vodorovné láme mřížky */
input:hover, select:hover, textarea:hover { border-color: var(--okraj-silny); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--tyrkys);
  box-shadow: 0 0 0 3px rgba(85, 208, 212, .22);
}
:focus-visible { outline: 2px solid var(--tyrkys); outline-offset: 1px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy); }
.formular { max-width: 30rem; }
.modal-form.formular { max-width: none; }  /* v modalu šířku řídí modal, ne formular */
.formular .helptext, form .helptext { font-size: .78rem; color: var(--seda); display: block; margin-top: .15rem; }
.formular ul, form ul.errorlist { color: var(--chyba); font-size: .85rem; padding-left: 1.1rem; }

/* skupina spojených tlačítek — outline, radius jen na krajích, borders se
   překrývají (-1px); vzor shadcn button-group. Použití: <span class=btn-skupina>
   [button.btn | form>button.btn]… </span> */
.btn-skupina { display: inline-flex; align-items: stretch; vertical-align: middle;
  border-radius: var(--r-prvek); box-shadow: var(--stin-1); }
.btn-skupina > form { display: inline-flex; }
.btn-skupina .btn { background: var(--karta); color: var(--inkoust);
  border: 1px solid var(--okraj); box-shadow: none; border-radius: 0;
  margin-left: -1px; font-weight: 540; }
.btn-skupina > :first-child .btn, .btn-skupina > .btn:first-child {
  border-top-left-radius: var(--r-prvek); border-bottom-left-radius: var(--r-prvek);
  margin-left: 0; }
.btn-skupina > :last-child .btn, .btn-skupina > .btn:last-child {
  border-top-right-radius: var(--r-prvek); border-bottom-right-radius: var(--r-prvek); }
.btn-skupina .btn:hover { background: var(--plocha); border-color: var(--okraj-silny);
  transform: none; filter: none; position: relative; z-index: 1; }
.btn-skupina .btn-nebezpecny { color: var(--chyba); background: var(--karta); }

/* ============ drobné prvky ============ */
.hlavicka-sekce {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin: 0 0 .8rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--okraj);
}
.hlavicka-sekce h1 { margin: 0; }
.stitek {
  display: inline-block; background: var(--plocha); border: 1px solid var(--okraj);
  border-radius: 999px; padding: .08rem .62rem; font-size: .76rem;
  font-weight: 540; color: var(--seda); text-decoration: none; line-height: 1.5;
}
.stitek.aktivni { border-color: rgba(44, 158, 163, .45); color: var(--tyrkys-tmavy); background: var(--akcent-pozadi); }
.zprava { border-radius: var(--r-prvek); padding: .4rem .75rem; margin: 0 0 .6rem; font-size: .84rem; }
.zprava.success { background: var(--ok-pozadi); color: var(--ok-text); border: 1px solid var(--ok-okraj); }
.zprava.error { background: var(--chyba-pozadi); color: var(--chyba); border: 1px solid var(--chyba-okraj); }
.zprava.warning { background: var(--varovani-pozadi); color: var(--varovani); border: 1px solid var(--varovani-okraj); }
.zprava-flash { transition: opacity .4s ease; }
/* flash zprávy — decentní centrální overlay s animovanou ikonou (base.html) */
.flash-overlay { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  pointer-events: none; background: rgba(13, 17, 32, .22);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .25s ease; }
.flash-overlay.ukaz { opacity: 1; }
.flash-karta { display: flex; align-items: center; gap: 1rem; background: var(--karta);
  border: 1px solid var(--okraj); border-radius: var(--r-karta); box-shadow: var(--stin-2);
  padding: 1.15rem 1.7rem; max-width: min(34rem, 90vw);
  transform: translateY(8px) scale(.94); transition: transform .25s ease; }
.flash-overlay.ukaz .flash-karta { transform: none; }
.flash-ikona { width: 2.6rem; height: 2.6rem; flex: none;
  display: grid; place-items: center; border: 2px solid currentColor; border-radius: 999px; }
.flash-uspech .flash-ikona { color: var(--tyrkys-tmavy); }
.flash-chyba .flash-ikona { color: var(--chyba); }
.flash-varovani .flash-ikona { color: var(--varovani); }
.flash-ikona svg { stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: flash-tah .45s .2s ease forwards; }
@keyframes flash-tah { to { stroke-dashoffset: 0; } }
.flash-texty { font-weight: 600; font-size: .98rem; display: grid; gap: .2rem; }
@media (prefers-reduced-motion: reduce) { .flash-ikona svg { animation: none; stroke-dashoffset: 0; } }
.zprava-mizi { opacity: 0; }
.ok { color: var(--ok); } .chyba { color: var(--chyba); }
ul.kontroly { columns: 2; list-style: none; padding: 0; font-size: .87rem; }
ul.kontroly li { break-inside: avoid; padding: .1rem 0; }
ul.kontroly li::before { content: "● "; font-size: .7em; vertical-align: 2px; }
ul.kontroly li.ok::before { color: var(--ok); }
ul.kontroly li.chyba::before { color: var(--chyba); }
.seznam-odkazu { list-style: none; padding: 0; }
.seznam-odkazu li { padding: .4rem 0; border-bottom: 1px solid var(--okraj); }
.seznam-odkazu li:last-child { border-bottom: 0; }
.neaktivni { color: var(--seda); }
.drobky { color: var(--seda); font-family: var(--mono); font-size: .8rem; font-variant-numeric: tabular-nums; }
.md pre { background: var(--navy-tmava); color: #E7EBF4; padding: .8rem 1rem; border-radius: var(--r-prvek); overflow-x: auto; font-size: .85rem; }
.md code { font-family: var(--mono); font-size: .88em; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.md td, .md th { border: 1px solid var(--okraj); padding: .3rem .6rem; }
.md img { max-width: 100%; }
code.tajemstvi { font-family: var(--mono); background: var(--akcent-pozadi); border: 1px solid var(--tyrkys); border-radius: 6px; padding: .1rem .5rem; }
.nahravani { margin-top: .9rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.nahravani input, .nahravani select { max-width: 20rem; margin-top: 0; width: auto; }
.koreny { display: flex; gap: .45rem; margin-bottom: .8rem; flex-wrap: wrap; }
.koreny .stitek { padding: .22rem .75rem; font-size: .8rem; }

/* ---- pill přepínač pohledů ---- */
.prepinac { display: inline-flex; background: var(--karta); border: 1px solid var(--okraj); border-radius: 999px; overflow: hidden; box-shadow: var(--stin-1); }
.prepinac a { text-decoration: none; display: flex; }
.prepinac button { border: 0; background: none; padding: .38rem 1rem; font: inherit; font-size: .85rem; cursor: pointer; color: var(--seda); }
.prepinac button.aktivni { background: var(--navy); color: #fff; font-weight: 620; }
/* ---- Můj profil: záložky + kompozice karet ---- */
.profil-zalozky { margin: .2rem 0 1.1rem; }
/* mřížka karet záložky: zarovnané sloupce, karty v řadě dorovnané do stejné výšky */
.profil-mriz { display: grid; gap: .7rem; align-items: stretch; }
.profil-mriz .karta { margin: 0; min-width: 0; display: flex; flex-direction: column; }
/* tlačítko Uložit sedí na spodní hraně karty → tlačítka sousedních karet lícují */
.profil-mriz .karta > form:not(.nahravani) { display: flex; flex-direction: column; flex: 1; }
.profil-mriz .karta > form:not(.nahravani) > .btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 980px) {
  .profil-udaje { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); grid-template-rows: auto 1fr; }
  .profil-udaje > .karta:first-child { grid-row: 1 / 3; }
  .profil-zabezpeceni { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .profil-zabezpeceni > .karta-prihlaseni { grid-column: 2; grid-row: 1 / 3; }
  .profil-vyuziti { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* modal konektoru (přidání/úprava) */
.kon-modal { width: min(46rem, 100%); height: 80vh; max-height: 80vh; }
/* ✕ k pravému okraji hlavičky (hlavička je jen titulek + zavřít) */
.kon-modal .ozn-zavrit, .kon-hist-modal .ozn-zavrit { margin-left: auto; }
.kon-form { padding: 1rem; overflow-y: auto; flex: 1; min-height: 0;
  scrollbar-width: none; }
.kon-form::-webkit-scrollbar { display: none; }
.kon-paticka { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .8rem; }
/* režim konektoru — segmentový radio přepínač + pravidla režimu */
.rezim-prepinac { margin: .1rem 0 .5rem; flex-wrap: wrap; }
.rezim-prepinac label { margin: 0; display: inline-flex; }
.rezim-prepinac input { position: absolute; opacity: 0; width: 0; height: 0; }
.rezim-prepinac span { display: block; padding: .38rem 1rem; font-size: .85rem; color: var(--seda); cursor: pointer; white-space: nowrap; }
.rezim-prepinac input:checked + span { background: var(--tyrkys-tmavy); color: var(--akcent-text); font-weight: 660; box-shadow: inset 0 -2px 0 rgba(255,255,255,.35); }
.rezim-prepinac input:focus-visible + span { outline: 2px solid var(--tyrkys); outline-offset: -2px; }
.rezim-prepinac label[data-jen-devprod] span { border-left: 1px solid var(--okraj); }
.rezim-pravidla { list-style: none; margin: .3rem 0 0; padding: .5rem .7rem; font-size: .8rem;
  background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--r-prvek); }
.rezim-pravidla li { padding: .12rem 0 .12rem 1.1rem; position: relative; }
.rezim-pravidla li::before { content: "•"; position: absolute; left: .2rem; color: var(--seda); }
.rezim-pravidla.rezim-varovani { border-color: var(--varovani-okraj); background: var(--varovani-pozadi); }
.kon-rezim { margin: .3rem 0 .6rem; }
.kon-zaloha { margin: .3rem 0 .6rem; padding: .5rem .7rem; border: 1px solid var(--varovani-okraj); border-radius: var(--r-prvek); background: var(--varovani-pozadi); }
.kon-zaloha textarea { width: 100%; max-width: 100%; margin-top: .1rem; font-family: var(--mono); font-size: .78rem; }
/* karta aplikačního účtu (přehled v modalu) */
.ucet-karta { padding: .6rem .7rem; border: 1px solid var(--okraj); border-radius: var(--r-prvek); margin-bottom: .55rem; }
.ucet-hlava { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.kon-karta .kon-akce { margin-left: auto; display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.kon-karta { padding: .7rem .85rem; }
/* název + ID + štítky režim/prostředí v jedné řadě; akce zůstávají vpravo */
.kon-karta .ucet-popis { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* název jako tlačítko kopírování ID (bez rámečku, dědí barvu/velikost) */
.kon-nazev { background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; }
/* jedinečné ID konektoru — monospace čip, kliknutím se kopíruje */
.kon-id { font-size: .72rem; font-weight: 400; letter-spacing: .01em; cursor: pointer;
  color: var(--tlumene, #8b93a7); background: var(--pole-pozadi, rgba(255,255,255,.04));
  border: 1px solid var(--okraj); border-radius: var(--r-prvek, 4px); padding: .05rem .4rem; }
.kon-id:hover { color: var(--text); border-color: var(--akcent, #4aa3df); }
.kon-nazev.kopirovano, .kon-id.kopirovano { color: var(--ok, #5cc98a); }
.kon-nazev.kopir-chyba, .kon-id.kopir-chyba { color: var(--chyba, #e06666); }
.ucet-popis { margin-right: auto; font-size: .95rem; }
.ucet-udaje { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .7rem; margin: .45rem 0 0; font-size: .82rem; }
.ucet-udaje dt { color: var(--seda); }
.ucet-udaje dd { margin: 0; word-break: break-word; }
/* diagnostika konektoru — bodový seznam ✓/⚠/✗ */
.test-seznam { list-style: none; margin: .3rem 0 0; padding: 0; }
.test-seznam li { display: grid; grid-template-columns: 1.4rem minmax(0,15rem) 1fr; gap: .5rem;
  align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--okraj); font-size: .85rem; }
.test-seznam li:last-child { border-bottom: 0; }
.test-ikona { font-weight: 700; text-align: center; }
.test-ok .test-ikona { color: var(--ok); } .test-warn .test-ikona { color: var(--varovani); }
.test-fail .test-ikona { color: var(--chyba); }
.test-probiha .test-ikona { color: var(--seda); } .test-probiha .test-detail { color: var(--seda); font-style: italic; }
.test-nazev { font-weight: 560; }
.test-detail { color: var(--seda); word-break: break-word; }
@media (max-width: 640px) { .test-seznam li { grid-template-columns: 1.4rem 1fr; } .test-detail { grid-column: 2; } }
/* zlatá pravidla konektoru — seznam s +/− v modalu */
.kon-pravidla { margin: .5rem 0 .6rem; }
#konPravidla { max-height: 34vh; overflow-y: auto; scrollbar-width: none; }
#konPravidla::-webkit-scrollbar { display: none; }
.kon-prav-radek { display: flex; gap: .4rem; margin-bottom: .35rem; }
.kon-prav-radek input { flex: 1; max-width: 100%; margin-top: 0; }
/* historie konektoru — modal s výpisem záznamů */
.kon-hist-modal { width: min(58rem, 100%); }
.kon-hist-telo { padding: .6rem 1rem 1rem; overflow-y: auto; overscroll-behavior: contain; }
.kon-hist-radek { padding: .5rem 0; border-bottom: 1px solid var(--okraj); }
.kon-hist-radek:last-child { border-bottom: 0; }
.kon-hist-meta { display: flex; gap: .6rem; align-items: center; margin-bottom: .2rem; }
.kon-hist-vstup { display: block; font-size: .8rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.kon-hist-vystup { margin: .3rem 0 0; max-height: 20rem; overflow: auto; font-size: .78rem; white-space: pre-wrap; word-break: break-word; }
a.ozn-zavrit { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* veřejný klíč konektorů — kliknutím se kopíruje */
.klic-kopir { overflow-x: auto; cursor: pointer; user-select: all; }
.klic-kopir:hover { outline: 1px solid var(--tyrkys); outline-offset: -1px; }
/* Firemní profil: rozumné šířky karet per záložka */
/* Údaje firmy + Loga a razítko vedle sebe (pod 1400px pod sebou) */
.firma-udaje { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 1400px) { .firma-udaje { grid-template-columns: 1fr; } }
.tel-radek select, .tel-predvolba-select { width: auto; max-width: 8rem;
  flex: none; margin-top: 0; }
.firma-doba { max-width: 38rem; }
.firma-sla-nova { max-width: 62rem; margin-top: .7rem; }
/* záložka Využití: řádkové statistiky (popis vlevo, hodnota vpravo) */
.vyuziti-celkem { font-size: .76rem; font-weight: 480; color: var(--seda); margin-left: .55rem; }
.vyuziti-seznam { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .85rem; }
.vyuziti-seznam li { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0; border-bottom: 1px solid var(--okraj); }
.vyuziti-seznam li:last-child { border-bottom: 0; }
.vyuziti-seznam .hodnota { font-variant-numeric: tabular-nums; font-weight: 620; white-space: nowrap; }
.vyuziti-seznam .vedlejsi { color: var(--seda); font-weight: 420; margin-right: .55rem; }
.profil-upozorneni { max-width: 46rem; }
.profil-zabezpeceni input[type="password"] { max-width: 22rem; }
/* 12sloupcová mřížka formuláře — šířka pole podle očekávaného obsahu (.pole-N = počet sloupců);
   label je sloupec zarovnaný k dolní hraně, takže pole v řadě lícují i při zalomeném popisku */
.f-mrizka { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .1rem .85rem; }
.f-mrizka label { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .18rem; }
.f-mrizka input, .f-mrizka textarea { display: block; width: 100%; max-width: 100%; margin-top: 0; }
.pole-2 { grid-column: span 2; } .pole-3 { grid-column: span 3; } .pole-4 { grid-column: span 4; } .pole-5 { grid-column: span 5; } .pole-6 { grid-column: span 6; }
.pole-8 { grid-column: span 8; } .pole-12 { grid-column: span 12; }
@media (max-width: 700px) { .f-mrizka > label { grid-column: 1 / -1; } }
/* formulář s popisky vlevo ve vyrovnaném sloupci (sociální sítě) */
.f-popisky { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem .8rem; align-items: center; }
.f-popisky label { display: contents; }
.f-popisky input { width: 100%; max-width: 100%; margin-top: 0; }
/* odkrytí hesla — tlačítko 👁 UVNITŘ pole vpravo (heslo.js) */
.heslo-obal { position: relative; display: block; width: 100%; max-width: 24rem; }
.heslo-obal input { width: 100%; max-width: 100%; padding-right: 2.2rem; box-sizing: border-box; }
.heslo-oko { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: .15rem .25rem; cursor: pointer; font-size: .95rem;
  line-height: 1; opacity: .5; filter: grayscale(1); z-index: 1; }
.heslo-oko:hover, .heslo-oko.aktivni { opacity: 1; filter: none; }
/* telefon: předvolba (select) + číslo v jedné lince. Nativní <option> neumí
   část textu zmenšit → zavřený stav kreslí .tel-predvolba-text (malá země
   + kód) a průhledný select leží PŘES něj (klávesnice i klik fungují nativně). */
.tel-radek { display: flex; gap: .4rem; }
.tel-radek input { flex: 1; min-width: 0; margin-top: 0; }
.tel-predvolba { position: relative; flex: none; display: inline-flex; margin-top: .18rem; }
.tel-predvolba select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.tel-predvolba-text {
  display: inline-flex; align-items: baseline; gap: .28rem; white-space: nowrap;
  padding: .34rem .55rem; border: 1px solid var(--okraj);
  background: var(--pole); color: var(--inkoust); font-size: .85rem;
}
.tel-predvolba-text small { font-size: .66rem; font-weight: 640; color: var(--seda); letter-spacing: .04em; }
.tel-predvolba-text::after { content: "▾"; font-size: .58rem; color: var(--seda); margin-left: .12rem; align-self: center; }
.tel-predvolba:focus-within .tel-predvolba-text {
  border-color: var(--tyrkys); box-shadow: 0 0 0 3px rgba(85, 208, 212, .22);
}
/* výběr zvuku + tlačítko Přehrát v jedné lince */
.zvuk-radek { display: flex; gap: .5rem; align-items: center; }
.zvuk-radek select { flex: 1; max-width: 17rem; margin-top: 0; }
/* poslední přihlášení jako čistý seznam řádků */
.prihlaseni-seznam { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .85rem; }
.prihlaseni-seznam li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--okraj); }
.prihlaseni-seznam li:last-child { border-bottom: 0; }
.prihlaseni-seznam .ip { color: var(--seda); font-variant-numeric: tabular-nums; }
/* autosave indikátor v nadpisu karty („Ukládám…" / „✓ Uloženo HH:MM") */
.autosave-stav { font-size: .76rem; font-weight: 480; color: var(--seda); margin-left: .55rem; vertical-align: .1em; }
/* modal úpravy profilové fotografie (ořez / zoom / rotace) */
.avatar-modal { width: min(27rem, 100%); }
.avatar-modal .ozn-zavrit { margin-left: auto; }
.avatar-telo { padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: .85rem; }
#avatarPlatno { border-radius: var(--r-prvek); border: 1px solid var(--okraj); cursor: grab; touch-action: none; max-width: 100%; }
#avatarPlatno.tahne { cursor: grabbing; }
.avatar-ovladani { width: 100%; max-width: 20rem; }
.avatar-ovladani input[type="range"] { width: 100%; max-width: none; accent-color: var(--tyrkys-tmavy); padding: 0; border: 0; background: none; box-shadow: none; }
.avatar-tlacitka { display: flex; gap: .5rem; align-items: center; margin-top: .35rem; flex-wrap: wrap; }
.avatar-paticka { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; padding: .8rem 1rem; border-top: 1px solid var(--okraj); }
.avatar-paticka .chyba { margin-right: auto; font-size: .82rem; }
/* karta Profilová fotografie: ovládání vlevo, větší kulatý náhled vpravo */
.avatar-karta { display: flex; gap: 1.1rem; align-items: center; flex: 1; }
.avatar-karta-text { flex: 1; min-width: 0; }
.avatar-nahled {
  flex: none; margin-left: auto; width: 116px; height: 116px; border-radius: 999px;
  object-fit: cover; border: 2px solid var(--okraj); box-shadow: var(--stin-1);
}
.avatar-nahled-inicialy {
  display: flex; align-items: center; justify-content: center;
  background: var(--plocha); color: var(--seda); font-weight: 640; font-size: 1.9rem;
}

/* ---- našeptávač adres (kniha jízd, Mapy.cz) ---- */
.naseptavac-obal { position: relative; display: inline-flex; align-items: center; gap: .3rem; width: 100%; max-width: 26rem; }
.naseptavac-obal input { flex: 1; max-width: none; }
.naseptavac-gps { border: 1px solid var(--okraj); background: var(--karta); border-radius: var(--r-prvek); padding: .35rem .5rem; cursor: pointer; font-size: 1rem; }
.naseptavac-gps:hover { background: var(--plocha); }
.naseptavac-seznam { position: absolute; top: 100%; left: 0; right: 2.4rem; background: var(--karta); border: 1px solid var(--okraj); border-radius: var(--r-prvek); box-shadow: var(--stin-2); z-index: 90; max-height: 16rem; overflow-y: auto; }
.naseptavac-radek { padding: .42rem .7rem; font-size: .87rem; cursor: pointer; }
.naseptavac-radek:hover { background: var(--plocha); }
.naseptavac-radek strong { margin-right: .2rem; }
/* kotva sdíleného našeptávače (naseptavac.js) — obal bez GPS tlačítka */
.naseptavac-kotva { position: relative; display: block; min-width: 0; }
.naseptavac-kotva .naseptavac-seznam { right: 0; }

/* ============ přihlašovací stránka ============ */
.prihlaseni-stranka {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60rem 32rem at 85% -10%, rgba(85, 208, 212, .38), transparent 62%),
    radial-gradient(46rem 26rem at 5% 115%, rgba(76, 110, 245, .2), transparent 55%),
    linear-gradient(150deg, #1A2138, #12172B);
  padding: 1rem;
}
.prihlaseni-box {
  background: var(--karta); border-radius: 16px; padding: 2rem 2.2rem;
  width: min(94vw, 24.5rem); box-shadow: var(--stin-vyrazny);
}
.prihlaseni-box .logo { width: 250px; max-width: 80%; display: block; margin: 0 auto .5rem; }
.prihlaseni-box h1 { text-align: center; letter-spacing: .35em; text-indent: .35em; color: var(--tyrkys-tmavy); font-size: 1.05rem; }
.prihlaseni-box hr { border: 0; border-top: 1px solid var(--okraj); margin: 1.2rem 0; }
.prihlaseni-box .btn { width: 100%; margin-top: .45rem; }
.prihlaseni-box input { max-width: 100%; }
/* stránka ověřovacího kódu — širší box, výrazné pole na kód */
.kod-box { width: min(94vw, 30rem); padding: 2.4rem 2.6rem; text-align: center; }
.kod-box .logo { margin: 0 auto .7rem; }
.kod-nadpis { text-align: center; letter-spacing: normal; text-indent: 0;
  font-size: 1.3rem; color: var(--inkoust); margin: 0 0 .5rem; }
.kod-info { color: var(--seda); font-size: .92rem; line-height: 1.5; margin: 0 0 1.2rem; }
.kod-info strong { color: var(--inkoust); }
.kod-platnost { white-space: nowrap; }   /* „Platí 10 minut." se nezalomí */
.kod-box form label { text-align: left; }
.kod-vstup { font-family: var(--mono); font-size: 1.7rem; letter-spacing: .5em;
  text-align: center; text-indent: .25em; padding: .55rem .4rem; }
.kod-zpet { display: inline-block; margin-top: 1.1rem; font-size: .86rem;
  color: var(--seda); text-decoration: none; }
.kod-zpet:hover { color: var(--tyrkys-tmavy); text-decoration: underline; }

/* ============ responzivita ============ */
@media (max-width: 1180px) {
  .sidebar { width: 208px; }
  .sidebar .logo { width: 172px; }
}
@media (max-width: 900px) {
  .kostra { flex-direction: column; }
  .sidebar {
    width: auto; position: static; max-height: none; margin: .5rem;
    border-radius: 14px;
    flex-direction: row; flex-wrap: wrap; align-items: center; padding: .5rem .6rem;
  }
  .sidebar .logo { width: 140px; margin: 0 .8rem 0 0; }
  .sidebar .core-nazev, .sidebar nav .nav-eyebrow { display: none; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: .1rem; }
  .sidebar nav a, .sidebar nav span,
  .sidebar nav a.nav-sub {
    margin: 0; border-radius: 999px; padding: .32rem .7rem; font-size: .85rem;
    border-left: 0;
  }
  .sidebar nav .nav-podmenu.otevrene { display: contents; }  /* pills v řadě */
  .sidebar .paticka { position: static; margin: 0; padding: 0 .2rem; background: none; border: 0; }
  .obsah { padding: 1rem .9rem 2.5rem; }
  ul.kontroly { columns: 1; }
  /* tabulky na malé šířce scrollují uvnitř, ne celá stránka */
  .tabulka { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 560px) {
  h1 { font-size: 1.25rem; }
  .hlavicka-sekce { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .dlazdice { grid-template-columns: 1fr; }
  input, select, textarea, .formular { max-width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .karta, .btn, .stitek, .sidebar nav a, input, select, textarea { transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease; }
}
@media print {
  .sidebar, #chatFab, #chatPanel, .profil-menu, .menu-plovouci { display: none !important; }
  .obsah { padding: 0 !important; max-width: none; }
  .karta, .tabulka { box-shadow: none; }
}

/* ---- sbalovací menu (tag-režim požadavek 17. 8.) ---- */
.menu-sbalit {
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 7px;
  background: rgba(255,255,255,.07); color: #AEB6CC;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.menu-sbalit svg { display: block; }
.menu-sbalit:hover { background: rgba(255,255,255,.18); color: #fff; }
.sidebar { position: sticky; }
/* rozbalení menu: decentní vertikální proužek u levého okraje (experiment 20. 8.)
   — širší neviditelná hit-zóna, viditelný 4px pásek uprostřed výšky */
.menu-plovouci {
  display: none; position: fixed; left: 0; top: 0; bottom: 0; z-index: 900;
  width: 20px; border: 0; padding: 0; background: transparent; cursor: pointer;
}
.menu-plovouci svg { display: none; }
.menu-plovouci::before {
  content: ""; position: absolute; left: 5px; top: 50%;
  transform: translateY(-50%); width: 8px; height: 42vh;
  background: var(--okraj); opacity: .8;
  transition: opacity .15s ease, width .15s ease, background .15s ease;
}
.menu-plovouci:hover::before, .menu-plovouci:focus-visible::before {
  width: 12px; opacity: 1; background: var(--seda);
}
html.menu-sbaleno .menu-plovouci { display: block; }
html.menu-sbaleno .sidebar { display: none; }

/* ---- profilový avatar + dropdown (vpravo nahoře) ---- */
/* mobil: absolute (odscrolluje se); ≥960px FIXED — cluster se při scrollu
   nehýbe a drží se sticky HERO baru (viewport souřadnice počítá zarovnejCluster) */
.profil-menu { position: absolute; top: .6rem; right: .8rem; z-index: 70; }
@media (min-width: 960px) { .profil-menu { position: fixed; } }
.profil-avatar {
  width: 38px; height: 38px; border-radius: 99px; border: 2px solid var(--karta);
  background: var(--navy); color: #fff; cursor: pointer; padding: 0;
  font: inherit; font-size: .8rem; font-weight: 640; overflow: hidden;
  box-shadow: var(--stin-2); display: flex; align-items: center; justify-content: center;
}
.profil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profil-avatar:hover { border-color: var(--tyrkys); }
.profil-dropdown {
  position: absolute; right: 0; top: calc(100% + .45rem); min-width: 13.5rem;
  background: var(--karta); border: 1px solid var(--okraj); border-radius: var(--r-karta);
  box-shadow: var(--stin-2); padding: .35rem; 
}
.profil-dropdown[hidden] { display: none; }
.profil-kdo { margin: .3rem .6rem .45rem; font-size: .84rem; font-weight: 640;
  padding-bottom: .45rem; border-bottom: 1px solid var(--okraj); }
.profil-dropdown .profil-kdo { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.motiv-prepinac {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--okraj); background: var(--plocha); font-size: .82rem; line-height: 1; padding: 0;
}
.motiv-prepinac:hover { border-color: var(--tyrkys); }
.profil-kdo small { color: var(--seda); font-weight: 480; }
.profil-dropdown a { display: block; padding: .4rem .6rem; border-radius: var(--r-prvek);
  font-size: .86rem; text-decoration: none; color: var(--inkoust); }
.profil-dropdown a:hover { background: var(--plocha); color: var(--inkoust); }
.profil-dropdown .profil-odhlasit { color: var(--chyba); margin-top: .2rem;
  border-top: 1px solid var(--okraj); border-radius: 0 0 var(--r-prvek) var(--r-prvek); }
.profil-oddel { border-top: 1px solid var(--okraj); margin: .3rem .35rem; }

/* ---- akce stránky v hero clusteru (blok hero_akce v base.html):
   dropdown nabídky vlevo od zvonečku, oddělené svislým separátorem;
   prázdný slot se separátorem se nevykreslí ---- */
.hero-akce { display: flex; gap: .5rem; align-items: center; }
.hero-akce:not(:has(*)) { display: none; }
.hero-akce-oddel { display: none; width: 1px; height: 26px;
  background: var(--okraj-silny, var(--okraj)); }
/* mezi .hero-akce a oddel stojí form hledání → obecný sourozenec ~ */
.hero-akce:has(*) ~ .hero-akce-oddel { display: block; }
.hero-drop { position: relative; display: inline-flex; }
.hero-drop-tlacitko {
  height: 38px; padding: 0 .95rem; cursor: pointer;
  border-radius: var(--r-prvek) !important;   /* mírné rohy, ne pill */
  border: 2px solid var(--karta); background: var(--karta);
  color: var(--navy-text); font: inherit; font-size: .85rem;
  font-weight: 600; box-shadow: var(--stin-2);
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.hero-drop-tlacitko:hover { color: var(--tyrkys-tmavy); }
.hero-drop .profil-dropdown { top: calc(100% + .45rem); }
.hero-drop .profil-dropdown a.aktivni { color: var(--tyrkys-tmavy);
  font-weight: 640; }
/* ikonový sloupec položek — pevná šířka drží ikony i popisky nad sebou */
.hero-drop .profil-dropdown a { display: flex; align-items: center;
  gap: .55rem; }
.drop-ikona { width: 17px; display: inline-flex; align-items: center;
  justify-content: center; flex: none; color: var(--seda); }
.hero-drop .profil-dropdown a:hover .drop-ikona,
.hero-drop .profil-dropdown a.aktivni .drop-ikona,
.hero-drop-tlacitko .drop-ikona { color: currentColor; }
.hero-drop-tlacitko .drop-ikona { margin-right: .15rem; }
/* delší nabídky (subjekty, uživatelé) — scroll uvnitř panelu */
.hero-drop .profil-dropdown { max-height: 24rem; overflow-y: auto; }
/* přímé akce obsahu (Uložit / Zrušit) — VŽDY poslední před separátorem;
   Uložit je akcentní (nepřehlédnutelné), Zrušit decentní ghost */
.hero-drop-tlacitko.hero-ulozit {
  background: var(--tyrkys-tmavy); color: var(--akcent-text);
  border-color: var(--tyrkys-tmavy); font-weight: 660;
}
.hero-drop-tlacitko.hero-ulozit:hover { filter: brightness(1.07);
  color: var(--akcent-text); }
.hero-drop-tlacitko.hero-zrusit { color: var(--seda); }
.hero-drop-tlacitko.hero-zrusit:hover { color: var(--chyba); }
/* vyhledávání uprostřed hera — pill ve výšce řady tlačítek clusteru.
   Šířku nese FLEX-BASIS formuláře se shrink 1: pole se na užších
   displejích STLAČÍ místo zalomení na další řádek (15,6" laptop). */
/* GLOBÁLNÍ hledání v clusteru (25. 8., zadání): pole je skryté; lupa
   vlevo od zvonečku ho ROZBALÍ do strany místo akcí stránky (klik mimo
   sbalí). Šířka je na všech stránkách stejná (26rem). */
.hero-hledani {
  position: relative;              /* kotva panelu výsledků (.hp-panel) */
  display: flex; overflow: hidden;
  width: 0; opacity: 0; pointer-events: none;
  transition: width .28s cubic-bezier(.4, 0, .2, 1), opacity .2s;
}
#profilMenu.hledani-otevrene .hero-hledani {
  width: 26rem; opacity: 1; pointer-events: auto; overflow: visible;
}
#profilMenu.hledani-otevrene .hero-akce { display: none; }
/* hledani.js obaluje pole do span.hledani-obal (✕ mazání) — obal musí
   plnit formulář, jinak input drží jen obsahovou šířku */
.hero-hledani .hledani-obal { flex: 1 1 auto; width: 100%; min-width: 0; }
.hero-hledani input {
  height: 38px; width: 100%; min-width: 0; max-width: 100%;
  padding: 0 1.1rem; border-radius: 0 !important;   /* hranaté (zadání) */
  border: 1px solid var(--okraj); background: var(--karta);
  color: var(--inkoust); box-shadow: var(--stin-1); font-size: .85rem;
  transition: border-color .15s, box-shadow .15s;
}
/* klik/fokus = rozšíření (dvojnásobek, ale jen kolik dá volné místo)
   + zvýraznění aktivního pole */
.hero-hledani input:focus {
  border-color: var(--tyrkys-tmavy); outline: none;
  box-shadow: 0 0 0 3px rgba(85, 208, 212, .22), var(--stin-2);
}
@media (max-width: 900px) { .hero-hledani, #hledatTlacitko { display: none; } }
/* panel globálního hledání pod hero polem (hledani-portal.js) */
.hp-panel {
  position: absolute; top: calc(100% + .45rem); left: 0; right: 0;
  z-index: 90; background: var(--karta); border: 1px solid var(--okraj);
  box-shadow: var(--stin-2); max-height: 30rem; overflow-y: auto;
  padding: .35rem;
}
.hp-skupina { font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tyrkys-tmavy);
  padding: .5rem .6rem .2rem; }
.hp-radek { display: flex; flex-direction: column; gap: .05rem;
  padding: .35rem .6rem; text-decoration: none; color: var(--inkoust);
  border-radius: var(--r-prvek); }
.hp-radek:hover { background: var(--plocha); }
.hp-radek small { color: var(--seda); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hp-nic { padding: .6rem; color: var(--seda); font-size: .85rem; }
/* modal všech výsledků hledání (Enter) — skupiny po max 25 + tlačítko
   celé skupiny; scroll jen v .modal-telo (pravidla modalů) */
.hp-modal-telo { padding: .4rem 1.2rem 1.1rem; }
.hp-modal-skupina { margin-bottom: 1.1rem; }
.hp-modal-skupina h3 {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .45rem; padding: 0 0 .4rem;
  border-bottom: 1px solid var(--okraj);
  font-size: .82rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tyrkys-tmavy);
}
.hp-modal-skupina .nav-badge { margin-left: 0; }
.hp-modal-skupina .hp-radek { padding: .4rem .55rem; }
.hp-vice, .hp-zpet { margin-top: .45rem; }
.hp-zpet { margin-bottom: .8rem; }
@media (max-width: 900px) { .hero-akce-oddel { display: none !important; } }
/* backdrop otevřeného profil dropdownu — stejný vzhled jako modalový
   .ozn-pozadi (ztmavení + blur), jen bez centrování; sedí uvnitř
   .profil-menu jako první potomek, dropdown i ikony clusteru jsou nad ním */
.profil-pozadi {
  position: fixed; inset: 0; background: rgba(13, 17, 32, .52);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.profil-pozadi[hidden] { display: none; }
/* rezerva pro cluster zvoneček + chat + avatar (3 × 38px + mezery) patří JEN
   prvnímu řádku obsahu (hero-bar) — zbytek stránky využívá plnou šířku */
/* rezervu počítá skript v base.html z reálné šířky clusteru (akce
   stránky ji rozšiřují) — fallback = šířka 3 ikon */
.obsah > .hlavicka-sekce:first-of-type,
.obsah > h1:first-of-type,
.obsah > .drobky:first-child,
.kal > .kal-toolbar {
  padding-right: var(--cluster-rezerva, clamp(8.6rem, 7.5vw, 9.4rem));
}
@media (max-width: 900px) {
  .profil-menu { top: .55rem; right: .6rem; }
  /* sidebar je statický horní pruh — rezervu potřebuje on, obsah začíná až pod ním */
  .obsah > .hlavicka-sekce:first-of-type, .obsah > h1:first-of-type,
  .obsah > .drobky:first-child, .kal > .kal-toolbar { padding-right: 0; }
  .sidebar { padding-right: 9.2rem; }
}

/* ---- zvoneček notifikací (vedle avataru) ---- */
.profil-menu { display: flex; gap: .5rem; align-items: center; }
.zvonek {
  position: relative; width: 38px; height: 38px; border-radius: 99px;
  border: 2px solid var(--karta); background: var(--karta); color: var(--navy-text);
  cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--stin-2);
}
.zvonek:hover { border-color: var(--tyrkys); }

/* ---- efekt „máš tu něco nového“ (zvoneček + chat FAB) ---- */
.zvonek.ma-nove::after, #chatFab.ma-nove::after {
  content: ""; position: absolute; inset: -3px; border-radius: 99px;
  border: 2px solid var(--tyrkys); pointer-events: none;
  animation: pulz-pozornost 1.9s ease-out infinite;
}
.zvonek.ma-nove svg { animation: zvonek-kyv 1.9s ease-in-out infinite; transform-origin: 50% 4px; }
@keyframes pulz-pozornost {
  0% { transform: scale(.92); opacity: .85; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes zvonek-kyv {
  0%, 55%, 100% { transform: rotate(0); }
  62% { transform: rotate(11deg); }
  70% { transform: rotate(-9deg); }
  78% { transform: rotate(5deg); }
  86% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .zvonek.ma-nove::after, #chatFab.ma-nove::after { animation: none; opacity: .85; transform: none; inset: -2px; }
  .zvonek.ma-nove svg { animation: none; }
}
.zvonek-badge {
  position: absolute; top: -4px; right: -4px; background: var(--chyba); color: #fff;
  border-radius: 99px; font-size: .62rem; font-weight: 700; padding: 1px 5px; min-width: 16px;
}
/* ---- notifikační centrum (modal) ---- */
/* sdílený backdrop VŠECH modalů — pravidla: zavírání jen tlačítkem (žádný
   click-outside handler), výrazné rozostření ať modal nesplývá s pozadím,
   scroll lock řeší static/modal.js */
.ozn-pozadi {
  position: fixed; inset: 0; z-index: 90; background: rgba(13, 17, 32, .52);
  display: flex; align-items: center; justify-content: center;  /* modaly vždy na střed obrazovky */
  padding: 1rem;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.ozn-pozadi[hidden] { display: none; }
.ozn-modal {
  width: min(64rem, 100%); max-height: min(88vh, 62rem); display: flex; flex-direction: column;
  background: var(--karta); border-radius: var(--r-karta); box-shadow: var(--stin-2);
  border: 1px solid var(--okraj);
}
.ozn-hlava {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .8rem var(--modal-okraj); border-bottom: 1px solid var(--okraj);
}
.ozn-hlava h2 { margin: 0; font-size: 1.02rem; }
/* PRAVIDLO: zavírací ✕ všech modalů patří do pravého horního rohu */
.ozn-hlava .ozn-zavrit { margin-left: auto; }
.ozn-zalozky { display: flex; gap: .3rem; background: var(--plocha); border-radius: 99px; padding: .18rem; }
.ozn-zalozky button {
  border: 0; background: transparent; border-radius: 99px; padding: .3rem .8rem;
  font: inherit; font-size: .82rem; color: var(--seda); cursor: pointer;
}
.ozn-zalozky button.aktivni { background: var(--karta); color: var(--inkoust); box-shadow: var(--stin-1); font-weight: 600; }
.ozn-zalozky button span { color: var(--tyrkys-tmavy); font-weight: 700; margin-left: .18rem; }
.ozn-vse[hidden] + .ozn-zavrit { margin-left: auto; }
/* jednotný vzor zavíracího ✕ všech modalů (dle #chpZavrit / .pm-hlava button) */
.ozn-zavrit {
  border: 0; background: transparent; font-size: 1.05rem; cursor: pointer;
  color: var(--seda); padding: .2rem .55rem; border-radius: 8px; line-height: 1.3;
}
.ozn-zavrit:hover { background: var(--plocha); color: var(--inkoust); }
.ozn-listy { overflow-y: auto; padding: .85rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.ozn-vse { margin-left: auto; margin-right: -.6rem;   /* těsně k zavíracímu ✕ */
  font-size: .76rem; white-space: nowrap; }
.ozn-karta {
  border: 1px solid var(--okraj); border-radius: var(--r-prvek); padding: .7rem .9rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.ozn-karta.ulozena { border-left: 3px solid var(--tyrkys-tmavy); }
.ozn-text { display: flex; align-items: baseline; gap: .55rem; font-size: .92rem; }
.ozn-text time { margin-left: auto; color: var(--seda); font-size: .74rem; white-space: nowrap; }
.ozn-ikona { flex: 0 0 auto; }
.ozn-akce { display: flex; gap: .4rem; flex-wrap: wrap; }
.ozn-akce-btn {
  border: 1px solid var(--okraj); background: var(--karta); color: var(--inkoust);
  border-radius: 99px; padding: .22rem .68rem; font: inherit; font-size: .76rem;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.ozn-akce-btn:hover { border-color: var(--tyrkys); background: var(--plocha); }
.ozn-akce-btn.hlavni { background: var(--navy); border-color: var(--navy); color: #fff; }
.ozn-akce-btn.hlavni:hover { background: var(--tyrkys-tmavy); border-color: var(--tyrkys-tmavy); }
.ozn-akce-btn.nebezpecna { color: var(--chyba); }
.ozn-akce-btn.nebezpecna:hover { border-color: var(--chyba); }
.ozn-prazdno { margin: 1.2rem 0; text-align: center; color: var(--seda); font-size: .86rem; }
@media (max-width: 560px) {
  .ozn-pozadi { padding: 0; }
  .ozn-modal { max-height: 100vh; height: 100%; border-radius: 0; }
  .ozn-text time { display: none; }
}


/* ============ Agenda dashboard — kokpit „můj den“ ============ */
.db-staty { display: flex; flex-wrap: wrap; padding: 0; margin-bottom: .7rem; overflow: hidden; }
.db-stat {
  flex: 1 1 11rem; display: flex; align-items: center; gap: .7rem;
  padding: .72rem 1rem; text-decoration: none; color: var(--inkoust);
  border-right: 1px solid var(--okraj); min-width: 0;
  border-radius: var(--r-prvek);
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.db-stat:last-child { border-right: 0; }
.db-stat:hover { background: var(--plocha); }
.db-stat:focus-visible { outline: 2px solid var(--tyrkys); outline-offset: -2px; }
.db-stat-cislo { font-family: var(--mono); font-size: 1.55rem; font-weight: 660; line-height: 1; }
.db-stat-popis { display: flex; flex-direction: column; font-size: .8rem; font-weight: 560; line-height: 1.25; min-width: 0; }
.db-stat-popis small { color: var(--seda); font-weight: 440; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-stat-pozor .db-stat-cislo { color: var(--chyba); }

.db-mriz { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: start; }
.db-changelog { margin-top: .7rem; }
.db-sit-radek { flex-wrap: wrap; }
.db-sit-radek .db-meta { white-space: nowrap; }
.db-sloupec { display: grid; gap: 1rem; min-width: 0; }
.db-karta { margin: 0; padding: .6rem .8rem .65rem; }
.db-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding-bottom: .4rem; margin-bottom: .35rem; border-bottom: 1px solid var(--okraj); }
.db-hlava h3 { margin: 0; font-size: .86rem; }
.db-hlava h3 small { color: var(--seda); font-weight: 440; margin-left: .3rem; }
.db-vice { font-size: .76rem; text-decoration: none; color: var(--tyrkys-tmavy); font-weight: 560; white-space: nowrap; }
.db-vice:hover { text-decoration: underline; }
.db-mezititulek { margin: .55rem 0 .15rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--seda); font-weight: 600; }

/* časová osa dne */
.db-udalost { display: flex; align-items: center; gap: .5rem; padding: .22rem 0; font-size: .85rem; min-width: 0; }
.db-udalost time { font-family: var(--mono); font-size: .76rem; color: var(--seda);
  flex: 0 0 3.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.db-prouzek { flex: 0 0 3px; height: 1rem; border-radius: 2px; }
.db-udalost .db-nazev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-udalost.ztlumena { opacity: .62; }

/* řádky seznamů (úkoly, licence, zakázky, události) */
.db-radek { display: flex; align-items: baseline; gap: .5rem; padding: .26rem 0; font-size: .89rem; min-width: 0; }
.db-radek + .db-radek { border-top: 1px dashed var(--okraj); }
.db-radek .db-nazev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-radek a.db-nazev { color: var(--inkoust); text-decoration: none; font-weight: 560; }
.db-radek a.db-nazev:hover { color: var(--tyrkys-tmavy); text-decoration: underline; }
.db-cislo { font-family: var(--mono); font-size: .78rem; text-decoration: none; color: var(--tyrkys-tmavy); font-weight: 620; white-space: nowrap; }
.db-cislo:hover { text-decoration: underline; }
.db-meta { color: var(--seda); font-size: .74rem; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.db-radek .stitek { flex-shrink: 0; }
.db-termin {
  flex-shrink: 0; font-family: var(--mono); font-size: .72rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--okraj); border-radius: 999px; padding: .04rem .5rem; color: var(--seda);
}
.db-radek .db-meta + .db-termin, .db-radek .stitek + .db-termin { margin-left: 0; }
.db-radek .db-termin:last-child { margin-left: 0; }
.db-termin.dnes { color: var(--tyrkys-tmavy); border-color: var(--tyrkys); font-weight: 640; }
.db-termin.brzy { color: var(--varovani); background: var(--varovani-pozadi); border-color: var(--varovani-okraj); font-weight: 600; }
.db-termin.po-terminu { color: #fff; background: var(--chyba); border-color: var(--chyba); font-weight: 640; }
.db-prazdno { margin: .45rem 0 .3rem; color: var(--seda); font-size: .82rem; }
@media (max-width: 700px) {
  .db-stat { flex: 1 1 46%; border-right: 0; border-bottom: 1px solid var(--okraj); }
  .db-mriz { grid-template-columns: 1fr; }
}

/* ---- Nastavení šablon: náhled e-mailu ---- */
.sablona-nahled {
  width: 100%; max-width: 640px; height: 320px; border: 1px solid var(--okraj);
  border-radius: var(--r-prvek); background: #fff; display: block;
}

/* ---- Debuging: hlášení chyb (🐞) ---- */
.paticka-akce { display: flex; gap: .35rem; align-items: center; }
#bugTlacitko { font-size: .82rem; line-height: 1; }
.bug-modal { width: min(46rem, 100%); }
.bug-telo { display: flex; flex-direction: column; gap: .55rem; padding-bottom: .9rem; }
.bug-kontext { margin: 0; text-align: center; }
.bug-modal #bugNahled {
  max-width: 100%; max-height: 320px; object-fit: contain; align-self: center;
  border: 1px solid var(--okraj); border-radius: var(--r-prvek); box-shadow: var(--stin-1);
}
.bug-modal label { margin: 0; font-weight: 600; }
.bug-modal textarea, .bug-modal input[type="file"] {
  max-width: 100%; width: 100%; margin-top: .3rem; font-weight: 400; }
.bug-tip {
  margin: 0; font-size: .8rem; line-height: 1.5; color: var(--inkoust);
  background: var(--varovani-pozadi); border: 1px solid var(--varovani-okraj);
  border-radius: var(--r-prvek); padding: .55rem .75rem;
}
.bug-tip kbd {
  font-family: inherit; font-size: .74rem; font-weight: 600; line-height: 1.3;
  background: var(--karta); color: var(--inkoust);
  border: 1px solid var(--okraj); border-bottom-width: 2px; border-radius: 5px;
  padding: .05rem .34rem;
}
.bug-stav { margin: 0; min-height: 1em; }
.bug-stav:empty { display: none; }

/* ---- midnight-black: kontrastní hlavní nabídka (sidebar) ----
   Navy gradient ustupuje neutrální černé; text a aktivní stavy jsou
   kontrastnější a skupiny menu oddělují viditelné separátory. */
html[data-theme="cerny"] .sidebar {
  background: linear-gradient(178deg, #17171C 0%, #0B0B0F 100%);
  scrollbar-color: rgba(255, 255, 255, .30) transparent;
}
html[data-theme="cerny"] .sidebar nav a,
html[data-theme="cerny"] .sidebar nav span { color: #F1F1F5; }
html[data-theme="cerny"] .sidebar nav a:hover { background: rgba(255, 255, 255, .10); }
/* cerny: aktivní položka dědí výchozí styl (nádech + indikátor) */
html[data-theme="cerny"] .sidebar nav .nav-eyebrow {
  color: #ABABB9; border-top: 1px solid rgba(255, 255, 255, .14);
  margin: .55rem .9rem 0; padding: .55rem .2rem .22rem;
}
html[data-theme="cerny"] .sidebar nav .nav-eyebrow:first-of-type {
  border-top: 0; margin-top: 0; padding-top: .5rem;   /* separátor už má CORE nápis */
}
html[data-theme="cerny"] .sidebar nav span.neaktivni { color: #8B8B98; }
html[data-theme="cerny"] .sidebar .core-nazev { border-bottom-color: rgba(255, 255, 255, .16); }
html[data-theme="cerny"] .sidebar .paticka {
  background: #0A0A0E; border-top-color: rgba(255, 255, 255, .16);
}
html[data-theme="cerny"] .paticka-cas .pc-datum { color: #BEBECB; }
html[data-theme="cerny"] .menu-sbalit {
  background: rgba(255, 255, 255, .10); color: #CDCDD8;
  border-color: rgba(255, 255, 255, .24);
}

/* DEV odznak — nezaměnitelnost vývojové instance (settings.PROSTREDI == "dev") */
/* badge s vlastním pozadím — čitelný na navy sidebaru i světlé/tmavé ploše */
.dev-odznak { display: inline-block; margin-left: .45rem; padding: .08rem .5rem;
  vertical-align: middle; background: #C0392B; color: #fff; border-radius: 6px;
  font-size: .68em; font-weight: 700; letter-spacing: .1em; }

/* Podkategorie sekce (Zabezpečení → Přehled | Firewall) — stejný vzor jako
   .prepinac na dashboardu (tokeny fungují ve všech třech motivech) */
.podkategorie { display: inline-flex; margin: -.35rem 0 .8rem; background: var(--karta);
  border: 1px solid var(--okraj); border-radius: 999px; overflow: hidden; box-shadow: var(--stin-1); }
.podkategorie a, .podkategorie .aktivni { padding: .38rem 1rem; font-size: .85rem;
  text-decoration: none; color: var(--seda); }
.podkategorie a:hover { color: var(--tyrkys-tmavy); background: var(--plocha); }
.podkategorie .aktivni { background: var(--navy); color: #fff; font-weight: 620; }

/* ============ Dashboard „Velín“ — hero pás + widgety ============ */
/* Hero drží firemní navy ve VŠECH motivech (jako sidebar) — identita, ne token */
.db-hero {
  display: flex; align-items: center; gap: 1.4rem; margin: 0 0 .8rem;
  padding: 1.1rem 1.4rem; border-radius: 20px; color: #fff;
  background:
    radial-gradient(820px 380px at 88% -45%, rgba(85, 208, 212, .5), transparent 62%),
    radial-gradient(640px 340px at 8% 135%, rgba(76, 110, 245, .22), transparent 55%),
    linear-gradient(150deg, #1A2138, #12172B);
  position: relative; overflow: hidden;
  box-shadow: 0 4px 12px rgba(18, 23, 43, .16), 0 26px 52px -22px rgba(18, 23, 43, .55);
}
.dh-datum { display: flex; flex-direction: column; align-items: flex-start;
  padding-right: 1.3rem; border-right: 1px solid rgba(255, 255, 255, .14); }
.dh-den { font-family: var(--mono); font-size: 1.7rem; font-weight: 640; line-height: 1;
  color: var(--tyrkys); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-mesic { font-size: .74rem; color: #C2C9DC; margin-bottom: .3rem; text-transform: capitalize; }
.dh-svatek { text-transform: none; }  /* „Adam a Eva", ne „Adam A Eva" */
.dh-text h2 { margin: 0 0 .15rem; font-size: 1.15rem; color: #fff; }
.dh-stav { margin: 0; font-size: .95rem; color: #C2C9DC; }
.dh-stav code { color: var(--tyrkys); background: rgba(255, 255, 255, .08);
  padding: .05rem .4rem; border-radius: 5px; }
.dh-ok { color: #8FDCB2; }
.dh-pozor { color: #F0B76A; font-weight: 620; }

/* widget karty: jemný zdvih na hover (jen tam, kde je na co klikat) */
.db-karta { transition: box-shadow .15s ease, transform .15s ease; }
.db-karta:hover { box-shadow: var(--stin-2); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .db-karta, .db-karta:hover,
  .db-stat, .db-stat:hover { transition: none; transform: none; }
}

/* stav služeb (technický pohled) */
.sluzby-mriz { display: flex; flex-wrap: wrap; gap: .35rem; }
.sluzba-pill { display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .6rem; border-radius: 99px; font-size: .8rem;
  border: 1px solid var(--okraj); background: var(--plocha-jemna); }
.sluzba-pill::before { content: ""; width: 7px; height: 7px; border-radius: 99px; }
.sluzba-pill.ok::before { background: var(--ok); }
.sluzba-pill.chyba { border-color: var(--chyba-okraj); background: var(--chyba-pozadi); }
.sluzba-pill.chyba::before { background: var(--chyba); }
.ok-stitek { background: var(--ok-pozadi); color: var(--ok-text); }

@media (max-width: 760px) {
  .db-hero { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .dh-datum { flex-direction: row; gap: .5rem; border-right: 0; padding-right: 0; }
}

/* KPI přehled uvnitř hero pásu — čisté hodnoty na auroře (bez dlaždic),
   tyrkysová čísla se září, jemné separátory */
.db-staty-hero { flex: 1; margin-bottom: 0; gap: 0; overflow: visible; }
/* technické metriky v hero: víc dlaždic → mřížka, ne jedna řada */
.db-staty-metriky { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.db-staty-metriky .db-stat { border-right: 1px solid rgba(255,255,255,.13); border-bottom: 0; padding: .4rem 1rem; }
.db-staty-hero .db-stat {
  color: #fff; background: none; box-shadow: none; backdrop-filter: none;
  padding: .45rem 1.25rem; border-radius: var(--r-prvek);
  border-right: 1px solid rgba(255, 255, 255, .13);
}
.db-staty-hero .db-stat:last-child { border-right: 0; }
.db-staty-hero .db-stat:hover {
  background: rgba(255, 255, 255, .07); transform: none; box-shadow: none;
}
.db-staty-hero .db-stat-cislo { color: var(--tyrkys); font-weight: 700;
  text-shadow: 0 0 18px rgba(85, 208, 212, .4); }
.db-staty-hero .db-stat-popis { color: #E7ECF6; }
.db-staty-hero .db-stat-popis small { color: #9BA6C2; }
.db-staty-hero .db-stat-pozor .db-stat-cislo { color: #F0B76A;
  text-shadow: 0 0 16px rgba(240, 183, 106, .4); }

/* ============ Načítání — segmentový progress pruh ============
   Použití: kontejner.innerHTML = nacitani("Načítám …") (helper v base.html).
   Determinovaná varianta: spanům přidat .plny (x z n hotovo), bez animace. */
.nacitani { display: flex; flex-direction: column; gap: .45rem;
  align-items: flex-start; padding: .5rem 0; }
.nacitani-pruh { display: flex; gap: 4px; }
.nacitani-pruh span { width: 11px; height: 15px; border-radius: 4px;
  background: var(--plocha); border: 1px solid var(--okraj);
  animation: nacitani-vlna 1.3s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 55ms); }
.nacitani-pruh span.plny { background: var(--tyrkys); border-color: var(--tyrkys);
  animation: none; }
.nacitani-popis { font-size: .8rem; color: var(--seda); }
@keyframes nacitani-vlna {
  0%, 60%, 100% { background: var(--plocha); border-color: var(--okraj); }
  30% { background: var(--tyrkys); border-color: var(--tyrkys); }
}
@media (prefers-reduced-motion: reduce) {
  .nacitani-pruh span { animation: none; background: var(--akcent-pozadi); }
}

/* ============ Počasí (Agenda dashboard) ============ */
.pocasi-karta { margin-bottom: .7rem; }
.pocasi-karta h3 small { font-size: 1em; }   /* město stejně velké jako „POČASÍ“ */
.pocasi-ovladani { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.pocasi-hledani { position: relative; }
.pocasi-hledani input { width: 13rem; padding: .34rem .6rem; font: inherit; font-size: .82rem;
  color: var(--inkoust); background: var(--plocha-jemna);
  border: 1px solid var(--okraj); border-radius: var(--r-prvek); }
.pocasi-hledani input:focus { outline: 2px solid var(--tyrkys); outline-offset: -1px; }
.pocasi-naseptavac { position: absolute; top: calc(100% + 4px); right: 0; z-index: 90;
  min-width: 16rem; display: flex; flex-direction: column; overflow: hidden;
  background: var(--karta); border: 1px solid var(--okraj);
  border-radius: var(--r-prvek); box-shadow: var(--stin-2); }
/* display:flex přebíjí UA pravidlo pro [hidden] → prázdný rámeček
   vypadal jako linka pod vyhledávacím polem */
.pocasi-naseptavac[hidden] { display: none; }
.pocasi-naseptavac button { display: flex; flex-direction: column; align-items: flex-start;
  gap: .1rem; padding: .45rem .7rem; font: inherit; font-size: .84rem; text-align: left;
  color: var(--inkoust); background: none; border: 0; cursor: pointer; }
.pocasi-naseptavac button:hover { background: var(--plocha-jemna); }
.pocasi-naseptavac button small, .pocasi-nenalezeno { color: var(--seda); font-size: .72rem; }
.pocasi-nenalezeno { padding: .45rem .7rem; }
.pocasi-tl { display: inline-flex; align-items: center; gap: .3rem; padding: .34rem .65rem;
  font: inherit; font-size: .8rem; font-weight: 560; color: var(--inkoust); cursor: pointer;
  background: var(--plocha-jemna); border: 1px solid var(--okraj); border-radius: 99px;
  transition: background-color .16s ease, border-color .16s ease; }
.pocasi-tl:hover { border-color: var(--tyrkys); }
.pocasi-tl[aria-expanded="true"] { background: rgba(85, 208, 212, .16); border-color: var(--tyrkys); }

.pocasi-ted { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap;
  padding: .25rem 0 .55rem; }
.pt-ikona { font-size: 2.4rem; line-height: 1; }
.pt-teplota { font-family: var(--mono); font-size: 2.35rem; font-weight: 700; line-height: 1;
  color: var(--tyrkys-tmavy); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pt-popis { display: flex; flex-direction: column; gap: .12rem; font-weight: 600; }
.pt-popis small, .pt-udaj small { color: var(--seda); font-weight: 440; font-size: .74rem; }
.pt-udaj { display: flex; flex-direction: column; gap: .12rem; font-size: .88rem;
  font-weight: 560; padding-left: 1.1rem; border-left: 1px solid var(--okraj-jemny); }
.pocasi-sipka { display: inline-block; font-weight: 700; color: var(--tyrkys-tmavy); }
/* letové podmínky pro dron — vpravo, semafor barvou verdiktu */
.pt-dron { margin-left: auto; }
.pt-dron b { font-weight: 700; }
.pt-dron-ik { vertical-align: -2px; color: var(--tyrkys-tmavy); }
.pt-dron.ok b { color: var(--ok); }
.pt-dron.pozor b { color: var(--varovani); }
.pt-dron.spatne b { color: var(--chyba); }

.pocasi-pas { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .2rem;
  scrollbar-width: thin; }
.pocasi-den { flex: 1 0 4.6rem; display: flex; flex-direction: column;
  align-items: center; gap: .16rem; padding: .42rem .2rem .46rem; font: inherit;
  cursor: pointer; color: var(--inkoust); background: none; border: 0;
  border-radius: var(--r-prvek);
  transition: background-color .16s ease, box-shadow .16s ease; }
.pocasi-den:hover { background: var(--plocha-jemna); }
/* bez zdvihu a vnějšího stínu — pás má overflow-x a ořezával by je */
.pocasi-den.aktivni { background: var(--akcent-pozadi);
  box-shadow: inset 0 0 0 1px var(--tyrkys); }
.pd-den { font-size: .74rem; font-weight: 640; display: flex; flex-direction: column;
  align-items: center; line-height: 1.12; }
.pd-den small { color: var(--seda); font-weight: 440; font-size: .64rem; }
.pd-ikona { font-size: 1.35rem; line-height: 1.15; }
.pd-teploty { font-family: var(--mono); font-size: .84rem; display: flex; gap: .28rem;
  align-items: baseline; font-variant-numeric: tabular-nums; }
.pd-teploty small { color: var(--seda); }

/* modal detailu dne — pravidla modalů: zavírání jen tlačítkem, blur backdrop
   (ozn-pozadi), scroll jen uvnitř .pm-telo */
.pocasi-modal { width: min(68rem, 100%); max-height: min(88vh, 62rem);  /* 5 souhrnných dlaždic v jedné řadě */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--karta); border-radius: var(--r-karta);
  box-shadow: var(--stin-vyrazny); }
.pm-hlava { display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .6rem .55rem 1rem;
  background: linear-gradient(150deg, #1A2138, #12172B); color: #fff; }
.pm-hlava h3 { margin: 0; font-size: .95rem; font-weight: 640; color: #fff;
  text-transform: none; letter-spacing: 0; }
.pm-hlava button { border: 0; background: none; color: #C2C9DC; font-size: 1.05rem;
  cursor: pointer; padding: .2rem .55rem; border-radius: 8px; }
.pm-hlava button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
/* tělo modalu NEscrolluje — souhrn a graf drží, roluje jen .pm-hodiny */
.pm-telo { padding: .9rem 1rem 1rem; display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow: hidden; }
.pm-hodiny { margin-top: .9rem; overflow-y: auto; overscroll-behavior: contain;
  min-height: 0; border-radius: var(--r-karta);
  scrollbar-width: none; }                      /* scrollbar skrytý, scroll funguje */
.pm-hodiny::-webkit-scrollbar { display: none; }
.pm-hodiny .pm-tabulka { margin: 0; overflow: visible; }  /* overflow hidden by rozbil sticky thead */
.pm-tabulka thead th { position: sticky; top: 0; z-index: 2; }
.pm-souhrn { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .5rem; margin-bottom: .9rem; }
.pm-fakt { display: flex; gap: .6rem; align-items: center; padding: .55rem .75rem;
  background: var(--plocha-jemna); border-radius: var(--r-prvek); }
.pm-fakt > span:last-child { display: flex; flex-direction: column; line-height: 1.3;
  min-width: 0; }
.pm-fakt b { font-size: .95rem; white-space: nowrap; }
.pm-fakt small { color: var(--seda); font-size: .72rem; }
.pm-ikona { font-size: 1.5rem; line-height: 1; }
.pm-tabulka td small { color: var(--seda); }
/* řádek aktuální hodiny (jen dnešní den) */
.pm-tabulka tr.ted td { background: var(--akcent-pozadi); }
.pm-tabulka tr.ted td:first-child { box-shadow: inset 3px 0 0 var(--tyrkys);
  color: var(--tyrkys-tmavy); font-weight: 700; }
.pm-cislo { font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.pm-cislo.dest { color: var(--tyrkys-tmavy); font-weight: 640; }
.pm-uas { white-space: nowrap; font-weight: 600; }
.pm-uas.ok { color: var(--ok); }
.pm-uas.pozor { color: var(--varovani); }
.pm-uas.spatne { color: var(--chyba); }

/* ---- oblíbená místa (modal: přidání hledáním, výběr, ✕, DnD řazení) ---- */
.oblibena-modal { width: min(42rem, 100%); max-height: min(82vh, 52rem); }
.oblibena-modal .pm-hlava { padding: .75rem .7rem .75rem 1.1rem; }
.oblibena-modal .pm-hlava h3 { font-size: 1.05rem; }
.oblibena-hledani { width: 100%; }
.oblibena-hledani input { width: 100%; max-width: none; margin-top: 0; }
.oblibena-hledani .pocasi-naseptavac { left: 0; right: 0; min-width: 0; }
.oblibena-seznam { list-style: none; margin: .7rem 0 0; padding: 0;
  overflow-y: auto; overscroll-behavior: contain; min-height: 0;
  display: flex; flex-direction: column; gap: .35rem; }
.oblibena-seznam li { display: flex; align-items: center; gap: .45rem;
  background: var(--plocha-jemna); border-radius: var(--r-prvek);
  padding: .45rem .65rem; }
.obl-pocasi { display: flex; align-items: center; gap: .4rem; margin-left: auto;
  font-family: var(--mono); font-variant-numeric: tabular-nums; }
.obl-pocasi b { font-size: 1rem; font-weight: 700; color: var(--tyrkys-tmavy); }
.obl-ik { font-size: 1.25rem; line-height: 1; }
.oblibena-seznam li.presouvane { opacity: .45; }
.oblibena-seznam li.obl-nad { box-shadow: inset 0 0 0 1px var(--tyrkys); }
.obl-uchop { cursor: grab; color: var(--seda); user-select: none; font-size: .95rem; }
.obl-vybrat { flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  gap: .02rem; background: none; border: 0; font: inherit; font-weight: 600;
  color: var(--inkoust); cursor: pointer; text-align: left; padding: .15rem .2rem; }
.obl-vybrat:hover { color: var(--tyrkys-tmavy); }
.obl-vybrat small { color: var(--seda); font-weight: 440; font-size: .74rem; }
.obl-smazat { border: 0; background: none; color: var(--seda); cursor: pointer;
  font-size: .9rem; padding: .25rem .45rem; border-radius: 6px; }
.obl-smazat:hover { color: var(--chyba); background: var(--chyba-pozadi); }
li.obl-prazdno { background: none; color: var(--seda); font-size: .85rem; padding: .3rem .1rem; }
.pocasi-graf { display: block; width: 100%; height: 104px; }
.pg-cara { fill: none; stroke: var(--tyrkys-tmavy); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round; }
.pg-srazka { fill: var(--tyrkys); opacity: .55; }
.pg-hodina, .pg-teplota { fill: var(--seda); font-size: 11px; text-anchor: middle;
  font-family: var(--mono); }

/* radar nahrazuje přehled uvnitř karty; [hidden] musí porazit display třídek */
.pocasi-ted[hidden], .pocasi-pas[hidden], .pocasi-radar[hidden] { display: none; }
/* loading počasí vycentrovaný na střed bloku */
#pocasiTed .nacitani, #pocasiMapa .nacitani { align-items: center; width: 100%; }
.pocasi-radar { margin-top: .35rem; }
#pocasiMapa { height: 340px; border-radius: var(--r-prvek); overflow: hidden;
  border: 1px solid var(--okraj); background: var(--plocha-jemna); z-index: 0; }
.pocasi-radar-liste { display: flex; align-items: center; gap: .6rem; padding-top: .45rem; }
.pocasi-radar-liste input[type="range"] { flex: 1; accent-color: var(--tyrkys-tmavy); }
.pocasi-radar-cas { font-family: var(--mono); font-size: .8rem; color: var(--seda);
  min-width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .pocasi-hledani input { width: 100%; }
  .pt-udaj { padding-left: .7rem; }
  #pocasiMapa { height: 280px; }
}

/* podnadpis pod nadpisem stránky — obecný vzor (Dashboard: stavová věta);
   nová stránka: <div><h1>…</h1><p class="podnadpis">…</p></div> v .hlavicka-sekce */
.podnadpis, .stav-radek { margin: .15rem 0 0; font-size: .93rem; color: var(--seda); }
.stav-radek .dh-ok { color: var(--ok); }
.stav-radek .dh-pozor { color: var(--varovani); font-weight: 620; }
.stav-radek code { color: var(--tyrkys-tmavy); background: var(--plocha-jemna);
  padding: .05rem .4rem; border-radius: 5px; }

/* ==== OSTRÉ HRANY (experiment 19. 8. 2026) =============================
   Celá aplikace přechází na ostré rohy. Zaoblení drží jen:
   1) pill přepínače (vzor .prepinac) — výjimka na přání uživatele,
   2) skutečné kruhy (avatary, kruhová tlačítka, tečky stavu, početní
      odznaky) — kruh je tvar prvku, ne zaoblený roh.
   Zrušení experimentu = smazat tento blok (tokeny --r-karta/--r-prvek
   výše zůstaly, uplatní se znovu). */
*, *::before, *::after { border-radius: 0 !important; }
/* pill přepínače (rodina .prepinac) */
.prepinac, .podkategorie, .kal-pohledy,
.ozn-zalozky, .ozn-zalozky button { border-radius: 999px !important; }
/* kruhy: avatary, kruhová tlačítka, tečky, početní odznaky */
.profil-avatar, .profil-avatar img, .avatar-nahled, .zk-avatar, .zk-rejm-znak, .zvonek,
.zvonek.ma-nove::after, #chatFab.ma-nove::after, .zvonek-badge,
.chp-avatar, .chp-online, .chp-unread, #chpZpetBadge, .nav-badge,
.kal-mesic-den.dnes .kal-mesic-cislo, .kal-now::before,
.sluzba-pill::before { border-radius: 999px !important; }

/* výběr uživatele hledáním (uzivatele.js) — vzor .subjekt-vyber */
.uziv-vyber { position: relative; display: flex; flex-wrap: wrap;
  align-items: center; gap: .35rem; width: 100%; max-width: 30rem; }
.uziv-vyber-pole { flex: 1; min-width: 9rem; }
.uziv-cipy { display: contents; }
.uziv-cip { display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .5rem; font-size: .8rem; border-radius: 999px;
  border: 1px solid var(--okraj); background: var(--plocha);
  white-space: nowrap; }
.uziv-cip-x { border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--seda); font-size: .95rem; line-height: 1; }
.uziv-cip-x:hover { color: var(--chyba); }
.uziv-naseptavac { position: absolute; top: calc(100% + .2rem); left: 0;
  right: 0; z-index: 90; background: var(--karta);
  border: 1px solid var(--okraj); box-shadow: var(--stin-2);
  max-height: 16rem; overflow-y: auto; padding: .25rem; }
.uziv-nasep-radek { display: block; width: 100%; text-align: left;
  border: 0; background: none; padding: .4rem .6rem; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--inkoust); }
.uziv-nasep-radek:hover { background: var(--akcent-pozadi); }
.uziv-nasep-prazdne { color: var(--seda); }
.uziv-nasep-nic { padding: .5rem .6rem; }

/* pojistná paměť (pojistka.js) — karta nabídky obnovy vpravo dole */
.pojistka-karta {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 96;
  display: flex; align-items: center; gap: .6rem;
  background: var(--karta); border: 1px solid var(--okraj);
  box-shadow: var(--stin-2); border-radius: var(--r-prvek);
  padding: .55rem .8rem; font-size: .85rem; max-width: 34rem; }

/* potvrzovací modal (potvrzeni.js — náhrada browser confirm) */
.potvrzeni-modal { width: min(26rem, 100%); }
.potvrzeni-text { margin: 0; padding: 1.1rem 1.2rem .4rem; }
.potvrzeni-paticka { display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.2rem 1.1rem; }

/* řazení tabulek (razeni.js) — klikací hlavičky s indikátorem směru */
.tabulka th { cursor: pointer; user-select: none; }
.tabulka th.razeno-asc::after { content: " ▲"; font-size: .68em; color: var(--tyrkys-tmavy); }
.tabulka th.razeno-desc::after { content: " ▼"; font-size: .68em; color: var(--tyrkys-tmavy); }

/* ==================================================================
   GLOBÁLNÍ VZORY VZHLEDU (22. 8. 2026) — vzor: detail subjektu
   (/zakaznici/<slug>/#info) a modal „Nastavení subjektu“.
   ZÁVAZNÉ pro nový vývoj; zk-* názvy jsou legacy aliasy stejných
   pravidel (zakaznici/sklad šablony), nové šablony používají globální
   názvy. Dokumentace vzorů: CLAUDE.md → „Globální vzhledové vzory“.
   ================================================================== */

/* ---- nadpisy karet a panelů — jeden jazyk celého portálu:
   malé uppercase tyrkysové s linkou; akce v nadpisu nedědí uppercase */
.karta > h2, .zk-sekce .karta > h2, .cast > h2, .zk-cast > h2, .zk-sekce > h2 {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin: 0 0 .9rem; padding: 0 0 .55rem; border-bottom: 1px solid var(--okraj);
  font-size: .88rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tyrkys-tmavy);
}
.karta > h2 .btn, .zk-sekce .karta > h2 .btn, .cast > h2 .btn, .zk-cast > h2 .btn, .zk-sekce > h2 .btn,
.karta > h2 .akce-btn, .zk-sekce .karta > h2 .zk-akce-btn,
.cast > h2 .akce-btn, .zk-cast > h2 .zk-akce-btn, .zk-sekce > h2 .zk-akce-btn {
  text-transform: none; letter-spacing: 0; color: var(--inkoust); font-weight: 540;
}
/* metadata v nadpisu (počty, e-mail) — bez uppercase, drží se u titulku vlevo */
.karta > h2 small, .cast > h2 small, .cast-nadpis small, .zk-form-nadpis small {
  text-transform: none; letter-spacing: 0;
}

/* ---- mozaika panelů (grid 2 sloupců částí .cast) */
.mozaika, .zk-info-form {
  max-width: none; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch;
}
@media (max-width: 1100px) { .mozaika, .zk-info-form { grid-template-columns: 1fr; } }
.cast, .zk-cast {
  background: var(--karta); border: 1px solid var(--okraj-karty);
  border-radius: 14px; padding: 1rem 1.2rem; min-width: 0; box-shadow: var(--stin-1);
}

/* ---- nadpis pod-sekce formuláře (uvnitř panelu či modalu) */
.cast-nadpis, .zk-form-nadpis {
  margin: 0 0 .8rem; padding: 0 0 .5rem; background: none; border: 0;
  border-bottom: 1px solid var(--okraj); font-size: .88rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tyrkys-tmavy);
}

/* ---- blok = mřížka popisek|pole; popisky lícují vpravo na společné svislici */
.blok, .zk-blok {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr);
  gap: .85rem 1.3rem; align-items: center;
}
/* u vysokých polí (textarea) popisek nesedí na střed, ale k první řádce */
.blok > .popisek:has(+ span textarea), .blok > .popisek:has(+ textarea) {
  align-self: start; padding-top: .3rem; }
.popisek, .zk-popisek {
  font-size: .8rem; color: var(--seda); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
}
.siroke { grid-column: 2 / -1; }
/* dvě související pole na jednom řádku hodnotového sloupce
   (např. „3 měsíce“, „první pondělí“) */
.pole-radek { display: flex; gap: .5rem; align-items: center; }
.pole-radek > * { flex: 1 1 auto; min-width: 0; }
/* tlačítko v řádku se nesmí roztahovat ani přetéct za okraj modalu */
.pole-radek > .btn, .pole-radek > button { flex: 0 0 auto; }
@media (max-width: 640px) {
  .blok, .zk-blok { grid-template-columns: 1fr; }
  .popisek, .zk-popisek { text-align: left; }
}

/* ---- pole na lince — kontejner .linkovy-form (mozaika a modal-form ho mají
   implicitně); bez rámečku, jen spodní linka, focus tyrkys */
.linkovy-form input:not([type=checkbox]):not([type=radio]), .linkovy-form select, .linkovy-form textarea,
.mozaika input:not([type=checkbox]), .mozaika select, .mozaika textarea,
.modal-form input:not([type=checkbox]), .modal-form select, .modal-form textarea,
.zk-info-form input:not([type=checkbox]), .zk-info-form select, .zk-info-form textarea,
.zk-kt-form input:not([type=checkbox]), .zk-kt-form select, .zk-kt-form textarea {
  width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--okraj);
  border-radius: 0; padding-left: .15rem; transition: border-color .15s ease;
}
.linkovy-form input:hover:not(:focus), .linkovy-form select:hover:not(:focus),
.mozaika input:hover:not(:focus), .mozaika select:hover:not(:focus),
.modal-form input:hover:not(:focus), .modal-form select:hover:not(:focus),
.zk-info-form input:hover:not(:focus), .zk-info-form select:hover:not(:focus),
.zk-kt-form input:hover:not(:focus), .zk-kt-form select:hover:not(:focus) {
  border-bottom-color: var(--okraj-silny);
}
.linkovy-form input:focus, .linkovy-form select:focus, .linkovy-form textarea:focus,
.mozaika input:focus, .mozaika select:focus, .mozaika textarea:focus,
.modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus,
.zk-info-form input:focus, .zk-info-form select:focus, .zk-info-form textarea:focus,
.zk-kt-form input:focus, .zk-kt-form select:focus, .zk-kt-form textarea:focus {
  border-bottom-color: var(--tyrkys); box-shadow: none; outline: none;
}
.linkovy-form textarea, .mozaika textarea, .modal-form textarea,
.zk-info-form textarea, .zk-kt-form textarea { min-height: 4.5rem; }
/* šířky dle obsahu (krátké kódy, střední identifikátory) */
.sirka-s, .zk-sirka-s { max-width: 10rem; }
.sirka-m, .zk-sirka-m { max-width: 15rem; }

/* ---- MODAL — vzor „Nastavení subjektu“: .ozn-pozadi > .ozn-modal.modal-okno >
   .ozn-hlava (h2 + ✕ .ozn-zavrit) + <form .modal-form> .modal-telo (scroll)
   + .modal-paticka (akce vpravo). Pravidla chování drží modal.js. */
.modal-okno, .zk-kt-modal { max-width: 38rem; }
.modal-okno.modal-velky { max-width: 60rem; }  /* velké modaly (rozsáhlejší formuláře) */
.modal-form, .zk-kt-form { display: flex; flex-direction: column; min-height: 0; }
.modal-telo, .zk-kt-telo {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.1rem var(--modal-okraj) .3rem;
  flex: 1 1 auto; min-height: 0;
}
.modal-telo .cast-nadpis, .modal-telo .zk-form-nadpis,
.zk-kt-telo .cast-nadpis, .zk-kt-telo .zk-form-nadpis { margin-top: 1.1rem; }
.modal-telo .cast-nadpis:first-child, .zk-kt-telo .zk-form-nadpis:first-child { margin-top: 0; }
.modal-telo .blok, .modal-telo .zk-blok,
.zk-kt-telo .blok, .zk-kt-telo .zk-blok { grid-template-columns: 6.5rem minmax(0, 1fr); }
/* delší popisky (formuláře nastavení) — širší sloupec popisků */
.blok-siroky, .modal-telo .blok-siroky, .zk-kt-telo .blok-siroky {
  grid-template-columns: 11rem minmax(0, 1fr); }
/* 4sloupcová mřížka rozsáhlejších modalů: popisek|pole|popisek|pole */
.blok-4, .modal-telo .blok-4 { grid-template-columns: 8.5rem minmax(0, 1fr) 8.5rem minmax(0, 1fr); }
@media (max-width: 860px) { .blok-4, .modal-telo .blok-4 { grid-template-columns: 8.5rem minmax(0, 1fr); } }
/* checkbox s popiskem na řádku pole */
.check-radek { display: flex; align-items: center; gap: .45rem; }
.check-radek input { width: auto; margin: 0; }
/* pole s jednotkou za ním (Kč, ks…) */
.pole-jednotka { display: flex; align-items: baseline; gap: .45rem; }
.modal-radek, .zk-kt-radek { display: flex; gap: .45rem; min-width: 0; }
.modal-radek input, .zk-kt-radek input { flex: 1; min-width: 0; }
.modal-paticka, .zk-kt-paticka {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: .85rem var(--modal-okraj); border-top: 1px solid var(--okraj);
}

/* ---- akční pilulky v seznamech a nadpisech (vzor pill akcí detailu) */
.akce-skupina, .zk-akce-skupina { display: inline-flex; gap: .3rem; vertical-align: middle; }
.akce-btn, .zk-akce-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1.4;
  white-space: nowrap; background: var(--plocha); color: var(--inkoust);
  font-weight: 600; border: 1px solid var(--okraj-silny); border-radius: 999px;
  padding: .18rem .7rem; font-size: .82rem; box-shadow: none;
  transition: color .15s ease, border-color .15s ease;
}
.akce-btn:hover, .zk-akce-btn:hover {
  color: var(--tyrkys-tmavy); border-color: var(--tyrkys-tmavy);
  transform: none; filter: none; box-shadow: none;
}
/* ---- seznam: akční sloupec vpravo — opt-in třída na .tabulka */
.tabulka-akce-vpravo td:last-child:not([colspan]) { text-align: right; }

/* ---- hub stránky (souhrnný přehled s rozcestníkem — registr core/navigace.py) */
.hub-mriz { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem; margin-top: .4rem; }
.hub-dlazdice { display: flex; align-items: flex-start; gap: .8rem;
  background: var(--karta); border: 1px solid var(--okraj-karty);
  border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--stin-1);
  text-decoration: none; color: var(--inkoust);
  transition: border-color .15s ease; }
a.hub-dlazdice:hover { border-color: var(--tyrkys); }
.hub-ikona { font-size: 1.5rem; line-height: 1; }
.hub-telo { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.hub-telo small { color: var(--seda); line-height: 1.4; }
.hub-pripravujeme { opacity: .55; }
.hub-dlazdice .stitek { align-self: flex-start; white-space: nowrap; }

/* ---- Firemní profil: loga a razítko ---- */
.firma-obrazek { padding: .55rem 0; border-bottom: 1px solid var(--okraj); }
.firma-obrazek:last-child { border-bottom: 0; }
.firma-obrazek-nahled { max-height: 90px; max-width: 100%; display: block;
  margin: .35rem 0; background: #fff; border: 1px solid var(--okraj);
  border-radius: var(--r-prvek); padding: .3rem; }
.firma-obrazek-nahled.ctverec { width: 90px; height: 90px; object-fit: contain; }
.firma-obrazek-akce { display: inline-flex; gap: .45rem; align-items: center;
  margin: .15rem .5rem .15rem 0; }
.firma-obrazek-akce input[type="file"] { width: auto; max-width: 17rem; margin: 0; }

/* ---- filtrační lišta seznamů (vzor Subjekty .zk-filtry): filtry vlevo,
   akce pro přidávání/správu (.lista-akce) u pravého okraje; na širokých
   obrazovkách drží vše na jednom řádku, na úzkých se láme ---- */
.filtr-lista { display: flex; gap: .55rem; align-items: center;
  flex-wrap: wrap; margin: .8rem 0; }
.filtr-lista input[name="q"] { flex: 0 1 15rem; min-width: 7rem;
  width: 15rem; margin-top: 0; }
.filtr-lista select { width: auto; flex: 0 1 auto; min-width: 0;
  max-width: 13rem; margin-top: 0; }
.filtr-lista label, .filtr-lista .btn, .filtr-lista .stitek { white-space: nowrap; }
.filtr-lista .lista-akce { margin-left: auto; display: inline-flex;
  gap: .5rem; align-items: center; }
/* PRAVIDLO (23. 8.): tlačítka přidávání záznamů žijí v .lista-akce NAD kartou
   a mají VŽDY jednotnou velikost (vzor „+ Nový subjekt") — btn-maly se tu přebíjí */
.lista-akce .btn { padding: .38rem .85rem; font-size: .84rem; font-weight: 640; }
.lista-akce .btn-vedlejsi { font-weight: 560; }
@media (min-width: 1200px) { .filtr-lista { flex-wrap: nowrap; } }

/* ---- křížek vyhledávacích polí (hledani.js) ---- */
.hledani-obal { position: relative; display: inline-flex; align-items: center;
  min-width: 0; }
.hledani-obal > input { flex: 1 1 auto; width: 100%; min-width: 0;
  max-width: none; padding-right: 1.8rem; }
.hledani-krizek { position: absolute; right: .3rem; top: 50%;
  transform: translateY(-50%); border: 0; background: transparent;
  color: var(--seda); cursor: pointer; font-size: .8rem; line-height: 1;
  padding: .2rem .3rem; border-radius: 6px; }
.hledani-krizek:hover { color: var(--inkoust); background: var(--plocha); }
/* obal přebírá flex/šířkové chování původního inputu v lištách */
.filtr-lista .hledani-obal, .zk-filtry .hledani-obal {
  flex: 0 1 15rem; min-width: 7rem; width: 15rem; }
.sk-filtr .hledani-obal { flex: 0 1 20rem; min-width: 9rem; }
.nahravani .hledani-obal { max-width: 20rem; flex: 0 1 auto; }
/* nativní křížek prohlížeče u type=search by se dubloval */
input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ---- jednotné odsazení obsahu pod přepínačem segmentů: když mezi
   přepínačem a obsahem není filtrační lišta, obsah se ho nesmí dotýkat ---- */
.prepinac + .karta, .prepinac + .tabulka, .prepinac + .profil-mriz,
.prepinac + .mozaika, .prepinac + section, .prepinac + .hub-mriz,
.prepinac + .zprava { margin-top: .95rem; }

/* ---- hub Plánování: dlaždice přes celou šířku + přehledy pod nimi ---- */
.hub-mriz-plna { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.hub-prehledy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; margin-top: 1.2rem; }
@media (max-width: 1500px) { .hub-prehledy { grid-template-columns: 1fr; } }

/* ---- hromadný výběr seznamů (vyber.js — vzor Subjekty) ---- */
.vyber-bunka { width: 1.7rem; text-align: center; }
.vyber-bunka input { width: auto; margin: 0; accent-color: var(--tyrkys-tmavy); }
.vyber-lista { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  border: 1px solid rgba(44, 158, 163, .45); background: var(--plocha);
  border-radius: var(--r-prvek); padding: .5rem .8rem; margin: .7rem 0 0; }
.vyber-akce { display: inline-flex; gap: .5rem; align-items: center; }

/* ---- náhled obrázků (nahled.js) — velký modal ~90 % okna ---- */
.nahled-modal { width: 90vw; max-width: 90vw; height: 90vh; max-height: 90vh; }
.nahled-telo { flex: 1; min-height: 0; display: flex; align-items: center;
  justify-content: center; padding: .6rem 1rem 1rem; }
.nahled-telo img { max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--r-prvek); }
.nahled-modal .nahled-novy { margin-left: auto; }
.nahled-modal .ozn-zavrit { margin-left: .4rem; }

/* ---- Debuging: strukturovaná karta hlášení + diskusní vlákno ---- */
.dbg-karta { margin-bottom: .8rem; }
.dbg-hlava { display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem; flex-wrap: wrap; border-bottom: 1px solid var(--okraj);
  padding-bottom: .45rem; margin-bottom: .55rem; }
.dbg-titul { display: inline-flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.dbg-stranka { font-weight: 600; }
.dbg-meta { display: inline-flex; gap: .7rem; align-items: center; }
.dbg-telo { display: flex; gap: 1rem; align-items: flex-start; }
.dbg-obsah { flex: 1; min-width: 0; }
.dbg-poznamka { white-space: pre-wrap; margin: 0 0 .4rem; }
.dbg-kontext { margin: 0 0 .3rem; }
.dbg-technika summary { cursor: pointer; }
.dbg-akce { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin-top: .55rem; }
.dbg-nahled img { max-width: 300px; max-height: 190px; border: 1px solid var(--okraj);
  border-radius: var(--r-prvek); display: block; }
.dbg-vlakno { display: flex; flex-direction: column; gap: .5rem; max-height: 45vh;
  overflow-y: auto; overscroll-behavior: contain; padding-top: .3rem; }
.dbg-zprava { background: var(--plocha); border: 1px solid var(--okraj);
  border-radius: var(--r-prvek); padding: .4rem .65rem; max-width: 85%;
  align-self: flex-start; }
.dbg-zprava.dbg-moje { align-self: flex-end;
  border-color: rgba(44, 158, 163, .45); }
.dbg-forma { gap: .6rem; }
.dbg-forma textarea { flex: 1; margin: 0; max-width: none; }

/* ---- výběr subjektu hledáním (subjekty.js) ---- */
.subjekt-vyber { position: relative; display: block; min-width: 0; }
.subjekt-vyber-pole { width: 100%; max-width: none; }
.subjekt-nevybran { border-color: var(--varovani) !important; }
.subjekt-naseptavac { position: absolute; z-index: 95; left: 0; right: 0;
  top: 100%; background: var(--karta); border: 1px solid var(--okraj);
  border-radius: var(--r-prvek); box-shadow: var(--stin-2);
  max-height: 16rem; overflow-y: auto; }
.subjekt-nasep-radek { padding: .35rem .6rem; cursor: pointer;
  font-size: .85rem; }
.subjekt-nasep-radek:hover { background: var(--plocha); }
.subjekt-nasep-radek small { color: var(--seda); float: right; }
.subjekt-nasep-zadny { color: var(--seda); }