/* Šoltýs — firemný systém. Čistý čiernobiely štýl podľa loga. */
:root {
  --pozadie: #f6f6f4;
  --karta: #ffffff;
  --jemne: #fafaf9;
  --text: #14140f;
  --text2: #5f5e58;
  --text3: #8d8c85;
  --ciara: #e3e2dd;
  --ciara2: #cfcec7;
  --akcent: #14140f;
  --modra-bg: #eaf0f8;
  --modra: #1b4f8a;
  --zelena-bg: #e9f3e4;
  --zelena: #3d6b18;
  --oranz-bg: #fbf0dc;
  --oranz: #8a5a0c;
  --cerv-bg: #fbeaea;
  --cerv: #9c2b2b;
  --r: 10px;
  --tien: 0 1px 2px rgba(0, 0, 0, .04);
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--pozadie); color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}

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

/* ---------- rozloženie ---------- */
#aplikacia { min-height: 100%; }

.rozvrh { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.bocny {
  background: var(--karta); border-right: 1px solid var(--ciara);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.znacka { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; }
.znacka img { width: 38px; height: 38px; object-fit: contain; }
.znacka b { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.znacka span { display: block; font-size: 11px; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; }

.polozka-menu {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  color: var(--text2); text-decoration: none; font-size: 14px; cursor: pointer; border: 0;
  background: none; width: 100%; text-align: left;
}
.polozka-menu:hover { background: var(--jemne); color: var(--text); }
.polozka-menu.akt { background: var(--text); color: #fff; }
.polozka-menu .pocet {
  margin-left: auto; font-size: 11px; background: var(--ciara); color: var(--text2);
  padding: 1px 7px; border-radius: 20px;
}
.polozka-menu.akt .pocet { background: rgba(255, 255, 255, .25); color: #fff; }
.menu-nadpis { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); padding: 14px 10px 6px; }

/* Na celú obrazovku nech je vidieť celú tabuľku zákaziek bez rolovania doprava. */
/* `min-width: 0` je tu kvôli mriežke: políčko mriežky sa inak nezmenší pod
   šírku najširšieho obsahu a na telefóne sa celá stránka posúva do strany.
   Široká tabuľka sa potom posúva sama v `.tabulka-obal` (29. 9. 2026). */
.obsah { padding: 22px 26px 90px; max-width: 1800px; min-width: 0; }

/* Obal každej tabuľky. Na počítači nerobí nič, na telefóne sa široká tabuľka
   posúva do strany namiesto toho, aby roztiahla celú stránku. Záporné okraje
   v mobilnom bloku jej dávajú celú šírku obrazovky, nech sa dá posúvať aj
   prstom pri kraji. */
.tabulka-obal { overflow-x: auto; }
.hlavicka-str { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hlavicka-str h1 { font-size: 21px; font-weight: 600; margin: 0; }
.hlavicka-str .vpravo { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- karty, tabuľky ---------- */
.karta { background: var(--karta); border: 1px solid var(--ciara); border-radius: var(--r); box-shadow: var(--tien); }
.karta + .karta { margin-top: 14px; }
.karta-tel { padding: 16px 18px; }
.karta-hl { padding: 13px 18px; border-bottom: 1px solid var(--ciara); display: flex; align-items: center; gap: 10px; }
.karta-hl h2 { font-size: 15px; font-weight: 600; margin: 0; }
.karta-hl .vpravo { margin-left: auto; display: flex; gap: 8px; }

.mriezka { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mriezka-2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.dlazdica { background: var(--karta); border: 1px solid var(--ciara); border-radius: var(--r); padding: 14px 16px; }
.dlazdica .popis { font-size: 12px; color: var(--text2); margin: 0 0 6px; }
.dlazdica .hodnota { font-size: 25px; font-weight: 600; margin: 0; letter-spacing: -.02em; }
.dlazdica .pod { font-size: 12px; color: var(--text3); margin: 4px 0 0; }

table.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tab th {
  text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text3); padding: 9px 14px; border-bottom: 1px solid var(--ciara);
  white-space: nowrap;
}
table.tab th.zorad { cursor: pointer; user-select: none; }
table.tab th.zorad:hover { color: var(--text); background: var(--jemne); }
table.tab th.zorad.akt { color: var(--text); }
table.tab td { padding: 11px 14px; border-bottom: 1px solid var(--ciara); vertical-align: middle; }
table.tab tbody tr:last-child td { border-bottom: 0; }
table.tab tbody tr.klik { cursor: pointer; }
table.tab tbody tr.klik:hover { background: var(--jemne); }
.cislo { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Rozbalený riadok — podrobnosti pod zákazkou. Riadok aj jeho podriadok majú
   spoločné pozadie, aby bolo vidieť, že patria k sebe; čiara medzi nimi mizne. */
table.tab tbody tr.rozbaleny > td { background: var(--jemne); border-bottom: 0; }
table.tab tbody tr.rozbal > td { background: var(--jemne); padding: 2px 14px 14px; }
/* Značka stavu, na ktorú sa dá kliknúť — vyzerá ako značka, správa sa ako
   tlačidlo. Bez vlastného rámu, nech riadok tabuľky ostane pokojný. */
button.ako-znacka {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  display: inline-flex; cursor: pointer;
}
button.ako-znacka:hover .znacka-stav { filter: brightness(.93); }
/* Údaj, ktorý sa dá kliknutím skopírovať — vyzerá ako text, nie ako tlačidlo. */
button.kopirovatelne {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; text-decoration: underline dotted var(--ciara2);
  text-underline-offset: 3px;
}
button.kopirovatelne:hover { color: var(--modra); text-decoration-color: var(--modra); }

/* Stav a úhrada patria k sebe — medzi nimi stačí úzka medzera. */
table.tab td.tesne-vpravo, table.tab th.tesne-vpravo { padding-right: 4px; }
table.tab td.tesne-vlavo, table.tab th.tesne-vlavo { padding-left: 4px; }
/* Stĺpec s tlačidlami — dve pod sebou, nech riadok nerastie do šírky. */
td.akcie { white-space: nowrap; }
td.akcie > div { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
td.akcie .tl { justify-content: center; }

.zoznam-riadok {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--ciara); font-size: 14px;
}
.zoznam-riadok:last-child { border-bottom: 0; }
/* Úloha má dva riadky: hlavný — všetko vedľa seba, nič sa nezalamuje — a pod
   ním tenší s telefónom a adresou zákazníka (25. 8. 2026). */
.riadok-uloha { flex-direction: column; align-items: stretch; padding: 6px 14px; gap: 3px; }
.riadok-uloha .uloha-hlavne {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; min-width: 0;
}
/* Tlačidlá úlohy sú vpravo na konci riadku. Na telefóne im mobilný blok dá
   vlastný riadok — na 375 px sa vedľa mena nezmestia. */
.uloha-akcie { display: flex; gap: 5px; flex: 0 0 auto; margin-left: auto; }
/* Meno a čo treba spraviť stoja na telefóne vedľa seba; keď sa nezmestia,
   zalomia sa na ďalší riadok namiesto toho, aby sa orezali. */
.uloha-text {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  flex: 1 1 auto; min-width: 0;
}
/* Schované tlačidlá v okne — pod sebou a cez celú šírku, aby sa dali trafiť. */
.akcie-v-okne { display: flex; flex-direction: column; gap: 8px; }
/* Zbalený filter — na tlačidle je vybraná možnosť, šípka hovorí, že sa rozbalí. */
.filter-tl { max-width: 100%; }
.filter-tl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-tl .sipka { margin-left: auto; color: var(--text3); font-size: 11px; }
/* Riadok zbalených filtrov na telefóne: dve tlačidlá a hľadanie na jednom
   riadku. Tlačidlá si delia miesto, hľadanie dostane celý zvyšok. */
.filtre-zbalene { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.filtre-zbalene > * { min-width: 0; }
.filtre-zbalene .filter-tl { flex: 1 1 0; }
.filtre-zbalene input[type="search"] { flex: 1 1 90px; min-width: 0; max-width: none; }
.akcie-v-okne .tl, .akcie-v-okne .tl.maly {
  width: 100%; justify-content: center; min-height: 46px; font-size: 15px;
}
.riadok-uloha .stitok, .riadok-uloha .znacka-stav { padding: 2px 8px; font-size: 11px; }
.riadok-uloha .tl { padding: 3px 9px; font-size: 12px; }
/* Zvýraznená úloha — priorita. Farbí sa celý riadok, nie štítok: v tenkom
   riadku sa malý štítok stratí, farba pozadia nie. */
.riadok-uloha.prioritna { background: var(--oranz-bg); box-shadow: inset 3px 0 0 var(--oranz); }
.riadok-uloha.prioritna:hover { background: var(--oranz-bg); filter: brightness(.98); }
/* Telefón a adresa zákazníka pod menom a úlohou. Kliknutím sa kopírujú,
   na telefóne sa číslom volá — o to sa stará naKopirovanie() v app.js. */
.kontakt-uloha {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 12.5px; line-height: 1.3; color: var(--text2);
  white-space: nowrap; overflow: hidden;
}
.kontakt-uloha > * { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zoznam-riadok .vpravo { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- prvky ---------- */
.tl {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  background: var(--karta); border: 1px solid var(--ciara2); border-radius: 8px;
  cursor: pointer; font-size: 13.5px; white-space: nowrap; transition: background .12s;
}
.tl:hover { background: var(--jemne); }
.tl:active { transform: scale(.985); }
.tl.hl { background: var(--text); color: #fff; border-color: var(--text); }
.tl.hl:hover { background: #33332c; }
.tl.nebezp { color: var(--cerv); border-color: #e8c9c9; }
.tl.maly { padding: 5px 10px; font-size: 12.5px; }
.tl:disabled { opacity: .45; cursor: not-allowed; }

/* Zoznam na zaškrtnutie (vyberZoznam v app.js) — všetky možnosti naraz,
   ťukne sa na tú, čo platí. Zvolený riadok drží tmavší rám, nech je vidno
   aj bez pozerania na krúžok. */
.vyber-zoznam { display: flex; flex-direction: column; gap: 3px; }
.vyber-polozka {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; font-size: 14px;
  border: 1px solid var(--ciara); border-radius: 8px; cursor: pointer;
}
.vyber-polozka:hover { background: var(--jemne); }
.vyber-polozka > input { width: auto; margin: 0; flex: 0 0 auto; }
.vyber-polozka:has(input:checked),
/* To isté, keď sa vyberá klikom na celý riadok (výber zákazky), nie prepínačom. */
.vyber-polozka.akt { border-color: var(--text); background: var(--jemne); }

label.pole { display: block; margin-bottom: 12px; }
label.pole > span { display: block; font-size: 12.5px; color: var(--text2); margin-bottom: 5px; }
/* Pozor na typy tel/email/month — bez nich si prehliadač určí vlastnú šírku
   a pole potom prekrýva susedné. */
input[type=text], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=search], input[type=tel], input[type=email],
input[type=month], input[type=file], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--ciara2); border-radius: 8px;
  background: var(--karta); outline: none; font-size: 14px;
}
input:focus, select:focus, textarea:focus { border-color: var(--text3); box-shadow: 0 0 0 3px rgba(0, 0, 0, .05); }
textarea { min-height: 76px; resize: vertical; }
.riadok-poli { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Dve polia vedľa seba aj v úzkom okne — `riadok-poli` by ich tam zlomil. */
.riadok-dva { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 2px; }
/* Presne tri stĺpce — `auto-fit` by pri širokom okne narobil päť a polia by
   ostali úzke s prázdnom vpravo. Na úzkej obrazovke sa zbalia pod seba. */
.riadok-3 { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.riadok-2 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .riadok-3, .riadok-2 { grid-template-columns: 1fr; }
}

/* Suma je pri zákazke to hlavné číslo — hrubší rám, nech ju oko nájde hneď.
   Farbu nechávame bežnú, aby to nevyzeralo ako chyba. */
label.pole.hlavne > input {
  border-width: 2px; border-color: var(--text3);
}
label.pole.hlavne > span { font-weight: 600; color: var(--text); }

.znacka-stav, .stitok {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  padding: 3px 9px; border-radius: 20px; background: var(--jemne);
  color: var(--text2); border: 1px solid var(--ciara); white-space: nowrap;
}
.st-modra { background: var(--modra-bg); color: var(--modra); border-color: transparent; }
.st-zelena { background: var(--zelena-bg); color: var(--zelena); border-color: transparent; }
.st-oranz { background: var(--oranz-bg); color: var(--oranz); border-color: transparent; }
.st-cerv { background: var(--cerv-bg); color: var(--cerv); border-color: transparent; }

.filtre { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cip {
  padding: 6px 13px; border: 1px solid var(--ciara2); border-radius: 20px;
  font-size: 13px; cursor: pointer; background: var(--karta); color: var(--text2);
}
.cip.akt { background: var(--text); color: #fff; border-color: var(--text); }

.prazdne { padding: 42px 20px; text-align: center; color: var(--text3); font-size: 14px; }
.prazdne .ikona { font-size: 30px; opacity: .35; display: block; margin-bottom: 8px; }

/* ---------- dialóg ---------- */
.prekrytie {
  position: fixed; inset: 0; background: rgba(20, 20, 15, .38); display: flex;
  align-items: center; justify-content: center; padding: 16px; z-index: 60;
}
.dialog {
  background: var(--karta); border-radius: 14px; width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto; box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
}
.dialog-hl { padding: 16px 20px; border-bottom: 1px solid var(--ciara); display: flex; align-items: center; }
.dialog-hl h2 { font-size: 16px; font-weight: 600; margin: 0; }
.dialog-telo { padding: 18px 20px; }
.dialog-pata { padding: 14px 20px; border-top: 1px solid var(--ciara); display: flex; gap: 8px; justify-content: flex-end; }

/* Jeden deň zápisu hodín — vlastná karta s dátumom a hodinami (1. 9. 2026).
   Dní môže byť aj päť, tak nech je vidno, kde jeden končí a druhý začína. */
.den-hodin {
  border: 1px solid var(--ciara2); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 10px;
}
.den-hodin label:last-child { border-bottom: 0; }

/* ---------- oznámenia ---------- */
#oznamy { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 90; }
.oznam {
  background: var(--text); color: #fff; padding: 11px 16px; border-radius: 9px;
  font-size: 13.5px; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); max-width: 340px;
}
.oznam.chyba { background: var(--cerv); }

/* ---------- prihlásenie ---------- */
.prihl-obal { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.prihl { background: var(--karta); border: 1px solid var(--ciara); border-radius: 14px; padding: 30px 28px; width: 100%; max-width: 370px; }
.prihl img { width: 92px; display: block; margin: 0 auto 6px; }
.prihl h1 { font-size: 17px; text-align: center; margin: 0 0 22px; font-weight: 600; }

/* ---------- mobil ---------- */
.spodne-menu { display: none; }
.mob-hl { display: none; }

@media (max-width: 860px) {
  .rozvrh { grid-template-columns: 1fr; }
  .bocny { display: none; }
  .obsah { padding: 12px 13px 84px; }
  .hlavicka-str h1 { font-size: 18px; }
  .mob-hl {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: var(--karta); border-bottom: 1px solid var(--ciara); position: sticky; top: 0; z-index: 30;
  }
  .mob-hl img { width: 28px; }
  .mob-hl b { font-size: 14px; }
  .mob-hl .vpravo { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  .spodne-menu {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--karta);
    border-top: 1px solid var(--ciara); z-index: 50; padding-bottom: env(safe-area-inset-bottom);
  }
  .spodne-menu button {
    flex: 1; border: 0; background: none; padding: 9px 2px 8px; font-size: 10.5px;
    color: var(--text3); display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  }
  .spodne-menu button.akt { color: var(--text); font-weight: 600; }
  .spodne-menu button .i { font-size: 19px; line-height: 1; }
  table.tab th, table.tab td { padding: 9px 10px; }
  /* Tabuľka si berie celú šírku obrazovky — 13 px odsadenie `.obsah` jej tu
     len uberá miesto a posúvanie zastavuje kúsok pred okrajom. */
  .tabulka-obal { margin-left: -13px; margin-right: -13px; padding: 0 13px; }
  .dialog { max-height: 92vh; }
  /* Prst nie je myš: tlačidlo pod 44 px sa trafí na druhý raz (28. 9. 2026). */
  .tl { padding: 11px 15px; min-height: 44px; }
  .tl.maly { min-height: 38px; }
  .spodne-menu button { min-height: 52px; }
  .polozka-menu { min-height: 44px; }
  /* Pole s písmom menším než 16 px si iPhone pri písaní priblíži — a už sa
     neodzoomuje. Preto majú vstupy na telefóne väčšie písmo než na počítači. */
  input, select, textarea { font-size: 16px; }
  .velke-tl { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }
  /* Úloha je na počítači jeden riadok, na telefóne dva: hore meno, čo treba
     spraviť a dve tlačidlá, dole kontakt, pridelenie a termín. Päť tlačidiel
     v jednom rade by stránku vytiahlo na dvojnásobok obrazovky
     (29. 9. 2026). */
  .riadok-uloha .uloha-hlavne { flex-wrap: nowrap; gap: 8px; align-items: flex-start; }
  .uloha-akcie { margin-left: auto; flex-wrap: nowrap; }
  .riadok-uloha .tl { padding: 8px 12px; font-size: 14px; min-height: 40px; min-width: 42px; }
  .riadok-uloha .tl { justify-content: center; }
  /* Spodný riadok nesie okrem telefónu a adresy aj pridelenie a termín —
     musí sa smieť zalomiť, inak by sa koniec orezal. */
  .riadok-uloha .kontakt-uloha { flex-wrap: wrap; white-space: normal; }
  .riadok-uloha .kontakt-uloha > * { overflow: visible; }
}

/* jednoduché ikony ako text */
.i { font-style: normal; }