/* PKS Notes — štýly (mobile-first, svetlá + tmavá téma) */

:root {
  color-scheme: light dark;
  --akcent: #1c56a4;
  --akcent-hover: #16457f;
  --akcent-text: #1c56a4;
  --na-akcente: #ffffff;
  --pozadie: #f1f4f8;
  --plocha: #ffffff;
  --plocha-2: #f5f7fb;
  --text: #1b232e;
  --text-2: #5c6773;
  --okraj: #d6deea;
  --nova: #d97706;
  --vyriesena: #15803d;
  --nebezpecna: #b91c1c;
  --evidovana: #64748b;
  /* jemné, ale ZRETEĽNÉ odlíšenie vyplnených polí (svetlá téma) */
  --vyplnene-bg: #e4eefc;
  --vyplnene-okraj: #a9c4e6;
  /* slabší odtieň pre kontajnery (čipy, kroky) — inak by boli svetlejšie než pilulky v nich */
  --vyplnene-bg-slabe: #eaf2ff;
  --chyba-bg: #fdf1f1;
  --toast-bg: #1e2a3a;
  --toast-text: #ffffff;
  --tien: 0 1px 2px rgba(15, 26, 45, .06), 0 2px 8px rgba(15, 26, 45, .08);
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --akcent: #2f6fc0;
    --akcent-hover: #3f7fce;
    --akcent-text: #77ade8;
    --pozadie: #0e131a;
    --plocha: #182029;
    --plocha-2: #1f2934;
    --text: #e6ecf3;
    --text-2: #9aa6b4;
    --okraj: #2c3744;
    --nova: #f59e0b;
    --vyriesena: #22c55e;
    --nebezpecna: #f87171;
    --evidovana: #94a3b8;
    /* Pôvodné #1e2a38 bolo voči --plocha-2 (#1f2934) prakticky neviditeľné (kontrast 1,01)
       — v tmavej téme sa rozdiel 1–4 bodov na kanál stratí. Toto je stále jemné, ale vidno ho. */
    --vyplnene-bg: #24344a;
    --vyplnene-okraj: #3d5d80;
    --vyplnene-bg-slabe: #1e2a38;
    --chyba-bg: #402a33;
    --toast-bg: #e6ecf3;
    --toast-text: #172029;
    --tien: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--pozadie);
  color: var(--text);
  line-height: 1.45;
}

.noscript {
  padding: 16px;
  background: #fde68a;
  color: #7c2d12;
  text-align: center;
  font-weight: 600;
}

/* ===== Hlavička ===== */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--akcent);
  color: #fff;
  box-shadow: var(--tien);
}

.hlavicka-vnutro {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hlavicka-znacka {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hlavicka-logo {
  height: 36px;
  width: auto;
  background: #fff;
  padding: 5px 8px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  flex-shrink: 0;
  display: block;
}

#hdrUser { display: flex; align-items: center; gap: 10px; }
#hdrUser[hidden] { display: none; }
#hdrMeno { font-size: .9rem; opacity: .92; }

.hlavicka-btn {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
}
.hlavicka-btn:hover { background: rgba(255, 255, 255, .24); }
#btnZdroj { font-size: .78rem; padding: 6px 10px; min-height: 34px; }
/* zvonček push notifikácií — rovnaká výška ako ostatné tlačidlá v hlavičke */
#btnPush { font-size: .95rem; padding: 4px 9px; min-height: 34px; line-height: 1; }
#btnPush[hidden] { display: none; }
#btnPush.push-zapnute { background: rgba(255, 255, 255, .34); }

/* prepínač „Spravované / Všetky" nad poľom Nehnuteľnosť, zarovnaný vpravo */
.zdroj-prepinac { display: flex; justify-content: flex-end; margin-bottom: -4px; }
.zdroj-prepinac button { font-size: .78rem; padding: 6px 10px; min-height: 34px; }

/* prehľad prihlásených zariadení v Správe */
.push-odbery { list-style: none; margin: 10px 0 0; padding: 0; }
.push-odbery li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--okraj);
  font-size: .88rem;
}
.push-odbery li:last-child { border-bottom: none; }
.push-zar { color: var(--text-2); }
.push-kedy { color: var(--text-2); margin-left: auto; font-size: .8rem; }

/* ===== Navigácia (spodná na mobile, hore na širokej obrazovke) ===== */

#tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  background: var(--plocha);
  border-top: 1px solid var(--okraj);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .07);
}
#tabbar[hidden] { display: none; }

#tabbar button {
  flex: 1;
  min-height: 56px;
  border: none;
  border-radius: 0;
  border-top: 3px solid transparent;
  background: none;
  color: var(--text-2);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
#tabbar button.aktivny {
  color: var(--akcent-text);
  border-top-color: var(--akcent-text);
}

@media (min-width: 700px) {
  #tabbar {
    /* Lišta musí byť vidieť VŽDY. Na mobile je fixne dole, na širokej obrazovke sa
       prilepí pod hlavičku (tá je sticky na vrchu a je vysoká 56 px) — predtým bola
       `static` a pri dlhom zozname odscrollovala preč. */
    position: sticky;
    top: 56px;
    z-index: 19;
    box-shadow: none;
    border-top: none;
    border-bottom: 1px solid var(--okraj);
    justify-content: center;
    padding-bottom: 0;
  }
  #tabbar button {
    flex: 0 1 220px;
    min-height: 48px;
    border-top: none;
    border-bottom: 3px solid transparent;
  }
  #tabbar button.aktivny { border-bottom-color: var(--akcent-text); }
}

/* ===== Obsah ===== */

.obsah {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px calc(88px + env(safe-area-inset-bottom));
}
@media (min-width: 700px) {
  .obsah { padding-bottom: 32px; }
}

.karta {
  background: var(--plocha);
  border: 1px solid var(--okraj);
  border-radius: var(--radius);
  box-shadow: var(--tien);
  padding: 16px;
  margin-bottom: 16px;
}

.karta h2 { margin: 0 0 12px; font-size: 1.1rem; }
.karta h3 { margin: 16px 0 12px; font-size: 1rem; }

.prihlasenie {
  max-width: 420px;
  margin: 10vh auto 0;
}

.popis { color: var(--text-2); font-size: .9rem; margin: 0 0 12px; }
.prazdny { text-align: center; color: var(--text-2); padding: 24px 0; }

/* :not([hidden]) — display:flex by inak prebilo UA štýl [hidden]{display:none}
   a banner by sa nedal skryť (presne to sa stalo na produkcii 25. 8. večer) */
.chyba-banner:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-color: var(--nova);
}

/* ===== Formulárové prvky ===== */

input, select, textarea, button { font: inherit; }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--okraj);
  border-radius: 10px;
  background: var(--plocha-2);
  color: var(--text);
}
input[type="file"] { border-style: dashed; padding: 8px 10px; }
textarea { resize: vertical; min-height: 96px; }
select:disabled { opacity: .55; }

/* Vizuálne rozlíšenie vyplnených polí — mení sa LEN pozadie a okraj,
   nikdy farba textu (kontrast). Triedu prepína oznacPole() v app.js. */
input.vyplnene, select.vyplnene, textarea.vyplnene {
  background: var(--vyplnene-bg);
  border-color: var(--vyplnene-okraj);
}

/* Chybné pole. MUSÍ zostať ZA .vyplnene — obe majú rovnakú špecificitu (0-1-1) a pole býva
   vyplnené a zároveň nekorektné, takže rozhoduje poradie. Ľavý pruh je `inset`, aby
   nezväčšil rámček a nerozhádzal mriežku .riadok-2. */
input.nekorektne, select.nekorektne, textarea.nekorektne {
  background: var(--chyba-bg);
  border-color: var(--nebezpecna);
  box-shadow: inset 3px 0 0 0 var(--nebezpecna);
}

/* Hláška pod poľom. `[hidden]` poistka je POVINNÁ — `display:block` inak prebije
   `[hidden]{display:none}` a hláška svieti natrvalo (stalo sa už 25. 8. na produkcii). */
.pole-chyba {
  display: block;
  margin-top: 6px;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nebezpecna);
}
.pole-chyba[hidden] { display: none; }

/* Hláška pri fotkách — ostáva na obrazovke (toast na viacriadkový návod nestačí) */
.foto-chyba {
  display: block;
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--nebezpecna);
  border-radius: 10px;
  background: var(--chyba-bg);
  color: var(--text);
  font-size: .85rem;
  line-height: 1.4;
  white-space: pre-line;
}
.foto-chyba[hidden] { display: none; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--akcent-text);
  outline-offset: 1px;
}

/* aj pri fokuse nech je vidieť, že pole je chybné */
input.nekorektne:focus-visible, select.nekorektne:focus-visible, textarea.nekorektne:focus-visible {
  outline-color: var(--nebezpecna);
}

label {
  display: block;
  margin: 0 0 14px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-2);
}
label > input, label > select, label > textarea {
  margin-top: 6px;
  font-weight: 400;
  font-size: 1rem;
}

.riadok-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checkboxy { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.chk {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  font-weight: 500;
  color: var(--text);
}
.chk input { width: 22px; height: 22px; min-height: 0; accent-color: var(--akcent); }

/* ===== Tlačidlá ===== */

button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  background: var(--plocha-2);
}

.btn-primarny {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--na-akcente);
}
.btn-primarny:hover { background: var(--akcent-hover); }
.btn-primarny:disabled { opacity: .55; cursor: not-allowed; }

.btn-sekundarny {
  background: var(--plocha-2);
  border-color: var(--okraj);
  color: var(--text);
}
.btn-sekundarny:hover { border-color: var(--text-2); }

.btn-nebezpecny {
  background: none;
  border-color: var(--nebezpecna);
  color: var(--nebezpecna);
}

.btn-mensi { padding: 8px 14px; font-size: .9rem; }

.formular > .btn-primarny { width: 100%; }
.tlacidla { display: flex; gap: 10px; flex-wrap: wrap; }
.tlacidla .btn-primarny { flex: 1 1 auto; }

/* ===== Filtre zoznamu ===== */

/* Rozloženie podľa vizuálu: každý filter na plnú šírku pod sebou (riadky 4 a 5
   sú dvojice cez .riadok-2) — platí aj na desktope */
.filtre { display: grid; gap: 10px; }

.segment {
  display: flex;
  border: 1px solid var(--okraj);
  border-radius: 10px;
  overflow: hidden;
  background: var(--plocha-2);
}
.segment button {
  flex: 1;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-2);
  white-space: nowrap;
}
.segment button.aktivny {
  background: var(--akcent);
  color: var(--na-akcente);
}
/* štyri stavy sa na úzkom displeji nezmestia do jedného riadku → 2×2 mriežka */
.segment button { padding: 8px 6px; font-size: .86rem; }
@media (max-width: 400px) {
  .segment-4 { display: grid; grid-template-columns: 1fr 1fr; }
  .segment-4 button:nth-child(-n+2) { border-bottom: 1px solid var(--okraj); }
}

/* ===== Karty hlásení ===== */

.hlasenie {
  background: var(--plocha);
  border: 1px solid var(--okraj);
  border-radius: var(--radius);
  box-shadow: var(--tien);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.h-riadok1 {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Na veľmi úzkom displeji (320 px) sa dátum, čas a tri ikonky do riadku nezmestia —
     nech radšej ikonky odskočia na ďalší riadok, než aby karta pretiekla do šírky. */
  flex-wrap: wrap;
  row-gap: 4px;
  font-weight: 700;
}
.h-cas { color: var(--text-2); font-weight: 600; }

/* Odznak stavu má od 1. 9. 2026 VLASTNÝ riadok — v prvom riadku spolu s dátumom, časom
   a tromi ikonkami sa na telefóne nezmestil a karta pretekala do šírky. */
.h-stav { margin-top: 6px; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
}
.badge-nova { background: var(--nova); }
.badge-vyriesena { background: var(--vyriesena); }
.badge-evidovana { background: var(--evidovana); }
.badge-riesi { background: var(--nova); }   /* oranžová = práve sa na tom robí */

.h-termin { font-size: .85rem; font-weight: 600; margin-top: 4px; }
.h-termin.po-termine { color: var(--nebezpecna); }
.h-kroky { margin: 6px 0 0; padding-left: 18px; font-size: .85rem; color: var(--text-2); }
.h-kroky li { overflow-wrap: anywhere; }

.h-riadok2 { margin-top: 6px; }
/* adresa (sekcia) je od 1. 9. 2026 na SAMOSTATNOM riadku pod nehnuteľnosťou */
.h-adresa { color: var(--text-2); }
/* kategórie majú vlastný riadok hneď pod dátumom a časom */
.h-kategorie { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.h-kategoria { vertical-align: 1px; }

/* Ikonky v hornom riadku karty: PDF · upraviť · zmazať. Tlačidlá dole ostávajú len dve. */
/* Ikonky sú jediné, čo sa v prvom riadku tlačí doprava (odznak stavu má vlastný riadok). */
.h-ikony { margin-left: auto; display: flex; gap: 6px; flex: none; }
.h-ikona {
  min-height: 0;
  /* 40 px je najmenší cieľ, ktorý sa dá trafiť prstom v teréne (zvyšok appky drží 44 px);
     ikonka sa zmenší písmom, nie plochou — a maže sa hneď vedľa ceruzky. */
  height: 40px;
  min-width: 40px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
}
.h-ikona:hover { background: var(--plocha-2); color: var(--akcent-text); }
.h-ikona-nebezpecna:hover { color: var(--nebezpecna); }

.h-text {
  margin: 8px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.h-meta { font-size: .8rem; color: var(--text-2); }

/* Kontakt na karte: telefón a e-mail ako pilulky. Cieľová plocha má aspoň 40 px na výšku,
   aby sa dali trafiť prstom v teréne (zvyšok appky drží 44 px pri ovládacích prvkoch). */
.h-kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.h-kontakt-odkaz, .h-kontakt-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--okraj);
  border-radius: 999px;
  background: var(--plocha-2);
  font-size: .85rem;
  overflow-wrap: anywhere;
}

.h-kontakt-odkaz {
  color: var(--akcent-text);
  text-decoration: none;
  font-weight: 600;
}

.h-kontakt-odkaz:hover { border-color: var(--akcent); }

/* v súbore nebol dosiaľ ani jeden selektor pre <a> — bez tohto by odkaz nemal viditeľný fokus */
.h-kontakt-odkaz:focus-visible {
  outline: 2px solid var(--akcent-text);
  outline-offset: 1px;
}

.h-kontakt-text { color: var(--text-2); }

/* Akcie na karte majú rovnakú šírku a pevné poradie (Dokončiť · Upraviť · Riešiť · Zmazať).
   Mriežka namiesto flexu: pri flexe by posledné tlačidlo v riadku vyšlo širšie.
   Do 480 px 2×2, nad ňou všetky štyri vedľa seba — pri 375 px by štyri vyšli po ~71 px
   a text „Dokončiť" by sa zalomil. */
.h-akcie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

@media (min-width: 480px) {
  /* Na karte sú od 1. 9. 2026 najviac DVE tlačidlá (Dokončiť · Riešiť) — pri štyroch
     stĺpcoch by vypĺňali len ľavú polovicu karty a vpravo by zívala prázdna mriežka. */
  .h-akcie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.h-akcie button {
  min-width: 0;              /* inak mriežku roztiahne dlhší text */
  padding-left: 6px;
  padding-right: 6px;
}

.zoznam-pata { display: flex; gap: 10px; }
#btnDalsie { flex: 1; }
#btnExport { margin-left: auto; }

/* ===== Správa — zamestnanci ===== */

.zam-riadok {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--okraj);
}
.zam-riadok:last-child { border-bottom: none; }

.zam-info { display: flex; flex-direction: column; min-width: 0; }
.zam-info strong { overflow-wrap: anywhere; }
.zam-login { color: var(--text-2); font-size: .85rem; }
.zam-znacky { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.neaktivny .zam-info { opacity: .55; }

.znacka {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--okraj);
  color: var(--text-2);
  text-transform: uppercase;
  align-self: center;
}
.znacka-admin { color: var(--akcent-text); border-color: var(--akcent-text); }

/* ===== Správa — číselníky hlásení ===== */

.ciselnik-blok { margin-top: 14px; }
.ciselnik-blok h3 { margin: 0 0 6px; font-size: 1rem; }

.ciselnik-riadok {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--okraj);
}
.ciselnik-riadok:last-child { border-bottom: none; }
.ciselnik-nazov { overflow-wrap: anywhere; }
.ciselnik-riadok.neaktivny .ciselnik-nazov { opacity: .5; text-decoration: line-through; }
.ciselnik-akcie { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.ciselnik-akcie button { min-height: 34px; padding: 5px 10px; font-size: .82rem; }

.ciselnik-pridaj {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ciselnik-pridaj input { flex: 1; }
.ciselnik-pridaj button { flex-shrink: 0; }

/* ===== Správa — notifikácie ===== */

.formular h3 { margin: 14px 0 8px; font-size: 1rem; }
.notif-test { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--okraj); }
.notif-test h3 { margin: 0 0 8px; font-size: 1rem; }
.notif-test .riadok-2 { margin-bottom: 10px; align-items: center; }
/* Dlhé popisy tlačidiel (napr. „Poslať test na moje zariadenia") na úzkom displeji
   pretekali z karty — text sa smie zalomiť a tlačidlo zúžiť pod šírku obsahu. */
.notif-test .pridavacie { flex-wrap: wrap; }
.notif-test .pridavacie button {
  white-space: normal;
  text-align: center;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}
.zam-kontakt { color: var(--text-2); font-size: .8rem; overflow-wrap: anywhere; }

/* ===== Správa — synchronizácia ===== */

.sync-token {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.token-popis { font-weight: 600; font-size: .9rem; color: var(--text-2); }

#tokenVal {
  font-family: ui-monospace, Consolas, "Cascadia Mono", monospace;
  font-size: .85rem;
  background: var(--plocha-2);
  border: 1px solid var(--okraj);
  border-radius: 8px;
  padding: 8px 10px;
  overflow-wrap: anywhere;
}

.sync-import {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--okraj);
}
.sync-import label { margin: 0; }
.sync-import .btn-primarny { width: 100%; }

/* ===== Pridávacie pole (zodpovední, kroky riešenia) ===== */

.pole-pridaj { margin: 0 0 14px; }
.pole-label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}

/* rovnaké jemné zvýraznenie ako pri vyplnenom poli — len ak zoznam nie je prázdny.
   Slabší odtieň: po zosilnení --vyplnene-bg by bol kontajner svetlejší než pilulky v ňom. */
.cipy:not(:empty), .kroky:not(:empty) {
  background: var(--vyplnene-bg-slabe);
  border: 1px solid var(--vyplnene-okraj);
  border-radius: 10px;
  padding: 8px;
}

.cipy { display: flex; flex-wrap: wrap; gap: 8px; }
.cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--okraj);
  border-radius: 999px;
  background: var(--plocha-2);
  font-size: .9rem;
  color: var(--text);
}
.cip-hlavny { border-color: var(--akcent-text); }
.cip-znacka {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--akcent-text);
}
.cip-zmaz {
  min-height: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.cip-zmaz:hover { background: var(--plocha); color: var(--nebezpecna); }

.pridavacie { display: flex; gap: 8px; margin-top: 8px; }
.pridavacie select, .pridavacie input, .pridavacie textarea { flex: 1; min-width: 0; }
.pridavacie button { flex-shrink: 0; }
.pridavacie-stlpec { flex-direction: column; align-items: stretch; }
.pridavacie-stlpec button { align-self: flex-end; }

.kroky {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.krok { display: flex; gap: 8px; align-items: flex-start; }
.krok-telo { flex: 1; min-width: 0; }
.krok-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.krok-meta { font-size: .78rem; color: var(--text-2); }
/* vlastný termín kroku riešenia — vedľa mena v okne Riešiť aj na karte v zozname */
.krok-termin { font-weight: 600; white-space: nowrap; }

/* úprava kroku priamo v zozname (žiadny ďalší modál nad modálom) */
.krok-upravovany { background: var(--vyplnene-bg); border-radius: 8px; padding: 8px; }
.krok-upravovany .krok-telo { display: flex; flex-direction: column; gap: 8px; }
.krok-upravovany .pridavacie { justify-content: flex-end; }
/* ✎ vedľa ✕ — rovnaká plocha na ťuknutie, aby sa na mobile nedali pomýliť */
.cip-uprav {
  min-height: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.cip-uprav:hover { background: var(--plocha); color: var(--akcent-text); }

/* ===== Správa — log zmien ===== */

.log-riadok { padding: 10px 0; border-bottom: 1px solid var(--okraj); }
.log-riadok:last-child { border-bottom: none; }
.log-hlavicka { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.log-kedy { margin-left: auto; font-size: .8rem; color: var(--text-2); }
.log-porucha { font-size: .82rem; color: var(--text-2); overflow-wrap: anywhere; }
.log-popis { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }
.znacka-akcia { text-transform: none; }
.log-zmazanie { color: var(--nebezpecna); border-color: var(--nebezpecna); }
#btnLogDalsie { width: 100%; margin-top: 12px; }

/* ===== Modal ===== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal[hidden] { display: none; }

.modal-pozadie {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 16, .55);
}

.modal-okno {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--plocha);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 30px rgba(0, 0, 0, .3);
}
.modal-okno h2 { margin-top: 0; }

@media (min-width: 700px) {
  .modal { align-items: center; padding: 20px; }
  .modal-okno { border-radius: var(--radius); padding-bottom: 20px; }
}

/* ===== Fotky ===== */

.foto-pole { margin: 0 0 14px; }
.foto-label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}

.foto-nahlad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.foto-nahlad:not(:empty) { margin-bottom: 10px; }

.foto-mini {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--okraj);
  background: var(--plocha-2);
  flex-shrink: 0;
}
.foto-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.foto-mini.nahravanie { opacity: .5; }

.foto-zmaz {
  position: absolute;
  top: 2px;
  right: 2px;
  min-height: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(10, 20, 16, .65);
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto-zmaz:hover { background: var(--nebezpecna); }

/* tlačidlo „Pridať fotku" — label sa tvári ako sekundárne tlačidlo */
.foto-pridaj {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--okraj);
  border-radius: 10px;
  background: var(--plocha-2);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}
.foto-pridaj:hover { border-color: var(--text-2); }

/* miniatúry na karte hlásenia */
.h-fotky {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 2px;
}
.h-fotky img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--okraj);
  cursor: zoom-in;
  display: block;
}

/* ===== Lightbox ===== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 12, 9, .9);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
}
.lightbox-zavri {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 20px;
}
.lightbox-zavri:hover { background: rgba(255, 255, 255, .28); }

/* ===== Toast ===== */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px);
  z-index: 100;
  max-width: min(92vw, 560px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--toast-bg);
  color: var(--toast-text);
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.zobrazeny {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (min-width: 700px) {
  .toast { bottom: 28px; }
}

/* ===== Zostava hlásenia na tlač / do PDF =====
   Na obrazovke je blok skrytý; pri tlači sa vytlačí LEN on (appka sa schová).
   Farby sú tu natvrdo čierno-biele — tlačiareň nemá tmavú tému a farebné pozadia
   by len minuli toner. */

#tlacObal { display: none; }

@media print {
  @page { size: A4; margin: 14mm 12mm; }

  body { background: #fff; color: #000; }
  /* Ovládanie appky nemá na papieri čo hľadať — mizne pri OBOCH cestách tlače. */
  .hlavicka, #tabbar, .modal, .lightbox, .toast { display: none !important; }

  /* Tlač spustená tlačidlom PDF: vytlačí sa len zostava hlásenia.
     Ctrl+P bez neho: zostava je prázdna, takže sa vytlačí to, čo je na obrazovke —
     bez tejto podmienky by z tlačiarne vyšiel čistý papier. */
  body.tlacim .obsah { display: none !important; }
  .obsah { max-width: none; padding: 0; }
  .karta { box-shadow: none; border-color: #999; break-inside: avoid; }

  body.tlacim #tlacObal {
    display: block;
    font-size: 11pt;
    line-height: 1.4;
    color: #000;
  }

  .tl-hlavicka {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
  }
  .tl-logo { height: 34px; width: auto; }
  .tl-nazov { flex: 1; }
  .tl-hlavicka h1 { margin: 0; font-size: 16pt; }
  .tl-podnadpis { margin: 2px 0 0; font-size: 11pt; }
  .tl-stav {
    border: 1.5px solid #000;
    border-radius: 4px;
    padding: 3px 10px;
    font-weight: 700;
    white-space: nowrap;
  }

  /* table-layout: fixed + zalamovanie — dlhá nezlomiteľná hodnota (adresa, dlhé slovo)
     inak roztiahne tabuľku a papier ju odreže. Prehliadač pri tlači nestránkuje do šírky. */
  .tl-tabulka { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: fixed; }
  .tl-tabulka th,
  .tl-tabulka td {
    border-bottom: 1px solid #bbb;
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
  }
  .tl-tabulka th { width: 38mm; font-weight: 600; }

  body.tlacim #tlacObal h2 {
    margin: 14px 0 6px;
    font-size: 12pt;
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
  }
  .tl-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

  .tl-kroky { margin: 0; padding-left: 18px; }
  /* krok sa nesmie roztrhnúť medzi stranami — inak visí meno autora samo hore */
  .tl-kroky li { margin-bottom: 8px; break-inside: avoid; }
  .tl-krok-text { white-space: pre-wrap; overflow-wrap: anywhere; }
  .tl-krok-meta { font-size: 9pt; color: #444; }

  /* Blokové rozloženie, nie flex: flexový kontajner sa medzi stranami láme nespoľahlivo
     a pri 12 fotkách (strop appky) je vyšší než celá tlačová plocha A4. */
  /* Adresa zdieľaného súboru je jeden nezlomiteľný token — bez anywhere ju papier odreže. */
  .tl-prilohy { margin: 0 0 8px; padding-left: 18px; }
  .tl-prilohy li { overflow-wrap: anywhere; break-inside: avoid; }

  .tl-fotky { display: block; }
  /* fotky pripnuté ku KROKU sú menšie — patria k odseku, nie k celému hláseniu */
  .tl-fotky-krok { margin-top: 4mm; }
  .tl-fotky-krok img { max-width: 45mm; max-height: 34mm; }
  .tl-fotky img {
    display: inline-block;
    vertical-align: top;
    max-width: 78mm;
    max-height: 60mm;
    margin: 0 6mm 6mm 0;
    break-inside: avoid;
  }

  /* Bežiaca päta: `position: fixed` sa v tlači vykreslí na KAŽDEJ strane, takže aj druhá
     a tretia strana zostavy povie, ku ktorému hláseniu patrí. */
  .tl-pata {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding-top: 3px;
    border-top: 1px solid #bbb;
    background: #fff;
    font-size: 8.5pt;
    color: #444;
  }
  /* miesto pre bežiacu pätu, nech ju obsah neprekryje */
  body.tlacim #tlacObal { padding-bottom: 12mm; }
}

/* ===== Prílohy (dokumenty a odkazy) =====
   Fotky majú vlastné náhľady vyššie; dokumenty a odkazy sú zoznam s ikonkou, názvom
   a veľkosťou. Celý riadok je odkaz — dokument sa stiahne, odkaz otvorí v novom okne. */

/* width:100% + min-width:0 — vo flex rodičoch (pridávacie pole, sekcia kroku) sa zoznam
   inak zúžil na obsah a dlhý názov súboru sa lámal PO JEDNOM PÍSMENE (video z 1. 9.). */
.prilohy { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.priloha { width: 100%; min-width: 0; }
.priloha-otvor { min-width: 0; flex: 1 1 auto; }
.prilohy:empty { display: none; }
.priloha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--okraj);
  border-radius: 10px;
  background: var(--plocha-2);
  font-size: .9rem;
}
/* Bez explicitnej farby by odkaz ostal modrý a po otvorení fialový (v súbore nie je
   globálne pravidlo pre <a>) — vyzeralo by to ako iný stav prílohy. */
/* Dokument je <button> (otvára ho fetch), odkaz <a> — obidva musia vyzerať rovnako.
   Bez explicitnej farby by odkaz ostal modrý a po otvorení fialový. */
.priloha a, .priloha-otvor {
  overflow-wrap: anywhere;
  color: var(--akcent-text);
  text-decoration: none;
  font-weight: 600;
}
.priloha-otvor {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.priloha a:hover, .priloha-otvor:hover { text-decoration: underline; }
.priloha a:focus-visible,
.priloha-otvor:focus-visible { outline: 2px solid var(--akcent-text); outline-offset: 1px; }
.priloha-ikona { flex: none; font-size: 1.05rem; }
.priloha-velkost { color: var(--text-2); font-size: .8rem; white-space: nowrap; }
.priloha .cip-zmaz { margin-left: auto; }
/* Nextcloud: ☁ tlačidlá sa ukážu až s prepojeným účtom */
body:not(.ma-nc) .nc-only { display: none; }
#btnNc { font-size: .95rem; padding: 4px 9px; min-height: 34px; line-height: 1; }
#btnNc[hidden] { display: none; }
.nc-cesta { overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: .8rem; }
.nc-zoznam { max-height: 45vh; overflow: auto; border: 1px solid var(--okraj); border-radius: 10px; margin-bottom: 12px; }
.nc-riadok {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--okraj);
  background: none;
  color: var(--text);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.nc-riadok:last-child { border-bottom: 0; }
.nc-riadok:hover { background: var(--plocha-2); }
.nc-velkost { margin-left: auto; color: var(--text-2); font-size: .8rem; white-space: nowrap; }
.nc-vybrane { border-top: 1px dashed var(--okraj); padding-top: 10px; margin-bottom: 8px; }
.nc-vybrane span { font-weight: 600; overflow-wrap: anywhere; }

/* PDF prehliadač v okne appky */
#pdfOkno {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--pozadie);
  display: flex;
  flex-direction: column;
}
#pdfOkno[hidden] { display: none; }
body.pdf-otvorene { overflow: hidden; }
.pdf-hlavicka {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--plocha);
  border-bottom: 1px solid var(--okraj);
}
.pdf-nazov { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: .92rem; }
#pdfStiahnut { text-decoration: none; }
.pdf-strany { flex: 1 1 auto; overflow: auto; padding: 8px; text-align: center; }
.pdf-strana {
  display: block;
  margin: 0 auto 10px;
  max-width: 100%;
  background: #fff;
  box-shadow: var(--tien);
}
.pdf-poznamka { padding: 8px 0 16px; }
.diag pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .78rem; color: var(--text-2); margin: 8px 0 0; }
.diag summary { cursor: pointer; font-weight: 600; }

/* Ťukacie štítky kategórií — všetky naraz, aria-pressed rozlišuje označené. */
.stitky { display: flex; flex-wrap: wrap; gap: 8px; }
.kat-stitok {
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--okraj);
  border-radius: 999px;
  background: var(--plocha-2);
  color: var(--text-2);
  font-size: .88rem;
  cursor: pointer;
}
.kat-stitok[aria-pressed="true"] {
  background: var(--vyplnene-bg);
  border-color: var(--akcent);
  color: var(--akcent-text);
  font-weight: 600;
}
.kat-stitok:focus-visible { outline: 2px solid var(--akcent-text); outline-offset: 1px; }

/* Prílohy pri kroku riešenia: rozbaľovací čip 📎 a sekcia pod textom kroku. */
.cip-prilohy {
  flex: none;
  align-self: flex-start;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--okraj);
  border-radius: 999px;
  background: var(--plocha-2);
  color: var(--text-2);
  font-size: .82rem;
  cursor: pointer;
}
.cip-prilohy[aria-expanded="true"] { border-color: var(--akcent); color: var(--akcent-text); }
/* Sekcia je priamym potomkom li.krok (flex riadok s tlačidlami vpravo) — flex-basis 100 %
   ju zalomí POD celý krok. V úzkom stĺpci vedľa tlačidiel sa názvy súborov lámali po písmene. */
.krok { flex-wrap: wrap; }
.krok-prilohy {
  flex-basis: 100%;
  min-width: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--okraj);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.krok-prilohy .foto-tlacidla button { font-size: .8rem; min-height: 36px; }
.odkaz-krok { flex-basis: 100%; margin: 0; }

/* dočasný riadok „Nahráva sa…" a stlmené tlačidlo, kým beží nahrávanie dokumentu */
.priloha-caka { color: var(--text-2); font-style: italic; }
.verzia { text-align: center; font-size: .78rem; opacity: .75; margin-top: 14px; }
/* riadok s náhľadmi fotiek vo fronte pridávaného kroku nemá mať okraj pilulky */
.priloha-fotky { border: 0; background: none; padding: 0; }
.foto-pridaj:has(button:disabled), .foto-pridaj:disabled { opacity: .5; pointer-events: none; }
.foto-pridaj:has(input:disabled) { opacity: .5; pointer-events: none; }

/* tri tlačidlá vedľa seba (fotka · dokument · odkaz), na úzkom displeji sa zalomia */
.foto-tlacidla { display: flex; flex-wrap: wrap; gap: 8px; }
.prilohy-popis { margin-bottom: 8px; }

.odkaz-pole { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.odkaz-pole[hidden] { display: none; }
.odkaz-pole input { flex: 1 1 220px; }
.odkaz-pole button { flex: none; }

/* prílohy na karte v zozname — pilulky s dosahom na ťuknutie */
.h-prilohy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Pilulka je pri dokumente <button> a pri odkaze <a> — `font: inherit` a nulovanie
   prehliadačových štýlov tlačidla ich zrovnoprávni. */
.h-priloha {
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--okraj);
  border-radius: 999px;
  background: var(--plocha-2);
  font-size: .82rem;
  overflow-wrap: anywhere;
  color: var(--akcent-text);
  text-decoration: none;
  font-weight: 600;
}
.h-priloha:hover { border-color: var(--akcent); }
.h-priloha:focus-visible { outline: 2px solid var(--akcent-text); outline-offset: 1px; }

/* Pás s výzvou na presun na novú adresu — vidno ho len na starej adrese. */
.pas-presun {
  background: #fde68a;
  color: #3f2d00;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.pas-presun a { color: #7c4a03; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .pas-presun { background: #4a3a10; color: #ffe9a8; }
  .pas-presun a { color: #ffd166; }
}

/* Karta užívateľa (hlavička → meno) */
.hdr-meno {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: .9rem;
  opacity: .92;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.hdr-meno:hover, .hdr-meno:focus-visible { background: rgba(255, 255, 255, .16); opacity: 1; }

.profil-riadky { list-style: none; margin: 8px 0 4px; padding: 0; }
.profil-riadky li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ciara);
}
.profil-riadky li:last-child { border-bottom: 0; }
.profil-popis { flex: 1; min-width: 0; }
.profil-popis .profil-nazov { font-size: .8rem; opacity: .75; }
.profil-popis .profil-hodnota { word-break: break-word; }
.profil-popis .profil-poznamka { font-size: .78rem; opacity: .7; }
.profil-prepinac {
  flex: none;
  background: none;
  border: 1px solid var(--ciara);
  border-radius: 8px;
  font-size: 1.2rem;
  line-height: 1;
  padding: 7px 9px;
  cursor: pointer;
  color: inherit;
}
.profil-prepinac[aria-pressed="true"] { border-color: var(--primarna); }
.profil-prepinac:disabled { opacity: .4; cursor: default; }
.profil-nadpis { font-size: .95rem; margin: 16px 0 0; }