/* ==========================================================================
   COMPONENTS.CSS
   Prvky, ktoré sa opakujú na verejnom webe aj v dashboarde:
   tlačidlá, karty, štítky, formuláre, tabuľky, oznámenia, cookie lišta.
   ========================================================================== */

/* ==========================================================================
   TLAČIDLÁ
   ========================================================================== */
.tlacidlo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  padding: var(--r3) var(--r5);
  border: 1px solid transparent;
  border-radius: var(--oblenie-m);
  font-size: var(--v-s);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--prechod), border-color var(--prechod),
              transform var(--prechod);
}
.tlacidlo:hover { text-decoration: none; }
.tlacidlo:active { transform: translateY(1px); }

/* Vyplnené modré - hlavná akcia na obrazovke. Na jednej obrazovke ideálne jedno. */
.tlacidlo--hlavne {
  background: var(--modra);
  color: #fff;
}
.tlacidlo--hlavne:hover { background: var(--modra-tmava); }

/* Obrysové - druhotná akcia vedľa hlavnej */
.tlacidlo--obrys {
  background: transparent;
  border-color: var(--modra);
  color: var(--modra);
}
.tlacidlo--obrys:hover { background: var(--modra-svetla); }

/* Nenápadné - zrušiť, zavrieť, tichá akcia */
.tlacidlo--tiche {
  background: transparent;
  border-color: var(--ciara-silna);
  color: var(--text-jemny);
}
.tlacidlo--tiche:hover { background: var(--podklad-tmavsi); color: var(--text); }

/* Deštruktívne - vymazať, zablokovať */
.tlacidlo--nebezpecne {
  background: transparent;
  border-color: var(--cervena);
  color: var(--cervena);
}
.tlacidlo--nebezpecne:hover { background: var(--cervena-podklad); }

/* Veľkostné varianty */
.tlacidlo--velke { padding: var(--r4) var(--r6); font-size: var(--v-m); }
.tlacidlo--male  { padding: var(--r2) var(--r3); font-size: var(--v-xs); }

/* Neaktívne tlačidlo - napr. funkcia, ktorá ešte nie je spustená */
.tlacidlo[disabled],
.tlacidlo[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   KARTY
   ========================================================================== */
.karta {
  background: var(--papier);
  border: 1px solid var(--ciara);
  border-radius: var(--oblenie-l);
  padding: var(--r5);
  box-shadow: var(--tien-s);
}

/* Karta, na ktorú sa dá kliknúť (produkt, materiál) */
.karta--klikacia {
  transition: box-shadow var(--prechod), transform var(--prechod),
              border-color var(--prechod);
}
.karta--klikacia:hover {
  box-shadow: var(--tien-l);
  transform: translateY(-2px);
  border-color: var(--zlata-svetla);
}

/* ==========================================================================
   ŠTÍTKY (badge)
   Krátky stavový údaj. Vždy verzálkami, vždy s pozadím.
   ========================================================================== */
.stitok {
  display: inline-block;
  padding: 3px var(--r2);
  border-radius: var(--oblenie-s);
  font-size: var(--v-xxs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stitok--zelena  { background: var(--zelena-podklad);   color: var(--zelena); }
.stitok--oranz   { background: var(--oranzova-podklad); color: var(--oranzova); }
.stitok--cervena { background: var(--cervena-podklad);  color: var(--cervena); }
.stitok--neutral { background: var(--podklad-tmavsi);   color: var(--text-jemny); }
.stitok--modra   { background: var(--modra-svetla);     color: var(--modra); }
.stitok--zlata   { background: var(--zlata-podklad);    color: var(--zlata); }

/* ==========================================================================
   FORMULÁRE
   ========================================================================== */
.pole { margin-bottom: var(--r4); }

.pole__popis {
  display: block;
  margin-bottom: var(--r2);
  font-size: var(--v-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-jemny);
}

.pole__vstup {
  width: 100%;
  padding: var(--r3) var(--r4);
  background: var(--papier);
  border: 1px solid var(--ciara-silna);
  border-radius: var(--oblenie-m);
  transition: border-color var(--prechod), box-shadow var(--prechod);
}
.pole__vstup::placeholder { color: var(--text-slabsi); }
.pole__vstup:focus {
  outline: none;
  border-color: var(--modra);
  box-shadow: 0 0 0 3px var(--modra-svetla);
}

/* Pole s chybou - červený rám + hláška pod ním */
.pole__vstup[aria-invalid="true"] { border-color: var(--cervena); }
.pole__chyba {
  margin-top: var(--r1);
  font-size: var(--v-xs);
  color: var(--cervena);
}

/* Nápoveda pod poľom (napr. požiadavky na heslo) */
.pole__napoveda {
  margin-top: var(--r1);
  font-size: var(--v-xs);
  color: var(--text-jemny);
}

/* Zaškrtávacie políčko so sprievodným textom */
.zaskrtnutie {
  display: flex;
  gap: var(--r2);
  align-items: flex-start;
  font-size: var(--v-xs);
  color: var(--text-jemny);
  line-height: 1.5;
}
.zaskrtnutie input { margin-top: 3px; flex-shrink: 0; }

/* ==========================================================================
   OZNÁMENIA (výsledok akcie, chyba servera)
   ========================================================================== */
.oznam {
  padding: var(--r3) var(--r4);
  border-radius: var(--oblenie-m);
  border: 1px solid transparent;
  font-size: var(--v-xs);
  margin-bottom: var(--r4);
}
.oznam--chyba  { background: var(--cervena-podklad); border-color: #E8C4C4; color: var(--cervena); }
.oznam--uspech { background: var(--zelena-podklad);  border-color: #C4DFD0; color: var(--zelena); }
.oznam--info   { background: var(--modra-svetla);    border-color: #C9DCF3; color: var(--modra); }

/* ==========================================================================
   TABUĽKY (používatelia, objednávky v správe)
   ========================================================================== */
.tabulka {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--v-xs);
}
.tabulka th {
  padding: var(--r3) var(--r4);
  background: var(--podklad-tmavsi);
  text-align: left;
  font-size: var(--v-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-jemny);
  white-space: nowrap;
}
.tabulka th:first-child { border-top-left-radius: var(--oblenie-m); }
.tabulka th:last-child  { border-top-right-radius: var(--oblenie-m); }

.tabulka td {
  padding: var(--r3) var(--r4);
  border-bottom: 1px solid var(--ciara);
  vertical-align: middle;
}
.tabulka tbody tr:last-child td { border-bottom: none; }
.tabulka tbody tr:hover { background: var(--podklad-svetly); }

/* Obal pre vodorovné posúvanie tabuľky na mobile */
.tabulka-obal { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   PRÁZDNY STAV
   Zobrazí sa, keď zoznam nemá žiadne položky. Nie je to chyba -
   je to výzva k akcii, preto obsahuje tlačidlo.
   ========================================================================== */
.prazdny-stav {
  padding: var(--r8) var(--r5);
  text-align: center;
  border: 1px dashed var(--ciara-silna);
  border-radius: var(--oblenie-l);
  background: var(--papier);
}
.prazdny-stav__nadpis { margin-bottom: var(--r2); }
.prazdny-stav__text {
  color: var(--text-jemny);
  margin-bottom: var(--r4);
  font-size: var(--v-xs);
}

/* ==========================================================================
   COOKIE LIŠTA
   Fáza 1 = iba oznam (Umami nepoužíva cookies, prihlásenie v localStorage
   je nevyhnutné pre fungovanie). Trieda .cookie-listo--suhlas je pripravená
   pre neskoršie doplnenie tlačidla "Odmietnuť".
   ========================================================================== */
.cookie-lista {
  position: fixed;
  left: var(--r4);
  right: var(--r4);
  bottom: var(--r4);
  z-index: 200;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--r4);
  padding: var(--r4) var(--r5);
  background: var(--papier);
  border: 1px solid var(--ciara-silna);
  border-radius: var(--oblenie-l);
  box-shadow: var(--tien-l);
  animation: cookie-prichod 300ms ease;
}
@keyframes cookie-prichod {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-lista__text {
  flex: 1;
  font-size: var(--v-xs);
  color: var(--text-jemny);
  line-height: 1.5;
}
.cookie-lista__akcie { display: flex; gap: var(--r2); flex-shrink: 0; }

@media (max-width: 640px) {
  .cookie-lista { flex-direction: column; align-items: stretch; }
  .cookie-lista__akcie { justify-content: flex-end; }
}