/* 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: #8a939f;
  --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); }

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; }
.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: #ccd2da; }
.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: #ccd2da; }

/* ---------- 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; }
}