/* ==========================================================================
   IS Seneca — site.css
   Jediný zdroj vzhledu. Používají ho náhledy v docs/ i skutečná aplikace.
   Pravidlo: do .cshtml se nepíšou barvy, pixely ani style="...".
             Když třída chybí, přidá se sem — ne do stránky.
   Doplňuje Bootstrap 5.3 (mřížka, utility). Nenahrazuje ho.
   ========================================================================== */

:root {
  /* plochy */
  --pozadi:            #F7F6F4;
  --plocha:            #FFFFFF;
  --plocha-tlumena:    #FAFAF9;
  --plocha-vyplnena:   #F2F1EE;
  /* bílá etiketa na kotoučku — obraz tisku je černobílý, takže bílá i v náhledu, ať by se plochy měnily jakkoli */
  --etiketa:           #FFFFFF;
  /* plátno informační obrazovky (tmavý vzhled přehrávače) — miniatury a náhledy v IS na něm, jak budou vypadat na televizi */
  --obrazovka-pozadi:  #0D1A29;

  /* linky */
  --ramecek:           #E2E0DB;
  --ramecek-vyrazny:   #C9C6BF;

  /* text */
  --text:              #2A2A28;
  --text-tlumeny:      #5C5A55;
  --text-slaby:        #8B8884;

  /* významové barvy — vždy dvojice text + plocha */
  --akce:              #1F6FD0;
  --akce-plocha:       #E8F0FC;
  --ok:                #0F6E56;
  --ok-plocha:         #E1F5EE;
  --pozor:             #854F0B;
  --pozor-plocha:      #FAEEDA;
  --chyba:             #A32D2D;
  --chyba-plocha:      #FCEBEB;

  /* rozměry */
  --radius:            7px;
  --radius-velky:      11px;
  --mezera-mala:       6px;
  --mezera:            13px;
  --mezera-velka:      18px;

  /* písmo */
  --pismo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pismo-cisla: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Senekovy citáty na přihlášení. Palatino je systémové písmo Windows: webové písmo nejde
     (CSP font-src 'self') a stránka nic nestahuje. */
  --pismo-citat: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--text);
  font: 14px/1.5 var(--pismo);
}

/* --------------------------------------------------------------- karty -- */

.karta {
  background: var(--plocha);
  border: 1px solid var(--ramecek);
  border-radius: var(--radius-velky);
  overflow: hidden;
}
.karta-telo    { padding: var(--mezera); }
.karta-hlavicka {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--ramecek);
  background: var(--plocha-tlumena);
}
.karta-nadpis  { font-size: 15px; font-weight: 600; }
.karta-popis   { font-size: 12.5px; color: var(--text-tlumeny); margin-bottom: 10px; }

/* ---------------------------------------------------------------- shell -- */

/* Horní lišta a lišta modulů jsou jeden bílý celek s jedinou čarou dole (varianta A, 24. 9. 2026).
   Dřív měla horní lišta vlastní čáru na tlumené ploše a lišta modulů ležela na šedém pozadí stránky —
   hlavička se rozpadala na dva pruhy a moduly splývaly s obsahem. Bez lišty modulů (přihlášení)
   si horní lišta čáru nechává. */
.lista-app     { display: flex; align-items: center; gap: 9px;
                 padding: 10px 13px; border-bottom: 1px solid var(--ramecek);
                 background: var(--plocha); }
.lista-app:has(+ .lista-moduly) { border-bottom: 0; }
.logo-nazev    { font-size: 14px; font-weight: 600; line-height: 1.2; }
.logo-verze    { font-size: 10.5px; color: var(--text-slaby); }

.uzivatel      { display: flex; align-items: center; gap: 7px; margin-left: auto;
                 border: 1px solid var(--ramecek); border-radius: var(--radius);
                 padding: 3px 8px; font-size: 12.5px; }

.avatar        { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
                 background: var(--akce-plocha); color: var(--akce);
                 display: flex; align-items: center; justify-content: center;
                 font-size: 10px; font-weight: 600; }
.avatar--maly  { width: 20px; height: 20px; font-size: 9px; }

/* Lišta modulů: ikona v barvě modulu, název neutrální. Barvu nese jen ikona a čára pod vybraným
   modulem — text tak zůstane čitelný při jakékoli barvě z nastavení a při deseti modulech nevznikne
   řada plných barevných ploch (návrh shellu, kap. 1). Dřív tu byl čtvereček 9 px, který skoro nebyl
   vidět, a vybraný modul měl vnitřní stín, který se v zaoblených rozích stáčel nahoru. */
.lista-moduly  { display: flex; gap: 2px; padding: 0 9px; background: var(--plocha);
                 border-bottom: 1px solid var(--ramecek); overflow-x: auto; scrollbar-width: thin; }
.modul         { position: relative; display: flex; align-items: center; gap: 8px; white-space: nowrap;
                 height: 44px; padding: 0 12px; border-radius: var(--radius) var(--radius) 0 0;
                 font-size: 13px; color: var(--text-tlumeny); }
/* Vybraný modul: podklad 8 % barvy modulu (bez color-mix šedý) a čára na spodní hraně lišty. */
.modul--aktivni{ color: var(--text); font-weight: 600; background: var(--plocha-tlumena);
                 background: color-mix(in srgb, var(--modul-barva, var(--akce)) 8%, var(--plocha)); }
.modul--aktivni::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px;
                 border-radius: 3px 3px 0 0; background: var(--modul-barva, var(--akce)); }
/* Když se moduly nevejdou, přidá site.js třídu --jen-ikony a nevybrané ukážou jen ikonu. Rozhoduje,
   jestli lišta PŘETÉKÁ, ne šířka okna — kolik se vejde, záleží na počtu modulů a délce názvů. Název
   zůstává v odkazu pro čtečky, jen není vidět; skript ho dá do title. */
.lista-moduly--jen-ikony .modul:not(.modul--aktivni) { padding-inline: 11px; }
.lista-moduly--jen-ikony .modul:not(.modul--aktivni) .modul-nazev {
                 position: absolute; width: 1px; height: 1px; overflow: hidden;
                 clip-path: inset(50%); white-space: nowrap; }

/* Skupiny modulů (Moduly/ListaModulu.cs, návrh docs/navrh-lista-modulu.html schválený 28. 9. 2026). Tři úrovně,
   vybírá je site.js podle přetékání: 1) jedna řada, skupinu od sousedů dělí tenká čára a nadpis je jen pro
   čtečky; 2) dvě řady jako pás karet v Office — nadpis skupiny nahoře, její moduly po sloupcích ve dvou řadách,
   samostatný modul jako vysoké tlačítko s ikonou nad názvem; 3) jen ikony (--jen-ikony výš), zase v jedné řadě.
   Pořád přímé odkazy, žádné rozbalování — agendy nesmí mít klik navíc. */
.skupina-modulu { position: relative; display: flex; }
.skupina-modulu-polozky { display: flex; gap: 2px; }
.skupina-modulu-nazev { position: absolute; width: 1px; height: 1px; overflow: hidden;
                 clip-path: inset(50%); white-space: nowrap; }
.lista-moduly > * + .skupina-modulu,
.lista-moduly > .skupina-modulu + * { margin-left: 13px; }
.lista-moduly > * + .skupina-modulu::before,
.lista-moduly > .skupina-modulu + *::before {
                 content: ""; position: absolute; left: -7px; top: 12px; bottom: 12px; width: 1px;
                 background: var(--ramecek); }
.lista-moduly--dve-rady { align-items: stretch; padding-block: 5px 0; }
.lista-moduly--dve-rady .skupina-modulu { flex-direction: column; }
.lista-moduly--dve-rady .skupina-modulu-nazev { position: static; width: auto; height: auto; clip-path: none;
                 padding: 0 10px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
                 text-transform: uppercase; color: var(--text-slaby); }
.lista-moduly--dve-rady .skupina-modulu-polozky { display: grid; grid-auto-flow: column;
                 grid-template-rows: repeat(2, 30px); column-gap: 2px; }
.lista-moduly--dve-rady .skupina-modulu .modul { height: 30px; padding: 0 10px; border-radius: var(--radius);
                 font-size: 12.5px; }
.lista-moduly--dve-rady .skupina-modulu .modul--aktivni::after { left: 10px; right: 10px; height: 2px; }
.lista-moduly--dve-rady > .modul { flex-direction: column; justify-content: center; gap: 3px; height: auto;
                 min-height: 76px; padding: 0 12px 4px; font-size: 12px; }
.lista-moduly--dve-rady > * + .skupina-modulu::before,
.lista-moduly--dve-rady > .skupina-modulu + *::before { top: 10px; bottom: 10px; }

/* Pruh náhledu rolí (Auth/NahledRoli.cs, rozhodnutí n05 z 27. 9. 2026): pod lištou modulů na každé stránce,
   dokud správce vidí IS očima jiných rolí. Barva upozornění přes celou šířku, ať se náhled nedá přehlédnout
   ani splést s vlastním pohledem — v náhledu se nic neuloží a člověk musí vědět proč. */
.lista-nahled  { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 7px 13px;
                 background: var(--pozor-plocha); color: var(--pozor); border-bottom: 1px solid var(--pozor);
                 font-size: 13px; }
.lista-nahled form { margin-left: auto; }

/* Ikona modulu (Moduly/IkonyModulu.cs): kreslí se přímo do stránky se stroke="currentColor",
   barvu jí dává --modul-barva z nastavení modulu. 18 px na liště a v záhlaví modulu, 15 px na
   dlaždicích a v seznamech. Menší ne — pod 14 px se kresba slévá. */
.modul-ikona   { width: 18px; height: 18px; flex-shrink: 0;
                 color: var(--modul-barva, var(--text-slaby)); }
.modul-ikona--mala { width: 15px; height: 15px; }
/* Barevný čtvereček modulu. V aplikaci ho nahradila ikona; zůstává pro náhledy v docs/ (místo loga). */
.modul-znacka  { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
                 background: var(--modul-barva, var(--text-slaby)); }

/* ------------------------------------------------------- boční navigace -- */

.rozdeleni     { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.bocni-nav     { padding: 9px 7px; border-right: 1px solid var(--ramecek);
                 background: var(--plocha-tlumena); }
/* Skupina musí být na první pohled jiná než položka. Nejdřív verzálky malým šedým písmem — pořád
   splývaly (připomínky uživatele 14. 9. 2026). Podle levého menu Entra ID: skupina je tučný nadpis
   běžnou barvou textu s čarou pod sebou, položky pod ní větší a čitelné, vybraná na šedém podkladu. */
.bocni-skupina { font-size: 13px; font-weight: 600; color: var(--text);
                 padding: 12px 8px 6px; margin: 0 2px 4px; border-bottom: 1px solid var(--ramecek); }
.bocni-skupina:first-child { padding-top: 4px; }
/* Položky odsazené pod nadpisem skupiny (uživatel 15. 9. 2026: „vše zarovnané doleva, posuň položky trochu doprava“,
   jako levé menu Microsoftu) — i podklad vybrané položky začíná odsazený, takže je vidět, ke které skupině patří. */
.bocni-polozka { padding: 7px 10px; margin-left: 12px; border-radius: var(--radius);
                 font-size: 13px; color: var(--text); }
.bocni-polozka--aktivni { background: var(--plocha-vyplnena); color: var(--text); font-weight: 600; }
/* Nastavení modulu dole, oddělené čarou a jinak podbarvené (navigace IT, it11, 26. 10. 2026: „možná lehce jiné podbarvení
   pro odlišení“) — nastavuje se zřídka a nemá se plést s částmi, kam se chodí denně. */
.bocni-polozka--nastaveni { display: block; margin-top: 12px; border-top: 1px dashed var(--ramecek-vyrazny); border-radius: 0 0 var(--radius) var(--radius);
                           background: var(--plocha-vyplnena); color: var(--text-slaby); }
/* Skupina IT, varianta A (docs/navrh-navigace-it.html, 26. 10. 2026): moduly jako záložky v záhlaví karty, aktivní podtržená
   barvou modulu; vlevo jen části vybraného modulu. Na úzké kartě se záložky zalomí. */
.it-hlavicka   { flex-wrap: wrap; row-gap: 8px; }
.it-nazev      { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; }
.it-moduly     { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.it-modul      { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid transparent; border-radius: var(--radius);
                 font-size: 13px; color: var(--text); text-decoration: none; white-space: nowrap; }
.it-modul svg  { width: 16px; height: 16px; flex: none; color: var(--modul-barva, var(--text-slaby)); }
.it-modul:hover { background: var(--akce-plocha); color: var(--text); text-decoration: none; }
.it-modul--aktivni { background: var(--plocha); border-color: var(--ramecek); box-shadow: inset 0 -3px 0 var(--modul-barva, var(--akce)); font-weight: 600; }
/* Na telefonu jen ikony, název u vybraného (it18: když se záložky nevejdou, ikony jako na hlavní liště); název je i v title. */
.it-modul-nazev { min-width: 0; }
/* Odznak „k řešení“ u záložky (it09, OdznakyIt): neběží, nálezy k potvrzení, virtuály k řešení. */
/* Hledání stránky IT Ctrl+K (it13) s připnutými a naposledy otevřenými (it12): nativní <dialog>, it-hledani.js. */
.it-hledani    { width: min(560px, calc(100vw - 32px)); max-height: min(70vh, 640px); padding: 14px; border: 1px solid var(--ramecek);
                 border-radius: var(--radius-velky); background: var(--plocha); color: var(--text); box-shadow: 0 12px 40px rgba(16, 24, 40, .25); }
.it-hledani::backdrop { background: rgba(16, 24, 40, .35); }
.it-hledani-oddil { margin-top: 10px; }
.it-hledani-seznam { list-style: none; margin: 4px 0 0; padding: 0; }
.it-hledani-seznam li { display: flex; align-items: center; gap: 4px; }
.it-hledani-seznam a { flex: 1; min-width: 0; padding: 6px 8px; border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: 13px; }
.it-hledani-seznam a:hover, .it-hledani-seznam a.it-hledani--vybrany { background: var(--akce-plocha); text-decoration: none; color: var(--text); }
.it-pripnout   { border: 0; background: transparent; color: var(--text-slaby); cursor: pointer; font-size: 15px; padding: 2px 6px; }
.it-pripnout:hover { color: var(--akce); }
.it-odznak     { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--chyba); color: #fff; font-size: 11px; font-weight: 600;
                 line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .it-modul:not(.it-modul--aktivni) .it-modul-nazev { display: none; } }

@media (max-width: 560px) {
  /* minmax(0, 1fr), ne 1fr: široká tabulka by jinak sloupec roztáhla a karta na mobilu přetekla (u26, změřeno 28. 9.:
     Správa → Logy na 375 px o 667 px). Tabulka se teď posouvá uvnitř karty jako všude jinde. */
  .rozdeleni   { grid-template-columns: minmax(0, 1fr); }
  .bocni-nav   { border-right: 0; border-bottom: 1px solid var(--ramecek);
                 display: flex; flex-wrap: wrap; gap: 3px; }
  .bocni-skupina { width: 100%; padding: 2px 6px; }
  .bocni-polozka { margin-left: 0; }
}

/* -------------------------------------------------------------- tabulky -- */

.tabulka       { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabulka th    { font-size: 11px; font-weight: 400; text-align: left;
                 color: var(--text-slaby); padding: 6px 4px; }
.tabulka td    { padding: 9px 4px; border-top: 1px solid var(--ramecek);
                 vertical-align: top; }
.tabulka .cislo { text-align: right; font-variant-numeric: tabular-nums; }
.tabulka .podradek, .seznam-radek .podradek { font-size: 11px; color: var(--text-slaby); }
/* Pole a malé tlačítko v řádku tabulky (uživatel 20. 10. 2026 u Majetek → Budovy a místnosti: „přehnaně vysoké řádky“): pole
   v buňce na výšku malého tlačítka a buňka s ním s menším odsazením — řádek s polem je pak skoro tak nízký jako řádek s textem
   (dřív 56 px proti 38). :where() drží nízkou váhu, aby platily vlastní úpravy tabulek (.tabulka--zaci, .tabulka--udaje).
   Textarea ne — ta má svou výšku. */
:where(.tabulka td) .pole:not(textarea) { min-height: 29px; padding-top: 4px; padding-bottom: 4px; }
.tabulka td:where(:has(.pole:not(textarea), .tlacitko--male)) { padding-top: 4px; padding-bottom: 4px; }

/* Otisk klíčů agenta (Správa → Agenti): pevné písmo ve skupinách po čtyřech, ať se dá porovnat okem s výpisem instalace. */
.otisk-klicu   { font-family: var(--pismo-cisla); font-size: 12px; overflow-wrap: anywhere; }
.cislo-jednaci { font-family: var(--pismo-cisla); font-size: 11.5px;
                 color: var(--text-tlumeny); }

/* --------------------------------------------------------------- stavy -- */

.stav          { font-size: 11px; padding: 3px 8px; border-radius: var(--radius);
                 white-space: nowrap; display: inline-block; }
.stav--neodeslano { background: var(--plocha-vyplnena); color: var(--text-tlumeny); }
.stav--pozadovano { background: var(--pozor-plocha);    color: var(--pozor); }
.stav--schvaleno  { background: var(--ok-plocha);       color: var(--ok); }
.stav--odmitnuto  { background: var(--chyba-plocha);    color: var(--chyba); }

/* Stavy běhů (Stanice, i23). Nejsou schvalovací — „hotovo“ ani „chyba“ nic neschválily ani neodmítly. Barvy jsou tytéž
   proměnné; „běží“ je modrá akce, ne žlutá: nic nečeká na člověka, jen se na to dá dívat. */
.stav--hotovo     { background: var(--ok-plocha);       color: var(--ok); }
.stav--bezi       { background: var(--akce-plocha);     color: var(--akce); }
.stav--chyba      { background: var(--chyba-plocha);    color: var(--chyba); }

/* Stavy vozidla v Žádankách. Jsou to jiné stavy než schvalovací, ale čtou se stejně: zelená = můžu,
   žlutá = zeptej se, červená = ne. Barvy jsou tytéž proměnné, žádné nové — „čeká na schválení“ má
   schválně jinou barvu než „půjčené“, protože podle podkladu se u něj vyplatí doptat. */
.stav--volne       { background: var(--ok-plocha);        color: var(--ok); }
.stav--ceka        { background: var(--pozor-plocha);     color: var(--pozor); }
.stav--pujcene     { background: var(--chyba-plocha);     color: var(--chyba); }
/* Internet v učebně (Učebny – internet, u24): barvy jako volné a půjčené vozidlo, ale vlastní jména — mapování stavu
   v kódu nemluví o vozidlech a změna barvy jednoho modulu nerozhodí druhý. */
.stav--internet    { background: var(--ok-plocha);        color: var(--ok); }
.stav--bez-internetu { background: var(--chyba-plocha);   color: var(--chyba); }
.stav--mimo-provoz { background: var(--plocha-vyplnena);  color: var(--text-tlumeny); }

/* Splnění pravidla v Povinné četbě. Čte se jako stav (zelená = mám, červená = chybí), ale stav záznamu to
   není, proto vlastní jméno — stejně jako stavy vozidla. Barvy jsou tytéž proměnné. */
.stav--splneno   { background: var(--ok-plocha);    color: var(--ok); }
.stav--nesplneno { background: var(--chyba-plocha); color: var(--chyba); }

/* Stavy požadavků v Majetku (zadání oddíl 8; uživatel schválil 3. 10.). Barvy jako v náhledu docs/navrh-majetek.html:
   oranžová = čeká na někoho u nás, modrá = běží mimo nás (nabídka u organizací kraje, protokol u firmy), zelená = hotovo,
   šedá = zrušeno. Vlastní jména jako u učeben — mapování v kódu (StavyPozadavku) nemluví o schvalování. */
.stav--nezpracovano      { background: var(--pozor-plocha);    color: var(--pozor); }
.stav--presunuto         { background: var(--ok-plocha);       color: var(--ok); }
.stav--nabidnuto         { background: var(--akce-plocha);     color: var(--akce); }
.stav--prevedeno         { background: var(--ok-plocha);       color: var(--ok); }
.stav--mozno-vyradit     { background: var(--pozor-plocha);    color: var(--pozor); }
.stav--ceka-na-likvidaci { background: var(--akce-plocha);     color: var(--akce); }
.stav--vyrazeno          { background: var(--ok-plocha);       color: var(--ok); }
.stav--zruseno           { background: var(--plocha-vyplnena); color: var(--text-tlumeny); }
/* Schvalování vyřazení (zadání 16.1): ke schválení i schválené čekají u nás (ředitelka, pak účetní s řízením) — oranžové; odmítnuté
   má obecnou červenou .stav--odmitnuto. Schválené vlastním jménem, ne obecným zeleným .stav--schvaleno, které by se četlo jako hotové. */
.stav--ke-schvaleni       { background: var(--pozor-plocha);    color: var(--pozor); }
.stav--schvaleno-vyrazeni { background: var(--pozor-plocha);    color: var(--pozor); }
/* K převodu (zadání 16.3): kus si vybrala organizace kraje a čeká na předání — běží mimo nás, modrá jako nabídnuto. */
.stav--k-prevodu          { background: var(--akce-plocha);     color: var(--akce); }
/* Proběhlá akce v Exkurzích (milník po povolení; uživatel 13. 10. 2026 vlastní třídu, ne půjčené „hotovo“ ze Stanic). Zrušená
   akce používá .stav--zruseno, ostatní stavy jsou schvalovací. */
.stav--probehla           { background: var(--ok-plocha);       color: var(--ok); }

/* Formulář nového požadavku v Majetku: pole jen pro přesun (Kam, nová osoba) a jen pro vyřazení (funkční) podle zvoleného
   druhu — bez skriptu, přes :has. Prohlížeč bez :has ukáže obojí; server bere jen pole zvoleného druhu. */
.formular-pozadavku:has(input[name="Formular.Druh"][value="Vyrazeni"]:checked) .jen-presun,
.formular-pozadavku:has(input[name="Formular.Druh"][value="Presun"]:checked) .jen-vyrazeni { display: none; }
/* KOMPAKTNÍ (uživatel 13. 10. 2026): dva sloupce po 22 rem místo polí pod sebou (716 px v okně 768 px) — druh vedle „odkud“, kam vedle
   nové osoby; majetek, stav a texty přes celou šířku (.cela-sirka). Bez šablony oblastí, protože pole přesunu a vyřazení se schovávají:
   automatické skládání po nich nenechá díru. Řídí se místem v okně (kontejner = formulář), pod 45 rem jeden sloupec. */
.formular-pozadavku { container-type: inline-size; }
.mrizka-pozadavku { display: grid; grid-template-columns: 22rem 22rem; column-gap: 16px; justify-content: start; align-items: start; }
.mrizka-pozadavku > .cela-sirka { grid-column: 1 / -1; }
@container (max-width: 45rem) {
  .mrizka-pozadavku { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ tlačítka -- */

.tlacitko      { display: inline-block; font-size: 12.5px; padding: 8px 13px;
                 border-radius: var(--radius); border: 1px solid var(--ramecek-vyrazny);
                 background: var(--plocha); color: var(--text);
                 cursor: pointer; text-decoration: none; }
.tlacitko--hlavni    { background: var(--akce);  border-color: var(--akce);  color: #fff; }
.tlacitko--potvrdit  { background: var(--ok);    border-color: var(--ok);    color: #fff; }
.tlacitko--zamitnout { background: var(--plocha);border-color: var(--chyba); color: var(--chyba); }
/* Tiché = méně důležitá akce (Zrušit, Zpět, Vyřadit…): tlumený text, ale RÁMEČEK MÁ. Dřív byl průhledný a tlačítko vypadalo
   jako text — uživatel ho nenašel opakovaně (Četba 25. 9., dlaždice 28. 9., Inventury → Příprava a Zrušit v okně akce Exkurzí
   15. 10.: „vizuálně nevím, že je to tlačítko“). Oprava jednou tady místo výjimek v jednotlivých stránkách. */
.tlacitko--tichy     { border-color: var(--ramecek); color: var(--text-tlumeny); }
.tlacitko[disabled], .tlacitko--neaktivni {
                 background: var(--plocha-tlumena); border-color: var(--ramecek);
                 color: var(--text-slaby); cursor: not-allowed; }
.tlacitko--male { font-size: 11.5px; padding: 5px 10px; }

/* ------------------------------------------------------------ formuláře -- */

.pole-skupina  { margin-bottom: var(--mezera); }
.popisek       { display: block; font-size: 12px; color: var(--text-tlumeny);
                 margin-bottom: 4px; }
.povinne       { color: var(--chyba); }
.pole          { width: 100%; min-height: 36px; padding: 8px 10px;
                 border: 1px solid var(--ramecek-vyrazny); border-radius: var(--radius);
                 background: var(--plocha-tlumena); color: var(--text);
                 font-size: 13px; font-family: inherit; box-sizing: border-box; }
.pole--chyba   { background: var(--chyba-plocha); border-color: var(--chyba); }
/* Pole na soubor: tlačítko „Vybrat soubor“ uvnitř ho natahovalo na 43 px — vedle tlačítka Nahrát o 7 px vyšší (20. 10. 2026). */
input[type="file"].pole { padding-top: 4px; padding-bottom: 4px; }
input[type="file"].pole::file-selector-button { padding: 2px 10px; }
.pole.pole--castka { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
/* V řádku s měnou (cena celkem) jinak platila min. šířka textového pole v řádku (16rem) a částka měla
   256 px místo úzkého pole z návrhu — „je to částka, ne věta“ (14. 9. 2026). */
.pole-radek > .pole.pole--castka { min-width: 0; }
.pole.pole--mena { width: 76px; }
/* Krátký údaj (IČ, DIČ, telefon): přes 512 px široké pole na osm číslic vypadalo jako pole na větu
   (dodavatelé, 14. 9. 2026). Na rozdíl od --castka zarovnané vlevo — není to číslo k počítání. */
.pole.pole--kratke { max-width: 14rem; }

/* Datum a krátké číslo mají obsah pevné délky: pole na „22. 09. 2026“ široké 224 px vypadá jako pole na
   větu (uživatel 22. 9. 2026: „pole datumů jsou 2x širší než je potřeba… počet hodin je 5x širší než nutno“).
   .pole--kratke je pořád vhodné pro jméno nebo IČ — na datum a na číslo do tří míst je moc.
   Číslo je zarovnané vpravo a s tabulkovými číslicemi, stejně jako částka: pod sebou pak sedí řády. */
.pole.pole--datum { width: 8.5rem; }
.pole.pole--cislo { width: 6rem; text-align: right; font-variant-numeric: tabular-nums; }
/* Malé číslo nebo čas v řádku tabulky (práh, minuty a čas od–do u signálů Bezpečnosti): 6rem z --cislo tam bylo „3× širší než
   potřeba a rozšiřuje to pak vše“ (uživatel 7. 10. 2026) — v řádku jsou dvě taková pole a dva časy. Na čtyři číslice nebo 16:00 stačí. */
.pole.pole--male { width: 4.5rem; padding-inline: 6px; text-align: right; font-variant-numeric: tabular-nums; }
/* Výběr široký podle nejdelší volby (signály: „souhrn jednou denně“). S width 100 % v úzkém sloupci tabulky se volba uřízla
   (112 px místo potřebných ~160, měřeno 7. 10. 2026). */
.pole.pole--podle-obsahu { width: auto; }
/* Heslo místního účtu stanice (Stanice, etapa 3b): textové pole se skrytými znaky, NE type="password" — to by prohlížeč
   nabídl uložit (i se jménem účtu) do správcova profilu a synchronizace (recenze 30. 9.). */
.pole.pole--tajne { -webkit-text-security: disc; }
/* Společné pole „datum a čas“ (.pole--datum-cas, datetime-local) tu bylo do 24. 9. 2026. Prohlížeč jeho výběr
   zavře až Enterem nebo kliknutím jinam a v okně se tím klikalo vedle — den a čas se od té doby zadávají
   zvlášť, .pole--datum vedle .pole--cas. Hlídá DialogyTests. */
/* Registrační značka („4H1 3200“) má pevnou délku jako datum — .pole--kratke je na osm znaků moc. */
.pole.pole--znacka { width: 8rem; }
/* Tajný údaj, který NENÍ heslo (klíč MAK): type="password" by prohlížeč nabídl uložit do správce hesel (a synchronizovat),
   proto text s maskou. Prohlížeč bez -webkit-text-security (starší Firefox) ho při psaní ukáže — nevadí, uloží ho jen správce. */
.pole.pole--skryte { -webkit-text-security: disc; }
/* Vybraní lidé jako odstranitelné štítky (spolucestující). Je to tentýž tvar jako u filtrů seznamu —
   text a křížek — jen jako tlačítko, protože odebrání se odesílá, ne proklikává odkazem.
   Rozbalovací seznam s Ctrl tu byl první a uživatel ho zamítl: „líbili by se mi tak, jako když
   v SharePointu přidáváš více osob“ (23. 9. 2026). */
button.filtr-stitek { border: 0; cursor: pointer; font: inherit; }
.stitky-osob   { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }

/* Výběr ano/ne. Na dvě slova stačí míň než 14rem z .pole--kratke — ta je na jméno nebo IČ (uživatel
   22. 9. 2026: „u vlastností osob zkrať to zbytečně široké pole Hodnota“). Šipku výběru je potřeba
   zaplatit, proto o kousek víc než .pole--cislo. */
.pole.pole--anone { width: 7rem; }

/* Víceřádkový text z formuláře (předmět plnění, kontakt) — soupis položek by se jinak slil do jednoho
   řádku. Přidáno s detailem objednávky 14. 9. 2026. */
.zachovat-radky { white-space: pre-line; }

/* Dashboard: karty modulů vedle sebe, na úzké obrazovce pod sebou. min() drží kartu v šířce
   obrazovky i na telefonu — pevných 24rem by na 400 px přeteklo. Přidáno 14. 9. 2026. */
.dlazdice      { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
                 gap: var(--mezera-velka); align-items: start; }
.dlazdice > .sekce { margin-bottom: 0; }
/* Řádek seznamu jako odkaz (položka na Dashboardu): bez podtržení, při najetí podbarvený. */
a.seznam-radek { color: inherit; text-decoration: none; }
a.seznam-radek:hover { background: var(--plocha-tlumena); }

/* Našeptávač ve formuláři (žadatel, dodavatel): volby jsou tlačítka (htmx), bez vzhledu tlačítka
   z prohlížeče; nabídka stejně široká jako pole nad ní. */
.pole-skupina .nabidka { max-width: 32rem; margin-top: 4px; }
button.nabidka-volba { width: 100%; border: 0; background: none; text-align: left; cursor: pointer;
                       border-radius: var(--radius); padding: 6px 8px; color: var(--text); }
button.nabidka-volba:hover,
button.nabidka-volba:focus { background: var(--akce-plocha); }
.pole-skupina .nabidka-volby { padding: 6px; max-height: 240px; }
.pole--dlouhy  { min-height: 150px; }
.napoveda      { font-size: 11px; color: var(--text-slaby); margin-top: 4px; }
.chyba-text    { font-size: 12px; color: var(--chyba); margin-top: 4px; }
.pole-radek    { display: flex; gap: 8px; align-items: center; }

/* ---------------------------------------------------- pohledy a filtry -- */

.pohledy       { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Přepínač pohledu jako pilulka (vzor app-mobily): šedý podklad, při najetí světle modrý, vybraný
   modře vyplněný. Dřív byl nevybraný přepínač jen šedý text a nikdo nepoznal, že je to tlačítko
   („Co se loguje“ — připomínka uživatele 14. 9. 2026).
   Od 31. 10. 2026 (pp01–pp13) jen tam, kde nejde o „jednu volbu ze skupiny“: části modulu v hlavičce karty (pp05 — jsou to
   stránky modulu a mají vypadat jinak než pohledy pod nimi), dlouhé seznamy z dat (učebny ve Stanicích, kategorie k likvidaci)
   a čísla stránek. Pohledy, rok a ostatní volby jsou přepínač .prepinac-tlacitka níž. */
.pohled        { display: inline-block; font-size: 12.5px; padding: 5px 13px; border-radius: 999px;
                 background: var(--plocha-vyplnena); color: var(--text-tlumeny); border: 1px solid transparent;
                 cursor: pointer; }
.pohled--aktivni { background: var(--akce); border-color: var(--akce); color: #fff; font-weight: 500; }
/* Přepínač ze SPOJENÝCH tlačítek (Obrazovky → Obsah: Vše · Obrázky a videa · Oznámení, 22. 10. 2026) — jako přepínač období na
   televizi a v Bakalářích. Na rozdíl od pilulek je vidět, že volby patří k sobě a platí jedna; každé tlačítko má rámeček
   (uživatel: „u Bakalářů je vidět, že to jsou tlačítka, tobě to splývá do jednoho bloku“).
   Vybrané = aria-current (odkaz, page i true) nebo aria-pressed (tlačítko, které přepíná skript — Inventury, Kalendář dovolených).
   Od 31. 10. 2026 jím jsou i pohledy nad seznamy, rok a další volby (pp01–pp13). Dlouhý přepínač se ZALOMÍ do plných řádků
   (pp04 A, na telefonu Cesťáky s deseti pohledy): oddělovače proto kreslí mezera 1 px nad podkladem v barvě rámečku — dřívější
   levý rámeček tlačítka by se při zalomení ztratil na začátku řádku. Volby se roztáhnou, aby byl každý řádek plný. Zaoblení
   15 px = polovina výšky jednoho řádku; víc řádků má jen zaoblené rohy celku. */
.prepinac-tlacitka   { display: inline-flex; flex-wrap: wrap; gap: 1px; max-width: 100%; vertical-align: middle;
                       border: 1px solid var(--ramecek-vyrazny); border-radius: 15px; overflow: hidden; background: var(--ramecek-vyrazny); }
.prepinac-tlacitka > * { flex: 1 1 auto; background: var(--plocha); }
/* I tlačítka formuláře (směr schématu v Monitoringu se přepíná POSTem — mění společné nastavení), vypadají stejně jako odkazy. */
.prepinac-tlacitka > a, .prepinac-tlacitka > button, .prepinac-starsi > summary
                     { display: block; text-align: center; font-size: 12.5px; padding: 5px 14px; color: var(--text); text-decoration: none;
                       border: 0; font-family: inherit; white-space: nowrap; cursor: pointer; }
.prepinac-tlacitka > a:hover, .prepinac-tlacitka > button:hover, .prepinac-starsi > summary:hover { background: var(--akce-plocha); }
.prepinac-tlacitka > [aria-current="true"], .prepinac-tlacitka > [aria-current="page"], .prepinac-tlacitka > [aria-pressed="true"],
.prepinac-tlacitka > [aria-current]:hover, .prepinac-tlacitka > [aria-pressed="true"]:hover,
.prepinac-starsi--vybrano > summary, .prepinac-starsi--vybrano > summary:hover
                     { background: var(--akce); color: #fff; font-weight: 500; cursor: default; }
.prepinac-tlacitka > a:focus-visible, .prepinac-tlacitka > button:focus-visible, .prepinac-starsi > summary:focus-visible
                     { outline: 2px solid var(--akce); outline-offset: -3px; }
/* Malý (počet na stránce, přiblížení, zařazení nad seznamem osob) a přes celou šířku (Zbývá · Nalezeno · Navíc v Inventurách). */
.prepinac-tlacitka--male > a, .prepinac-tlacitka--male > button { padding: 3px 10px; min-width: 2rem; font-size: 11.5px; }
.prepinac-tlacitka--sire { display: flex; flex: 1 1 100%; }
.prepinac-tlacitka--sire > * { flex: 1 1 0; min-width: 0; padding-inline: 6px; }
/* Starší roky (pp13, uživatel 31. 10. 2026: „až to budeme používat déle, jak to bude vypadat?“): v přepínači jsou nejvýš tři
   nejnovější roky, ostatní pod „Starší ▾“. Seznam je position: fixed — přepínač má overflow: hidden kvůli zaoblení a absolutně
   umístěný seznam by ořízl. Fixní prvek bez top/left zůstane tam, kde by byl, tedy hned pod tlačítkem; při posunu stránky se
   zavře (site.js), jinak by visel na místě. */
.prepinac-starsi > summary { list-style: none; }
.prepinac-starsi > summary::-webkit-details-marker { display: none; }
.prepinac-starsi-seznam { position: fixed; z-index: 1050; display: grid; min-width: 7rem; margin-top: 2px; padding: 4px 0;
                          background: var(--plocha); border: 1px solid var(--ramecek-vyrazny); border-radius: var(--radius);
                          box-shadow: 0 6px 18px rgba(16, 24, 40, .12); }
.prepinac-starsi-seznam > a { padding: 5px 12px; font-size: 12.5px; color: var(--text); text-decoration: none; }
.prepinac-starsi-seznam > a:hover { background: var(--akce-plocha); }
.prepinac-starsi-seznam > a[aria-current="true"] { color: var(--akce); font-weight: 600; }

.filtry        { display: flex; align-items: center; gap: var(--mezera-mala);
                 flex-wrap: wrap; font-size: 11.5px; }
.filtr-stitek  { padding: 3px 8px; border-radius: var(--radius);
                 background: var(--akce-plocha); color: var(--akce); }
.filtr-pocet   { margin-left: auto; color: var(--text-slaby); }

.nabidka       { border: 1px solid var(--akce); border-radius: var(--radius);
                 background: var(--plocha); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.nabidka-polozka { padding: 8px 10px; font-size: 12px; color: var(--text-tlumeny);
                 border-bottom: 1px solid var(--ramecek); }
.nabidka-volby { max-height: 150px; overflow-y: auto; padding: 0 10px 8px; }
.nabidka-volba { display: flex; align-items: center; gap: 8px; padding: 4px 0;
                 font-size: 12.5px; }
.nabidka-volba .pocet { margin-left: auto; color: var(--text-slaby); }

/* ------------------------------------------------- panely a upozornění -- */

.panel-schvaleni { border: 1px solid var(--akce); border-radius: var(--radius);
                 background: var(--akce-plocha); padding: var(--mezera); }
.panel-nadpis  { font-size: 13px; font-weight: 600; }
.panel-popis   { font-size: 12px; color: var(--text-tlumeny); margin: 3px 0 9px; }

/* Obchůzka v Moje práce (bod 7d, náhled 9 v docs/navrh-zavady.html — odtud .ukol, do 1. 11. 2026 jen v náhledu): co v místnosti čeká,
   karty pod sebou přes celou šířku mobilu. Druh malým písmem nad nadpisem, tlačítka pod ním se zalamují. Pozadí plochy, ať karta
   vystoupí i v modrém panelu načteného štítku. */
.ukoly        { display: grid; gap: 8px; }
.ukol         { border: 1px solid var(--ramecek); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 6px; min-width: 0;
                background: var(--plocha); }
.ukol-nadpis  { font-size: 13px; font-weight: 600; }
.ukol-druh    { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-slaby); }
.kroky-ukolu  { display: flex; flex-wrap: wrap; gap: 6px; }

.upozorneni    { display: flex; gap: 9px; padding: 10px 12px; border-radius: var(--radius);
                 font-size: 12px; line-height: 1.5;
                 border: 1px solid var(--pozor); background: var(--pozor-plocha);
                 color: var(--pozor); }
.upozorneni--chyba { border-color: var(--chyba); background: var(--chyba-plocha);
                 color: var(--chyba); }
/* Potvrzení načteného kusu (Inventury, náhled docs/navrh-inventury.html, schválené 14. 10. 2026): zelená obdoba .upozorneni. */
.upozorneni--ok { border-color: var(--ok); background: var(--ok-plocha); color: var(--ok); }
/* Hláška po odeslání formuláře, když stránka zůstala na místě (data-zustat-na-miste, site.js) a hláška nahoře není vidět: plove
   u horního okraje, dokud na ni nikdo neklepne (chyba), nebo pár sekund (ostatní). Bez ní by se po „Přidat výjimku“ dole nedalo
   poznat, jestli se to povedlo. */
.upozorneni--plovouci { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1070; margin: 0 !important;
                 width: max-content; max-width: min(40rem, calc(100vw - 32px)); cursor: pointer;
                 box-shadow: 0 4px 16px rgba(16, 24, 40, .18); }

/* Okno kamery na skenovací stránce Inventur (náhled docs/navrh-inventury.html, schválené 14. 10. 2026): uvnitř <video>, přes něj
   rámeček, kam mířit, a červená čára. Přiblížení bez zoomu kamery zvětší video skriptem (transform) — rámeček zůstává. */
.kamera        { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
                 background: #26261f; color: #f2f1ee; display: grid; place-items: center; font-size: 12px; }
.kamera video  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamera::before { content: ""; position: absolute; inset: 30% 12%; border: 2px solid rgba(255,255,255,.85); border-radius: 8px; z-index: 1; }
.kamera::after { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 2px; background: #e5484d; opacity: .85; z-index: 1; }
.kamera-text   { position: absolute; bottom: 9px; left: 0; right: 0; text-align: center; z-index: 1;
                 text-shadow: 0 1px 2px rgba(0,0,0,.8); padding-inline: 8px; }

/* Průběh místnosti, komise, inventury (náhled docs/navrh-inventury.html, schválené 14. 10. 2026): nativní <progress>, aby šířka
   pruhu nešla přes style="…" (VzhledTests). */
.prubeh { width: 100%; min-width: 4rem; height: 8px; border: 0; border-radius: 99px; background: var(--plocha-vyplnena); overflow: hidden;
          appearance: none; -webkit-appearance: none; display: block; }
.prubeh::-webkit-progress-bar   { background: var(--plocha-vyplnena); border-radius: 99px; }
.prubeh::-webkit-progress-value { background: var(--ok); border-radius: 99px; }
.prubeh::-moz-progress-bar      { background: var(--ok); border-radius: 99px; }

/* Inventury → Příprava, okno inventury: název přes oba sloupce, kontrola od–do vedle sebe (dvojice, která patří k sobě — pevná šířka,
   ne 1fr, ať se na širokém okně nerozjede). */
/* Řádek seznamu, který je celý odkazem (Inventury → Skenovat: místnost v mobilu, kam se ťuká palcem) — bez modré a podtržení. */
.seznam-radek--odkaz       { color: inherit; text-decoration: none; }
.seznam-radek--odkaz:hover { background: var(--plocha-vyplnena); color: inherit; }

/* Nápověda (/Navody, 22. 10. 2026): moduly ve dvou sloupcích — uživatel: „řádky zbytečně široké, vejdou se 2 vedle sebe“;
   na úzké obrazovce pod sebou. Seznam návodů leží rovnou v rámečku sekce (bez vlastního rámečku a odsazení), datum pod
   názvem na vlastním řádku — řádkový podřádek se lepil k názvu („PDF“ hned za ním). */
.mrizka-navodu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mezera-velka); max-width: 64rem;
                 align-items: start; }
.mrizka-navodu > .sekce { margin-bottom: 0; }
.mrizka-navodu .podradek { display: block; }
@media (max-width: 760px) { .mrizka-navodu { grid-template-columns: minmax(0, 1fr); } }
.seznam.seznam--bez-ramecku { border: 0; border-radius: 0; max-width: none; }   /* dvě třídy: .seznam stojí v souboru níž */
.nadpis-s-ikonou { display: inline-flex; align-items: center; gap: 7px; }
/* Ikona modulu na začátku řádku dlaždice (Návody: ikona modulu + název návodu). Barvu dává --modul-barva u řádku. */
.widget-ikona  { flex: none; display: inline-flex; }

.formular-inventury { display: grid; grid-template-columns: 11rem 11rem; column-gap: 16px; justify-content: start; align-items: start;
                      grid-template-areas: "nazev nazev" "od do" "porizeno porizeno"; }
/* Jen pořízené do (řádná, in02) — pod obdobím kontroly, nápověda pod polem přes oba sloupce. */
.oblast-porizeno  { grid-area: porizeno; }

/* ------------------------------------------------------------ historie -- */

.historie-radek { display: flex; gap: 9px; font-size: 12px; margin-bottom: 7px; }
.historie-cas   { color: var(--text-slaby); }

/* ----------------------------------------------------------- přepínače -- */

.prepinac      { width: 34px; height: 19px; border-radius: 10px; position: relative;
                 flex-shrink: 0; background: var(--plocha-vyplnena);
                 border: 1px solid var(--ramecek-vyrazny); }
.prepinac i    { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
                 border-radius: 50%; background: var(--text-slaby); }
.prepinac--zapnuto { background: var(--ok); border-color: var(--ok); }
.prepinac--zapnuto i { left: auto; right: 2px; background: #fff; }

/* ------------------------------------------------------------ pomocné -- */

.radek         { display: flex; align-items: center; gap: 8px; }
.radek--rozlozeny { justify-content: space-between; }
/* Zaškrtávátko s popiskem (label.radek, 20. 10. 2026, uživatel: „někde máme trochu divné checkboxy“): u popisku na dva řádky
   bylo políčko uprostřed výšky textu, ne u prvního řádku. Nahoru k prvnímu řádku a nikdy se nesmrskne. Popisek s polem uvnitř
   („do [datum] [čas]“, Učebny – internet) zůstává na středu — tam se políčko rovná k poli, ne k textu. */
label.radek:has(> :is(input[type="checkbox"], input[type="radio"])):not(:has(.pole)) { align-items: flex-start; }
label.radek:not(:has(.pole)) > :is(input[type="checkbox"], input[type="radio"]) { flex: none; margin-top: 3px; }
/* Pole vedle malých tlačítek (lišty Inventury → Příprava, filtry sestav Dovolenek, Správa → Vlastnosti…; uživatel 20. 10. 2026:
   „listbox je zbytečně vyšší“): výběr nebo pole bylo o 8 px vyšší než tlačítka vedle něj. Kdekoli je malé tlačítko přímo vedle
   pole (sourozenec), má pole jeho výšku — ať je obal .radek, .pole-radek nebo formulář filtrů. */
:where(:has(> .tlacitko--male)) > .pole:not(textarea) { min-height: 29px; padding-top: 4px; padding-bottom: 4px; }
.vpravo        { margin-left: auto; }
/* Odkaz Návod v záhlaví modulu (_NavodModulu, 22. 10. 2026): vpravo, PŘED záložkami modulu. Bez záložek stojí na kraji sám;
   se záložkami je odsune k sobě — záložky pak vlastní margin-left:auto ztratí, jinak by se volné místo rozdělilo mezi oba. */
.odkaz-navodu  { margin-left: auto; }
.odkaz-navodu + .vpravo { margin-left: 0; }
.tlumene       { color: var(--text-tlumeny); }
.slabe         { color: var(--text-slaby); }

/* Rozbalovací část bez JavaScriptu (<details>): ve Vlastnostech osob nastavení běhu a přidání mapování,
   v Povinné četbě nabídka děl pod vybranými. Co se použije párkrát za rok, nemá trvale zabírat místo
   (uživatel 24. 9. 2026: „ať nevznikají šílené seznamy“). Jedna třída pro oba moduly. */
.rozbalovaci > summary { cursor: pointer; font-size: 12.5px; color: var(--akce); padding: 10px 0 2px; }
.rozbalovaci[open] > summary { margin-bottom: 8px; }
/* V řádku tabulky (katalog děl, třídy) je rozkliknutelný sám název se šipkou, úprava se otevře pod ním.
   Samostatný řádek „Upravit“ zvedal každý řádek o třetinu — katalog s 96 díly měl přes 8000 px. */
.tabulka .rozbalovaci > summary { padding: 0; font-size: inherit; color: inherit; }
.tabulka .rozbalovaci > summary .podradek { display: block; }

/* Obsah vlevo, úzký panel vpravo (Povinná četba: pravidla nad seznamem žáka). Panel zůstává při rolování
   na očích — žák má čtyři sekce pod sebou a potřebuje vidět, co mu chybí, když přidává. Na úzké obrazovce
   jde panel nahoru. Strop šířky: sekce má nejvýš 64rem a bez něj zůstala na FullHD mezi sekcemi a panelem
   díra. */
.rozvrzeni-s-panelem { display: grid; grid-template-columns: minmax(0, 1fr) 19rem;
                       gap: 0 var(--mezera-velka); align-items: start;
                       max-width: calc(64rem + 19rem + var(--mezera-velka)); }
.rozvrzeni-s-panelem > .panel-bocni { position: sticky; top: var(--mezera); }
/* Lepí se k oknu, jen když žádný předek není posuvný kontejner. .karta má overflow: hidden (zaoblené rohy) a tím
   se lepení vztahovalo k ní — panel odjel s obsahem (změřeno 24. 9. 2026 na obrazovce žáka: −696 px po odrolování).
   clip ořízne stejně, ale posuvný kontejner nevytvoří. */
.karta:has(.rozvrzeni-s-panelem) { overflow: clip; }
@media (max-width: 62rem) {
  .rozvrzeni-s-panelem { grid-template-columns: minmax(0, 1fr); }
  .rozvrzeni-s-panelem > .panel-bocni { position: static; order: -1; }
}

/* Přehled četby po třídách (uživatel 24. 9. 2026: 120 žáků v jednom seznamu je nepřehledných). Oddělovací řádek
   třídy v seznamu seřazeném podle třídy, zvýrazněná třída v souhrnu, když podle ní seznam filtruje, a ukazatel
   „odevzdáno z“. Ukazatel je <meter>, ne pruh se šířkou — šířka v style= na span nesmí (VzhledTests). */
/* Mezititulek skupiny v tabulce. Podbarvený barvou akce (16. 10. 2026, uživatel u záloh virtuálů podle plánu: „podle tučného písma
   poznám, že je to plán … ať je ten řádek podbarvený jinou barvou“) — dřív tlumená plocha jako sudé řádky, takže splýval. Selektor
   i se .sekce, ať ho nepřebije pruhování sudých řádků. Skupiny v samostatných <tbody> dělí mezera (tbody + tbody). */
.tabulka tr.skupina-radek td, .sekce .tabulka tr.skupina-radek > td { background: var(--akce-plocha); font-weight: 600; padding: 6px 6px; }
.tabulka tbody + tbody > tr.skupina-radek:first-child > td { border-top: var(--mezera-velka) solid var(--plocha); }
/* Podrobnosti za názvem skupiny (Zálohy virtuálů podle plánu: počet, příští noc, odhad) obyčejným písmem — tučný je jen název. */
.tabulka tr.skupina-radek :is(.tlumene, .chyba-text) { font-weight: 400; }
.tabulka tr.radek--vybrany td { background: var(--akce-plocha); }
meter.ukazatel { width: 5rem; height: 8px; vertical-align: middle; }

/* --------------------------------------------------- navigační odkazy -- */

/* V náhledech jsou položky lišty a boční navigace <div>, v aplikaci odkazy <a>. Bootstrap
   odkazy podtrhává, dělá je řádkovými a při najetí barví modře — tohle je vrací do podoby
   z náhledů. Přidáno 13. 9. 2026 při stavbě shellu. */
a.modul, a.bocni-polozka, a.pohled { text-decoration: none; }
a.pohled:hover { background: var(--akce-plocha); color: var(--akce); }
a.pohled.pohled--aktivni:hover { background: var(--akce); color: #fff; }
a.bocni-polozka          { display: block; }
a.modul:hover, a.bocni-polozka:hover { color: var(--text); }
a.modul:not(.modul--aktivni):hover { background: var(--plocha-tlumena); }
a.modul:focus-visible { outline: 2px solid var(--akce); outline-offset: -2px; }

/* ---------------------------------------------------- identita v liště -- */

/* V náhledu je .uzivatel <div>, v aplikaci tlačítko otevírající nabídku. Prohlížeč dává
   tlačítku vlastní pozadí a písmo — tohle ho vrací do podoby z náhledu. Přidáno 13. 9. 2026
   s přihlašováním. */
button.uzivatel { background: var(--plocha); color: var(--text); font: inherit;
                  font-size: 12.5px; cursor: pointer; }

/* ------------------------------------------------------ seznam s řádky -- */

/* Rámovaný seznam řádků (Správa → Moduly, náhled 5). V náhledu byl rámeček a odsazení zapsané
   přímo ve style="…" — v aplikaci to pravidla vzhledu nedovolují, proto třídy. Přidáno
   13. 9. 2026 se sekcí Moduly. */
.seznam        { border: 1px solid var(--ramecek); border-radius: var(--radius); }
.seznam-radek  { display: flex; align-items: center; gap: 8px; padding: 10px 11px; }
.seznam-radek + .seznam-radek { border-top: 1px solid var(--ramecek); }
/* Přeskupení tažením (Správa → Moduly — pořadí na liště): úchyt vlevo na řádku a řádek, který se právě táhne. */
.uchyt         { cursor: grab; color: var(--text-slaby); padding: 0 2px; user-select: none; letter-spacing: -3px; }
.uchyt:active  { cursor: grabbing; }
.seznam-radek--tazeny { opacity: .45; }
.vyplnit       { flex: 1; min-width: 0; }

/* Výběr ikony modulu (Správa → Moduly, 24. 9. 2026): mřížka tlačítek s ikonou v barvě modulu. Vybraná má
   vnitřní rámeček v barvě modulu; obrys akce zůstává pro fokus z klávesnice, aby se ty dva nepletly. */
.volby-ikon    { display: grid; grid-template-columns: repeat(5, 36px); gap: 6px; padding: 8px 10px 10px; }
.volba-ikony   { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
                 border: 1px solid var(--ramecek); border-radius: var(--radius); background: var(--plocha); }
.volba-ikony:hover { border-color: var(--akce); background: var(--akce-plocha); }
.volba-ikony:focus-visible { outline: 2px solid var(--akce); outline-offset: 1px; }
.volba-ikony--vybrana { border-color: var(--modul-barva, var(--akce));
                 box-shadow: inset 0 0 0 1px var(--modul-barva, var(--akce));
                 background: color-mix(in srgb, var(--modul-barva, var(--akce)) 8%, var(--plocha)); }

/* Přepínač jako tlačítko formuláře: prohlížeč dává tlačítku vlastní vzhled a vnitřní odsazení. */
button.prepinac { padding: 0; cursor: pointer; }
/* Modul, který nejde vypnout: přepínač je vidět zapnutý, ale nereaguje. */
.prepinac--zamceny { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------- logo organizace -- */

/* V náhledu je místo loga čtverec (.modul-znacka 26×26). Skutečné logo čtvercové být nemusí:
   drží výšku čtverce, šířka podle poměru stran, nejvýš trojnásobek, aby široké logo nevytlačilo
   název aplikace. Přidáno 13. 9. 2026 se sekcí Organizace. */
.logo-obrazek  { height: 26px; width: auto; max-width: 78px; object-fit: contain; flex-shrink: 0; }

/* ------------------------------------------------- šířky na celé stránce -- */

/* Náhledy mají formuláře v úzkých kartách, kde .pole s width:100% vypadá dobře. Na stránce přes
   celou šířku monitoru se ale jednořádkové pole, hláška i seznam roztáhly přes celou obrazovku
   (připomínka uživatele 14. 9. 2026). Tabulky zůstávají přes celou šířku.
   :where() drží nízkou váhu, aby v řádku pořád platily šířky .pole--castka a .pole--mena. */
.pole          { max-width: 32rem; }
.pole-radek    { flex-wrap: wrap; }
:where(.pole-radek) > .pole { width: auto; }
.upozorneni    { width: fit-content; max-width: 100%; }
.seznam        { max-width: 48rem; }

/* ----------------------------------------------- obsah sekcí se sidebarem -- */

/* Uvnitř rozvržení s boční navigací (Správa, později nastavení modulů) je obsah na monitoru přes
   1200 px široký. Tabulka s width:100% pak rozházela pár sloupců po celé šířce a tlačítko akce
   skončilo metr od jména, ke kterému patří (připomínka uživatele 14. 9. 2026 u Uživatelů a Rolí).
   Tabulka je proto jen tak široká, jak potřebuje obsah — ale aspoň 40rem, aby tabulky pod sebou
   (role) nebyly každá jinak široká. Náhled seznamu objednávek boční navigaci nemá, tam se nic nemění.
   Počet záznamů je vlevo, jinak by u úzké tabulky visel daleko vpravo od ní. */
.rozdeleni .tabulka      { width: auto; min-width: 40rem; max-width: 100%; }
.rozdeleni .filtr-pocet  { margin-left: 0; }
.rozdeleni .karta-popis,
.rozdeleni .napoveda     { max-width: 50rem; }

@media (max-width: 560px) {
  .rozdeleni .tabulka    { min-width: 0; }
}

/* Okno (modal) uvnitř stránky s bočním menu: 40rem výš platí jen pro tabulky na stránce. V okně nutil tabulku údajů
   přes jeho okraj (okno Schválit instalátor/sestavu, změřeno 1. 10. 2026 při 800 px) — tam má být přes celou šířku okna. */
.rozdeleni .modal .tabulka { width: 100%; min-width: 0; }

/* Samostatná karta přímo v <main> (Přihlášení, Moje přihlášení, Přístup odepřen): na monitoru se
   roztáhla přes 1400 px a dvousloupcová tabulka měla sloupce po 700 px. Taková stránka je formulář
   nebo pár řádků údajů — drží se čitelné šířky. Karta Správy (.karta bez .karta-telo) se to netýká.
   Přidáno 14. 9. 2026. */
main > .karta.karta-telo { max-width: 44rem; }

/* Popis v kartě modulu bez boční navigace (Objednávky): na monitoru se natáhl přes celou šířku
   a řádek textu měl přes 200 znaků (14. 9. 2026). Stejná mez jako u sekcí se sidebarem. */
.karta-telo > .karta-popis { max-width: 50rem; }

/* Textové pole v řádku (server vedle portu, adresa vedle tlačítka) mělo se šířkou podle obsahu jen
   kolem 170 px — název serveru ani e-mailová adresa se nevešly. Číselná pole a data zůstávají úzká.
   :where() drží nízkou váhu, aby pořád platily .pole--castka a .pole--mena. Přidáno 14. 9. 2026. */
/* Čas (type=time) patří k datu, ne k textu: den a čas se od 24. 9. 2026 zadávají zvlášť vedle sebe a čas
   s 16rem by dvojici roztrhl. */
:where(.pole-radek) > input.pole:where(:not([type=number]):not([type=date]):not([type=time])) { min-width: 16rem; }

/* ---------------------------------------------------------------- sekce -- */

/* Sekce stránky v rámečku: hlavička s nadpisem a poznámkou vpravo, pod ní obsah. Bez rámečků
   nastavení Graphu, SMTP a zkušební zpráva splývaly v jednu dlouhou stránku (připomínka uživatele
   14. 9. 2026). Vzor .karta-tabulka z app-mobily: nadpis i popis jsou UVNITŘ rámečku, aby sekce
   držela pohromadě. Úvod stránky (název sekce Správy a hlášky) zůstává nad rámečky. */
.sekce          { border: 1px solid var(--ramecek); border-radius: var(--radius-velky); background: var(--plocha);
                  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
                  margin-bottom: var(--mezera-velka); max-width: 64rem; overflow: hidden; }
.sekce-hlavicka { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
                  gap: 4px 16px; padding: 9px 14px; background: var(--plocha-vyplnena);
                  border-bottom: 1px solid var(--ramecek); }
.sekce-nadpis   { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
                  color: var(--text-tlumeny); }
.sekce-poznamka { font-size: 12px; color: var(--text-slaby); }
.sekce-telo     { padding: 14px; }
.sekce-telo > :last-child { margin-bottom: 0; }
/* Uvnitř rámečku tabulka vyplní rámeček (jako v app-mobily). Se šířkou podle obsahu dlouhý text chyby
   stlačil ostatní sloupce a datum i tlačítko „Spustit hned“ se lámaly na dva řádky (14. 9. 2026). */
.sekce .tabulka { width: 100%; min-width: 0; }

/* Tabulka údajů v detailu záznamu: popisky vlevo, hodnoty hned vedle nich. Šířka prvního sloupce v procentech
   (dřív style="width:30%") vycházela v kartě přes 1000 px na skoro 300 px a hodnoty visely daleko od popisku,
   ke kterému patří (uživatel 22. 9. 2026: „ten druhý sloupec bys měl zarovnat blíže k těm popisům vlevo“).
   Pevná šířka drží hodnoty u popisků a navíc stejně ve všech sekcích — procento by v každé vyšlo jinak. */
.tabulka--udaje td:first-child { width: 12rem; }
/* Řádky údajů nižší než v seznamu (kompaktní obrazovky, uživatel 13. 10. 2026: „stálo by to takhle uvažovat nad vším“): detail žádanky
   měl s 9 px nad i pod každým údajem 1326 px v okně 768 px. V seznamu zůstává 9 px — tam řádek nese klik a čte se přes celou šířku. */
.tabulka--udaje td { padding-top: 5px; padding-bottom: 5px; }

/* Vysvětlující panel (ne varování): modrý jako .pastel-blue v app-mobily. */
.upozorneni--info { border-color: var(--akce-plocha); background: var(--akce-plocha); color: var(--text); }

/* Tlačítko se nikdy neláme na dva řádky — „Spustit / hned“ v úzkém sloupci tabulky vypadalo jako dvě
   tlačítka. Datum a čas v buňce totéž (.bez-zalomeni). Přidáno 14. 9. 2026. */
.tlacitko      { white-space: nowrap; }
.bez-zalomeni  { white-space: nowrap; }
/* Kredit vpravo v nadpisu stránky Moje tisky (SafeQ, náhled 2 návrhu sq): částka větší a tučně, pod nulou červeně (sq06). */
.kredit { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; color: var(--text-tlumeny); }
.kredit strong { font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; }
.kredit strong.kredit--zaporny { color: var(--chyba); }

/* Strom zapojení v Monitoringu (docs/navrh-monitoring.html, mon06): první sloupec tabulky odsazený podle úrovně. Pevné úrovně
   místo inline proměnné — style="" ve stránce hlídá VzhledTests. Hlubší řada (strojní: switche za sebou) zůstane na osmé
   úrovni, aby se tabulka nerozjela do šířky. Šipka větve (▸ sbaleno, ▾ rozbaleno) je odkaz na rozbalení. Přidáno 5. 10. 2026. */
.strom-1 { padding-left: 1.4rem !important; }
.strom-2 { padding-left: 2.8rem !important; }
.strom-3 { padding-left: 4.2rem !important; }
.strom-4 { padding-left: 5.6rem !important; }
.strom-5 { padding-left: 7rem !important; }
.strom-6 { padding-left: 8.4rem !important; }
.strom-7 { padding-left: 9.8rem !important; }
.strom-8 { padding-left: 11.2rem !important; }
/* Šipka větve o kousek větší než písmo tabulky a s větší plochou pro klik (uživatel 6. 10. 2026: „trojúhelníček musím lovit,
   stačí vážně jen trošku“). Záporné okraje vyrovnají odsazení: řádek se nezvýší a název neuskočí. */
.vetev   { display: inline-block; min-width: 1.1em; padding: 2px 3px; margin: -2px 2px -2px -3px; font-size: 15px; line-height: 1;
           text-align: center; color: var(--text-slaby); text-decoration: none; border-radius: 4px; }
a.vetev:hover { color: var(--text); background: var(--plocha-vyplnena); }
/* Režim Upravit zapojení: řádek se táhne myší na jiný (site.js, data-prepojit). */
.strom-tah       { cursor: grab; }
.strom-cil > td  { background: var(--akce-plocha) !important; }

/* Schéma sítě (Monitoring 4d, mon70–mon72): vlastní SVG bez knihovny. Krabička switche je HTML uvnitř <foreignObject> — stav
   stejnou pilulkou jako ve stromu a klik otevře detail v okně stejně jako řádek tabulky (SVG <a> by htmx ani Bootstrap
   neobsloužily: oba poznávají odkaz podle tagName "A", u SVG je "a"). Pozice jsou atributy SVG (x, y), ne style="" — hlídá
   VzhledTests. V režimu Upravit rozmístění se krabičky táhnou ukazatelem (site.js, data-schema); čáry podle zapojení se tažením
   nemění. Zesvětlená krabička = neodpovídá hledání (schéma se hledáním netrhá). Přidáno 6. 10. 2026. */
/* Výška okna schématu se mění tažením za pravý dolní roh (uživatel 26. 10. 2026); site.js ji pamatuje v prohlížeči a vrací po obnově. */
.schema                 { overflow: auto; border: 1px solid var(--ramecek); border-radius: var(--radius); background: var(--plocha-tlumena);
                          resize: vertical; min-height: 140px; }
.schema-platno          { display: block; font-size: 12.5px; }
.schema-cara            { fill: none; stroke: var(--ramecek-vyrazny); stroke-width: 1.5; }
.schema-cara--potize    { stroke: var(--chyba); stroke-dasharray: 5 3; }
.schema-port            { fill: var(--text-slaby); font-size: 10.5px; font-family: var(--pismo-cisla); }
.schema-port--vlevo     { text-anchor: end; }
.schema-uzel            { overflow: visible; }
.schema-krabicka        { display: flex; flex-direction: column; justify-content: center; gap: 4px; box-sizing: border-box; height: 100%;
                          padding: 6px 10px; border: 1px solid var(--ramecek-vyrazny); border-radius: var(--radius); background: var(--plocha);
                          color: var(--text); text-decoration: none; overflow: hidden; }
.schema-krabicka:hover  { border-color: var(--akce); color: var(--text); text-decoration: none; }
.schema-krabicka--nebezi { border-color: var(--chyba); box-shadow: inset 3px 0 0 var(--chyba); }
.schema-krabicka--pozor  { border-color: var(--pozor); box-shadow: inset 3px 0 0 var(--pozor); }
.schema-krabicka--mimo   { opacity: .35; }
.schema-nazev           { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schema-radek           { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; font-size: 11.5px; }
/* Vazby serverů (Zálohy virtuálů → Vazby, 16. 10. 2026, návrh docs/navrh-vazby-serveru.html, vz01–vz08): stejné krabičky jako schéma
   sítě, navíc čára podle toho, co se se závislým stane po záloze (šipka u závislého), popisky sloupců = pořadí obnovy, zvýraznění
   řetězu vybraného serveru a dopadu noci, legenda a řetěz textem pod obrázkem. */
.schema-cara--restart   { stroke: var(--akce); stroke-width: 1.8; }
.schema-cara--zalohovat { stroke: var(--akce); stroke-width: 1.8; stroke-dasharray: 7 4; }
.schema-cara--kontrola  { stroke: var(--ramecek-vyrazny); stroke-dasharray: 2 4; }
.schema-cara--mimo      { opacity: .15; }
.schema-sipka--restart, .schema-sipka--zalohovat { fill: var(--akce); }
.schema-sipka--kontrola { fill: var(--ramecek-vyrazny); }
.schema-vrstva          { fill: var(--text-slaby); font-size: 11px; letter-spacing: .04em; }
.schema-krabicka--vybrana { border-color: var(--akce); box-shadow: 0 0 0 3px var(--akce-plocha); }
.schema-krabicka--noc     { background: var(--akce-plocha); border-color: var(--akce); }
.schema-krabicka--restart { border-color: var(--pozor); box-shadow: inset 3px 0 0 var(--pozor); }
.legenda-vazeb          { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 11.5px; color: var(--text-tlumeny); }
.legenda-vazeb svg      { vertical-align: middle; }
.legenda-vazeb-krabicka { display: inline-block; width: 18px; height: 12px; margin-right: 4px; vertical-align: middle; border-radius: 3px;
                          border: 1px solid var(--ramecek-vyrazny); background: var(--plocha); }
.legenda-vazeb-krabicka--noc     { background: var(--akce-plocha); border-color: var(--akce); }
.legenda-vazeb-krabicka--restart { border-color: var(--pozor); box-shadow: inset 3px 0 0 var(--pozor); }
.retez-vazeb            { border-top: 1px solid var(--ramecek); margin-top: 10px; padding-top: 10px; display: grid; gap: 4px; font-size: 13px; line-height: 1.55; }
.retez-vazeb-nadpis     { font-weight: 600; }
.schema--upravit .schema-krabicka      { cursor: grab; touch-action: none; user-select: none; }
.schema-uzel--tazeny .schema-krabicka  { cursor: grabbing; border-color: var(--akce); box-shadow: 0 4px 12px rgba(16, 24, 40, .18); }
/* Schéma přes celé okno se zvětšením (uživatel 6. 10. 2026). Třídu .schema-obal--cele a měřítko přepíná site.js a po obnově
   každých 5 s je vrací; bez JavaScriptu tlačítko Celé okno není (html.schema-js). Z-index 1045: nad lištou aplikace, pod oknem
   detailu (Bootstrap modal 1055, podklad 1050) — klik na krabičku otevře detail nad schématem. Stránka pod oknem neroluje. */
.schema-otevrit                     { display: none; }
.schema-js .schema-otevrit          { display: inline-block; }
.schema-lista                       { display: none; }
.schema-obal--cele                  { position: fixed; inset: 0; z-index: 1045; display: flex; flex-direction: column; gap: 8px;
                                      padding: 10px 12px; background: var(--pozadi); }
.schema-obal--cele .schema-lista    { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.schema-obal--cele .schema          { flex: 1; min-height: 0; background: var(--plocha-tlumena); resize: none; }
.schema-lista-nadpis                { font-weight: 600; }
.schema-lista-ovladani              { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.schema-meritko                     { min-width: 4.5em; font-variant-numeric: tabular-nums; }
.schema-obal                        { min-width: 0; }
html.schema-cele-okno               { overflow: hidden; }

/* Monitoring → Přehled, vlastní výběr (26. 10. 2026): dlaždice ve skupinách — název, stav a u toho, co neodpovídá, od kdy.
   Stav dlaždice jako krabička ve schématu (rámeček a proužek vlevo), pilulka stavu uvnitř je ZobrazeniMonitoringu.Trida. */
.vlastni-prehled          { display: grid; gap: 16px; }
.vlastni-skupina          { min-width: 0; }
.vlastni-skupina-nadpis   { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-slaby); margin-bottom: 6px; }
/* 27. 10. 2026 zmenšeno (uživatel: „z půlky prázdné, moc se mi tam nevejde“): běžící = jeden řádek ikonka + název, druh jen
   ikonkou; pilulka a „od kdy“ jen u toho, co neběží. Stav = podbarvení celé dlaždice: světle zelená odpovídá, světle červená
   neodpovídá, šedá zatím nevíme (nový, nekontroluje se). Zahozeno: proužek vlevo v barvě stavu (uživatel: „nepřehledné, pruh
   vlevo je špatný“). Dlaždice si drží svou výšku (align-items: start) — roztažené na výšku sousední neběžící by byly zase
   z půlky prázdné. Dřív min. 200 px a tři řádky (stav · druh, od kdy).
   140 px: na telefonu (375) dvě vedle sebe, „neběží od dnes 8:57“ se ještě vejde na jeden řádek (změřeno: 144 px → 56 px výšky). */
.vlastni-mrizka           { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; align-items: start; }
.vlastni-dlazdice         { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px 8px 4px 10px; border: 1px solid var(--ramecek);
                            border-radius: var(--radius); background: var(--plocha); color: var(--text); text-decoration: none; }
.vlastni-dlazdice:hover   { border-color: var(--akce); color: var(--text); text-decoration: none; }
.vlastni-dlazdice--bezi    { background: var(--ok-plocha); border-color: color-mix(in srgb, var(--ok) 25%, var(--ok-plocha)); }
.vlastni-dlazdice--nebezi  { background: var(--chyba-plocha); border-color: color-mix(in srgb, var(--chyba) 30%, var(--chyba-plocha)); }
.vlastni-dlazdice--nezname { background: var(--plocha-vyplnena); color: var(--text-tlumeny); }
.vlastni-dlazdice--bezi:hover, .vlastni-dlazdice--nebezi:hover, .vlastni-dlazdice--nezname:hover { border-color: var(--akce); }
.vlastni-hlava            { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vlastni-hlava .ikona-zarizeni { margin-right: 0; }
/* Název 12 px a smí se zalomit (27. 10. 2026, uživatel: „delší názvy PC se tam už nevejdou, u switche také, klidně menším
   písmem“). Dřív 14 px s „…“: na název zbývá v dlaždici ~100 px a delší jméno PC měří 105 px. Zalomí se za pomlčkou, slovo bez
   pomlčky kdekoli — celý název je vidět vždycky, dlaždice je pak o řádek vyšší. */
.vlastni-nazev            { font-size: 12px; line-height: 1.3; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.vlastni-radek            { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; }
.vlastni-od               { font-size: 12px; font-weight: 500; color: var(--chyba); }
/* Úprava: vlevo pořadí a skupiny, vpravo nabídka; na úzkém displeji pod sebou. */
.vlastni-uprava           { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 767.98px) { .vlastni-uprava { grid-template-columns: minmax(0, 1fr); } }
.vlastni-nabidka          { margin-bottom: 12px; }
.vlastni-nabidka-seznam   { list-style: none; margin: 4px 0 0; padding: 0; max-height: 260px; overflow: auto; border: 1px solid var(--ramecek);
                            border-radius: var(--radius); }
.vlastni-nabidka-seznam li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px;
                             border-top: 1px solid var(--ramecek); }
.vlastni-nabidka-seznam li:first-child { border-top: 0; }
/* Seznam řazený tažením za úchyt (site.js, data-razeni): myš i dotyk; šipky ↑ ↓ pro klávesnici a přesnost. */
/* Jen seznam (ol/ul): „.razeni“ je i odkaz řazení v záhlaví sloupce (_ZahlaviSloupce) — bez rozsahu dostal rámeček (revize 1. 11. 2026). */
ol.razeni, ul.razeni      { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ramecek); border-radius: var(--radius); }
.razeni-polozka           { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-top: 1px solid var(--ramecek); background: var(--plocha); }
.razeni-polozka:first-child { border-top: 0; }
.razeni-polozka--nadpis   { background: var(--plocha-tlumena); }
.razeni-polozka--tazena   { box-shadow: 0 4px 12px rgba(16, 24, 40, .18); position: relative; z-index: 1; border-color: var(--akce); }
.razeni-uchyt             { border: 0; background: transparent; color: var(--text-slaby); cursor: grab; touch-action: none; font-size: 16px; line-height: 1;
                            padding: 4px 6px; }
.razeni-polozka--tazena .razeni-uchyt { cursor: grabbing; }
.razeni-text              { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Pruhované řádky tabulky v rámečku (vzor app-mobily): u logu s dlouhými popisy oko jinak přeskakuje
   mezi řádky. Přidáno 14. 9. 2026. */
.sekce .tabulka tr:nth-child(even) > td { background: var(--plocha-tlumena); }

/* Štítek operace a záhlaví sloupce v tabulce se nelámou — „Změna nastavení pošty“ se v úzkém sloupci
   rozpadla na tři řádky a řádek logu pak byl třikrát vyšší (14. 9. 2026). Místo dostane sloupec Popis. */
.tabulka .filtr-stitek { white-space: nowrap; }
.tabulka th    { white-space: nowrap; }

/* ----------------------------------------------- vystředění na širokém monitoru -- */

/* Na 4K monitoru byl výběr vlevo a „Nová objednávka“ na druhém konci obrazovky (připomínka uživatele
   14. 9. 2026: „vystředit celé, podobně jako mobily“). Lišty zůstávají přes celou šířku (pozadí a čára),
   jejich obsah i obsah stránky se drží ve střední části. Odsazením místo obalového divu — nemusí se sahat
   do stránek ani do náhledů. .75rem = vnitřní okraj Bootstrapu u main.container-fluid, aby logo lícovalo
   s kartou pod ním. Pod šířkou obsahu se nic nemění. */
:root          { --sirka-obsahu: 90rem; }
.lista-app     { padding-inline: max(13px, calc((100% - var(--sirka-obsahu)) / 2 + .75rem)); }
.lista-moduly  { padding-inline: max(9px, calc((100% - var(--sirka-obsahu)) / 2 + .75rem)); }
.lista-nahled  { padding-inline: max(13px, calc((100% - var(--sirka-obsahu)) / 2 + .75rem)); }
main           { max-width: var(--sirka-obsahu); margin-inline: auto; }

/* ---------------------------------------------------------- stránkování -- */

/* Jedna součást pro všechny seznamy (Pages/Shared/_Strankovani.cshtml). Přidáno 15. 9. 2026. */
.strankovani        { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.strankovani-strany { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.pohled--male       { padding: 3px 9px; min-width: 2rem; text-align: center; }

/* Řazení kliknutím na záhlaví sloupce (seznam objednávek). */
.tabulka th a.razeni       { color: inherit; text-decoration: none; }
.tabulka th a.razeni:hover { color: var(--text); text-decoration: underline; }

/* Sekce, které šířka 64rem nestačí: seznam objednávek má s účetními sloupci deset sloupců. */
.sekce--siroka { max-width: none; }

/* ------------------------------------------------ formulář a detail objednávky -- */

/* Typ objednávky a způsob platby mají krátké texty a výběr přes celou šířku formuláře byl mnohonásobně širší
   (připomínka uživatele 14. 9. 2026) — mají .pole--kratke. Rok potřebuje čtyři číslice a šipky. */
.pole.pole--rok { width: 6.5rem; }

/* Účetní údaje v detailu objednávky: tři údaje vedle sebe, každý jako skupina přepínačů — jedno kliknutí
   na údaj. Tři rozbalovací výběry pod sebou byly nepřehledné, SharePoint s prostou tabulkou vypadal líp
   (připomínka uživatele 14. 9. 2026). Přepínač je skutečný radio input (funguje klávesnicí i bez skriptu),
   jen vizuálně skrytý; označená volba se pozná podle :has(). */
.ucetni-udaje           { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.ucetni-udaj            { border: 0; padding: 0; margin: 0; min-width: 0; }
.ucetni-udaj > legend   { float: none; width: auto; margin-bottom: 4px; }
.volby                  { display: inline-flex; border: 1px solid var(--ramecek); border-radius: var(--radius); overflow: hidden; }
.volba                  { position: relative; padding: 5px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.volba + .volba         { border-left: 1px solid var(--ramecek); }
.volba input            { position: absolute; opacity: 0; pointer-events: none; }
.volba:has(input:checked)       { background: var(--akce); color: #fff; font-weight: 500; }
.volba:has(input:focus-visible) { outline: 2px solid var(--akce); outline-offset: -2px; }
/* Volby s mnoha hodnotami (druhy síťových zařízení — osm druhů se do okna nevešlo a okno dostalo vodorovný posuvník,
   uživatel 6. 10. 2026): zalamují se jako samostatné štítky, každý s vlastním rámečkem. Společný rámeček .volby by
   po zalomení obepínal jen první řádek a druhý by zůstal bez horní linky. */
.volby--zalamovat        { display: flex; flex-wrap: wrap; gap: 6px; border: 0; overflow: visible; }
.volby--zalamovat .volba { border: 1px solid var(--ramecek); border-radius: var(--radius); }

/* Formulář služby Monitoringu (4c, _FormularSluzby): pole jen pro web (HTTPS, cesta, hostitel, certifikát) se ukážou, jen když je
   zvolený druh Web — bez skriptu (okno se načítá přes htmx), jen :has() nad zaškrtnutým rádiem jako u plánu zálohy. */
.formular-sluzby:not(:has(input[name="Formular.Druh"][value="Web"]:checked)) .jen-web { display: none; }

/* Volba Kdy v okně akce Stanic (etapa 7, _KdyBehu): pole noci jen při „V noci“, tlačítko řekne „Naplánovat“. Bez skriptu —
   okno se načítá přes htmx a skript by se musel znovu navázat. Den a čas zvlášť v řádku (.cas-okna) jako v náhledu.
   „Cokoli kromě Hned“: u akce Probudit (7b) je druhá volba „V čas“ (value="cas"), ne „V noci“. */
.kdy-behu:not(:has(input[name="kdy"]:not([value="hned"]):checked)) .kdy-noc { display: none; }
.kdy-noc                { display: grid; gap: 6px; margin-top: 8px; }
.radek > .kdy-behu      { flex-basis: 100%; }
.cas-okna               { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form:has(input[name="kdy"]:not([value="hned"]):checked) .jen-hned,
form:not(:has(input[name="kdy"]:not([value="hned"]):checked)) .jen-noc { display: none; }

/* Ikony napájení u počítače (Učebna → Souhrn, 7b): symbol napájení zeleně = probudit, červeně = vypnout, bíle na červené =
   vypnout natvrdo (i s přihlášeným — plné pozadí, ať se nezamění s obyčejným vypnutím). Restart (23. 10. 2026) kruhovou
   šipkou v barvě pozor, natvrdo stejně plným pozadím. Malé, bez rámečku, rámeček až při najetí; výsledek pod jménem (.napajeni-stav). */
.napajeni               { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.ikona-napajeni         { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
                          border: 1px solid transparent; border-radius: var(--radius); background: none; cursor: pointer; }
.ikona-napajeni svg     { width: 15px; height: 15px; }
.ikona-napajeni--zapnout { color: var(--ok); }
.ikona-napajeni--vypnout { color: var(--chyba); }
.ikona-napajeni:hover   { background: var(--plocha-vyplnena); border-color: var(--ramecek); }
.ikona-napajeni--natvrdo { color: #fff; background: var(--chyba); }
.ikona-napajeni--natvrdo:hover { background: var(--chyba); border-color: var(--text); }
.ikona-napajeni--restart { color: var(--pozor); }
.ikona-napajeni--restart-natvrdo { color: #fff; background: var(--pozor); }
.ikona-napajeni--restart-natvrdo:hover { background: var(--pozor); border-color: var(--text); }
.ikona-napajeni:focus-visible { outline: 2px solid var(--akce); outline-offset: 1px; }
.napajeni-stav .stav    { font-size: 11.5px; }

/* Lišty učebny (Stanice → Učebna, pohledy Software a Údržba; náhled docs/navrh-lista-software-udrzba.html, schválený 2. 10.):
   řada tlačítek „ikona + název“ NAD tabulkou místo kupy „Nasadit …“ pod ní. Ikony kreslí IkonyStanic v kódu (mřížka 24, tah
   1,75 jako ikony modulů). Sloupec programu je úzký a ikona v záhlaví stojí NAD krátkým názvem — vedle sebe by se 11 programů
   do okna 800 px nevešlo (změřeno v náhledu); buňka má jen krátkou verzi, celý údaj je v bublině. */
.s-ikonou            { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ikona-polozky       { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
                       stroke-linecap: round; stroke-linejoin: round; }
.lista-akci          { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lista-akci-popisek  { font-size: 11px; color: var(--text-slaby); margin-right: 2px; }
.tabulka .sloupec-programu { text-align: center; padding-left: 5px; padding-right: 5px; }
.tabulka th.sloupec-programu .s-ikonou { flex-direction: column; gap: 2px; }
/* Okno sady běhů (Stanice → Učebna, 20. 10. 2026): software po řádcích, volby toho software se v řádku zalamují — okno zůstává
   široké jako ostatní okna akcí, nic nepřetéká. */
.tabulka--sada td { vertical-align: top; padding-top: 6px; padding-bottom: 6px; }
.tabulka--sada td:first-child { width: 1%; }
.tabulka--sada td:nth-child(2) { white-space: nowrap; }
.volby-radku       { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.volby-radku label { display: inline-flex; align-items: center; gap: 5px; }

/* Ikonky druhů síťových zařízení před názvem (IkonyZarizeni; uživatel 6. 10. 2026: „malé ikonky, pěkně barevné“) — Monitoring
   i Správa → Síťová zařízení. Barvy schválně mimo významové (--ok, --chyba, --pozor): zelená nebo červená ikonka vedle stavu by
   se četla jako „běží“/„neběží“. */
.ikona-zarizeni          { vertical-align: -3px; margin-right: 5px; }
.ikona-zarizeni--ap      { color: #1F6FD0; }
.ikona-zarizeni--kamera  { color: #7B4DC2; }
.ikona-zarizeni--nvr     { color: #B03E8C; }
.ikona-zarizeni--tru     { color: #DA6A1C; }
.ikona-zarizeni--kopirka { color: #0B8EA6; }
.ikona-zarizeni--nas     { color: #4F5BD5; }
.ikona-zarizeni--server  { color: #4A5568; }
.ikona-zarizeni--pc      { color: #8A5A2B; }
.ikona-zarizeni--televize { color: #2C7A7B; }
.ikona-zarizeni--switch  { color: #2E4A7D; }
.ikona-zarizeni--sluzba  { color: #B7791F; }
.ikona-zarizeni--jine    { color: var(--text-slaby); }

/* Dialog otevřený z jiného dialogu (nový dodavatel z formuláře nové objednávky nad seznamem). Bootstrap vrstvení
   dialogů neřeší: druhý závoj by ležel pod prvním oknem a druhé okno by bylo s prvním ve stejné vrstvě. */
.modal-backdrop.show ~ .modal-backdrop.show { z-index: 1060; }
.modal.modal--nad { z-index: 1065; }

/* Velká okna na STŘEDNÍ obrazovce přes skoro celou šířku (kompaktní formuláře 13. 10. 2026). Bootstrap dává .modal-lg i .modal-xl
   pod 992 px jen 500 px a .modal-xl pod 1200 px jen 800 px — v okně prohlížeče širokém 800 px tak měl formulář žádanky 500 px, spadl
   do jednoho sloupce a byl dvakrát vyšší, než musel; vedle okna přitom zůstávalo 300 px nevyužitých. Mřížky formulářů se řídí místem
   v okně (kontejnerové dotazy), takže širší okno samo přidá sloupce. Malé okno (.modal bez velikosti) zůstává 500 px. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .modal-lg, .modal-xl { --bs-modal-width: calc(100vw - 2rem); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .modal-xl { --bs-modal-width: calc(100vw - 3.5rem); }
}

/* Označená volba účetního údaje v barvě hodnoty — zelená ano, červená ne, žlutá nevyplněno, stejně jako štítky
   v seznamu (ZobrazeniObjednavek.UcetniHodnota). Přidáno 15. 9. 2026 podle starého seznamu v SharePointu. */
.volba.volba--ano:has(input:checked)        { background: var(--ok-plocha);    color: var(--ok); }
.volba.volba--ne:has(input:checked)         { background: var(--chyba-plocha); color: var(--chyba); }
.volba.volba--nevyplneno:has(input:checked) { background: var(--pozor-plocha); color: var(--pozor); }

/* Tlačítko Upravit v hlavičce detailu objednávky — v barvě akce, ale ne plné, aby nesplývalo s „Požádat
   o schválení“. Jako obyčejné tlačítko dole pod údaji ho nikdo nehledal (uživatel 15. 9. 2026). */
.tlacitko--upravit { background: var(--akce-plocha); border-color: var(--akce); color: var(--akce); font-weight: 500; }

/* Formulář objednávky ve dvou sloupcích (uživatel 15. 9. 2026: v okně bylo všechno nalepené vlevo, pole vedle sebe
   ušetří výšku). Krátká pole vpravo, delší vlevo, předmět plnění přes celou šířku. Rok vidí jen účetní a výš —
   bez něj zůstane jeho buňka prázdná. Na úzké obrazovce jeden sloupec v pořadí formuláře. */
/* KOMPAKTNÍ (uživatel 13. 10. 2026): ČTYŘI sloupce po 14 rem v okně .modal-xl — dva po půlce okna s nápovědou pod každým polem dávaly
   904 px v okně 768 px. Žadatel a dodavatel (vybraný štítek + hledání) vedle sebe, cena s měnou a DPH přes dva sloupce (446 px),
   předmět plnění přes dva sloupce a vedle něj pokyny školy (15. 10. 2026). Rok vidí jen účetní a výš — dostane vlastní řádek pod předmětem, ostatním tak nezůstane díra
   vedle předmětu. ŘÍDÍ SE MÍSTEM V OKNĚ (kontejner = sekce kompaktního formuláře), ne obrazovkou. */
.formular-objednavky { display: grid; grid-template-columns: repeat(4, 14rem); column-gap: 16px;
                       justify-content: start; align-items: start;
                       grid-template-areas: "nazev nazev typ platba" "zadatel zadatel dodavatel dodavatel"
                                            "cena cena kontakt kontakt" "predmet predmet pokyny pokyny" "rok . . ."; }
.oblast-nazev     { grid-area: nazev; }
.oblast-zadatel   { grid-area: zadatel; }
.oblast-typ       { grid-area: typ; }
.oblast-dodavatel { grid-area: dodavatel; }
.oblast-kontakt   { grid-area: kontakt; }
.oblast-platba    { grid-area: platba; }
.oblast-cena      { grid-area: cena; }
.oblast-predmet   { grid-area: predmet; }
.oblast-rok       { grid-area: rok; }
/* Pokyny k předmětu plnění (uživatel 15. 10. 2026) vedle pole — pole je stejně jen 32 rem široké a vpravo zůstávalo prázdno.
   Odsazení shora = výška popisku, ať rámeček začíná u pole, ne u nadpisu. */
.oblast-pokyny    { grid-area: pokyny; margin-top: 22px; }
/* 4 × 14 rem + mezery + odsazení sekce = 972 px. Pod tím tři sloupce po 13,5 rem (708 px — vejdou se i do okna v prohlížeči širokém
   800 px), pak dva po 17 rem a nakonec jeden v pořadí formuláře. */
@container (max-width: 60.7rem) {
  .formular-objednavky { grid-template-columns: repeat(3, 13.5rem);
                         grid-template-areas: "nazev nazev typ" "zadatel zadatel platba" "dodavatel dodavatel kontakt"
                                              "cena cena rok" "predmet predmet pokyny"; }
}
@container (max-width: 44.2rem) {
  .formular-objednavky { grid-template-columns: 17rem 17rem;
                         grid-template-areas: "nazev nazev" "typ platba" "zadatel zadatel" "dodavatel dodavatel" "cena cena"
                                              "kontakt rok" "predmet predmet" "pokyny pokyny"; }
}
@container (max-width: 36.7rem) {
  .formular-objednavky { grid-template-columns: minmax(0, 1fr);
                         grid-template-areas: "nazev" "zadatel" "typ" "dodavatel" "kontakt" "platba" "cena" "predmet" "pokyny" "rok"; }
}

/* Formulář dovolenky — stejný princip jako u objednávek: dva sloupce s pojmenovanými oblastmi.
   Dvě podstatné věci, obě z připomínek uživatele 22. 9. 2026:

   align-items: start — v .pole-radek (flex, align-items: center) se pole s nápovědou pod ním a pole bez ní
   srovnala na střed a jejich rámečky pak nebyly ve stejné výšce („dovolená od a dovolená do jsou na výšku
   díky spodnímu popisku nezarovnané“). V mřížce začínají nahoře.

   Sloupce mají PEVNOU šířku, ne po půlce stránky. S 1fr 1fr stálo pole „Dovolená do“ na širokém monitoru
   700 px daleko od pole „Dovolená od“, se kterým tvoří jeden údaj („je to strašně roztahané od sebe“).
   justify-content: start drží mřížku vlevo a zbytek šířky nechá být. Místo pobytu a dodatečné informace
   jdou přes oba sloupce a pod sebe („dodatečné informace pod místo pobytu“). */
.formular-dovolenky { display: grid; grid-template-columns: 17rem 17rem; column-gap: 24px;
                      justify-content: start; align-items: start;
                      grid-template-areas: "zadatel zadost" "od do" "hodin hodin"
                                           "misto misto" "informace informace"; }
.oblast-zadatel-d { grid-area: zadatel; }
.oblast-zadost    { grid-area: zadost; }
.oblast-od        { grid-area: od; }
.oblast-do        { grid-area: do; }
.oblast-hodin     { grid-area: hodin; }
.oblast-misto     { grid-area: misto; }
.oblast-informace { grid-area: informace; }
/* KOMPAKTNÍ (uživatel 13. 10. 2026): TŘI sloupce — od a do vedle sebe hned za žadatelem, datum žádosti vedle počtu hodin (pod oběma
   zůstává nápověda, takže řádek nevyroste). Místo pobytu a dodatečné informace dál pod sebou přes celou šířku. Řídí se místem v okně
   (kontejner = sekce kompaktního formuláře): 14 + 10 + 10 rem + mezery + odsazení = 604 px — to je skoro tolik co původní dva sloupce
   po 17 rem (596 px), proto pod tím rovnou jeden sloupec. */
.formular-dovolenky { grid-template-columns: 14rem 10rem 10rem; column-gap: 16px;
                      grid-template-areas: "zadatel od do" "zadost hodin hodin" "misto misto misto" "informace informace informace"; }
@container (max-width: 37.7rem) {
  .formular-dovolenky { grid-template-columns: minmax(0, 1fr);
                        grid-template-areas: "zadatel" "zadost" "od" "do" "hodin" "misto" "informace"; }
}

/* Formulář žádanky o přepravu. Tytéž zásady jako u dovolenky: dva sloupce PEVNÉ šířky (dvojice, které
   patří k sobě — odkud/kam, vozidlo/řidič — musí zůstat vedle sebe i na širokém monitoru) a šířka pole
   podle obsahu. Účel jízdy a doba jdou přes obě, protože to jsou věta a dvojice čísel s vysvětlením. */
.formular-zadanky { display: grid; grid-template-columns: 12.5rem 12.5rem 17rem; column-gap: 12px;
                    justify-content: start; align-items: start;
                    grid-template-areas: "zadatel zadost kdy" "ucel ucel misto" "odkud kam doba"
                                         "vozidlo ridic vybaveni" "spolu spolu spolu"; }
.oblast-z-zadatel  { grid-area: zadatel; }
.oblast-z-zadost   { grid-area: zadost; }
.oblast-z-ucel     { grid-area: ucel; }
.oblast-z-kdy      { grid-area: kdy; }
.oblast-z-misto    { grid-area: misto; }
.oblast-z-odkud    { grid-area: odkud; }
.oblast-z-kam      { grid-area: kam; }
.oblast-z-vozidlo  { grid-area: vozidlo; }
.oblast-z-ridic    { grid-area: ridic; }
.oblast-z-doba     { grid-area: doba; }
.oblast-z-spolu    { grid-area: spolu; }
.oblast-z-vybaveni { grid-area: vybaveni; }
/* KOMPAKTNÍ (uživatel 13. 10. 2026): v okně .modal-lg TŘI sloupce — dva po 17 rem s nápovědou pod každým polem dávaly 976 px v okně
   768 px. Třetí sloupec je širší: den + čas přistavení i „hodin nebo dnů“ (265 px) se do 12,5 rem nevejdou. Odkud/kam a vozidlo/řidič
   zůstávají dvojicí vedle sebe; 12,5 rem stačí i na „Dvůr Králové nad Labem“. ŘÍDÍ SE MÍSTEM V OKNĚ (kontejner = sekce, viz
   .formular-kompaktni .sekce), ne obrazovkou: .modal-lg měl na obrazovce pod 992 px jen 500 px a dva pevné sloupce z něj vyjely (teď viz okna na střední obrazovce).
   Mřížka 42 rem + 24 px mezer + 28 px odsazení = 724 px. Sekce v okně má 764 px (v prohlížeči širokém 800 px 732 px): rezerva na
   posuvník (15 px), aby se při něm mřížka nepřeskládala do dvou sloupců a nezvětšila se tak ještě víc. */
@container (max-width: 45.2rem) {
  .formular-zadanky { grid-template-columns: 17rem 17rem; column-gap: 24px;
                      grid-template-areas: "zadatel zadost" "ucel ucel" "kdy misto" "odkud kam"
                                           "vozidlo ridic" "doba doba" "spolu spolu" "vybaveni vybaveni"; }
}
@container (max-width: 37.5rem) {
  .formular-zadanky { grid-template-columns: minmax(0, 1fr);
                      grid-template-areas: "zadatel" "zadost" "ucel" "kdy" "misto" "odkud" "kam" "vozidlo" "ridic"
                                           "doba" "spolu" "vybaveni"; }
}

/* Formulář cestovního příkazu. Tytéž zásady jako u žádanky: dva sloupce PEVNÉ šířky. Čas a místo začátku
   stojí vedle sebe, stejně tak konec — tak je to i na papírovém cesťáku. Místo jednání mezi nimi přes obě
   půlky, protože je to cíl cesty. Žádanka přes obě: její popis (číslo, čas, vůz, účel) je dlouhý. */
.formular-cestaku { display: grid; grid-template-columns: 17rem 17rem; column-gap: 24px;
                    justify-content: start; align-items: start;
                    grid-template-areas: "zadatel druh" "ucel ucel" "zacatek misto-zacatku" "jednani jednani"
                                         "konec misto-konce" "prostredek prostredek" "zadanka zadanka" "spolu spolu"; }
.oblast-c-zadatel       { grid-area: zadatel; }
.oblast-c-druh          { grid-area: druh; }
.oblast-c-ucel          { grid-area: ucel; }
.oblast-c-zacatek       { grid-area: zacatek; }
.oblast-c-misto-zacatku { grid-area: misto-zacatku; }
.oblast-c-jednani       { grid-area: jednani; }
.oblast-c-konec         { grid-area: konec; }
.oblast-c-misto-konce   { grid-area: misto-konce; }
.oblast-c-prostredek    { grid-area: prostredek; }
.oblast-c-zadanka       { grid-area: zadanka; }
.oblast-c-spolu         { grid-area: spolu; }
/* KOMPAKTNÍ (uživatel 13. 10. 2026): v okně .modal-xl ČTYŘI sloupce — dva po 17 rem s nápovědou pod polem dávaly 839 px v okně 768 px.
   Začátek a konec cesty v jednom řádku, každý se svým místem (jako na papírovém cesťáku); sloupce s dnem a časem mají 15,5 rem (248 px),
   místa 13 rem. Žádanka o přepravu je vidět jen u služebního auta — stojí vpravo od spolucestujících, bez ní zůstane volno vpravo,
   ne díra vlevo. Řídí se místem v okně (kontejner = sekce kompaktního formuláře): 976 px na čtyři sloupce, 700 px na tři (vejdou se
   i do okna v prohlížeči širokém 800 px), 596 px na původní dva. */
.formular-cestaku { grid-template-columns: 15.5rem 13rem 15.5rem 13rem; column-gap: 12px;
                    grid-template-areas: "zadatel ucel ucel ucel" "zacatek misto-zacatku konec misto-konce"
                                         "jednani jednani druh prostredek" "spolu spolu zadanka zadanka"; }
@container (max-width: 60.9rem) {
  .formular-cestaku { grid-template-columns: 15.5rem 12.5rem 12.5rem;
                      grid-template-areas: "zadatel ucel ucel" "zacatek misto-zacatku jednani" "konec misto-konce prostredek"
                                           "druh zadanka zadanka" "spolu spolu spolu"; }
}
@container (max-width: 43.7rem) {
  .formular-cestaku { grid-template-columns: 17rem 17rem; column-gap: 24px;
                      grid-template-areas: "zadatel druh" "ucel ucel" "zacatek misto-zacatku" "jednani jednani"
                                           "konec misto-konce" "prostredek prostredek" "zadanka zadanka" "spolu spolu"; }
}
@container (max-width: 37.2rem) {
  .formular-cestaku { grid-template-columns: minmax(0, 1fr);
                      grid-template-areas: "zadatel" "druh" "ucel" "zacatek" "misto-zacatku" "jednani" "konec"
                                           "misto-konce" "prostredek" "zadanka" "spolu"; }
}

/* KOMPAKTNÍ FORMULÁŘ (uživatel 13. 10. 2026 u nové akce: „strašně moc vysoké na výšku … stálo by to takhle uvažovat nad vším“). Totéž,
   co se osvědčilo u úseků vyúčtování (uv01–uv04, „super, přesně takhle“): menší pole a mezery, popisek těsně nad polem. Třída na obalu
   formuláře — patří všude, kde se formulář vyplňuje v okně a má hodně polí. Samo to ale nestačí: hlavní úspora je víc polí do řádku
   a nápověda pod polem jen tam, kde nese pravidlo (jinak placeholder). */
.formular-kompaktni .pole-skupina { margin-bottom: 8px; }
.formular-kompaktni .popisek      { margin-bottom: 2px; }
.formular-kompaktni .pole         { min-height: 30px; padding: 4px 8px; }
.formular-kompaktni .napoveda     { margin-top: 2px; }
/* Tlačítko přímo vedle pole kompaktního formuláře („Dodavatel [hledat] [+ Nový]“) na výšku pole — dřív o 6 px vyšší (20. 10. 2026). */
.formular-kompaktni :where(:has(> .pole:not(textarea))) > .tlacitko { padding-top: 5px; padding-bottom: 5px; }
.formular-kompaktni .sekce-telo   { padding: 10px 14px; }
/* Sekce kompaktního formuláře je kontejner: počet sloupců mřížky se řídí místem v okně, ne šířkou obrazovky (okna .modal-lg a .modal-xl
   se na menší obrazovce zúží — past z úseků vyúčtování 24. 9. 2026). */
.formular-kompaktni .sekce        { container-type: inline-size; }
/* Štítky vybraných lidí vedle pole hledání (.radek), ne nad ním — bez odsazení pod sebou. */
.formular-kompaktni .radek > .stitky-osob { margin-bottom: 0; }
/* Pole a tlačítka V JEDNOM ŘÁDKU (důvod + Povolit / Nepovolit, popis + Uložit) — místo tlačítek na vlastním řádku pod polem (uživatel
   9. a 13. 10. 2026: tlačítka vedle obsahu, ne pod ním). Pole bere zbytek šířky, v úzkém okně se tlačítka zalomí pod něj. */
.pole-s-tlacitky { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pole-s-tlacitky > .pole { flex: 1 1 18rem; width: auto; max-width: none; }
/* Zaškrtávátka v řádku popisku („Místo konání … [ ] ve škole [ ] v zahraničí“) — místo vlastního řádku pod polem. */
.popisek-s-volbami { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 2px; }
.popisek-s-volbami .popisek { margin-bottom: 0; }
.popisek-s-volbami label:not(.popisek) { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-tlumeny); }

/* Formulář akce v Exkurzích (uživatel 13. 10. 2026: vlastní mřížka, ne půjčená z cesťáku). Sloupce PEVNÉ šířky. V širokém okně ČTYŘI po
   14 rem — první verze měla dva po 17 rem a nápovědu pod každým polem: 1390 px v okně 768 px. Šířka se řídí MÍSTEM V OKNĚ (kontejnerový
   dotaz na .formular-akce-obal), ne obrazovkou: okno .modal-xl má 1140 px jen na obrazovce od 1200 px (stejná past jako u úseků
   vyúčtování). Budova a učebna jen u akce ve škole, pojištění jen u zahraniční — chybějící oblast nechá prázdný řádek nulové výšky. */
.formular-akce-obal { container-type: inline-size; }
.formular-akce { display: grid; grid-template-columns: repeat(4, 14rem); column-gap: 16px;
                 justify-content: start; align-items: start;
                 grid-template-areas: "vedouci druh plan castka" "nazev nazev misto misto" "budova ucebna pojisteni pojisteni"
                                      "doprava doprava pouceni lekarnicka" "program program dalsi dalsi"; }
.oblast-a-vedouci   { grid-area: vedouci; }
.oblast-a-druh      { grid-area: druh; }
.oblast-a-nazev     { grid-area: nazev; }
.oblast-a-plan      { grid-area: plan; }
.oblast-a-castka    { grid-area: castka; }
.oblast-a-misto     { grid-area: misto; }
.oblast-a-budova    { grid-area: budova; }
.oblast-a-ucebna    { grid-area: ucebna; }
.oblast-a-pojisteni { grid-area: pojisteni; }
.oblast-a-doprava   { grid-area: doprava; }
.oblast-a-program   { grid-area: program; }
.oblast-a-dalsi     { grid-area: dalsi; }
.oblast-a-pouceni   { grid-area: pouceni; }
.oblast-a-lekarnicka { grid-area: lekarnicka; }
/* 4 × 14 rem + mezery + odsazení sekce ≈ 61 rem. Okno .modal-xl na obrazovce pod 1200 px má 800 px (sekce 48 rem) → tři sloupce;
   dva po 17 rem až pod 46 rem (dva sloupce v 800px okně dávaly 908 px na výšku). */
@container (max-width: 61rem) {
  .formular-akce { grid-template-columns: repeat(3, 14rem);
                   grid-template-areas: "vedouci druh plan" "nazev nazev castka" "misto misto pouceni" "budova ucebna pojisteni"
                                        "doprava doprava lekarnicka" "program program dalsi"; }
}
@container (max-width: 46rem) {
  .formular-akce { grid-template-columns: 17rem 17rem;
                   grid-template-areas: "vedouci druh" "plan castka" "nazev nazev" "misto misto" "budova ucebna" "pojisteni pojisteni"
                                        "doprava doprava" "pouceni lekarnicka" "program program" "dalsi dalsi"; }
}
@container (max-width: 38rem) {
  .formular-akce { grid-template-columns: minmax(0, 1fr);
                   grid-template-areas: "vedouci" "druh" "plan" "castka" "nazev" "misto" "budova" "ucebna" "pojisteni" "doprava"
                                        "pouceni" "lekarnicka" "program" "dalsi"; }
}

/* Společná učebna ve Správě → Učebny (uživatel 1. 11. 2026: okno je „hodně úzká dlouhá nudle“ — nemělo velikost, tedy 500 px, a čtrnáct
   polí s nápovědou šlo pod sebe). Okno .modal-xl a ČTYŘI sloupce po 14 rem: nahoře učebna, pod ní odkud se berou počítače (OU vedle
   vzoru, vynechat vedle navíc), seznam počítačů z AD přes celou šířku, dole switch a provoz. Řídí se MÍSTEM V OKNĚ (kontejner
   .formular-ucebny-obal), ne obrazovkou — okno .modal-xl má 1140 px jen od 1200 px (past z úseků vyúčtování). 4 × 14 rem + mezery
   = 59 rem; pod tím dva sloupce po 17 rem (35 rem), nakonec jeden v pořadí formuláře. */
.formular-ucebny-obal { container-type: inline-size; }
.formular-ucebny { display: grid; grid-template-columns: repeat(4, 14rem); column-gap: 16px;
                   justify-content: start; align-items: start;
                   grid-template-areas: "nazev budova bakalari bakalari" "zdroj zdroj ucitelsky ucitelsky" "ou ou vzor vzor"
                                        "vynechat vynechat navic navic" "nahled nahled nahled nahled" "switch switch poradi aktivni"
                                        "poznamka poznamka . ."; }
.oblast-u-nazev     { grid-area: nazev; }
.oblast-u-budova    { grid-area: budova; }
.oblast-u-bakalari  { grid-area: bakalari; }
.oblast-u-zdroj     { grid-area: zdroj; }
.oblast-u-ucitelsky { grid-area: ucitelsky; }
.oblast-u-ou        { grid-area: ou; }
.oblast-u-vzor      { grid-area: vzor; }
.oblast-u-vynechat  { grid-area: vynechat; }
.oblast-u-navic     { grid-area: navic; }
.oblast-u-nahled    { grid-area: nahled; }
.oblast-u-switch    { grid-area: switch; }
.oblast-u-poradi    { grid-area: poradi; }
.oblast-u-aktivni   { grid-area: aktivni; margin-top: 22px; }
.oblast-u-poznamka  { grid-area: poznamka; }
@container (max-width: 59rem) {
  .formular-ucebny { grid-template-columns: 17rem 17rem; column-gap: 24px;
                     grid-template-areas: "nazev budova" "bakalari bakalari" "zdroj zdroj" "ou ou" "vzor vzor" "vynechat vynechat"
                                          "navic navic" "ucitelsky ucitelsky" "nahled nahled" "switch switch" "poradi aktivni" "poznamka poznamka"; }
}
@container (max-width: 37rem) {
  .formular-ucebny { grid-template-columns: minmax(0, 1fr);
                     grid-template-areas: "nazev" "budova" "bakalari" "zdroj" "ou" "vzor" "vynechat" "navic" "ucitelsky" "nahled" "switch"
                                          "poradi" "aktivni" "poznamka"; }
  .oblast-u-aktivni { margin-top: 0; }
}

/* Switch ve Správě → Switche (uživatel 3. 11. 2026: okno je „moc dlouhá nudle“ — 500 px na šířku, 1074 px na výšku, jedenáct polí
   s nápovědou pod sebou). Okno .modal-lg, TŘI sloupce po 14 rem: co to je (název, adresa, MAC), kde je (budova, místnost, upřesnění),
   kam je zapojený (připojen k, port) a kus majetku, pod tím hlídání a poznámka přes celou šířku. Nápověda pod polem jen tam, kde nese
   pravidlo, zbytek je v placeholderu a title (vzor kompaktního formuláře). Řídí se MÍSTEM V OKNĚ (kontejner .formular-switche-obal):
   3 × 14 rem + mezery = 44 rem; pod tím dva sloupce po 17 rem, nakonec jeden v pořadí formuláře. */
.formular-switche-obal { container-type: inline-size; }
.formular-switche { display: grid; grid-template-columns: repeat(3, 14rem); column-gap: 16px;
                    justify-content: start; align-items: start;
                    grid-template-areas: "nazev adresa mac" "budova mistnost upresneni" "nadrazeny port inventarni"
                                         "hlidani hlidani hlidani" "poznamka poznamka poznamka"; }
.oblast-s-nazev      { grid-area: nazev; }
.oblast-s-adresa     { grid-area: adresa; }
.oblast-s-mac        { grid-area: mac; }
.oblast-s-budova     { grid-area: budova; }
.oblast-s-mistnost   { grid-area: mistnost; }
.oblast-s-upresneni  { grid-area: upresneni; }
.oblast-s-nadrazeny  { grid-area: nadrazeny; }
.oblast-s-port       { grid-area: port; }
.oblast-s-inventarni { grid-area: inventarni; }
.oblast-s-hlidani    { grid-area: hlidani; }
.oblast-s-poznamka   { grid-area: poznamka; }
@container (max-width: 44rem) {
  .formular-switche { grid-template-columns: 17rem 17rem; column-gap: 24px;
                      grid-template-areas: "nazev adresa" "mac inventarni" "budova mistnost" "upresneni upresneni" "nadrazeny port"
                                           "hlidani hlidani" "poznamka poznamka"; }
}
@container (max-width: 36rem) {
  .formular-switche { grid-template-columns: minmax(0, 1fr);
                      grid-template-areas: "nazev" "adresa" "mac" "budova" "mistnost" "upresneni" "inventarni" "nadrazeny" "port"
                                           "hlidani" "poznamka"; }
}

/* Síťové zařízení (Správa → Síťová zařízení) — tatáž mřížka jako switch (uživatel 3. 11. 2026: „udělej to i u zařízení a služeb“;
   okno mělo 1228 px na výšku). Navíc druh nahoře přes celou šířku a adresa správy vedle poznámky; údaje serveru v rozbalovací
   části mají vlastní malou mřížku .formular-serveru. */
.formular-zarizeni-obal { container-type: inline-size; }
.formular-zarizeni { display: grid; grid-template-columns: repeat(3, 14rem); column-gap: 16px;
                     justify-content: start; align-items: start;
                     grid-template-areas: "druh druh druh" "nazev adresa mac" "budova mistnost upresneni" "switch port inventarni"
                                          "hlidani hlidani hlidani" "sprava poznamka poznamka"; }
.oblast-zr-druh       { grid-area: druh; }
.oblast-zr-nazev      { grid-area: nazev; }
.oblast-zr-adresa     { grid-area: adresa; }
.oblast-zr-mac        { grid-area: mac; }
.oblast-zr-budova     { grid-area: budova; }
.oblast-zr-mistnost   { grid-area: mistnost; }
.oblast-zr-upresneni  { grid-area: upresneni; }
.oblast-zr-switch     { grid-area: switch; }
.oblast-zr-port       { grid-area: port; }
.oblast-zr-inventarni { grid-area: inventarni; }
.oblast-zr-hlidani    { grid-area: hlidani; }
.oblast-zr-sprava     { grid-area: sprava; }
.oblast-zr-poznamka   { grid-area: poznamka; }
.formular-serveru { display: grid; grid-template-columns: repeat(3, 14rem); column-gap: 16px; justify-content: start; align-items: start; }
@container (max-width: 44rem) {
  .formular-zarizeni { grid-template-columns: 17rem 17rem; column-gap: 24px;
                       grid-template-areas: "druh druh" "nazev adresa" "mac inventarni" "budova mistnost" "upresneni upresneni" "switch port"
                                            "hlidani hlidani" "sprava sprava" "poznamka poznamka"; }
  .formular-serveru { grid-template-columns: 17rem 17rem; column-gap: 24px; }
}
@container (max-width: 36rem) {
  .formular-zarizeni { grid-template-columns: minmax(0, 1fr);
                       grid-template-areas: "druh" "nazev" "adresa" "mac" "budova" "mistnost" "upresneni" "inventarni" "switch" "port"
                                            "hlidani" "sprava" "poznamka"; }
  .formular-serveru { grid-template-columns: minmax(0, 1fr); }
}

/* Služba Monitoringu (Správa → Služby) — mřížka jako u switche (okno mělo 889 px na výšku). Pole jen pro web nesou .jen-web každé
   zvlášť: obal kolem nich by z mřížky vypadl. U služby na portu (TCP) se tak skryjí a jejich řádek zůstane prázdný nulové výšky.
   Zaškrtávátka HTTPS a certifikát nemají popisek nad sebou — odsazení je srovná se středem kompaktního pole vedle (změřeno). */
.formular-sluzby-obal { container-type: inline-size; }
.formular-sluzby-pole { display: grid; grid-template-columns: repeat(3, 14rem); column-gap: 16px;
                        justify-content: start; align-items: start;
                        grid-template-areas: "uzel uzel nazev" "druh port https" "cesta hostitel cert" "hlidani hlidani hlidani"
                                             "poznamka poznamka poznamka"; }
.oblast-sl-uzel     { grid-area: uzel; }
.oblast-sl-nazev    { grid-area: nazev; }
.oblast-sl-druh     { grid-area: druh; }
.oblast-sl-port     { grid-area: port; }
.oblast-sl-https    { grid-area: https; margin-top: 25px; }
.oblast-sl-cesta    { grid-area: cesta; }
.oblast-sl-hostitel { grid-area: hostitel; }
.oblast-sl-cert     { grid-area: cert; margin-top: 25px; }
.oblast-sl-hlidani  { grid-area: hlidani; }
.oblast-sl-poznamka { grid-area: poznamka; }
@container (max-width: 44rem) {
  .formular-sluzby-pole { grid-template-columns: 17rem 17rem; column-gap: 24px;
                          grid-template-areas: "uzel uzel" "nazev druh" "port https" "cesta hostitel" "cert cert" "hlidani hlidani"
                                               "poznamka poznamka"; }
  .oblast-sl-cert { margin-top: 0; }
}
@container (max-width: 36rem) {
  .formular-sluzby-pole { grid-template-columns: minmax(0, 1fr);
                          grid-template-areas: "uzel" "nazev" "druh" "port" "https" "cesta" "hostitel" "cert" "hlidani" "poznamka"; }
  .oblast-sl-https { margin-top: 0; }
}

/* Na telefonu (jeden sloupec) se čtyři volby hlídání (~335 px) do sloupce nevešly a přetekly — zalomí se jako .volby--zalamovat.
   Platí pro všechny tři formuláře výše; kontejnerem je u každého jeho vlastní obal. */
@container (max-width: 36rem) {
  :is(.formular-switche, .formular-zarizeni, .formular-sluzby-pole) .volby { display: flex; flex-wrap: wrap; gap: 6px; border: 0; overflow: visible; }
  :is(.formular-switche, .formular-zarizeni, .formular-sluzby-pole) .volba { border: 1px solid var(--ramecek); border-radius: var(--radius); }
}

/* Vyúčtování cesťáku. Řádek vyúčtování (úsek cesty) se ve formuláři sází jako BLOK, ne jako řádek tabulky:
   má čtrnáct polí, z toho sedm částek, a v řádku by se nevešel. Po řádcích: kdy a kudy · km a prostředek ·
   částky žadatele · částky účetní — tak, jak ho vyplňují dva různí lidé. Na dokumentu zůstává řádkem tabulky.

   ŠÍŘKA SE ŘÍDÍ MÍSTEM V OKNĚ, NE OBRAZOVKOU. První verze měla sedm sloupců přes 1000 px a přepínala se
   podle šířky obrazovky (@media) — jenže okno .modal-xl má 1140 px jen na obrazovce od 1200 px, jinak ho
   Bootstrap zúží na 800 px a poslední čas vyjel ven z rámečku (uživatel 24. 9. 2026). Proto se pole řádku zalamují
   (flex) a kontejnerový dotaz se řídí šířkou sekce, ve které úseky jsou (.useky-vyuctovani), ne obrazovkou. */
.pole.pole--cas { width: 6.5rem; }
/* KOMPAKTNÍ ÚSEK (uživatel 9. 10. 2026, body uv01–uv04 na stránce s náhledem „teď / návrh“): číslo v kroužku · dva řádky polí
   (kdy a kudy; prostředek, km a částky; účetní třetí) · Odebrat. Pět řádků mřížky s popiskem a 13 px pod každým polem dávalo
   ~380 px na úsek — dva úseky (minimum) zabraly celou výšku okna. Řádky jsou flex se zalamováním, takže v užším okně pole
   jen přetečou na další řádek; kontejnerový dotaz už jen přesune Odebrat pod pole. Menší vnitřní odsazení polí platí JEN tady
   (uv02: „jde trochu zmenšit?“), ostatní formuláře IS zůstávají. */
/* TERMÍNY AKCE v Exkurzích (.terminy-akce / .termin-akce) jsou tytéž bloky pod vlastním jménem (uživatel 13. 10. 2026): vypadají stejně,
   ale cesťák se jménem Exkurzí nemění a vnitřní třídy (.usek-cislo, .usek-radka, .usek-pole …) jsou obecné. */
.useky-vyuctovani, .terminy-akce { container-type: inline-size; }
.usek-vyuctovani, .termin-akce { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; align-items: start;
                   padding: 7px 4px; border-bottom: 1px solid var(--ramecek); }
.usek-cislo      { width: 22px; height: 22px; margin-top: 18px; border-radius: 50%; background: var(--plocha-vyplnena);
                   color: var(--text-tlumeny); font-size: 11.5px; font-weight: 600; line-height: 22px; text-align: center; }
.usek-radky      { display: grid; gap: 6px; min-width: 0; }
.usek-radka      { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; }
.usek-pole       { display: grid; gap: 2px; }
.usek-pole .popisek { font-size: 11px; margin: 0; color: var(--text-slaby); }
.usek-vyuctovani .pole, .termin-akce .pole { min-height: 28px; padding: 3px 7px; }
.usek-vyuctovani .pole.pole--cas, .termin-akce .pole.pole--cas         { width: 5.5rem; }
.usek-vyuctovani .pole.pole--cislo, .termin-akce .pole.pole--cislo     { width: 4.5rem; }
.usek-vyuctovani .pole.pole--castka  { width: 6.5rem; }
.pole.pole--misto      { width: 14rem; max-width: 100%; }  /* uv03 chtělo 16 rem — se 14 se kdy a kudy vejde na jeden řádek i v samostatné stránce (sekce 64 rem) */
.pole.pole--prostredek { width: 9rem; }
.usek-sipka      { color: var(--text-slaby); padding-bottom: 4px; }
.usek-text       { font-size: 12px; color: var(--text-tlumeny); padding-bottom: 5px; }
.usek-odebrat    { margin-top: 17px; }
/* Štítky tříd a dozoru v termínu akce stojí v řádku vedle pole hledání — bez spodního okraje, který mají pod polem jinde. */
.termin-akce .stitky-osob { margin-bottom: 0; }
/* ŽÁCI AKCE (Exkurze, etapa 2, náhled obrazovka 6): třída se 30 žáky a zaškrtávátky v řádku. S 9 px nahoře i dole z .tabulka
   a polem v buňce měl řádek přes 45 px a jedna třída 1400 px — tady se odškrtává, ne čte (kompaktnost, uživatel 13. 10. 2026). */
.tabulka--zaci td { padding-top: 2px; padding-bottom: 2px; vertical-align: middle; }
.tabulka--zaci .pole { min-height: 26px; padding: 2px 6px; }
.tabulka--zaci .tlacitko { padding-top: 2px; padding-bottom: 2px; }
/* Výběr žáků ze třídy (akce vybraných žáků): zaškrtávátka ve sloupcích pevné šířky, ne 30 řádků pod sebou. */
.vyber-zaku { display: grid; grid-template-columns: repeat(auto-fill, 14rem); gap: 2px 12px; }
@container (max-width: 42rem) {
  .usek-vyuctovani, .termin-akce { grid-template-columns: 22px minmax(0, 1fr); }
  .usek-odebrat    { grid-column: 2; justify-self: start; margin-top: 6px; }
}
/* Měna, kurz a záloha — jeden údaj za celý cesťák. Pole se řadí zleva podle toho, kolik jich je: u tuzemské
   cesty je jen záloha a v mřížce s pojmenovanými oblastmi stála ve třetím sloupci, uprostřed prázdna
   (uživatel 24. 9. 2026: „kdyby aspoň na straně“). */
.formular-vyuctovani { display: grid; grid-auto-flow: column; grid-auto-columns: 10rem; column-gap: 24px;
                       justify-content: start; align-items: start; }
@media (max-width: 40rem) {
  .formular-vyuctovani { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
}

/* Štítek přes celou šířku buňky: v jednom sloupci tabulky jsou pak všechny obdélníky stejně široké — podle nejdelší
   hodnoty toho sloupce, ne podle vlastního textu (uživatel 15. 9. 2026: „ANO a NE ať je stejně široký obdélník“,
   každý sloupec má ale svou šířku). */
.stav.stav--plna { display: block; text-align: center; }

/* ------------------------------------------------ filtry v záhlaví sloupců -- */

/* Záhlaví sloupce seznamu objednávek: název řadí, šipka vedle otevře nabídku (Pages/Objednavky/_NabidkaFiltru.cshtml,
   náhled 2). Aktivní filtr má šipku vyplněnou, aby bylo vidět, podle čeho je seznam zúžený. Přidáno 15. 9. 2026. */
.zahlavi              { display: inline-flex; align-items: center; gap: 2px; }
.filtr-tlacitko       { border: 0; background: none; padding: 0 5px; border-radius: var(--radius); cursor: pointer;
                        color: var(--text-slaby); font-size: 11px; line-height: 1.6; }
/* ▾ v záhlaví sloupce menší (7. 10. 2026): s 11px písmem a řádkem 1.6 byl aktivní filtr modré kolečko ~18 px, větší než nadpis
   sloupce (11px) — uživatel u sloupce Jak v Bezpečnosti → Přihlášení. ▲▼ a ✕ v nabídkách zůstávají (klikací plocha). */
.zahlavi .filtr-tlacitko { padding: 0 3px; border-radius: 4px; font-size: 9px; line-height: 1.5; }
.filtr-tlacitko:hover { background: var(--akce-plocha); color: var(--akce); }
.filtr-tlacitko--aktivni,
.filtr-tlacitko--aktivni:hover { background: var(--akce); color: #fff; }
.dropdown-menu.nabidka { padding: 0; border-color: var(--akce); }
.nabidka--zahlavi     { min-width: 16rem; max-width: 24rem; font-size: 12.5px; font-weight: 400; white-space: normal; text-align: left;
                        /* Nabídka je „fixed“ (Popper), takže se s oknem neposouvá: musí se do okna vejít celá, jinak by spodek
                           s tlačítkem Použít zůstal mimo dosah (uživatel 3. 10.). Seznam hodnot je navíc nižší v nízkém okně. */
                        max-height: calc(100vh - 1rem); overflow-y: auto; }
a.nabidka-polozka     { display: block; color: var(--text); text-decoration: none; }
a.nabidka-polozka:hover { background: var(--akce-plocha); color: var(--akce); }
.nabidka-hledat       { padding: 8px 10px; }
.nabidka--zahlavi .nabidka-volby { max-height: min(260px, 35vh); padding-top: 4px; }
label.nabidka-volba   { cursor: pointer; }
/* Řádek volby sloupce se šipkami pořadí (uživatel 4. 10. 2026) — zaškrtávátko s názvem zabere zbytek, šipky vpravo. */
.nabidka-sloupec      { display: flex; align-items: center; gap: 2px; }
.nabidka-sloupec > .nabidka-volba { flex: 1; }
/* Řádek Celkem pod tabulkou sestavy (Majetek → Sestavy). */
.tabulka .radek-celkem > td { font-weight: 600; border-top: 2px solid var(--ramecek); }
/* Editor podmínek „a zároveň“ / „nebo“ (Sluzby/PodminkyFiltru.cs, _EditorPodminek): skupina = svislá čára vlevo, mezi skupinami
   „nebo“. První skupina „nebo“ nad sebou nemá — editor ho neskládá, jen skrývá, ať ho po smazání první skupiny nemusí přesouvat. */
.podminky             { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mezera-mala); }
.podminky-skupina     { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mezera-mala);
                        border-left: 3px solid var(--ramecek-vyrazny); padding-left: var(--mezera); }
.podminky-nebo        { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tlumeny); }
.podminky-skupina:first-child > .podminky-nebo { display: none; }
.podminka-spojka      { min-width: 5.5em; }
.nabidka-akce         { padding: 8px 10px; border-top: 1px solid var(--ramecek); }
a.filtr-stitek        { text-decoration: none; }
a.filtr-stitek:hover  { background: var(--akce); color: #fff; }

/* Pole Hledat u nástrojů seznamu (_HledaniSeznamu, varianta A z ukázky — uživatel 1. 10. 2026). Šířka podle toho, co se
   píše (pár slov), ne přes celý řádek; výška jako malá tlačítka vedle. Lupa je kreslená ve stránce, ne obrázek. */
.hledat-seznam        { position: relative; display: inline-flex; align-items: center; flex: 0 1 19rem; min-width: 11rem; margin: 0; }
.hledat-seznam > svg  { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--text-slaby); pointer-events: none; }
.pole.pole--hledat-seznam { min-height: 0; padding: 5px 10px 5px 29px; font-size: 12.5px; }
/* Nalezený text v buňce seznamu — barva „pozor“, aby se nepletla s odkazem ani se stavem. */
.nalezeno             { background: var(--pozor-plocha); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Nastavení → Texty e-mailů: vlevo šablona, vpravo náhled s vymyšlenými údaji. Na úzké obrazovce pod sebou. */
.dva-sloupce    { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
@media (max-width: 56rem) { .dva-sloupce { grid-template-columns: minmax(0, 1fr); } }
.nahled-emailu  { border: 1px dashed var(--ramecek); border-radius: var(--radius); background: var(--plocha-tlumena);
                  padding: 10px 12px; font-size: 12.5px; }
.nahled-emailu .nahled-predmet { font-weight: 600; margin-bottom: 8px; }

/* Nástroje nad seznamem objednávek: uložené pohledy, volba sloupců a export. Položka nabídky se smazáním vedle. */
.nabidka-radek            { display: flex; align-items: center; border-bottom: 1px solid var(--ramecek); }
.nabidka-radek > a.nabidka-polozka { flex: 1; border-bottom: 0; }
.nabidka-radek > form     { padding-right: 6px; }
a.nabidka-polozka.nabidka-polozka--aktivni { color: var(--akce); font-weight: 600; }

/* Nabídky v liště nad seznamem (Sloupce, Export): obsah je v <span> uvnitř .dropdown-menu — jako řádkový prvek by
   ignoroval odsazení a zalomený text by utekl k levému okraji (připomínka uživatele 15. 9. 2026). */
.nabidka-volby, span.nabidka-polozka { display: block; }
.nabidka-poznamka  { display: block; padding: 8px 10px; font-size: 11.5px; color: var(--text-slaby); }
a.nabidka-polozka.nabidka-polozka--ikona { display: flex; align-items: center; gap: 8px; }
/* Ikona souboru v nabídce exportu: list papíru v barvě formátu, zkratka vepsaná barvou plochy. */
.ikona-souboru       { flex: none; width: 16px; height: 20px; }
.ikona-souboru path  { fill: currentColor; }
.ikona-souboru text  { fill: var(--plocha); font: 700 5.2px/1 var(--pismo); }
.ikona-souboru--xlsx { color: #1D6F42; }
.ikona-souboru--pdf  { color: #C4312B; }

/* Editor formátovaného textu (site.js, data-editor): lišta nad plochou, plocha vypadá jako textové pole.
   Barvy tlačítek palety odpovídají paletě v Sluzby/FormatovanyText.cs. */
.editor-lista        { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px;
                       border: 1px solid var(--ramecek); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
                       background: var(--plocha-tlumena); }
.editor-lista[hidden] { display: none; }
.editor-lista + .editor-plocha { border-top-left-radius: 0; border-top-right-radius: 0; }
.editor-tlacitko     { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--ramecek); border-radius: var(--radius);
                       background: var(--plocha); color: var(--text); cursor: pointer; font-size: 13px; }
.editor-tlacitko:hover { background: var(--akce-plocha); color: var(--akce); }
.editor-barva        { width: 22px; height: 22px; border: 2px solid var(--plocha); border-radius: 50%; outline: 1px solid var(--ramecek);
                       cursor: pointer; padding: 0; }
.editor-barva--cervena  { background: #B42318; }
.editor-barva--zelena   { background: #0F6E56; }
.editor-barva--modra    { background: #1F6FD0; }
.editor-barva--oranzova { background: #B54708; }
.editor-barva--seda     { background: #5C5A55; }
.editor-barva--zadna    { background: var(--plocha); }
.editor-oddelovac    { width: 1px; height: 20px; background: var(--ramecek); margin: 0 4px; }
.editor-udaje        { width: auto; max-width: 16rem; min-height: 28px; padding: 2px 6px; font-size: 12.5px; }
.editor-ikona        { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; vertical-align: -2px; }
.editor-plocha       { min-height: 180px; max-height: 420px; overflow-y: auto; line-height: 1.5; }
.editor-plocha:focus { outline: 2px solid var(--akce-plocha); }
.editor-plocha ul    { margin: 2px 0 2px 20px; padding: 0; }
/* Náhled e-mailu v HTML: obsah skládá server (FormatovanyText) a nese vlastní inline styl. */
.nahled-emailu ul    { margin: 4px 0 4px 20px; padding: 0; }
.nahled-prijemci     { font-size: 12px; color: var(--text-tlumeny); margin-bottom: 6px; }
.volby-prijemcu      { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; }

/* Správa → Zálohy: výběr rozsahu zálohy a obnovy — volby pod sebou, u každé popis, co obsahuje nebo co nahradí. */
.volby-zalohy  { display: grid; gap: 6px; }
.volba-zalohy  { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--ramecek);
                 border-radius: var(--radius); cursor: pointer; }
.volba-zalohy:hover { background: var(--plocha-tlumena); }
.volba-zalohy input { margin-top: 4px; }
.volba-zalohy .podradek { display: block; }

/* Procházení složek SharePointu v nastavení dokumentů: dlouhý seznam se posouvá uvnitř rámečku, stránka neroste. */
.seznam--posuvny { max-height: 22rem; overflow-y: auto; }

/* Plán zálohy: podle přepínače Cíl se skryje skupina polí druhého cíle (rozhodnutí 16. 9. 2026, nahlášená chyba —
   dřív obě zůstávaly vidět pohromadě). Skrytá pole se pořád odesílají, server bere v potaz jen pole vybraného cíle;
   žádný vlastní skript kvůli CSP, jen :has() nad zaškrtnutým rádiem. */
.cile-zalohy:has(input[name="Cil"][value="SharePoint"]:checked) .cil-slozka     { display: none; }
.cile-zalohy:has(input[name="Cil"][value="Slozka"]:checked)     .cil-sharepoint { display: none; }

/* ------------------------------------------------- widgety na dashboardu -- */

/* Mřížka „pseudočtverců“ podle docs/navrh-widgety-a-zpravy.md (rozhodnuto 21. 9. 2026).
   ŠEST sloupců: dělí se na poloviny i třetiny, a při šířce obsahu 1416 px a mezeře 18 px vyjde
   blok 221 px — proti čtyřem sloupcům (340 px) je to skoro čtverec, tedy to, co uživatel chtěl.
   Krok výšky 190 px.

   Velikost NESE TŘÍDA, ne pixely v šabloně (pravidlo vzhledu v CLAUDE.md). Proto pevná sada
   --s1..--s6 a --v1..--v4: dá se navrhnout tak, aby vypadala dobře ve všech kombinacích.

   Na užším okně se mřížka slévá: blok by jinak klesl pod 160 px a nadpis by se lámal. */
/* DVANÁCT sloupců (uživatel 22. 9. 2026). Šestka uměla jen půlku, třetinu a šestinu; dvanáctka přidá
   čtvrtinu a mezistupně, takže „1 bylo málo a 2 moc“ přestalo platit. Uložené šířky přepočítala migrace
   SirkaDlazdicNa12Sloupcu — čísla tříd jsou díly z DVANÁCTI. */
.widgety       { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
                 grid-auto-rows: 190px; gap: var(--mezera-velka); align-items: stretch; }

.widget--s1 { grid-column: span 1; } .widget--s2 { grid-column: span 2; }
.widget--s3 { grid-column: span 3; } .widget--s4 { grid-column: span 4; }
.widget--s5 { grid-column: span 5; } .widget--s6 { grid-column: span 6; }
.widget--s7 { grid-column: span 7; } .widget--s8 { grid-column: span 8; }
.widget--s9 { grid-column: span 9; } .widget--s10 { grid-column: span 10; }
.widget--s11 { grid-column: span 11; } .widget--s12 { grid-column: span 12; }
.widget--v1 { grid-row: span 1; } .widget--v2 { grid-row: span 2; }
.widget--v3 { grid-row: span 3; } .widget--v4 { grid-row: span 4; }

/* POZOR: počet sloupců se na užším okně NEMĚNÍ. Do 22. 9. 2026 se tu mřížka zmenšovala na třetinu sloupců,
   ale šířky dlaždic dál znamenaly díly z původního počtu — dlaždice „2 ze 6“ tak zabrala dvě třetiny řádku
   a vedle sebe se nevešly ani dvě, každá si vzala vlastní řádek. Uživatel to viděl jako „dlaždice vpravo
   spadla dolů“. Mění se jen to, že nejužší dlaždice nesmí na malém okně klesnout pod čtvrtinu řádku. */
@media (max-width: 1100px) {
  .widget--s1, .widget--s2 { grid-column: span 3; }
}
@media (max-width: 700px) {
  .widgety     { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .widget      { grid-column: span 1 !important; grid-row: span 1 !important; }
}

.widget        { display: flex; flex-direction: column; min-width: 0; overflow: hidden;
                 border: 1px solid var(--ramecek); border-radius: var(--radius-velky);
                 background: var(--plocha);
                 box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05); }
.widget-hlavicka { display: flex; align-items: center; gap: 7px; padding: 7px 11px;
                 background: var(--plocha-vyplnena); border-bottom: 1px solid var(--ramecek); }
.widget-nadpis { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--text-tlumeny); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-pocet  { margin-left: auto; font-size: 12px; color: var(--text-slaby); }

/* Tělo je úmyslně HUSTŠÍ než běžný seznam — uživatel 21. 9. 2026: „ať se do nich něco vejde“.
   Řádek má ~34 px, z toho počítá PopisWidgetu.RadkuDoVysky. Bez rolování: co se nevejde,
   shrne patička odkazem do modulu. */
.widget-telo   { flex: 1 1 auto; overflow: hidden; padding: 4px 6px; }
.widget-radek  { display: flex; align-items: center; gap: 8px; padding: 5px 5px;
                 border-radius: var(--radius); font-size: 13px; line-height: 1.25;
                 color: inherit; text-decoration: none; }
.widget-radek:hover { background: var(--plocha-tlumena); }
.widget-radek .vyplnit { min-width: 0; }
.widget-podtext { display: block; font-size: 11.5px; color: var(--text-slaby);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-paticka { padding: 0 8px 8px; }
.widget-paticka:empty { display: none; }

/* Paleta dlaždic: osm jemných pastelů, prověřených proti barvě textu (podklad dashboardu,
   „jen na výběr z palety cca 8mi barev … dostatečně kontrastní vůči obsahu“). Barva probarví
   POZADÍ dlaždice, text zůstává týž — kontrast se tak nemá jak rozbít. Bez barvy (0) je dlaždice
   neutrální; kdo si nic nevybere, má dashboard klidný. */
.widget--barva1 { background: #EAF2FD; }
.widget--barva2 { background: #E6F5EE; }
.widget--barva3 { background: #FBF1DC; }
.widget--barva4 { background: #FBEBEB; }
.widget--barva5 { background: #F1EDFB; }
.widget--barva6 { background: #E6F4F6; }
.widget--barva7 { background: #F3F2EC; }
.widget--barva8 { background: #FAECF4; }

/* Kolečka výběru barvy v nabídce dlaždice. Stejné hodnoty jako výš — kdyby se rozešly, vybíral
   by člověk jinou barvu, než jakou dostane. */
/* Vodorovně stejně jako formulář nad tím (.nabidka-hledat, 10 px). Dřív 2 px: rámeček vybrané barvy (2 px + 1 px odstup) pak
   sahal přes levý okraj nabídky — uživatel 26. 10. 2026: „levé kolečko je úplně těsně na levém okraji, možná malinko vlevo“. */
.barvy         { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
.barva         { width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
                 border: 1px solid var(--ramecek-vyrazny); background: var(--plocha); }
.barva--vybrana { outline: 2px solid var(--akce); outline-offset: 1px; }
.barva--0 { background: var(--plocha); }
.barva--1 { background: #EAF2FD; } .barva--2 { background: #E6F5EE; }
.barva--3 { background: #FBF1DC; } .barva--4 { background: #FBEBEB; }
.barva--5 { background: #F1EDFB; } .barva--6 { background: #E6F4F6; }
.barva--7 { background: #F3F2EC; } .barva--8 { background: #FAECF4; }

/* Režim úprav: záhlaví se chytá myší, tažená dlaždice zprůhlední. Kurzor „grab“ je jediná
   nápověda, že se s dlaždicí dá hýbat. */
/* Nabídka dlaždic k přidání. Do 22. 9. 2026 to byla řada tlačítek „+ Název“ vedle sebe a nebylo poznat,
   které patří ke kterému modulu ani co dlaždice dělá — popis byl schovaný v title (uživatel: „kupa
   slovních odkazů, co ani nevím kam patří“). Teď po modulech, s popisem pod názvem. */
.nabidka-dlazdic { display: flex; flex-direction: column; gap: var(--mezera); }
.nabidka-skupina-nadpis { display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
                          font-size: 12px; color: var(--text-tlumeny); }
.dlazdice-volby { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 8px; }
.dlazdice-volba { width: 100%; height: 100%; text-align: left; cursor: pointer;
                  border: 1px solid var(--ramecek); border-radius: var(--radius);
                  background: var(--plocha-tlumena); color: var(--text); padding: 8px 10px; }
.dlazdice-volba:hover,
.dlazdice-volba:focus-visible { border-color: var(--akce); background: var(--akce-plocha); }
.dlazdice-volba-nazev { display: block; font-size: 13px; }
.dlazdice-volba-popis { display: block; font-size: 11px; color: var(--text-slaby); margin-top: 2px; }

.widgety--upravy .widget-hlavicka { cursor: grab; }
.widgety--upravy .widget { outline: 1px dashed var(--ramecek-vyrazny); outline-offset: 2px; position: relative; }

/* Velikost dlaždice tažením za roh (dl01, 26. 10. 2026, dashboard.js) — stejný úchyt jako sekce v editoru televizí (.editor-tv-uchop).
   Jen v úpravách (dl02): při běžném klikání na řádky dlaždice by se velikost dala změnit omylem. Na telefonu (jeden sloupec) není. */
.widget-uchop    { position: absolute; right: -7px; bottom: -7px; z-index: 2; width: 15px; height: 15px; box-sizing: border-box;
                   background: var(--plocha); border: 2px solid var(--akce); border-radius: 3px; cursor: nwse-resize; touch-action: none; }
.widget-uchop:hover, .widget-uchop:focus-visible, .widget--meni .widget-uchop { background: var(--akce); }
.widgety--upravy .widget--meni { outline: 2px solid var(--akce); outline-offset: 2px; z-index: 1; }
.widget-velikost { position: absolute; right: 14px; bottom: 10px; z-index: 2; font-size: 12px; font-weight: 600; white-space: nowrap;
                   color: var(--plocha); background: var(--text); border-radius: 999px; padding: 2px 10px; pointer-events: none; }
@media (max-width: 700px) { .widget-uchop { display: none; } }

/* Nabídka ⋯ musí vylézt ven z dlaždice: u šířky 1 je dlaždice užší než nabídka a overflow: hidden
   ji uřízl, takže se nastavení nedalo použít (uživatel 22. 9. 2026). Přetékat smí jen v úpravách,
   kde o nabídku jde; tělo dlaždice si ořez nechává. Záhlaví si musí zaoblení dokreslit samo —
   bez ořezu rodiče by jinak koukalo z rohů ven. */
.widgety--upravy .widget { overflow: visible; }
.widgety--upravy .widget-hlavicka { border-radius: var(--radius-velky) var(--radius-velky) 0 0; }

/* Naznačené sloty pod dlaždicemi (uživatel 22. 9. 2026: „možná by také pomohlo nějak čárkovaně
   označit obdélník, kde mohou dlaždice být“). Vlastní vrstva, ne pozadí mřížky: mezery mezi sloupci
   se z gradientu spočítat nedají a musely by se udržovat zvlášť. */
.mrizka-sloty  { position: absolute; inset: 0; display: grid; gap: var(--mezera-velka);
                 grid-template-columns: repeat(12, minmax(0, 1fr)); pointer-events: none; }
.mrizka-sloty > span { border: 1px dashed var(--ramecek); border-radius: var(--radius-velky); }
@media (max-width: 700px) {
  .mrizka-sloty { display: none; }
}
.widget--tazena { opacity: .45; }

/* ------------------------------------------------ grafický přehled dovolených -- */

/* Sestava „Přehled — graficky“: vlevo lidé, vpravo dvanáct kalendáříků (uživatel 22. 9. 2026, podle
   obdobné obrazovky v evidenci mobilů). Levý sloupec je širší než ve Správě — jsou v něm příjmení
   a jména, ne krátké položky nastavení — a roluje sám, aby kalendáře zůstaly na místě. */
.rozdeleni--osoby        { grid-template-columns: 17rem minmax(0, 1fr); }
.bocni-nav--rolovaci     { display: flex; flex-direction: column; max-height: 46rem; padding: 0; }
/* Hledání a filtr zařazení nad seznamem. Zařazení je filtr, ne dva oddíly pod sebou — ve dvou
   dlouhých seznamech se hledá hůř než v jednom (uživatel 22. 9. 2026). */
.hledani-seznamu         { padding: 8px; border-bottom: 1px solid var(--ramecek); }
.pole.pole--hledani      { width: 100%; max-width: none; }
/* Roluje jen seznam, ne hledání nad ním — jinak by se při hledání ztratilo z dohledu. */
.seznam-osob             { overflow-y: auto; padding: 0 0 8px; }

/* Položka je řádek: jméno vlevo, počet vyčerpaných dnů vpravo pod sebou. Střídavé podbarvení
   a zvýraznění pod myší kvůli přehlednosti dlouhého seznamu (uživatel 22. 9. 2026). */
.bocni-polozka.osoba     { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
                           margin: 0; border-radius: 0; padding: 6px 8px; }
.osoba:nth-of-type(even) { background: var(--plocha-tlumena); }
.osoba:hover             { background: var(--akce-plocha); color: var(--akce); }
.osoba.bocni-polozka--aktivni { background: var(--akce); color: #fff; }
.osoba.bocni-polozka--aktivni .slabe { color: #fff; }
.osoba-jmeno             { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osoba-dnu               { font-variant-numeric: tabular-nums; font-size: 12px; }

.kalendare      { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
                  gap: var(--mezera); align-items: start; }
.kalendarik     { border: 1px solid var(--ramecek); border-radius: var(--radius); padding: 8px;
                  background: var(--plocha); }
/* Aktuální měsíc pozná člověk na první pohled podle rámečku v barvě akce — bez něj se v dvanácti
   stejných mřížkách hledá dnešek zbytečně dlouho. */
.kalendarik--aktualni { border-color: var(--akce); background: var(--akce-plocha); }
.kalendarik-nadpis { font-size: 12px; font-weight: 600; margin-bottom: 6px; text-transform: capitalize; }
.kalendarik-mrizka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.den            { display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
                  font-size: 11px; border-radius: 4px; font-variant-numeric: tabular-nums; color: var(--text); }
.den--zahlavi   { font-size: 10px; color: var(--text-slaby); aspect-ratio: auto; padding-bottom: 2px; }
.den--prazdny   { visibility: hidden; }
.den--vikend    { color: var(--text-slaby); }
/* Svátek podbarvený, ne jen šedý: víkend je v mřížce vidět podle sloupce, svátek uprostřed týdne
   ne — a pak vypadá nižší počet hodin jako chyba (uživatel 22. 9. 2026). */
.den--svatek    { color: var(--pozor); background: var(--pozor-plocha); }
/* Schválená dovolená plnou barvou, čekající světlou — rozdíl mezi „je to jisté“ a „ještě se uvidí“
   musí být vidět i bez najetí myší. */
.den--dovolena  { background: var(--akce); color: #fff; font-weight: 600; }
.den--zadost    { background: var(--akce-plocha); color: var(--akce); font-weight: 600; }
/* Dnešek obtažením, ne výplní: výplň už nese stav dovolené a dvě barvy v jednom čtverečku se perou. */
.den--dnes      { outline: 2px solid var(--pozor); outline-offset: -2px; }

/* ------------------------------------------------ obsazenost (kdo je tu, kdo je mimo) -- */

/* Sestava „Přehled — obsazenost“: řádky lidé, sloupce dny nebo týdny (návrh schválený uživatelem
   22. 9. 2026). Tabulka roluje ve vlastním rámu do stran i dolů a jména vlevo, záhlaví nahoře, součet
   vpravo a počet „mimo“ dole zůstávají přilepené — ukotvené příčky jako v Excelu („jména vidím vždy
   a posuvníkem se posouvám v té tabulce“). position: sticky funguje jen uvnitř rolujícího prvku, proto
   ten rám s omezenou výškou; border-collapse: separate, protože se sloučenými okraji se přilepené
   buňky kreslí bez čar. */
.obs-ovladani   { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px;
                  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ramecek); }
.obs-souhrn     { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 10px; }
.obs-ram        { overflow: auto; max-height: calc(100vh - 20rem); min-height: 18rem;
                  border: 1px solid var(--ramecek); border-radius: var(--radius); background: var(--plocha); }
.obs            { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.obs th, .obs td { padding: 0; border-right: 1px solid var(--ramecek); border-bottom: 1px solid var(--ramecek);
                   font-weight: 400; }

.obs thead th   { position: sticky; z-index: 2; background: var(--plocha-tlumena); }
/* Dvě řádky záhlaví nad sebou: druhá se lepí přesně pod první, proto pevná výška první. Změřeno:
   s výškou 22 px vyšla řádka na 24 (buňka jména má výšku 24 px jako všechny řádky) a druhá řádka
   pak první o 2 px překrývala — proto 24 u obou. */
.obs .obs-radek-mesicu th { top: 0; height: 24px; box-sizing: border-box; background: var(--plocha-vyplnena); }
.obs-radek-dnu th    { top: 24px; border-bottom-color: var(--ramecek-vyrazny); }
.obs .obs-mesic { padding: 3px 8px; font-size: 11.5px; font-weight: 600; text-align: left; white-space: nowrap; }

.obs .obs-jmeno { position: sticky; left: 0; z-index: 1; background: var(--plocha); text-align: left;
                  min-width: 13rem; max-width: 13rem; padding: 0 8px; white-space: nowrap; overflow: hidden;
                  text-overflow: ellipsis; border-right-color: var(--ramecek-vyrazny); height: 24px; }
.obs thead .obs-jmeno, .obs tfoot .obs-jmeno { z-index: 3; }
.obs thead .obs-jmeno { font-size: 11px; color: var(--text-tlumeny); vertical-align: bottom; padding-bottom: 4px; }
/* Počet dnů vpravo zůstává vidět i při odrolování do strany. */
.obs .obs-soucet { position: sticky; right: 0; z-index: 1; background: var(--plocha); min-width: 3.25rem;
                   padding: 0 8px; text-align: right; font-variant-numeric: tabular-nums;
                   border-left: 1px solid var(--ramecek-vyrazny); }
.obs thead .obs-soucet, .obs tfoot .obs-soucet { z-index: 3; background: var(--plocha-tlumena); }
.obs thead .obs-soucet { font-size: 10px; color: var(--text-tlumeny); vertical-align: bottom; padding-bottom: 4px; }

.obs .obs-den   { width: 20px; min-width: 20px; font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.obs-den a      { display: flex; flex-direction: column; align-items: center; padding: 3px 0; color: inherit;
                  text-decoration: none; }
.obs-den a:hover { background: var(--akce-plocha); color: var(--akce); }
.obs-zkratka    { font-size: 9px; color: var(--text-slaby); line-height: 11px; }
.obs .obs-tyden { width: 32px; min-width: 32px; }
.obs-tyden .obs-zkratka { white-space: nowrap; font-size: 8.5px; }

/* Nadpis skupiny přes celý řádek, jméno skupiny se ale lepí vlevo spolu s ostatními jmény. */
.obs-skupina th, .obs-skupina td { background: var(--plocha-vyplnena); }
.obs .obs-skupina .obs-jmeno { background: var(--plocha-vyplnena); font-size: 11px; font-weight: 600;
                               letter-spacing: .04em; text-transform: uppercase; color: var(--text-tlumeny); }

/* Střídavé řádky a zvýraznění pod myší (uživatel 22. 9. 2026 u seznamu lidí). Barevné buňky
   dovolené se při najetí nemění — nesou informaci, ne výzdobu. */
.obs tbody tr:nth-child(even) > .obs-jmeno,
.obs tbody tr:nth-child(even) > .obs-soucet { background: var(--plocha-tlumena); }
.obs tbody tr:hover > .obs-jmeno { background: var(--akce-plocha); color: var(--akce); }
.obs tbody tr:hover > td:not(.obs-dov):not(.obs-pul):not(.obs-ceka):not(.obs-volno):not(.obs-soucet) { background-color: var(--akce-plocha); }

.obs-dov        { background: var(--akce); }
/* Půl dne diagonálou: na první pohled jiné než celý den, a přitom pořád „dovolená“. */
.obs-pul        { background: linear-gradient(135deg, var(--akce) 50%, var(--akce-plocha) 50%); }
.obs-ceka       { background: var(--akce-plocha); box-shadow: inset 0 0 0 1px var(--akce); }
/* Víkend a svátek UVNITŘ schválené dovolené: světlejší, ať termín přes víkend vypadá jako jeden
   pruh, a přitom je poznat, že se tyhle dny nečerpají. */
.obs-volno      { background: color-mix(in srgb, var(--akce) 40%, var(--plocha)); }
.obs-vikend     { background: var(--plocha-vyplnena); color: var(--text-slaby); }
.obs-svatek     { background: var(--pozor-plocha); color: var(--pozor); }
.obs-dnes       { box-shadow: inset 2px 0 0 var(--pozor), inset -2px 0 0 var(--pozor); }

.obs-t1 { background: color-mix(in srgb, var(--akce) 18%, var(--plocha)); }
.obs-t2 { background: color-mix(in srgb, var(--akce) 36%, var(--plocha)); }
.obs-t3 { background: color-mix(in srgb, var(--akce) 55%, var(--plocha)); }
.obs-t4 { background: color-mix(in srgb, var(--akce) 78%, var(--plocha)); color: #fff; font-weight: 600; }
.obs-t5 { background: var(--akce); color: #fff; font-weight: 600; }
.obs tbody td[class^="obs-t"] { text-align: center; font-size: 10.5px; font-variant-numeric: tabular-nums; }

.obs tfoot th, .obs tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--plocha-tlumena);
                               border-top: 1px solid var(--ramecek-vyrazny); border-bottom: 0; }
.obs tfoot .obs-jmeno { font-weight: 600; font-size: 11.5px; }
.obs-pocet      { height: 24px; text-align: center; font-size: 10px; font-variant-numeric: tabular-nums;
                  color: var(--text-tlumeny); }

.obs-legenda    { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px;
                  font-size: 11.5px; color: var(--text-tlumeny); }
.obs-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.obs-vzorek     { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
/* Kalendář vozidel (žádanky): buňka s jízdou je odkaz na žádanku — celá plocha buňky, jinak by se do
   dvaceti pixelů nedalo trefit. Vozidla jsou tři řádky, ne sto lidí, proto rám bez minimální výšky. */
.obs td > .obs-odkaz { display: block; height: 24px; }
.obs-ram--nizky { min-height: 0; }

/* Okno jednoho dne. */
.obs-dlazdice   { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 10px; }
.obs-dlazdice-polozka { padding: 10px 12px; border: 1px solid var(--ramecek); border-radius: var(--radius);
                        background: var(--plocha-tlumena); font-size: 11.5px; }
.obs-dlazdice-polozka--pozor { background: var(--pozor-plocha); border-color: var(--pozor-plocha); color: var(--pozor); }
.obs-dlazdice-cislo { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.obs-dlazdice-polozka--pozor .obs-dlazdice-cislo { color: var(--pozor); }
.obs-stitky     { display: flex; flex-wrap: wrap; gap: 6px; }
.obs-stitek     { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--ok-plocha); color: var(--ok); }

@media (max-width: 560px) {
  .obs .obs-jmeno { min-width: 9rem; max-width: 9rem; }
}

/* Řádek „Mimo“ jako teplotní pás: čím víc lidí pryč, tím sytější. Čtyři stupně místo jedné hranice —
   jediná hranice „polovina a víc“ v prázdninách zbarvila celý řádek a nic neodlišila (22. 9. 2026). */
.obs .obs-mimo1, .obs-vzorek.obs-mimo1 { background: color-mix(in srgb, var(--pozor-plocha) 45%, var(--plocha)); }
.obs .obs-mimo2, .obs-vzorek.obs-mimo2 { background: var(--pozor-plocha); color: var(--pozor); }
.obs .obs-mimo3, .obs-vzorek.obs-mimo3 { background: color-mix(in srgb, var(--pozor) 30%, var(--pozor-plocha)); color: var(--pozor); font-weight: 600; }
.obs .obs-mimo4, .obs-vzorek.obs-mimo4 { background: color-mix(in srgb, var(--pozor) 60%, var(--pozor-plocha)); color: #fff; font-weight: 700; }

/* ------------------------------------------------------------ přihlášení -- */

/* Přihlašovací stránky bez lišty, jedna karta na střed (varianta B z návrhu 26. 9. 2026). První návrh měl
   šest samostatných bloků pod sebou a vedle kolegovy aplikace (jedna karta, málo textu) působil rozházeně. */
.prihlaseni-plocha { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column;
                     align-items: center; justify-content: center; gap: 14px; padding: 40px 16px; }
.prihlaseni-karta  { width: 100%; max-width: 420px; overflow: hidden; background: var(--plocha);
                     border: 1px solid var(--ramecek); border-radius: var(--radius-velky);
                     box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .07); }
/* Logo školy jako pruh přes celou šířku karty — naše logo je široký obdélník bez okrajů (3,2 : 1). Jiné logo
   (třeba čtvercový znak) se vejde celé, jen do nejvýš 160 px. */
.prihlaseni-logo   { display: block; width: 100%; height: auto; max-height: 160px; object-fit: contain; }
/* Seneca v medailonu, na hraně loga napůl; bez loga sedí v kartě nahoře. Výřez hlavy je samostatný
   soubor (img/seneca-hlava.jpg, 320 × 320, 47 kB): posouvání celé rytiny v CSS usekávalo vlasy
   a stahovalo 300 kB. */
.medailon          { display: block; box-sizing: border-box; width: 120px; height: 120px; margin: 28px auto 0;
                     overflow: hidden; border-radius: 50%; border: 4px solid var(--plocha);
                     background: var(--plocha-vyplnena);
                     box-shadow: 0 0 0 1px var(--ramecek), 0 2px 10px rgba(16, 24, 40, .16); }
.prihlaseni-logo + .medailon { margin-top: -60px; }
.medailon > img    { display: block; width: 100%; height: 100%; object-fit: cover; }
.prihlaseni-hlavicka { padding: 14px 32px 0; text-align: center; }
.prihlaseni-nazev  { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; }
.prihlaseni-skola  { font-size: 14px; color: var(--text-tlumeny); }
.prihlaseni-telo   { display: flex; flex-direction: column; align-items: center; gap: 20px;
                     padding: 20px 32px 28px; text-align: center; }
.prihlaseni-akce   { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.prihlaseni-oddelovac { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--ramecek); opacity: 1; }
.prihlaseni-pata   { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px;
                     font-size: 11px; color: var(--text-tlumeny); }
/* Na přihlašovací kartě zůstávají tichá tlačítka bez rámečku, jak byla od začátku (uživatel 15. 10. po .12: „udělej to tak, jak
   to vypadalo předtím“). Rámeček z .10 patří akcím vedle jiných tlačítek; tady stojí „jiný účet“ a „záložní přihlášení“ samy
   pod hlavním tlačítkem a jako odkazy se čtou dobře. */
.prihlaseni-akce .tlacitko--tichy, .prihlaseni-pata .tlacitko--tichy { border-color: transparent; }
/* Pole záložního přihlášení zůstávají zarovnaná vlevo i v kartě na střed. */
.prihlaseni-formular { width: 100%; text-align: left; }
.prihlaseni-formular .pole { max-width: none; }
@media (max-width: 480px) {
  .prihlaseni-hlavicka { padding-inline: 20px; }
  .prihlaseni-telo     { padding-inline: 20px; }
}

/* Velké tlačítko pro jedinou hlavní akci stránky: 44 px, aby se trefilo i prstem. */
.tlacitko--velke   { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
                     min-height: 44px; font-size: 14px; font-weight: 600; }
.tlacitko-ikona    { width: 18px; height: 18px; flex-shrink: 0; }

/* Citát ze Seneky (Sluzby/CitatySeneky.cs) — latinsky kurzívou, pod ním náš překlad a místo ve spisech. */
.citat             { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.citat-text        { margin: 0; font-family: var(--pismo-citat); font-size: 18px; font-style: italic; line-height: 1.3; }
.citat-popis       { font-size: 12.5px; color: var(--text-tlumeny); }
.latina            { font-family: var(--pismo-citat); font-style: italic; font-size: 1.1em; }

/* ------------------------------------------------------- školicí účty -- */

/* Panel běžící hodiny nad účty (Školicí účty, obrazovky 1 a 6): text a tlačítka v řádku, na úzké obrazovce pod sebou. */
.upozorneni--akce  { align-items: center; flex-wrap: wrap; }

/* Hesla na projektor (Školicí účty, obrazovka 3; docs/navrh-skolici-ucty.html, a14 a a22). Velké neproporcionální
   písmo, aby šlo z posledních lavic rozlišit znaky; generátor navíc vynechává 0/O a 1/l/I. Žádná jména lidí, žádné
   nabídky IS — stránka je bez lišty (ViewData „BezListy“ a „Plocha“ v _Layout). */
.promitani-plocha  { min-height: 100vh; box-sizing: border-box; padding: 16px; background: var(--pozadi); }
.promitani         { background: var(--plocha); border: 1px solid var(--ramecek-vyrazny); border-radius: var(--radius-velky);
                     padding: 18px 22px 22px; }
.promitani--spolecne { max-width: 44rem; }
/* Nové heslo jednomu účtu v okně: jen jedno heslo, bez rámečku projektoru. */
.promitani--okno   { border: 0; padding: 0; }
.promitani-hlavicka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
                     padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--ramecek); }
.promitani-titulek { font-size: 13px; color: var(--text-tlumeny); }
.promitani-mrizka  { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 0 32px; }
.promitani-par     { padding: 12px 0 10px; border-bottom: 1px solid var(--ramecek); }
.promitani-ucet    { font: 15px/1.3 var(--pismo-cisla); color: var(--text-tlumeny); overflow-wrap: anywhere; }
.promitani-heslo   { font: 600 clamp(22px, 3.2vw, 32px)/1.25 var(--pismo-cisla); color: var(--text); letter-spacing: .02em;
                     overflow-wrap: anywhere; }
.promitani-spolecne { font: 600 clamp(30px, 6vw, 56px)/1.2 var(--pismo-cisla); color: var(--text); letter-spacing: .03em;
                     margin: 14px 0 6px; overflow-wrap: anywhere; }

/* Tisk hesel (Školicí účty, uživatel 27. 9.: „připravit účty pro někoho dopředu“): lístečky k rozstříhání, jeden účet
   na lístek, přerušovaný okraj = kudy stříhat. Na papíře bez ovládání, bílé pozadí a dva sloupce. */
.tisk-hesel        { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 10px; }
.tisk-listek       { border: 1px dashed var(--ramecek-vyrazny); border-radius: var(--radius); padding: 10px 12px;
                     background: var(--plocha); break-inside: avoid; }
.tisk-listek-nadpis { font-size: 11px; color: var(--text-tlumeny); margin-bottom: 6px; }
.tisk-listek-radek { display: flex; gap: 8px; align-items: baseline; }
.tisk-listek-popis { width: 3.5rem; flex-shrink: 0; font-size: 11px; color: var(--text-tlumeny); }
.tisk-listek-hodnota { font: 600 16px/1.35 var(--pismo-cisla); color: var(--text); overflow-wrap: anywhere; }
@media print {
  .tisk-ovladani   { display: none !important; }
  .promitani-plocha { min-height: 0; padding: 0; background: #fff; }
  .tisk-hesel      { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .tisk-listek     { border-radius: 0; background: #fff; }
  .tisk-listek-hodnota { color: #000; }
}

/* Protokol o likvidaci (Majetek): pole Popis stavu stejně široké na každém řádku a dost široké na psaní (uživatel 4. 10., l08);
   popisky důvodů stejně široké, ať pole s textem začínají pod sebou. */
.pole.pole--popis     { min-width: 18rem; }
.duvod-popisek        { min-width: 17rem; display: inline-flex; gap: 6px; align-items: center; }

/* Bezpečnost → Přehled (2a, ba40): stav bezpečnosti ve třech dlaždicích nad „Co udělat teď“. Stav se značí okrajem dlaždice
   (--chyba = nepotvrzené kritické nebo řadič s problémem, --pozor = něco k potvrzení), číslo je hlavní, popisek pod ním. */
.stav-bezpecnosti         { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 10px; }
.stav-bezpecnosti-polozka { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--ramecek); border-radius: var(--radius);
                            background: var(--plocha); color: inherit; text-decoration: none; min-width: 0; }
.stav-bezpecnosti-polozka:hover { border-color: var(--akce); }
.stav-bezpecnosti-polozka--chyba { border-color: var(--chyba); box-shadow: inset 3px 0 0 var(--chyba); }
.stav-bezpecnosti-polozka--pozor { border-color: var(--pozor); box-shadow: inset 3px 0 0 var(--pozor); }
.stav-bezpecnosti-co      { font-size: 12px; color: var(--text-slaby); }
.stav-bezpecnosti-cislo   { font-size: 22px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--text); }
.stav-bezpecnosti-proc    { font-size: 12.5px; color: var(--text-tlumeny); }

/* Majetek → Štítky (zadání oddíl 17): okno s volbou osoby a varianty vedle sebe a virtuální arch štítků. Arch je tabulka, protože
   počet sloupců čte IS ze šablony (4 × 12 u archu školy) — mřížka s pevným počtem sloupců by se jinou šablonou rozbila.
   Zaškrtnuté místo = už použité (odlepené): přeškrtnuté a šedé; volná místa ukazují inventární číslo, které tam padne. */
.formular-stitku   { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 14rem); gap: 10px 24px; align-items: start; }
@media (max-width: 640px) { .formular-stitku { grid-template-columns: minmax(0, 1fr); } }
.arch-stitku       { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; }
.arch-stitku th    { width: 2.2rem; padding: 0; }
.arch-stitku td    { padding: 0; }
.arch-radek        { width: 100%; border: 0; background: none; color: var(--text-slaby); font-size: 11px; cursor: pointer; padding: 2px 0; }
.arch-radek:hover  { color: var(--akce); }
.arch-pozice       { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.2rem; margin: 0;
                     border: 1px dashed var(--ramecek-vyrazny); border-radius: 4px; background: var(--plocha); cursor: pointer;
                     font: 600 11px/1.2 var(--pismo-cisla); color: var(--text); overflow: hidden; }
.arch-pozice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.arch-pozice:focus-within { outline: 2px solid var(--akce); outline-offset: 1px; }
.arch-pozice:has(input:checked) { background: var(--plocha-vyplnena); border-style: solid; color: var(--text-slaby); }
.arch-pozice:has(input:checked) .arch-cislo::before { content: "použito"; font-family: var(--pismo); font-weight: 400; }
.arch-cislo        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }

/* ------------------------------------------------- Inventury: skenování v mobilu -- */
/* Etapa 4 (návrh docs/navrh-inventury-mobil.html, body mob01–mob09 odsouhlasené 15. 10. 2026). Uživatel na ostrém: „na desktopu ok,
   ale v mobilu kupa tlačítek“ — pod kamerou stála řada sedmi tlačítek, u každého kusu Je tu a výsledky se skládaly pod sebe.
   V ruce je teď jen to, co se dělá pořád (mířit, Načíst kód); ovládání kamery je v obraze, méně časté věci ve spodní liště na
   stálém místě, Je tu a Zadat číslo v panelu zespodu. Na monitoru zůstává stránka úzká — kamera 4:3 přes celou šířku by
   zabrala celou obrazovku. */
.skenovani         { max-width: 36rem; margin-inline: auto; }
.sken-hlavicka     { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
                     margin: -.5rem 0 .5rem; padding: 8px 0; background: var(--plocha); border-bottom: 1px solid var(--ramecek); }
.sken-zpet         { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -6px; flex: none; border-radius: 50%;
                     color: var(--text-tlumeny); text-decoration: none; font-size: 18px; }
.sken-zpet:hover   { background: var(--plocha-vyplnena); color: var(--text); }
.sken-misto        { flex: 1; min-width: 0; }
.sken-misto strong { display: block; font-size: 15px; line-height: 1.25; }
.sken-misto span   { display: block; font-size: 11.5px; color: var(--text-tlumeny); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sken-pocet        { flex: none; text-align: right; font-size: 12px; color: var(--text-tlumeny); font-variant-numeric: tabular-nums; }
.sken-pocet strong { color: var(--text); font-size: 14px; }
/* Bez signálu: kolik načtení čeká v paměti stránky (f21). Pilulka v hlavičce je vidět, i když člověk odroluje k seznamu. */
.sken-fronta       { display: block; width: fit-content; margin: 2px 0 0 auto; padding: 1px 7px; border-radius: 99px;
                     font-size: 10.5px; background: var(--pozor-plocha); color: var(--pozor); }

/* Ovládání kamery v obraze: přiblížení jedno tlačítko (klepnutí přepne 1× → 2× → 4× → 8×), svítilna, ⋯ s Jinou kamerou
   a Vypnout. Nápověda se proto stěhuje nahoru — dole jsou ovladače. */
.kamera-text--nahore    { top: 9px; bottom: auto; }
.kamera-ovladac         { position: absolute; z-index: 2; bottom: 10px; display: grid; place-items: center; min-width: 40px; height: 40px;
                          padding: 0 11px; border: 0; border-radius: 99px; background: rgba(20, 20, 18, .55); color: #fff;
                          font: 600 13px/1 var(--pismo); cursor: pointer; }
.kamera-ovladac svg     { width: 18px; height: 18px; }
.kamera-ovladac[aria-pressed="true"] { background: #f2f1ee; color: #26261f; }
.kamera-ovladac:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kamera-ovladac--zoom   { left: 10px; }
.kamera-ovladac--svetlo { right: 58px; }
.kamera-ovladac--vic    { right: 10px; }

/* Výsledky: vidět je jen poslední, starší po klepnutí „další N ›“ (dřív se skládaly pod sebe a odsouvaly seznam dolů). */
.sken-vysledky > .upozorneni { width: 100%; }
.sken-vysledky:not(.sken-vysledky--vse) > :not(:first-child) { display: none; }
.sken-starsi       { flex: none; align-self: center; margin-left: auto; padding: 0 0 0 6px; border: 0; background: none; color: inherit;
                     font-size: 11px; white-space: nowrap; text-decoration: underline; cursor: pointer; }

/* Zbývá / Nalezeno / Navíc jako záložky (přepínač přes celou šířku, .prepinac-tlacitka--sire; do 31. 10. 2026 pilulky) — jeden
   seznam místo tří pod sebou. */
.sken-zalozky        { margin-bottom: 8px; }

/* Řádek seznamu jako tlačítko (Zbývá najít → Je tu): celý řádek je cíl pro palec, šipka napoví, že se dá klepnout. */
button.seznam-radek--odkaz { width: 100%; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.seznam-sipka      { flex: none; color: var(--text-slaby); font-size: 16px; }

/* Spodní lišta: Zadat číslo · Bez štítku · Uzavřít — pořád na stejném místě, i když člověk roluje seznamem. */
.sken-lista        { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
                     margin: 12px 0 -.5rem; padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
                     background: var(--plocha); border-top: 1px solid var(--ramecek); }
.sken-lista--dve   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sken-lista .tlacitko { display: flex; align-items: center; justify-content: center; min-height: 40px; padding-inline: 4px; }

/* Na telefonu jdou hlavička, kamera a lišta od kraje ke kraji (container-fluid má po stranách .75rem). */
@media (max-width: 575.98px) {
  .sken-hlavicka, .kamera--sken, .sken-lista { margin-inline: -.75rem; padding-inline: .75rem; }
  .kamera--sken { padding-inline: 0; border-radius: 0; }
}

/* Panel zespodu (Je tu, Zadat číslo, Kus bez štítku): na telefonu okno vyjede odspodu pod palec. Do okna uprostřed se volby
   Je tu na mobilu nevešly (ostrý 15. 10.). Na širší obrazovce zůstává obyčejné okno. */
@media (max-width: 575.98px) {
  .modal--zespodu .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; }
  .modal--zespodu .modal-content { border: 0; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .modal--zespodu .modal-content::before { content: ""; display: block; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 99px;
                                           background: var(--ramecek-vyrazny); }
  .modal.fade.modal--zespodu .modal-dialog { transform: translateY(100%); }
  .modal.show.modal--zespodu .modal-dialog { transform: none; }
}

/* Volby pod sebou s popiskem (Je tu): velké cíle pro palec místo štítků vedle sebe. */
.volby--pod-sebou        { display: grid; gap: 7px; border: 0; overflow: visible; }
.volby--pod-sebou .volba { display: flex; align-items: center; gap: 10px; padding: 11px 12px; white-space: normal; font-size: 13px;
                           border: 1px solid var(--ramecek-vyrazny); border-radius: var(--radius-velky); }
.volby--pod-sebou .volba + .volba { border-left: 1px solid var(--ramecek-vyrazny); }
.volby--pod-sebou .volba::before  { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ramecek-vyrazny); }
.volby--pod-sebou .volba:has(input:checked) { background: var(--akce-plocha); border-color: var(--akce); color: var(--text); font-weight: 400; }
.volby--pod-sebou .volba:has(input:checked)::before { border-color: var(--akce); background: radial-gradient(var(--akce) 45%, transparent 50%); }
.volby--pod-sebou .volba small { display: block; font-size: 11px; color: var(--text-tlumeny); }

/* Moje místnosti po komisích (mob11): nad každou komisí řádek s názvem a budovou, pod ním s kým v ní jsem, vpravo kolik je hotovo.
   Hotové místnosti sbalené na konci komise (<details>) — dřív jeden smíchaný seznam, ve kterém člověk ve třech komisích nepoznal,
   co patří kam. */
.sken-skupina          { margin-bottom: 10px; }
.sken-skupina-hlava    { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 2px 5px; }
.sken-skupina-hlava strong { font-size: 13px; }
.sken-skupina-hlava small  { display: block; font-size: 11px; font-weight: 400; color: var(--text-tlumeny); }
.sken-skupina-pocet    { flex: none; font-size: 11.5px; color: var(--text-tlumeny); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sken-stitek-komise    { flex: none; padding: 1px 6px; border-radius: 99px; font-size: 10.5px; white-space: nowrap;
                         background: var(--plocha-vyplnena); color: var(--text-tlumeny); }
details.seznam-sbalene { border-top: 1px solid var(--ramecek); }
.seznam-sbalene > summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--text-tlumeny); }
.seznam-sbalene > summary::-webkit-details-marker { display: none; }
.seznam-sbalene[open] > summary .seznam-sipka { transform: rotate(90deg); }
.seznam-sbalene > .seznam-radek { border-top: 1px solid var(--ramecek); }
.seznam > details.seznam-sbalene:first-child { border-top: 0; }   /* jen hotové, nic nezačatého nad nimi */

/* ------------------------------------------------------- vlastní štítky -- */
/* Majetek → Štítky (20. 10. 2026, návrh ls01–ls14). Miniatura i plocha editoru jsou obraz tisku ze serveru (černá na bílé
   etiketě, body tiskárny) — proto bílá etiketa a zvětšení po bodech (pixelated), ne vyhlazené. */
.stitky-mrizka        { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 12px; }
.stitek-karta         { border: 1px solid var(--ramecek); border-radius: var(--radius-velky); background: var(--plocha); padding: 10px;
                        display: grid; gap: 8px; align-content: start; min-width: 0; }
.stitek-miniatura     { background: var(--plocha-vyplnena); border-radius: var(--radius); height: 8.5rem; display: grid; place-items: center; padding: 10px; }
/* max-height pevně, ne 100 %: v buňce mřížky s výškou podle obsahu se procento nepočítá a štítek na výšku přetekl (20. 10.). */
.stitek-miniatura img { max-width: 100%; max-height: calc(8.5rem - 20px); background: var(--etiketa); border-radius: 4px;
                        box-shadow: 0 1px 2px rgba(16, 24, 40, .22); image-rendering: pixelated; }
.stitek-nazev         { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.stitek-meta          { font-size: 12px; color: var(--text-tlumeny); line-height: 1.45; }
.stitek-akce          { display: flex; flex-wrap: wrap; gap: 6px; }

/* Editor: nahoře název, kotouček a orientace; vlevo pás etiket s plochou (obraz ze serveru + rámečky prvků na chytání),
   vpravo vlastnosti vybraného prvku. Rámečky a pás staví wwwroot/js/majetek-stitky.js — polohu v bodech obrazovky dává skript. */
.editor-stitku          { display: grid; gap: 12px; }
.editor-stitku-hlava    { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.editor-stitku-hlava .pole-skupina { margin-bottom: 0; }
.editor-stitku-telo     { display: grid; grid-template-columns: minmax(0, 1fr) 18.5rem; gap: 16px; align-items: start; }
@media (max-width: 700px) { .editor-stitku-telo { grid-template-columns: minmax(0, 1fr); } }
.editor-stitku-levy     { display: grid; gap: 8px; min-width: 0; }
.editor-stitku-nastroje { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.editor-stitku-nastroje .popisek { margin: 0 2px 0 0; }
.pas-stitku             { background: var(--plocha-vyplnena); border: 1px solid var(--ramecek); border-radius: var(--radius);
                          display: grid; place-items: center; overflow: hidden; min-height: 9rem; }
.pas-stitku--vysku      { padding-block: 14px; }
.pas-stitku-obsah       { display: flex; align-items: center; justify-content: center; }
.pas-stitku-obsah--sloupec { flex-direction: column; }
.soused-stitku          { background: var(--etiketa); opacity: .5; flex: none; }
.etiketa-stitku         { position: relative; flex: none; background: var(--etiketa); box-shadow: 0 1px 3px rgba(16, 24, 40, .25); }
.etiketa-stitku-obraz   { display: block; width: 100%; height: 100%; image-rendering: pixelated; border-radius: inherit; }
.prvek-stitku           { position: absolute; outline: 1px dashed transparent; cursor: move; touch-action: none; }
.etiketa-stitku:hover .prvek-stitku { outline-color: rgba(31, 111, 208, .45); }
.prvek-stitku--vybrany, .etiketa-stitku:hover .prvek-stitku--vybrany { outline: 1.5px solid var(--akce); }
.prvek-stitku--nevejde, .etiketa-stitku:hover .prvek-stitku--nevejde { outline: 1.5px dashed var(--chyba); }
.prvek-stitku:focus-visible { outline: 2px solid var(--akce); }
.prvek-stitku-duch      { display: block; width: 100%; height: 100%; image-rendering: pixelated; opacity: .85; }
.prvek-stitku-uchop     { position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; background: var(--plocha);
                          border: 1.5px solid var(--akce); border-radius: 2px; cursor: nwse-resize; display: none; touch-action: none; }
.prvek-stitku--vybrany .prvek-stitku-uchop { display: block; }
.voditko-stitku         { position: absolute; background: var(--akce); pointer-events: none; }
.voditko-stitku--svisle { top: 0; bottom: 0; width: 1px; }
.voditko-stitku--vodorovne { left: 0; right: 0; height: 1px; }
.editor-stitku-stav     { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; font-size: 12px; color: var(--text-slaby);
                          font-variant-numeric: tabular-nums; }
.editor-stitku-panel    { display: grid; gap: 10px; align-content: start; border: 1px solid var(--ramecek); border-radius: var(--radius);
                          padding: 12px; background: var(--plocha-tlumena); min-width: 0; }
.editor-stitku-panel .pole-skupina { margin-bottom: 0; }
.editor-stitku-panel .napoveda { margin-top: 0; }
.editor-stitku-panel textarea.pole { min-height: 52px; resize: vertical; }
.editor-stitku-nadpis   { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tlumeny); }
.editor-stitku-dvojice  { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: 8px; align-items: end; }
.editor-stitku-poloha   { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.editor-stitku-poloha .popisek { font-size: 11.5px; }
.editor-stitku-cipy     { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.editor-stitku-tlacitka { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Tisk v okně štítku (pravý sloupec místo vlastností): počet, číslování, první a poslední štítek jako obraz tisku. */
.editor-stitku-pravy     { display: grid; gap: 10px; align-content: start; min-width: 0; }
.tisk-stitku            { display: grid; gap: 10px; align-content: start; border: 1px solid var(--ramecek); border-radius: var(--radius);
                          padding: 12px; background: var(--plocha-tlumena); min-width: 0; }
.tisk-stitku-pole       { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.tisk-stitku-pole .pole-skupina { margin-bottom: 0; }
.tisk-stitku-nahledy    { display: flex; flex-wrap: wrap; gap: 16px; }
.tisk-stitku-nahledy figure { margin: 0; display: grid; gap: 4px; justify-items: start; }
.tisk-stitku-nahledy figcaption { font-size: 12px; color: var(--text-tlumeny); }
.tisk-stitku-nahled     { width: 15rem; max-width: 100%; background: var(--etiketa); border-radius: 4px;
                          box-shadow: 0 1px 3px rgba(16, 24, 40, .25); image-rendering: pixelated; }
.tisk-stitku-nahled--vysku { width: 7rem; }

/* ------------------------------------------------- informační obrazovky -- */
/* Obrazovky (docs/zadani-tv.md, 21. 10. 2026). Přehrávač televize má vlastní styl wwwroot/prehravac/prehravac.css (schválená
   výjimka tv19); tady jsou jen stránky IS: knihovna (karty štítků z Majetku s tmavou miniaturou 16 : 9 jako plátno televize),
   formulář položky, nahrání, pás sady, náhled a editor rozvržení (rámečky sekcí nad zmenšeným přehrávačem, podle náhledu 2
   v docs/navrh-tv.html). */
.stitek-miniatura--obrazovka     { background: var(--obrazovka-pozadi); padding: 0; height: auto; aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.stitek-miniatura--obrazovka img { max-width: 100%; max-height: 100%; background: none; border-radius: 0; box-shadow: none; image-rendering: auto; }
.stitek-karta--tlumena           { opacity: .62; }
/* Video v knihovně (etapa 4): značka s délkou v rohu náhledu — na první pohled jiné než plakát. */
.obrazovka-video-znacka { position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .72);
                          color: #FFFFFF; font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* pre-line: text oznámení přichází s konci řádků (FormatovanyText.NaText) — bez něj by se Entery slily do jednoho řádku (23. 10. 2026). */
.obrazovka-oznameni   { align-self: stretch; justify-self: stretch; margin: 10px; padding: 8px 10px; border-left: 4px solid #4C9BD6; color: #F1F4F8;
                        font-size: 12.5px; line-height: 1.45; white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
/* Oznámení v seznamu Obsahu jako malá karta z televize (22. 10. 2026). Dřív tenký odkaz a šedý začátek textu v řádku přes celou
   šířku — uživatel: „celkem trvalo si všimnout, že tam vlastně jedno oznámení je… není to moc kontrastní“. Barvy jako .obrazovka-oznameni. */
.oznameni-v-seznamu   { display: block; max-width: 34rem; padding: 7px 12px; border-left: 4px solid #4C9BD6; border-radius: var(--radius);
                        background: var(--obrazovka-pozadi); color: #F1F4F8; text-decoration: none; }
.oznameni-v-seznamu:hover, .oznameni-v-seznamu:focus-visible { color: #FFFFFF; outline: 2px solid var(--akce); outline-offset: 2px; }
.oznameni-v-seznamu-nazev { display: block; font-weight: 600; font-size: 14px; }
.oznameni-v-seznamu-text  { font-size: 12.5px; color: #C9D4E0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical; }
.obrazovka-nahled-polozky     { background: var(--obrazovka-pozadi); border-radius: var(--radius); aspect-ratio: 16 / 9; max-width: 28rem; display: grid;
                                place-items: center; overflow: hidden; }
.obrazovka-nahled-polozky img, .obrazovka-nahled-polozky video { max-width: 100%; max-height: 100%; }
.obrazovky-adresa     { overflow-wrap: anywhere; }

/* Formulář položky a dávky nahrání: název a text přes celou šířku, sady, platnost od a do vedle sebe, doba. Pevné sloupce — od
   a do patří k sobě (CLAUDE.md, formuláře). */
.formular-obsahu      { display: grid; grid-template-columns: 16rem 16rem 7rem; gap: 4px 16px; align-items: start;
                        grid-template-areas: "nazev nazev nazev" "text text text" "sady sady sady" "od do doba"; }
.formular-obsahu-nazev { grid-area: nazev; }
.formular-obsahu-text  { grid-area: text; }
.formular-obsahu-sady  { grid-area: sady; }
.formular-obsahu-od    { grid-area: od; }
.formular-obsahu-do    { grid-area: do; }
.formular-obsahu-doba  { grid-area: doba; }
@media (max-width: 640px) {
  .formular-obsahu { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nazev" "text" "sady" "od" "do" "doba"; }
}
.volby-sad            { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 4px 14px; }

.zona-nahrani         { border: 1.5px dashed var(--ramecek-vyrazny); border-radius: var(--radius-velky); padding: 12px 14px; display: grid; gap: 10px;
                        background: var(--plocha-tlumena); font-size: 13px; }
.zona-nahrani--nad    { border-color: var(--akce); background: var(--akce-plocha); }
.zona-hlava           { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.nahrani-seznam       { display: grid; gap: 6px; }
.nahrani-seznam:empty { display: none; }
.nahrani-radek        { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 9rem) minmax(0, 14rem); gap: 10px; align-items: center; font-size: 12.5px; }
.nahrani-radek span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pás sady (Sady, tv24): položky v pořadí s ◀ ▶ a Odebrat. */
.pas-sady             { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 10px; }
.pas-sady-polozka     { display: grid; gap: 4px; align-content: start; min-width: 0; }
.pas-sady-polozka .stitek-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Výběr z knihovny v okně sady: karta s náhledem, zaškrtávátkem a názvem; zaškrtnutá má rámeček. Dřív holé názvy se zaškrtávátky
   v mřížce — strany jednoho PDF („Plakát – strana 3“) podle názvu rozeznat nešlo (uživatel 21. 10.: „zmet názvů a checkboxů“). */
.pas-sady-volba       { display: grid; gap: 4px; align-content: start; min-width: 0; cursor: pointer; }
.pas-sady-volba .stitek-meta { display: flex; gap: 6px; align-items: center; min-width: 0; }
.pas-sady-volba .stitek-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pas-sady-volba:has(input:checked) .stitek-miniatura { outline: 3px solid var(--akce); outline-offset: 2px; }

.formular-parovani    { display: grid; grid-template-columns: 12rem 14rem 14rem auto; gap: 4px 14px; align-items: end; }
.formular-parovani .pole-skupina { margin-bottom: 0; }
.formular-parovani-tlacitka { padding-bottom: 1px; }
@media (max-width: 760px) { .formular-parovani { grid-template-columns: minmax(0, 1fr); } }
.formular-televize    { display: grid; grid-template-columns: repeat(2, 15rem); gap: 4px 16px; }
@media (max-width: 560px) { .formular-televize { grid-template-columns: minmax(0, 1fr); } }
/* Nový zápas (Obrazovky → Hry, 28. 10. 2026): strany A a B vedle sebe (patří k sobě), pod nimi pravidla Lodí; herní okno a odveta přes
   oba sloupce, „Kdy se hraje“ taky (nápověda pod ním je dlouhá). Pevné sloupce jako u ostatních formulářů — na širokém okně by se strany jinak rozjely od sebe. Moře a pravidlo po zásahu
   mají jen Lodě; u Tanků zmizí (výběr hry, :has). Obtížnost počítače (29. 10. 2026) pod stranou B a jen při „Počítač“ ve straně B. */
.formular-zapasu { display: grid; grid-template-columns: 15rem 15rem; column-gap: 16px; justify-content: start; align-items: start;
                   grid-template-areas: "hra zacatek" "a b" ". obtiznost" "more pravidlo" "kdy kdy" "okno okno" "odveta odveta" "tlacitka tlacitka"; }
.oblast-hra-zapasu      { grid-area: hra; }
.oblast-zacatek-zapasu  { grid-area: zacatek; }
.oblast-strana-a        { grid-area: a; }
.oblast-strana-b        { grid-area: b; }
.oblast-obtiznost-zapasu { grid-area: obtiznost; }
.oblast-more-zapasu     { grid-area: more; }
.oblast-pravidlo-zapasu { grid-area: pravidlo; }
.oblast-kdy-zapasu      { grid-area: kdy; }
.oblast-okno-zapasu     { grid-area: okno; }
.oblast-odveta-zapasu   { grid-area: odveta; }
.oblast-tlacitka-zapasu { grid-area: tlacitka; }
.formular-zapasu:has(select[name="Hra"] option[value="Tanky"]:checked) .jen-lode { display: none; }
.formular-zapasu:not(:has(select[name="StranaB"] option[value="pocitac"]:checked)) .jen-pocitac { display: none; }
@media (max-width: 560px) {
  .formular-zapasu { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hra" "zacatek" "a" "b" "obtiznost" "more" "pravidlo" "kdy" "okno" "odveta" "tlacitka"; }
}

/* Náhled televize: plátno 3840 × 2160 zmenšené transformací (přehrávač nastaví výšku kontejneru podle šířky). */
.nahled-tv            { position: relative; width: 100%; overflow: hidden; background: var(--obrazovka-pozadi); border-radius: var(--radius); }
/* Snímek obrazovky v okně televize (etapa 3a) — celý obrázek 16 : 9 na šířku okna, rámeček jako náhled. */
.snimek-obrazovky     { display: block; width: 100%; height: auto; background: var(--obrazovka-pozadi); border: 1px solid var(--ramecek);
                        border-radius: var(--radius); }
.nahled-tv:fullscreen { border-radius: 0; }

/* Obrazovky → Televize, Co televize ukazují (tp01–tp03, 26. 10. 2026): karta za televizi se zmenšenou plochou 16 : 9 a mřížkou
   12 × 24 jako v editoru rozvržení. Polohu sekcí nastaví site.js (data-poloha). Sady, které člověk smí upravit, svítí barvou modulu. */
.tv-karty             { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 12px; }
.tv-karta             { display: grid; gap: 6px; align-content: start; min-width: 0; background: var(--plocha); border: 1px solid var(--ramecek);
                        border-radius: var(--radius-velky); padding: 10px 12px 12px; }
.tv-karta-hlava       { display: flex; align-items: center; gap: 8px; }
.tv-karta-nazev       { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-karta-hlava .stav { margin-left: auto; }
.tv-schema            { aspect-ratio: 16 / 9; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(24, minmax(0, 1fr));
                        gap: 2px; padding: 3px; overflow: hidden; background: var(--obrazovka-pozadi); border-radius: var(--radius); }
.tv-schema-sekce      { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; padding: 1px 4px;
                        text-align: center; font-size: 11px; line-height: 1.2; font-style: italic; text-decoration: none; border-radius: 3px;
                        background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .62); }
.tv-schema-sekce--sada { font-style: normal; background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .9); }
.tv-schema-sekce--moje { font-style: normal; font-weight: 600; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
                         background: color-mix(in srgb, var(--modul-barva, var(--akce)) 72%, var(--obrazovka-pozadi)); }
a.tv-schema-sekce:hover, a.tv-schema-sekce:focus-visible { color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }
.tv-legenda           { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-slaby); }
.tv-legenda i         { display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; border-radius: 3px; }
.tv-legenda-moje      { background: color-mix(in srgb, var(--modul-barva, var(--akce)) 72%, var(--obrazovka-pozadi)); }
.tv-legenda-sada      { background: color-mix(in srgb, #FFFFFF 16%, var(--obrazovka-pozadi)); }
.tv-legenda-jine      { background: color-mix(in srgb, #FFFFFF 8%, var(--obrazovka-pozadi)); }

/* Editor rozvržení: vlevo plocha (přehrávač + mřížka + rámečky), vpravo vlastnosti vybrané sekce nebo rozvržení. */
.editor-tv            { display: grid; grid-template-columns: minmax(0, 1fr) 19.5rem; gap: 16px; align-items: start; }
@media (max-width: 860px) { .editor-tv { grid-template-columns: minmax(0, 1fr); } }
.editor-tv-levy       { display: grid; gap: 8px; min-width: 0; }
.editor-tv-nastroje   { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.editor-tv-nastroje .popisek { margin: 0 2px 0 0; }
.editor-tv-plocha     { min-height: 8rem; }
.editor-tv-mrizka     { position: absolute; inset: 0; pointer-events: none; z-index: 2;
                        background-image: linear-gradient(to right, rgba(128, 140, 152, .3) 1px, transparent 1px),
                                          linear-gradient(to bottom, rgba(128, 140, 152, .3) 1px, transparent 1px);
                        background-size: calc(100% / 12) calc(100% / 24); }
.editor-tv-vrstva     { position: absolute; inset: 0; z-index: 3; }
.editor-tv-box        { position: absolute; box-sizing: border-box; border: 2px solid rgba(140, 160, 180, .75); border-radius: 6px; cursor: move;
                        touch-action: none; background: rgba(31, 111, 208, .06); }
.editor-tv-box:hover  { border-color: var(--akce); }
.editor-tv-box:focus-visible { outline: 2px solid var(--akce); outline-offset: 1px; }
.editor-tv-box--vybrany, .editor-tv-box--vybrany:hover { border-color: var(--akce); box-shadow: 0 0 0 2px var(--akce); background: rgba(31, 111, 208, .2); }
.editor-tv-box--vypnuto { border-style: dashed; background: repeating-linear-gradient(45deg, rgba(140, 160, 180, .22) 0 6px, rgba(13, 26, 41, .35) 6px 12px); }
.editor-tv-box--koliduje, .editor-tv-box--koliduje:hover { border-color: var(--chyba); box-shadow: 0 0 0 2px var(--chyba); }
.editor-tv-box--vymena, .editor-tv-box--vymena:hover { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok); background: rgba(15, 110, 86, .22); }
.editor-tv-stitek     { position: absolute; left: 4px; top: 4px; max-width: calc(100% - 8px); font-size: 11px; line-height: 1.25; background: rgba(13, 26, 41, .86);
                        color: #FFFFFF; padding: 2px 6px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.editor-tv-uchop      { position: absolute; right: -7px; bottom: -7px; width: 13px; height: 13px; background: #FFFFFF; border: 2px solid var(--akce);
                        border-radius: 3px; cursor: nwse-resize; touch-action: none; display: none; box-sizing: border-box; }
.editor-tv-box--vybrany .editor-tv-uchop { display: block; }
.editor-tv-stav       { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; font-size: 12px; color: var(--text-slaby);
                        font-variant-numeric: tabular-nums; }
.editor-tv-hlaska     { font-size: 12.5px; color: var(--ok); min-height: 1.2em; }
.editor-tv-hlaska--chyba { color: var(--chyba); }
.editor-tv-panel      { display: grid; gap: 10px; align-content: start; border: 1px solid var(--ramecek); border-radius: var(--radius); padding: 12px;
                        background: var(--plocha-tlumena); min-width: 0; }
.editor-tv-panel .pole-skupina { margin-bottom: 0; }
.editor-tv-panel .pole:not(.pole--cislo):not(.pole--cas) { width: 100%; box-sizing: border-box; }
.editor-tv-panel .napoveda { margin: 0; }
.editor-tv-nadpis     { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tlumeny); }
.editor-tv-poloha     { display: grid; grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); gap: 6px; }
.editor-tv-poloha .pole--cislo { width: 100%; max-width: 5.5rem; box-sizing: border-box; }
.editor-tv-poloha .popisek { font-size: 11.5px; }
.editor-tv-tlacitka   { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.editor-tv-sada       { display: grid; gap: 8px; }
.editor-tv-pas        { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-tlumeny); }
.editor-tv-mini       { width: 4.4rem; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--obrazovka-pozadi); display: grid;
                        place-items: center; color: #F1F4F8; font-size: 10px; text-decoration: none; }
.editor-tv-mini img   { width: 100%; height: 100%; object-fit: cover; }
.editor-tv-mini--neplati { opacity: .45; }

/* Mapka učebny (bod 3b; náhled 11 v docs/navrh-zavady.html): mřížka tak, jak ji správce nakreslil v Excelu, prázdná buňka je
   ulička. Počet sloupců nese --sloupcu ze stránky (_MrizkaMapy) — rozměr z dat, ne vzhled. Široká učebna (VT2 má 11 sloupců)
   se na telefonu posouvá do strany ve vlastním rámečku, ne celá stránka. Stav počítače (Stanice → Učebna → Mapka) přebíjí
   barvu --pc, proto je níž. */
.mapka { display: grid; grid-template-columns: repeat(var(--sloupcu, 1), 2.6rem); gap: 5px; justify-content: start; overflow-x: auto;
         max-width: 100%; padding: 3px; }
.misto { height: 2.2rem; border-radius: 5px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
         white-space: nowrap; text-overflow: ellipsis; font-family: var(--pismo-cisla); font-size: 12px; color: var(--text); text-decoration: none;
         border: 1px solid transparent; }
a.misto:hover { text-decoration: none; filter: brightness(.96); }
a.misto:focus-visible { outline: 2px solid var(--akce); outline-offset: 1px; }
.misto--pc { background: var(--akce-plocha); color: var(--akce); border-color: color-mix(in srgb, var(--akce) 30%, var(--akce-plocha)); }
.misto--uc { background: var(--plocha-vyplnena); color: var(--text); border-color: var(--ramecek-vyrazny); font-weight: 600; }
.misto--znacka { background: var(--plocha); color: var(--text-tlumeny); border: 1px dashed var(--ramecek-vyrazny); font-family: inherit; font-size: 11px; }
.misto--prazdne { border: 1px dashed var(--ramecek); }
.misto--online { background: var(--ok-plocha); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--ok-plocha)); }
.misto--chyba { background: var(--chyba-plocha); color: var(--chyba); border-color: color-mix(in srgb, var(--chyba) 35%, var(--chyba-plocha)); }
.misto--nezjisteno { background: var(--plocha-vyplnena); color: var(--text-tlumeny); border-color: var(--ramecek); }
/* Místo, ke kterému v OU učebny počítač není (kontrola ex03): přerušovaně, ať je vidět, že mapka a AD nesedí. */
.misto--bez-pc { background: var(--plocha); color: var(--text-slaby); border: 1px dashed var(--ramecek-vyrazny); }
.misto--vybrane { outline: 2px solid var(--akce); outline-offset: 1px; }
/* Buňka jako volba formuláře (Závady: počítač na mapce). Radio je schované, ale dál ovladatelné klávesnicí; vybrané a fokus
   ukazuje buňka sama. */
.misto--volba { cursor: pointer; }
.misto--volba input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.misto--volba:has(input:checked) { outline: 3px solid var(--akce); outline-offset: 1px; font-weight: 700; }
.misto--volba:has(input:focus-visible) { outline: 2px dashed var(--akce); outline-offset: 2px; }
/* Otevřené poškození na počítači (Závady ex06): tečka v rohu, ať je vidět, co už je zapsané. */
.misto--zapis::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--pozor); }