/* ==========================================================================
   Cardy panel — dizajn systém (SPEC.md sekcia 10)

   Register je „nástroj“, nie marketing. Zámerne INAK než cardy.sk:
   system-ui, žiadne gradienty, žiadne dekoratívne animácie ani prechody,
   husté tabuľky, tabulárne číslice, jediný akcent (vermilion #E8542F).

   Panel sa používa aj v teréne z telefónu — všetko musí fungovať na 390 px.
   ========================================================================== */

/* --- Tokeny ------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --akcent: #E8542F;
  --akcent-tmavy: #C6421F;
  --akcent-jemny: #FDEDE8;

  /* Akcent Cardy #E8542F má na bielej kontrast 3,66:1 — na text pri 13–15 px
     to nestačí (WCAG AA žiada 4,5:1). Odkazy, hviezdička povinného poľa aj
     „Preskočiť na obsah“ preto používajú tmavší odtieň (#C6421F = 5,0:1);
     ako PLOCHA (bodky, pruhy grafov) zostáva pôvodný akcent nedotknutý. */
  --akcent-text: #C6421F;

  /* Hlavné tlačidlo: biely text na #E8542F je 3,66:1, na #C6421F 5,0:1. */
  --tlacidlo-plocha: #C6421F;
  --tlacidlo-plocha-hover: #A83518;
  --tlacidlo-text: #FFFFFF;

  --plocha: #FFFFFF;
  --plocha-2: #F6F7F8;
  --plocha-3: #EDEFF1;
  --text: #14171B;
  --text-tichy: #5C646E;
  /* #7A828C dávalo na --plocha-2 iba 3,63:1. Najhorší výskyt boli hodnoty
     na osi Y grafov (.graf-osa-hodnota) — os je jediný spôsob, ako graf
     prečítať. #666E78 = 4,8:1 na --plocha-2 a 5,2:1 na bielej. */
  --text-jemny: #666E78;
  --ciara: #DFE3E7;
  --ciara-silna: #C6CCD3;

  --ok: #1B7A45;
  --ok-plocha: #E7F4EC;
  --upozornenie: #9A5B00;
  --upozornenie-plocha: #FCF1E0;
  --chyba: #B3261E;
  --chyba-plocha: #FBEAE9;
  --info: #1B5E9E;
  --info-plocha: #E8F1FA;
  --ticho: #6B7480;
  --ticho-plocha: #EEF0F2;

  --r-maly: 4px;
  --r-stredny: 6px;
  --r-velky: 10px;

  --m-1: 4px;
  --m-2: 8px;
  --m-3: 12px;
  --m-4: 16px;
  --m-5: 24px;
  --m-6: 32px;
  --m-7: 48px;

  --sirka-obsahu: 1120px;

  --pismo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pismo-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --akcent: #FF6A42;
    --akcent-tmavy: #FF8460;
    --akcent-jemny: #33190F;

    /* V tme je to opačne: svetlejší odtieň má na tmavom pozadí 7,5:1. */
    --akcent-text: #FF8460;

    /* Biely text na #FF6A42 je v tme len 2,84:1. Tmavý text na tej istej
       ploche dá 6,4:1 — mení sa teda farba PÍSMA, nie plocha tlačidla. */
    --tlacidlo-plocha: #FF6A42;
    --tlacidlo-plocha-hover: #FF8460;
    --tlacidlo-text: #14171B;

    --plocha: #16181C;
    --plocha-2: #1D2025;
    --plocha-3: #262A30;
    --text: #E8EAED;
    --text-tichy: #A2AAB4;
    --text-jemny: #868E99;
    --ciara: #2E333A;
    --ciara-silna: #3D444C;

    --ok: #57C98A;
    --ok-plocha: #16281E;
    --upozornenie: #E0A458;
    --upozornenie-plocha: #2C2113;
    --chyba: #F0837B;
    --chyba-plocha: #2E1817;
    --info: #6FB2F0;
    --info-plocha: #14222F;
    --ticho: #98A0AA;
    --ticho-plocha: #23272C;
  }
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--pismo);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--plocha-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--akcent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

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

img, svg { max-width: 100%; }

/* Fokus musí byť vidieť — panel sa ovláda aj klávesnicou. */
:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
  border-radius: 2px;
}

.preskoc {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--m-2) var(--m-3);
  background: var(--plocha);
  border: 1px solid var(--ciara-silna);
  border-radius: var(--r-stredny);
}
.preskoc { color: var(--akcent-text); }
.preskoc:focus { left: var(--m-3); top: var(--m-3); }

.cislo,
td.cislo,
th.cislo,
.statistika-hodnota,
.tabulka .cislo {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

td.cislo, th.cislo { text-align: right; }

.text-tichy { color: var(--text-tichy); }
.text-jemny { color: var(--text-jemny); font-size: 13px; }
.len-mobil { display: none; }
.mono { font-family: var(--pismo-mono); font-size: 0.94em; }
.odsadenie-hore { margin-top: var(--m-4); }
/* Dátum sa nesmie zalomiť na „20. 8.“ / „2026“ — na širokej obrazovke
   s voľným miestom to vyzerá ako chyba vykresľovania. */
.nezalamovat { white-space: nowrap; }
.bez-odsadenia { margin: 0; }

/* --- Hlavička ----------------------------------------------------------- */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-3);
  padding: var(--m-3) var(--m-4);
  background: var(--plocha);
  border-bottom: 1px solid var(--ciara);
}

.znacka {
  display: inline-flex;
  align-items: center;
  gap: var(--m-2);
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.znacka:hover { text-decoration: none; }

.znacka-bodka {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--akcent);
  flex: none;
}

.hlavicka-pouzivatel {
  display: flex;
  align-items: center;
  gap: var(--m-3);
}

.hlavicka-meno {
  display: inline-flex;
  align-items: center;
  gap: var(--m-1);
  color: var(--text-tichy);
  font-size: 13px;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formular-odhlasenia { display: inline; }

/* --- Navigácia ---------------------------------------------------------- */

.navigacia {
  position: sticky;
  top: 53px;
  z-index: 19;
  background: var(--plocha);
  border-bottom: 1px solid var(--ciara);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ciara-silna) transparent;
}

/* Na mobilnom Chrome je prekryvný posuvník neviditeľný a tretina navigácie
   (Ponuky, Faktúry, Nastavenia) vyzerá, že neexistuje. Vlastný posuvník je
   trvale viditeľný. Aktívnu položku doroluje do zorného poľa skript panela. */
.navigacia::-webkit-scrollbar { height: 3px; }
.navigacia::-webkit-scrollbar-track { background: transparent; }
.navigacia::-webkit-scrollbar-thumb {
  background: var(--ciara-silna);
  border-radius: 2px;
}

.navigacia-zoznam {
  display: flex;
  gap: var(--m-1);
  padding: 0 var(--m-3);
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  min-width: max-content;
}

.navigacia-odkaz {
  display: inline-flex;
  align-items: center;
  gap: var(--m-2);
  padding: var(--m-3) var(--m-3);
  color: var(--text-tichy);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.navigacia-odkaz:hover { color: var(--text); text-decoration: none; }

.navigacia-odkaz--aktivna {
  color: var(--text);
  border-bottom-color: var(--akcent);
  font-weight: 600;
}

/* --- Obsah -------------------------------------------------------------- */

.obsah {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: var(--m-5) var(--m-4) var(--m-7);
}
.obsah:focus { outline: none; }

.telo--siroke .obsah { max-width: 1400px; }

.telo--hole {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--plocha-2);
}
.telo--hole .obsah {
  margin: auto;
  width: 100%;
  max-width: 420px;
  padding: var(--m-4);
}

.hlavicka-stranky {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--m-4);
  flex-wrap: wrap;
  margin-bottom: var(--m-5);
}

.nadpis-stranky {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.popis-stranky {
  margin-top: var(--m-1);
  color: var(--text-tichy);
  font-size: 14px;
  max-width: 62ch;
}

.akcie-stranky {
  display: flex;
  gap: var(--m-2);
  flex-wrap: wrap;
}

.spatny-odkaz {
  display: inline-flex;
  align-items: center;
  gap: var(--m-1);
  color: var(--text-tichy);
  font-size: 13px;
  margin-bottom: var(--m-2);
}
.spatny-odkaz:hover { color: var(--text); }

.pata {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: var(--m-5) var(--m-4) var(--m-6);
  color: var(--text-jemny);
  font-size: 12px;
  border-top: 1px solid var(--ciara);
}

/* --- Karty -------------------------------------------------------------- */

.karta {
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: var(--r-velky);
  margin-bottom: var(--m-4);
}

.karta--uzka { max-width: 420px; padding: var(--m-5); }
.telo--hole .karta--uzka { margin-bottom: 0; }

.karta-hlavicka {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--m-3);
  flex-wrap: wrap;
  padding: var(--m-4);
  border-bottom: 1px solid var(--ciara);
}

.karta-nadpis {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.karta-popis {
  margin-top: 2px;
  color: var(--text-tichy);
  font-size: 13px;
}

.karta-akcie { display: flex; gap: var(--m-2); flex-wrap: wrap; }

.karta-telo { padding: var(--m-4); }
.karta-telo:empty { display: none; }
.karta--uzka .karta-telo { padding: 0; }
.karta--uzka .karta-hlavicka { padding: 0 0 var(--m-4); }

/* Tabuľka v karte ide od okraja po okraj. */
.karta-telo > .tabulka-obal:only-child {
  margin: calc(var(--m-4) * -1);
  border-radius: 0 0 var(--r-velky) var(--r-velky);
}

/* --- Mriežka ------------------------------------------------------------ */

.mriezka {
  display: grid;
  gap: var(--m-3);
  margin-bottom: var(--m-4);
  /* Bez tohto sa karta naťahuje na výšku vyššieho suseda a pod obsahom
     zostane prázdne miesto vnútri rámčeka — vyzerá to ako nedokreslený
     obsah, nie ako zámer. */
  align-items: start;
}
.mriezka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mriezka--3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.mriezka--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

.statistika {
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: var(--r-velky);
  padding: var(--m-4);
}

.statistika-nazov {
  color: var(--text-tichy);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.02em;
}

.statistika-hodnota {
  margin-top: var(--m-1);
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.statistika-popis {
  margin-top: var(--m-1);
  color: var(--text-jemny);
  font-size: 12px;
}

.statistika--akcent .statistika-hodnota { color: var(--akcent); }

/* Dve karty vedľa seba na širokej obrazovke, pod sebou na mobile. */
.dvojica {
  display: grid;
  gap: 0 var(--m-4);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* --- Tabuľky (husté) ---------------------------------------------------- */

.tabulka-obal {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.tabulka {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabulka-popis {
  caption-side: top;
  text-align: left;
  padding: 0 var(--m-4) var(--m-2);
  color: var(--text-tichy);
  font-size: 13px;
}

.tabulka th {
  position: sticky;
  top: 0;
  background: var(--plocha-2);
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-tichy);
  padding: var(--m-2) var(--m-3);
  border-bottom: 1px solid var(--ciara);
  white-space: nowrap;
}

.tabulka td {
  padding: var(--m-2) var(--m-3);
  border-bottom: 1px solid var(--ciara);
  vertical-align: middle;
}

.tabulka tbody tr:last-child td { border-bottom: none; }
.tabulka tbody tr:hover { background: var(--plocha-2); }

.tabulka .hlavna-bunka {
  font-weight: 550;
}

.tabulka .riadok--tlmeny td { color: var(--text-tichy); }

/* --- Stavy -------------------------------------------------------------- */

.stav {
  display: inline-flex;
  align-items: center;
  gap: var(--m-2);
  font-size: 13px;
  white-space: nowrap;
}

.stav-bodka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--ticho);
}

.stav--ok .stav-bodka { background: var(--ok); }
.stav--chyba .stav-bodka { background: var(--chyba); }
.stav--upozornenie .stav-bodka { background: var(--upozornenie); }
.stav--info .stav-bodka { background: var(--info); }
.stav--ticho .stav-bodka { background: var(--ticho); }
.stav--neutral .stav-bodka { background: var(--ciara-silna); }

.odznak {
  display: inline-block;
  padding: 1px var(--m-2);
  border-radius: var(--r-maly);
  font-size: 12px;
  font-weight: 550;
  background: var(--ticho-plocha);
  color: var(--text-tichy);
}
.odznak--ok { background: var(--ok-plocha); color: var(--ok); }
.odznak--chyba { background: var(--chyba-plocha); color: var(--chyba); }
.odznak--upozornenie { background: var(--upozornenie-plocha); color: var(--upozornenie); }
.odznak--info { background: var(--info-plocha); color: var(--info); }
.odznak--akcent { background: var(--akcent-jemny); color: var(--akcent-tmavy); }

/* --- Tlačidlá ----------------------------------------------------------- */

.tlacidlo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-2);
  min-height: 36px;
  padding: var(--m-2) var(--m-3);
  border: 1px solid var(--ciara-silna);
  border-radius: var(--r-stredny);
  background: var(--plocha);
  color: var(--text);
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.tlacidlo:hover { background: var(--plocha-2); text-decoration: none; }

.tlacidlo--hlavne {
  background: var(--tlacidlo-plocha);
  border-color: var(--tlacidlo-plocha);
  color: var(--tlacidlo-text);
}
.tlacidlo--hlavne:hover { background: var(--tlacidlo-plocha-hover); border-color: var(--tlacidlo-plocha-hover); }

.tlacidlo--tiche {
  border-color: transparent;
  background: transparent;
  color: var(--text-tichy);
}
.tlacidlo--tiche:hover { background: var(--plocha-2); color: var(--text); }

.tlacidlo--nebezpecne {
  border-color: var(--chyba);
  color: var(--chyba);
  background: var(--plocha);
}
.tlacidlo--nebezpecne:hover { background: var(--chyba-plocha); }

.tlacidlo--siroke { width: 100%; }

.tlacidlo:disabled,
.tlacidlo[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.tlacidlo:disabled:hover { background: var(--plocha); }
.tlacidlo--hlavne:disabled:hover { background: var(--tlacidlo-plocha); }

.ikona { flex: none; }

/* --- Formuláre ---------------------------------------------------------- */

.formular { display: block; }

.pole { margin-bottom: var(--m-4); }
.pole:last-child { margin-bottom: 0; }

.pole-popis {
  display: block;
  margin-bottom: var(--m-1);
  font-size: 13px;
  font-weight: 550;
  color: var(--text);
}

.pole-povinne { color: var(--akcent-text); margin-left: 2px; }

.vstup {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: var(--m-2) var(--m-3);
  border: 1px solid var(--ciara-silna);
  border-radius: var(--r-stredny);
  background: var(--plocha);
  color: var(--text);
  font-size: 15px;
}
.vstup:hover { border-color: var(--text-jemny); }
.vstup:focus { border-color: var(--akcent); outline: 2px solid var(--akcent); outline-offset: -1px; }
.vstup::placeholder { color: var(--text-jemny); }
.vstup:disabled { background: var(--plocha-3); color: var(--text-tichy); cursor: not-allowed; }

.vstup--viacriadkovy { min-height: auto; resize: vertical; line-height: 1.5; }
.vstup--vyber { appearance: none; padding-right: var(--m-6); background-image: none; }

.pole--chybne .vstup { border-color: var(--chyba); }

.pole-napoveda {
  margin-top: var(--m-1);
  color: var(--text-tichy);
  font-size: 12.5px;
}

.pole-chyba {
  display: flex;
  align-items: center;
  gap: var(--m-1);
  margin-top: var(--m-1);
  color: var(--chyba);
  font-size: 12.5px;
}

.pole--zaskrtavacie {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--m-2);
}
.pole--zaskrtavacie .pole-napoveda { grid-column: 2; }
.zaskrtavacie { width: 18px; height: 18px; accent-color: var(--akcent); }
.pole-popis--vedla { margin-bottom: 0; }

.formular-riadok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--m-4);
}

.formular-akcie {
  display: flex;
  gap: var(--m-2);
  flex-wrap: wrap;
  margin-top: var(--m-5);
}

.formular-hladania {
  display: flex;
  gap: var(--m-2);
  flex-wrap: wrap;
  align-items: flex-end;
}
.formular-hladania .pole { margin-bottom: 0; flex: 1 1 200px; }

/* --- Hlášky ------------------------------------------------------------- */

.hlaska {
  display: flex;
  align-items: flex-start;
  gap: var(--m-2);
  padding: var(--m-3);
  border: 1px solid var(--ciara);
  border-radius: var(--r-stredny);
  margin-bottom: var(--m-4);
  font-size: 14px;
}

.hlaska-ikona { display: flex; flex: none; padding-top: 1px; }
.hlaska-text { display: flex; flex-direction: column; gap: 2px; }

.hlaska--uspech { background: var(--ok-plocha); border-color: var(--ok); color: var(--ok); }
.hlaska--chyba { background: var(--chyba-plocha); border-color: var(--chyba); color: var(--chyba); }
.hlaska--upozornenie { background: var(--upozornenie-plocha); border-color: var(--upozornenie); color: var(--upozornenie); }
.hlaska--info { background: var(--info-plocha); border-color: var(--info); color: var(--info); }

.poznamka-merania {
  display: flex;
  align-items: flex-start;
  gap: var(--m-2);
  color: var(--text-tichy);
  font-size: 12.5px;
  margin-top: var(--m-3);
}
.poznamka-merania .ikona { margin-top: 2px; }

/* --- Prázdne stavy ------------------------------------------------------ */

.prazdny-stav {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--m-6) var(--m-4);
  color: var(--text-tichy);
}

.prazdny-stav-ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--plocha-3);
  color: var(--text-jemny);
  margin-bottom: var(--m-3);
}

.prazdny-stav-nadpis {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.prazdny-stav-veta {
  margin-top: var(--m-1);
  font-size: 13.5px;
  max-width: 44ch;
}

.prazdny-stav-akcia { margin-top: var(--m-4); }

/* --- Definičné zoznamy -------------------------------------------------- */

.definicie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--m-3) var(--m-5);
}

.definicia dt {
  color: var(--text-tichy);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.02em;
}

.definicia dd {
  margin: 2px 0 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.definicie--stlpec { grid-template-columns: 1fr; }

/* --- Grafy -------------------------------------------------------------- */

/* Dáta sa kreslia v SVG (roztiahne sa na šírku), popisky sú HTML —
   text tak zostáva rovnako čitateľný na 390 px aj na širokom monitore. */

.graf-obal { width: 100%; --graf-osa-sirka: 40px; }

.graf-ramec {
  position: relative;
  display: flex;
  align-items: stretch;
}

.graf-osa-y {
  position: relative;
  width: var(--graf-osa-sirka);
  flex: none;
}

.graf-osa-hodnota {
  position: absolute;
  right: 8px;
  transform: translateY(50%);
  color: var(--text-jemny);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.graf-plocha {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.graf-linky { position: absolute; inset: 0; }

.graf-linka {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--ciara);
}

.graf-kresba {
  display: block;
  width: 100%;
  height: 100%;
}

.graf-stlpec { fill: var(--akcent); }

.graf-ciara {
  stroke: var(--akcent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.graf-body { position: absolute; inset: 0; pointer-events: none; }

.graf-bod {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--akcent);
  transform: translate(-50%, 50%);
  pointer-events: auto;
}

.graf-popisky {
  display: flex;
  margin-top: var(--m-2);
  padding-left: var(--graf-osa-sirka);
}

.graf-popisok {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  color: var(--text-tichy);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: visible;
}

/* Vodorovný rebríček (najviac priložení). Pruh je inline SVG, popisky HTML. */
.rebricek-riadok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--m-3);
  align-items: baseline;
  margin-bottom: var(--m-2);
}

.rebricek-riadok:last-child { margin-bottom: 0; }

.rebricek-nazov {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rebricek-pruh {
  grid-column: 1 / -1;
  width: 100%;
  height: 6px;
  display: block;
}

/* --- Prihlásenie -------------------------------------------------------- */

.prihlasenie { width: 100%; }

.prihlasenie-znacka {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  font-weight: 650;
  margin-bottom: var(--m-4);
}

.prihlasenie-poznamka {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  margin-top: var(--m-5);
  padding-top: var(--m-4);
  border-top: 1px solid var(--ciara);
  color: var(--text-jemny);
  font-size: 12.5px;
}

/* --- Mobil (Jakub aktivuje kartičky z telefónu) ------------------------- */

@media (max-width: 640px) {
  body { font-size: 15px; }

  .obsah { padding: var(--m-4) var(--m-3) var(--m-6); }

  .hlavicka { padding: var(--m-2) var(--m-3); }
  .navigacia { top: 49px; }
  .navigacia-odkaz { padding: var(--m-2) var(--m-3); }

  .nadpis-stranky { font-size: 19px; }

  .karta { border-radius: var(--r-stredny); }
  .karta-hlavicka, .karta-telo { padding: var(--m-3); }
  .karta-telo > .tabulka-obal:only-child { margin: calc(var(--m-3) * -1); }

  .statistika { padding: var(--m-3); }
  .statistika-hodnota { font-size: 24px; }

  .mriezka--2, .mriezka--3, .mriezka--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  }

  /* Dotykové ciele nesmú byť menšie než palec. */
  .tlacidlo { min-height: 42px; padding: var(--m-2) var(--m-4); }
  .navigacia-odkaz { min-height: 42px; }

  /* iOS Safari pri fokuse do poľa s písmom pod 16 px stránku priblíži a už
     ju nevráti späť. Týka sa to práve aktivácie kartičky v teréne, kde treba
     do poľa vložiť odkaz. */
  .vstup { font-size: 16px; }

  .akcie-stranky { width: 100%; }
  .akcie-stranky .tlacidlo { flex: 1 1 auto; }

  .skry-mobil { display: none; }
  /* Časovo kritické údaje, ktoré na mobile vypadnú z vlastného stĺpca,
     sa presúvajú do druhého riadka hlavnej bunky — nezmiznú. */
  .len-mobil { display: block; }

  .tabulka { font-size: 13.5px; }
  .tabulka th, .tabulka td { padding: var(--m-2); }
}

@media (max-width: 400px) {
  .hlavicka-meno { display: none; }
}

/* --- Tlač (ponuky a faktúry, A4) --------------------------------------- */

@media print {
  :root {
    --plocha: #FFFFFF;
    --plocha-2: #FFFFFF;
    --plocha-3: #FFFFFF;
    --text: #000000;
    --text-tichy: #333333;
    --text-jemny: #555555;
    --ciara: #BBBBBB;
    --ciara-silna: #888888;
  }

  body { background: #FFFFFF; font-size: 11pt; }

  .hlavicka,
  .navigacia,
  .pata,
  .preskoc,
  .akcie-stranky,
  .karta-akcie,
  .formular-hladania,
  .tlacidlo,
  .hlaska {
    display: none !important;
  }

  .obsah { max-width: none; padding: 0; margin: 0; }

  .karta {
    border: none;
    border-radius: 0;
    margin: 0;
    break-inside: avoid;
  }
  .karta-telo, .karta-hlavicka { padding: 0; }

  .tabulka-obal { overflow: visible; }
  .tabulka { font-size: 10pt; }
  .tabulka th { position: static; background: #FFFFFF; }

  .skry-mobil { display: table-cell !important; }

  /* Tlačový dokument (ponuka/faktúra) — A4 s pokojnými okrajmi. */
  .tlacovy-dokument {
    width: 100%;
    max-width: 180mm;
    margin: 0 auto;
    color: #000000;
  }

  a { color: #000000; text-decoration: none; }

  @page { size: A4; margin: 15mm; }
}

/* Obrazovkový náhľad tlačového dokumentu. */
.tlacovy-dokument {
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: var(--r-velky);
  padding: var(--m-6);
  max-width: 800px;
  margin: 0 auto var(--m-4);
}

@media (max-width: 640px) {
  .tlacovy-dokument { padding: var(--m-4); }
}

/* --- Doklad (ponuka aj faktúra, spoločné diely) ------------------------- */

.doklad-hlavicka {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--m-4);
  align-items: flex-start;
  border-bottom: 2px solid var(--ciara-silna);
  padding-bottom: var(--m-4);
  margin-bottom: var(--m-5);
}

.doklad-typ {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-tichy);
}

.doklad-cislo {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.doklad-znacka {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  font-weight: 600;
  font-size: 15px;
}

.doklad-znacka-bodka {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--akcent);
  display: inline-block;
}

.doklad-znacka-popis {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-tichy);
  margin-top: 2px;
}

.doklad-strany {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m-5);
  margin-bottom: var(--m-5);
}

.doklad-strana-nazov {
  margin: 0 0 var(--m-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-tichy);
}

.doklad-strana-riadok { margin: 0; font-size: 14px; line-height: 1.45; }
.doklad-strana-riadok--silny { font-weight: 650; font-size: 15px; }
.doklad-strana-prazdna { margin: 0; font-size: 14px; color: var(--chyba); }

/* Uhradená faktúra musí byť na papieri rozoznateľná na prvý pohľad —
   inak ju klient zaplatí druhýkrát. */
.doklad-pecat-uhradene {
  margin: 0 0 var(--m-4);
  padding: var(--m-2) var(--m-3);
  border: 1px solid var(--ok);
  border-radius: var(--r-stredny);
  background: var(--ok-plocha);
  color: var(--ok);
  font-size: 14px;
  font-weight: 600;
}

.doklad-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--m-3);
  border: 1px solid var(--ciara);
  border-radius: var(--r-stredny);
  padding: var(--m-3);
  margin-bottom: var(--m-5);
}

.doklad-meta-nazov { margin: 0; font-size: 12px; color: var(--text-tichy); }

.doklad-meta-hodnota {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.doklad-sucet {
  display: flex;
  justify-content: flex-end;
  gap: var(--m-5);
  align-items: baseline;
  border-top: 2px solid var(--ciara-silna);
  margin-top: var(--m-3);
  padding-top: var(--m-3);
}

.doklad-sucet-nazov { font-size: 14px; color: var(--text-tichy); }

.doklad-sucet-hodnota {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.doklad-pata {
  margin-top: var(--m-5);
  padding-top: var(--m-4);
  border-top: 1px solid var(--ciara);
}

.doklad-pata-riadok {
  margin: 0 0 var(--m-1);
  font-size: 12.5px;
  color: var(--text-tichy);
  line-height: 1.5;
}

.doklad-podpis {
  margin-top: var(--m-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m-5);
}

.doklad-podpis-ciara {
  border-top: 1px solid var(--ciara-silna);
  padding-top: var(--m-2);
  font-size: 12px;
  color: var(--text-tichy);
}

/* --- Kalkulačka ponuky -------------------------------------------------- */

.vypocet {
  border: 1px solid var(--ciara);
  border-radius: var(--r-stredny);
  padding: var(--m-3);
  background: var(--plocha-2);
}

.vypocet-riadok {
  display: flex;
  justify-content: space-between;
  gap: var(--m-3);
  font-size: 14px;
  padding: 2px 0;
}

.vypocet-riadok--sucet {
  border-top: 1px solid var(--ciara);
  margin-top: var(--m-2);
  padding-top: var(--m-2);
  font-size: 16px;
}

.vypocet-tip {
  display: flex;
  gap: var(--m-2);
  align-items: flex-start;
  margin-top: var(--m-3);
  border: 1px solid var(--upozornenie);
  border-radius: var(--r-stredny);
  padding: var(--m-2) var(--m-3);
  background: var(--upozornenie-plocha);
  color: var(--upozornenie);
  font-size: 13.5px;
}

.vypocet-tip .ikona { flex: none; margin-top: 2px; }

.polozka-riadok {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--m-3);
}

.polozka-riadok .pole { margin: 0; }

/* --- Nastavenia --------------------------------------------------------- */

/* Tri rovnako široké polia (cenové pásmo: od — do — cena). */
.trojica-poli {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--m-3);
}

.trojica-poli .pole { margin: 0; }

/* Dvojstĺpec formulárových polí; `.siroke` sa roztiahne cez oba. */
.mriezka-poli {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--m-4);
}

.mriezka-poli > .siroke { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .doklad-strany { grid-template-columns: 1fr; }
  .doklad-meta { grid-template-columns: 1fr; }
  .polozka-riadok { grid-template-columns: 1fr; }
  .trojica-poli { grid-template-columns: 1fr; }
  .mriezka-poli { grid-template-columns: 1fr; }
  .doklad-podpis { grid-template-columns: 1fr; }
}

/* Na papier ide iba doklad — nadpis stránky ani rámik karty tam nepatria. */
@media print {
  .len-obrazovka { display: none !important; }
  .tlacovy-dokument { border: none; border-radius: 0; padding: 0; max-width: 180mm; }
  .doklad-strana-riadok,
  .doklad-meta-hodnota { color: #000000; }
  .doklad-podpis { margin-top: 18mm; }
}