/* Praktikum iz geodezije - Građevinski fakultet
   Suzdržan akademski izgled: jedna boja naglaska, tabelarni brojevi,
   dosta belog prostora. Bez okvira i senki gde ih tekst ne traži. */

:root {
  --tekst: #16191d;
  --sporedno: #5a6472;
  --tiho: #5f6a77;
  --linija: #dfe3e8;
  --linija-jaka: #c3cad3;
  --papir: #ffffff;
  --podloga: #f6f8fa;

  --naglasak: #14457c;
  --naglasak-svetli: #eaf1f9;
  --dobro: #14663a;
  --dobro-svetli: #edf7f1;
  --lose: #9c2222;
  --lose-svetli: #fcf1f1;
  --upozorenje: #8a5300;
  --upozorenje-svetli: #fdf6ea;

  --radius: 6px;
  --sirina: 66rem;
}

*, *::before, *::after { 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: 16px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--papir);
}

/* ---------- zaglavlje ---------- */

header {
  border-bottom: 1px solid var(--linija);
  background: var(--papir);
  position: sticky;
  top: 0;
  z-index: 10;
}

header > div {
  max-width: var(--sirina);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.75rem;
}

.marka {
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--tekst);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.marka .znak {
  width: 1.55rem; height: 1.55rem;
  border-radius: 4px;
  background: var(--naglasak);
  color: #fff;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
}

header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: .925rem;
}
header nav a { color: var(--sporedno); text-decoration: none; }
header nav a:hover { color: var(--naglasak); }
header nav form { margin: 0; }
.ko { color: var(--tiho); font-size: .85rem; }
.veza {
  background: none; border: 0; padding: 0;
  color: var(--sporedno); cursor: pointer; font: inherit;
}
.veza:hover { color: var(--naglasak); background: none; text-decoration: underline; }

main { max-width: var(--sirina); margin: 0 auto; padding: 2.25rem 1.5rem 4.5rem; }

footer {
  border-top: 1px solid var(--linija);
  background: var(--podloga);
  color: var(--tiho);
  font-size: .85rem;
}
footer > div { max-width: var(--sirina); margin: 0 auto; padding: 1.5rem; }

/* ---------- tipografija ---------- */

h1 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 .75rem; }
h2 { font-size: 1.2rem; letter-spacing: -0.01em; margin: 2.5rem 0 .85rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
p { margin: 0 0 .9rem; }

.napomena { color: var(--sporedno); font-size: .9rem; }
.napomena-mala { color: var(--tiho); font-size: .82rem; }
.upozorenje { color: var(--upozorenje); }
.istekao { color: var(--lose); font-size: .8rem; margin-left: .4rem; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em; background: var(--podloga);
  padding: .1em .35em; border-radius: 3px;
}

/* ---------- početna ---------- */

.hero { padding: 1.5rem 0 2.75rem; border-bottom: 1px solid var(--linija); }
.nadnaslov {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; font-weight: 600; color: var(--naglasak);
  margin-bottom: .5rem;
}
.hero h1 { font-size: 2.25rem; }
.uvod { font-size: 1.075rem; color: var(--sporedno); max-width: 46rem; }

.dugme {
  display: inline-block; padding: .6rem 1.15rem;
  background: var(--naglasak); color: #fff;
  border: 1px solid var(--naglasak); border-radius: var(--radius);
  text-decoration: none; font-size: .95rem; font-weight: 500;
}
.dugme:hover { background: #0f3763; }
.dugme.sporedno { background: #fff; color: var(--naglasak); }
.dugme.sporedno:hover { background: var(--naglasak-svetli); }

.kartice {
  display: grid; gap: 1rem; margin: 2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kartice article {
  border: 1px solid var(--linija); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; background: var(--papir);
}
.kartice p { margin: 0; font-size: .92rem; color: var(--sporedno); }

.dva-stupca {
  display: grid; gap: 2.5rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.koraci { padding-left: 1.2rem; color: var(--sporedno); font-size: .95rem; }
.koraci li { margin-bottom: .45rem; }

.pregled-zadataka .broj-zadatka { color: var(--tiho); width: 2.5rem; }
.pregled-zadataka .bodovi { text-align: right; width: 5rem; font-variant-numeric: tabular-nums; }
.pregled-zadataka tfoot td { font-weight: 600; border-bottom: 0; }

/* ---------- poruke ---------- */

.poruka {
  padding: .75rem 1rem; border: 1px solid var(--linija);
  border-left: 3px solid var(--naglasak);
  background: var(--naglasak-svetli);
  border-radius: var(--radius); margin-bottom: 1rem; font-size: .93rem;
}
.poruka.error { border-left-color: var(--lose); background: var(--lose-svetli); }
.poruka.success { border-left-color: var(--dobro); background: var(--dobro-svetli); }
.poruka.warning { border-left-color: var(--upozorenje); background: var(--upozorenje-svetli); }

/* ---------- tabele ---------- */

table { border-collapse: collapse; width: 100%; margin: .5rem 0 1.25rem; }
th, td {
  text-align: left; padding: .6rem .7rem;
  border-bottom: 1px solid var(--linija); font-size: .92rem;
}
thead th {
  font-weight: 600; color: var(--sporedno); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--linija-jaka);
}
tbody tr:hover { background: var(--podloga); }
tr.prihvaceno td:first-child { box-shadow: inset 3px 0 var(--dobro); }
tr.vraceno td:first-child { box-shadow: inset 3px 0 var(--upozorenje); }

/* ---------- traka sa podacima ---------- */

.traka {
  display: flex; gap: 1.75rem; flex-wrap: wrap; align-items: center;
  padding: .8rem 1.1rem; background: var(--podloga);
  border: 1px solid var(--linija); border-radius: var(--radius);
  font-size: .9rem; margin-bottom: 1.5rem; color: var(--sporedno);
}
.traka strong { color: var(--tekst); }
.traka.sumnjivo { background: var(--lose-svetli); border-color: #f0d5d5; color: var(--lose); }
.traka select {
  font: inherit; padding: .25rem .4rem;
  border: 1px solid var(--linija-jaka); border-radius: 4px;
}

/* ---------- forme ---------- */

.varijanta {
  border: 1px solid var(--linija); border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-bottom: 1.75rem; background: var(--podloga);
}
.varijanta summary {
  cursor: pointer; font-weight: 600; font-size: .95rem;
  color: var(--naglasak);
}
.varijanta table { background: var(--papir); margin-top: .85rem; }
.ocitavanja { font-variant-numeric: tabular-nums; }

fieldset {
  border: 1px solid var(--linija); border-radius: var(--radius);
  padding: 1.1rem 1.35rem 1.35rem; margin: 0 0 1.25rem;
}
legend {
  font-weight: 600; font-size: .95rem; padding: 0 .45rem;
  color: var(--naglasak);
}

.polje {
  display: grid; grid-template-columns: minmax(13rem, 24rem) 1fr;
  gap: .85rem; align-items: baseline;
  padding: .35rem 0; border-bottom: 1px dotted var(--linija);
}
.polje:last-child { border-bottom: 0; }
.polje label { font-size: .92rem; }
.jed { color: var(--tiho); }
.formula {
  grid-column: 2; color: var(--tiho);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem;
}

input[type="text"], input[type="password"], input[type="email"],
input:not([type]), input[inputmode="decimal"], input[type="file"], textarea {
  padding: .4rem .55rem; border: 1px solid var(--linija-jaka);
  border-radius: 4px; font: inherit;
  font-variant-numeric: tabular-nums; max-width: 15rem; background: #fff;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--naglasak); outline-offset: 1px; border-color: var(--naglasak);
}
.dms { display: inline-flex; gap: .3rem; }
.dms input { max-width: 4.75rem; text-align: right; }

.uska { max-width: 24rem; }
.uska p { margin: 0 0 1rem; }
.uska label { display: block; font-size: .92rem; margin-bottom: .25rem; }
.uska input { width: 100%; max-width: none; }
.uska .helptext { display: block; color: var(--tiho); font-size: .8rem; margin-top: .2rem; }
.uska ul.errorlist { margin: .3rem 0; padding-left: 1rem; color: var(--lose); font-size: .85rem; }

button {
  padding: .55rem 1.05rem; border: 1px solid var(--naglasak);
  border-radius: var(--radius); background: var(--naglasak);
  color: #fff; font: inherit; font-size: .93rem; cursor: pointer;
}
button:hover { background: #0f3763; }
button.sporedno { background: #fff; color: var(--naglasak); }
button.sporedno:hover { background: var(--naglasak-svetli); }
button.glavno { background: var(--dobro); border-color: var(--dobro); }
button.glavno:hover { background: #0f4f2c; }
button:disabled, button:disabled:hover, .veza:disabled:hover {
  background: #e6e9ed; border-color: var(--linija-jaka); color: var(--sporedno);
  cursor: not-allowed; text-decoration: none;
}
.veza:disabled, .veza:disabled:hover { background: none; }
.dugmad { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.25rem 0 .5rem; }

/* ---------- kontrole i provera ---------- */

.kontrole { padding-left: 1.15rem; font-size: .9rem; color: var(--tiho); }
.kontrole li { margin-bottom: .3rem; }
.kontrole li.blokira { color: var(--sporedno); }
.oznaka {
  font-size: .7rem; background: var(--naglasak-svetli); color: var(--naglasak);
  padding: .1rem .45rem; border-radius: 10px; font-weight: 500;
}

.provera tr.tacno td { background: var(--dobro-svetli); }
.provera tr.netacno td { background: var(--lose-svetli); }
.provera tr.prazno td { color: var(--tiho); }
.provera .broj { font-variant-numeric: tabular-nums; text-align: right; }
.rezime {
  font-size: 1.05rem; padding: .85rem 1.1rem;
  background: var(--podloga); border-radius: var(--radius);
  border: 1px solid var(--linija);
}

/* ---------- status ---------- */

.matrica {
  display: grid; gap: .75rem; margin: 1rem 0;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.celija {
  border: 1px solid var(--linija); border-left: 3px solid var(--linija-jaka);
  border-radius: var(--radius); padding: .75rem .85rem; background: var(--papir);
}
.celija .broj { font-weight: 650; font-size: .95rem; }
.celija .stanje { font-size: .85rem; color: var(--sporedno); }
.celija .sitno { color: var(--tiho); font-size: .78rem; margin-top: .35rem; line-height: 1.45; }
.celija.prihvaceno { border-left-color: var(--dobro); background: var(--dobro-svetli); }
.celija.predato { border-left-color: var(--naglasak); }
.celija.vraceno { border-left-color: var(--upozorenje); background: var(--upozorenje-svetli); }
.celija.nacrt { border-left-color: var(--linija-jaka); }

.hitno { list-style: none; padding: 0; margin: 0; }
.hitno li {
  border: 1px solid var(--linija); border-left: 3px solid var(--linija-jaka);
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .7rem;
}
.hitno li.vraceno { border-left-color: var(--upozorenje); background: var(--upozorenje-svetli); }
.hitno li a { font-weight: 600; text-decoration: none; color: var(--naglasak); }
.hitno .napomena { display: block; margin-top: .2rem; }
.primedba {
  margin: .45rem 0 .2rem; padding: .4rem .7rem;
  background: var(--papir); border-left: 2px solid var(--upozorenje);
  border-radius: 3px; font-size: .9rem;
}

/* ---------- kontrolorska tabla ---------- */

.tabla { font-variant-numeric: tabular-nums; }
.tabla .ime { white-space: nowrap; }
.tabla .ime small { display: block; color: var(--tiho); font-size: .75rem; }
.celija-tabla { text-align: center; width: 2.6rem; }
.celija-tabla a { text-decoration: none; font-size: 1.05rem; }
.celija-tabla.predato a { color: var(--naglasak); }
.celija-tabla.prihvaceno a { color: var(--dobro); }
.celija-tabla.vraceno a { color: var(--upozorenje); }
.celija-tabla.kasni { color: var(--lose); font-weight: 700; }
.celija-tabla .prazno { color: var(--tiho); }
.odluka textarea { width: 100%; max-width: 42rem; }

/* ---------- uski ekrani ---------- */

@media (max-width: 44rem) {
  main { padding: 1.5rem 1rem 3rem; }
  .polje { grid-template-columns: 1fr; gap: .3rem; }
  .formula { grid-column: 1; }
  .hero h1 { font-size: 1.65rem; }
  header > div { padding: 0 1rem; flex-wrap: wrap; gap: .75rem; }
  header nav { gap: .9rem; font-size: .875rem; }
  .traka { gap: .9rem; }
}

.zakljucan { color: var(--tiho); }
.katanac {
  color: var(--tiho); font-size: .8rem;
  border: 1px solid var(--linija); border-radius: 10px;
  padding: .1rem .5rem; white-space: nowrap; cursor: help;
}

.otkljucavanje {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end;
  padding: 1rem 1.15rem; border: 1px solid var(--linija);
  border-radius: var(--radius); background: var(--podloga);
}
.otkljucavanje label { display: block; font-size: .82rem; color: var(--sporedno); }
.otkljucavanje select, .otkljucavanje input {
  display: block; margin-top: .2rem; font: inherit;
  padding: .35rem .5rem; border: 1px solid var(--linija-jaka); border-radius: 4px;
}

/* ---------- tabelarni unos ---------- */

.tabela-unosa { overflow-x: auto; margin: .25rem 0; }
.tabela-unosa table { margin: 0; min-width: 100%; }
.tabela-unosa th[scope="row"] {
  text-align: left; white-space: nowrap; font-weight: 500;
  color: var(--tekst); font-size: .88rem; text-transform: none;
  letter-spacing: 0; background: var(--podloga);
  position: sticky; left: 0;
}
.tabela-unosa thead th {
  white-space: nowrap; font-size: .74rem; text-align: center;
}
.tabela-unosa td { padding: .3rem .35rem; text-align: center; }
.tabela-unosa input { max-width: 7.5rem; text-align: right; }
.tabela-unosa .dms input { max-width: 3.4rem; }
.prazna-celija { color: var(--tiho); }

/* ---------- uputstva ---------- */

.teorija { margin-bottom: 1.75rem; }
.teorija > summary {
  cursor: pointer; font-weight: 600; color: var(--naglasak);
  padding: .7rem 1rem; background: var(--naglasak-svetli);
  border-radius: var(--radius);
}
.teorija-telo { max-width: 46rem; }
.teorija-telo h2 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
.teorija-telo h3 { font-size: .98rem; margin: 1.25rem 0 .4rem; }
.teorija-telo pre {
  background: var(--podloga); border: 1px solid var(--linija);
  border-radius: var(--radius); padding: .8rem 1rem; overflow-x: auto;
}
.teorija-telo pre code {
  background: none; padding: 0; font-size: .875rem; line-height: 1.55;
}
.teorija-telo blockquote {
  margin: 1rem 0; padding: .75rem 1rem;
  border-left: 3px solid var(--upozorenje); background: var(--upozorenje-svetli);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.teorija-telo blockquote p:last-child { margin-bottom: 0; }
.teorija-telo ul { padding-left: 1.25rem; }
.teorija-telo li { margin-bottom: .35rem; }

.teorija-stranica {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr) 11rem;
}
.teorija-stranica aside h3 { font-size: .8rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--sporedno); }
.spisak-uputstava { list-style: none; padding: 0; display: flex;
  flex-wrap: wrap; gap: .35rem; }
.spisak-uputstava a {
  display: block; padding: .2rem .5rem; text-decoration: none;
  border: 1px solid var(--linija); border-radius: 4px;
  color: var(--naglasak); font-size: .85rem;
}
.spisak-uputstava .tekuci a {
  background: var(--naglasak); color: #fff; border-color: var(--naglasak);
}

@media (max-width: 52rem) {
  .teorija-stranica { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ================= poravnanja ================= */

/* Obostrano poravnanje teksta. `hyphens` je obavezan pratilac: bez deljenja
   reči justify u srpskom pravi široke „reke" belina, jer su reči duge. */
p, li, .uvod, .napomena, figcaption, blockquote p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Ono što nije tekuci tekst ostaje kako jeste - justify na jednom redu
   razvuče razmake preko celog stupca i izgleda pokvareno. */
.traka, .ko, .oznaka, .katanac, .istekao, .celija .stanje, .celija .sitno,
.spisak-uputstava, .dugmad, header nav, .hitno .napomena {
  text-align: initial;
  hyphens: manual;
}

/* Sadržaj tabela centriran vodoravno i uspravno. */
table th, table td {
  text-align: center;
  vertical-align: middle;
}
table td p, table td li { text-align: center; hyphens: manual; }

/* Prva kolona je oznaka reda - ostaje levo, inače se gubi veza sa redom
   kad su ćelije uske. */
.tabela-unosa th[scope="row"],
.tabla .ime,
.pregled-zadataka td:nth-child(2),
.provera td:first-child {
  text-align: left;
}

.tabela-unosa td { vertical-align: middle; }
.tabela-unosa input { text-align: center; }

/* ================= crteži ================= */

figure.crtez {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  background: var(--papir);
  text-align: center;
}
figure.crtez img { max-width: 100%; height: auto; }
figure.crtez figcaption {
  margin-top: .6rem;
  color: var(--sporedno);
  font-size: .85rem;
  text-align: center;
  hyphens: manual;
}

/* ---------- panel sa ulaznim podacima ---------- */

.varijanta-panel {
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem 1.5rem;
  margin-bottom: 1.75rem;
  background: var(--podloga);
}
.varijanta-panel h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.varijanta-panel table { background: var(--papir); }
.varijanta-panel .istaknut-red td {
  background: #fdf0ef; font-weight: 600;
}
figure.karta {
  margin: 1rem 0 1.25rem; padding: 0; text-align: center;
}
figure.karta svg { border-radius: 4px; }
figure.karta figcaption {
  margin-top: .5rem; color: var(--sporedno); font-size: .85rem;
  text-align: center; hyphens: manual;
}

/* ---------- potpis ---------- */

.potpis-blok {
  border: 1px solid var(--linija); border-left: 3px solid var(--linija-jaka);
  border-radius: var(--radius); padding: .9rem 1.15rem; margin: 1.25rem 0;
}
.potpis-blok p { margin: .3rem 0 0; font-size: .9rem; color: var(--sporedno); }
.potpis-blok.dobio { border-left-color: var(--dobro); background: var(--dobro-svetli); }
.potpis-blok.spreman { border-left-color: var(--naglasak); background: var(--naglasak-svetli); }
.potpis-blok.ceka { border-left-color: var(--linija-jaka); background: var(--podloga); }
.potpis-da { color: var(--dobro); }
.potpis-spreman { color: var(--naglasak); }

/* ---------- lista koraka za pokretanje godine ---------- */

.koraci-postavke { list-style: none; padding: 0; margin: 0 0 2rem; }
.koraci-postavke li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 1rem; align-items: center;
  padding: .8rem 1rem; margin-bottom: .5rem;
  border: 1px solid var(--linija); border-left: 3px solid var(--linija-jaka);
  border-radius: var(--radius);
}
.koraci-postavke li.ok { border-left-color: var(--dobro); background: var(--dobro-svetli); }
.koraci-postavke li.fali { border-left-color: var(--lose); background: var(--lose-svetli); }
.koraci-postavke li.opciono { border-left-color: var(--linija-jaka); background: var(--podloga); }

.oznaka-koraka {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: .9rem;
  background: var(--papir); border: 1px solid var(--linija-jaka);
}
.koraci-postavke li.ok .oznaka-koraka { color: var(--dobro); border-color: var(--dobro); }
.koraci-postavke li.fali .oznaka-koraka { color: var(--lose); border-color: var(--lose); }

.telo-koraka { display: flex; flex-direction: column; gap: .1rem; }
.stanje-koraka { font-size: .9rem; color: var(--sporedno); }
.telo-koraka .napomena-mala { margin-top: .15rem; }
.veza-koraka a { white-space: nowrap; font-size: .9rem; }

@media (max-width: 40rem) {
  .koraci-postavke li { grid-template-columns: 2rem minmax(0, 1fr); }
  .veza-koraka { grid-column: 2; }
}

/* --- pogled studenta -------------------------------------------------------- */
.pregled-traka {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  justify-content: space-between; padding: .55rem 1rem;
  background: var(--upozorenje-svetli); border-bottom: 2px solid var(--upozorenje);
  color: var(--upozorenje); font-size: .92rem;
}
.pregled-traka form { margin: 0; }
.pregled-traka button { padding: .25rem .7rem; }
.pregled-forma { border: 0; margin: 0; padding: 0; min-width: 0; }

/* --- uputstva ---------------------------------------------------------------- */
.moj-napredak {
  border: 1px solid var(--linija); border-radius: var(--radius);
  background: var(--podloga); padding: .9rem 1.1rem; margin: 1.25rem 0;
}
.moj-napredak h2 { margin-top: 0; }
.napredak-traka {
  height: .6rem; border-radius: 99px; background: var(--linija); overflow: hidden;
  margin: .4rem 0 .7rem;
}
.napredak-traka span { display: block; height: 100%; background: var(--dobro); }

.uputstvo-koraci { display: none; }
.uputstvo.js .uputstvo-koraci {
  display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 1.25rem 0; padding: 0;
  counter-reset: korak;
}
.uputstvo-koraci li { counter-increment: korak; }
.uputstvo-koraci button {
  background: var(--papir); color: var(--sporedno); border: 1px solid var(--linija-jaka);
  padding: .3rem .65rem; font-size: .88rem; font-weight: 500;
}
.uputstvo-koraci button::before { content: counter(korak) ". "; }
.uputstvo-koraci button.viden { color: var(--dobro); border-color: var(--dobro); background: var(--dobro-svetli); }
.uputstvo-koraci button.tekuci,
.uputstvo-koraci button:hover { background: var(--naglasak); border-color: var(--naglasak); color: #fff; }
.korak {
  border: 1px solid var(--linija); border-radius: var(--radius);
  padding: .4rem 1.2rem 1rem; background: var(--papir);
}
.uputstvo:not(.js) .korak { margin-bottom: 1rem; }
.uputstvo-dno { display: none; }
.uputstvo.js .uputstvo-dno {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .9rem 0 2rem;
}
.uputstvo-brojac { color: var(--sporedno); font-size: .88rem; }

.izbor { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.izbor button.izabrano { background: var(--naglasak); border-color: var(--naglasak); color: #fff; }
.izbor-tekst {
  flex-basis: 100%; margin: .4rem 0 0; padding: .6rem .8rem; min-height: 3.2rem;
  background: var(--naglasak-svetli); border-radius: var(--radius);
}

.vezbanje { margin: .75rem 0; }
.vezbanje-polje { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin-bottom: .7rem; }
.vezbanje-polje label, .oznaka-polja { flex-basis: 100%; font-weight: 500; }
.vezbanje-polje input { max-width: 7rem; }
.vezbanje-znak { font-size: .88rem; font-weight: 600; }
.vezbanje-znak.ok { color: var(--dobro); }
.vezbanje-znak.ne { color: var(--upozorenje); }
.traka-vezbanja { margin: .3rem 0; color: var(--sporedno); }

.pretraga-pitanja { width: 100%; max-width: 26rem; margin-bottom: .6rem; }
input[type="search"], input[type="date"] {
  padding: .4rem .55rem; border: 1px solid var(--linija-jaka); border-radius: 4px; font: inherit;
}
.pitanja details { border-bottom: 1px solid var(--linija); padding: .55rem 0; }
.pitanja summary { cursor: pointer; font-weight: 500; }
.pitanja details p { margin: .45rem 0 .2rem; }

/* --- obilazak stranice -------------------------------------------------------- */
.obilazak-dugme {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.obilazak-okvir {
  position: fixed; z-index: 50; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 35, .55);
  transition: top .18s, left .18s, width .18s, height .18s;
}
.obilazak-oblak {
  position: fixed; z-index: 51; width: min(22rem, calc(100vw - 24px));
  background: var(--papir); border-radius: var(--radius); padding: .8rem .95rem;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
.obilazak-oblak p { margin: .35rem 0 .65rem; }
.obilazak-red { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.obilazak-red span { margin-right: auto; color: var(--sporedno); font-size: .85rem; }
.obilazak-red button { padding: .25rem .65rem; font-size: .88rem; }
@media (max-width: 600px) {
  .uputstvo-koraci button { font-size: .82rem; }
  .obilazak-dugme { right: .6rem; bottom: .6rem; }
}

/* meni osoblja je dug: prelama se u nov red umesto da gura stranicu u širinu */
header > div { flex-wrap: wrap; padding-top: .35rem; padding-bottom: .35rem; }
.marka { white-space: nowrap; }
header nav { flex-wrap: wrap; row-gap: .25rem; }
header nav a, .ko { white-space: nowrap; }

/* --- meni i podmeni ----------------------------------------------------------- */
header nav a.aktivno { color: var(--naglasak); font-weight: 650; }
.podmeni { background: var(--podloga); border-bottom: 1px solid var(--linija); }
.podmeni > div {
  max-width: var(--sirina); margin: 0 auto; padding: .1rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: .1rem 1.25rem;
}
.podmeni a {
  padding: .45rem 0; font-size: .9rem; color: var(--sporedno); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.podmeni a:hover { color: var(--naglasak); }
.podmeni a.aktivno { color: var(--naglasak); border-bottom-color: var(--naglasak); font-weight: 600; }

/* --- kartice --------------------------------------------------------------------- */
.kartice-nav {
  display: flex; flex-wrap: wrap; gap: .25rem; margin: 1.1rem 0 1.25rem;
  border-bottom: 1px solid var(--linija-jaka);
}
.kartice-nav button {
  background: none; color: var(--sporedno); border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; padding: .5rem .9rem; font-weight: 550; margin-bottom: -1px;
}
.kartice-nav button:hover { background: var(--naglasak-svetli); color: var(--naglasak); }
.kartice-nav button.tekuca { color: var(--naglasak); border-bottom-color: var(--naglasak); }
.delovi > section > h2:first-child { margin-top: 0; }
.delovi:not(.js) > section { margin-bottom: 2rem; }

/* --- sledeći korak ------------------------------------------------------------- */
.sledeci-korak {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
  margin: 1rem 0 1.25rem; padding: .85rem 1.1rem;
  background: var(--naglasak-svetli); border-left: 4px solid var(--naglasak);
  border-radius: var(--radius);
}
.sledeci-korak > div { display: flex; flex-direction: column; gap: .1rem; }
.sledeci-korak .nadnaslov { margin: 0; }

.tok-rada { list-style: none; margin: 1.25rem 0 2rem; padding: 0; }
.tok-rada li {
  display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; margin-bottom: .6rem;
  border: 1px solid var(--linija); border-radius: var(--radius); background: var(--papir);
}
.tok-rada li.sledeci { border-color: var(--naglasak); background: var(--naglasak-svetli); }
.tok-broj {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--podloga); border: 1px solid var(--linija-jaka); font-weight: 650;
}
.tok-rada .sledeci .tok-broj { background: var(--naglasak); border-color: var(--naglasak); color: #fff; }
.tok-rada .gotovo .tok-broj { background: var(--dobro-svetli); border-color: var(--dobro); color: var(--dobro); }
.tok-telo { flex: 1; min-width: 0; }
.tok-telo h2 { font-size: 1rem; margin: 0 0 .1rem; }
.tok-telo p { margin: 0; }
.tok-rada .dugme { flex: none; }
.povremeno { padding-left: 1.2rem; }
@media (max-width: 600px) {
  .podmeni > div { padding: .1rem 1rem; }
  .tok-rada li { flex-wrap: wrap; }
  .tok-telo { flex-basis: calc(100% - 3rem); }
  .tok-rada .dugme { margin-left: 3rem; }
}

/* --- grb fakulteta ------------------------------------------------------------- */
.marka .grb { height: 2.1rem; width: auto; display: block; }
.hero { text-align: center; }
.hero .uvod { margin-left: auto; margin-right: auto; }
.hero .dugmad { justify-content: center; }
.hero-fakultet {
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  margin-bottom: 1.5rem; font-size: .95rem; font-weight: 600; color: var(--naglasak);
}
.hero-fakultet img { height: 6rem; width: auto; margin-bottom: .55rem; }
.ukratko {
  border-left: 3px solid var(--naglasak); padding: .1rem 0 .1rem 1rem; margin: 1.25rem 0;
}
.ukratko h2 { margin-top: .2rem; }
.ukratko ol { margin-bottom: .4rem; padding-left: 1.2rem; }

/* --- prisustvo ---------------------------------------------------------------- */
.izbor-casa { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.25rem; margin: 1rem 0 1.25rem; }
.izbor-casa fieldset { border: 0; margin: 0; padding: 0; min-width: 0; flex-basis: 100%; }
.izbor-casa legend { padding: 0; font-weight: 600; margin-bottom: .3rem; }
.izbor-grupa { display: flex; flex-wrap: wrap; gap: .35rem; }
.izbor-grupa input, .prozivka-oznake input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.izbor-grupa label, .prozivka-oznake label { position: relative; cursor: pointer; }
.izbor-grupa span {
  display: block; padding: .3rem .7rem; border: 1px solid var(--linija-jaka);
  border-radius: var(--radius); background: var(--papir); color: var(--tekst);
}
.izbor-grupa label:hover input:not(:checked) + span { background: var(--naglasak-svetli); }
.izbor-grupa input:checked + span { background: var(--naglasak); border-color: var(--naglasak); color: #fff; }
.izbor-grupa input:focus-visible + span, .prozivka-oznake input:focus-visible + span {
  outline: 2px solid var(--naglasak); outline-offset: 2px;
}
.datum-casa { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; }

.prozivka-alati {
  position: sticky; top: 3.8rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem 1.25rem; padding: .5rem .8rem; margin-bottom: .75rem;
  background: var(--podloga); border: 1px solid var(--linija); border-radius: var(--radius);
}
.prozivka-alati button { margin-left: auto; padding: .3rem .7rem; font-size: .88rem; }
.prozivka { list-style: decimal; margin: 0 0 1rem; padding-left: 2rem; }
.prozivka li { padding: .15rem 0; border-bottom: 1px solid var(--linija); }
.prozivka li > * { vertical-align: middle; }
.prozivka li { display: list-item; }
.prozivka-ime { display: inline-block; width: calc(100% - 7rem); }
.prozivka-ime small { color: var(--tiho); margin-left: .35rem; }
.prozivka-oznake { display: inline-flex; gap: .4rem; width: 6.5rem; justify-content: flex-end; }
.prozivka-oznake span {
  display: grid; place-items: center; width: 2.75rem; height: 2.5rem;
  border: 1px solid var(--linija-jaka); border-radius: var(--radius);
  background: var(--papir); color: var(--tekst); font-size: 1.25rem; font-weight: 700;
}
.prozivka-oznake .plus:hover input:not(:checked) + span { background: var(--dobro-svetli); color: var(--dobro); border-color: var(--dobro); }
.prozivka-oznake .minus:hover input:not(:checked) + span { background: var(--lose-svetli); color: var(--lose); border-color: var(--lose); }
.prozivka-oznake .plus input:checked + span { background: var(--dobro); border-color: var(--dobro); color: #fff; }
.prozivka-oznake .minus input:checked + span { background: var(--lose); border-color: var(--lose); color: #fff; }
.prozivka-cuvanje {
  position: sticky; bottom: 0; padding: .6rem 0; background: var(--papir); border-top: 1px solid var(--linija);
}
.obrisi-cas { margin-top: 1rem; }

.evidencija { font-size: .9rem; }
.evidencija th, .evidencija td { text-align: center; padding: .3rem .45rem; white-space: nowrap; }
.evidencija td.ime { text-align: left; }
.evidencija td.ime small { color: var(--tiho); margin-left: .3rem; }
.evidencija td.plus { color: var(--dobro); font-weight: 700; background: var(--dobro-svetli); }
.evidencija td.minus { color: var(--lose); font-weight: 700; background: var(--lose-svetli); }

/* --- prilozi -------------------------------------------------------------------- */
.spisak-priloga { list-style: none; margin: 0 0 .6rem; padding: 0; }
.spisak-priloga li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .3rem 0; border-bottom: 1px solid var(--linija);
}
.spisak-priloga a { overflow-wrap: anywhere; }
.prilozi input[type="file"] { max-width: 100%; }
.prilozi-pregled { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.prilozi-pregled a {
  display: flex; flex-direction: column; gap: .3rem; max-width: 14rem; padding: .4rem;
  border: 1px solid var(--linija); border-radius: var(--radius); overflow-wrap: anywhere;
}
.prilozi-pregled img { max-width: 100%; max-height: 10rem; object-fit: contain; }

/* --- izostanci ------------------------------------------------------------------- */
.mora-da-se-javi { display: block; color: var(--lose); font-weight: 600; font-size: .85rem; }
td.preko-granice { color: var(--lose); font-weight: 700; background: var(--lose-svetli); }
.prisustvo-datumi { display: flex; flex-wrap: wrap; gap: .35rem; }
.prisustvo-datumi span {
  padding: .2rem .55rem; border-radius: 4px; font-size: .88rem; border: 1px solid var(--linija);
}
.prisustvo-datumi .plus { background: var(--dobro-svetli); color: var(--dobro); }
.prisustvo-datumi .minus { background: var(--lose-svetli); color: var(--lose); }

/* --- samostalan rad ------------------------------------------------------------- */
.van-ekrana { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.izjava { display: flex; gap: .55rem; align-items: flex-start; margin: .75rem 0; font-size: .93rem; }
.izjava input { margin-top: .22rem; flex: none; }

.obavestenje-blokada { border: 1px solid var(--okvir, #c9c2b0); border-left: 4px solid #b3261e;
  padding: .75rem 1rem; margin: 1rem 0; }
.obavestenje-blokada h2 { margin-top: 0; }