:root{
  --pozadi:#f4f5f7; --panel:#ffffff; --ramecek:#dfe3e8; --text:#1d2430;
  --tlumene:#66707f; --hlavni:#1d6f42; --hlavni-tmavy:#155131;
  --cervena:#b3261e; --zluta:#8a6100; --modra:#1c5aa8;
  --cervena-poz:#fdecea; --zluta-poz:#fff6e0; --modra-poz:#eaf1fb; --zelena-poz:#e8f5ec;
}
@media (prefers-color-scheme: dark){
  :root{
    --pozadi:#15181d; --panel:#1d2127; --ramecek:#333a44; --text:#e6e9ee;
    --tlumene:#9aa4b2; --hlavni:#3f9e6a; --hlavni-tmavy:#2f7a51;
    --cervena:#ff8a80; --zluta:#ffcf70; --modra:#8ab6f0;
    --cervena-poz:#3a2321; --zluta-poz:#3a3021; --modra-poz:#1f2a3a; --zelena-poz:#1f3328;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--pozadi);color:var(--text);
  font:14px/1.5 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif}
h1{font-size:18px;margin:0}
h2{font-size:15px;margin:0 0 4px;letter-spacing:.2px}
h3{font-size:13px;margin:16px 0 6px;color:var(--tlumene);text-transform:uppercase;letter-spacing:.6px}
code{background:rgba(127,127,127,.15);padding:1px 5px;border-radius:4px;font-size:12.5px}

/* ---------------------------------------------------------- přihlášení */
/* PŘIHLAŠOVACÍ STRÁNKA SE MUSÍ VEJÍT I NA TELEFON. Tři věci, které to kazí:
   1. `100vh` na mobilu znamená výšku BEZ adresního řádku prohlížeče, takže
      skutečně viditelná plocha je menší — proto `100dvh` (a `100vh` jako
      záloha pro starší prohlížeče, které `dvh` neznají),
   2. svislé centrování přes `align-items:center` při vyšším obsahu URÍZNE
      VRŠEK a doscrollovat se k němu nedá; automatické okraje tohle nedělají —
      vystředí, když je místo, a jinak prostě začnou nahoře,
   3. výřez a spodní lišta telefonu (safe-area).
   Našel to uživatel na skutečném mobilu, ne test — snímky se do 17. 9. 2026
   dělaly jen na počítači. */
body.stred{display:flex;align-items:flex-start;justify-content:center;
  min-height:100vh;min-height:100dvh;padding:20px;
  padding-top:calc(20px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px))}
.prihlaseni{background:var(--panel);border:1px solid var(--ramecek);border-radius:12px;
  padding:28px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;
  margin-block:auto}
@media (max-height:640px){
  .prihlaseni{padding:18px}
  .logo-velke{font-size:30px}
}
.prihlaseni label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:12.5px}
.prihlaseni input{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--ramecek);
  border-radius:8px;background:var(--pozadi);color:var(--text)}
.logo-velke{font-size:40px;text-align:center}

/* ------------------------------------------------------------- hlavička */
.hlavicka{position:sticky;top:0;z-index:20;background:var(--panel);
  border-bottom:1px solid var(--ramecek);padding:10px 20px 0;
  display:flex;flex-direction:column;gap:8px}
.hlava-aplikace{display:flex;align-items:center;gap:12px}
.logo{font-size:26px}
.podtitul{color:var(--tlumene);font-size:12px;word-break:break-all}
.odhlasit{margin-left:auto}
.zalozky{display:flex;gap:4px;flex-wrap:wrap}
.zalozka{background:none;border:none;border-bottom:2px solid transparent;color:var(--tlumene);
  padding:8px 14px;font:inherit;cursor:pointer;border-radius:6px 6px 0 0}
.zalozka:hover{background:rgba(127,127,127,.1)}
.zalozka.aktivni{color:var(--text);border-bottom-color:var(--hlavni);font-weight:600}

main{padding:20px;max-width:1240px;margin:0 auto}
.panel.skryto,.skryto{display:none}
.blok{background:var(--panel);border:1px solid var(--ramecek);border-radius:10px;
  padding:16px 18px;margin-bottom:16px}
.napoveda{color:var(--tlumene);font-size:12.5px;margin:4px 0}
.prazdno{color:var(--tlumene);padding:24px;text-align:center}
.pocet{color:var(--tlumene);font-weight:400}

/* průběh instalace: kroky a výpis jako v terminálu */
.kroky-instalace{list-style:none;margin:10px 0;padding:0;display:grid;gap:4px}
.kroky-instalace .krok{display:flex;gap:9px;align-items:baseline;font-size:13px}
.kroky-instalace .krok-ik{width:16px;flex:none;text-align:center;color:var(--tlumene)}
.kroky-instalace .krok.ok .krok-ik{color:var(--hlavni)}
.kroky-instalace .krok.chyba{color:var(--cervena)}
.kroky-instalace .krok.chyba .krok-ik{color:var(--cervena)}
.kroky-instalace .krok.bezi{font-weight:600}
.vypis-instalace{max-height:260px}

.prepinac-hotove{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--tlumene);cursor:pointer;margin-left:6px}
.prepinac-hotove input{margin:0}

/* ------------------------------------------------ „něco se děje" (kolečko)
   Bez tohohle vypadá aplikace při každé akci, jako by nedělala nic — a to je
   podle pravidla č. 2 (žádná chyba ani čekání bez hlášky) chyba sama o sobě. */
@keyframes toci { to { transform: rotate(360deg) } }
.kolecko{display:inline-block;width:15px;height:15px;vertical-align:-2px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:toci .8s linear infinite;opacity:.75;flex:none}
.pracuje-radek{display:flex;gap:10px;align-items:flex-start}

/* náhled, nad kterým se právě pracuje: ztlumí se a běží přes něj kolečko */
.skenovna{position:relative}
.skenovna.pracuje .skenovna-obraz{opacity:.35;filter:grayscale(.4)}
.skenovna.pracuje::after{content:"";position:absolute;left:50%;top:40%;
  width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid var(--hlavni);
  border-right-color:transparent;border-radius:50%;animation:toci .8s linear infinite}

/* ---------------------------------------------- náhled dokladu (záložky) */
/* Sken a Originál jako dvě záložky, ne tři tlačítka s nejasným významem.
   Po nahrání je vidět Originál, jakmile vznikne sken, přepne se na něj. */
.nahled-zalozky{display:flex;gap:4px;align-items:center;margin-bottom:8px}
.nahled-zalozka{background:none;border:1px solid var(--ramecek);border-radius:7px;
  color:var(--tlumene);font:inherit;font-size:12.5px;padding:5px 12px;cursor:pointer}
.nahled-zalozka.aktivni{background:var(--zelena-poz);border-color:var(--hlavni);
  color:var(--text);font-weight:600}
.nahled-zalozka[disabled]{opacity:.45;cursor:not-allowed}
.nahled-plne{margin-left:auto;font-size:12px;color:var(--modra)}
.orez-vic > summary{cursor:pointer;font-size:12.5px;color:var(--tlumene);margin:10px 0 4px}
.orez > summary{cursor:pointer;font-weight:600;color:var(--modra);margin-top:14px}

/* ------------------------------------------------------------ fotoaparát */
.focak{text-align:center}
.focak-tlacitka{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.focak-tlacitka .tlacitko{flex:1 1 260px;max-width:420px}
.siroke{display:inline-block;padding:14px 28px;font-size:15px;cursor:pointer}

/* ---------------------------------------------------------------- karty */
.karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.karta{background:var(--panel);border:1px solid var(--ramecek);border-radius:10px;padding:14px 16px}
.karta .popisek{color:var(--tlumene);font-size:11.5px;text-transform:uppercase;letter-spacing:.6px}
.karta .hodnota{font-size:22px;font-weight:600;margin-top:4px}
.karta .pod{color:var(--tlumene);font-size:12px;margin-top:2px}

/* --------------------------------------------------------------- hlášky */
.hlaska{border-radius:8px;padding:11px 15px;margin-bottom:8px;border:1px solid transparent;font-size:13px}
.hlaska.chyba{background:var(--cervena-poz);border-color:var(--cervena);color:var(--cervena)}
.hlaska.varovani{background:var(--zluta-poz);border-color:var(--zluta);color:var(--zluta)}
.hlaska.info{background:var(--modra-poz);border-color:var(--modra);color:var(--modra)}
.hlaska.uspech{background:var(--zelena-poz);border-color:var(--hlavni);color:var(--hlavni)}
.hlaska-nadpis{font-weight:700;font-size:14px;margin-bottom:3px}
.hlaska-akce{margin-top:7px;padding-top:7px;border-top:1px solid currentColor;opacity:.92}

/* ------------------------------------------------------------- dlaždice */
.stitek{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:20px;margin-right:4px;
  border:1px solid currentColor;white-space:nowrap}
.stitek.dup{color:var(--cervena)} .stitek.pdf{color:var(--modra)}
.stitek.ph{color:var(--hlavni)} .stitek.ost{color:var(--tlumene)}
.stitek.vyrazeno{color:var(--zluta)} .stitek.omv{color:var(--modra)}
/* „nové" musí padnout do oka — je to jediný způsob, jak v dlouhém seznamu
   najít účtenku, kterou jsi právě nahrál (datum dokladu ji hodí doprostřed) */
.stitek.novy{background:var(--hlavni);color:#fff;border-color:var(--hlavni);
  font-weight:700;letter-spacing:.3px;margin-right:6px}

/* ------------------------------------------------- formulář, kroky, akce */
.radek-akci{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.formular{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:14px 0}
.formular label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:12.5px}
.formular input{font:inherit;font-weight:400;padding:9px 11px;border:1px solid var(--ramecek);
  border-radius:7px;background:var(--pozadi);color:var(--text)}
.formular input:focus{outline:2px solid var(--hlavni);outline-offset:-1px}
.formular small{font-weight:400;color:var(--tlumene);font-size:11.5px}


.kroky{margin:8px 0 0;padding-left:20px}
.kroky li{margin-bottom:5px}
.akce{background:var(--panel);border:1px solid var(--ramecek);border-radius:10px;padding:16px 18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;bottom:12px}
.tlacitko{font:inherit;padding:10px 22px;border-radius:8px;border:1px solid var(--ramecek);
  background:var(--panel);color:var(--text);cursor:pointer;font-weight:600}
.tlacitko:hover{border-color:var(--hlavni)}
.tlacitko.hlavni{background:var(--hlavni);border-color:var(--hlavni);color:#fff;padding:10px 34px}
.tlacitko.hlavni:hover{background:var(--hlavni-tmavy)}
.tlacitko.drobne{padding:5px 12px;font-weight:400;font-size:12.5px}
.tlacitko:disabled{opacity:.45;cursor:not-allowed}

/* --------------------------------------------------------------- průběh */
.odznak{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:rgba(127,127,127,.15)}
.odznak.bezi{background:var(--modra-poz);color:var(--modra)}
.odznak.hotovo{background:var(--zelena-poz);color:var(--hlavni)}
.odznak.chyba,.odznak.zastaveno{background:var(--cervena-poz);color:var(--cervena)}
.log{background:var(--panel);border:1px solid var(--ramecek);border-radius:10px;padding:10px 14px;
  max-height:62vh;overflow:auto;font-size:13px}
.zaznam{padding:5px 0;border-bottom:1px solid rgba(127,127,127,.12);display:flex;gap:10px}
.zaznam:last-child{border-bottom:none}
.zaznam .cas{color:var(--tlumene);font-size:11.5px;font-variant-numeric:tabular-nums;flex:0 0 58px}
.zaznam .telo{flex:1;min-width:0}
.zaznam .telo pre{margin:4px 0 0;padding:6px 8px;background:rgba(127,127,127,.1);border-radius:6px;
  font-size:11.5px;white-space:pre-wrap;word-break:break-word;max-height:150px;overflow:auto}
.zaznam.claude .telo{white-space:pre-wrap}
.zaznam.zapis .telo{color:var(--hlavni);font-weight:600}
.zaznam.chyba .telo{color:var(--cervena);font-weight:600}
.zaznam.hotovo .telo{color:var(--hlavni);font-weight:600}
.zaznam.krok .telo{font-weight:600}
.zaznam.nastroj .telo{color:var(--tlumene)}

/* -------------------------------------------------------------- tabulky */
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--tlumene);
  border-bottom:1px solid var(--ramecek);padding:6px 8px;position:sticky;top:0;background:var(--panel)}
td{padding:6px 8px;border-bottom:1px solid rgba(127,127,127,.12);vertical-align:top}
td.cislo{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.novy td{background:var(--zelena-poz)}
.tabulka-obal{max-height:60vh;overflow:auto;border:1px solid var(--ramecek);border-radius:8px;margin-top:8px}

#hledat{width:100%;padding:8px 12px;border:1px solid var(--ramecek);border-radius:8px;
  background:var(--pozadi);color:var(--text);font:inherit;margin:8px 0}

/* ------------------------------------------------------------ prohlížeč */
/* DVA PANELY, DVA POSUVNÍKY — ne tři přes sebe.
   Uživatel 17. 9. 2026: „účtenka není fitpage, tedy tam je scroll, potom detail
   s metadaty je scroll, celá stránka je scroll, takže ujíždí seznam, ke kterému
   ukazuješ detail." Měl pravdu: stránka se posouvala jako celek, takže při čtení
   detailu odjel seznam pryč a odkaz „vybraný doklad" ztratil smysl.
   Nově: na počítači se NEPOSOUVÁ STRÁNKA. Seznam i detail mají vlastní výšku
   podle okna a posouvají se každý zvlášť — seznam zůstane u detailu, který
   popisuje. Na telefonu tohle nedává smysl (úzko), tam se posouvá stránka. */
.prohlizec{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px}
.seznam{max-height:70vh;overflow:auto;border:1px solid var(--ramecek);border-radius:8px}
.seznam button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);
  font:inherit;padding:8px 10px;cursor:pointer;border-bottom:1px solid rgba(127,127,127,.12);word-break:break-word}
.seznam button:hover{background:rgba(127,127,127,.1)}
.seznam button.aktivni{background:var(--zelena-poz);font-weight:600}
/* Sken se VEJDE do rámečku (žádný třetí posuvník). Kdo chce číst drobný text,
   má nad náhledem tlačítka Zvětšit sken / Zobrazit originál. */

/* Na počítači drží panel Doklady výšku okna a posouvají se jen jeho části.
   `min-height:0` je nutné: bez něj se položka v gridu roztáhne podle obsahu
   a vlastní posuvník nikdy nevznikne. */
@media (min-width:821px){
  body.dva-panely{overflow:hidden}
  body.dva-panely main{max-width:1240px;margin:0 auto;padding:20px;
    height:calc(100dvh - var(--hlavicka, 108px));display:flex;flex-direction:column;min-height:0}
  body.dva-panely #panel-doklady{display:flex;flex-direction:column;min-height:0;flex:1}
  body.dva-panely #panel-doklady > .blok{flex:none}
  body.dva-panely .prohlizec{flex:1;min-height:0}
  body.dva-panely .seznam-dokladu,
  body.dva-panely .detail{height:100%;min-height:0}
  /* Horní část musí být úsporná, jinak na seznam a detail nezbude místo.
     Na širokém okně se tedy karty i blok focení zúží; na telefonu zůstávají
     velké, protože tam se posouvá stránka a místa je dost. */
  body.dva-panely .blok{padding:10px 14px;margin-bottom:10px}
  body.dva-panely .focak-tlacitka .tlacitko{padding:9px 18px;font-size:14px}
  body.dva-panely .karty{gap:8px;margin-bottom:10px}
  body.dva-panely .karta{padding:8px 12px;display:flex;align-items:baseline;gap:8px}
  body.dva-panely .karta .hodnota{font-size:17px;margin:0;order:2}
  body.dva-panely .karta .popisek{order:1}
  body.dva-panely .karta .pod{order:3;margin:0}
  /* Focení a kategorie na JEDEN řádek. Každý ušetřený pixel nahoře je pixel
     navíc pro účtenku dole — a ta je to, kvůli čemu se sem chodí. */
  body.dva-panely .blok.focak{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    padding:8px 12px}
  body.dva-panely .focak-tlacitka{flex:1 1 380px;margin:0}
  body.dva-panely .volba-kategorie{margin:0;flex:0 1 auto}
  body.dva-panely .focak .napoveda{display:none}
  body.dva-panely main{padding:14px 20px}

  /* Detail: hlavička pevně, pod ní dva sloupce na plnou výšku panelu.
     `min-height:0` je nutné, jinak by se sloupec roztáhl podle obsahu
     a vlastní posuvník by nikdy nevznikl. */
  body.dva-panely .detail{display:flex;flex-direction:column;overflow:hidden}
  body.dva-panely .detail > .detail-hlava{flex:none}
  body.dva-panely .detail-telo{flex:1;min-height:0;height:100%}
  body.dva-panely .detail-udaje{overflow:auto;min-height:0;height:100%;padding-right:6px}
  body.dva-panely .skenovna{min-height:0;height:100%}
  body.dva-panely .skenovna-obraz{flex:1;min-height:0;display:flex;
    align-items:flex-start;justify-content:center;overflow:hidden}
  /* schovaná záložka musí zůstat schovaná — `display:flex` výš by jinak
     přebilo `hidden` a ukázaly by se obě naráz */
  body.dva-panely .skenovna-obraz[hidden]{display:none}
  body.dva-panely .skenovna-obraz img{max-height:100%;max-width:100%;object-fit:contain}
  body.dva-panely .skenovna-obraz iframe{height:100%}
  body.dva-panely .skenovna > .orez{flex:none}

  /* ostatní záložky se chovají normálně – tam je posuv stránky v pořádku */
  body.dva-panely #panel-davky,
  body.dva-panely #panel-nastaveni{overflow:auto;min-height:0;flex:1}
}

/* ------------------------------------------------------------------ lupa */
.lupa{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:50;display:flex;
  align-items:center;justify-content:center;padding:36px}
.lupa.skryto{display:none}
.lupa-obsah{max-width:1000px;width:100%;max-height:100%;overflow:auto;text-align:center}
.lupa-nazev{color:#fff;margin-bottom:10px;font-size:13px;word-break:break-all}
.lupa img{max-width:100%;border-radius:8px;background:#fff}
.lupa iframe{width:100%;height:82vh;border:none;border-radius:8px;background:#fff}
.lupa-zavrit,.lupa-sip{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:none;
  cursor:pointer;border-radius:8px;font-size:22px;padding:8px 14px}
.lupa-zavrit{top:16px;right:20px}
.lupa-zavrit:hover,.lupa-sip:hover{background:rgba(255,255,255,.28)}

/* ------------------------------------------------------------- na mobilu */
@media (max-width:820px){
  main{padding:12px}
  .hlavicka{padding:8px 12px 0}
  .prohlizec{grid-template-columns:1fr}
  .seznam{max-height:220px}
  .blok{padding:13px 14px}
  /* DVĚ OBRAZOVKY NA TELEFONU: buď seznam, nebo detail. Detail pod seznamem
     se u dvou stovek dokladů nedá najít. */
  body.mobil-detail #varovani-bezpecnost,
  body.mobil-detail .seznam-dokladu,
  body.mobil-detail .blok.focak,
  body.mobil-detail .karty,
  body.mobil-detail .filtry,
  body.mobil-detail #nahravani{display:none}
  body.mobil-detail .detail{border:none;padding:0;background:none}

  /* PÍSMO NA TELEFONU JE VĚTŠÍ, JINAK SE TO NEDÁ ČÍST.
     Velikosti jsou vyladěné na monitor (12,5 px u nápověd), ale na displeji
     v ruce je to k nepřečtení — uživatel 18. 9. 2026: „na mobilu je vše tak
     malé, že to nepřečtu, pro mobil je aplikace nepoužitelná." Telefon proto
     dostane vlastní měřítko; kdo chce ještě větší, má přepínač v účtu. */
  /* DOTYK, NE MYŠ. Na telefonu se prstem netrefí nic nižšího než zhruba
     44 px — chipy a filtry měly 31 px a ťukalo se vedle. Tohle není kosmetika,
     tohle rozhoduje o tom, jestli je aplikace na mobilu použitelná. */
  .tlacitko,.chip,.filtr,.zalozka,.nahled-zalozka,.nast-polozka,
  .ucet-tl,.nk-zavrit,#zobrazit-hotove{min-height:44px}
  .chip,.filtr{padding:10px 16px;font-size:14.5px}
  .nahled-zalozka{padding:10px 16px}
  .prepinac-hotove{min-height:44px;display:flex;align-items:center}
  #zobrazit-hotove{width:22px;height:22px}
  .nk-zavrit{min-width:44px;font-size:22px}
  .radek{padding:12px}
  .ucet-nabidka button{min-height:46px}
  .ucet-pismo button{width:44px;height:44px}

  body{font-size:16px}
  .napoveda,.radek-popis,.udaje td,.udaje th,table,.kn-hlava .pop,
  .nk-vysledek,.nk-meta,.historie td{font-size:14.5px}
  .stitek,.radek-datum small,.karta .popisek,.nk-stav{font-size:12.5px}
  .radek-datum{font-size:14px}
  .radek-castka{font-size:15px}
  h1{font-size:20px} h2{font-size:17px} h3{font-size:13.5px}
  .tlacitko{padding:10px 15px;font-size:14.5px}
  .tlacitko.drobne{padding:8px 12px;font-size:13.5px}
  .zalozka{padding:10px 14px;font-size:16px}
  .filtr{padding:8px 14px;font-size:14px}
  .skupina{font-size:12.5px}
  .hlaska{font-size:14.5px}
  .hlaska-nadpis{font-size:15.5px}

  /* Na telefonu jsou souhrny na JEDNOM radku. Ctyri dlazdice pod sebou
     zabraly 200 px a uzivatel musel k dokladum scrollovat pres ne. */
  .karty{grid-template-columns:repeat(4,1fr);gap:6px}
  .karta{padding:8px 4px;text-align:center}
  .karta .popisek{font-size:9.5px;letter-spacing:.3px}
  .karta .hodnota{font-size:18px;margin-top:2px}
  .karta .pod{display:none}
  .akce{position:static;flex-direction:column;align-items:stretch}
  .akce .tlacitko{width:100%}
  .siroke{display:block;width:100%}
  .lupa{padding:10px}
  .tabulka-obal{max-height:none}
}

/* ===================================================== EVIDENCE DOKLADŮ */
.filtry{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.filtr{font:inherit;font-size:12.5px;padding:5px 14px;border-radius:20px;cursor:pointer;
  border:1px solid var(--ramecek);background:var(--panel);color:var(--tlumene)}
.filtr:hover{border-color:var(--hlavni)}
.filtr.aktivni{background:var(--hlavni);border-color:var(--hlavni);color:#fff;font-weight:600}

/* seznam vlevo, sken a údaje vpravo */
.prohlizec{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start}
/* Bez tohohle si polozka mrizky drzi svou "nejmensi rozumnou" sirku a na
   mobilu vystrci seznam ven z obrazovky (merene: 626 px pri okne 390). */
.prohlizec > *{min-width:0;max-width:100%}
.seznam-dokladu{border:1px solid var(--ramecek);border-radius:10px;background:var(--panel);
  overflow:auto}
.skupina{position:sticky;top:0;background:var(--pozadi);color:var(--tlumene);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.6px;padding:6px 12px;border-bottom:1px solid var(--ramecek);
  font-weight:600;z-index:1}
.radek{display:grid;grid-template-columns:78px 1fr auto;gap:8px;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid rgba(127,127,127,.12);align-items:start}
.radek:hover{background:rgba(127,127,127,.08)}
.radek.aktivni{background:var(--zelena-poz)}
.radek-datum{font-size:12.5px;font-variant-numeric:tabular-nums}
.radek-datum small{display:block;color:var(--tlumene);font-size:10.5px}
.radek-popis{font-size:13px;min-width:0;overflow-wrap:anywhere}
.radek-stitky{margin-top:3px;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.radek-castka{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;white-space:nowrap}
.radek-castka small{display:block;font-weight:400;color:var(--tlumene);font-size:10.5px}
/* kolecko s poctem problemu v seznamu - JINA vec nez hlavicka aplikace
   (drive se obe jmenovala .znacka a hlavicka kvuli tomu zmizela) */
.znacka{display:inline-block;min-width:17px;height:17px;line-height:17px;text-align:center;
  border-radius:9px;font-size:10.5px;font-weight:700;color:#fff;padding:0 5px}
.znacka.chyba{background:var(--cervena)} .znacka.varovani{background:var(--zluta)}
.odznak.prijato,.odznak.zpracovava{background:var(--modra-poz);color:var(--modra);
  font-size:10.5px;padding:1px 8px}
.odznak.chyba{background:var(--cervena-poz);color:var(--cervena);font-size:10.5px;padding:1px 8px}
.stav-odznak.maly{font-size:10.5px;padding:1px 8px;font-weight:600}

/* detail vpravo */
.detail{border:1px solid var(--ramecek);border-radius:10px;background:var(--panel);
  padding:16px 18px;overflow:auto}
/* Tlačítko „zpět na seznam" má smysl jen na telefonu, kde seznam ustoupí
   detailu. Na širokém okně je seznam pořád vidět vedle. */
.zpet-na-seznam{display:none}
@media (max-width:820px){ body.mobil-detail .zpet-na-seznam{display:inline-block;margin-bottom:10px} }
.detail-hlava{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
/* TĚLO DETAILU: vlevo čtení, vpravo účtenka.
   Účtenka je to hlavní — musí být vidět celá bez posouvání, proto má vlastní
   sloupec a obrázek se do něj vejde (`object-fit:contain`). Vlevo se posouvá
   text. Do 17. 9. 2026 to byly tři posuvníky vedle sebe a sken v nich malý. */
.detail-telo{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,38%);
  gap:18px;align-items:start}
.detail-udaje{min-width:0}
.skenovna{min-width:0;display:flex;flex-direction:column;gap:6px}
.udaje table{margin:0}
.udaje th{width:42%;text-align:left;font-size:12px;text-transform:none;letter-spacing:0;
  font-weight:400;color:var(--tlumene);position:static;padding:5px 8px 5px 0;border:none}
.udaje td{padding:5px 0;border:none;font-size:13px}
.udaje h3{margin-top:18px}
.poznamky{margin:6px 0 0;padding-left:18px;color:var(--tlumene);font-size:12.5px}
.poznamky li{margin-bottom:4px}

.skenovna-obraz{border:1px solid var(--ramecek);border-radius:8px;overflow:hidden;background:var(--pozadi);
  max-height:62vh;overflow-y:auto;cursor:zoom-in;text-align:center}
.skenovna-obraz img{width:100%;display:block}
.skenovna-obraz iframe{width:100%;height:60vh;border:none;background:#fff}
.orez{margin-top:12px;border:1px solid var(--ramecek);border-radius:8px;padding:10px 12px}
.orez summary{cursor:pointer;font-weight:600;color:var(--modra);list-style:none}
.orez summary::-webkit-details-marker{display:none}
.orez summary::before{content:"▸ "} .orez[open] summary::before{content:"▾ "}
.orez-volby{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0;align-items:flex-end}
.orez-volby label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600}
.orez-volby select{font:inherit;font-weight:400;padding:6px 8px;border:1px solid var(--ramecek);
  border-radius:6px;background:var(--pozadi);color:var(--text)}
.orez-volby .zaskrtnuti{flex-direction:row;align-items:center;gap:6px;font-weight:400}

@media (max-width:1100px){
  .detail-telo{grid-template-columns:1fr}
}
@media (max-width:820px){
  .prohlizec{grid-template-columns:1fr}
  /* Na telefonu se posouvá STRÁNKA — seznam nesmí mít vlastní posuvník
     uvnitř, jinak jsou zase dva přes sebe a prst neví, který chytil. */
  .seznam-dokladu{max-height:none;overflow:visible}
  /* prázdný detail pod seznamem na telefonu jen překáží */
  body:not(.mobil-detail) .detail:has(.prazdno){display:none}
  .detail{padding:12px 13px}
}

/* proklik z přehledu období do seznamu dokladů */
tr.klikaci{cursor:pointer}
tr.klikaci:hover td{background:var(--zelena-poz)}
td.sipka{color:var(--tlumene);font-size:18px;text-align:right;width:24px}
.stitek-obdobi{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:4px 8px 4px 12px;border-radius:20px;background:var(--modra-poz);color:var(--modra)}
.stitek-obdobi button{background:none;border:none;color:inherit;cursor:pointer;font-size:14px;
  line-height:1;padding:2px 4px;border-radius:50%}
.stitek-obdobi button:hover{background:rgba(127,127,127,.25)}

/* ===================================================== katalog konektorů */
.konektor{border:1px solid var(--ramecek);border-radius:9px;padding:13px 15px;margin-bottom:10px}
.konektor.vypnuty{opacity:.6}
.konektor-hlava{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.konektor .formular{margin:10px 0}
.k-vysledek{font-size:12.5px}
.k-vysledek.ok{color:var(--hlavni)}
.k-vysledek.chyba{color:var(--cervena)}

/* role a uživatelé */
.odhlasit{margin-left:10px}
.zaskrtnuti{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:400;margin-right:10px}
#uzivatele select{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--ramecek);
  border-radius:6px;background:var(--pozadi);color:var(--text)}

/* ================================================= workflow u dokladu */
.workflow{border:1px solid var(--ramecek);border-radius:9px;padding:12px 14px;margin:0 0 14px}
.workflow.nacita{color:var(--tlumene);font-size:12.5px}
.workflow-hlava{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.stav-odznak{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:20px;
  background:var(--modra-poz);color:var(--modra);white-space:nowrap}
.stav-odznak.konflikt{background:var(--cervena-poz);color:var(--cervena)}
.stav-odznak.bezi{background:var(--zluta-poz);color:var(--zluta)}
.stav-odznak.konecny{background:var(--zelena-poz);color:var(--hlavni)}
.workflow details{margin-top:10px}
.workflow summary{cursor:pointer;font-size:12.5px;color:var(--tlumene)}
table.historie{width:100%;border-collapse:collapse;margin-top:6px;font-size:12.5px}
table.historie td{padding:3px 8px 3px 0;border-bottom:1px solid var(--ramecek);vertical-align:top}

/* řádek do tabulky (sjetiny) ke zkopírování */
.vykaz-blok{background:var(--zelena-poz);border-radius:8px;padding:10px 12px;margin:8px 0}
.vykaz-radek{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:12.5px;
  background:var(--panel);border:1px solid var(--ramecek);border-radius:6px;
  padding:8px 10px;margin:6px 0;overflow-x:auto;white-space:pre;tab-size:12}

/* popis workflow v nastavení */
.wf-kategorie{border-left:3px solid var(--ramecek);padding-left:12px;margin:14px 0}
.wf-kategorie h3{margin-top:0;color:var(--text);text-transform:none;font-size:14px;letter-spacing:0}
.wf-cesta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 10px}
.wf-cesta .krok{font-size:12px;padding:4px 10px;border-radius:20px;background:var(--modra-poz);
  color:var(--modra);white-space:nowrap}
.wf-cesta .krok.konecny{background:var(--zelena-poz);color:var(--hlavni)}
.wf-cesta .krok.rucne{font-weight:600;border:1px solid currentColor}
.wf-cesta .sipka{color:var(--tlumene);font-size:12px}
.wf-jinak{font-size:12.5px;color:var(--tlumene);margin:4px 0 0}
.wf-jinak b{color:var(--text);font-weight:600}
.znacky-seznam{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.znacky-seznam code{font-size:11.5px;background:var(--pozadi);border:1px solid var(--ramecek);
  border-radius:5px;padding:1px 6px;font-family:ui-monospace,Consolas,monospace}
#workflow-prepinace .zaskrtnuti{display:flex;align-items:flex-start;gap:7px;margin:0 0 10px}
#workflow-prepinace small{display:block;color:var(--tlumene);font-size:12px;font-weight:400}

/* notifikace */
.notifikace{border:1px solid var(--ramecek);border-radius:9px;padding:13px 15px;margin-bottom:10px}
.notifikace.vypnuty{opacity:.6}
.notifikace .formular{margin:10px 0}
label.siroke{display:block;font-size:12.5px;font-weight:600;margin:8px 0}
label.siroke textarea{display:block;width:100%;box-sizing:border-box;font:inherit;font-weight:400;
  font-size:12.5px;padding:8px 10px;margin-top:4px;border:1px solid var(--ramecek);
  border-radius:8px;background:var(--pozadi);color:var(--text);resize:vertical}
.konektor select{font:inherit;font-weight:400;font-size:12.5px;padding:8px 10px;
  border:1px solid var(--ramecek);border-radius:8px;background:var(--pozadi);color:var(--text)}

/* ============================================ focení a průběh zpracování */
.volba-kategorie{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;margin:10px 0 4px}
.chip{font:inherit;font-size:12.5px;padding:5px 14px;border-radius:20px;cursor:pointer;
  border:1px solid var(--ramecek);background:var(--panel);color:var(--tlumene)}
.chip:hover{border-color:var(--hlavni)}
.chip.aktivni{background:var(--hlavni);border-color:var(--hlavni);color:#fff;font-weight:600}

#nahravani{display:grid;gap:8px;margin-top:12px;text-align:left}
.nahravani-karta{border:1px solid var(--ramecek);border-radius:9px;padding:10px 12px;background:var(--panel)}
.nahravani-karta.hotovo{border-color:var(--hlavni);background:var(--zelena-poz)}
.nahravani-karta.chyba{border-color:var(--cervena);background:var(--cervena-poz)}
/* duplicita není chyba — nic se nepokazilo, jen už to v evidenci je */
.nahravani-karta.duplicita{border-color:var(--zluta);background:var(--zluta-poz)}
/* chyba a duplicita: jeden řádek a křížek, ne pruh přes půl obrazovky */
.nahravani-karta.chyba .nk-vysledek,
.nahravani-karta.duplicita .nk-vysledek{font-size:12.5px;margin-top:2px}
/* přetažení souborů na stránku */
body.tahne-se{outline:3px dashed var(--hlavni);outline-offset:-6px}
.nk-zavrit{background:none;border:none;color:inherit;font-size:17px;line-height:1;
  cursor:pointer;opacity:.55;padding:0 2px;margin-left:6px}
.nk-zavrit:hover{opacity:1}
.nk-hlava{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.nk-nazev{font-weight:600;font-size:13px;word-break:break-all}
.nk-meta{color:var(--tlumene);font-size:11.5px}
.nk-stav{margin-left:auto;font-size:12.5px;white-space:nowrap}
.nk-pruh{height:6px;border-radius:3px;background:rgba(127,127,127,.18);overflow:hidden;margin-top:7px}
.nk-pruh i{display:block;height:100%;background:var(--hlavni);border-radius:3px;
  transition:width .25s ease;width:0}
/* když se neví, jak dlouho to potrvá, pruh se vlní — neslibuje procenta, která neznáme */
.nk-pruh.neurcity i{width:35%;animation:vlna 1.4s ease-in-out infinite}
@keyframes vlna{0%{margin-left:-35%}100%{margin-left:100%}}
.nk-vysledek{font-size:12.5px;margin-top:6px}
.nk-vysledek a{color:var(--modra);cursor:pointer;text-decoration:underline}
.radek-faze{color:var(--modra);font-size:11.5px;margin-top:2px}

/* ---------------------------------------------------- ruční oprava údajů */
.opravy{border:1px solid var(--ramecek);border-radius:9px;padding:10px 12px;margin:0 0 14px}
.opravy summary{cursor:pointer;font-weight:600;color:var(--modra);list-style:none}
.opravy summary::-webkit-details-marker{display:none}
.opravy summary::before{content:"✎ "}
.opravy .formular{margin:10px 0}
small.opraveno{color:var(--hlavni);font-weight:600}

/* ================================================ nastavení po oblastech */
/* Vlevo stromeček oblastí, vpravo obsah té vybrané — stejná stavba jako
   v ostatních aplikacích. Na úzké obrazovce se strom složí nad obsah. */
.nast-rozvrh{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.nast-strom{position:sticky;top:88px;display:flex;flex-direction:column;gap:8px}
.nast-strom input{font:inherit;font-size:13px;padding:9px 12px;border:1px solid var(--ramecek);
  border-radius:9px;background:var(--panel);color:var(--text);width:100%}
#nast-menu{display:flex;flex-direction:column;gap:2px;background:var(--panel);
  border:1px solid var(--ramecek);border-radius:10px;padding:6px;overflow:hidden}
.nast-polozka{display:flex;gap:9px;align-items:center;text-align:left;width:100%;
  background:none;border:none;border-left:3px solid transparent;color:var(--text);
  font:inherit;font-size:13px;padding:9px 10px;border-radius:7px;cursor:pointer}
.nast-polozka .ik{font-size:16px;line-height:1;flex:none}
.nast-polozka:hover{background:var(--zelena-poz)}
.nast-polozka.aktivni{background:var(--zelena-poz);border-left-color:var(--hlavni);font-weight:600}
/* technické oblasti (aktualizace, záznam, o aplikaci) jsou schválně nenápadnější */
.nast-polozka.system{color:var(--tlumene)}
.nast-polozka.system.aktivni{color:var(--text);border-left-color:var(--tlumene);
  background:rgba(127,127,127,.10)}

.karty-nastaveni{display:block;min-width:0}
.kn{background:var(--panel);border:1px solid var(--ramecek);border-radius:10px;overflow:hidden}
.kn.skryto{display:none}
.kn-hlava{padding:13px 16px;display:flex;gap:11px;align-items:flex-start;
  background:var(--zelena-poz);border-bottom:1px solid var(--ramecek)}
.kn.system .kn-hlava{background:rgba(127,127,127,.10)}
.kn-hlava .ik{font-size:20px;line-height:1.2;flex:none}
.kn-hlava b{font-size:14px}
.kn-hlava .pop{display:block;font-size:12.5px;color:var(--tlumene);margin-top:2px;font-weight:400}
.kn-telo{padding:14px 16px 18px}
.kn-telo > .napoveda:first-child{margin-top:0}
@media (max-width:820px){
  .nast-rozvrh{grid-template-columns:1fr}
  .nast-strom{position:static}
  #nast-menu{flex-direction:row;flex-wrap:wrap}
  .nast-polozka{width:auto;border-left:none;border-bottom:3px solid transparent;padding:8px 10px}
  .nast-polozka.aktivni{border-left-color:transparent;border-bottom-color:var(--hlavni)}
  .kn-hlava{padding:11px 12px}
  .kn-telo{padding:12px}
}

/* ------------------------------------------------ účet v hlavičce (vpravo) */
.ucet{margin-left:auto;position:relative}
.ucet-tl{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--ramecek);
  border-radius:20px;padding:4px 10px 4px 4px;font:inherit;font-size:13px;color:var(--text);cursor:pointer}
.ucet-tl:hover{background:var(--zelena-poz)}
.ucet-znak{width:26px;height:26px;border-radius:50%;background:var(--hlavni);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.ucet-sipka{color:var(--tlumene);font-size:11px}
.ucet-nabidka{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:230px;
  background:var(--panel);border:1px solid var(--ramecek);border-radius:10px;padding:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:2px}
.ucet-nabidka.skryto{display:none}
.ucet-hlava{font-size:12px;color:var(--tlumene);padding:6px 10px 8px}
.ucet-nabidka button{text-align:left;background:none;border:none;color:var(--text);font:inherit;
  font-size:13px;padding:9px 10px;border-radius:7px;cursor:pointer}
.ucet-nabidka button:hover{background:var(--zelena-poz)}
.ucet-nabidka hr{border:none;border-top:1px solid var(--ramecek);margin:4px 0}
@media (max-width:560px){ .ucet-jmeno{display:none} }

/* záznam běhu – čitelný i při dlouhých řádcích, ale stránku nerozšíří */
.zaznam-behu{margin:12px 0 0;max-height:420px;overflow:auto;background:var(--panel);
  border:1px solid var(--ramecek);border-radius:9px;padding:10px 12px;
  font:12px/1.5 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word;color:var(--text)}

/* ====================================== VELIKOST PÍSMA (volba uživatele)
   Aplikaci obsluhuje jeden člověk jednou za měsíc a nemusí mít nejlepší oči.
   Nápovědy a tabulky jsou schválně drobné, aby se na obrazovku vešlo víc —
   kdo potřebuje větší, přepne si to v účtu vpravo nahoře a volba se pamatuje.
   Neřeší se to lupou prohlížeče: ta zvětší i to, co zvětšit nepotřebuje. */
body.pismo-vetsi{font-size:16px}
body.pismo-vetsi .napoveda,
body.pismo-vetsi .radek-popis,
body.pismo-vetsi .udaje td,
body.pismo-vetsi .udaje th,
body.pismo-vetsi table{font-size:14.5px}
body.pismo-vetsi .stitek,
body.pismo-vetsi .radek-datum small,
body.pismo-vetsi .karta .popisek{font-size:12.5px}
body.pismo-vetsi .karta .hodnota{font-size:20px}
body.pismo-vetsi h1{font-size:21px}
body.pismo-vetsi h2{font-size:17px}

body.pismo-velke{font-size:18px}
body.pismo-velke .napoveda,
body.pismo-velke .radek-popis,
body.pismo-velke .udaje td,
body.pismo-velke .udaje th,
body.pismo-velke table{font-size:16.5px}
body.pismo-velke .stitek,
body.pismo-velke .radek-datum small,
body.pismo-velke .karta .popisek{font-size:14px}
body.pismo-velke .karta .hodnota{font-size:23px}
body.pismo-velke h1{font-size:24px}
body.pismo-velke h2{font-size:19px}
body.pismo-velke .tlacitko{padding:11px 16px}
body.pismo-velke .zalozka{padding:10px 16px;font-size:17px}

/* přepínač v nabídce účtu */
.ucet-pismo{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:13px;
  color:var(--tlumene)}
.ucet-pismo button{flex:none;width:30px;height:30px;padding:0;border:1px solid var(--ramecek);
  border-radius:7px;background:var(--panel);color:var(--text);cursor:pointer}
.ucet-pismo button.aktivni{border-color:var(--hlavni);background:var(--zelena-poz);font-weight:700}