/* Daňové kalkulačky — vanilla CSS, žiadny framework.
   Dizajnové tokeny: úradná navy + chladný papier, zelená vyhradená
   pre čisté peniaze („čo ostane"), sumy vždy v mono písme. */

:root {
  --atrament:        #17223B;  /* bočný panel, nadpisy */
  --atrament-tmavy:  #111A2E;
  --papier:          #EFF2F6;  /* pozadie obsahu */
  --karta:           #FFFFFF;
  --linka:           #D9DEE8;
  --bodky:           #C4CCDA;  /* bodkované vodiace linky pásky */
  --text:            #232C40;
  --tlmeny:          #5A6478;
  --zelena:          #0E7A52;  /* čistá odmena, akcent */
  --zelena-tmava:    #0A5C3E;
  --zelena-svetla:   #E3F1EA;
  --cervena:         #B23A3A;

  --pismo-titulky: 'Space Grotesk', system-ui, sans-serif;
  --pismo-text:    'Public Sans', system-ui, sans-serif;
  --pismo-sumy:    'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--pismo-text);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--papier);
}

a { color: var(--zelena); }

:focus-visible {
  outline: 2px solid var(--zelena);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- rozloženie: bočný panel + obsah -------------------------------- */

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

.bocny-panel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 1.75rem 1.25rem;
  background: var(--atrament);
  color: #C7D0E2;
}

.znacka {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: #fff;
}

.znacka-symbol {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6rem;
  background: var(--zelena);
  color: #fff;
  font-family: var(--pismo-titulky);
  font-size: 1.35rem;
  font-weight: 700;
}

.znacka-text {
  font-family: var(--pismo-titulky);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}

.znacka-text small {
  display: block;
  font-family: var(--pismo-text);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #8B97B2;
}

.nav-skupina {
  margin: 0 0.75rem 0.4rem;
  font-family: var(--pismo-titulky);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B97B2;
}

.nav-skupina + .nav-zoznam { margin-bottom: 1.4rem; }

.nav-zoznam { list-style: none; }

.nav-odkaz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.92rem;
  color: #C7D0E2;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

a.nav-odkaz:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.nav-odkaz.aktivny {
  background: rgba(14, 122, 82, 0.22);
  box-shadow: inset 3px 0 0 var(--zelena);
  color: #fff;
  font-weight: 600;
}

.nav-odkaz.planovany { color: #67738F; cursor: default; }

.nav-odkaz.planovany em {
  flex-shrink: 0;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border: 1px solid #3A4763;
  border-radius: 999px;
  color: #8B97B2;
}

.bocny-panel-pata {
  margin-top: auto;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #8B97B2;
}

.obsah {
  padding: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 46rem;
  width: 100%;
}

/* ---- hlavička stránky ------------------------------------------------ */

.ocko {
  font-family: var(--pismo-titulky);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zelena);
  margin-bottom: 0.5rem;
}

.hlavicka h1 {
  font-family: var(--pismo-titulky);
  font-size: clamp(1.65rem, 3.5vw, 2.3rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--atrament);
  letter-spacing: -0.01em;
}

.perex {
  margin-top: 0.75rem;
  max-width: 58ch;
  color: var(--tlmeny);
}

/* ---- formulár -------------------------------------------------------- */

.formular {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: 0.9rem;
}

.formular label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

.formular-riadok {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.vstup {
  position: relative;
  flex: 1 1 12rem;
  display: block;
}

.vstup input {
  width: 100%;
  padding: 0.8rem 2.6rem 0.8rem 1rem;
  font-family: var(--pismo-sumy);
  font-size: 1.25rem;
  color: var(--text);
  background: #FBFCFE;
  border: 1.5px solid var(--linka);
  border-radius: 0.6rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vstup input:focus {
  outline: none;
  border-color: var(--zelena);
  box-shadow: 0 0 0 3px rgba(14, 122, 82, 0.16);
}

.vstup-mena {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--pismo-sumy);
  font-size: 1.1rem;
  color: var(--tlmeny);
}

.formular button {
  padding: 0.8rem 1.8rem;
  font-family: var(--pismo-titulky);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--zelena);
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.formular button:hover { background: var(--zelena-tmava); }

/* rozšírený formulár (SZČO) — pomenované skupiny polí pod hlavným vstupom;
   hierarchia: nadpis skupiny -> label -> pole -> nápoveda */

fieldset { border: 0; min-inline-size: 0; }

.form-skupina {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--linka);
}

.form-skupina legend {
  float: left;                 /* legend nejde štýlovať ako bežný blok */
  width: 100%;
  margin-bottom: 1rem;
  font-family: var(--pismo-titulky);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--atrament);
}

.skupina-popis {
  clear: both;
  margin: -0.45rem 0 0.9rem;
  font-size: 0.8rem;
  color: var(--tlmeny);
}

.skupina-mriezka {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.75rem;
}

.pole { min-width: 0; }

.pole-sirsie { grid-column: 1 / -1; }

.pole > label,
.pole-nadpis {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.45rem;
}

.napoveda {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--tlmeny);
}

.volba {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.2rem 0;
  font-weight: 400;
  font-size: 0.92rem;
}

.volba small { font-size: 0.8rem; color: var(--tlmeny); }

.volba input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--zelena);
  flex-shrink: 0;
}

.volba-riadok {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.volba-riadok .vstup { flex: 0 1 9.5rem; }

.vstup.maly input {
  font-size: 1rem;
  padding: 0.55rem 2.1rem 0.55rem 0.8rem;
}

.vstup.maly .vstup-mena { font-size: 0.9rem; }

.pole select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-family: var(--pismo-sumy);
  font-size: 1rem;
  color: var(--text);
  background: #FBFCFE;
  border: 1.5px solid var(--linka);
  border-radius: 0.6rem;
}

.pole select:focus {
  outline: none;
  border-color: var(--zelena);
  box-shadow: 0 0 0 3px rgba(14, 122, 82, 0.16);
}

/* podpolia manželky — odsadené pod checkbox, každé s vlastným labelom */
.manzelka-polia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.25rem;
  margin: 0.6rem 0 0 1.6rem;
}

.manzelka-polia label { font-weight: 500; font-size: 0.78rem; }

.pole-sirsie > .napoveda { margin-left: 1.6rem; }

@media (max-width: 560px) {
  .skupina-mriezka { grid-template-columns: 1fr; }
  .manzelka-polia { grid-template-columns: 1fr; margin-left: 0; }
  .pole-sirsie > .napoveda { margin-left: 0; }
}

.chyba {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--cervena);
}

.priklady {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--tlmeny);
}

.priklady a {
  font-family: var(--pismo-sumy);
  margin-left: 0.45rem;
  color: var(--zelena);
}

/* ---- výplatná páska (výsledok) --------------------------------------- */

.paska {
  margin-top: 1.5rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2rem);
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: 0.9rem;
}

.paska-hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 2px dashed var(--bodky);
}

.paska-hlava h2 {
  font-family: var(--pismo-titulky);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--atrament);
}

.paska-hlava p { font-size: 0.85rem; color: var(--tlmeny); }

.paska-hlava strong {
  font-family: var(--pismo-sumy);
  font-size: 1rem;
  color: var(--text);
}

.paska-sekcia { padding: 1.1rem 0; border-bottom: 1px solid var(--linka); }

.paska-sekcia h3 {
  font-family: var(--pismo-titulky);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--atrament);
  margin-bottom: 0.5rem;
}

.paska-sekcia h3 small {
  font-family: var(--pismo-text);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  color: var(--tlmeny);
}

.polozka {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.28rem 0;
  font-size: 0.95rem;
}

.polozka small {
  font-family: var(--pismo-sumy);
  font-size: 0.75rem;
  color: var(--tlmeny);
}

.polozka i {
  flex: 1;
  border-bottom: 2px dotted var(--bodky);
  transform: translateY(-0.28em);
}

.polozka b {
  font-family: var(--pismo-sumy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.polozka.hruba { font-size: 1.05rem; font-weight: 600; }
.polozka.hruba b { font-size: 1.1rem; }

.polozka.pasmo { padding-left: 1.25rem; }
.polozka.pasmo span, .polozka.pasmo b { color: var(--tlmeny); font-size: 0.88rem; }

.polozka.sucet {
  margin-top: 0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linka);
  font-weight: 600;
}

/* čistá odmena — pečiatka a suma; jediné miesto so zelenou plochou */

.cista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem;
  background: var(--zelena-svetla);
  border-radius: 0.7rem;
}

.peciatka {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 2px solid var(--zelena);
  border-radius: 0.45rem;
  font-family: var(--pismo-titulky);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zelena-tmava);
  transform: rotate(-2deg);
}

.cista-poznamka { margin-top: 0.7rem; font-size: 0.82rem; color: var(--tlmeny); }

.cista-suma {
  font-family: var(--pismo-sumy);
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--zelena-tmava);
  white-space: nowrap;
}

.sekcia-poznamka {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--tlmeny);
  max-width: 62ch;
}

/* výhľad — informatívny blok o budúcich odvodoch, vizuálne oddelený od
   rozpisu za aktuálny rok (papierové pozadie + čiarkovaný rám ako
   poznámka na okraji úradného dokumentu) */

.vyhlad {
  margin-top: 1.25rem;
  padding: 1.1rem 1.3rem 0.9rem;
  background: var(--papier);
  border: 1px dashed var(--bodky);
  border-radius: 0.7rem;
}

.vyhlad-titul {
  font-family: var(--pismo-titulky);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--atrament);
}

.vyhlad-titul small {
  font-family: var(--pismo-text);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--tlmeny);
}

.vyhlad-blok {
  padding: 0.9rem 0;
}

.vyhlad-blok + .vyhlad-blok { border-top: 1px solid var(--linka); }

.vyhlad-blok h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.vyhlad-blok h4 small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--tlmeny);
}

.vyhlad-blok .polozka i { border-color: #B9C2D4; }

.vyhlad-poznamka {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--tlmeny);
  max-width: 62ch;
}

.dochodok { padding-top: 1.1rem; }

.dochodok-poznamka {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--tlmeny);
  max-width: 62ch;
}

/* ---- predpoklady ------------------------------------------------------ */

.predpoklady {
  margin-top: 1.25rem;
  padding: 1rem 1.5rem;
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: 0.9rem;
  font-size: 0.88rem;
  color: var(--tlmeny);
}

.predpoklady summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

.predpoklady ul { margin: 0.75rem 0 0.25rem 1.2rem; }

.predpoklady li + li { margin-top: 0.35rem; }

/* ---- responzivita a prístupnosť -------------------------------------- */

@media (max-width: 860px) {
  .rozlozenie { grid-template-columns: 1fr; }

  .bocny-panel { gap: 1.25rem; padding: 1.25rem; }

  .bocny-panel-pata { margin-top: 0; }

  .obsah { max-width: none; }
}

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