/* =================================================================
   HACCP Denník — základné štýly.
   Tablet-first (CLAUDE.md §7): dotykové ciele min. 48 px, veľké písmo,
   vysoký kontrast — na tablete v kuchyni, mokrými rukami, cez rukavice.
   ================================================================= */

:root {
  --znacka:      #0f766e;
  --znacka-tmava:#115e59;
  --pozadie:     #f8fafc;
  --plocha:      #ffffff;
  --ciara:       #e2e8f0;
  --text:        #0f172a;
  --text-tichy:  #64748b;
  --ok:          #16a34a;
  --varovanie:   #d97706;
  --odchylka:    #dc2626;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;              /* pod 16 px zoomujú mobilné prehliadače pri fokuse */
  line-height: 1.6;
  color: var(--text);
  background: var(--pozadie);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Hlavička ─────────────────────────────────────────────────── */
.hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background: var(--plocha);
  border-bottom: 1px solid var(--ciara);
}

.znacka {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.znacka-ikona { font-size: 1.4rem; }

/* ── Obsah ────────────────────────────────────────────────────── */
.obsah {
  flex: 1;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.hrdina { text-align: center; }

.hlavicka-podpora { position: relative; text-decoration: none;
                    font-size: 1.15rem; padding: .2rem .3rem; }
.bublina {
  display: inline-block; min-width: 1.05rem; padding: 0 .28rem;
  background: var(--odchylka, #b91c1c); color: #fff; border-radius: 999px;
  font-size: .68rem; font-weight: 700; line-height: 1.25rem;
  text-align: center; vertical-align: text-top;
}

.odznak {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .3rem .8rem;
  border-radius: 99px;
  background: #ccfbf1;
  color: var(--znacka-tmava);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hrdina h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.perex {
  max-width: 44rem;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  color: var(--text-tichy);
}

.prinosy {
  list-style: none;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  display: grid;
  gap: .6rem;
}
.prinosy li {
  position: relative;
  padding: .7rem 1rem .7rem 2.8rem;
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: 10px;
}
.prinosy li::before {
  content: '✓';
  position: absolute;
  left: 1rem;
  top: .7rem;
  color: var(--znacka);
  font-weight: 800;
}

.poznamka {
  margin: 1.5rem auto 0;
  max-width: 40rem;
  font-size: .9rem;
  color: var(--text-tichy);
}

/* ── Stavy meraní (jednotné naprieč celou aplikáciou) ─────────── */
.stav-ok        { color: var(--ok); }
.stav-varovanie { color: var(--varovanie); }
.stav-odchylka  { color: var(--odchylka); font-weight: 700; }

/* ── Dotykové ciele ───────────────────────────────────────────── */
button, .tlacidlo, input, select, textarea {
  font: inherit;
  min-height: 48px;
}
button, .tlacidlo { cursor: pointer; }

:focus-visible { outline: 3px solid var(--znacka); outline-offset: 2px; }

/* ── Päta ─────────────────────────────────────────────────────── */
.pata {
  padding: 1.5rem 1.25rem;
  border-top: 1px solid var(--ciara);
  background: var(--plocha);
  text-align: center;
  font-size: .85rem;
  color: var(--text-tichy);
}
.pata p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   AUTENTIFIKÁCIA A FORMULÁRE (Prompt 3)
   Tablet-first (CLAUDE.md §7): dotykové ciele min. 48 px, veľké
   písmo, dostatočné rozostupy — počíta sa s mokrými rukami.
   ═══════════════════════════════════════════════════════════════ */

.karta-formulara {
  max-width: 30rem;
  margin: 2rem auto;
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: 14px;
  padding: 1.75rem;
}
.karta-formulara.sirsia { max-width: 42rem; }
.karta-formulara.stred { text-align: center; }
.karta-formulara h1 { margin: 0 0 .5rem; font-size: 1.5rem; }

.kroky {
  margin: 0 0 .35rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--znacka);
}
.velka-ikona { font-size: 3rem; margin: 0 0 .5rem; }

.formular { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.25rem; }

.pole { display: block; border: 0; padding: 0; margin: 0; }
.pole .popis, .pole legend.popis {
  display: block;
  margin-bottom: .35rem;
  font-weight: 600;
  font-size: .92rem;
}
.pole .popis em { color: var(--odchylka); font-style: normal; }

.pole input[type="text"], .pole input[type="email"],
.pole input[type="password"] {
  width: 100%;
  min-height: 48px;                      /* dotykový cieľ */
  padding: .6rem .8rem;
  font-size: 1.05rem;
  color: var(--text);
  background: var(--plocha);
  border: 2px solid var(--ciara);
  border-radius: 10px;
}
.pole input:focus-visible {
  outline: none;
  border-color: var(--znacka);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .18);
}

.pole-s-tlacidlom { display: flex; gap: .5rem; align-items: stretch; }
.pole-s-tlacidlom input { flex: 1 1 auto; }

.oko, .tlacidlo-vedla {
  min-width: 48px;
  min-height: 48px;
  padding: 0 .9rem;
  font-size: 1rem;
  background: var(--pozadie);
  border: 2px solid var(--ciara);
  border-radius: 10px;
  cursor: pointer;
}
.oko:hover, .tlacidlo-vedla:hover { background: #eef2f6; }

.dvojica { display: flex; gap: 1rem; flex-wrap: wrap; }
.dvojica .pole { flex: 1 1 12rem; }
.dvojica .pole.uzka { flex: 0 1 8rem; }

.zaskrtavacie {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.5;
  cursor: pointer;
}
.zaskrtavacie input { width: 22px; height: 22px; margin-top: .15rem; flex: 0 0 auto; }

.napoveda { display: block; margin-top: .3rem; font-size: .82rem; color: var(--text-tichy); }

.tlacidlo-hlavne {
  display: inline-block;
  width: 100%;
  min-height: 52px;
  padding: .8rem 1.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--znacka);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.tlacidlo-hlavne:hover { background: var(--znacka-tmava); }

.tlacidlo-text {
  /* 48 px je minimum z CLAUDE.md §7 — platí aj pre tichšie tlačidlá.
     Práve na ne sa klepe rovnako často a menšie sú len preto, že
     vyzerajú menej dôležito.

     `inline-flex` je tu nutnosť, nie kozmetika: na `<a>` je predvolený
     `display: inline` a `min-height` sa naň NEVZŤAHUJE. Odkaz s touto
     triedou tak vyzeral ako tlačidlo, ale mal 36 px — a to je pod
     hranicou, na ktorej sa dá trafiť mokrým prstom.
     `.tlacidlo-hlavne` to má vyriešené `inline-block` od začiatku. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .5rem .8rem;
  font-size: .92rem;
  color: var(--text-tichy);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: underline;
}
.tlacidlo-text:hover { color: var(--text); }
.tlacidlo-text.siroke { width: 100%; }

.pod-formularom { margin: 1.25rem 0 0; text-align: center; font-size: .92rem; }
.vlozeny-formular { display: inline; }
.vlozeny-formular.odsadene { display: block; margin-top: 1.5rem; }

.chyba {
  margin: 0 0 .25rem;
  padding: .8rem 1rem;
  font-size: .92rem;
  color: #7f1d1d;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
}

/* ── Dlaždice typov prevádzky ────────────────────────────────── */
.dlazdice {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .6rem;
}
.dlazdica input { position: absolute; opacity: 0; pointer-events: none; }
.dlazdica-obsah {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 88px;
  padding: .7rem .4rem;
  text-align: center;
  background: var(--plocha);
  border: 2px solid var(--ciara);
  border-radius: 12px;
  cursor: pointer;
}
.dlazdica-obsah:hover { border-color: var(--znacka); }
.dlazdica-ikona { font-size: 1.6rem; line-height: 1; }
.dlazdica-nazov { font-size: .85rem; font-weight: 600; }
.dlazdica input:checked + .dlazdica-obsah {
  border-color: var(--znacka);
  background: #f0fdfa;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, .25);
}
.dlazdica input:focus-visible + .dlazdica-obsah {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .35);
}

/* ── Hlavička prihláseného ───────────────────────────────────── */
.hlavicka-stav { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.hlavicka-meno { font-size: .9rem; color: var(--text-tichy); }
.odznak-trial {
  padding: .3rem .7rem;
  font-size: .8rem;
  font-weight: 700;
  color: #78350f;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 99px;
}

/* ── Bannery ─────────────────────────────────────────────────── */
.banner {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: .7rem 1rem;
  font-size: .92rem;
  text-align: center;
}
.banner-upozornenie { color: #78350f; background: #fef3c7; border-bottom: 1px solid #fcd34d; }
.banner-uspech { color: #14532d; background: #dcfce7; border-bottom: 1px solid #86efac; }
.banner-chyba { color: #7f1d1d; background: #fef2f2; border-bottom: 1px solid #fecaca; }

/* ── Prehľad ─────────────────────────────────────────────────── */
.prehlad { max-width: 56rem; margin: 0 auto; }
.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.karta {
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: 14px;
  padding: 1.25rem;
}
.karta h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.karta-cakanie { background: #f8fafc; border-style: dashed; }
.zoznam { margin: 0; padding-left: 1.1rem; }
.cipy { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.cipy li {
  padding: .2rem .55rem;
  font-size: .78rem;
  color: var(--text-tichy);
  background: var(--pozadie);
  border: 1px solid var(--ciara);
  border-radius: 99px;
}


/* ═══════════════════════════════════════════════════════════════
   NASTAVENIA — zamestnanci a tablety (Prompt 5)
   ═══════════════════════════════════════════════════════════════ */

.podzalozky { display: flex; gap: .35rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.podzalozky a {
  padding: .55rem 1rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-tichy);
  text-decoration: none;
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: 99px;
}
.podzalozky a.aktivna { color: #fff; background: var(--znacka); border-color: var(--znacka); }

.karty-ludi { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.karta-cloveka.nefunkcny { opacity: .6; }

.clovek-hlavicka { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.clovek-hlavicka > span:nth-child(2) { flex: 1 1 8rem; line-height: 1.35; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  flex: 0 0 auto;
}

.stitok {
  padding: .2rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-tichy);
  background: var(--pozadie);
  border: 1px solid var(--ciara);
  border-radius: 99px;
  white-space: nowrap;
}
.stitok-ok { color: #14532d; background: #dcfce7; border-color: #86efac; }
.stitok-chyba { padding: .1rem .45rem; font-size: .72rem; color: #7f1d1d; background: #fef2f2; border: 1px solid #fecaca; border-radius: 99px; }

.rozbalovacie { margin-top: .9rem; }
.rozbalovacie summary {
  padding: .5rem 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--znacka);
  cursor: pointer;
}
.formular.tesny { gap: .8rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--ciara); }

.pole select, .pole input[type="date"] {
  width: 100%;
  min-height: 48px;
  padding: .6rem .8rem;
  font-size: 1rem;
  color: var(--text);
  background: var(--plocha);
  border: 2px solid var(--ciara);
  border-radius: 10px;
}

.farby { display: flex; flex-wrap: wrap; gap: .5rem; }
.farba input { position: absolute; opacity: 0; pointer-events: none; }
.farba span {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
}
.farba input:checked + span { border-color: var(--text); }

.riadok-akcii { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--ciara); }
.tlacidlo-text.nebezpecne { color: var(--odchylka); }

.karta-kodu { text-align: center; background: #f0fdfa; border-color: #99f6e4; }
.parovaci-kod {
  margin: .75rem 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--znacka-tmava);
}
.pole-kodu {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.6rem !important;
  text-align: center;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.banner-upsell { color: #78350f; background: #fef3c7; border-bottom: 1px solid #fcd34d; }


/* ═══════════════════════════════════════════════════════════════
   ODCHÝLKY (Prompt 7)
   ═══════════════════════════════════════════════════════════════ */

.odznak {
  display:inline-block; min-width:1.4rem; padding:.1rem .4rem; margin-left:.4rem;
  font-size:.78rem; font-weight:700; text-align:center; color:#fff;
  background:var(--odchylka); border-radius:99px;
}
.podzalozky a.aktivna .odznak { background:#fff; color:var(--odchylka); }

.odch-zoznam { list-style:none; padding:0; margin:0; }
.odch-riadok {
  margin-bottom:.6rem; background:var(--plocha);
  border:1px solid var(--ciara); border-left:5px solid var(--ciara);
  border-radius:12px;
}
.odch-riadok.zav-vysoka { border-left-color:var(--odchylka); }
.odch-riadok.zav-stredna { border-left-color:var(--varovanie); }
.odch-riadok.zav-nizka { border-left-color:var(--text-tichy); }
.odch-riadok a { display:block; padding:.9rem 1.1rem; text-decoration:none; color:var(--text); }
.odch-riadok a:hover { background:var(--pozadie); }
.odch-hlavicka { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.odch-meta { display:block; margin-top:.35rem; font-size:.82rem; color:var(--text-tichy); }
.odch-uloha { color:var(--odchylka); font-weight:600; }

.stitok-vysoka { color:#fff; background:var(--odchylka); border-color:var(--odchylka); }
.stitok-stredna { color:#78350f; background:#fef3c7; border-color:#fcd34d; }
.stitok-nizka { color:var(--text-tichy); }

.odch-detail { max-width:46rem; }
.odch-foto { max-width:100%; border-radius:12px; border:1px solid var(--ciara); }

.odch-ulohy { list-style:none; padding:0; margin:0; }
.odch-ulohy li {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--ciara); flex-wrap:wrap;
}
.odch-ulohy li:last-child { border-bottom:0; }
.odch-ulohy .nesplnena { color:var(--odchylka); font-weight:600; }
.odch-ulohy .splnena { color:var(--ok); }
.odch-ulohy small { display:block; font-weight:400; }

.odch-os { list-style:none; padding:0; margin:0; }
.odch-os li {
  display:flex; gap:1rem; padding:.8rem 0 .8rem 1rem;
  border-left:3px solid var(--ciara); margin-left:.4rem;
}
.odch-os li.krok-napravne_opatrenie { border-left-color:var(--znacka); }
.odch-os li.krok-zmena_stavu { border-left-color:var(--varovanie); }
.odch-cas { flex:0 0 6.5rem; font-size:.82rem; color:var(--text-tichy); }
.odch-text { display:flex; flex-direction:column; gap:.15rem; }
.odch-kto { font-size:.8rem; color:var(--text-tichy); }
.odch-obsah { white-space:pre-line; }


/* ── Mesačný kalendár splnenosti (Prompt 8) ──────────────────── */
.kal-hlavicka { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.kal-mriezka { display:grid; grid-template-columns:repeat(7,1fr); gap:.35rem; margin:1rem 0; }
.kal-nazov-dna {
  text-align:center; font-size:.75rem; font-weight:700; color:var(--text-tichy);
  text-transform:uppercase; padding:.3rem 0;
}
.kal-den {
  position:relative; aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.15rem;
  border:1px solid var(--ciara); border-radius:8px; font-size:.85rem;
}
.kal-den small { font-size:.65rem; color:var(--text-tichy); }
.kal-prazdne { border:0; }
.kal-zeleny { background:#dcfce7; border-color:#4ade80; }
.kal-ciastocny { background:#fef3c7; border-color:#fcd34d; }
.kal-prazdny { background:var(--plocha); }
.kal-zatvorene { background:var(--pozadie); color:var(--text-tichy); }
.kal-buduci { background:var(--plocha); opacity:.45; }
.kal-dnes { outline:2px solid var(--znacka); outline-offset:1px; }
.kal-sviatok::after {
  content:"•"; position:absolute; top:2px; right:5px; color:var(--znacka); font-size:.8rem;
}
.kal-legenda { display:flex; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--text-tichy); }
.kal-vzorka { display:inline-block; width:.9rem; height:.9rem; border-radius:3px; border:1px solid var(--ciara); vertical-align:-2px; margin-right:.25rem; }
.san-sprava { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }


/* ── Sanitačný plán: správa šablón ───────────────────────────── */
.san-tabulka { width:100%; border-collapse:collapse; margin:.6rem 0 1rem; }
.san-tabulka th, .san-tabulka td {
  padding:.55rem .5rem; text-align:left; vertical-align:top;
  border-bottom:1px solid #e2e8f0; font-size:.92rem;
}
.san-tabulka th { color:#475569; font-weight:600; }
.san-tabulka td small { display:block; color:#64748b; font-size:.8rem; }
.san-akcie { white-space:nowrap; }
.san-akcie summary { cursor:pointer; color:#0f766e; }
.san-akcie form { margin-top:.4rem; }
.san-trojica { display:grid; gap:.6rem; grid-template-columns:repeat(3, 1fr); }
.san-dni { border:1px solid #e2e8f0; border-radius:10px; padding:.6rem .8rem; }
.san-dni legend { padding:0 .3rem; }
.san-den { display:inline-flex; align-items:center; gap:.3rem;
  min-height:48px; margin-right:.7rem; }
.san-pridanie summary { cursor:pointer; color:#0f766e; font-weight:600;
  min-height:48px; display:flex; align-items:center; }

@media (max-width: 40rem) {
  .san-trojica { grid-template-columns:1fr; }
  .san-tabulka thead { display:none; }
  .san-tabulka tr { display:block; border-bottom:2px solid #e2e8f0;
    padding:.5rem 0; }
  .san-tabulka td { display:block; border:0; padding:.25rem 0; }
}


/* ── Evidencie: doklady s termínom (Prompt 15) ────────────────
   Farba je tu nositeľ informácie, nie ozdoba: červená = po termíne,
   oranžová = čoskoro končí. Preto ju nikdy nenesie len farba —
   pri každom stave je aj ikona a slovo. */
.ev-cipy { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin:1rem 0; }
.ev-cip {
  display:flex; align-items:center; gap:.4rem; min-height:48px;
  padding:.5rem .9rem; text-decoration:none; color:var(--text);
  background:var(--plocha); border:1px solid var(--ciara); border-radius:99px;
}
.ev-cip:hover { border-color:var(--znacka); }
.ev-cip.aktivny { border-width:2px; box-shadow:inset 0 0 0 1px var(--ciara); }
.ev-cip-ikona { font-size:1.1rem; line-height:1; }
.ev-cip-pocet { font-size:1.1rem; font-weight:700; }
.ev-cip-nazov { font-size:.85rem; color:var(--text-tichy); }

.ev-filtre { display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end;
  margin:0 0 1rem; }
.ev-filtre .pole { flex:1 1 12rem; margin:0; }
.ev-filter-archiv { flex:0 0 auto; margin:0; align-items:center; }
.ev-akcie-hore { display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
  margin-bottom:1rem; }

.ev-zoznam { list-style:none; padding:0; margin:0; }
.ev-riadok {
  background:var(--plocha); border:1px solid var(--ciara);
  border-left:4px solid var(--ciara); border-radius:12px; margin-bottom:.6rem;
}
.ev-riadok a { display:block; padding:.9rem 1.1rem; text-decoration:none;
  color:var(--text); }
.ev-riadok a:hover { background:var(--pozadie); }
.ev-hlavicka { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.ev-ikona { font-size:1.2rem; line-height:1; }
.ev-meta { display:block; margin-top:.35rem; font-size:.82rem;
  color:var(--text-tichy); }
.ev-vazba { white-space:nowrap; }
.ev-alarm { color:var(--odchylka); font-weight:700; }

.ev-stitok {
  display:inline-block; padding:.15rem .55rem; font-size:.75rem;
  font-weight:600; border:1px solid var(--ciara); border-radius:99px;
  white-space:nowrap;
}
/* Stavy dokladu — poradie a význam definuje core/limity.py. */
.ev-riadok.ev-stav-prosla { border-left-color:var(--odchylka); }
.ev-riadok.ev-stav-konci { border-left-color:var(--varovanie); }
.ev-riadok.ev-stav-platna { border-left-color:var(--ok); }
.ev-riadok.ev-stav-archiv { opacity:.65; }
.ev-stitok.ev-stav-prosla { color:#7f1d1d; background:#fef2f2; border-color:#fecaca; }
.ev-stitok.ev-stav-konci { color:#78350f; background:#fef3c7; border-color:#fcd34d; }
.ev-stitok.ev-stav-platna { color:#14532d; background:#dcfce7; border-color:#86efac; }
.ev-stitok.ev-stav-bez_terminu { color:var(--text-tichy); }
.ev-stitok.ev-stav-archiv { color:var(--text-tichy); background:var(--pozadie); }
.ev-cip.ev-stav-prosla { border-color:#fecaca; background:#fef2f2; }
.ev-cip.ev-stav-konci { border-color:#fcd34d; background:#fef3c7; }
.ev-cip.ev-stav-platna { border-color:#86efac; background:#dcfce7; }

/* Výber typu novej evidencie */
.ev-typy { list-style:none; padding:0; margin:1rem 0;
  display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr)); }
.ev-typy a {
  display:flex; gap:.8rem; align-items:flex-start; min-height:48px;
  padding:.9rem 1rem; text-decoration:none; color:var(--text);
  background:var(--plocha); border:1px solid var(--ciara); border-radius:12px;
}
.ev-typy a:hover { border-color:var(--znacka); }
.ev-typ-ikona { font-size:1.5rem; line-height:1.2; }
.ev-typ-text { display:flex; flex-direction:column; gap:.15rem; }

/* Detail dokladu */
.ev-detail { max-width:46rem; }
.ev-formular { max-width:46rem; }
.ev-osoba { max-width:46rem; }
.ev-udaje { display:grid; grid-template-columns:10rem 1fr; gap:.35rem .8rem;
  margin:0; }
.ev-udaje dt { color:var(--text-tichy); font-size:.85rem; }
.ev-udaje dd { margin:0; }
.ev-napoveda { margin-top:.6rem; padding:.6rem .8rem; background:var(--pozadie);
  border-radius:10px; }

.ev-udalosti { list-style:none; padding:0; margin:0; }
.ev-udalost { display:flex; gap:.8rem; align-items:flex-start;
  padding:.7rem 0; border-bottom:1px solid var(--ciara); flex-wrap:wrap; }
.ev-udalost:last-child { border-bottom:0; }
.ev-udalost-datum { flex:0 0 6rem; font-size:.85rem; font-weight:600; }
.ev-udalost-text { display:flex; flex-direction:column; gap:.15rem;
  flex:1 1 14rem; }
/* Stornované sa NESKRÝVAJÚ — prečiarknutý riadok s dôvodom je dôkaz,
   zmiznutý riadok je podozrenie (CLAUDE.md §3). */
.ev-stornovana .ev-udalost-datum,
.ev-stornovana .ev-udalost-text > strong,
.ev-stornovana .ev-udalost-text > span { text-decoration:line-through;
  color:var(--text-tichy); }
.ev-storno-dovod { display:block; margin-top:.2rem; font-size:.8rem;
  color:var(--odchylka); }
.ev-storno-form { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.ev-storno-form input { padding:.4rem .6rem; font-size:.85rem;
  border:1px solid var(--ciara); border-radius:8px; }

.ev-historia { list-style:none; padding:0; margin:0; }
.ev-historia li { padding:.5rem 0; border-bottom:1px solid var(--ciara); }
.ev-historia li:last-child { border-bottom:0; }

.ev-ucastnici { margin:0; padding-left:1.1rem; }
.ev-ucastnici-vyber { border:1px solid var(--ciara); border-radius:10px;
  padding:.6rem .8rem; }
.ev-ucastnici-vyber legend { padding:0 .3rem; }

.ev-chybaju { border-color:#fcd34d; background:#fffbeb; }
.ev-chybaju-zoznam { list-style:none; padding:0; margin:.6rem 0 0; }
.ev-chybaju-zoznam li { display:flex; gap:.7rem; align-items:flex-start;
  padding:.6rem 0; border-bottom:1px solid #fde68a; }
.ev-chybaju-zoznam li:last-child { border-bottom:0; }
.ev-chybaju-zoznam li > span:nth-child(2) { flex:1 1 12rem; }

.ev-tabulka { width:100%; border-collapse:collapse; margin:.6rem 0 1rem; }
.ev-tabulka th, .ev-tabulka td {
  padding:.55rem .5rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--ciara); font-size:.92rem;
}
.ev-tabulka th { color:#475569; font-weight:600; }
.ev-akcie { white-space:nowrap; }
.ev-pridanie summary { cursor:pointer; color:var(--znacka); font-weight:600;
  min-height:48px; display:flex; align-items:center; }

@media (max-width: 40rem) {
  .ev-udaje { grid-template-columns:1fr; }
  .ev-udaje dt { margin-top:.4rem; }
  .ev-tabulka thead { display:none; }
  .ev-tabulka tr { display:block; border-bottom:2px solid var(--ciara);
    padding:.5rem 0; }
  .ev-tabulka td { display:block; border:0; padding:.25rem 0; }
}


/* ── Príjem tovaru: história a dodávatelia (Prompt 16) ────────
   Web má len dve obrazovky — zoznam príjmov a register dodávateľov.
   Samotný zápis žije na tablete pri rampe (static/css/kiosk.css). */
.pri-filter { display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:1rem; }
.pri-filter .pole { margin:0; }

.pri-tabulka { width:100%; border-collapse:collapse; margin:.6rem 0 1rem; }
.pri-tabulka th, .pri-tabulka td {
  padding:.55rem .5rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--ciara); font-size:.92rem;
}
.pri-tabulka th { color:#475569; font-weight:600; }
.pri-tabulka td small { display:block; color:#64748b; font-size:.8rem; }

/* Stornovaný riadok sa NESKRÝVA, len prečiarkne. Denník, z ktorého sa
   dá niečo odstrániť, nie je dôkaz (CLAUDE.md §3). */
.pri-tabulka .pri-stornovany td { color:#94a3b8; text-decoration:line-through; }
.pri-tabulka .pri-stornovany td small { text-decoration:none; }
.pri-tabulka .pri-mimo td:first-child { border-left:4px solid #dc2626;
  padding-left:.4rem; }

@media (max-width: 40rem) {
  .pri-tabulka thead { display:none; }
  .pri-tabulka tr { display:block; border-bottom:2px solid var(--ciara);
    padding:.5rem 0; }
  .pri-tabulka td { display:block; border:0; padding:.25rem 0; }
}


/* ── Režim kontroly ──────────────────────────────────────────────
   Read-only prezeranie denníka pred inšpektorom. Pás je nápadný
   zámerne: je to stav, v ktorom sa nedá zapisovať, a používateľ to
   musí vedieť skôr, než to skúsi. */
.rezim-kontroly {
  display: flex; gap: 1rem; align-items: center; justify-content: center;
  flex-wrap: wrap;
  background: #fff5f5; color: #b91c1c;
  border: 1px solid #b91c1c; border-radius: 8px;
  padding: .6rem 1rem; margin-bottom: 1rem;
  font-weight: 600; letter-spacing: .02em;
}
.rezim-kontroly .tlacidlo-text { color: #b91c1c; text-decoration: underline; }