/* roger2mpp — osnovni stil (indigo akcenti, svetla i tamna tema).
 *
 * ---- Tema (I004) ----------------------------------------------------------
 * Sve boje su promenljive; svetla tema je u `:root`, tamna je JEDAN blok
 * `:root[data-tema="tamno"]` niže. U pravilima ispod nema nijedne tvrdo upisane boje —
 * nova boja u pravilu znači i nova promenljiva u OBA bloka, inače tamna tema ostaje
 * sa svetlom mrljom.
 *
 * Atribut `data-tema` postavlja `app.js`, i to **razrešen** (`svetlo` ili `tamno`) —
 * izbor `automatski` se u JS-u prevodi kroz `prefers-color-scheme`. Zato ovde nema
 * `@media (prefers-color-scheme: dark)`: bio bi drugi primerak tamne palete koji se
 * vremenom raziđe sa prvim.
 *
 * Podela akcentnih boja nije stilska:
 *   --akcenat        podloga (zaglavlje, dugme) — na njoj uvek stoji `--na-akcentu`
 *   --akcenat-tekst  akcenat kao TEKST/ivica na podlozi strane; u tamnoj temi mora biti
 *                    svetliji od podloge, pa se ne može koristiti ista vrednost
 *   --akcenat-svetli podloga pilule/označenog reda, sa `--akcenat-tamni` kao tekstom
 */

:root {
  color-scheme: light;

  --akcenat: #4338ca;
  --akcenat-hover: #312e81;
  --akcenat-tekst: #4338ca;
  --akcenat-svetli: #e0e7ff;
  --akcenat-tamni: #312e81;
  --na-akcentu: #ffffff;
  /* Ivica i podloge kontrole koja stoji NA akcentu (izbor teme u zaglavlju). Zaglavlje je
     indigo u obe teme, pa se ove vrednosti u tamnoj ne menjaju i nema ih u tamnom bloku. */
  --ivica-na-akcentu: rgba(255, 255, 255, 0.5);
  --na-akcentu-blago: rgba(255, 255, 255, 0.18);
  --na-akcentu-jako: rgba(255, 255, 255, 0.32);
  --tekst: #0f172a;
  --tekst-slab: #475569;
  --ivica: #cbd5e1;
  --pozadina: #ffffff;
  /* Podloga kartica, polja, modala i „ploča" nad listom. U svetloj temi je ista kao
     `--pozadina` (bela na beloj), u tamnoj je za nijansu svetlija od strane. */
  --povrsina: #ffffff;
  --sivo-bg: #f8fafc;
  --greska: #b91c1c;
  --greska-bg: #fef2f2;
  --greska-ivica: #fecaca;
  --ok: #15803d;
  --ok-bg: #f0fdf4;
  --ok-ivica: #bbf7d0;
  --upozorenje: #b45309;
  --upozorenje-bg: #fffbeb;
  --upozorenje-ivica: #fde68a;
  /* Nijanse za liste. Tri različite poruke, ne tri jačine iste:
     pruga = „drugi red", hover = „ovaj red je pod mišem", stanje = „ovaj red je sporan".
     Svako stanje ima i svoju prugu, jer se u proveri lista često sastoji SAMO od žutih
     redova — tamo bi neutralna pruga bila prekrivena i nijansiranja ne bi ni bilo. */
  --zebra: #f6f8fb;
  --hover: #eef2ff;
  --ivica-blaga: #e6ebf2;
  --zaglavlje-bg: #eceff5;
  --pazi-bg: #fee2e2;
  --greska-zebra: #fdeaea;
  --greska-hover: #fbdada;
  --upozorenje-zebra: #fef6dc;
  --upozorenje-hover: #fdeab4;
  --izuzet-bg: #f1f5f9;
  --izuzet-zebra: #e9eef4;
  --izuzet-hover: #dde4ec;
  --neutralno-bg: #f1f5f9;
  /* Pregledan zapis (provera). Razmak između pruge i osnove je namerno veći nego kod
     ostalih stanja: pregledanih redova na kraju bude najviše, pa se u nizu od trideset
     zelenih redova granica između dva susedna mora videti bez zagledanja. */
  --pregledan-bg: #eefbf2;
  --pregledan-zebra: #dcf5e5;
  --pregledan-hover: #c6eed6;
  --senka-boja: rgba(15, 23, 42, 0.12);
  --senka-jaka: rgba(15, 23, 42, 0.35);
  --zastor: rgba(15, 23, 42, 0.5);
  /* Podloga izračunate vrednosti u liniji motora — providna, da radi na svakoj boji reda. */
  --vred-bg: rgba(15, 23, 42, 0.08);
  --senka: 0 1px 3px var(--senka-boja);
  --radijus: 6px;
}

/* ---- Tamna tema ----------------------------------------------------------
   Isti spisak promenljivih, druge vrednosti. Podloge su hladno-sive (slate), a boje
   stanja zadržavaju ton ali menjaju ulogu: u svetloj temi je jaka boja TEKST na bledoj
   podlozi, u tamnoj je bleda boja tekst na tamnoj podlozi istog tona. */
:root[data-tema="tamno"] {
  color-scheme: dark;

  --akcenat: #4f46e5;
  --akcenat-hover: #6366f1;
  --akcenat-tekst: #a5b4fc;
  --akcenat-svetli: #3730a3;
  --akcenat-tamni: #dbe1ff;
  --na-akcentu: #ffffff;
  --tekst: #e5e9f0;
  --tekst-slab: #9aa7bd;
  --ivica: #3a4661;
  --pozadina: #0f172a;
  --povrsina: #1b2537;
  --sivo-bg: #162033;
  --greska: #fca5a5;
  --greska-bg: #3d2124;
  --greska-ivica: #7f3033;
  --ok: #86efac;
  --ok-bg: #16321f;
  --ok-ivica: #2f6b45;
  --upozorenje: #fcd34d;
  --upozorenje-bg: #3b2f16;
  --upozorenje-ivica: #7a5c1e;
  --zebra: #222d42;
  --hover: #2c3a55;
  --ivica-blaga: #2b3750;
  --zaglavlje-bg: #26324a;
  --pazi-bg: #5b2427;
  --greska-zebra: #4a262a;
  --greska-hover: #5a2d31;
  --upozorenje-zebra: #48391b;
  --upozorenje-hover: #574522;
  --izuzet-bg: #242a33;
  --izuzet-zebra: #2c333e;
  --izuzet-hover: #353d4a;
  --neutralno-bg: #2a3547;
  --pregledan-bg: #133026;
  --pregledan-zebra: #1b4232;
  --pregledan-hover: #245540;
  --senka-boja: rgba(0, 0, 0, 0.5);
  --senka-jaka: rgba(0, 0, 0, 0.6);
  --zastor: rgba(2, 6, 23, 0.7);
  --vred-bg: rgba(226, 232, 240, 0.14);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--tekst);
  background: var(--pozadina);
  font-size: 15px;
  line-height: 1.45;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Zaglavlje ---- */

/* Zaglavlje i navigacija se NE lepe za vrh (odluka korisnika 2026-07-30): probano je i nije
   pregledno — uzimaju vidljivi prostor listi. Skroluju sa stranom, kao i pre v1.3.0. */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 20px;
  background: var(--akcenat); color: var(--na-akcentu);
}
.app-header .brand { font-weight: 600; font-size: 16px; letter-spacing: 0.2px; }
.app-header .user-box { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.role-tag {
  background: var(--akcenat-svetli); color: var(--akcenat-tamni);
  border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600;
}

/* Izbor teme stoji u zaglavlju, uz ime i „Odjava" — menja se retko, ali se traži tamo gde
   je i sve ostalo što se tiče naloga.

   Tri ikonice u jednoj piluli (svetlo · tamno · automatski), kao na Mac-u: sve tri
   mogućnosti se vide odjednom i menjaju se jednim klikom, umesto da se spisak prvo otvara.
   Ikonice su SVG u `currentColor`, pa prate boju dugmeta i nema dve verzije slike. */
.tema-grupa {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 999px;
  border: 1px solid var(--ivica-na-akcentu);
}
.tema-dugme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; padding: 0;
  background: none; border: none; border-radius: 999px;
  color: var(--na-akcentu); opacity: 0.7; cursor: pointer;
}
.tema-dugme:hover { opacity: 1; background: var(--na-akcentu-blago); }
/* Uključena tema: puna podloga i bez prigušenja — na prvi pogled se vidi šta je izabrano. */
.tema-dugme.aktivna { opacity: 1; background: var(--na-akcentu-jako); }
.tema-dugme:focus-visible { outline: 2px solid var(--na-akcentu); outline-offset: 1px; }

/* ---- Navigacija ---- */

.app-nav {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 0 20px; background: var(--sivo-bg);
  border-bottom: 1px solid var(--ivica);
}
.app-nav button {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 10px 14px; font: inherit; color: var(--tekst-slab); cursor: pointer;
}
.app-nav button:hover { color: var(--tekst); }
.app-nav button.active { color: var(--akcenat-tekst); border-bottom-color: var(--akcenat-tekst); font-weight: 600; }

.app-main {
  flex: 1; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Futer stoji uz dno prozora dok se strana skroluje. `sticky`, ne `fixed`: fiksiran futer
   izlazi iz toka i prekriva dno sadržaja, pa bi tražio kompenzacioni `padding-bottom` koji se
   razilazi sa stvarnom visinom futera. `#app` je flex kolona sa `min-height: 100vh`, pa je
   `bottom: 0` dovoljno.

   Futer je **jedini** lepljiv element u aplikaciji: zaglavlje strane i zaglavlje tabele su
   probani u v1.3.0 i odbačeni (vidi komentare kod `.app-header` i `.table-wrap`). */
.app-footer {
  position: sticky; bottom: 0; z-index: 40;
  border-top: 1px solid var(--ivica); background: var(--sivo-bg);
  padding: 8px 20px; font-size: 12px; color: var(--tekst-slab);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.app-footer .foot-left { justify-self: start; }
.app-footer .foot-center { justify-self: center; }
/* Sat u dnu desno — tabelarne cifre da se širina ne trza svake sekunde. */
.app-footer .foot-right {
  justify-self: end; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.app-footer .version-btn {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--tekst-slab); cursor: pointer; text-decoration: underline dotted;
}
.app-footer .version-btn:hover { color: var(--akcenat-tekst); text-decoration: underline; }
.app-footer a { color: var(--tekst-slab); }

@media (max-width: 700px) {
  .app-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .app-footer .foot-left, .app-footer .foot-right { justify-self: center; }
}

/* ---- Modal „Šta je novo" ---- */

.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--zastor);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-card {
  width: 100%; max-width: 680px; max-height: 85vh;
  display: flex; flex-direction: column;
  background: var(--povrsina); border-radius: 10px; box-shadow: 0 10px 40px var(--senka-jaka);
}
.modal-head { padding: 18px 24px 6px; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-head .modal-sub { margin: 2px 0 0; font-size: 13px; color: var(--tekst-slab); }
.modal-body { padding: 8px 24px; overflow-y: auto; }
.modal-foot {
  padding: 12px 24px 18px; display: flex; justify-content: flex-end;
  border-top: 1px solid var(--ivica);
}

.cl-ver { color: var(--akcenat-tekst); font-size: 15px; margin: 18px 0 6px; }
.modal-body > .cl-ver:first-child { margin-top: 4px; }
.cl-list { margin: 0 0 10px; padding-left: 20px; }
.cl-list li { margin-bottom: 8px; }
.cl-note { color: var(--tekst-slab); font-style: italic; margin: 10px 0 0; font-size: 13px; }

/* ---- Traka: dostupna je nova verzija ---- */

.version-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding: 9px 16px; font-size: 14px;
  background: var(--upozorenje-bg); color: var(--tekst);
  border-bottom: 1px solid var(--upozorenje-ivica); box-shadow: 0 2px 8px var(--senka-boja);
}
.version-banner .vb-text { font-weight: 600; }
.version-banner .vb-actions { display: flex; gap: 8px; }
button.btn.sm, a.btn.sm { padding: 4px 12px; font-size: 13px; }

/* ---- Prijava ---- */

.login-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px;
}
/* Slika i kartica u koloni; slika je ograničena na širinu kartice — izričit zahtev
   korisnika („ne šira nego što je login deo"). */
.login-blok {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hero-login { max-width: 100%; }
.login-card {
  width: 100%; max-width: 380px; border: 1px solid var(--ivica); background: var(--povrsina);
  border-radius: var(--radijus); box-shadow: var(--senka); padding: 24px;
}
.login-card h1 { margin: 0 0 4px; font-size: 20px; }
.login-card .sub { margin: 0 0 20px; color: var(--tekst-slab); font-size: 13px; }

/* ---- Forme ---- */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.field .hint { font-size: 12px; color: var(--tekst-slab); margin-top: 3px; }

input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="file"], select, textarea {
  width: 100%; padding: 7px 9px; font: inherit; color: var(--tekst);
  border: 1px solid var(--ivica); border-radius: var(--radijus); background: var(--povrsina);
}
/* Datum i vreme se unose kroz biralo pregledača — nema ručnog kucanja, nema pogrešnog formata. */
input[type="date"], input[type="time"] { min-height: 36px; }
/* Fokus mora da se vidi i na tamnoj podlozi, pa je prsten akcenat-kao-tekst
   (`--akcenat-svetli` je tamo tamna indigo mrlja, koja bi se stopila sa stranom). */
input:focus, select:focus { outline: 2px solid var(--akcenat-tekst); border-color: var(--akcenat); }
input[type="checkbox"] { width: auto; margin-right: 6px; }
/* Polje čiji unos ne odgovara očekivanom obliku. Namerno `:user-invalid`, ne `:invalid`:
   ovo drugo bi obojilo svako prazno obavezno polje već pri otvaranju forme, pre nego što
   je korisnik bilo šta uradio. Pregledač koji `:user-invalid` ne zna samo ne oboji ivicu —
   sama provera i dalje radi, kao i ona na serveru. */
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--greska); }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1 1 180px; margin-bottom: 0; }

/* Polja u istom redu moraju biti u liniji.
   `flex` iznad poravnava DNA polja, pa polje sa hintom gurne svoj input naviše u odnosu na
   susedno polje bez hinta — to se u obrascima videlo kao „stepenice". Rešenje je mreža sa tri
   pojasa (naziv · kontrola · hint): svako polje je `subgrid` preko sva tri, pa su nazivi u
   liniji sa nazivima, inputi sa inputima i hintovi sa hintovima, bez obzira na to koliko je
   koji tekst dugačak.
   `@supports` čuva stari izgled na pregledaču bez `subgrid`-a — tamo je flex i dalje ispravan
   raspored, samo mu dna nisu poravnata. */
@supports (grid-template-rows: subgrid) {
  .row:has(> .field) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
  }
  .row:has(> .field) > .field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }
  /* `display: grid` iznad je jači od podrazumevanog `[hidden] { display: none }`,
     pa se sakriveno polje mora ponovo sakriti. */
  .row:has(> .field) > .field[hidden] { display: none; }
  .row:has(> .field) > .field > label { align-self: end; margin-bottom: 0; }
  .row:has(> .field) > .field > .hint { margin-top: 3px; align-self: start; }
  /* Dugme uz polja (npr. „Pregledaj", „Ispravi") pripada pojasu kontrole, ne pojasu naziva. */
  .row:has(> .field) > .field > .btn:first-child,
  .row:has(> .field) > :not(.field) { grid-row: 2; align-self: end; }
  /* Dugme zadržava svoju širinu umesto da se razvuče preko cele kolone mreže. */
  .row:has(> .field) > .field > .btn { justify-self: start; }
  /* Polje koje je SAMO prekidač (nema svoj input): kvadratić stoji u visini susednih inputa.
     Ako polje ima i kontrolu ispod prekidača, prekidač ostaje u pojasu naziva — inače bi
     dvoje završilo u istom pojasu i preklopilo se. */
  .row:has(> .field) > .field:has(> label > input[type="checkbox"]):not(:has(> input, > select, > textarea, > .field)) > label { grid-row: 2; }
  .row:has(> .field) > .field:has(> label > input[type="checkbox"]):not(:has(> input, > select, > textarea, > .field)) > .hint { grid-row: 3; }
  .row:has(> .field) > .field > .check-red { align-self: end; padding: 0 0 4px; }
}

/* Preuzimanja moraju biti <a href> (browser sam pamti kolačić i naziv datoteke),
   pa isti izgled važi i za dugme i za link. */
button.btn, a.btn {
  padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--radijus); border: 1px solid var(--akcenat);
  background: var(--akcenat); color: var(--na-akcentu);
}
a.btn { display: inline-block; text-decoration: none; }
button.btn:hover, a.btn:hover { background: var(--akcenat-hover); border-color: var(--akcenat-hover); }
button.btn:disabled { opacity: 0.6; cursor: default; }
button.btn.secondary, a.btn.secondary { background: var(--povrsina); color: var(--akcenat-tekst); }
button.btn.secondary:hover, a.btn.secondary:hover { background: var(--akcenat-svetli); color: var(--akcenat-tamni); }
button.btn.danger { background: var(--povrsina); color: var(--greska); border-color: var(--greska); }
button.btn.danger:hover { background: var(--greska-bg); }
button.btn.wide { width: 100%; }

button.link-btn, a.link-btn {
  background: none; border: none; padding: 2px 6px; font: inherit;
  color: var(--akcenat-tekst); cursor: pointer; text-decoration: underline;
}
button.link-btn.danger { color: var(--greska); }

/* ---- Poruke ---- */

.msg { padding: 9px 12px; border-radius: var(--radijus); margin-bottom: 14px; font-size: 14px; }
.msg.error { background: var(--greska-bg); color: var(--greska); border: 1px solid var(--greska-ivica); }
.msg.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-ivica); }
.msg.warn { background: var(--upozorenje-bg); color: var(--upozorenje); border: 1px solid var(--upozorenje-ivica); }

/* ---- Kartice i tabele ---- */

/* Kartica ima svoju podlogu: u svetloj temi je bela na beloj (bez vidljive razlike, kao
   i pre), u tamnoj je za nijansu svetlija od strane, pa se sadržaj odvaja od pozadine. */
.card {
  border: 1px solid var(--ivica); border-radius: var(--radijus);
  background: var(--povrsina);
  padding: 18px; margin-bottom: 20px; box-shadow: var(--senka);
}
.card > h2 { margin: 0 0 4px; font-size: 17px; }
.card > .card-sub { margin: 0 0 16px; color: var(--tekst-slab); font-size: 13px; }

/* Tabele skroluju samo horizontalno, sa stranom po vertikali — jedan skrol, ne dva.

   ⚠️ Lepljivo zaglavlje tabele je probano u v1.3.0 i **odbačeno** (odluka korisnika 2026-07-30):
   `overflow-x: auto` pravi scroll container, pa se `position: sticky` lepi za njega a ne za
   prozor, i CSS ne dozvoljava „skrol samo po X uz sticky po Y" (`overflow-x: auto` prisiljava i
   `overflow-y` iz `visible` u `auto`). Jedini način je bio dati tabeli **sopstveni** vertikalni
   skrol — a tabela u svom prozorčiću je gora od zaglavlja koje odskroluje. Ako se tome vrati,
   treba drugo rešenje (npr. dupliran red zaglavlja koji se lepi za prozor). */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--ivica-blaga); vertical-align: top; }
th { background: var(--sivo-bg); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--tekst-slab); }
/* Zaglavlje mora da ostane jače od pruge — inače se sa `--sivo-bg` stopi sa njom.
   Jača linija ispod odvaja imena kolona od podataka. */
thead th { background: var(--zaglavlje-bg); border-bottom: 2px solid var(--ivica); }
td.actions { white-space: nowrap; }
td.mono, .mono { font-family: Consolas, "Courier New", monospace; font-size: 13px; }
/* Tabelarne cifre: bez njih se vremena u koloni ne poklapaju po ciframa i oko
   mora da traži dvotačku u svakom redu. */
td.mono, .mono { font-variant-numeric: tabular-nums; }

/* ---- Nijansiranje listi ---------------------------------------------------

   Zebra ide na `tr` (pozadina reda), a stanje reda na `td` — tako obojen red
   (greška/upozorenje/izuzet) uvek prekrije prugu, bez borbe specifičnosti.

   Prugaju se samo **liste** (tabele sa zaglavljem). Dvokolonske tabele
   „ključ → vrednost" (sažeci, detalji uvoza) ostaju čiste — tamo pruga ništa ne
   pomaže jer se ne čita po redovima nego se traži jedan podatak.

   Provera je izuzetak: tamo je jedan zapis više `tr`-ova u jednom `tbody`, pa se
   nijansira zapis (`tbody`), ne red — vidi „Provera: zapis" niže. */

/* Redosled je pravilo, ne slučajnost: pruga → stanje → pruga stanja → hover.
   Hover mora biti poslednji da bi nadjačao i prugu i stanje. */

thead ~ tbody:not(.zapis):not(.sif-telo) tr:nth-child(even) { background: var(--zebra); }

/* Stanje reda. Ide na `td` (pruga je na `tr`), pa uvek prekrije neutralnu prugu.
   Izuzet red je siv, ne crven: to nije problem nego odluka operatera. */
tr.red-greska > td { background: var(--greska-bg); }
tr.red-upozorenje > td { background: var(--upozorenje-bg); }
tr.red-izuzet > td { background: var(--izuzet-bg); color: var(--tekst-slab); }

/* Pruga unutar stanja — bez ovoga se niz od 30 žutih redova čita kao jedna mrlja.
   Kontekst je u `:where()` da ne diže specifičnost: tako hover ispod ovoga pobeđuje
   samim redosledom, bez gomilanja `:hover` varijanti za svaku prugu. */
:where(thead ~ tbody:not(.zapis)) tr.red-greska:nth-child(even) > td { background: var(--greska-zebra); }
:where(thead ~ tbody:not(.zapis)) tr.red-upozorenje:nth-child(even) > td { background: var(--upozorenje-zebra); }
:where(thead ~ tbody:not(.zapis)) tr.red-izuzet:nth-child(even) > td { background: var(--izuzet-zebra); }

tbody tr:hover > td { background: var(--hover); }
tr.red-greska:hover > td { background: var(--greska-hover); }
tr.red-upozorenje:hover > td { background: var(--upozorenje-hover); }
tr.red-izuzet:hover > td { background: var(--izuzet-hover); }

.muted { color: var(--tekst-slab); }
.pill { border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.pill.off { background: var(--neutralno-bg); color: var(--tekst-slab); }
.pill.lock { background: var(--greska-bg); color: var(--greska); }

h3.section, h4.section { font-size: 14px; margin: 20px 0 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--tekst-slab); }

/* Pilula uz stavku u spisku (klasa sigurnosne kopije, i slično). */
.oznaka {
  display: inline-block; background: var(--akcenat-svetli); color: var(--akcenat-tamni);
  border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; margin-right: 4px;
}

.pill + .pill { margin-left: 4px; }

input[type="file"] {
  width: 100%; padding: 6px 8px; font: inherit;
  border: 1px solid var(--ivica); border-radius: var(--radijus); background: var(--povrsina);
}

table th[scope], tbody th {
  width: 1%; white-space: nowrap; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.3px; color: var(--tekst-slab);
}

.placeholder {
  border: 1px dashed var(--ivica); border-radius: var(--radijus);
  padding: 28px; text-align: center; color: var(--tekst-slab);
}

/* ---- Početna: naslovna slika ---------------------------------------------
   `hero.svg` je vektorska, pa se skalira bez gubitka. `width`/`height` na <img> u markup-u
   drže odnos stranica dok se ne učita, da sadržaj ispod ne poskoči. */

.hero { display: block; width: 100%; height: auto; max-width: 820px; margin: 0 auto; }

.card.pocetna { text-align: center; padding: 22px 18px 26px; }
.card.pocetna > .hero { margin-bottom: 6px; }
.pocetna-naslov { margin: 0 0 2px; font-size: 21px; }
.pocetna-uloga { margin: 0 0 14px; color: var(--tekst-slab); font-size: 13px; }
.pocetna-tekst { margin: 0 auto 20px; max-width: 640px; color: var(--tekst-slab); }
.pocetna-dugmad { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---- Uputstvo (prikaz van navigacije) ---- */

.uput-skok { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 14px; }
.uput-skok a { color: var(--akcenat-tekst); }

.korak { margin: 22px 0 26px; }
.korak-glava { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* Broj koraka je krug uz naslov — spisak od sedam koraka se tako prelistava pogledom. */
.korak-broj {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--akcenat); color: var(--na-akcentu); font-size: 14px; font-weight: 700;
}
.korak-naslov { margin: 0; font-size: 16px; }
.korak-lista { margin: 0 0 12px; padding-left: 38px; }
.korak-lista li { margin-bottom: 6px; }

/* Snimak ekrana: klik otvara original u novoj kartici (neki su širi od 1200 px). */
.snimak {
  display: block; margin-left: 38px; border: 1px solid var(--ivica);
  border-radius: var(--radijus); overflow: hidden; box-shadow: var(--senka);
  max-width: 900px;
}
.snimak img { display: block; width: 100%; height: auto; }
.snimak:hover { border-color: var(--akcenat); }

.uput-nazad { display: flex; justify-content: center; margin-bottom: 24px; }

@media (max-width: 700px) {
  .korak-lista { padding-left: 20px; }
  .snimak { margin-left: 0; }
}

/* ---- Pod-navigacija (šifarnici: smene / modeli / grupe / praznici) ---- */

.subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--ivica); margin-bottom: 16px;
}
.subnav button {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 7px 12px; font: inherit; font-size: 14px;
  color: var(--tekst-slab); cursor: pointer;
}
.subnav button:hover { color: var(--tekst); }
.subnav button.active { color: var(--akcenat-tekst); border-bottom-color: var(--akcenat-tekst); font-weight: 600; }
.subnav .brojac { font-size: 12px; color: var(--tekst-slab); font-weight: 400; }

/* Kutija urednika — vizuelno odvojena od tabele iznad. */
.urednik {
  border: 1px solid var(--akcenat-svetli); border-radius: var(--radijus);
  background: var(--sivo-bg); padding: 16px; margin-top: 16px;
}
.urednik > h3.section { margin-top: 0; }

.pill.visoka { background: var(--ok-bg); color: var(--ok); }
.pill.srednja { background: var(--upozorenje-bg); color: var(--upozorenje); }
.pill.niska { background: var(--greska-bg); color: var(--greska); }

.check-red { display: flex; align-items: center; gap: 6px; font-size: 14px; padding: 6px 0; }
.check-red label { font-weight: 400; margin: 0; }

/* Tabela grupa ima mnogo uskih kolona — naziv i napomena inače ostanu po dve reči u redu.
   Tabela pri tesnom prozoru pređe u horizontalni skrol (.table-wrap). */
table.sifarnik.siroka { min-width: 900px; }
table.sifarnik td.naziv { min-width: 230px; }
table.sifarnik td.naziv .hint { white-space: normal; }
table.sifarnik td.napomena { min-width: 180px; font-size: 13px; }

/* ---- Šifarnici: izmena se razvija u samom redu ----
   Isto kao u Proveri: dok se pravilo menja, red na koji se odnosi ostaje pred očima.
   Pruga se zato broji klasom (`.red-par`), a ne `nth-child`-om — red sa urednikom je isto
   `<tr>`, pa bi ga brojanje uračunalo i obrnulo prugu svemu ispod otvorenog reda.
   Boja stoji na `tr` (ne na `td`), da je hover na ćelijama i dalje prekrije. */
tbody.sif-telo tr.red-par { background: var(--zebra); }
/* Red koji se menja: akcentna traka levo, kao kod otvorenog zapisa u Proveri. */
table.sifarnik tr.izmena > td { background: var(--akcenat-svetli); }
table.sifarnik tr.izmena > td:first-child { box-shadow: inset 3px 0 0 var(--akcenat); }
/* Sam urednik nije red tabele nego ploča ispod reda — bez pruge, bez hover-a, bez ivice. */
table.sifarnik tr.urednik-red > td { padding: 0 10px 12px 10px; background: none; border-bottom: none; }
table.sifarnik tr.urednik-red .urednik { margin-top: 0; background: var(--povrsina); }

/* ---- Provera (F5) ---- */

.pill.upoz { background: var(--upozorenje-bg); color: var(--upozorenje); }

/* Filter po oznakama u `Provera`: pilula sa prekidačem. Isključena bledi i precrtava se,
   da se na prvi pogled vidi da spisak nije potpun. */
.oznake-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 2px 0; }
.pill-check {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
  border-radius: 999px; padding: 2px 10px 2px 6px; font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.pill-check.lock { background: var(--greska-bg); color: var(--greska); }
.pill-check.upoz { background: var(--upozorenje-bg); color: var(--upozorenje); }
.pill-check.off { background: var(--neutralno-bg); color: var(--tekst-slab); }
.pill-check.off .kod { text-decoration: line-through; }
.pill-check input[type="checkbox"] { margin: 0; }
.pill-check .broj { font-weight: 400; opacity: 0.75; }
.oznake-filter .link-btn { font-size: 12px; }
/* Ulazni podaci koji se posebno plaćaju — noćni rad i prekovremeno. Kad ih ima, moraju da
   zapnu za oko; nula ostaje običan tekst, jer bi naznaka na svakom redu prestala da išta
   znači. Boja stoji na samoj vrednosti, ne na ćeliji: red već ima svoju boju stanja i svoju
   prugu, pa bi bojenje ćelije ulazilo u tu igru i nestajalo pod hover-om. */
.pazi {
  background: var(--pazi-bg); color: var(--greska); font-weight: 700;
  border-radius: 4px; padding: 0 5px;
}

/* Slovo kolone ispred vrednosti (`U: 21:39`) — isti tihi natpis kao `1. sm.` u liniji
   ispod reda, i namerno nije podebljan: on je podsetnik, a ne podatak. Zaglavlje pri
   skrolovanju odlazi, pa bez njega `8:00` posle desetak redova ne kaže šta je. */
.kol-oznaka { font-size: 11px; color: var(--tekst-slab); margin-right: 3px; }

/* Dozvoljena oznaka ostaje vidljiva, ali prestaje da viče — odluka je već doneta. */
.pill.dozvoljena { opacity: 0.55; text-decoration: line-through; }

/* Izuzet red je siv, ne crven: to nije problem nego odluka operatera. */
tr.red-izuzet > td { background: var(--izuzet-bg); color: var(--tekst-slab); }
tr.red-izuzet:hover > td { background: var(--izuzet-hover); }

/* ---- „Pregledao sam": dugme na desnom kraju reda ----
   Stoji tamo gde je do v1.8.1 bilo „Otvori" — taj klik je bio suvišan, jer zapis otvara
   klik bilo gde po njemu. Puno dugme sa natpisom, ne kutijica: meta je ~120×26 px umesto
   13×13, pa se spisak od nekoliko stotina redova prolazi nabadanjem bez promašaja.
   Širina je ista u oba stanja da se kolona ne pomera pod rukom. */
.cek-btn {
  min-width: 118px; padding: 4px 10px; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--ivica); border-radius: var(--radijus);
  background: var(--povrsina); color: var(--tekst-slab);
  font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.cek-btn:hover { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
/* Tekst na punoj zelenoj podlozi je boja STRANE, ne bela: u tamnoj temi je `--ok` svetlo
   zelena, pa bi belo na njoj bilo nečitljivo. U svetloj temi `--pozadina` je belo — isto
   kao pre. */
.cek-btn.cek { border-color: var(--ok); background: var(--ok); color: var(--pozadina); }
.cek-btn.cek:hover { background: var(--ok-bg); color: var(--ok); }
.cek-btn:focus-visible { outline: 2px solid var(--akcenat-tekst); outline-offset: 1px; }
/* Uloga `pregled` vidi ishod, ali ga ne menja. */
.cek-znak { color: var(--tekst-slab); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cek-znak.cek { color: var(--ok); }
/* Ceo red je prekidač (otvara urednik), pa mora imati i vidljiv fokus za tastaturu. */
table.provera tbody.zapis > tr:focus-visible { outline: 2px solid var(--akcenat-tekst); outline-offset: -2px; }
/* Masovno označavanje: dugmad u red, uz filtere kojima se izbor i suzio. */
.masovno { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 2px 0; }
.btn.sitno-dugme { padding: 4px 10px; font-size: 12px; }

/* 47-znakovni red se čita po pozicijama — razmak između znakova pomaže brojanju. */
.red47 {
  border: 1px solid var(--ivica); border-radius: var(--radijus);
  background: var(--povrsina); padding: 8px 10px;
  letter-spacing: 1.5px; word-break: break-all;
}

/* ---- Provera: zapis = red iz Rogera + uvučena linija motora ---- */

/* Jedan zapis je jedan <tbody>: gornji red (uvezeno), uvučena linija (izračunato) i
   po potrebi red sa urednikom. Boja i ivica idu na ceo zapis, ne na pojedinačan red —
   inače bi linija motora vizuelno otpala od reda na koji se odnosi. */
table.provera tbody.zapis > tr > td { border-bottom: none; background: none; }
table.provera tbody.zapis { border-bottom: 1px solid var(--ivica); }

/* Pruga se broji po ZAPISU, ne po redu — inače bi uvučena linija motora dobila drugu
   nijansu od reda na koji se odnosi i razdvojila ono što treba da bude jedno.
   Isti redosled kao u listama: pruga → stanje → pruga stanja → hover. */
table.provera tbody.zapis:nth-of-type(even) { background: var(--zebra); }

table.provera tbody.zapis.red-greska > tr > td { background: var(--greska-bg); }
table.provera tbody.zapis.red-upozorenje > tr > td { background: var(--upozorenje-bg); }
table.provera tbody.zapis.red-izuzet > tr > td { background: var(--izuzet-bg); color: var(--tekst-slab); }

/* Pruga stanja ima istu specifičnost kao hover ispod nje — zato ide pre njega. */
table.provera tbody.zapis.red-greska:nth-of-type(even) > tr > td { background: var(--greska-zebra); }
table.provera tbody.zapis.red-upozorenje:nth-of-type(even) > tr > td { background: var(--upozorenje-zebra); }
table.provera tbody.zapis.red-izuzet:nth-of-type(even) > tr > td { background: var(--izuzet-zebra); }

/* Pregledan zapis ide POSLE stanja i pobeđuje ga: pitanje „dokle sam stigao" je ono koje
   se postavlja pri drugom prolasku kroz spisak, a stanje se i dalje čita iz pilula oznaka
   i iz trake sa strane (niže). Pruga se i ovde broji po zapisu, ne po redu. */
table.provera tbody.zapis.red-pregledan > tr > td { background: var(--pregledan-bg); color: var(--tekst); }
table.provera tbody.zapis.red-pregledan:nth-of-type(even) > tr > td { background: var(--pregledan-zebra); }

table.provera tbody.zapis:hover > tr > td { background: var(--hover); }
table.provera tbody.zapis.red-greska:hover > tr > td { background: var(--greska-hover); }
table.provera tbody.zapis.red-upozorenje:hover > tr > td { background: var(--upozorenje-hover); }
table.provera tbody.zapis.red-izuzet:hover > tr > td { background: var(--izuzet-hover); }
table.provera tbody.zapis.red-pregledan:hover > tr > td { background: var(--pregledan-hover); }

/* Pregledan red koji i dalje blokira izvoz: zelena podloga, ali traka sa strane ostaje
   crvena. Bez nje bi „pregledao sam" izgledalo kao „rešeno", a nije isto. */
table.provera tbody.zapis.red-pregledan.red-greska { box-shadow: inset 3px 0 0 var(--greska); }
table.provera tbody.zapis.red-pregledan.red-upozorenje { box-shadow: inset 3px 0 0 var(--upozorenje); }
/* Ceo zapis je klikabilan (otvara i zatvara urednik), pa to mora i da se vidi. Red sa
   urednikom nije — klik unutar njega ne sme da ga zatvori. */
table.provera tbody.zapis > tr:not(.urednik-red) { cursor: pointer; }

/* Otvoren zapis: akcentna traka levo i jača ivica ispod — dok je urednik razvijen,
   mora se videti gde zapis počinje i gde se završava. */
table.provera tbody.zapis.otvoren { box-shadow: inset 3px 0 0 var(--akcenat-tekst); }
table.provera tbody.zapis.otvoren { border-bottom-color: var(--akcenat-svetli); }

/* Uvučena linija motora „visi" ispod svog reda. Vezu je ranije pokazivala tanka linija uz
   levu ivicu; otkad je sadržaj poravnat udesno, ona bi ostala sama na drugom kraju ćelije,
   pa je uklonjena — vezu nosi strelica `↳`, koja putuje sa sadržajem. */
table.provera tr.podred > td { padding: 0 10px 7px 26px; }

/* Cela linija je poravnata udesno — i objašnjenje (grupa, smena, od kada teče vreme) i
   kolone koje idu u MPP. Tako stoji tik ispod brojčanih kolona uvezenog reda, pa se ulaz
   i ishod porede pogledom nadole, bez skretanja na levu polovinu ekrana. */
.motor-linija {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-size: 13px;
  justify-content: flex-end;
}
.motor-linija .ml-glava,
.motor-linija .ml-kolone,
.motor-linija .ml-desno {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
}
/* Izlazne kolone idu uz desnu ivicu, ispod brojčanih kolona reda iznad — pogled sa
   uvezenih vrednosti pada pravo na izračunate. Stub drži kolone i liniju ispod njih
   (noćno, 47-znakovni red) zajedno, pa ih razmak gura kao celinu. */
.motor-linija .ml-stub {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.motor-linija .ml-kolone,
.motor-linija .ml-desno { justify-content: flex-end; }
.motor-linija .oznaka-strelice { color: var(--ivica); font-weight: 700; }
.motor-linija .sitno { font-size: 12px; }
.motor-linija .kol { white-space: nowrap; }
.motor-linija .kol-ime { font-size: 11px; color: var(--tekst-slab); margin-right: 3px; }
.motor-linija .kol.prazna .kol-vrednost { color: var(--ivica); }
/* Vrednost koja postoji dobija težinu i podlogu, prazna ostaje bleda crtica. U liniji sa
   desetak stavki se tako čita samo ono što je popunjeno — ostalo je natpis, ne podatak.
   Podloga je providna, da radi i na beloj i na žutoj i na zelenoj pozadini zapisa. */
.motor-linija .vred {
  font-weight: 700; color: var(--tekst);
  background: var(--vred-bg);
  border-radius: 4px; padding: 0 4px;
}
/* Kolona koju je ručni izlaz promenio mora da se vidi bez otvaranja urednika. */
.motor-linija .kol.izmenjena .kol-vrednost {
  color: var(--akcenat-tekst); font-weight: 700; text-decoration: underline dotted;
}
.motor-linija .red47-inline { letter-spacing: 0.5px; }
.nesklad { color: var(--upozorenje); font-weight: 600; }

.pill.mala { font-size: 11px; padding: 1px 6px; }
.pill.ok-pill { background: var(--ok-bg); color: var(--ok); }
.pill.rucno { background: var(--akcenat-svetli); color: var(--akcenat-tamni); }

/* Urednik se razvija na mestu reda — ne na dnu strane, da red na koji se odnosi
   ostane pred očima. */
table.provera tr.urednik-red > td { padding: 0 10px 12px 26px; }
/* Urednik je bela ploča nad listom — na prugastoj podlozi siva se ne bi razlikovala. */
table.provera tr.urednik-red .urednik { margin-top: 0; background: var(--povrsina); }

/* Sedam izlaznih kolona: uska polja u mrežu, da cela slika 47-znakovnog reda stane
   u jedan pogled i da unos bude kratak (HH:MM). */
.izlaz-mreza {
  display: grid; gap: 10px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.izlaz-mreza .izlaz-polje { margin-bottom: 0; }
.izlaz-mreza .izlaz-polje input { max-width: 110px; text-align: center; }
.izlaz-mreza .izlaz-polje .hint { font-size: 11px; }