/* ==========================================================================
   tenus CRM — vzhľad
   Nadväzuje na tokeny portálu (static/style.css): bronzová #AF824E,
   teplé neutrály, rovnaké názvy premenných. Odlišuje sa len rozložením:
   portál je vycentrovaný formulár, CRM je aplikácia s bočnou ponukou
   a hustými tabuľkami.

   Názvy tried sú po slovensky, tak ako vo zvyšku portálu.
   ========================================================================== */

:root{
  --ink:#2B2A28; --ink-soft:#5C5854; --ink-faint:#8B857E;
  --paper:#F5F3F0; --card:#FFFFFF;
  --rule:#DCD6CE; --rule-soft:#EBE6E0;
  --accent:#AF824E; --accent-ink:#FFFFFF; --accent-soft:#F5EDE2;
  --accent-tmavsi:#8E663A;
  --ok:#4A6B45; --ok-soft:#EBF0E8;
  --warn:#9A6A25; --warn-soft:#F8F0E2;
  --crit:#96382C; --crit-soft:#F9EBE8;
  --info:#3B5F73; --info-soft:#E9F0F4;

  /* bočná ponuka je tmavá aj v svetlom režime — dáva aplikácii kostru */
  --bok:#26241F; --bok-ink:#D9D3CA; --bok-ink-jasny:#FFFFFF;
  --bok-rule:#39352E; --bok-aktiv:#332F27;

  --radius:8px; --radius-s:5px;
  --shadow:0 1px 2px rgba(43,42,40,.05), 0 8px 22px -16px rgba(43,42,40,.3);
  --shadow-vys:0 2px 4px rgba(43,42,40,.06), 0 14px 34px -18px rgba(43,42,40,.38);
  --bok-sirka:236px;
}

@media (prefers-color-scheme:dark){
  :root{
    --ink:#E9E5E0; --ink-soft:#ABA49C; --ink-faint:#847D75;
    --paper:#15140F; --card:#1F1D19;
    --rule:#36322B; --rule-soft:#28251F;
    --accent:#C99B67; --accent-ink:#1A1712; --accent-soft:#2A2318;
    --accent-tmavsi:#E0B583;
    --ok:#8FB287; --ok-soft:#1B2318;
    --warn:#D0A05C; --warn-soft:#2A2216;
    --crit:#DE9084; --crit-soft:#2E1C18;
    --info:#8FB4C9; --info-soft:#1A2329;
    --bok:#100F0C; --bok-ink:#A9A29A; --bok-ink-jasny:#F2EEE8;
    --bok-rule:#26241F; --bok-aktiv:#1E1C17;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -18px rgba(0,0,0,.85);
    --shadow-vys:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -20px rgba(0,0,0,.9);
  }
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"aktiv-grotesk","Segoe UI",-apple-system,BlinkMacSystemFont,
              "Helvetica Neue",Arial,sans-serif;
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:var(--accent-tmavsi);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ══════════════════ KOSTRA ══════════════════ */

.rozvrh{display:flex;min-height:100dvh}

.bok{
  width:var(--bok-sirka);flex:0 0 var(--bok-sirka);
  background:var(--bok);color:var(--bok-ink);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100dvh;overflow-y:auto;
}
.bok .znacka{
  display:flex;align-items:center;gap:10px;
  padding:18px 18px 16px;border-bottom:1px solid var(--bok-rule);
}
.bok .znacka svg{height:24px;width:auto;display:block}
.bok .znacka .co{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}
.bok nav{padding:12px 10px;flex:1}
.bok .skupina{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#6E675E;padding:14px 10px 6px;font-weight:700;
}
.bok a.polozka{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--radius-s);
  color:var(--bok-ink);font-size:14px;font-weight:500;
  text-decoration:none;position:relative;
}
.bok a.polozka:hover{background:var(--bok-aktiv);color:var(--bok-ink-jasny);
  text-decoration:none}
.bok a.polozka.aktiv{background:var(--bok-aktiv);color:var(--bok-ink-jasny)}
.bok a.polozka.aktiv::before{
  content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;
  background:var(--accent);border-radius:0 3px 3px 0;
}
.bok .polozka .ikona{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.bok .polozka.aktiv .ikona{opacity:1;color:var(--accent)}
.bok .odznak{
  margin-left:auto;background:var(--crit);color:#fff;
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;
  line-height:1.5;
}
.bok .odznak.tichy{background:var(--bok-rule);color:var(--bok-ink)}
.bok .kto{
  padding:12px 18px;border-top:1px solid var(--bok-rule);
  font-size:12.5px;color:#7D766D;
}
.bok .kto b{display:block;color:var(--bok-ink);font-size:13.5px;font-weight:600}
.bok .kto a{color:#7D766D;font-size:12px}

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

.vrch{
  background:var(--card);border-bottom:1px solid var(--rule);
  padding:0 26px;min-height:58px;display:flex;align-items:center;gap:18px;
  position:sticky;top:0;z-index:15;
}
.drobky{font-size:13px;color:var(--ink-faint);display:flex;align-items:center;gap:7px}
.drobky a{color:var(--ink-faint)}
.drobky b{color:var(--ink);font-weight:600}
.vrch .vpravo{margin-left:auto;display:flex;align-items:center;gap:10px}

main{padding:24px 26px 60px;flex:1;max-width:1560px;width:100%}

h1{font-size:23px;margin:0 0 4px;letter-spacing:-.015em;font-weight:700}
h2{font-size:16.5px;margin:0 0 12px;font-weight:650;letter-spacing:-.01em}
h3{font-size:13.5px;margin:0 0 8px;font-weight:650;color:var(--ink-soft)}
.podnadpis{color:var(--ink-soft);margin:0 0 20px;max-width:78ch;font-size:14px}
.hlava-stranky{display:flex;align-items:flex-start;gap:18px;margin-bottom:20px}
.hlava-stranky .akcie{margin-left:auto;margin-top:2px}

/* ══════════════════ KARTY ══════════════════ */

.karta{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:18px;
}
.karta > .telo{padding:18px 20px}
.karta > .telo > :first-child{margin-top:0}
.karta > .telo > :last-child{margin-bottom:0}
.karta > .hlavicka{
  padding:13px 20px;border-bottom:1px solid var(--rule-soft);
  display:flex;align-items:center;gap:12px;
}
.karta > .hlavicka h2{margin:0}
.karta > .hlavicka .vpravo{margin-left:auto;display:flex;gap:8px;align-items:center}
.karta > .pata{
  padding:11px 20px;border-top:1px solid var(--rule-soft);
  background:var(--rule-soft);border-radius:0 0 var(--radius) var(--radius);
  font-size:13px;color:var(--ink-soft);
}

.mriezka{display:grid;gap:18px}
.mriezka.dva{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.mriezka.tri{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ══════════════════ ČÍSLA ══════════════════ */

.cisla{
  display:grid;gap:14px;margin-bottom:20px;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
.cislo-karta{
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow);
  display:block;color:inherit;text-decoration:none;
}
a.cislo-karta:hover{border-color:var(--accent);text-decoration:none}
.cislo-karta .k{
  font-size:11px;color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:6px;font-weight:600;
}
.cislo-karta .h{font-size:26px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.cislo-karta .h.mensia{font-size:20px}
.cislo-karta .pod{font-size:12.5px;color:var(--ink-faint);margin-top:4px}
.cislo-karta.dobre .h{color:var(--ok)}
.cislo-karta.zle .h{color:var(--crit)}
.cislo-karta.pozor .h{color:var(--warn)}

/* ══════════════════ TABUĽKY ══════════════════ */

.tabwrap{overflow-x:auto;border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--rule-soft)}
thead th{
  background:var(--rule-soft);font-size:11.5px;color:var(--ink-soft);
  border-bottom:1px solid var(--rule);white-space:nowrap;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding-top:8px;padding-bottom:8px;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--rule-soft)}
tbody tr.zvyraznene{background:var(--accent-soft)}
td.cislo,th.cislo{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.hlavne{font-weight:600}
td.tiche,.tiche{color:var(--ink-faint)}
tr.suhrn td{
  border-top:2px solid var(--rule);font-weight:700;background:var(--rule-soft);
}
tr.medzisucet td{font-weight:600;background:var(--rule-soft)}
.tabulka-prazdna{padding:34px 20px;text-align:center;color:var(--ink-faint)}
.tabulka-prazdna .velke{font-size:15px;color:var(--ink-soft);margin-bottom:4px}

/* ══════════════════ ŠTÍTKY ══════════════════ */

.znak{
  display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;
  font-weight:650;background:var(--rule-soft);color:var(--ink-soft);
  white-space:nowrap;line-height:1.6;
}
.znak.ok{background:var(--ok-soft);color:var(--ok)}
.znak.pozor{background:var(--warn-soft);color:var(--warn)}
.znak.zle{background:var(--crit-soft);color:var(--crit)}
.znak.info{background:var(--info-soft);color:var(--info)}
.znak.akcent{background:var(--accent-soft);color:var(--accent-tmavsi)}

.bodka{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--ink-faint);margin-right:6px;vertical-align:middle}
.bodka.ok{background:var(--ok)} .bodka.pozor{background:var(--warn)}
.bodka.zle{background:var(--crit)} .bodka.akcent{background:var(--accent)}

/* ══════════════════ HLÁSENIA ══════════════════ */

.hlasenie{
  border-left:3px solid var(--accent);background:var(--accent-soft);
  padding:11px 15px;border-radius:0 var(--radius-s) var(--radius-s) 0;
  margin-bottom:14px;font-size:13.5px;
}
.hlasenie.ok{border-color:var(--ok);background:var(--ok-soft)}
.hlasenie.pozor{border-color:var(--warn);background:var(--warn-soft)}
.hlasenie.chyba{border-color:var(--crit);background:var(--crit-soft)}
.hlasenie b{font-weight:650}
.hlasenie ul{margin:6px 0 0;padding-left:20px}
.hlasenie li{margin:2px 0}

/* ══════════════════ TLAČIDLÁ ══════════════════ */

button,.tlacidlo{
  font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;
  padding:7px 14px;border-radius:var(--radius-s);border:1px solid transparent;
  background:var(--accent);color:var(--accent-ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;line-height:1.45;
}
button:hover,.tlacidlo:hover{background:var(--accent-tmavsi);color:var(--accent-ink);
  text-decoration:none}
button.tiche,.tlacidlo.tiche{
  background:var(--card);color:var(--ink-soft);border-color:var(--rule);
}
button.tiche:hover,.tlacidlo.tiche:hover{background:var(--rule-soft);color:var(--ink)}
button.holé,.tlacidlo.holé{background:none;border-color:transparent;
  color:var(--ink-soft);padding:5px 8px}
button.holé:hover,.tlacidlo.holé:hover{background:var(--rule-soft);color:var(--ink)}
button:disabled{opacity:.45;cursor:not-allowed}
button.malé,.tlacidlo.malé{padding:4px 10px;font-size:12.5px}
.akcie{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* ══════════════════ FORMULÁRE ══════════════════ */

label{display:block;font-weight:650;font-size:12.5px;margin-bottom:4px;
  color:var(--ink-soft)}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=file],select,textarea{
  width:100%;padding:7px 10px;border:1px solid var(--rule);
  border-radius:var(--radius-s);background:var(--card);color:var(--ink);
  font:inherit;font-size:14px;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft);
}
.pole{margin-bottom:13px}
.napoveda{font-size:12px;color:var(--ink-faint);margin-top:4px}
.riadok{display:flex;gap:13px;flex-wrap:wrap;align-items:flex-end}
.riadok > *{flex:1;min-width:160px}
.riadok .uzke{flex:0 0 130px;min-width:130px}

.filtre{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
}
.filtre input,.filtre select{width:auto;min-width:180px}
.filtre .hladanie{min-width:260px}

/* ══════════════════ ÚDAJOVÝ ZOZNAM ══════════════════ */

.udaje{display:grid;gap:2px 26px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.udaj{padding:7px 0;border-bottom:1px solid var(--rule-soft)}
.udaj .k{font-size:11.5px;color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;margin-bottom:1px}
.udaj .h{font-size:14.5px;font-weight:500}
.udaj .h.prazdny{color:var(--ink-faint);font-style:italic;font-weight:400}

/* skryté citlivé údaje */
.skryte{
  font-family:ui-monospace,"Cascadia Mono","Consolas",monospace;
  letter-spacing:.02em;
}
.odhalit{
  background:none;border:0;padding:0 0 0 8px;color:var(--accent-tmavsi);
  font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;
}
.odhalit:hover{background:none;color:var(--accent)}

/* ══════════════════ ČASOVÁ OS ══════════════════ */

.osa{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.osa::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:var(--rule);
}
.osa li{position:relative;padding:0 0 16px}
.osa li::before{
  content:"";position:absolute;left:-21px;top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--card);border:2px solid var(--accent);
}
.osa li.tiche::before{border-color:var(--rule)}
.osa li:last-child{padding-bottom:0}
.osa .kedy{font-size:12px;color:var(--ink-faint);font-weight:600}
.osa .co{font-weight:600;font-size:14.5px}
.osa .detail{font-size:13px;color:var(--ink-soft)}

/* ══════════════════ NÁSTENKA / KANBAN ══════════════════ */

.nastenka{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;
  scroll-snap-type:x proximity;
}
.stlpec{
  flex:0 0 258px;background:var(--rule-soft);border-radius:var(--radius);
  display:flex;flex-direction:column;max-height:70vh;scroll-snap-align:start;
  border:1px solid transparent;
}
.stlpec.cielova{border-color:var(--accent);background:var(--accent-soft)}
.stlpec > .hlavicka{
  padding:11px 13px;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--rule);
}
.stlpec > .hlavicka .pocet{
  margin-left:auto;background:var(--card);color:var(--ink-soft);
  padding:1px 8px;border-radius:20px;font-size:11.5px;
}
.stlpec > .telo{padding:10px;overflow-y:auto;flex:1;min-height:80px}
.listok{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-s);
  padding:11px 12px;margin-bottom:9px;box-shadow:var(--shadow);cursor:grab;
}
.listok:active{cursor:grabbing}
.listok.tiahne{opacity:.45}
.listok .meno{font-weight:650;font-size:14px;margin-bottom:3px}
.listok .meno a{color:inherit}
.listok .riadok-detail{font-size:12.5px;color:var(--ink-soft);
  display:flex;align-items:center;gap:6px;margin-top:3px}
.listok .znacky{margin-top:7px;display:flex;gap:5px;flex-wrap:wrap}
.stlpec .prazdny{
  text-align:center;color:var(--ink-faint);font-size:12.5px;padding:14px 8px;
  border:1px dashed var(--rule);border-radius:var(--radius-s);
}

/* ══════════════════ ROZPIS PEŇAZÍ ══════════════════ */

.rozpis{width:100%;font-size:14.5px}
.rozpis td{padding:7px 0;border-bottom:1px solid var(--rule-soft)}
.rozpis td:last-child{text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap;font-weight:600}
.rozpis tr.odpocet td:last-child{color:var(--crit)}
.rozpis tr.vysledok td{
  border-top:2px solid var(--rule);border-bottom:0;padding-top:11px;
  font-size:17px;font-weight:700;
}
.rozpis tr.vysledok td:last-child{font-size:19px}
.rozpis tr.vysledok.dobre td:last-child{color:var(--ok)}
.rozpis tr.vysledok.zle td:last-child{color:var(--crit)}
.rozpis .vysvetlenie{font-size:12px;color:var(--ink-faint);font-weight:400}

/* pruh naplnenosti */
.pruh{height:6px;background:var(--rule);border-radius:3px;overflow:hidden;
  margin-top:6px}
.pruh i{display:block;height:100%;background:var(--accent);border-radius:3px}
.pruh i.plne{background:var(--ok)}
.pruh i.malo{background:var(--warn)}

/* ══════════════════ ZÁLOŽKY ══════════════════ */

.zalozky{
  display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:18px;
  overflow-x:auto;
}
.zalozky a{
  padding:9px 14px;font-size:14px;font-weight:600;color:var(--ink-soft);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.zalozky a:hover{color:var(--ink);text-decoration:none}
.zalozky a.aktiv{color:var(--accent-tmavsi);border-bottom-color:var(--accent)}

/* ══════════════════ PRIHLÁSENIE ══════════════════ */
/* Jediná obrazovka bez bočnej ponuky — vycentrovaná karta, ako na portáli,
   aby človek nemal pocit, že je niekde inde. */

.stred{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:var(--paper);
}
.stred .karta{width:100%;max-width:400px;margin:0}
.stred .logo{line-height:0}
.stred .logo svg{height:30px;width:auto;display:block}
.stred h1{font-size:19px;margin:0 0 4px}
.stred .podnadpis{font-size:13.5px;margin-bottom:18px}
.stred .akcie{margin-top:18px}

/* ══════════════════ HODINY V TABUĽKE ══════════════════ */

input.hodiny{
  width:78px;padding:4px 8px;text-align:right;font-size:13.5px;
  font-variant-numeric:tabular-nums;
}
input.hodiny::placeholder{color:var(--ink-faint)}

/* ══════════════════ ROLE ══════════════════ */

.volby{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.volba{
  display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;
  border:1px solid var(--rule);border-radius:var(--radius-s);
  background:var(--card);cursor:pointer;font-weight:400;color:var(--ink);
  transition:border-color .12s,background .12s;
}
.volba:hover{border-color:var(--accent);background:var(--accent-soft)}
.volba.zvolena{border-color:var(--accent);background:var(--accent-soft)}
.volba input{
  width:16px;height:16px;flex:0 0 16px;margin:2px 0 0;accent-color:var(--accent);
}
.volba b{display:block;font-size:13.5px;font-weight:650;color:var(--ink)}
.volba i{display:block;font-style:normal;font-size:12px;color:var(--ink-faint);
  margin-top:1px}
.volba:has(input:disabled){cursor:default;opacity:.7}
.volba:has(input:disabled):hover{border-color:var(--rule);background:var(--card)}
.volba:has(input:disabled).zvolena{border-color:var(--accent);
  background:var(--accent-soft)}

.matica td.uprostred,.matica th.uprostred{text-align:center;width:1%;
  white-space:nowrap}
.matica .ano{color:var(--accent);font-size:11px}
.matica .nie{color:var(--rule);font-size:13px}
.matica tr.medzisucet td{font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint)}

/* ══════════════════ DROBNOSTI ══════════════════ */

.tichy-text{color:var(--ink-faint);font-size:13px}
.medzera{margin-top:20px}
.spolu{display:flex;align-items:center;gap:9px}
.rozdel{margin-left:auto}
.stiahnut{display:inline-flex;align-items:center;gap:6px;font-size:13px}
hr{border:0;border-top:1px solid var(--rule-soft);margin:18px 0}

@media (max-width:900px){
  :root{--bok-sirka:0px}
  .bok{display:none}
  main{padding:18px 16px 50px}
  .vrch{padding:0 16px}
}

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