/* --- boje ---
   Sve boje su varijable, i to iz dva razloga. Tema (svijetla ili tamna) mijenja
   samo ovaj popis, nijedno pravilo nize. A tvrtka smije promijeniti --accent u
   svoju boju, pa sve sto je izvedeno iz akcenta mora biti izvedeno racunom
   (color-mix), a ne prepisanom vrijednoscu: inace se traka napretka i obrub
   oznake ne preboje s ostatkom.

   **Svijetla je zadana** i stoji na golom :root, pa vrijedi i prije nego se
   tema.js izvrti, i onome tko nikad nije nista birao. Tamna je izbor: pise se
   kao razlika i vrijedi tek kad je netko odabere ili kad je odabrano "prema
   uredjaju", a uredjaj je u tamnoj temi.

   Zadano svijetlo je odluka, ne slucaj: sustav se najcesce gleda danju, u uredu
   i na skladistu, gdje tamni zaslon na jakom svjetlu gubi kontrast. */
:root {
  --bg: #eaf0f3;
  --panel: #ffffff;
  --panel-soft: #f1f6f8;
  --line: rgba(10, 45, 60, 0.14);
  --text: #0f2f3d;
  --muted: #5a7583;
  /* Akcent je tamniji nego na tamnoj temi: isti tirkiz koji je na tamnoj podlozi
     citak, na bijeloj je blijed i tekst na njemu se ne moze procitati. */
  --accent: #10867a;
  --warn: #c25a20;
  --alarm: #c33a41;

  /* Tekst na akcentnoj podlozi. Na svijetloj temi je akcent taman pa tekst mora
     biti svijetao, na tamnoj je obrnuto. ljuska.js ovo prepisuje kad tvrtka ima
     svoju boju, jer je tada kontrast stvar te boje, a ne teme. */
  --na-akcentu: #ffffff;

  /* Panel koji pluta nad kartom. Providan je da se vidi da je karta ispod, pa
     ne moze biti ista vrijednost kao --panel. */
  --plutajuce: rgba(255, 255, 255, .93);
  --plutajuce-jako: rgba(255, 255, 255, .97);

  --sjena-blaga: rgba(10, 45, 60, .12);
  --sjena: rgba(10, 45, 60, .18);
  --sjena-jaka: rgba(10, 45, 60, .24);

  /* Oznaka vozila na karti. Obrub je bijel na obje teme, jer stoji na satelitu,
     asfaltu i moru jednako. */
  --obrub-oznake: #fff;
  --oznaka-pozadina: rgba(255, 255, 255, .92);
  --oznaka-tekst: #0f2f3d;
  --oznaka-obrub: rgba(10, 45, 60, .16);

  /* Prijelaz koji putuje po kosturu dok se ceka sadrzaj. */
  --sjaj: rgba(10, 45, 60, .07);
}

/* Tamna tema, kad je netko izricito odabere. */
:root[data-tema="tamna"] {
  --bg: #08202b;
  --panel: #0d2c3a;
  --panel-soft: #113748;
  --line: rgba(255, 255, 255, 0.10);
  --text: #e7eff1;
  --muted: #8fa8b3;
  --accent: #33b3a6;
  --warn: #ef7a45;
  --alarm: #e2565a;

  --na-akcentu: #06232b;

  --plutajuce: rgba(13, 44, 58, .93);
  --plutajuce-jako: rgba(13, 44, 58, .95);

  --sjena-blaga: rgba(0, 0, 0, .35);
  --sjena: rgba(0, 0, 0, .45);
  --sjena-jaka: rgba(0, 0, 0, .5);

  --oznaka-pozadina: rgba(8, 32, 43, .88);
  --oznaka-tekst: #fff;
  --oznaka-obrub: rgba(255, 255, 255, .18);

  --sjaj: rgba(255, 255, 255, .09);
}

/* "Prema uredjaju" je treci izbor, i vrijedi samo ako ga netko odabere. Tada
   tamnu donosi postavka operativnog sustava. Ista razlika, drugi uvjet. */
@media (prefers-color-scheme: dark) {
  :root[data-tema="sustav"] {
    --bg: #08202b;
    --panel: #0d2c3a;
    --panel-soft: #113748;
    --line: rgba(255, 255, 255, 0.10);
    --text: #e7eff1;
    --muted: #8fa8b3;
    --accent: #33b3a6;
    --warn: #ef7a45;
    --alarm: #e2565a;

    --na-akcentu: #06232b;

    --plutajuce: rgba(13, 44, 58, .93);
    --plutajuce-jako: rgba(13, 44, 58, .95);

    --sjena-blaga: rgba(0, 0, 0, .35);
    --sjena: rgba(0, 0, 0, .45);
    --sjena-jaka: rgba(0, 0, 0, .5);

    --oznaka-pozadina: rgba(8, 32, 43, .88);
    --oznaka-tekst: #fff;
    --oznaka-obrub: rgba(255, 255, 255, .18);

    --sjaj: rgba(255, 255, 255, .09);
  }
}

* { box-sizing: border-box; }

/* --- vidljivo cekanje (cekanje.js) ---
   Dok se nesto dohvaca, mora se vidjeti da sustav radi. Traka na vrhu vrijedi za
   cijelu aplikaciju, kosturi stoje na mjestu sadrzaja koji tek stize. */

.traka-napretka {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 75%, transparent);
  border-radius: 0 3px 3px 0;
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: width .25s ease-out, opacity .25s ease;
}
.traka-napretka.radi { opacity: 1; }

/* Kostur: ploha koja pulsira svjetlom slijeva nadesno. Oblik prati sadrzaj koji
   dolazi, pa zaslon ne poskoci kad podaci stignu. */
@keyframes kostur-sjaj {
  0%   { background-position: -260px 0; }
  100% { background-position: 260px 0; }
}
.kostur-plocica {
  display: block; height: 11px; border-radius: 5px;
  background: var(--panel-soft);
  background-image: linear-gradient(90deg,
    transparent 0%, var(--sjaj) 45%, transparent 90%);
  background-size: 260px 100%; background-repeat: no-repeat;
  animation: kostur-sjaj 1.15s linear infinite;
}
.kostur-plocica.uska { width: 45%; height: 9px; margin-top: 6px; }
.kostur-plocica.siroka { width: 78%; }
.kostur-plocica.visoka { height: 19px; width: 62%; }
.kostur-plocica.krug { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }

.kostur-redak {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-top: 1px solid var(--line);
}
.kostur-stupac { flex: 1; min-width: 0; }
.kostur-crte { padding: 12px 16px; display: grid; gap: 9px; }
/* Kocka sazetka. Stoji u mrezi koju je vec postavio panel, pa ovdje treba samo
   ono cega bez sadrzaja nema: visina reda. */
.kostur-kocka { min-height: 56px; }

/* Kolutic u gumbu koji radi. */
@keyframes vrti { to { transform: rotate(360deg); } }
.vrtuljak {
  display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: vrti .7s linear infinite;
}
.zauzet-gumb { opacity: .75; cursor: progress; }

/* Naslov panela dok se ucitava: kolutic uz tekst, da se vidi da traje. */
.radi-oznaka { display: inline-flex; align-items: center; gap: 6px; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* --- zajednička navigacija (ljuska.js) ---
   Jedno pravilo drži cijelu aplikaciju na okupu: navigacija je uvijek na istom
   mjestu, s istim imenima, i vidi se na kojem si zaslonu. Poveznice se moraju
   razlikovati od brojki, inače oko ne zna što je klikabilno. */

.nav {
  display: flex; align-items: stretch; gap: 4px;
  /* Visina je zadana ovdje, a ne prepustena sadrzaju: traka je prvo sto oko
     nadje na svakom zaslonu, a logo tvrtke u njoj mora imati mjesta. */
  min-height: 58px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: relative; z-index: 6; flex-shrink: 0;
  padding-right: 16px;
}

.nav-znak {
  display: flex; align-items: center; padding: 0 20px;
  font-size: 17px; font-weight: 700; letter-spacing: .2px;
  text-decoration: none; color: var(--text);
  border-right: 1px solid var(--line);
}
.nav-znak span { color: var(--accent); }

.nav-glavni { display: flex; align-items: stretch; }
.nav-glavni a {
  display: flex; align-items: center; padding: 0 18px;
  font-size: 15px; text-decoration: none; color: var(--muted);
  border-bottom: 2px solid transparent;
}
.nav-glavni a:hover { color: var(--text); background: var(--panel-soft); }
.nav-glavni a.aktivan {
  color: var(--text); font-weight: 600; border-bottom-color: var(--accent);
}
.nav-glavni a.nedostupno { opacity: .35; pointer-events: none; }

.nav-desno { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-svoje { display: flex; align-items: center; gap: 12px; }
.nav-tko { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.nav-tko b { color: var(--text); font-weight: 600; }
.tocka {
  width: 3px; height: 3px; border-radius: 50%; background: var(--muted);
  display: inline-block; opacity: .6;
}

button.tiho {
  background: none; border-color: transparent; color: var(--muted);
  font-size: 12px; padding: 5px 10px;
}
button.tiho:hover { color: var(--text); border-color: var(--line); }

/* Prekidač teme. Stoji uz odjavu jer je osobna postavka, a ne dio zaslona.
   Znak je jedan, širina je stalna, pa se traka ne pomiče pri promjeni. */
.nav-tema {
  width: 30px; text-align: center; font-size: 14px; line-height: 1;
  flex-shrink: 0;
}

/* Logo tvrtke na mjestu naše riječi. Visina je zadana, širina koliko treba, pa
   i široki i uski logo stanu bez razvlačenja.
   Logo je znak kupca i mora se vidjeti, zato je viši od teksta koji zamjenjuje
   i ima zraka oko sebe. Gornja granica širine postoji da vrlo širok logo ne
   potisne imena zaslona van trake. */
.nav-znak.ima-logo { padding: 0 18px; }
.nav-logo { display: block; height: 36px; width: auto; max-width: 220px; object-fit: contain; }

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 5;
}

.brand { font-weight: 700; letter-spacing: 0.4px; }
.brand span { color: var(--accent); }

.stat { font-size: 13px; color: var(--muted); }
.stat b { color: var(--text); font-size: 15px; margin-left: 4px; }

.spacer { flex: 1; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.on { background: var(--accent); }
.dot.off { background: var(--alarm); }

input, select, button {
  font: inherit;
  color: var(--text);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
}

button { cursor: pointer; }
button:hover { border-color: var(--accent); }

.layout { display: flex; height: calc(100vh - 49px); position: relative; }

/* Zasloni s kartom slazu se u stupac: traka, ploca, pa raspored koji uzme
   ostatak. Bez toga bi visina rasporeda ovisila o zbroju piksela iznad. */
body.stupac { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
body.stupac .layout { flex: 1; height: auto; min-height: 0; }

/* --- karta preko cijele povrsine, paneli plutaju nad njom ---
   Karta je sadrzaj, ne jedan od stupaca. Paneli lebde nad njom, sa sjenom i
   zaobljenim rubom, pa se vidi da su sloj iznad, a karta se nastavlja ispod. */
body.stupac .layout > #map { position: absolute; inset: 0; width: auto; flex: none; }

body.stupac .side,
body.stupac .analitika {
  position: absolute; top: 14px; z-index: 3;
  /* Panel je visok koliko treba, ne koliko ima mjesta. Rastegnut prazan panel
     izgleda kao da se nesto nije ucitalo. */
  bottom: auto; max-height: calc(100% - 28px);
  width: 330px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--plutajuce);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px var(--sjena);
  overflow-y: auto; overscroll-behavior: contain;
}
body.stupac .side { padding-bottom: 8px; }
body.stupac .side { left: 14px; border-right: 1px solid var(--line); }
body.stupac .analitika { right: 14px; width: 360px; border-left: 1px solid var(--line); }

/* Kad je panel plutajuc, prvi naslov ne smije visjeti uz sam rub. */
body.stupac .side h3:first-child { padding-top: 14px; }

/* MapLibre kontrole ne smiju zavrsiti ispod plutajuceg panela. */
body.stupac .maplibregl-ctrl-bottom-right { margin-right: 375px; }

/* Ploca sa stanjem cijele flote, iznad karte. */
.ploca {
  display: flex; gap: 1px; background: var(--line);
  border-bottom: 1px solid var(--line); overflow-x: auto; flex-shrink: 0;
}
.plocica { background: var(--panel); padding: 9px 18px; min-width: 108px; }
.plocica b { display: block; font-size: 20px; line-height: 1.15; }
.plocica span { font-size: 11px; color: var(--muted); }
.plocica.upozorenje b { color: var(--warn); }

.side {
  width: 320px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  flex-shrink: 0;
}

.side h3 {
  margin: 0;
  padding: 12px 14px 8px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.row {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.row:hover { background: var(--panel-soft); }
.row .name { font-weight: 600; }
.row .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

.alert { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.alert.alarm { border-left: 3px solid var(--alarm); }
.alert.info { border-left: 3px solid var(--muted); }
.alert .when { color: var(--muted); font-size: 11px; }

#map { flex: 1; }

.marker {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--warn);
  border: 2px solid var(--obrub-oznake);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 25%, transparent);
}
.marker.train { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.marker.stale { background: var(--muted); box-shadow: none; }

/* Oznaka vozila na karti: krug s ikonom i ime ispod. Prije je to bila tocka od
   sesnaest piksela, u floti od trideset vozila nerazlucljiva od druge tocke. */
.oznaka { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.oznaka-krug {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--obrub-oznake);
  box-shadow: 0 2px 8px var(--sjena);
  transition: transform .12s ease;
}
.oznaka:hover .oznaka-krug { transform: scale(1.12); }
.oznaka-ime {
  margin-top: 3px; padding: 1px 7px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--oznaka-pozadina); color: var(--oznaka-tekst);
  border: 1px solid var(--oznaka-obrub);
}
.oznaka.stalo .oznaka-krug { filter: grayscale(.85); opacity: .75; box-shadow: none; }
.oznaka.odabran .oznaka-krug {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent), 0 2px 10px var(--sjena-jaka);
}

/* Grozd preklopljenih vozila.
   Dvije oznake na istom parkiralistu potpuno se prekriju, pa se ne vidi ni ikona
   ni ime, a izgleda kao da je vozilo samo jedno. Umjesto njih se crta jedan krug
   s brojem. */
.grozd { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.grozd-krug {
  min-width: 36px; height: 36px; padding: 0 9px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--na-akcentu);
  background: var(--accent); border: 2.5px solid var(--obrub-oznake);
  box-shadow: 0 2px 8px var(--sjena), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: transform .12s ease;
}
.grozd:hover .grozd-krug { transform: scale(1.1); }

/* Popis vozila u skocnom prozoru grozda, kad su toliko blizu da priblizavanje
   ne pomaze. */
.grozd-popis { min-width: 168px; }
.grozd-popis > div {
  display: flex; align-items: center; gap: 8px; padding: 6px 2px;
  border-top: 1px solid var(--line); cursor: pointer;
}
.grozd-popis > div:first-child { border-top: none; }
.grozd-popis > div:hover b { color: var(--accent); }
.grozd-popis b { display: block; font-size: 13px; font-weight: 600; }
.grozd-popis small { color: var(--muted); }

/* --- brzi pregled vozila na nadzornoj ploci ---
   Klik na vozilo ne smije odvesti sa zaslona: nadzorna ploca je mjesto s kojeg
   se gleda cijela flota. Osnovno se vidi odmah, a cijela analitika je jedan
   klik dalje. */
.brzi {
  position: absolute; top: 14px; right: 14px; width: 316px; z-index: 4; display: none;
  background: var(--plutajuce-jako); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px var(--sjena); overflow: hidden;
}
.brzi.otvoren { display: block; }
.brzi-vrh { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }
.brzi-vrh .ikona-vozila { width: 34px; height: 34px; }
.brzi-vrh .slika-vozila { width: 46px; height: 34px; }
.brzi-vrh b { display: block; font-size: 15px; }
.brzi-vrh small { color: var(--muted); font-size: 12px; }
.brzi-vrh button {
  margin-left: auto; align-self: flex-start; background: none; border: none;
  color: var(--muted); font-size: 20px; line-height: 1; padding: 0 2px;
}
.brzi-vrh button:hover { color: var(--text); border: none; }

.brzi-brzina {
  display: flex; align-items: baseline; gap: 7px; padding: 0 14px 12px;
}
.brzi-brzina b { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.brzi-brzina span { font-size: 12px; color: var(--muted); }

.brzi-redci { border-top: 1px solid var(--line); padding: 10px 14px; display: grid; gap: 7px; }
.brzi-redci > div { display: flex; gap: 10px; font-size: 12px; }
.brzi-redci span:first-child { color: var(--muted); width: 92px; flex-shrink: 0; }
.brzi-redci span:last-child { text-align: right; margin-left: auto; }

.brzi-tipke { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.brzi-tipke button { flex: 1; font-size: 13px; }

/* Ikona vozila u popisima i tablicama. */
.ikona-vozila {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
}
.slika-vozila {
  width: 40px; height: 30px; object-fit: cover; border-radius: 5px;
  border: 1px solid var(--line); vertical-align: middle; background: var(--panel-soft);
}
.red-s-ikonom { display: flex; align-items: center; gap: 9px; }

.maplibregl-popup-content {
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  font-size: 13px;
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--panel); }

.notice {
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Prazan popis mora reci da je prazan, inace izgleda kao da se nije ucitao. */
.prazno-malo { padding: 4px 14px 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }

/* --- povijest vozila na operativnoj karti --- */

.povijest {
  position: absolute; top: 60px; right: 12px; width: 320px; max-height: calc(100vh - 130px);
  overflow-y: auto; z-index: 4; display: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px var(--sjena-blaga);
}
.povijest.otvoren { display: block; }

.povijest-vrh {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line);
}
.povijest-vrh b { font-size: 15px; }
.povijest-vrh button {
  margin-left: auto; background: none; border: none; color: var(--muted);
  font-size: 20px; line-height: 1; padding: 0 2px;
}
.povijest-vrh button:hover { color: var(--text); border: none; }

.razdoblja { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 16px; }
.razdoblja button { padding: 4px 9px; font-size: 12px; }
.razdoblja button.aktivan {
  background: var(--accent); border-color: var(--accent); color: var(--na-akcentu); font-weight: 600;
}

.raspon { display: none; padding: 0 16px 14px; }
.raspon.otvoren { display: block; }
.raspon label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; }
.raspon label span { color: var(--muted); width: 22px; flex-shrink: 0; }
.raspon input[type=date] { flex: 1; min-width: 0; }
.raspon input[type=time] { width: 86px; flex-shrink: 0; }
.raspon-tipke { display: flex; gap: 8px; margin-top: 4px; }
.raspon-tipke button { flex: 1; }

.sazetak {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sazetak div { background: var(--panel); padding: 10px 16px; }
.sazetak b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.sazetak span { font-size: 11px; color: var(--muted); }

/* Brzine se citaju najcesce, pa se i vide najprije. */
.sazetak .brzina b { font-size: 26px; line-height: 1.1; letter-spacing: -.5px; }
.sazetak .istaknuta b { color: var(--accent); }

/* Brzina u skocnom prozoru nad kartom. */
.skocni { display: flex; align-items: baseline; gap: 5px; margin-bottom: 3px; }
.skocni b { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.skocni span { font-size: 11px; color: var(--muted); }

.legenda { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.legenda i {
  width: 11px; height: 3px; border-radius: 2px; display: inline-block;
  vertical-align: middle; margin-right: 5px;
}
.legenda span { font-size: 11px; color: var(--muted); }

/* Isti panel kao .povijest, ali stalni stupac na zaslonu za pracenje vozila. */
.analitika {
  width: 360px; flex-shrink: 0; overflow-y: auto;
  background: var(--panel); border-left: 1px solid var(--line);
}

.trazilica { width: calc(100% - 28px); margin: 0 14px 8px; }

.prati { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.prati input { width: 14px; height: 14px; padding: 0; }

.row.odabran-red { background: var(--panel-soft); box-shadow: inset 3px 0 0 var(--accent); }

.pov-tabovi {
  display: flex; gap: 2px; padding: 0 10px; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.pov-tabovi button {
  background: none; border: none; border-radius: 0; border-bottom: 2px solid transparent;
  padding: 8px 7px; font-size: 12px; color: var(--muted); white-space: nowrap;
}
.pov-tabovi button:hover { color: var(--text); }
.pov-tabovi button.aktivan { color: var(--text); border-bottom-color: var(--accent); }

.pov-vid { display: none; }
.pov-vid.aktivan { display: block; }

.pov-odjeljak { border-top: 1px solid var(--line); padding: 12px 16px 16px; }
.pov-vid > .pov-odjeljak:first-child { border-top: none; }
.pov-odjeljak h4 {
  margin: 0 0 8px; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.stajanje { padding: 7px 0; border-top: 1px solid var(--line); font-size: 12px; cursor: pointer; }
.stajanje:first-child { border-top: none; }
.stajanje:hover b { color: var(--accent); }
.stajanje .kada { color: var(--muted); }

.zapis { display: flex; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12px; }
.zapis:first-child { border-top: none; }
.zapis .kad { color: var(--muted); width: 74px; flex-shrink: 0; }
.zapis .brz { width: 62px; text-align: right; }
.zapis .gdje {
  color: var(--muted); flex: 1; text-align: right; cursor: pointer;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
}
.zapis .gdje:hover { color: var(--accent); }

.voznja { padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; cursor: pointer; }
.voznja:first-child { border-top: none; }
.voznja b { font-size: 13px; }
.voznja .detalj { color: var(--muted); margin-top: 2px; }

.film-vrijeme {
  font-size: 15px; font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.film-vrijeme span { color: var(--muted); font-size: 12px; margin-left: 8px; }
#film-klizac { width: 100%; padding: 0; background: none; border: none; }
.film-tipke { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.film-tipke button { flex: 1; }
.film-tipke select { width: 90px; }

.marker.odabran { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent); }
.marker-film {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--obrub-oznake); border: 3px solid var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent);
}
.marker-stajanje {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--muted);
}
.marker-kraj {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--obrub-oznake);
}
.marker-pocetak {
  width: 13px; height: 13px; border-radius: 3px;
  background: var(--muted); border: 2px solid var(--obrub-oznake);
}

/* Redoslijed oznaka na karti, na jednom mjestu.

   MapLibre oznakama ne dodjeljuje z-index, pa se bez ovoga crtaju redom kojim
   su stvorene. Analitika svoje oznake stvara nakon oznake vozila i iznova pri
   svakoj promjeni razdoblja, pa je vozilo koje se prati zavrsavalo ispod tocke
   zaustavljanja, i to bas kad stoji ondje gdje je stalo, dakle najcesce.

   Odabrano vozilo je uvijek na vrhu: to je jedina oznaka o kojoj korisnik u tom
   trenutku cita podatke. Zato ovdje, a ne u JS-u: markere crtaju tri datoteke i
   nijedna ne zna sto su druge dvije stavile na kartu. */
.marker-stajanje, .marker-pocetak, .marker-kraj { z-index: 1; }
.marker-film { z-index: 2; }
.oznaka, .grozd { z-index: 3; }
.oznaka.odabran { z-index: 5; }

/* --- konzola: vozila, uredjaji, korisnici, platforma --- */

.konzola { max-width: 1080px; margin: 0 auto; padding: 26px 22px 70px; }

/* Naslov zaslona. Prije je naziv tvrtke stajao u traci, gdje se gubio medju
   poveznicama. Ovdje se odmah zna gdje si i cije podatke gledas. */
.zaglavlje { margin-bottom: 22px; }
.zaglavlje h1 { font-size: 22px; margin: 0 0 3px; font-weight: 600; }
.zaglavlje .podnaslov { font-size: 13px; color: var(--muted); }

.tabovi { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.tabovi button {
  background: none; border: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 9px 14px; color: var(--muted);
}
.tabovi button:hover { color: var(--text); border-color: var(--line); }
.tabovi button.aktivan { color: var(--text); border-bottom-color: var(--accent); }

.panel { display: none; }
.panel.aktivan { display: block; }

.kartica {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 16px;
}
.kartica h2 {
  font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 0 10px 8px 0;
}
td { padding: 9px 10px 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }
td.desno, th.desno { text-align: right; padding-right: 0; }
/* Broj uz rub vrijedi samo za zadnji stupac. Desno poravnat stupac usred
   retka bez razmaka se lijepi na tekst iza sebe ("25 min45.33324"). */
td.desno:not(:last-child), th.desno:not(:last-child) { padding-right: 18px; }
tr.neaktivan td { opacity: .45; }

.znak {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--muted);
}
.znak.zeleni { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.znak.crveni { color: var(--alarm); border-color: color-mix(in srgb, var(--alarm) 45%, transparent); }
.znak.zuti { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

.mali { font-size: 12px; color: var(--muted); line-height: 1.55; }
.jednoliko { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }

.polja { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; }
.polja label { display: block; font-size: 13px; }
.polja label span { display: block; color: var(--muted); margin-bottom: 5px; font-size: 12px; }
.polja input, .polja select { width: 100%; }

.glavni { background: var(--accent); border-color: var(--accent); color: var(--na-akcentu); font-weight: 600; }
.glavni:hover { filter: brightness(1.08); }
.opasni:hover { border-color: var(--alarm); color: var(--alarm); }

.poruka { font-size: 13px; padding: 10px 12px; border-radius: 8px; margin-top: 14px; display: none; line-height: 1.55; }
.poruka.ok { display: block; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.poruka.los { display: block; background: color-mix(in srgb, var(--alarm) 12%, transparent); border: 1px solid color-mix(in srgb, var(--alarm) 45%, transparent); }
/* Prazna poruka se ne crta. Brisanje poruke ostavlja razred ok ili los, pa bi
   bez ovoga ostala prazna obojena traka koja izgleda kao greska u ucitavanju. */
.poruka.ok:empty, .poruka.los:empty { display: none; }

.prazno { color: var(--muted); font-size: 13px; padding: 14px 0; line-height: 1.6; }

.brojke { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.brojka { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.brojka b { display: block; font-size: 24px; margin-bottom: 2px; }
.brojka span { font-size: 12px; color: var(--muted); }

/* obrazac za prijavu i postavljanje lozinke */
.sredina { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.obrazac { width: 100%; max-width: 380px; }
.obrazac h1 { font-size: 24px; margin: 0 0 6px; }
.obrazac h1 span { color: var(--accent); }
.obrazac .lead { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 22px; }
.obrazac label { display: block; font-size: 13px; margin-bottom: 14px; }
.obrazac label span { display: block; color: var(--muted); margin-bottom: 5px; font-size: 12px; }
.obrazac input { width: 100%; padding: 9px 11px; }
.obrazac button { width: 100%; padding: 10px; margin-top: 4px; }
.podnozje {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
  text-align: center; font-size: 12px;
}
.podnozje a { color: var(--muted); text-decoration: none; }
.podnozje a:hover { color: var(--accent); }

.veze { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.veza {
  display: block; padding: 14px 16px; text-decoration: none; color: var(--text);
  background: var(--panel-soft); border: 1px solid var(--line); border-radius: 10px;
}
.veza:hover { border-color: var(--accent); }
.veza b { display: block; margin-bottom: 3px; }
.veza small { color: var(--muted); line-height: 1.5; }

.stanje { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; }
.stanje div:nth-child(odd) { color: var(--muted); }
.napomena { font-size: 12px; color: var(--muted); margin: -6px 0 14px; line-height: 1.55; }
.uredjaji { margin-top: 12px; font-size: 13px; }
.uredjaji div { padding: 5px 0; border-top: 1px solid var(--line); }
.akcije { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.siroko label { display: block; font-size: 13px; margin-bottom: 14px; }
.siroko label span { display: block; color: var(--muted); margin-bottom: 5px; font-size: 12px; }
.siroko label input { width: 100%; }

/* Izgled vozila u tablici: ikona, boja i slika u jednom stupcu. */
.izgled { display: flex; align-items: center; gap: 6px; }
.izgled select { max-width: 150px; }
.izgled input[type=color] {
  width: 34px; height: 30px; padding: 2px; cursor: pointer;
}

/* --- izgled tvrtke (kartica Izgled u konzoli) ---
   Logo se gleda, ne opisuje, pa stoji na podlozi kakva ce ga docekati u traci. */
.izgled-red { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.logo-okvir {
  display: flex; align-items: center; justify-content: center;
  min-width: 210px; height: 64px; padding: 0 16px;
  background: var(--panel-soft); border: 1px dashed var(--line); border-radius: 12px;
}
.logo-okvir img { max-height: 40px; max-width: 240px; width: auto; object-fit: contain; }
.prazno-tiho { color: var(--muted); font-size: 12px; }

/* Odabir datoteke izgleda kao gumb, jer se ponasa kao gumb. Izvorni <input
   type=file> nema stil koji se moze uskladiti s ostatkom. */
.gumb-datoteka > span {
  display: inline-block; cursor: pointer;
  background: none; color: var(--text);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 13px; font-size: 13px;
}
.gumb-datoteka > span:hover { border-color: var(--accent); color: var(--accent); }

.boja-red { display: flex; gap: 8px; align-items: center; }
.boja-red input[type=color] { width: 42px; height: 34px; padding: 2px; cursor: pointer; flex-shrink: 0; }
.boja-red input[type=text] { flex: 1; min-width: 0; }

/* Kako boja izgleda na stvarnim elementima. Kvadratic boje ne govori nista o
   tome hoce li tekst na gumbu ostati citljiv. */
.pregled-boje {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px; border-radius: 12px;
  background: var(--panel-soft); border: 1px solid var(--line);
}

/* Prekidac s objasnjenjem, za postavke koje treba razumjeti prije ukljucivanja. */
.prekidac { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; cursor: pointer; }
.prekidac input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.prekidac b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.prekidac small { color: var(--muted); font-size: 12px; line-height: 1.5; display: block; }

/* Traka za odabir plohe postoji samo na telefonu. Ovdje se skriva, u medijskom
   upitu nize se ukljucuje. Element se ipak uvijek stvara, da se prijelaz na uzi
   zaslon dogodi bez ponovnog ucitavanja stranice. */
.mobilna-traka { display: none; }

/* --- telefon (mobilno.js) ---------------------------------------------------
   Na sirokom zaslonu paneli plutaju uz rubove karte i svaki ima svoje mjesto.
   Na telefonu tog mjesta nema: popis vozila i pojedinosti zavrsavali su jedan
   preko drugoga, a traka s navigacijom bila je sira od zaslona, pa je preglednik
   odzumirao cijelu stranicu i sve je postalo sitno i odsjeceno.

   Ovdje se raspored mijenja, ne samo smanjuje: paneli postaju plohe pri dnu,
   vidi se tocno jedna, a bira se trakom ispod. Karta ostaje cijeli zaslon, jer
   je ona razlog zasto se ovo otvara na terenu. */

@media (max-width: 760px) {

  /* Adresna traka preglednika mijenja visinu dok se lista, pa 100vh na telefonu
     znaci "malo vise od zaslona". dvh mjeri ono sto se stvarno vidi. */
  body.stupac { height: 100vh; height: 100dvh; }

  /* Navigacija je bila najsiri element stranice. Sada se lista vodoravno,
     umjesto da rasteze cijeli dokument. */
  .nav { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  /* Cilj je da sva cetiri zaslona stanu bez listanja: navigacija koju treba
     pronaci listanjem je navigacija koje za korisnika nema. */
  .nav { min-height: 50px; }
  .nav-znak { padding: 0 10px; font-size: 15px; letter-spacing: 0; }
  .nav-znak.ima-logo { padding: 0 10px; }
  .nav-logo { height: 28px; max-width: 130px; }
  .nav-glavni a { padding: 0 9px; font-size: 13px; }
  .nav-desno { gap: 8px; padding-left: 8px; }
  .nav-tko { font-size: 11px; }
  button.tiho { padding: 5px 7px; }
  .nav-mail { display: none; }          /* ime tvrtke ostaje, adresa e-poste ne stane */
  .nav-tko .tocka { display: none; }
  #kljuc-red { display: none; }          /* kljuc sucelja se ne upisuje s telefona */

  /* Traka s brojkama: uze plocice, i dalje se lista vodoravno. */
  .ploca { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ploca::-webkit-scrollbar { display: none; }
  .plocica { min-width: auto; padding: 7px 13px; }
  .plocica b { font-size: 17px; }
  /* Prelomljena oznaka ("bez / javljanja") izgleda kao dvije razlicite brojke. */
  .plocica span { font-size: 10px; white-space: nowrap; }

  /* Paneli postaju plohe pri dnu. Vidi se ona koju je korisnik odabrao u traci,
     ostale su sklonjene, pa se nista ne moze preklopiti. */
  /* Kartica se inace pokazuje pravilom ".brzi.otvoren", pa ovo skrivanje mora
     biti barem jednako odredjeno, inace bi ostala vidljiva i preko plohe koju
     je korisnik odabrao. Upravo je to preklapanje trebalo nestati. */
  body.stupac .side,
  body.stupac .analitika,
  body.stupac .brzi,
  body.stupac .brzi.otvoren {
    position: fixed; inset: auto 0 var(--mobilna-traka-visina, 54px) 0;
    width: auto; max-height: 60vh; max-height: 60dvh;
    border-radius: 16px 16px 0 0; border: 1px solid var(--line); border-bottom: none;
    box-shadow: 0 -10px 40px var(--sjena-jaka);
    display: none; z-index: 5;
  }
  body.stupac[data-ploca="vozila"] .side { display: block; }
  body.stupac[data-ploca="analitika"] .analitika { display: block; }
  body.stupac[data-ploca="detalji"] .brzi.otvoren { display: block; }

  /* Ploha se lista prstom, a ne smije zaustaviti list stranice ispod sebe. */
  body.stupac .side,
  body.stupac .analitika,
  body.stupac .brzi { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

  /* Puna sirina znaci i vise mjesta za sadrzaj panela. */
  .brzi-redci span:first-child { width: auto; }
  .sazetak { grid-template-columns: 1fr 1fr 1fr; }
  .sazetak div { padding: 9px 12px; }

  /* Kontrole karte ne smiju zavrsiti ispod trake ni ispod plohe. */
  body.stupac .maplibregl-ctrl-bottom-right { margin-right: 6px; margin-bottom: 62px; }
  .maplibregl-ctrl-bottom-left { margin-bottom: 54px; }

  /* Traka za odabir plohe. Palac je dohvaca, zato je pri dnu. */
  .mobilna-traka {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 7;
    display: flex; gap: 1px; background: var(--line);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobilna-traka button {
    flex: 1; border: none; border-radius: 0; background: var(--panel);
    color: var(--muted); font-size: 12px; font-weight: 600; padding: 15px 4px;
  }
  .mobilna-traka button.aktivan { color: var(--text); box-shadow: inset 0 2px 0 var(--accent); }
  .mobilna-traka button:disabled { opacity: .4; }

  /* Konzole: siroka tablica se lista unutar svoje kartice, a ne rasteze
     stranicu. Bez ovoga preglednik odzumira cijeli zaslon zbog jednog stupca. */
  .konzola { padding: 18px 12px 90px; }
  .kartica { padding: 14px 13px; overflow-x: auto; }
  /* Jedan redak tablice mora ostati jedan redak. Prelomljeno "Vozilo / flote"
     u uskom stupcu izgleda kao dva podatka, a nije. Radije se lista u stranu. */
  .kartica th, .kartica td { white-space: nowrap; }
  .zaglavlje h1 { font-size: 19px; }
  .tabovi { gap: 2px; overflow-x: auto; flex-wrap: nowrap; }
  .tabovi button { padding: 9px 11px; white-space: nowrap; }

  /* Ispod 16 piksela iOS sam zumira stranicu cim se dotakne polje. */
  input, select, textarea { font-size: 16px; }

  .veze { grid-template-columns: 1fr; }
  .brojke { grid-template-columns: 1fr 1fr; }
  .sredina { padding: 18px; }
}

/* Tko je trenutno za volanom. Stoji uz vozilo na Pregledu, u brzom pregledu i u
   zaglavlju analitike: kad voditelj flote gleda vozilo koje se cudno ponasa,
   prvo pita cije je, pa vozac ne smije biti samo u izvjestaju. */
.vozac-red { color: var(--accent); }
.vozac-red b { font-weight: 600; }

/* Traka s brojkama unutar kartice konzole. Isti izgled kao ploca nad kartom,
   samo uokvirena, jer unutar kartice nema karte ispod sebe. */
.ploca.u-kartici {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  margin: 12px 0 6px;
}

/* Ime u tablici koje se moze kliknuti. Gumb, a ne poveznica, jer ne vodi na
   drugu adresu nego otvara karticu ispod. Sadrzaj mu je cisti tekst, da klik
   uvijek pogodi sam gumb a ne element u njemu. */
.kaoveza {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--accent); cursor: pointer; text-align: left;
}
.kaoveza:hover { text-decoration: underline; }

/* Brzi odabir razdoblja: nekoliko malih gumba u jednom retku. */
.brzi-dani { display: flex; gap: 6px; flex-wrap: wrap; }
.brzi-dani button { padding: 6px 12px; }
.brzi-dani button.aktivan { border-color: var(--accent); color: var(--accent); }

/* Upozorenje uz prekidac: postavka je ukljucena, ali servis iza nje ne radi.
   Zuto, ne crveno: podatak nije kriv i nista se nije izgubilo, samo se ne
   dobiva ono sto je trazeno. */
.prekidac small.cesta-upozorenje,
.prekidac small.upozorenje {
  color: var(--warn);
  margin-top: 4px;
}

/* Karta za unos zone. Konzola nije zaslon s kartom (ondje karta ispunjava
   povrsinu, a paneli plutaju nad njom), ovdje je karta polje u obrascu, pa ima
   zadanu visinu i stoji unutar kartice kao i svako drugo polje. */
.karta-unos {
  height: 340px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}

@media (max-width: 760px) {
  .karta-unos { height: 260px; }
}

/* Naziv uredjaja je polje, ne tekst: prvi put dolazi iz Traccara, gdje je cesto
   serijski broj, pa se u tablici smije prekrstiti bez posebnog obrasca. Izgleda
   kao tekst dok se ne dodirne, da tablica ostane mirna za citanje. */
.ime-uredaja {
  font-weight: 600;
  font-size: 13px;
  width: 100%;
  min-width: 120px;
  padding: 4px 6px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}
.ime-uredaja:hover { border-color: var(--line); }
.ime-uredaja:focus {
  background: var(--panel-soft);
  border-color: var(--accent);
  outline: none;
}

/* Tvrtka uz vozilo. Vidi se samo kad vlasnik instalacije gleda preko svih
   tvrtki, pa mora biti tiha: ime vozila ostaje ono sto oko prvo nadje. */
.tvrtka-red {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* Kartica vozila na zaslonu Flota: sve o jednom vozilu na jednom mjestu.
   Odjeljci su odvojeni crtom, a radnja odjeljka stoji u istom retku kao
   naslov, da se zna na sto se odnosi. */
.kv-zaglavlje { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kartica .kv-zaglavlje h2 { font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--text); margin: 0 0 2px; }
.kv-odjeljak {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px;
}
.kv-podaci { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; font-size: 13px; }
.kv-podaci span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.kv-km { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.kv-km b { display: block; font-size: 28px; line-height: 1.1; }
.kv-km .napomena { display: block; margin: 4px 0 0; }
.kv-km .polja { flex: 1; max-width: 460px; }
.kv-podforma {
  background: var(--panel-soft); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin: 12px 0;
}
.kv-podforma h3 { margin: 0 0 12px; font-size: 13px; }
tr.klikni { cursor: pointer; }
tr.klikni:hover td { background: var(--panel-soft); }
.poveznica-vozila { cursor: pointer; }
.poveznica-vozila:hover { color: var(--accent); text-decoration: underline; }