/* "Učitelj" v0.1 — stilovi (README §4: UX i vizuelni smerokazi)
   Sve stilove aplikacije drži ovaj fajl; view-e (Task 9–15) koriste samo klase.
   Font: system stack — NEMA eksternih fontova ni CDN-a (README 4, 5). */

/* ---------- Paleta (tačno po tabeli iz README sekcije 4) ---------- */
:root {
  --primary: #3A86FF;
  --accent:  #FFB703;
  --success: #2DC653;
  --error:   #FF5D5D;
  --bg:      #F7F9FF;
  --ink:     #16233F;
  /* Tamniji akcent za TEKST na beloj pozadini (--accent sam po sebi ima
     slabe kontraste sa belom); koristi se za veliki rezultat X/Y. */
  --accent-deep: #9A5B00;
}

/* ---------- Osnovno ---------- */
* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem; /* 16px */
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
}

/* Pristupačnost: vidljiv fokus (kontrast AA) */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* [hidden] mora imati prednost nad display-vima iz klasa (npr. .dugme) */
[hidden] {
  display: none !important;
}

/* ---------- Raspored: mobile-first ----------
   Ispod 768px: jedan stupac (flex kolona).
   Desktop: kolona max 760px, centrirana. */
.kolona {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Zaglavlje: levo logo, desno gumb (Nalog / ime → profil) */
.zaglavlje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.zaglavlje__logo {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.zaglavlje__desno {
  display: flex;
  align-items: center;
  gap: 8px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Kartice ----------
   Bele kartice, zaobljenost 16px, meke senke. */
.kartica {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(22, 35, 63, 0.08);
  padding: 24px;
}
/* Kartica sa centriranim sadržajem (Početna, Rezultat, …) */
.kartica--centar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 48px 24px;
}

/* ---------- Dugmad ----------
   Duge dotikne površine: min 48px visine. */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 20px;
  border: none;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(22, 35, 63, 0.12);
  font-family: inherit;
  font-size: 1.2rem; /* 19.2px — čitljivo za decu, AA kontrast */
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.dugme:hover {
  box-shadow: 0 3px 8px rgba(22, 35, 63, 0.16);
}
/* Mikro-animacija pritiska (≤ 200ms) */
.dugme:active {
  transform: scale(0.96);
}
.dugme:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* Dugmad sa feedback bojom (tačno/pogrešno) ostaju u punoj boji i kad su blokirana */
.dugme--uspeh:disabled,
.dugme--greska:disabled {
  opacity: 1;
}

.dugme--primary {
  background: var(--primary);
  color: #fff;
}
.dugme--primary:hover {
  background: #2f6fe2;
}
.dugme--uspeh {
  background: var(--success);
  color: #fff;
}
.dugme--uspeh:hover {
  background: #27ad49;
}
.dugme--greska {
  background: var(--error);
  color: #fff;
}
.dugme--greska:hover {
  background: #ea4b4b;
}
/* Veliko dugme (DA/NE, glavne akcije) — još duža dotikna površina */
.dugme--veliko {
  width: 100%;
  min-height: 64px;
  font-size: 1.4rem;
  border-radius: 16px;
}

/* ---------- Traka napretka ----------
   `.traka-napretka` je „kolicnik"; unutrašnji element
   `.traka-napretka--punja` ima širinu koju view postavlja inline
   (npr. style="width:40%"). */
.traka-napretka {
  height: 14px;
  background: #e3e9f7;
  border-radius: 999px;
  overflow: hidden;
}
.traka-napretka--punja {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 200ms ease;
}

/* ---------- Modal (pomoć / chat) ----------
   Overlay sa fade-om (≤ 200ms); unutra se stavlja .kartica. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(22, 35, 63, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.modal--otvoren {
  opacity: 1;
  visibility: visible;
}
.modal .kartica {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: auto;
  transform: translateY(8px) scale(0.98);
  transition: transform 200ms ease;
}
.modal--otvoren .kartica {
  transform: none;
}

/* ---------- Avatar (Učitelj u chatu) ---------- */
.avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 2px 6px rgba(22, 35, 63, 0.15);
}

/* ---------- Poruka o grešci ----------
   CRVENA, ispod polja — samo za validaciju („Lozinka mora imati
   bar 6 znakova."), NIKAD za tehničke greške (stack trace, SQL). */
.poruka-greska {
  color: var(--error);
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 6px 0 0;
}

/* ---------- Zvezdica (⭐ na ekranu Rezultat) ---------- */
.zvezdica {
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.25em;
  color: var(--accent);
}

/* ---------- Pomoć ❓ (krug sa znakom) ----------
   View dodaje aria-label; CSS ga ne sme skrivati. */
.pomoć {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(22, 35, 63, 0.18);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.pomoć:active {
  transform: scale(0.92);
}

/* ---------- Mehurići (chat) ----------
   `.mehuric--ucitelj` — levo (beli); `.mehuric--dete` — desno (plavi). */
.mehurici {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mehuric {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 1rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.mehuric--ucitelj {
  align-self: flex-start;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 35, 63, 0.12);
  border-bottom-left-radius: 4px;
}
.mehuric--dete {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* ---------- Tekst pitanja (min 20px — README 4) ---------- */
.pitanje {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

/* ---------- Mikro-animacija „Bravo!" (≤ 200ms) ---------- */
@keyframes bravo {
  from {
    transform: scale(0.6);
    opacity: 0.4;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.bravo {
  animation: bravo 200ms ease;
}

/* ---------- Placeholder (app.js fallback dok view-e ne postoje) ---------- */
.placeholder {
  padding: 3rem 1rem;
  text-align: center;
}

/* ---------- Početna (view klase) ---------- */
.pocetna__emoji {
  font-size: 4rem;
  line-height: 1;
}
.pocetna__naslov {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
}
.pocetna__opis {
  margin: 0;
  max-width: 42ch;
  color: rgba(22, 35, 63, 0.7);
}
.pocetna__pozdrav {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ---------- Izbor (wizard: razred → predmet → oblast) ---------- */
.izbor__vrh {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.izbor__nazad {
  margin-left: auto;
}
/* Putanja: klikabilni „čipovi" za ponovni izbor („2. razred → Matematika") */
.izbor__putanja {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.izbor__putanja-dugme {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 14px;
  border: none;
  border-radius: 999px;
  background: #e8eefc;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.izbor__putanja-dugme:hover {
  background: #d7e2fb;
}
.izbor__putanja-separator {
  font-weight: 700;
  color: rgba(22, 35, 63, 0.4);
}
.izbor__korak {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(22, 35, 63, 0.5);
}
.izbor__naslov {
  margin: 4px 0 20px;
  font-size: 1.5rem;
  font-weight: 800;
}
/* Mreza kartica: 2 kolone (mobilno), 3 (desktop) */
.izbor__mreza {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* Kartice razreda/predmeta su dugmad (veće dotikne površine) */
.izbor__kartica {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  padding: 24px 12px;
  border: none;
  color: var(--ink);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.izbor__kartica:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(22, 35, 63, 0.14);
}
.izbor__kartica:active {
  transform: scale(0.97);
}
.izbor__razred-broj {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}
.izbor__razred-ime,
.izbor__naziv {
  font-size: 1.0625rem;
  font-weight: 700;
}
.izbor__emoji {
  font-size: 2.75rem;
  line-height: 1;
}
/* Oblasti: lista celih dugmadi (naziv levo, broj pitanja desno) */
.izbor__oblasti {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.izbor__oblast {
  justify-content: space-between;
  text-align: left;
}
.izbor__oblast-naziv {
  font-weight: 800;
}
.izbor__oblast-broj {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(22, 35, 63, 0.55);
  white-space: nowrap;
}
/* Prazno stanje / učitavanje / greška */
.izbor__prazno,
.izbor__ucitavanje {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(22, 35, 63, 0.7);
}
.izbor__greska {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 16px 0;
}
.izbor__greska .izbor__naslov {
  margin: 0;
}
@media (min-width: 768px) {
  .izbor__mreza {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Tečenje (kviz: jedno pitanje po ekranu, Task 11) ---------- */
/* Gornji red: traka napretka + indikator „Pitanje X/Y" */
.tecenje__napredak {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tecenje__napredak .traka-napretka {
  flex: 1;
}
.tecenje__brojac {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(22, 35, 63, 0.6);
}
/* Kontekst iznad kartice: „2. razred · Matematika · Oduzimanje" */
.tecenje__kontekst {
  margin: -8px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(22, 35, 63, 0.5);
}
/* Vrh kartice: tekst pitanja (levo) + ❓ uvek vidljivo (gornji desni ugao) */
.tecenje__vrh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tecenje__vrh .pitanje {
  flex: 1;
  min-width: 0;
}
.tecenje__vrh .pomoć {
  flex-shrink: 0;
  margin-top: -4px;
}
/* Odgovori: stubac velikih dugmadi (min 48px / 64px površina) */
.tecenje__odgovori {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
/* Feedback: „Bravo! 🎉" / „Ne, tačan odgovor je: …" */
.tecenje__feedback {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}
.tecenje__feedback--uspeh {
  background: rgba(45, 198, 83, 0.15);
  color: #1d7c38;
}
.tecenje__feedback--greska {
  background: rgba(255, 93, 93, 0.12);
  color: #c23a3a;
}
/* Podsetnik posle greške: „Klikni ❓ da pročitaš objašnjenje." */
.tecenje__podsetnik {
  margin: 10px 0 0;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: rgba(22, 35, 63, 0.6);
}
.tecenje__dalje {
  margin-top: 20px;
  width: 100%;
}
/* Učitavanje */
.tecenje__ucitavanje {
  margin: 0;
  padding: 32px 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(22, 35, 63, 0.7);
}
/* Modal pomoći (Task 12): kućica + sadržaj (tačan odgovor / objašnjenje / chat) */
.tecenje__modal-vrh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tecenje__modal-naslov {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
}
.tecenje__modal-zatvori {
  min-width: 48px;
  padding: 0;
  font-size: 1.25rem;
}
/* Kontejner za deove sadržaja (učitavanje → deo 1–3 → chat) */
.tecenje__modal-sadrzaj {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tecenje__modal-prazno {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(22, 35, 63, 0.7);
}
/* Deo 1 — „Tačan odgovor: …" (kratak, istaknut) */
.tecenje__pomoc-tacan {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(45, 198, 83, 0.12);
  color: #1d7c38;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: break-word;
}
/* Deo 2 — „Objašnjenje" + dete-prijateljan tekst */
.tecenje__pomoc-naslov {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 800;
}
.tecenje__pomoc-objasnjenje {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(22, 35, 63, 0.85);
  overflow-wrap: break-word;
}
/* Deo 3 (prijavljen) — dugme za chat „Učitelj" (Task 13) */
.tecenje__modal-chat {
  width: 100%;
}
/* Deo 3 (gost) — prompt za prijavu */
.tecenje__pomoc-gost {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.tecenje__pomoc-gost-tekst {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(22, 35, 63, 0.7);
}
.tecenje__pomoc-prijava {
  width: 100%;
}

/* ---------- Chat „Učitelj" (Task 13: unutar modala pomoći) ---------- */
/* Lista mehurića skroluje zasebno — red za unos ostaje uvek vidljiv */
.chat__mehurici {
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 4px;
}
/* Red Učitelja: avatar „U" + beli mehuric (levo) */
.mehuric-red {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* Red za unos: polje + „Pošalji" */
.chat__unos {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat__polje {
  flex: 1;
  min-width: 0;
  min-height: 48px; /* duga dotikna površina (README 4) */
  padding: 8px 14px;
  border: 2px solid rgba(22, 35, 63, 0.14);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.0625rem;
  transition: border-color 150ms ease;
}
.chat__polje::placeholder {
  color: rgba(22, 35, 63, 0.45);
}
.chat__polje:focus {
  outline: none;
  border-color: var(--primary);
}
.chat__posalji {
  flex-shrink: 0;
  padding: 0 18px;
}
/* Indikator „Učitelj piše…" — pojavi se fade-om (≤ 200ms);
   same tačke su statične → reduced-motion automatski zadovoljen */
.chat__pisanje {
  transition: opacity 150ms ease;
}
.chat__tačke {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.chat__tacka {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(22, 35, 63, 0.5);
}
.chat__tacka:nth-child(2) {
  opacity: 0.65;
}
.chat__tacka:nth-child(3) {
  opacity: 0.35;
}
/* Dečja poruka o grešci (role="alert") — nikad tehnički detalj */
.chat__greska {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 93, 93, 0.12);
  color: #c23a3a;
  font-weight: 600;
  text-align: center;
  overflow-wrap: break-word;
}

/* ---------- Rezultat (Task 14: X/Y + zvezdice + lista pitanja) ---------- */
/* Veliki rezultat „X / Y" — akcenat (tamniji za AA kontrast na belom) */
.rezultat__ocena {
  margin: 0;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent-deep);
}
/* Dečja poruka ispod ocene („Savršeno! Sve tačno! 🎉") */
.rezultat__poruka {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(22, 35, 63, 0.75);
}
/* Lista pitanja: puna širina, levo poravnato unutar centrirane kartice */
.rezultat__lista {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  text-align: left;
}
/* Jedno pitanje: ikona statusa + tekst (+ za ❌: tačan odgovor) */
.rezultat__stavka {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
}
.rezultat__stavka--uspeh {
  background: rgba(45, 198, 83, 0.10);
}
.rezultat__stavka--pomoc {
  background: rgba(255, 183, 3, 0.15);
}
.rezultat__stavka--greska {
  background: rgba(255, 93, 93, 0.08);
}
.rezultat__stavka-vrh {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rezultat__status {
  flex-shrink: 0;
  font-size: 1.375rem;
  line-height: 1.35;
}
.rezultat__tekst {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  overflow-wrap: break-word;
}
/* Tačan odgovor uz ❌ — poređen sa tekstom pitanja (ikona + razmak) */
.rezultat__tacan {
  margin: 4px 0 0;
  padding-left: 40px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(22, 35, 63, 0.7);
  overflow-wrap: break-word;
}
/* Dugmad: stubac na mobilnom, red od 480px */
.rezultat__dugmad {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rezultat__dugmad .dugme {
  width: 100%;
}
@media (min-width: 480px) {
  .rezultat__dugmad {
    flex-direction: row;
  }
}
/* Greška kod „Ponovo" (role=alert) */
.rezultat__status-greska {
  margin: 0;
  min-height: 1.5em;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--error);
  text-align: center;
  overflow-wrap: break-word;
}

/* ---------- Profil (Task 14: statistika + odjava) ---------- */
.profil__kartica {
  display: flex;
  flex-direction: column;
}
/* Zaglavlje kartice: „Ćao, Mila! 👋" + e-mail */
.profil__pozdrav {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
}
.profil__email {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(22, 35, 63, 0.6);
  overflow-wrap: break-word;
}
.profil__naslov {
  margin: 28px 0 12px;
  font-size: 1.25rem;
  font-weight: 800;
}
/* Red statistike: „🧮 Matematika · 2. razred — 12/15 (80%)" */
.profil__statistika {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profil__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profil__red {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
  font-size: 1.0625rem;
  font-weight: 600;
}
.profil__red-ikona {
  font-size: 1.5rem;
  line-height: 1;
}
.profil__red-tekst {
  overflow-wrap: break-word;
}
/* Prazno stanje: „Još nemaš rešenih oblasti. Kreni 🚀" */
.profil__prazno {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(22, 35, 63, 0.7);
}
/* Greška odjave (role=alert) */
.profil__status-greska {
  margin: 12px 0 0;
  min-height: 1.5em;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--error);
  text-align: center;
  overflow-wrap: break-word;
}
.profil__odjava {
  margin-top: 8px;
  width: 100%;
}

/* ---------- Nalog (Task 15: registracija + prijava) ---------- */
.nalog__naslov {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
}
/* Tabovi: „Registracija" / „Prijava" — dva dugmeta koja prekloplju forme */
.nalog__tabovi {
  width: 100%;
  display: flex;
  gap: 8px;
}
.nalog__tab {
  flex: 1;
  min-height: 48px;
  border: 2px solid rgba(22, 35, 63, 0.14);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.nalog__tab:hover {
  background: #f0f4fd;
}
.nalog__tab--aktivan {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.nalog__tab--aktivan:hover {
  background: #2f6fe2;
}
/* Panel taba (wrapper); forma unutar njega je stubac polja */
.nalog__panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nalog__forma {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left; /* unutar centrirane kartice — polja su levo poravnata */
}
/* Grupa polja: labela + polje + greška ispod polja (.poruka-greska) */
.nalog__polje-grupa {
  display: flex;
  flex-direction: column;
}
.nalog__label {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
}
/* Polje — duga dotikna površina (min 48px, README 4) */
.nalog__polje {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid rgba(22, 35, 63, 0.14);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.0625rem;
  transition: border-color 150ms ease;
}
.nalog__polje::placeholder {
  color: rgba(22, 35, 63, 0.45);
}
.nalog__polje:focus {
  outline: none;
  border-color: var(--primary);
}
/* Polje sa greškom ispod — crvena ivica (README 4: --error) */
.nalog__polje--greska {
  border-color: var(--error);
}
/* Uspeh: „Registracija uspešna! Sada se prijavi." (u tab-u „Prijava") */
.nalog__uspeh {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(45, 198, 83, 0.15);
  color: #1d7c38;
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: center;
  overflow-wrap: break-word;
}
/* Greška ispod forme (prijava: „Pogrešan e-mail ili lozinka." / lockout) */
.nalog__greska-forma {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--error);
  text-align: center;
  overflow-wrap: break-word;
}
/* Prijavljen: „Ćao, {ime}! 👋" + dugmad */
.nalog__pozdrav {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
}
.nalog__email {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(22, 35, 63, 0.6);
  overflow-wrap: break-word;
}
.nalog__dugmad {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nalog__dugmad .dugme {
  width: 100%;
}
@media (min-width: 480px) {
  .nalog__dugmad {
    flex-direction: row;
  }
}

/* ---------- Modal na mobilnom: pun ekran (README 3.3) ---------- */
@media (max-width: 767px) {
  .modal {
    padding: 0;
  }
  .modal .kartica {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
  }
}

/* ---------- Smanjeno kretanje: isključi sve animacije ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}