/* =====================================================================
   ProEnergs — jeden súbor štýlov pre celý systém
   ---------------------------------------------------------------------
   RIESENIE.md, sekcia 6: sedem modulov nesmie vyzerať ako sedem
   programov od siedmich ľudí. Farby, písmo, tlačidlá, formuláre,
   karty a hlásenia sú definované TU a nikde inde. Modul si vlastné
   NEDEFINUJE — keď mu niečo chýba, doplní sa to sem.

   Dva princípy, ktoré držia celý vzhľad:

   1. PLÁŠŤ JE TICHÝ. Sivobiela, jedna firemná farba. Sýtu farbu nesie
      výhradne STAV ZÁZNAMU (čaká, odoslané, chyba, po uzávierke).
      Vďaka tomu sa v zozname dá stav prečítať bez čítania. Ak sa sem
      raz pridá zelené tlačidlo „Uložiť", tento princíp je mŕtvy.

   2. TERÉN PRED KANCELÁRIOU. Robotník to ovláda na svojom telefóne,
      vonku, na priamom slnku, občas v rukaviciach. Preto: vysoký
      kontrast, dotykové ciele aspoň 48 px a hlavná akcia je vždy
      najväčší prvok na obrazovke.

   Žiadne externé fonty, žiadne CDN — systém musí vyzerať rovnako
   aj na stavbe bez signálu.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Premenné
   --------------------------------------------------------------------- */

:root {
  /* --- plášť: sivobiela a jedna firemná farba --- */
  --plast:          #eef1f3;   /* pozadie stránky */
  --podklad:        #ffffff;   /* karty, hlavička, polia */
  --podklad-tlmeny: #f5f7f8;   /* jemne odlíšený pruh v karte */
  --text:           #10161c;   /* skoro čierna — čitateľné na slnku */
  --text-tlmeny:    #56626d;   /* popisky, druhoradé údaje */
  --ciara:          #d5dbe0;
  --ciara-vyrazna:  #b6c0c8;

  --firemna:        #1d5b8f;
  --firemna-tmava:  #16466d;   /* stlačené tlačidlo, odkazy pri prejdení */
  --firemna-svetla: #e7eff7;   /* podklad pod firemnou farbou */

  /* --- sýte farby: VÝHRADNE stav záznamu ---------------------------
     Nepoužívať na tlačidlá, nadpisy ani orámovanie kariet.          */
  --caka:           #8a5300;   --caka-podklad:     #fdf1de;
  --odoslane:       #14603a;   --odoslane-podklad: #e2f3e9;
  --chyba:          #97201c;   --chyba-podklad:    #fbe9e8;
  --uzavrete:       #414c56;   --uzavrete-podklad: #e9edf0;

  /* --- rozmery -----------------------------------------------------
     --dotyk je spodná hranica pre čokoľvek, do čoho sa ťuká prstom.
     Menšie ciele sa na telefóne v rukavici netrafia.                */
  --dotyk:        48px;
  --dotyk-hlavny: 62px;

  /* Výška VŠETKÉHO, do čoho sa ťuká v hlavičke: „Domov", zvonček, bublina
     stavu a „Odhlásiť sa".
     -----------------------------------------------------------------
     ⚠ JE TO JEDEN TOKEN, NIE ŠTYRI ČÍSLA. Zmerané 13. 10. 2026 na
     vykreslenej stránke: Domov 44 px, zvonček 40, bublina 40, tlačidlo
     40 — teda rad, v ktorom jedna vec trčí o štyri pixely. Keď výšku
     drží token, nemá sa to ako znova rozísť.

     ⚠ 44 px, hoci `--dotyk` je 48. Hlavička je trvalý pruh na vrchu
     každej obrazovky a na telefóne vysokom 640 px by 48 px prvky
     s odsadením dali 64 px, teda desatinu displeja na niečo, čo sa
     nečíta. 44 px je hodnota, ktorú si pre „Domov" zvolil tento súbor už
     predtým — a jeho komentár ju odôvodňuje ako najmenší cieľ, ktorý sa
     dá trafiť palcom v rukaviciach. Je to vedomá výnimka z `--dotyk`,
     nie opomenutie. */
  --hlavicka-prvok: 44px;
  --radius:       10px;
  --radius-maly:  6px;
  --medzera:      12px;
  --medzera-velka:20px;
  --sirka-obsahu: 60rem;

  --tien:       0 1px 2px rgba(16, 22, 28, .08);
  --tien-vyssi: 0 2px 8px rgba(16, 22, 28, .12);

  --pismo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
}


/* ---------------------------------------------------------------------
   2. Základ
   --------------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  /* Android inak na šírku zväčší písmo sám a rozbije rozloženie. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--plast);
  color: var(--text);
  font-family: var(--pismo);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }

a { color: var(--firemna); }
a:hover { color: var(--firemna-tmava); }

/* Viditeľné zameranie klávesnicou. Staršie prehliadače nepoznajú
   :focus-visible — tam zostane obyčajný :focus, čo je v poriadku. */
:focus { outline: 3px solid var(--firemna); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--firemna); outline-offset: 2px; }

.skryte { display: none !important; }

/* Čitateľné čítačkou obrazovky, neviditeľné okom. */
.len-pre-citacku {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------------
   3. Hlavička — jedna na všetkých obrazovkách všetkých modulov
      Názov modulu · kto je prihlásený · stav odosielania.
   --------------------------------------------------------------------- */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--podklad);
  border-bottom: 1px solid var(--ciara);
  box-shadow: var(--tien);
}

.hlavicka__pas {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--medzera);
  min-height: 56px;
}

.hlavicka__nazov {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hlavicka__modul {
  font-size: 1.02rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hlavicka__znacka { color: var(--firemna); }

.hlavicka__kto {
  font-size: .82rem;
  color: var(--text-tlmeny);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hlavicka__vpravo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Stav odosielania. Je to tlačidlo, lebo sa naň dá ťuknúť a dozvedieť
   sa viac — nie ozdoba. */
.stav-pripojenia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--hlavicka-prvok);
  padding: 6px 12px;
  border: 1px solid var(--ciara-vyrazna);
  border-radius: 999px;
  background: var(--podklad-tlmeny);
  color: var(--text-tlmeny);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.stav-pripojenia__bod { font-size: .95rem; line-height: 1; }

.stav-pripojenia--online   { color: var(--odoslane); border-color: var(--odoslane); background: var(--odoslane-podklad); }
.stav-pripojenia--offline  { color: var(--uzavrete); border-color: var(--ciara-vyrazna); background: var(--uzavrete-podklad); }
.stav-pripojenia--caka     { color: var(--caka);     border-color: var(--caka);     background: var(--caka-podklad); }
.stav-pripojenia--chyba    { color: var(--chyba);    border-color: var(--chyba);    background: var(--chyba-podklad); }

/* Vysvetlenie stavu po ťuknutí — celá veta, nie skratka. */
.stav-podrobnosti {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: 12px 14px 16px;
  border-top: 1px solid var(--ciara);
  background: var(--podklad-tlmeny);
  font-size: .9rem;
  color: var(--text-tlmeny);
}
.stav-podrobnosti strong { color: var(--text); }

/* ---------------------------------------------------------------------
   Zvonček v hlavičke
   ---------------------------------------------------------------------
   Berie si podobu od bubliny stavu vedľa seba (`.stav-pripojenia`) —
   rovnaká výška, rovnaké zaoblenie, rovnaký podklad. Je to zámer: obe sa
   ťukajú a obe otvárajú panel pod hlavičkou, takže majú vyzerať ako dve
   veci toho istého druhu, nie ako tlačidlo a ozdoba.

   NEMENÍ FARBU PODĽA STAVU, na rozdiel od bubliny. Farbu nesie ČÍSLO
   (`.odznak--caka` / `.odznak--chyba`) a zvonček zostáva tichý — inak by
   sa v hlavičke svietili dve veci naraz a človek by nevedel, na ktorú sa
   pozerať. Keď nie je čo, číslo je skryté a zvonček je len znak.
   --------------------------------------------------------------------- */
.zvoncek {
  display: inline-flex;
  align-items: center;
  /* 8 px, nie 6: medzi znakom a číslom je väčší optický odstup potrebný,
     lebo číslo je samostatná plôška. Bublina stavu má medzi bodkou
     a slovom 6 px a stačí jej to — bodka je drobná. */
  gap: 8px;
  min-height: var(--hlavicka-prvok);
  /* ⚠ ROVNAKÉ ODSADENIE AKO `.stav-pripojenia`. Zmerané 13. 10. 2026 na
     nasadenej stránke: zvonček mal `6px 10px`, bublina `6px 12px`
     a „Domov" `6px 14px` — tri rôzne odsadenia v jednom rade hlavičky.
     Na obrázku to vyzerá, že zvonček je stlačený medzi dvoma väčšími
     vecami. */
  padding: 6px 12px;
  border: 1px solid var(--ciara-vyrazna);
  border-radius: 999px;
  background: var(--podklad-tlmeny);
  color: var(--text-tlmeny);
  /* ⚠⚠ `font: inherit` BOLO TO HLAVNÉ, ČÍM ZVONČEK VYTŕČAL. Zdedil
     veľkosť stránky — zmerané 16 px / 400 — kým jeho susedia majú
     .85 rem / 600 (teda 13,6 px). Vedľa seba tak stáli dve chipsy
     s úplne inou mierkou písma. */
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* Prejdenie myšou: ten istý vzor ako `.tlacidlo--druhe:hover` — iba
   orámovanie a písmo, bez výplne. „Domov" sa pri prejdení celý zafarbí,
   ale ten je ODKAZ a je to jeho jediná spätná väzba; zvonček otvára
   panel pod sebou, takže hlavnú spätnú väzbu nesie ten panel. */
.zvoncek:hover { border-color: var(--firemna); color: var(--firemna); }

/* ⚠ OTVORENÝ ZVONČEK MÁ BYŤ VIDIEŤ. Panel sa otvára POD hlavičkou, cez
   celú šírku, takže sa z neho nedá prečítať, ČO ho otvorilo — a keď sú
   v hlavičke dve veci, ktoré otvárajú panel, človek nevie, ktorý práve
   číta. Stav sa berie z `aria-expanded`, ktorý tam už je kvôli čítačke
   obrazovky; druhá trieda na to isté by boli dva zdroje jednej pravdy.

   Bublina stavu to nedostala ZÁMERNE: tá mení farbu podľa stavu
   (zelená/jantárová/červená) a otvorený stav by sa s ňou pobil. Zvonček
   farbu stavu nenesie (viď hlavička), takže ju má voľnú. */
.zvoncek[aria-expanded="true"] {
  border-color: var(--firemna);
  background: var(--firemna-svetla);
  color: var(--firemna);
}

/* Znak nech je čitateľný aj na slnku s rukavicami — je to jediné, čo na
   zvončeku pri nule zostane. Veľkosť je rovnaká ako bodka v bubline
   stavu (`.stav-pripojenia__bod`, .95 rem), aby obe znamienka v hlavičke
   sedeli na jednej optickej čiare.

   ⚠ FARBU ZNAKU NEOVLÁDAME a netvárime sa, že áno: `🔔` je emoji
   a systém ho vykreslí vo svojej farbe bez ohľadu na `color`. Dá sa to
   obísť modifikátorom textovej podoby (`\FE0E`), ale Windows ho väčšinou
   ignoruje — sľubovať to by znamenalo tvrdiť vzhľad, ktorý na polovici
   telefónov nenastane. */
.zvoncek__znak { font-size: .95rem; line-height: 1; }

/* ---------------------------------------------------------------------
   Počet na zvončeku
   ---------------------------------------------------------------------
   ⚠ PLNÁ VÝPLŇ, NIE TÓNOVANÁ PLÔŠKA S ORÁMOVANÍM. Číslo dostáva
   z `ui.js` triedy `odznak odznak--caka` / `odznak--chyba`, teda podobu
   štítku stavu záznamu: 1 px orámovanie, svetlý podklad, 3×9 px
   odsadenie. Vnútri chipsy to dalo PRSTENEC V PRSTENCI — zmerané
   13. 10. 2026: štítok 25,6 px vysoký vnútri 40 px bubliny, s vlastným
   okrajom. V rade hlavičky to bola najhlučnejšia vec zo všetkých.

   Tónovaný podklad bez orámovania by bol druhý extrém: `--caka-podklad`
   (#fdf1de) na `--podklad-tlmeny` (#f5f7f8) je rozdiel, ktorý sa na
   slnku v rukaviciach neprečíta — a práve to je prevádzka tejto appky.

   Biele písmo na sýtej farbe v jazyku tejto stránky UŽ JE
   (`.tlacidlo--hlavne`), takže to nie je nový nápad, len jeho druhé
   použitie. Kontrast vychádza: biela na `--caka` (#8a5300) ≈ 6,5:1,
   na `--chyba` (#97201c) ≈ 8,4:1 — oboje nad hranicou 4,5:1.

   Kruh, nie obdĺžnik: `min-width` = výška, takže jednociferný počet je
   koliesko a dvojciferný sa roztiahne na pilulku. --------------------- */
/* Číslo pri položke v paneli je TEN ISTÝ DRUH VECI ako počet na zvončeku,
   takže vyzerá rovnako. Dovtedy to bol orámovaný štítok s HOLÝM ČÍSLOM —
   a `.odznak` je v tejto appke štítok STAVU záznamu, ktorý vždy nesie
   slovo („čaká", „na podpis"). Orámovaná plôška s „4" bez slova sa čítala
   ako štítok, ktorému chýba text.

   Čísla sú pritom rôzne: na zvončeku je SÚČET, v paneli počet za jednu
   položku. Rovnaká podoba hovorí „toto je počet", nie „toto je to isté
   číslo". */
/* ⚠ DVE TRIEDY V SELEKTORE, A NIE JE TO OZDOBA. `.odznak` stojí v tomto
   súbore NIŽŠIE, takže pri rovnakej váhe (0,1,0) by vyhral ON a vrátil by
   `padding: 3px 9px` aj orámovanie — teda presne ten prstenec v prstenci,
   ktorý sa tu ruší. `.odznak.zvoncek__pocet` je 0,2,0 a vyhráva bez
   ohľadu na poradie v súbore. Overené meraním na vykreslenej stránke, nie
   odhadom z čítania. */
.odznak.zvoncek__pocet,
.odznak.zvoncek__cislo {
  min-width: 20px;
  height: 20px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}
.odznak.zvoncek__pocet.odznak--caka,
.odznak.zvoncek__cislo.odznak--caka  { background: var(--caka);  color: #fff; }
.odznak.zvoncek__pocet.odznak--chyba,
.odznak.zvoncek__cislo.odznak--chyba { background: var(--chyba); color: #fff; }

/* Zoznam v paneli. Riadok je samostatná vec, ktorú si človek prečíta
   a ťukne na ňu — preto bez odrážok a s odstupom, nie zoznam na čítanie. */
.zvoncek__zoznam { list-style: none; margin: 0; padding: 0; }
.zvoncek__polozka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--ciara);
}
.zvoncek__polozka:first-child { border-top: 0; }
/* Prúžok vľavo, nie farba písma: „stav sa dá prečítať bez čítania" —
   ten istý vzor ako `.riadok--*` v zoznamoch záznamov. */
.zvoncek__polozka--naliehava {
  border-left: 3px solid var(--chyba);
  padding-left: 9px;
  margin-left: -12px;
}
.zvoncek__odkaz { color: var(--text); font-weight: 600; }
.zvoncek__nazov { color: var(--text); font-weight: 600; }
/* Veta pod položkou ide na vlastný riadok celou šírkou — je to
   vysvetlenie, nie štítok. */
.zvoncek__veta {
  flex: 1 1 100%;
  color: var(--text-tlmeny);
  font-size: .85rem;
}

/* ⚠ ZÚŽENIE NA ÚZKOM TELEFÓNE JE PRI BUBLINE STAVU, nie tu — zvonček má
   od 13. 10. 2026 ten istý zlom aj tú istú hodnotu ako ona
   (`@media (max-width: 559px)` nižšie v časti o hlavičke).

   Dovtedy tu stál vlastný zlom na 420 px s odsadením `6px 8px`, takže
   v rade hlavičky boli TRI rôzne zlomy a TRI rôzne odsadenia: bublina
   stavu sa zužovala pri 559 px na 10 px, „Domov" pri 520 px na 10 px
   a zvonček až pri 420 px na 8 px. Zmerané na telefóne širokom 360 px:
   Domov 10, zvonček 8, bublina 10 — zvonček bol o dva pixely tesnejší
   než obaja susedia práve tam, kde je miesta najmenej.

   Slovo „Domov" sa na úzkom telefóne naozaj skrýva (`@media
   (max-width: 520px)`), ale slovo „online" NIE — pravidlo na
   `.stav-pripojenia__text` v tomto súbore nie je ani raz. Predchádzajúce
   znenie tohto komentára tvrdilo oboje. */


/* ---------------------------------------------------------------------
   4. Rozloženie
   --------------------------------------------------------------------- */

.obal {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: var(--medzera-velka) 14px 48px;
}

/* Obrazovka na stred — prihlasovanie a podobné jednoúčelové stránky. */
.obal--stred {
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 26rem;
}

.usek { margin-bottom: 28px; }
.usek:last-child { margin-bottom: 0; }

/* Na mobile pod sebou — nadpis „Čo máte otvorené" sa inak láme
   vedľa poznámky do dvoch úzkych stĺpcov a zle sa číta. */
.usek__nadpis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 10px;
}
.usek__nadpis h2 { font-size: 1.05rem; }

.usek__poznamka { font-size: .85rem; color: var(--text-tlmeny); }

/* Veta pod nadpisom obrazovky. */
.podnadpis {
  margin: 6px 0 20px;
  color: var(--text-tlmeny);
  font-size: .95rem;
}

.karta {
  background: var(--podklad);
  border: 1px solid var(--ciara);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--tien);
}
.karta + .karta { margin-top: var(--medzera); }
.karta__nadpis { margin-bottom: 8px; }
.karta__popis  { color: var(--text-tlmeny); font-size: .9rem; }


/* ---------------------------------------------------------------------
   5. Formuláre
   --------------------------------------------------------------------- */

.pole { margin-bottom: 16px; }

.pole__popis {
  display: block;
  margin-bottom: 6px;
  font-size: .92rem;
  font-weight: 600;
}

.pole__vstup {
  display: block;
  width: 100%;
  min-height: var(--dotyk);
  padding: 12px 14px;
  border: 2px solid var(--ciara-vyrazna);
  border-radius: var(--radius-maly);
  background: var(--podklad);
  color: var(--text);
  font-family: inherit;
  /* 16 px zámerne: pri menšom písme si telefón pri ťuknutí do poľa
     sám priblíži stránku a používateľ potom hľadá tlačidlo. */
  font-size: 16px;
  line-height: 1.4;
}
.pole__vstup:focus { border-color: var(--firemna); }
.pole__vstup:disabled { background: var(--podklad-tlmeny); color: var(--text-tlmeny); }
.pole__vstup--chybne { border-color: var(--chyba); }

.pole__pomoc { margin-top: 6px; font-size: .82rem; color: var(--text-tlmeny); }
.pole__pomoc--odstup { margin-top: 16px; }


/* ---------------------------------------------------------------------
   6. Tlačidlá
      Plášť je tichý aj tu: hlavné tlačidlo je firemné, nie zelené.
   --------------------------------------------------------------------- */

.tlacidlo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--dotyk);
  padding: 12px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius-maly);
  background: var(--podklad);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tlacidlo--hlavne {
  background: var(--firemna);
  border-color: var(--firemna);
  color: #fff;
}
.tlacidlo--hlavne:hover  { background: var(--firemna-tmava); border-color: var(--firemna-tmava); color: #fff; }
.tlacidlo--hlavne:active { background: var(--firemna-tmava); }

.tlacidlo--druhe {
  background: var(--podklad);
  border-color: var(--ciara-vyrazna);
  color: var(--text);
}
.tlacidlo--druhe:hover { border-color: var(--firemna); color: var(--firemna); }

.tlacidlo--tiche {
  min-height: 40px;
  padding: 8px 10px;
  border-color: transparent;
  background: transparent;
  color: var(--firemna);
  font-weight: 600;
}

/* Hlavná akcia obrazovky. Musí byť najväčší prvok, ktorý na nej je. */
.tlacidlo--velke {
  width: 100%;
  min-height: var(--dotyk-hlavny);
  font-size: 1.12rem;
}

.tlacidlo[disabled],
.tlacidlo[aria-disabled="true"] {
  opacity: .55;
  cursor: default;
  pointer-events: none;
}

.tlacidla-rad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--medzera);
}
.tlacidla-rad .tlacidlo { flex: 1 1 12rem; }


/* ---------------------------------------------------------------------
   7. Dlaždice rozcestníka
   --------------------------------------------------------------------- */

.mriezka {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--medzera);   /* staršia podoba `gap`, kvôli starým telefónom */
  gap: var(--medzera);
}

.dlazdica {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 88px;
  padding: 16px 18px;
  border: 2px solid var(--ciara);
  border-radius: var(--radius);
  background: var(--podklad);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--tien);
}
a.dlazdica:hover {
  border-color: var(--firemna);
  box-shadow: var(--tien-vyssi);
  color: var(--text);
}

.dlazdica__nazov { font-size: 1.08rem; font-weight: 700; }
.dlazdica__popis { font-size: .88rem; color: var(--text-tlmeny); }

/* Hlavná akcia robotníka — zámerne najväčší prvok na obrazovke. */
.dlazdica--hlavna {
  min-height: 116px;
  border-color: var(--firemna);
  border-width: 2px;
}
.dlazdica--hlavna .dlazdica__nazov { font-size: 1.3rem; }

/* Modul, ktorý ešte nebeží. Nie je to odkaz a nedá sa naň ťuknúť —
   mŕtvy odkaz je horší než čestná informácia. Šedivá, nie sýta:
   sýtu farbu má vyhradenú stav záznamu, nie pripravenosť modulu. */
.dlazdica--pripravuje {
  border-style: dashed;
  border-color: var(--ciara-vyrazna);
  background: var(--podklad-tlmeny);
  box-shadow: none;
  cursor: default;
}
.dlazdica--pripravuje .dlazdica__nazov { color: var(--text-tlmeny); }

/* Otvorená položka — prevzaté auto alebo stroj. Sýta farba je tu
   namieste: je to STAV ZÁZNAMU (niečo mám a treba to vrátiť), nie
   pripravenosť modulu. Zámerne vyššia než bežná dlaždica — je to prvá
   vec, ktorú má vodič po príchode vidieť. */
.dlazdica--otvorene {
  min-height: 104px;
  border-color: var(--firemna);
  background: var(--podklad);
}
.dlazdica--otvorene .dlazdica__nazov { font-size: 1.2rem; }

/* Čo sa stane po ťuknutí. Rukavice a slnko: text, nie samotná šípka. */
.dlazdica__akcia {
  margin-top: 6px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--firemna);
}

.dlazdica__hlavicka {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}


/* ---------------------------------------------------------------------
   8. Stav záznamu — jediné miesto v systéme so sýtou farbou
   --------------------------------------------------------------------- */

.odznak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.odznak--caka     { color: var(--caka);     background: var(--caka-podklad);     border-color: var(--caka); }
.odznak--odoslane { color: var(--odoslane); background: var(--odoslane-podklad); border-color: var(--odoslane); }
.odznak--chyba    { color: var(--chyba);    background: var(--chyba-podklad);    border-color: var(--chyba); }
.odznak--uzavrete { color: var(--uzavrete); background: var(--uzavrete-podklad); border-color: var(--uzavrete); }

/* Nie je to stav záznamu, preto je tichý. */
.odznak--pripravuje {
  color: var(--text-tlmeny);
  background: var(--podklad);
  border-color: var(--ciara-vyrazna);
  border-style: dashed;
}

/* Farebný prúžok na kraji riadku v zozname — stav sa dá prečítať
   bez čítania, aj keď je odznak mimo obrazovky. */
.riadok--caka     { border-left: 5px solid var(--caka); }
.riadok--odoslane { border-left: 5px solid var(--odoslane); }
.riadok--chyba    { border-left: 5px solid var(--chyba); }
.riadok--uzavrete { border-left: 5px solid var(--uzavrete); }


/* ---------------------------------------------------------------------
   9. Hlásenia
      Chyba je veta pre človeka, nie kód. Preto má priestor a nie je
      to jednoriadkový pruh pod poľom.
   --------------------------------------------------------------------- */

.hlasenie {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--ciara);
  border-left-width: 5px;
  border-radius: var(--radius-maly);
  background: var(--podklad-tlmeny);
  font-size: .95rem;
}
.hlasenie__znak { flex-shrink: 0; font-weight: 700; }
.hlasenie__text { min-width: 0; }

.hlasenie--chyba { color: var(--chyba); background: var(--chyba-podklad); border-color: var(--chyba); }
.hlasenie--caka  { color: var(--caka);  background: var(--caka-podklad);  border-color: var(--caka); }
.hlasenie--dobre { color: var(--odoslane); background: var(--odoslane-podklad); border-color: var(--odoslane); }
.hlasenie--info  { color: var(--text-tlmeny); border-color: var(--ciara-vyrazna); }


/* ---------------------------------------------------------------------
   10. Zoznamy a údajové riadky
   --------------------------------------------------------------------- */

.zoznam { list-style: none; margin: 0; padding: 0; }

.zoznam__polozka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--medzera);
  padding: 12px 14px;
  border: 1px solid var(--ciara);
  border-radius: var(--radius-maly);
  background: var(--podklad);
}
.zoznam__polozka + .zoznam__polozka { margin-top: 8px; }

.udaje { margin: 0; }
.udaje__riadok {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--medzera);
  padding: 9px 0;
  border-bottom: 1px solid var(--ciara);
  font-size: .93rem;
}
.udaje__riadok:last-child { border-bottom: 0; padding-bottom: 0; }
.udaje__popis { color: var(--text-tlmeny); }
.udaje__hodnota { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* Vysvetľujúci odsek so štítkom — „jeho poznámka: …", „čo systém
   poznamenal pri tomto pípnutí: …", „dôvod: …".
   ---------------------------------------------------------------------
   ⚠ JE TO INÁ VEC NEŽ `.udaje__riadok` NAD TÝMTO a nesmie sa s ňou
   zliať. Ten je dvojica popis/hodnota na jednom riadku, s hodnotou
   vpravo a tučne — pre KRÁTKE hodnoty („Kto: Hudák"). Tento je VETA,
   často celá od servera, a vpravo zarovnaná tučná veta sa nečíta.

   ⚠⚠ PRESUNUTÉ Z `web/admin/sprava.css` (13. 10. 2026), kde to bolo
   `.sp-zmena` / `.sp-zmena__pole`. Dôvod presunu: tie isté odseky kreslí
   od toho dňa aj `/upozornenia/`, a tá obrazovka `sprava.css` NENAČÍTAVA
   — vety by na nej stáli bez štýlu. Kópia pravidla v druhom súbore by
   bola horšia: raz by sa jedna z nich zmenila a dve obrazovky by tú istú
   vetu kreslili rôzne. Premenované preto, že prefix `sp-` znamenal
   „správa" a toto už nie je len jej.

   `word-break` je tam na dlhý reťazec bez medzier (v histórii zmien aj
   JSON), ktorý by inak roztiahol celú stránku do šírky. */
.vysvetlenie {
  margin: 6px 0 0;
  font-size: .85rem;
  color: var(--text-tlmeny, #56626d);
  overflow-wrap: break-word;
  word-break: break-word;
}

.vysvetlenie__stitok { font-weight: 600; color: var(--text, #10161c); }

/* Prázdny úsek, ktorý sa naplní, keď modul vznikne. */
.prazdne {
  padding: 18px;
  border: 1px dashed var(--ciara-vyrazna);
  border-radius: var(--radius);
  background: var(--podklad-tlmeny);
  color: var(--text-tlmeny);
  font-size: .92rem;
}

.pata {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--ciara);
  color: var(--text-tlmeny);
  font-size: .82rem;
}


/* ---------------------------------------------------------------------
   11. Počítač a tablet
       Nie „zmenší sa to na mobile", ale dva režimy toho istého
       rozhrania. Mobil je východisko, toto je nadstavba.
   --------------------------------------------------------------------- */

@media (min-width: 560px) {
  .mriezka--dve  { grid-template-columns: 1fr 1fr; }
  .mriezka--tri  { grid-template-columns: 1fr 1fr; }

  .usek__nadpis {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--medzera);
  }
}

/* Úzky telefón. Na 375 px sa „ProEnergs · Rozcestník", meno, stav
   odosielania a odhlásenie do jedného riadku nezmestia — a keď sa
   niečo musí stratiť, nech je to značka. Používateľ vie, v akom
   systéme je; potrebuje vedieť, na ktorej obrazovke je. */
/* ⚠ ZNAČKA SA ZJAVÍ AŽ TAM, KDE SA ZMESTÍ — pri 639 px, nie 559.
   Zmerané 13. 10. 2026: pri 559 px bola hlavička na jednom riadku, pri
   560 na dvoch a pri 620 zase na jednom. Spôsobila to práve táto hranica:
   nad ňou sa k názvu modulu pridá „ProEnergs · ", názov sa predĺži
   o ~60 px a pás sa zalomí — hoci o šesťdesiat pixelov ďalej sa už
   zmestí. Rozširovanie okna teda rad raz zalomilo a potom zase narovnalo.

   639 px je spočítané z najhoršieho prípadu: značka a najdlhší názov
   („ProEnergs · Zamestnanecký portál") potrebujú ~250 px, pravá skupina
   294 px, odsadenie pásu 28 px a medzera 12 px — spolu 584 px. */
@media (max-width: 639px) {
  .hlavicka__znacka,
  .hlavicka__oddelovac { display: none; }
}

@media (max-width: 559px) {
  .hlavicka__pas { padding: 6px 12px; gap: 8px; }
  .hlavicka__modul { font-size: .98rem; }
  /* Mimo hlavičky zostáva tiché tlačidlo také, aké bolo — má 63 použití
     v desiatich súboroch a tento zlom sa ich týka tiež. Zúženie SAMOTNEJ
     hlavičky je o kus nižšie, za definíciami jej štyroch prvkov — dôvod
     je tam. */
  .tlacidlo--tiche { padding: 8px 6px; }
}

@media (min-width: 860px) {
  :root { --medzera: 14px; }
  .hlavicka__pas { padding: 8px 24px; }
  .obal { padding: 28px 24px 64px; }
  h1 { font-size: 1.7rem; }
  .mriezka--tri { grid-template-columns: 1fr 1fr 1fr; }
  .dlazdica--hlavna { min-height: 140px; }
  /* V kancelárii sa netrafuje prstom — tlačidlo nemusí mať šírku obrazovky. */
  .tlacidlo--velke { width: auto; min-width: 16rem; }
  .obal--stred .tlacidlo--velke { width: 100%; }
}

/* Telefón na priamom slnku. Ak si používateľ zapol vyšší kontrast,
   systém mu ho dá — nie je to náš estetický názor. */
@media (prefers-contrast: more) {
  :root {
    --text: #000;
    --ciara: #7b868f;
    --ciara-vyrazna: #4a545d;
    --firemna: #123f63;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Domov v hlavičke -------------------------------------------------
   Odkaz na rozcestník, na každej obrazovke okrem samotného rozcestníka.
   Vykresľuje ho `vykresliHlavicku()` v spolocne/ui.js.

   VYZERÁ AKO TLAČIDLO, a je to zámer. Prvý pokus bol holý text vedľa
   zelenej bubliny „online" — zadávateľ sa naň pozeral a nenašiel ho.
   Odkaz, ktorý nevyzerá ako niečo, na čo sa dá ťuknúť, na obrazovke
   plnej iných vecí jednoducho zanikne. Tvar aj rozmer si preto berie
   od bubliny stavu vedľa: dve veci rovnakej váhy, na ktoré sa dá ťuknúť. */
.hlavicka__domov {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Výšku aj odsadenie drží token spoločný pre celý rad hlavičky —
     dôvod je pri `--hlavicka-prvok`. Dovtedy tu stálo 44 px natvrdo
     a 14 px odsadenie, teda tretia hodnota v rade, kde mali ostatní 12
     a 10. */
  min-height: var(--hlavicka-prvok);
  padding: 6px 12px;
  border: 1px solid var(--ciara-vyrazna);
  border-radius: 999px;
  background: var(--podklad-tlmeny);
  color: var(--firemna);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   „Odhlásiť sa" v hlavičke
   ---------------------------------------------------------------------
   ⚠ SCOPNUTÉ NA HLAVIČKU, A JE TO NUTNÉ. `.tlacidlo--tiche` má v appke
   63 použití v desiatich súboroch (potvrdenia, zrušenia, odkazy v
   kartách) a tie majú vyzerať tak, ako vyzerajú. Mení sa VÝHRADNE ten
   jeden v hlavičke, ktorý stojí v rade s troma pilulkami.

   Zmerané 13. 10. 2026: v tom rade mal 40 px výšku, 16 px písmo
   a 6 px zaoblenie, kým jeho traja susedia 44 px, 13,6 px a 999 px.
   Bola to posledná vec, ktorá z radu vytŕčala. --------------------- */
.hlavicka__vpravo .tlacidlo {
  min-height: var(--hlavicka-prvok);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .85rem;
}
/* Spätná väzba pri prejdení. Tiché tlačidlo ju inde nemá a nepotrebuje —
   stojí v karte, kde je okolo neho text. V hlavičke je to jedna zo
   štyroch vecí vedľa seba a bez odozvy sa nedá rozoznať, na ktorej
   kurzor stojí. Podklad, nie orámovanie: orámovanie by z neho na okamih
   urobilo štvrtú pilulku a rad by poskočil. */
.hlavicka__vpravo .tlacidlo--tiche:hover {
  background: var(--firemna-svetla);
  color: var(--firemna-tmava);
}

.hlavicka__domov:hover,
.hlavicka__domov:focus-visible {
  background: var(--firemna);
  border-color: var(--firemna);
  color: #fff;
}

.hlavicka__domov-znak { font-size: 1.15rem; line-height: 1; }

/* Na úzkom telefóne zostane len domček — hlavička tam nesie značku,
   názov modulu, meno človeka aj stav odosielania a slovo „Domov" by ich
   stlačilo. Krúžok zostáva: práve on hovorí, že sa naň dá ťuknúť.
   Prístupné meno je v `title` aj v `aria-label`. */
/* ---------------------------------------------------------------------
   Rad hlavičky na úzkom telefóne
   ---------------------------------------------------------------------
   ⚠⚠ TENTO BLOK MUSÍ STÁŤ AŽ TU, ZA DEFINÍCIAMI VŠETKÝCH ŠTYROCH PRVKOV.
   Prvé znenie ho malo hore pri ostatných pravidlách rozloženia a dve zo
   štyroch zúžení NEPLATILI: `.hlavicka__domov` aj
   `.hlavicka__vpravo .tlacidlo` sú definované NIŽŠIE a pri rovnakej váhe
   rozhoduje poradie v súbore, takže si základné pravidlo vrátilo svojich
   12 px. Zmerané na telefóne širokom 360 px: Domov 12, zvonček 10,
   bublina 10, tlačidlo 12 — rad bol zase nerovný, hoci pravidlo „všetci
   na 10" v súbore stálo.

   Všetky štyri sa teda zužujú SPOLU, rovnako a na jednom mieste. */
@media (max-width: 559px) {
  .hlavicka__domov,
  .stav-pripojenia,
  .zvoncek,
  .hlavicka__vpravo .tlacidlo { padding: 6px 10px; }
}

@media (max-width: 520px) {
  /* Len SLOVO. Odsadenie drží spoločné pravidlo vyššie — dve pravidlá na
     tú istú vlastnosť pri dvoch rôznych šírkach boli presne to, čo rad
     rozhodilo. */
  .hlavicka__domov-text { display: none; }
}

/* ---------------------------------------------------------------------
   Hlavička sa zalomí SAMA, keď sa nezmestí
   ---------------------------------------------------------------------
   ⚠ MENO ČLOVEKA MALO PRI 360 px NULOVÚ ŠÍRKU. Zmerané 13. 10. 2026:
   pás 320 px, pravá skupina 294 px (Domov 32 + zvonček 70 + bublina 75
   + „Odhlásiť sa" 93 a tri medzery), takže na `hlavicka__nazov` zostalo
   0 px — z „Dochádzka" bolo „D..." a z mena „S...". Hlavička nepovedala
   ani to, v ktorom module človek je, ani kto je prihlásený. Na ZDIEĽANOM
   telefóne partie je to druhé podstatné.

   Skracovať sa nedalo nič: slovo „Domov" sa skrýva už pri 520 px a text
   bubliny stavu NESIE POČET („3 čakajú", „2 chyby"), takže jeho skrytie
   by bola strata údaja, nie úspora miesta.

   ⚠⚠ ZLOM NIE JE NA PEVNEJ ŠÍRKE, A JE TO ZÁMER. Prvé znenie malo
   `@media (max-width: 480px)` a bolo zle: potrebná šírka závisí od
   NAJDLHŠIEHO NÁZVU MODULU aj od toho, ako široká je práve pravá skupina
   (zvonček s dvojciferným počtom je širší než bez počtu). Zmerané pri
   500 px: „Dochádzka" sa zmestila, ale „Zamestnanecký portál" potreboval
   164 px a mal 134 — teda skracoval sa aj NAD zlomom. Každé pevné číslo
   by sa rozišlo s prvým dlhším názvom modulu, ktorý v appke pribudne.

   Namiesto toho má názov SPODNÚ HRANICU a pás sa smie zalomiť. Flexbox
   potom presunie pravú skupinu na druhý riadok presne vtedy, keď sa
   naozaj nezmestí — na širokej obrazovke zostáva jeden riadok ako
   doteraz. 11 rem je najdlhší názov („Zamestnanecký portál", 164 px)
   s rezervou. */
.hlavicka__pas { flex-wrap: wrap; }
.hlavicka__nazov { min-width: 11rem; }

/* Druhý riadok začína pri ľavom okraji ako všetko ostatné na obrazovke,
   nie visí vpravo. `space-between` na páse by jediný prvok druhého
   riadku odtlačil doprava. */
@media (max-width: 559px) {
  .hlavicka__vpravo { justify-content: flex-start; }
}


/* ---------------------------------------------------------------------
   Skenovanie QR nálepky
   ---------------------------------------------------------------------
   Presunuté sem z `jazdy.css` 18. 9. 2026, keď skener prestal patriť
   knihe jázd a stal sa spoločným (`/spolocne/sken.js`). Kým štýly zostali
   v module, obrazovka skenu v Strojoch by sa vykreslila bez rámika
   a s videom cez celú šírku — kód by fungoval a vyzeralo by to pokazene.
   --------------------------------------------------------------------- */

.tlacidlo--sken { margin: 0 0 var(--medzera-velka); }

.sken {
  position: relative;
  margin-bottom: var(--medzera);
  border-radius: var(--radius-maly);
  overflow: hidden;
  background: #000;
}

.sken__obraz {
  display: block;
  width: 100%;
  /* Na výšku sa obraz zastaví, nech zostane vidieť tlačidlo „Vybrať zo
     zoznamu" — cesta von musí byť na obrazovke bez posúvania. */
  max-height: 56vh;
  min-height: 220px;
  object-fit: cover;
  background: #000;
}

/* Vnútro rámika je priehľadné, tieň navôkol stmaví zvyšok obrazu. Jeden
   prvok, žiadne štyri prekryvy. */
.sken__ramik {
  position: absolute;
  top: 14%;
  right: 12%;
  bottom: 14%;
  left: 12%;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-maly);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
  pointer-events: none;
}


/* ---------------------------------------------------------------------
   Prehľady
   ---------------------------------------------------------------------
   Presunuté sem z `jazdy.css` 21. 9. 2026, keď pribudla spoločná
   obrazovka `/prehlad/` s tromi záložkami. Kým štýly zostávali v module,
   tabuľka strojov a dochádzky by sa vykreslila bez rámov a súhrn bez
   dlaždíc — kód by fungoval a vyzeralo by to pokazene. Tá istá chyba,
   ktorá sa stala pri presune skenera.
   --------------------------------------------------------------------- */

.prehlad-suhrn {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--medzera);
}

.prehlad-udaj {
  flex: 1 1 110px;
  padding: 10px 12px;
  border: 1px solid var(--ciara, #dde3ea);
  border-radius: 8px;
  background: var(--pozadie-karta, #fff);
}

.prehlad-udaj__cislo {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prehlad-udaj__popis {
  display: block;
  font-size: .8rem;
  color: var(--text-tlmeny, #667);
}

/* Nezrovnalosti sa zvýraznia iba vtedy, keď nejaké SÚ. Stále červené
   číslo „0" naučí človeka farbu ignorovať a v deň, keď tam bude päťka,
   si jej nevšimne. */
.prehlad-udaj--pozor .prehlad-udaj__cislo { color: var(--chyba, #b3261e); }

.prehlad-filtre {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.prehlad-filtre .pole { flex: 1 1 150px; margin: 0; }

/* Meno zamestnanca a nazov vozidla su dlhe — v stopatdesiatke by sa
   orezali na "Rekonstrukcia in…". Dostanu preto cely riadok a rok
   s mesiacom sa zalomia pod ne. */
.prehlad-filtre .pole--siroke { flex: 1 1 100%; }

/* EXPORT. Nerastie ako rolety vedľa neho — tlačidlo široké cez pol
   riadku vyzerá ako hlavná akcia obrazovky, a ňou nie je: obrazovka je na
   čítanie. `align-self: flex-end` ho zarovná na spodný okraj roliet, aby
   nesedelo vo výške ich popisov. */
.prehlad-filtre .pole--tlacidlo {
  flex: 0 0 auto;
  align-self: flex-end;
}
.prehlad-filtre .pole--tlacidlo .tlacidlo { min-height: var(--dotyk, 48px); }

.prehlad-prepinace {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--medzera);
}

.prehlad-prepinace .tlacidlo[aria-pressed="true"] {
  background: var(--hlavna, #15507d);
  color: #fff;
  border-color: var(--hlavna, #15507d);
}

.prehlad-tabulka {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.prehlad-tabulka th,
.prehlad-tabulka td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ciara, #dde3ea);
  text-align: left;
  vertical-align: top;
}

.prehlad-tabulka th {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-tlmeny, #667);
  border-bottom-width: 2px;
}

/* ---------------------------------------------------------------------
   OPRAVA ZAPÍSANÉHO ÚDAJA (20. 10. 2026)
   ---------------------------------------------------------------------
   Formulár stojí v `<tr>` cez celú šírku, PRESNE POD riadkom, ktorého sa
   týka. Dialóg by sa na úzkom telefóne otvoril mimo riadku — tabuľka sa
   posúva vodorovne a človek by stratil, čo vlastne opravuje.

   Pruh zľava je ten istý jazyk ako pri `prehlad-pozor`: niečo sa s týmto
   riadkom deje.
   --------------------------------------------------------------------- */
.prehlad-oprava > td {
  padding: 0;
  background: var(--podklad-tlmeny, #f4f5f7);
}

.oprava {
  padding: 14px 16px 16px;
  border-left: 4px solid var(--firemna, #1f5c99);
}

/* Políčka pod sebou a nie vedľa seba: je ich päť a na telefóne by sa
   z nich stali stĺpčeky široké na tri znaky. */
.oprava .pole { margin-bottom: 10px; }

/* Čísla sa čítajú sprava a pod sebou musia byť rovnako široké — bez
   `tabular-nums` sa stĺpec kilometrov opticky rozsype a súčet sa nedá
   prebehnúť očami. */
.prehlad-cislo {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Otvorená jazda NEMÁ kilometre — má ich prázdne, nie nulové. Auto,
   ktoré je práve vonku, a auto, ktoré nikam nešlo, sú dve rôzne veci. */
.prehlad-otvorena { color: var(--hlavna, #15507d); font-weight: 600; }

.prehlad-tabulka tr.prehlad-pozor td { background: var(--pozor-slabo, #fff6e5); }

/* Rozpis za mesiac (zdroj × druh paliva). Je to druhá tabuľka na tej istej
   obrazovke, takže potrebuje nadpis — bez neho sa dve tabuľky pod sebou
   čítajú ako jedna dlhá. */
.prehlad-rozpis { margin: 0 0 var(--medzera); }

.prehlad-rozpis__nadpis {
  font-size: 1rem;
  margin: 0 0 8px;
}

/* Súčtový riadok sa musí dať nájsť očami bez čítania — je to to jediné
   číslo, ktoré sa porovnáva s faktúrou. */
.prehlad-tabulka tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--ciara, #dde3ea);
  border-bottom: 0;
}

.prehlad-listovanie {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.prehlad-strana { color: var(--text-tlmeny, #667); font-size: .9rem; }

/* Značka nezrovnalosti. `cursor: help` je jediný náznak, že sa pod ňou
   dá zistiť, čo presne je zle — bez neho na ňu nikto nenajde myš. */
.prehlad-znak { cursor: help; }

/* Zabaliteľné filtre. `summary` musí vyzerať ako tlačidlo — natívny
   trojuholník je na dotyk primalý a nikto ho netrafí. */
.prehlad-filtre-obal { margin-bottom: var(--medzera); }

.prehlad-filtre-nadpis {
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--ciara, #dde3ea);
  border-radius: 8px;
  background: var(--pozadie-karta, #fff);
  font-weight: 600;
  list-style-position: inside;
}

.prehlad-filtre-obal[open] .prehlad-filtre-nadpis {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.prehlad-filtre-obal[open] .prehlad-filtre {
  padding: 12px;
  border: 1px solid var(--ciara, #dde3ea);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  margin-bottom: 0;
}

/* Verzia appky v paneli stavu. Malým písmom a pod frontou — je to údaj,
   ktorý človek hľadá raz za mesiac, ale vtedy ho potrebuje presne. */
.stav-verzia {
  margin: 8px 0 0;
  font-size: 0.85em;
  color: var(--tlmene, #5b6b7c);
}

.stav-verzia--nova {
  color: var(--hlavna, #15507d);
  font-weight: 600;
}