:root {
  /* ===== SKALA TIPOGRAFIJE (citljivost) =====
     Nista ispod 12px. Oznake polja (ADRESA, VRIJEME, POLAZAK…) nose najvazniju
     informaciju, a bile su najsitniji tekst u aplikaciji — to je okrenuto. */
  --fs-micro: 12px;   /* oznake polja, znacke, meta podaci */
  --fs-sm:    13px;   /* sekundarni tekst, redovi u popisima */
  --fs-base:  14px;   /* osnovni tekst, body */
  --fs-md:    15px;   /* istaknute vrijednosti */
  --fs-lg:    17px;   /* naslovi panela */

  /* Sirina side drawera. Nakon povecanja fontova sadrzaj (IMEI, adrese,
     „Temp. motora") vise nije stao u 330px. Vrijednost se koristi i za
     polozaj rucke i donjeg panela — drzi ih na jednom mjestu. */
  --drawer-w: 400px;

  --brand-primary: #1F4E8A;
  --brand-primary-dark: #0F2C4D;
  --brand-secondary: #D99A18;
  --brand-secondary-light: #FCD34D;
  --color-text-primary: #0F172A;
  --color-text-secondary: #334155;
  --color-text-tertiary: #64748B;
  --color-text-disabled: #94A3B8;   /* SAMO neaktivno i placeholder */
  --color-surface: #F8FAFC;
  --color-surface-elevated: #FFFFFF;
  --color-border: #E5E7EB;
  --color-info-bg: #EEF2FF;
  --red: #EF4444; --red-bg: #FEE2E2; --red-text: #B91C1C;
  --orange: #F97316; --orange-bg: #FEF3C7; --orange-text: #B45309;
  --green: #16A34A; --green-bg: #DCFCE7; --green-text: #15803D;
  /* ⚠️ ZUTE U PALETI NIJE BILO (11.09.2026.), i to je bio uzrok prijave „ovo
     srednja nije zuta": za nju je sluzila BREND-ZLATNA `--brand-secondary`
     (#D99A18), boja marke a ne boja ozbiljnosti. Token postoji da se ta
     zamjena vise ne ponovi. */
  --yellow: #EAB308;
  /* ⚠️ „INFO" DOBIVA TOKEN 2026-08-28: `--color-info-bg` je postojao, a boja
     teksta uz njega nije — pisala se kao pad (`var(--info-text, #3730A3)`), sto
     `stil-mjera` broji kao nedefiniranu varijablu. Pad koji uvijek pada nije
     token nego hex s dodatnim korakom.
     ⚠️ JANTAR NE DOBIVA VLASTITU OBITELJ: `--orange-*` vec postoji s ISTIM
     vrijednostima (#F97316 / #FEF3C7 / #B45309). Drugo ime za istu boju je
     tocno onaj razlaz koji tokeni postoje da sprijece. */
  --info-text: #3730A3;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--fs-base); line-height: 1.45;
  color: var(--color-text-primary, #0F172A);
  background: var(--color-surface, #F8FAFC);
  overflow: hidden; height: 100vh; display: flex; flex-direction: column;
}
.mono { font-family: 'JetBrains Mono', monospace; }

/* ===== TOPBAR (logo + horizontalna navigacija + kontrole) ===== */
.topbar {
  height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  background: var(--brand-primary-dark, #0F2C4D); color: #fff; padding: 0 14px; z-index: 1200;
  /* Sjena ispod zaglavlja — DOSLOVNO iz PCS-a (`header.topbar`, index.html:218),
     ne priblizno: dva sloja, siroki za dubinu i uski za rub. Prepisana
     vrijednost koja „izgleda slicno" razide se prvom izmjenom na jednoj strani. */
  box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.20);
}
.topbar__logo { display: flex; align-items: center; gap: 9px; margin-right: 18px; }
.topbar__logo .mdi { font-size: 24px; color: var(--brand-secondary-light, #FCD34D); }
.topbar__logo b { font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0.02em; }
.topbar__logo span { font-size: var(--fs-micro); color: #94A3B8; display: block; line-height: 1.1; }
.tnav { display: flex; gap: 2px; height: 100%; }
.tnav__item {
  display: flex; align-items: center; gap: 7px; padding: 0 14px; height: 100%;
  font-family: inherit; font-size: var(--fs-base); font-weight: 600; color: #CBD5E1;
  background: none; border: none; border-bottom: 3px solid transparent; border-top: 3px solid transparent; cursor: pointer;
}
.tnav__item .mdi { font-size: 17px; }
.tnav__item .b { background: var(--red, #EF4444); color: #fff; border-radius: 999px;
  padding: 0 7px; font-size: var(--fs-micro); font-weight: 700; line-height: 18px; }
.tnav__item:hover { color: #fff; background: rgba(255,255,255,0.06); }
.tnav__item.active { color: #fff; border-bottom-color: var(--brand-secondary, #D99A18); background: rgba(255,255,255,0.07); }
.topbar__spacer { flex: 1; }
.tenant-switch {
  display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 5px 11px;
  font-size: var(--fs-base); font-weight: 600; cursor: pointer; position: relative;
}
.tenant-switch .mdi-office-building { color: var(--brand-secondary-light, #FCD34D); }
.tenant-menu {
  position: absolute; top: 40px; right: 0; width: 235px; background: #fff; color: var(--color-text-primary,#0F172A);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,0.25); padding: 6px; display: none; z-index: 1300;
}
.tenant-menu.open { display: block; }
.tenant-menu__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: var(--fs-base); cursor: pointer; }
.tenant-menu__item:hover { background: var(--color-surface, #F8FAFC); }
.tenant-menu__item .mdi-check { margin-left: auto; color: var(--green, #16A34A); }
.tenant-menu__label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); padding: 7px 10px 3px; }
.topbar__icon { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14); color: #E2E8F0; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; font-size: var(--fs-lg); }
.topbar__icon .badge { position: absolute; top: -4px; right: -4px; background: var(--red, #EF4444); color: #fff; font-size: var(--fs-micro); font-weight: 700; border-radius: 999px; padding: 0 4px; }
.topbar__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-secondary, #D99A18); color: var(--brand-primary-dark, #0F2C4D); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); }
.user-switch { position: relative; cursor: pointer; }

/* ===== VIEWS ===== */
.view { display: none; flex: 1; min-height: 0; }
.view.active { display: block; }
.view--flex.active { display: flex; }

/* ===== KARTA VIEW: lijevi panel | karta (+ overlay detalji) ===== */
.karta-layout { flex: 1; display: flex; min-height: 0; position: relative; }

/* Lijevi panel s tabovima */
.lpanel { width: 302px; flex-shrink: 0; background: var(--color-surface-elevated, #FFFFFF); border-right: 1px solid var(--color-border, #E5E7EB); display: flex; flex-direction: column; min-height: 0; z-index: 500; }
.lpanel__tabs { display: flex; border-bottom: 1px solid var(--color-border, #E5E7EB); flex-shrink: 0; }
/* ⚠️ Izgled dolazi iz JEDNE deklaracije uz `.tabs` (dno datoteke). Ovdje ostaje
   samo ono sto je svojstvo USKOG PANELA: tabovi se rastezu preko sirine. */
/* ⚠️ JEDNA ZNACKA ZA SVE TABOVE (31.08.2026.). Prije su postojale cetiri
   (`.ltab__count` crvena, `.btab__count` i `.wtab__n` navy, `.stab__count`
   blijedocrvena) — cetiri boje za istu tvrdnju „ovoliko ih ceka". Boja je
   nosila IME TRAKE, ne znacenje. */
.tab__n { font-size: var(--fs-micro); font-weight: 700; background: var(--red, #EF4444);
  color: #fff; border-radius: 999px; padding: 0 5px; }
.tab__n--rez { visibility: hidden; }
.tab__n--adm { background: #F5F0FD; color: #6D28D9; }
.lpanel__body { flex: 1; overflow-y: auto; min-height: 0; display: none; }
.lpanel__body.active { display: block; }

/* Tab Vozila */
.lsearch { display: flex; gap: 6px; padding: 9px 10px; border-bottom: 1px solid var(--color-border, #E5E7EB); }
.lsearch input { flex: 1; border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px; padding: 6px 9px; font-family: inherit; font-size: var(--fs-base); outline: none; background: var(--color-surface, #F8FAFC); }
.lsearch select { border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px; padding: 6px 5px; font-family: inherit; font-size: var(--fs-sm); background: var(--color-surface, #F8FAFC); color: var(--color-text-secondary); }
.vrow { padding: 9px 12px; border-bottom: 1px solid var(--color-border, #E5E7EB); cursor: pointer; }
.vrow:hover { background: var(--color-surface, #F8FAFC); }
.vrow.sel { background: var(--color-info-bg, #EEF2FF); box-shadow: inset 3px 0 0 var(--brand-secondary, #D99A18); }
.vrow__top { display: flex; align-items: center; gap: 8px; }
.vrow__name { font-size: var(--fs-base); font-weight: 700; }
.vrow__plate { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
/* Vozac u vlastitom retku — uz registraciju se pod novom skalom prelamao. */
.vrow__driver { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: var(--fs-micro);
  color: var(--color-text-tertiary, #64748B); margin-top: 2px; }
/* Zaduzeni ispod vozaca po nalogu, u svom retku — u panelu od 300 px tri stvari u jednom redu su se lomile po slovu. */
.vrow__driver .vrow__zaduzen { flex-basis: 100%; padding-left: 18px; }
.vrow__driver .mdi { font-size: var(--fs-sm); }
/* ⚠️ „zadužen" je TIHA rijec, ne oznaka: kaze KOJU cinjenicu ime nosi, ali se
   ne natjece s imenom. Bez nje se `Vehicle.driver` (zaduzen) i
   `Trip.driver_name` (vozio) citaju kao isto, pa ispravno stanje izgleda kao
   kvar — sto je 03.09.2026. i prijavljeno. */
/* „po nalogu RN-…" (07.09.2026.) — vozac s otvorenog naloga stoji ispred zaduzenja; zlatna, jer je danasnja cinjenica, ne stalno stanje. */
.vrow__zad.vrow__nalog { background: #FEF3C7; color: #92400E; border-color: #FCD34D; text-transform: none; white-space: nowrap; }
.vrow__zad { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.03em;
  color: var(--color-text-tertiary, #94A3B8); text-transform: lowercase; }
.vrow__stats { display: flex; gap: 10px; margin-top: 5px; font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.vrow__stats .mdi { font-size: var(--fs-base); color: var(--color-text-tertiary, #94A3B8); }
.vrow__stats b { font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* Status pills */
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-micro); font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; margin-left: auto; }
.status-pill__dot { width: 6px; height: 6px; border-radius: 50%; }
.status-pill--active { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.status-pill--active .status-pill__dot { background: var(--green, #16A34A); }
.status-pill--parked { background: #F1F5F9; color: #475569; }
.status-pill--parked .status-pill__dot { background: #94A3B8; }
/* ⚠️ „Nema signala" NIJE parkirano. Siva bi tvrdila da vozilo stoji, a mi ne
   znamo gdje je ni sto radi — znamo samo da ne javlja. Zato zuto (odluka 68, §16). */
.status-pill--stale { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.status-pill--stale .status-pill__dot { background: var(--orange, #F59E0B); }
/* „ugradnja nije potvrdena": navy, ne narancasto — nije kvar nego NEDOVRSEN
   POSAO, i postupak je potvrda, ne servis (etapa A, odluka 72). */
.status-pill--info { background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); }
.status-pill--info .status-pill__dot { background: var(--brand-primary, #1F4E8A); }
.status-pill--alert { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.status-pill--alert .status-pill__dot { background: var(--red, #EF4444); }

/* Tab Povijest */
.hist-veh { padding: 10px 12px 8px; border-bottom: 1px solid var(--color-border, #E5E7EB); display: flex; align-items: center; gap: 9px; }
.hist-veh__icon { width: 30px; height: 30px; border-radius: 9px; background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.hist-veh__name { font-size: var(--fs-lg); font-weight: 800; line-height: 1.15; }
.hist-veh__plate { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-base); font-weight: 600; color: var(--brand-primary, #1F4E8A); }
.hist-veh .status-pill { margin-left: auto; }
.hist-addr { padding: 8px 10px; border-bottom: 1px solid var(--color-border, #E5E7EB); }
.hist-addr__k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); }
.hist-addr__v { font-size: var(--fs-sm); color: var(--color-text-primary, #0F172A); margin-top: 2px; }
.hist-addr__v.na { color: var(--color-text-tertiary, #94A3B8); font-family: 'JetBrains Mono', monospace; }
.hist-ctl { padding: 9px 10px; border-bottom: 1px solid var(--color-border, #E5E7EB); display: flex; gap: 6px; align-items: center; }
.hist-ctl input[type=date] { flex: 1; border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px; padding: 5px 8px; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); background: var(--color-surface, #F8FAFC); }
.hist-ctl .ibtn { width: 29px; height: 29px; border-radius: 7px; border: 1px solid var(--color-border, #E5E7EB); background: #fff; color: var(--color-text-secondary); cursor: pointer; font-size: var(--fs-md); }
.day-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 9px 10px; border-bottom: 1px solid var(--color-border, #E5E7EB); }
.day-sum__cell { background: var(--color-surface, #F8FAFC); border-radius: 8px; padding: 6px 4px; text-align: center; }
.day-sum__cell b { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-base); font-weight: 700; display: block; }
.day-sum__cell span { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary, #94A3B8); font-weight: 600; }
.trip { padding: 8px 12px; border-bottom: 1px solid var(--color-border, #E5E7EB); cursor: pointer; display: flex; gap: 10px; align-items: center; }
.trip:hover { background: var(--color-surface, #F8FAFC); }
.trip.sel { background: var(--color-info-bg, #EEF2FF); box-shadow: inset 3px 0 0 var(--brand-secondary, #D99A18); }
.trip__no { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary, #1F4E8A); color: #fff; font-size: var(--fs-micro); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trip__no--live { background: var(--green, #16A34A); animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.45); }
  50% { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}
.trip__live-lbl { color: var(--green-text, #15803D); font-weight: 700; }
.trip__t { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); font-weight: 600; }
.trip__route { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.trip__driver { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm);
  font-weight: 700; color: var(--color-text-primary, #0F172A); margin-top: 2px; }

/* ⚠️ IME VOZACA JE KONTROLA (03.09.2026.) — jedino mjesto gdje se vozac
   putovanja uopce pojavljuje, pa je i jedino mjesto gdje ga se moze ispraviti.
   Priguseno dok se ne pride: kontrola koja vice iz svakog retka popisa bila bi
   glasnija od podatka. */
.trip__driver:hover { color: var(--brand-primary, #1F4E8A); text-decoration: underline; }
.trip__driver .mdi { font-size: 12px; opacity: 0.7; margin-left: 3px; }
.trip__driver .na { font-style: italic; opacity: 0.8; }
/* Redak opsega u dijalogu promjene vozaca. */
.vz-opseg { display: flex; align-items: center; gap: 7px; padding: 5px 0;
  font-size: var(--fs-sm); cursor: pointer; }
.vz-opseg input { margin: 0; flex-shrink: 0; }
.trip__km { margin-left: auto; text-align: right; }
.trip__km b { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-base); }
.trip__km span { display: block; font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }

/* Tab Događaji */
.evt { display: flex; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--color-border, #E5E7EB); cursor: pointer; }
.evt:hover { background: var(--color-surface, #F8FAFC); }
/* Alarm na koji je covjek dosao KLIKOM NA OBAVIJEST (odluka 70). Traje samo dok
   se ne klikne dalje — trajna oznaka bi u popisu izgledala kao stanje reda. */
.evt.is-highlight { background: var(--color-info-bg, #EEF2FF); box-shadow: inset 3px 0 0 var(--brand-primary, #1F4E8A); }
.evt__icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); flex-shrink: 0; }
.evt__icon--danger { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.evt__icon--warn { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.evt__icon--info { background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); }
.evt h5 { font-size: var(--fs-sm); font-weight: 700; }
.evt p { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.evt__time { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); margin-left: auto; flex-shrink: 0; }

/* Karta */
.map-wrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; z-index: 1; }

/* Odsutna vrijednost se PISE, ne prikazuje kao crtica koja izgleda kao nula. */
/* Legenda prekoracenja — DONJI LIJEVI KUT.
   ⚠️ ODMAK SE MJERI, NE PISE. `#bpanel` je `left:0; right:0; bottom:0` i
   prekriva dno karte kad je putovanje odabrano, a visina mu se mijenja s
   tabovima — pa broj ne moze stajati u CSS-u. `syncBPanel()` postavlja
   `--bpanel-h` iz stvarne visine panela (0 kad nije prikazan), i to je JEDINO
   mjesto koje to radi. Atribucija je `bottom-right` i legendu ne dira; zoom
   gumba nema (uklonjeni 2026-08-22), pa ispod legende nema nicega. */
/* ═══════════════════════════════════════════════════════════════════════════
   CAN MODAL (odluka 71) — mockups/OSIRIS_NEO_can_modal_mockup.html
   ⚠️ VLASTITI PREFIKS `canm`, ne postojeci `.modal`: taj je `max-width: 560px`
   i dijele ga svi dosadasnji modali, pa bi im sirenje na 1040 px promijenilo
   izgled. Vrijednosti su prenesene iz mockupa, ne priblizne.
   ═══════════════════════════════════════════════════════════════════════════ */
.canm-mask { position: fixed; inset: 0; z-index: 3000; background: rgba(15,44,77,0.35);
  display: grid; place-items: center; padding: 26px; }
.canm-mask[hidden] { display: none; }
/* ⚠️ 1340 px OD 2026-08-29 (bilo 1040). Nadzorna ploca nosi PET satova; na
   1040 px nemaju zraka oko sebe — mjereno na mockupu. `.canm` je JEDINA ljuska
   ovog modala (jedan `<div class="canm">` u cijeloj statici), pa sira vrijednost
   nema drugog potrosaca koji bi je osjetio. */
.canm { width: 1340px; max-width: 100%; max-height: 92vh; background: #fff;
  border-radius: 13px; overflow: hidden; box-shadow: 0 26px 70px rgba(10,30,60,0.34);
  display: flex; flex-direction: column; }
.canm__h { background: var(--brand-primary-dark, #0F2C4D); color: #fff; padding: 13px 16px;
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.canm__h .ic { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.14);
  display: grid; place-items: center; font-size: 17px; flex: none; }
.canm__h b { font-size: var(--fs-md); display: block; line-height: 1.25; }
.canm__h .x { background: none; border: 0; color: #B9C7DA; font-size: 20px; cursor: pointer; padding: 0 0 0 4px; }
/* Stanje: chip broji cinjenicu („2 upozorenja"), nikad ne umiruje. */
.canm-st { margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding: 6px 11px 6px 9px; border-radius: 9px; border: 1px solid var(--sb);
  background: var(--sbg); color: var(--sf); }
.canm-st .mdi { font-size: 17px; line-height: 1; }
.canm-st .txt { font-size: var(--fs-micro); line-height: 1.25; }
.canm-st .txt b { display: block; font-size: var(--fs-micro); font-weight: 700; }
.canm-st .txt span { color: var(--sf2); font-size: var(--fs-micro); }
.canm-st[data-s="ok"]     { --sbg: rgba(34,197,94,.16); --sb: rgba(74,222,128,.42); --sf: #B7F3CE; --sf2: #8FDCAE; }
.canm-st[data-s="pozor"]  { --sbg: rgba(245,158,11,.18); --sb: rgba(251,191,36,.45); --sf: #FCE3AE; --sf2: #E9C27A; }
.canm-st[data-s="opasno"] { --sbg: rgba(239,68,68,.20); --sb: rgba(248,113,113,.48); --sf: #FBD2CD; --sf2: #F0AAA2; }
/* ⚠️ TRI PRAVILA `.canm__tabs` UKLONJENA 31.08.2026. Ostala su bez ijednog
   korisnika kad je `8da7457` spremnik preimenovao u `.tabs` — mrtvi CSS koji je
   stvorila selidba čija je svrha bila mrtvi CSS ukloniti. Traka CAN modala
   koristi zajedničku `.tabs > .tab`, bez modifikatora (mockup traži 12 px). */
.canm__b { padding: 14px 16px 16px; overflow: auto; flex: 1; min-height: 0; }
.canm__f { border-top: 1px solid var(--color-border, #E5E7EB); padding: 11px 16px;
  display: flex; gap: 9px; align-items: center; flex-shrink: 0; }
.canm__f .hint { margin-left: auto; font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }

/* KPI red — sest plocica, boja po mjeri kao na grafikonima */
.canm-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-bottom: 14px; }
.canm-k { border: 1px solid var(--kb, var(--color-border, #E5E7EB));
  border-left: 4px solid var(--kc, var(--brand-primary, #1F4E8A)); border-radius: 9px;
  padding: 9px 11px 10px;
  background: linear-gradient(135deg, var(--k1, #F8FAFC) 0%, var(--k2, #FFFFFF) 72%, #FFFFFF 100%); }
.canm-k .l { font-size: var(--fs-micro); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--kt, var(--color-text-tertiary, #94A3B8)); display: flex; align-items: center; gap: 5px; }
.canm-k .l .mdi { color: var(--kc, var(--brand-primary, #1F4E8A)); }
.canm-k .v { font-size: 17px; font-weight: 700; margin-top: 4px;
  font-family: 'JetBrains Mono', monospace; color: var(--kv, var(--color-text-primary, #0F172A)); }
.canm-k .v.na { font-family: 'Plus Jakarta Sans', sans-serif; font-size: var(--fs-sm);
  font-weight: 600; color: var(--color-text-tertiary, #94A3B8); }
.canm-k .u { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8);
  font-weight: 400; font-family: 'Plus Jakarta Sans', sans-serif; }
.canm-k .s { font-size: var(--fs-micro); color: var(--color-text-secondary, #334155); margin-top: 3px;
  display: flex; gap: 8px; align-items: baseline; }
.canm-k .s em { font-style: normal; color: var(--color-text-tertiary, #94A3B8); }
.canm-k .s b { font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.canm-k.km   { --kc:#1F4E8A; --k1:#EEF4FC; --k2:#F8FBFF; --kb:#A7C4E7; --kt:#3E5C86; --kv:#12365F; }
.canm-k.vrij { --kc:#475569; --k1:#F1F4F8; --k2:#FAFCFE; --kb:#B9C4D2; --kt:#4A5568; --kv:#1E293B; }
.canm-k.brz  { --kc:#1F4E8A; --k1:#EAF1FB; --k2:#F7FAFE; --kb:#A2C1E5; --kt:#3E5C86; --kv:#12365F; }
.canm-k.rpm  { --kc:#7C3AED; --k1:#F3EEFE; --k2:#FBF8FF; --kb:#C3ACF1; --kt:#5B3A9E; --kv:#4C2799; }
.canm-k.temp { --kc:#DC7633; --k1:#FDF2E8; --k2:#FFFBF6; --kb:#EBBE94; --kt:#8A5424; --kv:#8A4B14; }
.canm-k.fuel { --kc:#0F766E; --k1:#E9F6F4; --k2:#F7FCFB; --kb:#9FD0CA; --kt:#2A6B65; --kv:#0B5B55; }

/* Grafikoni — SVG rucno, bez knjiznice */
.canm-graf { border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px;
  margin-bottom: 9px; background: #fff; }
.canm-graf__h { display: flex; align-items: baseline; gap: 9px; padding: 8px 11px 4px;
  border-bottom: 1px solid #F1F5F9; }
.canm-graf__h .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.canm-graf__h .nm { font-size: var(--fs-micro); font-weight: 600; }
.canm-graf__h .src { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }
.canm-graf__h .mm { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8);
  font-family: 'JetBrains Mono', monospace; }
.canm-graf__h .now { margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-sm); font-weight: 500; }
.canm-graf__h .cv { border: 0; background: none; color: var(--color-text-tertiary, #94A3B8);
  cursor: pointer; padding: 0 0 0 6px; font-size: var(--fs-sm); line-height: 1;
  transition: transform 0.16s, color 0.16s; }
.canm-graf.sklopljen .cv { transform: rotate(-90deg); }
.canm-graf.sklopljen .canm-graf__b { display: none; }
.canm-graf.sklopljen .canm-graf__h { border-bottom: 0; }
.canm-graf__b { padding: 2px 6px 6px; position: relative; cursor: crosshair; }
.canm-graf svg { display: block; width: 100%; height: 96px; overflow: visible; }
.canm-graf .gl { stroke: #EEF2F6; stroke-width: 1; }
.canm-graf .axis { font-size: var(--fs-micro); fill: #B7C2D0; font-family: 'JetBrains Mono', monospace; }
.canm-graf .ch2 { stroke: #64748B; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.canm-graf .hd { opacity: 0; pointer-events: none; }
.canm-graf .tlabel { position: absolute; bottom: 1px; transform: translateX(-50%);
  background: var(--brand-primary-dark, #0F2C4D); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); padding: 2px 6px;
  border-radius: 4px; opacity: 0; pointer-events: none; white-space: nowrap; z-index: 4; }
.canm-meta { display: flex; gap: 14px; align-items: center; padding: 6px 2px 0;
  font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); flex-wrap: wrap; }
.canm-meta b { color: var(--color-text-primary, #0F172A); font-weight: 600;
  font-family: 'JetBrains Mono', monospace; }
.canm-nocan { border: 1px solid #FDE68A; background: #FFFBEB; border-radius: 9px;
  padding: 12px 13px; font-size: var(--fs-sm); color: #78350F; line-height: 1.6; margin-bottom: 12px; }

/* Tablica ocitanja */
.canm-tbl { border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; overflow: hidden; }
/* ⚠️ `max-height: 430px` UKLONJEN 31.08.2026. — visinu sada racuna
   `namjestiVisineTablica()` iz polozaja, jednako za sve duge tablice. */
.canm-tbl__skrol { overflow: auto; }
.canm-tbl table { width: 100%; border-collapse: collapse; font-size: var(--fs-micro); }
.canm-tbl thead th { background: var(--brand-primary-dark, #0F2C4D); color: #E2E8F0;
  text-align: right; font-weight: 600; font-size: var(--fs-micro); letter-spacing: 0.04em;
  text-transform: uppercase; padding: 7px 8px; white-space: nowrap; position: sticky; top: 0; z-index: 2; }
.canm-tbl thead th.l { text-align: left; }
.canm-tbl thead th .s { display: block; color: #94A9C4; font-size: var(--fs-micro);
  letter-spacing: 0.02em; text-transform: none; font-weight: 400; }
.canm-tbl tbody td { padding: 5px 8px; border-bottom: 1px solid #F1F5F9; text-align: right;
  white-space: nowrap; font-family: 'JetBrains Mono', monospace; color: var(--color-text-primary, #0F172A); }
.canm-tbl tbody td.l { text-align: left; }
.canm-tbl tbody tr:hover td { background: #F5F9FF; cursor: pointer; }
.canm-tbl tbody td.na { color: var(--color-text-tertiary, #94A3B8);
  font-family: 'Plus Jakarta Sans', sans-serif; }
.canm-tbl tbody tr.rupa td { background: #FFFBEB; }
.canm-tbl tbody tr.rupa:hover td { background: #FEF3C7; }
.canm-legenda { display: flex; gap: 16px; align-items: center; padding: 9px 2px 0;
  font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); flex-wrap: wrap; }
.canm-legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  vertical-align: -2px; margin-right: 5px; }

/* Greske (DTC) */
.canm-dtc { border: 1px solid var(--color-border, #E5E7EB); border-left: 4px solid var(--dc);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 9px;
  background: linear-gradient(135deg, var(--d1) 0%, #FFFFFF 74%, #FFFFFF 100%);
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; }
.canm-dtc[data-r="opasno"] { --dc:#B91C1C; --d1:#FDEDEC; --dt:#7F1D1D; }
.canm-dtc[data-r="pozor"]  { --dc:#B45309; --d1:#FEF6E7; --dt:#78350F; }
.canm-dtc[data-r="info"]   { --dc:#475569; --d1:#F3F6FA; --dt:#334155; }
.canm-dtc .ik { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-size: 19px; background: #fff; border: 1px solid var(--dc); color: var(--dc); }
.canm-dtc .kod { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-md);
  font-weight: 600; color: var(--dt); }
.canm-dtc .opis { font-size: var(--fs-sm); color: var(--color-text-primary, #0F172A);
  margin-top: 2px; line-height: 1.45; }
/* Kod proizvodaca bez unosa u tablici NE dobiva pogodeni opis. */
.canm-dtc .opis.nepoznat { color: var(--color-text-tertiary, #94A3B8); font-style: italic; }
.canm-dtc .meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px;
  font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }
.canm-dtc .meta b { color: var(--color-text-primary, #0F172A); font-weight: 600;
  font-family: 'JetBrains Mono', monospace; }
.canm-dtc .akc { display: grid; gap: 6px; justify-items: stretch; }
.canm-sysb { display: inline-block; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px;
  background: #EEF2F7; color: #475569; margin-left: 8px; vertical-align: 2px; }
.canm-dtcprazno { border: 1px dashed #BBE7CD; background: #F1FBF5; border-radius: 10px;
  padding: 18px; text-align: center; color: #166534; font-size: var(--fs-sm); }
.canm-dtcprazno .mdi { font-size: 26px; display: block; margin-bottom: 6px; color: #22A45D; }
.canm-pov { margin-top: 16px; }
.canm-pov h4 { font-size: var(--fs-micro); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-tertiary, #94A3B8); margin: 0 0 8px; display: flex;
  align-items: center; gap: 8px; font-weight: 600; }
.canm-pov h4::after { content: ""; flex: 1; height: 1px; background: var(--color-border, #E5E7EB); }
.canm-povr { display: flex; gap: 12px; align-items: baseline; padding: 7px 2px;
  border-bottom: 1px solid #F1F5F9; font-size: var(--fs-micro); }
.canm-povr .kd { font-family: 'JetBrains Mono', monospace; font-weight: 600; width: 64px;
  color: var(--color-text-secondary, #334155); }
.canm-povr .op { flex: 1; color: var(--color-text-secondary, #334155); }
.canm-povr .dt { font-family: 'JetBrains Mono', monospace; color: var(--color-text-tertiary, #94A3B8); }
.canm-povr .rj { color: #166534; background: #ECFDF3; border: 1px solid #BBE7CD;
  border-radius: 20px; padding: 2px 8px; }

/* Znak satelita — gornji DESNI kut karte. BEZ POZADINE (odluka 2026-08-22):
   ikona i brojke stoje direktno nad kartom, pa im citljivost drzi sjena, ne
   bijela plocica. Ikona je veca jer je sad nosi samu sebe. */
.satznak { position: absolute; top: 10px; right: 10px; z-index: 855;
  transition: right 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 2px; pointer-events: none; }
.satznak[hidden] { display: none; }
/* ⚠️ ZNAK STOJI DO LADICE, NE POD NJOM. Ladica je siroka `--drawer-w` i
   z-index 900 prema znakovih 855. Pomak visi o `.dpanel.open`, klasi same
   ladice; prijelaz je iste duljine da se krecu zajedno. */
.map-wrap:has(.dpanel.open) .satznak { right: calc(var(--drawer-w) + 10px); }
/* `scaleX(-1)` zrcali ikonu: MDI `satellite-variant` gleda desno, a znak stoji u
   DESNOM kutu — tako antena gleda u kartu, ne izvan nje.
   Dvije sjene: tamna daje dubinu, svijetla odvaja ikonu od tamne karte. */
.satznak .mdi { font-size: 39px; line-height: 1; transform: scaleX(-1); filter: drop-shadow(0 2px 4px rgba(15,23,42,0.45)) drop-shadow(0 0 3px rgba(255,255,255,0.85)); }
.satznak[data-s="dosta"]   .mdi { color: var(--green-text, #16A34A); }
.satznak[data-s="granica"] .mdi { color: var(--orange-text, #B45309); }
.satznak[data-s="nema"]    .mdi { color: var(--red, #EF4444); }
.satznak[data-s="nepoznato"] .mdi { color: var(--color-text-tertiary, #94A3B8); }
.satznak__b { display: grid; gap: 1px; justify-items: center; }
.satznak__r { display: flex; align-items: baseline; gap: 5px; }
/* Bez plocice tekst lezi na karti — bijeli obris ga drzi citljivim i nad
   tamnim poligonom i nad svijetlom ulicom. */
.satznak__r b { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm);
  font-weight: 700; color: var(--color-text-primary, #0F172A);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 1px 2px rgba(255,255,255,0.9); }
.satznak__r span { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.legenda { position: absolute; left: 10px; z-index: 850; width: 232px;
  bottom: calc(var(--bpanel-h, 0px) + 10px);
  transition: bottom 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: calc(100% - 20px);
  background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 10px; box-shadow: 0 4px 14px rgba(15,23,42,0.10); overflow: hidden; }
/* Skala boja legende. Imena su bila `.fsum__*` dok je legenda zivjela u kartici
   „Sažetak dana"; kartica i CIJELI `.fsum` sklop su uklonjeni 2026-08-22, pa su
   pravila presla na legendu. Vrijednosti su nepromijenjene. */
.legenda__skala { padding: 8px 11px 9px; }
.legenda__skala h6 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary, #94A3B8); margin-bottom: 5px; font-weight: 600; }
.legenda__skala .lrow2 { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); margin-bottom: 2px; }
.legenda__skala .sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* ⚠️ SLAGANJE MARKERA. Vozila i strelice smjera su OBA `maplibregl.Marker`,
   dakle apsolutno pozicionirani div-ovi u istom sloju — nije redoslijed slojeva
   nego DOM. MapLibre na `.maplibregl-marker` postavlja samo `position:absolute`,
   bez `z-index`, pa je slagao onaj tko je dodan kasnije: strelice nastaju pri
   crtanju rute, dakle POSLIJE vozila, i pokrivale su ga.
   Oba dobivaju IZRICIT `z-index`, jer se `auto` i `0` slazu po DOM-u i ishod bi
   opet visio o redoslijedu dodavanja. */
/* Oznaka izvora nacrtane rute: poravnano po cesti, ili sirove tocke i zasto. */
.ruta-izvor { position: absolute; bottom: 10px; left: 10px; z-index: 855;
  background: rgba(255,255,255,0.97); border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 999px; padding: 5px 12px; font-size: var(--fs-micro);
  color: var(--color-text-secondary, #475569); box-shadow: 0 6px 18px rgba(15,23,42,0.14); }
.ruta-izvor .mdi { color: var(--brand-primary, #1F4E8A); }
.ruta-izvor--sirovo { color: var(--orange-text, #B45309); }
.ruta-izvor--sirovo .mdi { color: var(--orange-text, #B45309); }
.ruta-izvor[hidden] { display: none; }

.mk-strelica { z-index: 1; }
/* Polaziste, odrediste i trenutna pozicija na ruti — nad strelicama, uz vozila. */
.mk-tocka    { z-index: 2; }
.mk-vozilo   { z-index: 2; }

/* Strelica smjera na ruti (prekoračenje) */
.spd-arrow { filter: drop-shadow(0 1px 2px rgba(15,23,42,0.45)); }

/* Naziv vozila ispod ikone na karti */
.veh-tag { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 3px);
  background: #fff; color: #0F172A; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 5px; padding: 1px 6px; font-size: var(--fs-micro); font-weight: 700; line-height: 1.35;
  white-space: nowrap; box-shadow: 0 2px 5px rgba(15,23,42,0.22); pointer-events: none; }

/* Cip uz vozilo od 23.09.2026. nosi TRI retka: vozilo i registracija, vozac,
   posada. Slaganje je stupac, pa `nowrap` iz `.veh-tag` vrijedi po retku.

   ⚠️ `je-mjeren` NIJE UKRAS. Odvaja ime koje je uredaj IZMJERIO (BLE oznaka u
   vozilu) od imena koje je PRETPOSTAVLJENO (nalog, zaduzenje). Bez te razlike
   ime bez putovanja izgleda kao covjek u autu — a tu zamjenu je Mladen vec
   triput prijavio kao kvar. Boja je jedina razlika koja stane u cip; rijeci
   stoje u `title` retka vozila. */
.veh-tag--stup { display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 2px 7px; }
.veh-tag__vozac { font-weight: 600; color: var(--color-text-secondary, #475569); }
.veh-tag__vozac.je-mjeren { color: var(--color-primary, #1F4E8A); font-weight: 700; }
.veh-tag__posada { font-weight: 500; color: var(--color-text-tertiary, #94A3B8); }
.veh-tag__posada.je-mjeren { color: var(--color-text-secondary, #475569); }
.veh-tag__brzina { font-weight: 600; color: var(--color-text-tertiary, #94A3B8); }
.veh-tag__na { font-weight: 500; font-style: italic; color: var(--color-text-tertiary, #94A3B8); }
/* Vozi bez GPS fixa (25.09.2026.) — boja pilule „za fakturiranje"/„nije
   dovršeno" (`--orange-text`): stanje koje traži pažnju, ne kvar. Ostaje i u
   sažetom obliku: bez nje ikona tvrdi poziciju koju nema. */
.veh-tag__gps { font-weight: 700; color: var(--orange-text, #B45309); }
.veh-tag__gps .mdi { font-size: 12px; }
/* Sazet oblik dok se natpisi sudaraju (vidi `slaziNatpise`): ostaju vozilo i
   vozac, jer je pitanje „ciji je ovaj natpis" tada vaznije od pojedinosti. */
.veh-tag--zbito .veh-tag__posada,
.veh-tag--zbito .veh-tag__brzina { display: none; }

/* Isti par u retku lijevog popisa: mjereno se vidi, pretpostavljeno je tiho. */
.vrow__zad.vrow__mjeren { background: rgba(31,78,138,0.10); color: var(--color-primary, #1F4E8A); }

/* ===== DONJI PANEL: detalji putovanja (3 taba) ===== */
.bpanel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 880;
  background: var(--color-surface-elevated, #FFFFFF); border-top: 1px solid var(--color-border, #E5E7EB);
  box-shadow: 0 -8px 24px rgba(15,23,42,0.10); display: none; flex-direction: column;
  transition: right 0.24s cubic-bezier(0.4,0,0.2,1); }
.bpanel.show { display: flex; }   /* vidljiv samo kad je odabrana ruta */
.bpanel.shift { right: var(--drawer-w); }
.bpanel__tabs { display: flex; align-items: center; border-bottom: 1px solid var(--color-border, #E5E7EB); flex-shrink: 0; background: var(--color-surface, #F8FAFC); }
/* ⚠️ TABOVI DONJEG PANELA SE NE MICU (03.09.2026.). Mladen: „ovi tabovi gore
   šetaju lijevo desno". Izmjereno na 1366x768, lijevi rub DRUGOG gumba:

       traka reprodukcije skrivena   740 px
       traka reprodukcije vidljiva   650 px   (−90)
       uz duze ime vozila u kontekstu 536 px  (−114)

   Oba mehanizma koja je prijava spominjala su stvarna, ali NIJEDAN nije uzrok:
   oba djeluju kroz `.tabs--panel > .tab { flex: 1 }`. Tabovi su se rastezali
   na preostalu sirinu, pa ih je svaki susjed koji naraste gurao. Ovdje traka
   nije cista traka tabova — u njoj su i kontekst i traka reprodukcije — pa
   tabovi idu po SADRZAJU i ostaju na lijevom rubu.

   ⚠️ `sinkTraku()` OSTAJE JEDINI PISAC vidljivosti trake reprodukcije. Mijenja
   se raspored, ne vlasnik odluke — dva pisca jednog `hidden` atributa ovdje su
   vec jednom bila greska. */
#bpanel .tabs--panel > .tab { flex: 0 0 auto; }
/* ⚠️ KONTEKST SE ODSIJECA, NE GURA. Puni tekst ide u `title` (postavlja ga
   `fillBPanel`), pa duze ime vozila ne mijenja raspored. */
.bpanel__ctx { margin-left: auto; padding: 0 8px 0 12px; font-size: var(--fs-micro);
  color: var(--color-text-tertiary, #94A3B8); display: flex; align-items: center; gap: 7px;
  max-width: 330px; overflow: hidden; white-space: nowrap; flex-shrink: 0; }
.bpanel__ctx b { font-family: 'JetBrains Mono', monospace; color: var(--color-text-secondary, #475569); font-size: var(--fs-sm); }
.bpanel__toggle { background: none; border: none; color: var(--color-text-secondary, #475569); font-size: 17px; cursor: pointer; padding: 6px 12px; }
/* Fiksna visina — panel ne skače pri promjeni taba (mjera: 2 reda beacona + napomena) */
.bpanel__body { padding: 10px 14px 12px; display: none; height: 140px; overflow-y: auto; }
.bpanel__body.active { display: block; }
.bpanel.collapsed .bpanel__body { display: none !important; }
.bpanel.collapsed .bpanel__toggle .mdi { transform: rotate(180deg); }

/* Tab 1: podaci o ruti */
.rt-grid { display: grid; grid-template-columns: 1.4fr 1.4fr repeat(4, 0.85fr); gap: 9px; align-items: stretch; }
.rt-cell { background: var(--color-surface, #F8FAFC); border: 1px solid var(--color-border, #E5E7EB); border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; justify-content: center; min-height: 104px; }
.rt-cell__lbl { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); display: flex; align-items: center; gap: 5px; }
.rt-cell__lbl .mdi { font-size: var(--fs-base); }
.rt-cell__val { font-size: var(--fs-base); font-weight: 700; margin-top: 2px; }
.rt-cell__val .mono { font-family: 'JetBrains Mono', monospace; }
.rt-cell__sub { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); line-height: 1.3; }
/* Klijent prepoznat iz geozone + provjera s radnim nalogom */
.rt-cell__client { font-size: var(--fs-sm); font-weight: 700; color: var(--brand-primary, #1F4E8A); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 2px 0 1px; }
.rt-cell__client .mdi { font-size: var(--fs-base); }
.geo-chip { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 999px; padding: 1px 6px; }
.geo-chip--ok { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.geo-chip--warn { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.geo-chip--none { background: #F1F5F9; color: #475569; }
.rt-cell--start { border-left: 3px solid var(--green, #16A34A); }
.rt-cell--end { border-left: 3px solid var(--red, #EF4444); }
.rt-cell--big .rt-cell__val { font-family: 'JetBrains Mono', monospace; font-size: 19px; }
/* ⚠️ DRUGI BROJ U ISTOJ PLOČICI (24.09.2026., „trajanje i prijeđeno u jednu"):
   manji je jer je trajanje glavni podatak, a put mu je mjera — dva jednaka
   broja jedan do drugoga ne bi se čitala kao jedna tvrdnja. */
/* ⚠️ KILOMETRI U DRUGOM RETKU (25.09.2026.). Stajali su uz trajanje, pa se „km"
   prelamao sam u sljedeći red i odvajao od broja. Blok drži broj i jedinicu
   zajedno, a trajanje ostaje glavni podatak. */
.rt-cell__uz { display: block; font-size: var(--fs-sm); color: var(--color-text-secondary, #475569); white-space: nowrap; }
/* ⚠️ IME NIJE BROJ: pločica „Posada" nosi tekst, pa ne uzima monospace ni 19px
   — ime u mono izgleda kao šifra. */
#rtVozac { font-family: 'Plus Jakarta Sans', sans-serif; font-size: var(--fs-base); }
#rtVozac.na { color: var(--color-text-tertiary, #94A3B8); font-weight: 400; }
.rt-cell__lbl { margin-bottom: 1px; }

/* Tab 2: vozači i putnici (beacon) */
.bcn-row { display: flex; align-items: center; gap: 9px; background: var(--color-surface, #F8FAFC); border: 1px solid var(--color-border, #E5E7EB); border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; }
.bcn-row__av { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-primary, #1F4E8A); color: #fff; font-size: var(--fs-micro); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bcn-row__av--pax { background: var(--color-text-tertiary, #94A3B8); }
.bcn-row__name { font-size: var(--fs-base); font-weight: 700; }
.bcn-row__meta { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.bcn-row__meta .mono { font-family: 'JetBrains Mono', monospace; }
.role-chip { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 2px 7px; }
.role-chip--drv { background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); }
.role-chip--pax { background: #F1F5F9; color: #475569; }
.bcn-row__rssi { margin-left: auto; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); flex-shrink: 0; }
.bcn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bcn-note { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); margin-top: 2px; }

/* Tab 3: klijent / radni nalog */
.wo-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 0.9fr 0.9fr auto; gap: 9px; align-items: stretch; }
.wo-badge { font-size: var(--fs-micro); font-weight: 700; border-radius: 999px; padding: 2px 8px; display: inline-block; }
.wo-badge--open { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.wo-badge--done { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.wo-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.wo-btn { display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 8px; padding: 7px 12px; font-family: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; border: 1px solid var(--color-border, #E5E7EB); background: #fff; white-space: nowrap; }
.wo-btn--primary { background: var(--brand-primary, #1F4E8A); border-color: var(--brand-primary, #1F4E8A); color: #fff; }

/* ===== DETALJI VOZILA (side drawer desno) ===== */
.dpanel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--drawer-w); z-index: 900;
  background: var(--color-surface-elevated, #FFFFFF); border-left: 1px solid var(--color-border, #E5E7EB);
  box-shadow: -10px 0 30px rgba(15,23,42,0.14); display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden; }
.dpanel.open { transform: translateX(0); visibility: visible; }
/* Kvačica za zatvaranje/otvaranje drawera na rubu karte */
.dpanel__handle { position: absolute; top: 50%; right: var(--drawer-w); transform: translateY(-50%);
  z-index: 899; width: 20px; height: 46px; border: 1px solid var(--color-border, #E5E7EB); border-right: none;
  border-radius: 8px 0 0 8px; background: #fff; color: var(--color-text-secondary, #475569);
  cursor: pointer; font-size: var(--fs-lg); display: none; align-items: center; justify-content: center;
  box-shadow: -3px 0 10px rgba(15,23,42,0.1); transition: right 0.24s cubic-bezier(0.4, 0, 0.2, 1); }
.dpanel__handle.show { display: flex; }
.dpanel__handle.collapsed { right: 0; }
.dpanel__head { background: linear-gradient(120deg, var(--brand-primary-dark, #0F2C4D), var(--brand-primary, #1F4E8A)); color: #fff; padding: 11px 13px; flex-shrink: 0; }
.dpanel__head__top { display: flex; align-items: center; gap: 8px; }
.dpanel__head__top .mdi-van-utility { font-size: 19px; color: var(--brand-secondary-light, #FCD34D); }
.dpanel__head h3 { font-size: var(--fs-md); font-weight: 700; }
.dpanel__head .plate { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: #CBD5E1; }
.dpanel__close { margin-left: auto; background: rgba(255,255,255,0.12); border: none; color: #E2E8F0; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: var(--fs-md); }
.dpanel__online { display: flex; align-items: center; gap: 5px; font-size: var(--fs-micro); font-weight: 600; margin-left: 8px; color: #86EFAC; }
.dpanel__online .dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 6px #22C55E; }
/* Vodoravni scroll u draweru ne smije postojati ni u jednom stanju. */
.dpanel__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 11px 13px; }

/* Playback kontrole */
.pb { display: flex; align-items: center; gap: 5px; background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 10px; padding: 3px 7px; }
/* `.pb` je `flex`, sto pobjeduje ugradenom `[hidden]` — ista zamka kao kartice. */
.pb[hidden] { display: none; }
.pb__btn { width: 28px; height: 28px; border-radius: 8px; border: none; background: none; color: var(--color-text-secondary, #475569); font-size: var(--fs-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pb__btn:hover { background: var(--color-border, #E5E7EB); }
.pb__btn--play { background: var(--brand-primary, #1F4E8A); color: #fff; }
.pb__speed { margin-left: 4px; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); font-weight: 700; color: var(--brand-primary, #1F4E8A); cursor: pointer; }
.pb__time { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }

/* Brzinomjer */
.speedo { display: flex; justify-content: center; margin: 2px 0 6px; }
.speedo text { font-family: 'JetBrains Mono', monospace; }

/* Info redovi */

/* Senzori grid */
.sens-label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); margin: 11px 0 6px; display: flex; align-items: center; gap: 6px; }
.sens-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sens { display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 8px; row-gap: 2px; background: var(--color-surface, #F8FAFC);
  border-radius: 9px; padding: 7px 9px; min-width: 0; }
.sens .mdi { grid-row: 1 / span 2; }
.sens .mdi { font-size: var(--fs-lg); color: var(--brand-primary, #1F4E8A); }
.sens__lbl { font-size: var(--fs-micro); color: var(--color-text-tertiary, #64748B); line-height: 1.2; min-width: 0; }
.sens__val { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-base); font-weight: 700; overflow-wrap: anywhere; word-break: break-all; line-height: 1.25; min-width: 0; }
/* Kartica preko obje kolone — za vrijednosti koje ne stanu u pola sirine (IMEI). */
.sens.sens--wide { grid-column: 1 / -1; }
.sens--warn { background: var(--orange-bg, #FEF3C7); } .sens--warn .mdi, .sens--warn .sens__val { color: var(--orange-text, #B45309); }

/* Lista CAN upozorenja */
.wrow { display: flex; align-items: flex-start; gap: 8px; border-radius: 9px; padding: 7px 9px; margin-bottom: 5px; font-size: var(--fs-sm); }
.wrow .mdi { font-size: var(--fs-lg); margin-top: 1px; }
.wrow--crit { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.wrow--warn { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.wrow b { font-weight: 700; }
.wrow__time { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); opacity: 0.75; flex-shrink: 0; }
.sens-label--alert { color: var(--red-text, #B91C1C); }
.sens-label--alert .wcount { background: var(--red, #EF4444); color: #fff; border-radius: 999px; padding: 0 6px; font-size: var(--fs-micro); }
.sens--bad { background: var(--red-bg, #FEE2E2); } .sens--bad .mdi, .sens--bad .sens__val { color: var(--red-text, #B91C1C); }
.sens--ok .sens__val { color: var(--green-text, #15803D); }

/* Akcije */
.dpanel__actions { display: flex; gap: 6px; padding: 10px 13px; border-top: 1px solid var(--color-border, #E5E7EB); flex-shrink: 0; }

/* ===== OSTALE STRANICE ===== */
.page { padding: 16px 20px; overflow-y: auto; height: 100%;
  display: flex; flex-direction: column; }

/* ⚠️ OMOTACI PODTABOVA MORAJU PRENIJETI VISINU. Izmjereno 2026-08-25 u pravom
   pregledniku: `#klZahtjevi` je bio visok 2554 px u prostoru od 1028, a
   `.wo-master__scroll` u njemu NIJE klizao — jer je omotac obican blok
   (`min-height: auto`) i lomi lanac `flex:1; min-height:0` izmedu `.page` i
   klizne zone.

   Posljedica: kliza KRIVI element. Popis raste preko ruba, pa s njim odlaze i
   prilijepljeno zaglavlje stupaca, cipovi i trazilica; `.page` nosi od pola do
   jednog i pol ekrana viska (izmjereno: 1550 px na zahtjevima, 522 na nalozima,
   466 na Pregledu, 46 na klijentima; na 1366×768 cak 3525 px).

   ⚠️ ISPRAVAK: prvo je ovdje pisalo da su ti redci NEDOHVATLJIVI. To NIJE tocno
   i nije bilo dokazano — `.page` ima `overflow-y:auto` i moze klizati. Mjerenje
   „pravim" kotacicem nije vrijedilo jer u ovom postavu ni `mouseWheel` ni
   `synthesizeScrollGesture` ne pomicu ni zonu za koju je izmjereno da kliza:
   instrument kojem nije provjerena nula ne dokazuje nista.

   ⚠️ DVA OBLIKA, DVA PRAVILA (pravilo 14 — nabrojani su SVI omotaci):
     • s vlastitom kliznom zonom (`.wo-master__scroll`, `.pg-kliz`) — treba im
       samo lanac visine, klizanje rjesava zona;
     • bez nje — klizu SAMI, inace im sadrzaj i dalje visi preko ruba.
   `#adminPage` nije u popisu: on JE `.page` i vec kliza (provjereno).

   Cuva `tests/browser/dohvatljivost.mjs`: vanjski spremnik ne smije imati sto
   za klizanje. Bez ovog pravila ta tvrdnja pada na sva cetiri ekrana. */
/* ⚠️ `:not([hidden])` NIJE UKRAS NEGO UVJET (dodano 03.09.2026.). Ovo su `#id`
   pravila s `display`, dakle specificnost 1,0,0 — jaca od svakog razreda. Da
   `[hidden]` ne nosi `!important`, sve bi ove plohe bile vidljive ODJEDNOM.
   Ovako pravilo ne visi o tom `!important`-u nego samo kaze kad vrijedi.

   Isti kvar je 03.09. stigao do produkcije preko `#atab-aizvjestaji` bez
   `.active`: Izvjestaji su bili vidljivi ispod karte, vozila i povijesti.
   Cuva `tools/stanje_ekrana_guard.py` (prije commita) i
   `tests/browser/jedan-vidljiv-ekran.mjs` (mjeri ISHOD u pregledniku). */
#klPregled:not([hidden]), #klZahtjevi:not([hidden]), #klNalozi:not([hidden]),
#klEkran:not([hidden]), #klVrste:not([hidden]), #naloziPane:not([hidden]) {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
#klVrste, #naloziPane { overflow: auto; }
/* ⚠️ KLIJENTI PRELAZE NA „SVAKA STRANA SVOJ KLIZAC" (03.09.2026.). Ekran je
   klizao CIJELI — nije imao nijedan vlastiti klizni okvir — pa je s njim
   odlazila i traka Sifrarnik/Operativa, i trazenje s cipovima, i zaglavlje
   tablice, i zaglavlje detalja klijenta. `.lijep` u detalju JE postojao, ali
   ljepljiv element ne moze ostati na ekranu kad mu okvir ode s njega.

   ⚠️ OBRAZAC SE PRENOSI, NE IZMISLJA: `.wo-master` / `.wo-master__scroll` iz
   radnih naloga, isti koji je vec presao u kartoteku.

   ⚠️ ZAGLAVLJA NISU LJEPLJIVA NEGO IZVAN KLIZNOG DIJELA — sto je jace: ono
   sto ne klizi ne moze ni otkliziti. Ljepljivo ostaje samo ondje gdje sadrzaj
   mora proci ISPOD njega (zaglavlje tablice, zaglavlje detalja). */
#klEkran { overflow: hidden; }
#klEkran > .kl-subtabs { flex-shrink: 0; }
/* ⚠️ `:not([hidden])` — isti razlog kao gore: bez njega bi sva tri dijela
   Klijenata bila vidljiva odjednom, i to bi vrijedilo samo zato sto `[hidden]`
   nosi `!important`. Pravilo ne smije visjeti o tudem `!important`-u. */
#klSif:not([hidden]), #klOper:not([hidden]), #klPosjete:not([hidden]) {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
#klSif > .kl-tools, #klOper > .kl-tools { flex-shrink: 0; }
#klPosjete > .rep-filter { flex-shrink: 0; }
#klPosjete > .rep-tbl-wrap { flex: 1; min-height: 0; overflow: auto; }
/* ⚠️ PREGLED IDE PRVI, bez obzira na redoslijed u markupu: njegovi tabovi
   ugoscuju SUSJEDNE okvire (`#klZahtjevi`, `#klNalozi`), a ti su u dokumentu
   iznad njega — pa bi bez ovoga tablica stajala nad KPI redom i trakom.
   Premjestanje cvora u JavaScriptu bilo bi stanje koje treba vracati; `order` je
   ista stvar bez stanja. */
/* ⚠️ `:not([hidden])` JE OVDJE ZBOG SPECIFICNOSTI, ne zbog skrivanja
   (03.09.2026.). `f619f2b` je grupno pravilo 33 linije iznad pojacao s
   `:not([hidden])` — i time ga podigao na (1,1,0), dakle IZNAD ovoga na
   (1,0,0), koje je do tada pobjedjivalo samo redoslijedom. `#klPregled` je
   tako dobio `flex: 1`, podijelio stranicu popola s `#klNalozi` i otvorio
   ~370-430 px praznine ispod trake tabova. Ista razina specificnosti vraca
   odluku kasnijem pravilu, a zastita iz `f619f2b` ostaje netaknuta.

   ⚠️ NE RJESAVATI BRISANJEM `:not([hidden])` GORE — ono je tamo zbog kvara s
   Izvjestajima koji je 03.09. stigao do produkcije. Namjera se vraca na istoj
   razini, ne uklanjanjem zastite.

   ⚠️ POJACANJE SPECIFICNOSTI NIJE BESPLATNO: doda li se selektoru `:not(…)`,
   klasa ili bilo sto, mora se proci SVAKO kasnije pravilo za isti `#id` i
   provjeriti nije li ono pobjedjivalo samo redoslijedom. Cuva
   `tools/css_prvenstvo_guard.py`. */
#klPregled:not([hidden]) { order: -1; flex: none; }
.page h1 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
/* ===== ADMIN PANELI (bivsi tabovi — navigaciju nosi lijevi izbornik) ===== */
.adm-body { display: none; }
.adm-body.active { display: block; }
.sa-badge { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--brand-secondary, #D99A18); color: var(--brand-primary-dark, #0F2C4D); border-radius: 999px; padding: 1px 6px; }
.sa-note { display: flex; align-items: center; gap: 9px; background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: 10px; padding: 9px 12px; font-size: var(--fs-sm); color: #92400E; margin-bottom: 12px; }
.sa-note .mdi { font-size: 17px; }
/* Organizacije: kartice */
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.org-card { background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; overflow: hidden; }
.org-card.cur { border-color: var(--brand-secondary, #D99A18); box-shadow: 0 0 0 2px rgba(217,154,24,0.18); }
.org-card__head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--color-border, #E5E7EB); }
.org-logo { width: 38px; height: 38px; border-radius: 9px; background: var(--brand-primary-dark, #0F2C4D); color: var(--brand-secondary-light, #FCD34D);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); font-weight: 800; flex-shrink: 0; }
.org-card__head h4 { font-size: var(--fs-base); font-weight: 700; }
.org-card__head .oib { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.org-card__head .mdi-dots-vertical { margin-left: auto; color: var(--color-text-tertiary, #94A3B8); cursor: pointer; font-size: 17px; }
.org-body { padding: 11px 13px; }
.org-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.org-stat { background: var(--color-surface, #F8FAFC); border-radius: 8px; padding: 6px 4px; text-align: center; }
.org-stat b { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-md); font-weight: 800; display: block; }
.org-stat span { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary, #94A3B8); font-weight: 600; }
.org-admin { display: flex; align-items: center; gap: 9px; background: var(--color-info-bg, #EEF2FF); border-radius: 9px; padding: 8px 10px; margin-top: 9px; }
.org-admin__i { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-primary, #1F4E8A); color: #fff; font-size: var(--fs-micro); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.org-admin b { font-size: var(--fs-base); display: block; }
.org-admin span { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.org-admin .mdi-email-outline, .org-admin .mdi-pencil-outline { margin-left: auto; color: var(--brand-primary, #1F4E8A); cursor: pointer; font-size: var(--fs-lg); }
.org-card__foot { display: flex; gap: 6px; padding: 10px 13px; border-top: 1px solid var(--color-border, #E5E7EB); }
.org-card__foot .btn { flex: 1; justify-content: center; font-size: var(--fs-sm); padding: 7px 8px; }
.plan-chip { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 999px; padding: 2px 7px; }
.plan-chip--pro { background: var(--brand-primary-dark, #0F2C4D); color: var(--brand-secondary-light, #FCD34D); }
.plan-chip--std { background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); }
.plan-chip--demo { background: #F1F5F9; color: #475569; }

/* ══ OSAM PROVJERA NA TERENU (docs/provjera_na_terenu.md) ═════════════════════
   Svaka tocka nosi GDJE se gleda i STO mora biti — bez toga je kvacica tvrdnja
   bez uputstva, a monter mora znati u koji zaslon Configuratora gleda. */
.pv-popis { max-height: 300px; overflow-y: auto; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 9px; padding: 4px; }
.pv-red { padding: 7px 8px; border-bottom: 1px dashed var(--color-border, #E5E7EB); }
.pv-red:last-child { border-bottom: none; }
.pv-red[data-blok="1"] { background: #FFFBEB; }
.pv-blok { margin-left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  border-radius: 4px; padding: 1px 5px; background: var(--red-bg, #FEE2E2);
  color: var(--red-text, #B91C1C); border: 1px solid #FCA5A5; }
.pv-gdje { font-size: 10.5px; color: var(--color-text-tertiary, #94A3B8);
  margin: 2px 0 4px 22px; line-height: 1.45; }
.pv-nap { width: calc(100% - 22px); margin-left: 22px; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 6px; padding: 4px 7px; font-family: inherit; font-size: 11px; }
/* Napomena je obavezna SAMO kad kvacica nije oznacena — obrub to kaze prije
   nego posluzitelj odbije. */
.pv-nap--treba { border-color: var(--orange, #F59E0B); background: #FFFBEB; }

/* ══ GEOZONA IZ RUTE (odluka 73) ═════════════════════════════════════════════
   ⚠️ Znacka ZONA nije ukras nego OZNAKA IZVORA: gornji red je INTERPRETACIJA
   (zona), donji je PODATAK (geokodirana adresa). Ista doktrina kao `.kt-src` u
   kartoteci — po oznaci se poslije presuduje. */
.src-zona { display: inline-block; margin-left: 5px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em; border-radius: 4px; padding: 1px 4px; vertical-align: middle;
  background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A);
  border: 1px solid #A7C4E7; }
/* Boravak u zoni — treci red na dolasku, ne plocica u traci. */
.rt-zoni { font-size: 10.5px; font-weight: 600; color: var(--color-text-secondary, #475569); }
.rt-zoni--na { color: var(--color-text-tertiary, #94A3B8); font-weight: 400; }
/* Natuknica se pokazuje na hover: bez nje nitko ne bi znao da je plocica
   klikabilna, a stalni gumb u plocici bi bio sum. */
.rt-cell--zona { cursor: pointer; position: relative; }
.rt-cell--zona:hover { background: var(--color-surface, #F8FAFC); }
.rt-cell__hint { position: absolute; top: 6px; right: 8px; font-size: 9.5px;
  color: var(--brand-primary, #1F4E8A); opacity: 0; transition: opacity .12s;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.rt-cell--zona:hover .rt-cell__hint { opacity: 1; }
/* ⚠️ PANEL JE NAD KARTOM, NE UZ NJU. Sirina rasporeda se ne mijenja, pa se karta
   ne mora ponovno crtati — `MAP.resize()` se NE zove i generacijska brana se ne
   dira. Panel uz kartu bi svaki put mijenjao platno i vratio nas na tu lekciju. */
/* ⚠️ MODAL, NE PREKRIVAC NAD KARTOM. Prekrivac je bio nedostupan: ladica vozila
   (`.vd-ft`) lezala je na plocici POLAZAK i mis nikad nije dosao do nje —
   izmjereno `elementFromPoint`-om u pravom Chromeu. Modal je iznad svega po
   konstrukciji. Karta u njemu je VLASTITA instanca; glavna se ne dira. */
/* ⚠️ Traka alata (uredivanje granice) stoji IZNAD obje kolone i zauzima
   cijeli red — karta ju je inace pokrivala (`inset: 0`). */
.gz-mod > .gz-mod__alat { grid-column: 1 / -1; }
.gz-mod { display: grid; grid-template-columns: 1fr 300px; gap: 12px;
  min-height: 420px; }
.gz-mod__mapa { position: relative; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 10px; overflow: hidden; min-height: 420px; }
/* Dvije karte, isti spremnik: modal „iz polaska putovanja" i uredivanje zone
   dijele raspored (`gz-mod`), pa dijele i pravilo. */
#gzMapa, #gzUrediMapa { position: absolute; inset: 0; }
/* Karta se nije otvorila — poruka NA MJESTU karte. Prazna ploha bez teksta je
   greska koju covjek ne moze prijaviti jer ne zna da je greska. */
.gz-mapa__pad { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 8px; text-align: center;
  padding: 0 18px; font-size: var(--fs-sm); color: var(--color-text-tertiary, #94A3B8);
  background: repeating-linear-gradient(45deg,#F8FAFC,#F8FAFC 12px,#EEF2F7 12px,#EEF2F7 24px); }
.gz-mapa__pad .mdi { font-size: 30px; opacity: 0.45; }
.gz-mod__frm { overflow-y: auto; max-height: 460px; }
.gz-ovl__p { font-size: 10.5px; color: var(--color-text-secondary, #475569);
  line-height: 1.5; margin-bottom: 10px; }
.gz-seg { display: flex; gap: 4px; }
.gz-seg span { flex: 1; text-align: center; font-size: var(--fs-sm); padding: 5px 6px;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px; cursor: pointer;
  background: #fff; }
.gz-seg span[data-on] { background: var(--brand-primary, #1F4E8A); color: #fff;
  border-color: var(--brand-primary, #1F4E8A); }
.gz-alat { display: flex; gap: 5px; padding: 6px; position: absolute; top: 8px; left: 8px;
  z-index: 5; background: #fff; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 9px; box-shadow: 0 6px 18px rgba(15,44,77,.14); }
.gz-alat button { border: 0; background: none; cursor: pointer; padding: 3px 5px;
  border-radius: 6px; color: var(--color-text-secondary, #475569); }
.gz-alat button[data-on] { background: var(--color-info-bg, #EEF2FF);
  color: var(--brand-primary, #1F4E8A); }
.gz-mlbl { position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 5;
  background: rgba(255,255,255,.94); border-radius: 8px; padding: 7px 9px;
  font-size: 10.5px; color: var(--color-text-secondary, #475569); line-height: 1.5; }
.gz-tiho { color: var(--color-text-tertiary, #94A3B8); font-size: 10.5px; }
.gz-brojka { font-size: var(--fs-sm); color: var(--color-text-secondary, #475569);
  background: var(--color-surface, #F8FAFC); border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 8px; padding: 7px 9px; margin-bottom: 9px; }

/* Kartoteka: lista vozila | detalji */
.kart { display: grid; grid-template-columns: 236px 1fr; gap: 14px; align-items: start; }
.kart-list { background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; overflow: hidden; }
/* Zaglavlje NOSI BROJ, i nije uppercase natpis: „Vozila (4)" kaze koliko ih je,
   „LISTA VOZILA" ne kaze nista sto se s ekrana ne vidi. */
.kart-list__head { padding: 11px 12px; border-bottom: 1px solid var(--color-border, #E5E7EB); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-primary, #0F172A); display: flex; align-items: center; gap: 8px; }
.kart-srch { padding: 9px 10px; border-bottom: 1px solid var(--color-border, #E5E7EB); position: relative; }
.kart-srch input { width: 100%; border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px; padding: 6px 8px 6px 27px; font-family: inherit; font-size: var(--fs-sm); }
.kart-srch .mdi { position: absolute; left: 18px; top: 15px; color: var(--color-text-tertiary, #94A3B8); font-size: 14px; }
.kart-fltr { display: flex; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--color-border, #E5E7EB); flex-wrap: wrap; }
.kart-fltr span { font-size: 10.5px; border: 1px solid var(--color-border, #E5E7EB); border-radius: 999px; padding: 2px 8px; color: var(--color-text-secondary, #475569); cursor: pointer; background: #fff; white-space: nowrap; }
.kart-fltr span[data-on] { background: var(--brand-primary, #1F4E8A); border-color: var(--brand-primary, #1F4E8A); color: #fff; }
/* ⚠️ TOCKA STANJA — DVIJE osi, ne jedna boja: „ima uredaj" i „javlja se" su
   razlicita pitanja s razlicitim postupkom (monter prema serviseru).
   „Pripremljen, nije montiran" NEMA svoju oznaku, jer se iz podatka ne moze
   izvesti — vidi `VehicleLive.ima_tracker`. */
.kart-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kart-dot[data-s="vozi"]  { background: var(--green, #16A34A); }
.kart-dot[data-s="stoji"] { background: #94A3B8; }
.kart-dot[data-s="tiho"]  { background: #fff; border: 2px solid var(--orange, #F59E0B); }
/* Plavi prsten: dodijeljen, ugradnja nije potvrdena. Prsten (ne puna boja) jer
   je stanje PRIVREMENO — ceka necije potvrde, ne servis. */
.kart-dot[data-s="pripremljen"] { background: #fff; border: 2px solid var(--brand-primary, #1F4E8A); }
.kart-dot[data-s="nema"]  { background: #CBD5E1; border: 1px solid #94A3B8; }
.kart-dot[data-s="alarm"] { background: var(--red, #EF4444); }
.kart-lf { padding: 9px 11px; border-top: 1px solid var(--color-border, #E5E7EB); font-size: 10.5px; color: var(--color-text-tertiary, #94A3B8); line-height: 1.6; }
.kart-list__head .mdi { margin-left: auto; font-size: var(--fs-lg); color: var(--brand-primary, #1F4E8A); cursor: pointer; }
.kv-row { padding: 9px 12px; border-bottom: 1px solid var(--color-border, #E5E7EB); cursor: pointer; display: flex; align-items: center; gap: 9px; }
.kv-row:last-child { border-bottom: none; }
.kv-row:hover { background: var(--color-surface, #F8FAFC); }
.kv-row.sel { background: var(--color-info-bg, #EEF2FF); box-shadow: inset 3px 0 0 var(--brand-primary, #1F4E8A); }
/* Ikona sjedi u ZAOBLJENOJ PLOCICI, ne gola na povrsini (mockup `.vr .ic`). */
.kv-row__ic { width: 30px; height: 30px; border-radius: 8px; background: #EEF2F7; color: var(--brand-primary, #1F4E8A); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.kv-row__ic .mdi { font-size: 16px; }
.kv-row__name { font-size: var(--fs-base); font-weight: 700; }
.kv-row__plate { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }

/* Detalji vozila (kartoteka) */
/* ⚠️ `clip`, NE `hidden` — i to je jedini razlog izmjene. `overflow: hidden`
   stvara SPREMNIK ZA SKROLANJE, pa se `position: sticky` unutar njega lijepi za
   NJEGA umjesto za pravi kliznik. Izmjereno: traka tabova kartoteke je s
   `hidden` otklizala s ekrana (top 168 → -432 pri skrolu od 600 px), iako je u
   stilu pisalo `sticky`. `clip` odsijeca jednako (zaobljeni kut ostaje), ali
   spremnik ne stvara. */
.kd { background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; overflow: clip; }
.kd__head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--color-border, #E5E7EB); }
.kd__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); display: flex; align-items: center; justify-content: center; font-size: 21px; }
.kd__head h2 { font-size: 18px; font-weight: 700; line-height: 1.15; }
/* Tablica je OMEDENI CIP, ne goli mono tekst (mockup `.kh .plate`). */
.kd__plate { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: #fff; border: 1px solid #CBD5E1; border-radius: 5px; padding: 1px 6px; letter-spacing: .04em; color: var(--color-text-primary, #0F172A); }
.kd__head h2 .status-pill { margin-left: 0; }
/* Preljev: radnje koje nisu medu tri primarne. „Rashoduj" je razoran i vizualno
   se razlikuje — jednoklikovni put do rashoda je greska koja ceka promasaj. */
.kd__more { position: relative; }
.kd__more__list { position: absolute; right: 0; top: calc(100% + 5px); min-width: 232px; background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 10px; box-shadow: 0 12px 30px rgba(15,44,77,.16); padding: 5px; z-index: 40; }
.kd__more__list button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; font-family: inherit; font-size: var(--fs-sm); color: var(--color-text-primary, #0F172A); padding: 7px 9px; border-radius: 7px; cursor: pointer; text-align: left; }
.kd__more__list button:hover { background: var(--color-surface, #F8FAFC); }
.kd__more__list button[data-razorno] { color: var(--red-text, #B91C1C); }
.kd__more__list button[data-razorno] .mdi { color: var(--red, #EF4444); }
.kd__more__sep { height: 1px; background: var(--color-border, #E5E7EB); margin: 4px 6px; }
.kd__head__actions { margin-left: auto; display: flex; gap: 7px; }
/* ⚠️ PODCRTA JE BILA NAVY, i to NIJE bio propust: uvedena je u 6af1f20 uz pisano
   obrazlozenje („zlatna je akcentna boja i sudara se s vlastitom upotrebom
   drugdje; aktivno stanje nije akcent nego polozaj"), i vjerno je slijedila
   `OSIRIS_NEO_kartoteka_mockup.html`, gdje `.tabs button.on` ima navy crtu.
   ⚠️ MLADENOVA ODLUKA 2026-08-28 JU UKIDA: jedan stil tabova u cijeloj
   aplikaciji, zlatna crta svugdje. Zato je i kartotecni mockup promijenjen —
   prvo mockup, pa aplikacija, inace razlika ostaje zauvijek. */
/* ⚠️ BROJAC POKAZUJE ONO STO CEKA RADNJU, nikad ukupan broj zapisa — inace je
   dekoracija. Nula se NE crta (prazna znacka je sum), a mjesto je REZERVIRANO od
   pocetka da se traka ne trza kad brojka dode kasnije (`.stab__count--rez`).

   ⚠️ 9.5px JE GOLI PIKSEL, I TO SVJESNO: ljestvica tokena zavrsava na
   `--fs-micro: 12px`, a znacka na tabu, oznaka izvora i legenda popisa trebaju
   manje od toga. Dodavanje `--fs-nano` je izmjena DIJELJENIH tokena, a ovaj
   zadatak je jedan ekran (pravilo opsega 3) — pa se odstupanje ZAPISUJE ovdje
   umjesto da se prosiruje ljestvica u prolazu. Uvede li se ikad `--fs-nano`,
   ova tri mjesta (`.stab__count`, `.kt-src`, `.kart-lf`/`.kart-fltr span`) su
   njegovi prvi potrosaci. */

/* ===== KARTOTEKA VOZILA (odluka 72) =========================================
   mockups/OSIRIS_NEO_kartoteka_mockup.html je obvezujuci za raspored i tekst.

   ⚠️ SVE NOVE KLASE NOSE PREDMETAK `kt`. Bez njega bi ih pogodilo golo globalno
   pravilo iz SPA-a — isto sto je 2026-08-22 nacrtalo okvir preko naslova CAN
   modala (`.pod`). Zamka u kartoteka.test.mjs to provjerava mehanicki. */

/* oznaka izvora — DIO VRIJEDNOSTI, ne ukras: po njoj se poslije presuduje */
.kt-src { font-size: 9.5px; letter-spacing: .03em; border-radius: 4px; padding: 1px 5px; margin-left: 5px; font-weight: 600; font-style: normal; border: 1px solid var(--ksb); background: var(--ksg); color: var(--ksc); }
.kt-src[data-i="CAN"]     { --ksg: #E9F6F4; --ksb: #A7D5CE; --ksc: #0F766E; }
.kt-src[data-i="GNSS"]    { --ksg: #EEF4FC; --ksb: #A7C4E7; --ksc: #1F4E8A; }
.kt-src[data-i="ručno"]   { --ksg: #F3F4F6; --ksb: #D1D5DB; --ksc: #4B5563; }
.kt-src[data-i="procjena"] { --ksg: #F5F0FD; --ksb: #C9B3F0; --ksc: #6D28D9; }
/* ⚠️ PETA OZNAKA (odluka 72, etapa 2). „iz unosa" NIJE mjerenje: broj ovisi o
   tome koliko su unosi potpuni. Boja je namjerno bliza rucnom unosu nego CAN-u. */
.kt-src[data-i="iz unosa"] { --ksg: #FEF6E7; --ksb: #F0D6AD; --ksc: #B45309; }

/* odometar: tri broja, nijedan izveden iz drugog */
.kt-odo { font-family: 'JetBrains Mono', monospace; font-size: 25px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.kt-odo small { font-size: 13px; font-weight: 500; color: var(--color-text-secondary, #475569); }
.kt-odo--na { color: var(--color-text-secondary, #475569); }
.kt-odo-s { font-size: 10.5px; color: var(--color-text-secondary, #475569); margin: 2px 0 9px; }
.kt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 8px; }
.kt-split > div { background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px; padding: 7px 9px; }
.kt-split .kt-k { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-secondary, #475569); }
.kt-split .kt-n { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; margin-top: 2px; }

/* rokovi — boja po hitnosti, ne po vrsti */
.kt-rok { display: grid; grid-template-columns: 20px 1fr auto; gap: 9px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--color-border, #E5E7EB); font-size: var(--fs-sm); }
.kt-rok:last-child { border-bottom: none; }
.kt-rok .mdi { color: var(--krc); font-size: 15px; }
.kt-rok .kt-d2 { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--color-text-secondary, #475569); }
.kt-rok .kt-b { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--krb); color: var(--krc); border: 1px solid var(--krl); white-space: nowrap; }
.kt-rok[data-r="crveno"] { --krc: #B91C1C; --krb: #FDEDEC; --krl: #F3C0BB; }
.kt-rok[data-r="zuto"]   { --krc: #B45309; --krb: #FEF6E7; --krl: #F0D6AD; }
.kt-rok[data-r="zeleno"] { --krc: #15803D; --krb: #E8F7EE; --krl: #B6E4C6; }
.kt-rok[data-r="sivo"]   { --krc: #64748B; --krb: #F1F5F9; --krl: #DDE3EB; }

/* zuta biljeska: sto ovo vozilo NE moze dati i zasto */
.kt-warn { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; padding: 10px 12px; font-size: var(--fs-sm); color: #78350F; line-height: 1.6; margin-bottom: 11px; }
.kt-warn b { color: #5C2A08; }
.kt-note { grid-column: 1 / -1; background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-left: 3px solid var(--brand-secondary, #D99A18); border-radius: 11px; padding: 11px 13px; font-size: var(--fs-sm); color: var(--color-text-secondary, #475569); line-height: 1.6; }
.kt-note b { color: var(--color-text, #0F172A); }

/* posteno prazno stanje: sto se ne vodi i sto bi trebalo da se vodi */
/* Padding je bio dvostruk prema mockupu, a ikona za trecinu veca. Prazno
   stanje nije istaknutije zato sto ima prostora oko sebe. */
.kt-prazno { background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; padding: 18px 16px; text-align: center; color: var(--color-text-secondary, #475569); font-size: var(--fs-sm); line-height: 1.65; }
.kt-prazno .mdi { font-size: 24px; color: var(--color-text-tertiary, #94A3B8); display: block; margin-bottom: 7px; }
/* ⚠️ NASLOV IMA VLASTITU KLASU. Dok je pravilo stajalo na golom `b`, pogadalo je
   i svaki `<b>` UNUTAR recenice — pa je jedna rijec padala u vlastiti red, veca i
   podebljana. Pravilo koje opisuje mjesto ne smije se vezati na oznaku koja se u
   tekstu pojavljuje i inace. */
.kt-prazno__t { color: var(--color-text, #0F172A); font-size: var(--fs-md); font-weight: 700; margin-bottom: 5px; }
/* Jedna recenica, JEDNA boja: bez `<code>` cipova i bez treceg tona u repu. */
.kt-prazno__p { margin: 0 auto; max-width: 62ch; color: var(--color-text-secondary, #475569); }
.kt-prazno__p + .kt-prazno__p { margin-top: 8px; }
.kt-prazno__p--meta { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }

/* ── ostecenja: master-detail, crtez s iglama (odluka 72, etapa 3b) ──── */
.kt-ost { display: grid; grid-template-columns: 322px 1fr; gap: 12px; align-items: start; }
.kt-shema { background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 11px; padding: 11px 13px; }
.kt-shema svg { width: 100%; height: auto; display: block; margin: 4px 0 2px; }
/* ⚠️ NOSITELJ INFORMACIJE JE KVACICA, prozirnost je pomocna: ispis je crno-bijeli,
   a 55 % i 100 % sivog se na laserskom pisacu ne razlikuju pouzdano
   (odluka Mladena 2026-08-22). */
.kt-pin { cursor: pointer; }
.kt-pin circle { stroke: #fff; stroke-width: 1.8; }
.kt-pin text { font-size: 8.5px; font-weight: 700; fill: #fff; text-anchor: middle; }
.kt-pin.sel circle { stroke: #0F2C4D; stroke-width: 2.6; }
.kt-pin[data-r] { opacity: .55; }
.kt-pin[data-r] .kt-kv { fill: #fff; font-size: 9px; }
.kt-leg { font-size: 10.5px; color: var(--color-text-secondary, #475569); margin-top: 6px; line-height: 1.7; }
.kt-leg span { display: inline-flex; align-items: center; gap: 5px; margin-right: 11px; }
.kt-leg i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.kt-ost-red { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-left: 4px solid var(--kob); border-radius: 11px; padding: 10px 12px; margin-bottom: 7px; cursor: pointer; }
.kt-ost-red[data-t="tesko"]   { --kob: #EF4444; }
.kt-ost-red[data-t="srednje"] { --kob: #F97316; }
.kt-ost-red[data-t="lako"]    { --kob: #EAB308; }
.kt-ost-red.sel { background: var(--color-info-bg, #EEF2FF); box-shadow: inset 3px 0 0 var(--brand-primary, #1F4E8A); }
.kt-ost-red .kt-nr { width: 26px; height: 26px; border-radius: 50%; background: var(--kob); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.kt-ost-red .kt-ttl { font-size: var(--fs-md); font-weight: 600; }
.kt-ost-red .kt-mt { font-size: 10.5px; color: var(--color-text-secondary, #475569); margin-top: 4px; display: flex; gap: 11px; flex-wrap: wrap; }
.kt-dbody { display: none; padding: 12px 13px 13px; background: var(--color-surface, #F8FAFC); }
.kt-dbody.on { display: block; }
.kt-det { background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 11px; overflow: hidden; }
.kt-deth { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-bottom: 1px solid var(--color-border, #E5E7EB); flex-wrap: wrap; }
.kt-cols { display: grid; grid-template-columns: 236px 1fr; gap: 11px; align-items: start; }

/* ── gume: dvije kartice setova i mreza dubina (odluka 72, etapa 3a) ─── */
.kt-setovi { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 12px; }
.kt-set { background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-left: 4px solid var(--kss); border-radius: 11px; padding: 11px 13px 12px; }
.kt-set[data-s="na"] { --kss: #15803D; }
.kt-set[data-s="skladiste"] { --kss: #94A3B8; }
.kt-set h4 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary, #475569); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.kt-set h4 .mdi { color: var(--brand-primary, #1F4E8A); font-size: 14px; }
.kt-set__st { margin-left: auto; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: #F1F5F9; color: var(--color-text-secondary, #475569); text-transform: none; letter-spacing: 0; }
.kt-set[data-s="na"] .kt-set__st { background: #E8F7EE; color: #15803D; }
/* ⚠️ `auto-fit`, NE `repeat(4,1fr)`: set smije imati 5 guma (rezerva), a cetiri
   stupca bi petu ćeliju prelomila u novi red i mreza bi izgledala pokvareno.
   Mockup je 2026-08-22 ispravljen na isto. */
.kt-dub { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 7px; margin: 9px 0 4px; }
.kt-dub > div { background: var(--color-surface, #F8FAFC); border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px; padding: 6px 4px; text-align: center; }
.kt-dub .kt-p2 { font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-secondary, #475569); }
.kt-dub .kt-mm { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; margin-top: 1px; }
/* Boje iz JEDNE konstante na posluzitelju (`GUMA_PRAG`) — sucelje ih ne prepisuje. */
.kt-dub > div[data-d="zuto"] .kt-mm { color: #B45309; }
.kt-dub > div[data-d="crveno"] .kt-mm { color: #B91C1C; }
.kt-dub > div[data-d="sivo"] .kt-mm { color: var(--color-text-tertiary, #94A3B8); font-weight: 400; }

/* ── analiza ──────────────────────────────────────────────────────────── */
.kt-anal { display: grid; grid-template-columns: 286px 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
.kt-oc { background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 13px; padding: 14px 15px 13px; text-align: center; }
.kt-ocl { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-secondary, #475569); font-weight: 600; }
.kt-oc svg { width: 100%; height: auto; margin: 2px 0 4px; }
.kt-ocf { border-top: 1px solid var(--color-border, #E5E7EB); padding-top: 9px; font-size: 10.5px; color: var(--color-text-tertiary, #94A3B8); line-height: 1.6; text-align: left; }
.kt-mv { background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 13px; padding: 13px 15px 12px; }
.kt-mvh { font-size: 14.5px; font-weight: 700; margin-bottom: 11px; }
.kt-mvf { font-size: 11px; color: #B45309; margin-top: 11px; line-height: 1.5; }
.kt-pnl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kt-p { border: 1px solid var(--color-border, #E5E7EB); border-radius: 11px; padding: 9px 11px 0; overflow: hidden; display: flex; flex-direction: column; }
.kt-ph { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); }
.kt-ph b { font-weight: 700; }
.kt-ph .kt-src { margin-left: auto; }
/* ⚠️ Boja strelice ide po ZNACENJU, ne po predznaku: +12 % km je neutralno,
   +6 % potrosnje je lose, −31 % prekoracenja je dobro. Zato `data-z`
   (znacenje: lose/dobro/nista), a NE `data-smjer`. */
.kt-d { font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; border-radius: 4px; padding: 1px 4px; }
.kt-d[data-z="lose"]  { color: #B91C1C; background: #FDEDEC; }
.kt-d[data-z="dobro"] { color: #15803D; background: #E8F7EE; }
.kt-d[data-z="nista"] { color: #64748B; background: #F1F5F9; }
.kt-d .mdi { font-size: 8px; }
.kt-po { font-size: 10.5px; color: var(--color-text-secondary, #475569); margin-top: 2px; }
.kt-pv { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; line-height: 1.1; }
.kt-pv .kt-pu { font-family: inherit; font-size: 11.5px; font-weight: 500; color: var(--color-text-secondary, #475569); }
.kt-pv--na { font-family: inherit; font-size: 14px; font-weight: 500; font-style: italic; color: var(--color-text-tertiary, #94A3B8); letter-spacing: 0; }
/* ⚠️ IME NOSI JEDNU STVAR. `kt-sp` je bila i krivulja i razmaknica u traci
   (`.kt-bar .kt-sp`), pa je `querySelector('.kt-sp')` u testu 2026-08-22 uhvatio
   PRAZNU razmaknicu i tvrdnja o prekidu crte je mjerila nista. Razmaknica je
   sada `kt-fill`. */
.kt-sp { display: block; width: calc(100% + 22px); margin: 2px -11px 0; height: 62px; }
.kt-pf { font-size: 10px; color: var(--color-text-tertiary, #94A3B8); border-top: 1px solid var(--color-border, #E5E7EB); padding: 5px 0 6px; margin-top: auto; font-family: 'JetBrains Mono', monospace; }
.kt-voz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.kt-vk { background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 11px; padding: 11px 13px 12px; }
.kt-lr { display: grid; grid-template-columns: 20px 1fr auto; gap: 9px; align-items: center; padding: 5px 0; }
.kt-mj { width: 20px; height: 20px; border-radius: 50%; background: #EEF2F7; color: var(--color-text-secondary, #475569); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.kt-lr:first-child .kt-mj { background: var(--brand-primary, #1F4E8A); color: #fff; }
.kt-im { font-size: var(--fs-sm); font-weight: 600; }
.kt-tr { height: 5px; border-radius: 3px; background: #F1F5F9; margin-top: 4px; overflow: hidden; }
.kt-tb { display: block; height: 100%; border-radius: 3px; }
/* ⚠️ Kilometraza NIJE ukras. Ljestvica bez nje je krivo tumacenje tocnog broja:
   gradska dostava uvijek gubi od Zagreba. */
.kt-vr { text-align: right; line-height: 1.25; }
.kt-vr b { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); }
.kt-vr span { display: block; font-size: 10px; color: var(--color-text-tertiary, #94A3B8); }
.kt-vf { border-top: 1px solid var(--color-border, #E5E7EB); margin-top: 8px; padding-top: 8px; font-size: 10.5px; color: var(--color-text-tertiary, #94A3B8); line-height: 1.5; }
.kt-dl { font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary, #475569); font-weight: 600; margin: 13px 0 7px; display: flex; align-items: center; gap: 6px; }
.kt-dl .mdi { color: var(--brand-primary, #1F4E8A); font-size: var(--fs-md); }

/* ── sirovi podaci (samo admin, samo citanje) ─────────────────────────── */
.kt-brojaci { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 11px; }
.kt-b { background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-left: 4px solid var(--brand-primary, #1F4E8A); border-radius: 9px; padding: 8px 10px 9px; }
.kt-b[data-w] { border-left-color: #B45309; }
.kt-b .kt-k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary, #475569); }
.kt-b .kt-n { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 700; margin-top: 2px; }
.kt-b .kt-s { font-size: 10px; color: var(--color-text-tertiary, #94A3B8); margin-top: 1px; }
.kt-rawtbl { background: #0F172A; border: 1px solid #1E293B; border-radius: 11px; overflow-x: auto; margin-bottom: 11px; }
/* ⚠️ Prva dva stupca nose DATUM I SAT (vidi `danSat`), pa su siri od ostalih. */
.kt-rlh, .kt-rr { display: grid; grid-template-columns: 96px 96px 40px 30px 30px 74px 74px 34px 32px 46px 32px 26px 42px 50px 44px 46px 40px 84px; gap: 5px; padding: 5px 10px; font-size: 10.5px; align-items: center; min-width: 1010px; }
.kt-rlh { background: #1E293B; color: #94A3B8; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid #334155; line-height: 1.3; align-items: end; }
.kt-rlh span:nth-child(n+3) { text-align: right; }
.kt-rlh span:last-child { text-align: left; }
/* ⚠️ 13 stupaca je iz ZAGLAVLJA zapisa, 4 su izvucena iz IO elemenata — i to
   se mora vidjeti, inace izgledaju kao ista vrsta podatka. */
.kt-iog { color: #7DD3A0; }
.kt-rr .kt-iog { color: #8FD9B4; }
.kt-rlh span:nth-child(14) { box-shadow: inset 1px 0 0 #2E4257; padding-left: 6px; }
.kt-rr span:nth-child(14) { box-shadow: inset 1px 0 0 #2E4257; padding-left: 6px; }
.kt-rr { color: #CBD5E1; border-bottom: 1px solid #172033; cursor: pointer; font-family: 'JetBrains Mono', monospace; }
.kt-rr span:nth-child(n+3) { text-align: right; }
.kt-rr:hover { background: #172033; }
.kt-rr.sel { background: #1D3557; color: #fff; box-shadow: inset 3px 0 0 #D99A18; }
.kt-rr .kt-t { color: #E2E8F0; }
.kt-rr[data-s="praznina"] .kt-t { color: #FCD34D; }
.kt-rr[data-s="odbaceno"] { color: #7F8EA3; }
.kt-rr[data-s="odbaceno"] .kt-t { color: #F87171; }
.kt-rr .kt-stn { text-align: left; }
.kt-rlf { padding: 7px 10px; font-size: 10.5px; color: #7DD3A0; background: #131C2E; display: flex; align-items: center; gap: 6px; min-width: 940px; }
.kt-rlf b { color: #A7E8C4; }
.kt-rlf[data-stop] { color: #FCD34D; }
.kt-rd { background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 11px; overflow: hidden; }
.kt-rdh { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--color-border, #E5E7EB); font-size: var(--fs-md); flex-wrap: wrap; }
.kt-rdb { padding: 11px 13px 13px; background: var(--color-surface, #F8FAFC); }
.kt-iot { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; overflow: hidden; font-size: var(--fs-sm); }
.kt-iot th { background: #F1F5F9; text-align: left; padding: 5px 9px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary, #475569); border-bottom: 1px solid var(--color-border, #E5E7EB); font-weight: 600; }
.kt-iot td { padding: 5px 9px; border-bottom: 1px solid #F1F5F9; }
.kt-iot tr:last-child td { border-bottom: none; }
.kt-iot .kt-na { color: var(--color-text-tertiary, #94A3B8); font-style: italic; }
.kt-iot tr[data-upit] td { background: #FBF7FF; }
.kt-iot .kt-mono { font-family: 'JetBrains Mono', monospace; }
.kt-iot .kt-nr { text-align: right; }
.kt-spr { display: grid; gap: 7px; }
.kt-z { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; border-radius: 9px; padding: 9px 11px; border: 1px solid var(--kzl); background: var(--kzb); color: var(--kzc); }
.kt-z[data-z="da"] { --kzb: #F1F8F4; --kzl: #C4E4D2; --kzc: #14532D; }
.kt-z[data-z="ne"] { --kzb: #F8FAFC; --kzl: #DDE3EB; --kzc: #334155; }
.kt-z .mdi { font-size: var(--fs-lg); line-height: 1.2; flex: none; }
.kt-z .kt-mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.kt-hex { margin: 0; background: #0F172A; color: #93C5FD; border-radius: 9px; padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.7; overflow-x: auto; white-space: pre-wrap; word-break: break-all; border: 1px solid #1E293B; }
.kt-tn { font-size: 11.5px; color: var(--color-text-secondary, #475569); background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; padding: 9px 11px; margin-top: 9px; line-height: 1.6; display: flex; gap: 8px; }
.kt-tn .mdi { color: var(--brand-primary, #1F4E8A); font-size: 15px; flex: none; }
.kt-bar { display: flex; gap: 7px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.kt-bar .kt-fill { flex: 1; }
.kt-meta { font-size: 11px; color: var(--color-text-secondary, #475569); }
.kt-chip { border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 600; border: 1px solid #DDE3EB; background: #F1F5F9; color: var(--color-text-secondary, #475569); white-space: nowrap; cursor: pointer; }
.kt-chip[data-on] { background: var(--color-info-bg, #EEF2FF); border-color: #A7C4E7; color: var(--brand-primary, #1F4E8A); }
.kt-chip[data-ok] { background: #E8F7EE; border-color: #B6E4C6; color: #15803D; cursor: default; }
.kt-chip[data-al] { background: #FDEDEC; border-color: #F3C0BB; color: #B91C1C; cursor: default; }

/* ===== OŠTEĆENJA ===== */
.dmg-layout { display: grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: start; }
/* Lijeva tablica */
.dmg-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dmg-tbl th { text-align: left; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); padding: 7px 8px; border-bottom: 1px solid var(--color-border, #E5E7EB); }
.dmg-tbl td { padding: 8px; border-bottom: 1px solid var(--color-border, #E5E7EB); cursor: pointer; }
.dmg-tbl tr:hover td { background: var(--color-surface, #F8FAFC); }
.dmg-tbl tr.sel td { background: var(--color-info-bg, #EEF2FF); }
.dmg-tbl tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--brand-secondary, #D99A18); }
.dmg-tbl .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.dmg-tbl .mono { font-family: 'JetBrains Mono', monospace; }
/* Desni master-detail */
.dmg-detail { background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB); border-radius: 11px; overflow: hidden; }
.dmg-detail__head { padding: 11px 13px; border-bottom: 1px solid var(--color-border, #E5E7EB); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dmg-detail__head h3 { font-size: var(--fs-md); font-weight: 700; }
.dmg-detail__head .dmg-card__cost { margin-left: auto; }
.dtbody { display: none; padding: 13px; }
.dtbody.active { display: block; }
.dmg-cols { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
/* Galerija slika oštećenja */
.dmg-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.dmg-gal__cell { border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; overflow: hidden; background: #fff; }
.dmg-gal__img { background: linear-gradient(135deg, #E2E8F0, #CBD5E1); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 22px; }
.dmg-gal__cap { padding: 5px 8px; font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.dmg-gal__cap .mono { font-family: 'JetBrains Mono', monospace; }
.dmg-gal__add { border: 1.5px dashed var(--color-border, #E5E7EB); border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--brand-primary, #1F4E8A); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; min-height: 100px; }
.dmg-gal__add .mdi { font-size: 22px; }
/* Napomena */
.note-lbl { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.note-lbl .mdi { font-size: var(--fs-md); color: var(--brand-primary, #1F4E8A); }
.note-area { width: 100%; min-height: 148px; resize: vertical; border: 1px solid var(--color-border, #E5E7EB); border-radius: 10px;
  padding: 11px 13px; font-family: inherit; font-size: var(--fs-base); line-height: 1.55; color: var(--color-text-primary, #0F172A);
  background: var(--color-surface, #F8FAFC); outline: none; }
.note-area:focus { border-color: var(--brand-primary, #1F4E8A); background: #fff; box-shadow: 0 0 0 3px rgba(31,78,138,0.08); }
.note-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.note-bar .spacer { flex: 1; }
.note-hint { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }
.note-hint.saved { color: var(--green-text, #15803D); font-weight: 600; }
/* ===== IZVJEŠTAJI ===== */
/* ⚠️ IZVJESTAJI PRELAZE NA „SVAKA STRANA SVOJ KLIZAC" (03.09.2026.) — treci
   ekran s istim kvarom, poslije Klijenata. Ekran nije imao nijedan vlastiti
   klizni okvir, pa je klizala STRANICA: s njom je odlazio lijevi meni
   (Kretanje, Stajanja, Geozone, Zbrojevi, Prekoracenja…), koji nije traka nego
   cijeli stupac i nista ga nije drzalo.

   ⚠️ `align-items: start` → `stretch`: sa `start` je svaka strana visoka
   koliko joj je sadrzaj, pa nema sto klizati u sebi. */
.rep { display: grid; grid-template-columns: 232px 1fr; gap: 14px; align-items: stretch;
  flex: 1; min-height: 0; }
/* ⚠️ `.active` NIJE UKRAS NEGO UVJET (ispravljeno 03.09.2026., prijavio
   Mladen: „kliknuo sam na trip i dolje mi se pojavilo Izvjestaji").

   Bez njega je ovo `#id` selektor specificnosti 1,0,0 — jaci i od
   `.adm-body { display: none }` (0,1,0) i od `.adm-body.active
   { display: block }` (0,2,0). `display: flex` je zato vrijedio UVIJEK, pa su
   Izvjestaji bili trajno vidljivi ISPOD karte, vozila, povijesti i Analize.

   S `.active` je 1,2,0: skrivanje pobjeduje dok ekran nije odabran, a kad jest,
   ovo pravilo pobjeduje `display: block`.

   ⚠️ `!important` NA `.adm-body { display: none }` NIJE RJESENJE — pregazio bi
   i `.adm-body.active`, pa se ne bi otvorio NIJEDAN ekran.

   ⚠️ ISPRAVAN OBRAZAC JE STAJAO DVIJE LINIJE DALJE, u istoj datoteci:
   `#modbody-park > #atab-avozila.adm-body.active` je isto napisan S `.active` i
   zato je radio. Ovo nije bilo novo pravilo nego nedosljednost s vlastitim.

   ⚠️ Cuva `tests/browser/jedan-vidljiv-ekran.mjs`: na svakom ekranu tocno
   JEDAN vidljiv `.adm-body`. Brana mjeri ISHOD (`getComputedStyle().display`),
   ne pravilo — pa hvata i sve buduce nacine da nesto ostane vidljivo. */
#atab-aizvjestaji.adm-body.active {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
/* Meni je dug i HOCE se skrolati — ali unutar sebe, ne odlaziti s ekrana. */
.rep-side { background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 12px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.rep-item { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: none; border: none; border-bottom: 1px solid var(--color-border, #E5E7EB); font-family: inherit; cursor: pointer; }
.rep-item:last-child { border-bottom: none; }
.rep-item:hover { background: var(--color-surface, #F8FAFC); }
.rep-item.active { background: var(--color-info-bg, #EEF2FF); box-shadow: inset 3px 0 0 var(--brand-secondary, #D99A18); }
.rep-item > .mdi { font-size: 19px; color: var(--brand-primary, #1F4E8A); flex-shrink: 0; }
.rep-item b { font-size: var(--fs-base); display: block; }
.rep-item span { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }
/* ⚠️ `clip`, NE `hidden` — treci put isti razred (vidi `.kd` i `.kl-det`).
   `overflow: hidden` stvara spremnik za skrolanje, pa se `position: sticky`
   unutar njega lijepi za NJEGA umjesto za pravi kliznik. Izmjereno 2026-08-28:
   s `hidden` je filtarska traka Izvjestaja otisla s ekrana (top 69 → −225 pri
   skrolu od 294 px) iako je u stilu pisalo `sticky`. `clip` odsijeca jednako
   (zaobljeni kut ostaje), spremnik ne stvara. */
/* ⚠️ `clip` → stupac s vlastitim klizacem (03.09.2026.). Biljeska ispod (uz
   `.rep-filter`) je bila tocna dok je klizala stranica; sada filtarska traka i
   zaglavlje izvjestaja stoje IZVAN kliznog dijela, pa se nemaju odakle
   odlijepiti. Ono sto ne klizi ne moze ni otkliziti — to je jace od `sticky`. */
.rep-main { background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0; }
.rep-main > .rep-filter, .rep-main > .rep-head, .rep-main > .izv-ftn { flex-shrink: 0; }
.rep-main > .rbody.active { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* ⚠️ TEK SAD `.tbl thead th` IMA ZA STO SE ZALIJEPITI. Do danas je bilo mrtvo
   slovo: `.rep-tbl-wrap` je imao `overflow: auto` BEZ granice visine, pa
   okomito nikad nije klizao (`scrollHeight - clientHeight = 0`, izmjereno
   2026-08-28). Sada je on klizni okvir, a traka je iznad njega i izvan njega —
   pa `top: 0` vise ne zavrsava POD trakom i mjerena visina trake nije
   potrebna. Mehanizam koji je stara biljeska najavljivala time otpada. */
.rep-main > .rbody.active > .rep-tbl-wrap { flex: 1; min-height: 0; }
.rep-filter { padding: 11px 13px; border-bottom: 1px solid var(--color-border, #E5E7EB); background: var(--color-surface, #F8FAFC); }
.rep-filter__row { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.rep-filter__row .spacer { flex: 1; }
.rep-filter label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); display: flex; flex-direction: column; gap: 3px; }
.rep-filter select, .rep-filter input[type=date] { border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px; padding: 6px 8px;
  font-family: inherit; font-size: var(--fs-sm); background: #fff; color: var(--color-text-primary, #0F172A); }
.rep-filter input[type=date] { font-family: 'JetBrains Mono', monospace; }
/* Zaglavlje kao na ispisu */
.rep-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 2px solid var(--brand-primary-dark, #0F2C4D); }
.rep-head__logo { font-size: var(--fs-base); font-weight: 800; letter-spacing: 0.08em; color: var(--brand-primary-dark, #0F2C4D); border: 2px solid var(--brand-primary-dark, #0F2C4D); border-radius: 7px; padding: 5px 9px; }
.rep-head__title h3 { font-size: var(--fs-md); font-weight: 800; letter-spacing: 0.04em; }
.rep-head__meta { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); margin-top: 1px; }
.rep-head__sum { margin-left: auto; display: flex; gap: 16px; text-align: right; }
.rep-head__sum div span { display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary, #94A3B8); font-weight: 600; }
.rep-head__sum div b { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-lg); font-weight: 800; }
.rbody { display: none; }
.rbody.active { display: block; }
/* ⚠️ Omotac se skrola u OBA smjera, i to je uvjet da sticky zaglavlje uopce
   radi: `position: sticky` se lijepi uz najblizi spremnik koji se skrola. Dok
   je ovdje stajao samo `overflow-x`, okomito se pomicala cijela stranica, pa
   je zaglavlje klizilo pod topbar, a tablica je rasla do dna dokumenta.
   Visinu postavlja `namjestiVisinuIzvjestaja()` iz stvarne pozicije omotaca —
   fiksni `calc(100vh - Npx)` se raspadne cim se filtri prelome u dva reda.

   ⚠️ DOPUNA 2026-08-26: klizanje omotaca je NUZAN, ali NE I DOVOLJAN uvjet. Dok
   je `.tbl` imao `overflow: hidden`, sticky ovdje NIJE radio ni s ispravnim
   omotacem — tablica je bila vlastito klizište koje se ne kliza. Ovaj je
   komentar dotad tvrdio da je uvjet ispunjen, a zaglavlje je svejedno odlazilo
   van. Drugi uvjet je sada na `.tbl` (`overflow: clip`). */
/* ═════ JEDAN KLIZNI OKVIR ZA DUGE TABLICE ═════════════════════════════════
   ⚠️ VISINA SE IZVODI, NE PISE. `namjestiVisineTablica()` je racuna iz stvarnog
   polozaja okvira: omotac zavrsava na dnu prozora, pa zaglavlje ostaje vidljivo
   (`.tbl thead th` je vec `position: sticky`), a klize TABLICA, ne stranica.
   Tvrdi broj (`max-height: 430px`, koliko je do 31.08.2026. imao
   `.canm-tbl__skrol`) tocan je na jednoj visini prozora i kriv na svakoj drugoj
   — na 1366×768 odsijece pola tablice. Brana `tools/tbl_skrol_guard.py` cuva da
   se ne vrati.

   ⚠️ Zaglavlje se lijepi tek KAD OKVIR IMA GRANICU VISINE. Bez nje se skrola
   cijela stranica i `sticky` je mrtvo slovo — sto je i pisalo uz izvjestaje. */
.tbl-skrol { overflow: auto; }
/* ⚠️ Tablica zahtjeva ima jedanaest stupaca i mora klizati vodoravno, isto kao
   nalozi — bez ovoga se broj zahtjeva prelama i hitnost se stisne. */
/* ⚠️ SELEKTOR PRATI SELIDBU OKVIRA (03.09.2026.): `.tbl-skrol` je ovdje
   uklonjen (jedan klizni okvir, ne dva), pa bi pravilo vezano uz njega ostalo
   bez cilja — a bez `min-width` se jedanaest stupaca prelama, tocno ono sto
   biljeska iznad brani. */
#klZahtjevi .tbl { min-width: 1120px; }
.rep-tbl-wrap { overflow: auto; }
.rep-tbl-wrap .tbl { min-width: 940px; }
.tocka-veza { color: var(--brand-primary, #1F4E8A); text-decoration: none; border-bottom: 1px dashed currentColor; }
.tocka-veza:hover { border-bottom-style: solid; }
.chip { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: var(--fs-micro);
  background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); white-space: nowrap; }

/* ===== ISPIS ===== */
/* Gumb „PDF" otvara ispis preglednika, pa stranica mora izgledati kao
   izvjestaj: bez navigacije, filtara i bocnog popisa, sto sire. */
@media print {
  .topbar, .page-head, .adm-tabs, .rep-side, .rep-filter, .bpanel, .login { display: none !important; }
  .rep { display: block; }
  .rep-main { border: none; border-radius: 0; }
  /* `!important` jer visinu postavlja JS kao INLINE stil, koji inace pobjeduje
     nad pravilima za ispis — PDF bi izasao odrezan na jednom ekranu. */
  .rep-tbl-wrap, .tbl-skrol { overflow: visible !important; max-height: none !important; }
  .rep-tbl-wrap .tbl { min-width: 0; font-size: 10px; }
  .rep-head { border-bottom: 2px solid #0F2C4D; }
  .soon::after { display: none; }
  /* ⚠️ OGRANICENJA IDU NA PAPIR. Fusnota je u `.rep-main`, a ne u `.rep-filter`
     koji se pri ispisu skriva — izvjestaj bez svojih ogranicenja je izvjestaj o
     kojem ce se prepirati, a papir je upravo ono sto netko drugi cita. */
  .izv-ftn { break-inside: avoid; }
  body { background: #fff; }
  thead { display: table-header-group; }   /* zaglavlje se ponavlja na svakoj stranici */
  tr { break-inside: avoid; }
}
/* ── Katalog izvjestaja (etapa 1): grupe, prigusena vrsta, definicija, ogranicenja ──
   ⚠️ NI JEDNA NOVA VRIJEDNOST. Sve je sastavljeno od postojecih tokena i
   postojecih idioma ovog ekrana: natpis grupe je isti oblik kao
   `.tenant-menu__label`, prigusenje je ista brojka kao `.soon` (0.55), brojke u
   praznom stanju su mono kao svugdje. Stil ovog ekrana je zakljucan (Mladen,
   2026-08-24) — sadrzaj dolazi iz mockupa, izgled s ekrana kakav je. */
.tv-logo { width: 190px; height: 96px; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface, #F8FAFC); color: var(--color-text-tertiary, #94A3B8);
  font-size: var(--fs-sm); overflow: hidden; }
.tv-logo img { max-width: 100%; max-height: 100%; }
.rep-grp { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8);
  padding: 9px 12px 3px; border-top: 1px solid var(--color-border, #E5E7EB); }
.rep-side .rep-grp:first-child { border-top: none; }
/* ⚠️ Prigusena je SAMO vrsta bez podataka. Vrsta koja ceka kod nije prigusena —
   ona ima vlastitu poruku i kaze koja ju etapa donosi. Prigusiti oboje jednako
   bila bi laz u oba smjera: jedno je poziv programeru, drugo poziv covjeku s
   Konfiguratorom (odluka Mladena 2026-08-24). Zato ovdje NEMA znacke „uskoro”:
   razlog nije vrijeme nego podatak, a razlog stoji u podnaslovu vrste. */
.rep-item--bez { opacity: 0.55; }
.izv-kv { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  margin-top: 11px; font-size: var(--fs-sm); color: var(--color-text-secondary, #475569); }
.izv-kv b { font-family: 'JetBrains Mono', monospace; color: var(--color-text-primary, #0F172A); }
.izv-def { font-size: var(--fs-sm); color: var(--color-text-secondary, #475569);
  display: flex; align-items: center; gap: 7px; }
.izv-def .mdi { color: var(--color-text-tertiary, #94A3B8); }
.izv-ftn { padding: 12px 14px 14px; border-top: 1px solid var(--color-border, #E5E7EB);
  font-size: var(--fs-sm); color: var(--color-text-secondary, #475569); }
.izv-ftn b { color: var(--color-text-primary, #0F172A); }
.izv-ftn ol { margin: 6px 0 0 19px; }
.izv-ftn li { margin-bottom: 4px; }
.rep-tbl-wrap .tbl th { position: sticky; top: 0; background: #fff; z-index: 2;
  box-shadow: inset 0 -1px 0 var(--color-border, #E5E7EB); }
.rep-tbl-wrap .tbl td { white-space: nowrap; }
/* ⚠️ ZBIRNA RUTA JE JEDINA CELIJA KOJA SE PRELAMA (07.09.2026.). Naziv rute
   raste s brojem stajanja i u jednom redu gura ostale stupce izvan viewporta;
   ostale celije (datumi, brojke, vozac) ostaju nowrap i uvijek stanu. Tri reda
   najvise — ostatak u `title`. `-webkit-box` je jedini raspoloziv nacin za
   rezanje po redcima u preglednicima koje podrzavamo. */
.rep-tbl-wrap .tbl td.zb-ruta { white-space: normal; overflow-wrap: anywhere;
  min-width: 260px; max-width: 46ch; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden; }
.rbody .tbl-note { padding: 0 14px 12px; }
.cli-chip { font-size: var(--fs-micro); font-weight: 700; background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); border-radius: 999px; padding: 1px 7px; }
.ov-chip { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); font-weight: 700; border-radius: 999px; padding: 1px 7px; color: #fff; }

/* ===== RADNI NALOZI (PCS obrazac) ===== */
/* Filter chipovi sa brojačima */
.wo-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.wchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border, #E5E7EB); background: #fff;
  border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-secondary, #475569); cursor: pointer; }
.wchip:hover { border-color: var(--brand-primary, #1F4E8A); color: var(--brand-primary, #1F4E8A); }
.wchip.sel { background: var(--brand-primary, #1F4E8A); border-color: var(--brand-primary, #1F4E8A); color: #fff; }
.wchip__n { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); font-weight: 800; background: var(--color-surface, #F8FAFC); color: var(--color-text-secondary, #475569); border-radius: 999px; padding: 0 6px; }
.wchip.sel .wchip__n { background: rgba(255,255,255,0.22); color: #fff; }
/* „Preko roka" NIJE status nego presjek — zato crveni obrub, a ne mjesto medu
   statusnim cipovima. Boja stoji i kad je brojka nula: cip koji nestaje mijenja
   sirinu trake pri svakoj promjeni i ne da se zapamtiti. */
.wchip--rok { border-color: var(--red-text, #B91C1C); color: var(--red-text, #B91C1C); }
.wchip--ned { border-color: var(--orange-text, #9A3412); color: var(--orange-text, #9A3412); }
.wchip--rok.sel { background: var(--red-text, #B91C1C); border-color: var(--red-text, #B91C1C); color: #fff; }
.wo-chips select, .wo-chips input[type=text] { border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: var(--fs-sm); background: #fff; }
.wo-chips .spacer { flex: 1; }
/* Master-detail */
/* Stranica naloga: sve stane u viewport — scrollaju samo tablica i detail */
#view-nalozi { overflow: hidden; }
#view-nalozi.active { display: flex; flex-direction: column; min-height: 0; }
#view-nalozi .page { display: flex; flex-direction: column; flex: 1; min-height: 0;
  height: calc(100vh - 52px); overflow: hidden; padding: 12px 16px; }
#view-nalozi .page-head { margin-bottom: 10px; }
#view-nalozi .page-head, #view-nalozi .wo-chips { flex-shrink: 0; }
#view-nalozi .page-head h1 { font-size: 20px; }
#view-nalozi .wo-chips { margin-bottom: 9px; }
.wo-split { display: grid; grid-template-columns: 1fr 560px; gap: 0; border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; overflow: hidden; background: #fff; flex: 1; min-height: 0; }
.wo-master { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
/* Traka za pretragu iznad tablice */
/* ⚠️ TRAKA S TRAZILICOM JE NAVY (mockup, 04.09.2026.) — gradijent ZRCALJEN
   prema heroju (315deg: tamno DESNO), pa se tamni krajevi obiju ploha nalaze
   u sredini i procjep prestaje biti procjep. Ista dva tona, nijedna nova boja. */
/* ⚠️ TRAKA SE PRELAMA, NE REZE (11.09.2026.). Do danas je bila jednoredna bez
   `flex-wrap`, pa je sadrzaj siri od panela jednostavno IZLAZIO iz nje — i to
   tiho, s kraja: prvo je nestajao CSV, pa gumb. Izmjereno kad je dodan „Novi
   nalog": traka 784 px, sadrzaj 870 px, a gumba nije bilo na ekranu.
   ⚠️ PRELAMANJE JE BOLJE OD SKUPLJANJA: `min-width: 0` na filtrima jest stalo u
   red, ali je na 1366x768 (prijenosnik koji `osiris.css` izricito mjeri) od
   „Sve kategorije" ostala samo strelica. Filtar bez natpisa nije filtar.
   ⚠️ DRUGI RED NASTAJE SAMO KAD TREBA — na sirokom panelu traka ostaje
   jednoredna i izgled je nepromijenjen. */
.wo-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 11px;
  border-bottom: 1px solid var(--brand-primary-dark, #0F2C4D);
  background: linear-gradient(315deg, #0F2C4D 0%, #1F4E8A 100%); flex-shrink: 0; }
/* Trazilica vise ne raste preko cijele sirine — do 560 px, skuplja se na uskom.
   ⚠️ SKUPLJA SE PRVA, PRIJE PRELAMANJA (25.09.2026., Mladen: „suzi searchbox da
   u headeru sve stane u jedan red"). S osnovicom 560 px traka je trazila ~1208
   px, a prostor na 1920 je 1104 — pa je prelamala i onda kad bi uz uzu
   trazilicu sve stalo. Osnovica 240 px: preglednik lomi red tek kad ni uz
   trazilicu od 240 px nema mjesta; do tada ona raste do 560 i ustupa prva. */
.wo-search__in { flex: 1 1 240px; max-width: 560px; display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px; padding: 6px 10px; }
/* Filtri i gumb na navy podlozi — ista receptura kao pilule u heroju:
   prozirno bijelo 12 %, obrub 22 %, tekst bijel. */
/* ⚠️ SKUPLJANJE FILTARA JE PROBANO I ODBACENO (11.09.2026.). `min-width: 0` na
   skupini i na biracima jest stalo u jedan red (filtri 425 → 244 px), ali je na
   1366x768 — prijenosniku koji `osiris.css` izricito mjeri — od „Sve
   kategorije" ostala SAMA STRELICA. Filtar bez natpisa nije filtar.
   ⚠️ I ne bi radilo uz prelamanje: preglednik prvo lomi red, pa unutar reda
   nista ne treba skupljati — dva mehanizma se iskljucuju. Zato traka PRELAMA
   (vidi `.wo-search`), a ovdje ostaje zateceno. */
.wo-search__f { display: inline-flex; gap: 8px; align-items: center; }
.wo-search select { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #fff; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 12.5px; max-width: 150px; }
.wo-search select option { color: var(--color-text-primary, #0F172A); background: #fff; }
.wo-search .chk { color: rgba(255,255,255,.88); font-size: 12.5px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; }
.wo-search .chk input { accent-color: var(--brand-secondary, #D99A18); }
/* ⚠️ `white-space: nowrap` I `flex: none`: bez njih se „Novi nalog" na uskom
   panelu prelomi u DVA REDA i traka naraste — a pojas iznad tablice je mjeren i
   cuvan (`pojas-tabovi-tablica.mjs`). Sirinu ustupaju filtri, ne gumbi: filtar
   sa skracenim natpisom i dalje radi, gumb u dva reda diže cijeli red. */
.wo-search .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22);
  color: #fff; padding: 6px 10px; font-size: var(--fs-sm);
  white-space: nowrap; flex: none; }
.wo-search .btn:hover { background: rgba(255,255,255,.20); }
.wo-search__in .mdi { font-size: var(--fs-lg); color: var(--color-text-tertiary, #94A3B8); }
.wo-search__in input { flex: 1; border: none; outline: none; font-family: inherit; font-size: var(--fs-base); background: none; }
.wo-search__in .mdi-close-circle { cursor: pointer; }
.wo-search__res { font-size: var(--fs-micro); color: rgba(255,255,255,.75); white-space: nowrap; }
/* ⚠️ Zaglavlje izvan klizne zone (mockup, 04.09.2026.): `.tbl-x` nosi OBA
   stola i klize samo VODORAVNO; okomito klize `.wo-master__scroll` ispod
   zaglavlja. Fiksni raspored + zajednicki colgroup = iste sirine oba stola. */
.tbl-x { flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow-x: auto; overflow-y: hidden; }
.tbl-x .tbl { min-width: 1160px; table-layout: fixed; width: 100%; }
.tbl-h { flex: none; }
.tbl-b { border-top: 0; }
/* ⚠️ Okomiti klizac POCINJE ISPOD ZAGLAVLJA (mockup, 04.09.2026.): zaglavlje
   je izvan ove kutije, u `.tbl-x` iznad. Vodoravno klize `.tbl-x` — obje osi
   na istoj kutiji dale bi dvije trake jednu u drugoj. */
.wo-master__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; }
/* ⚠️ DEVET STUPACA MORA KLIZATI, NE STISKATI SE (03.09.2026.). Obrazac je
   prenesen iz izvjestaja (`.rep-tbl-wrap .tbl`), ne izmisljen; 1120 px je
   vrijednost iz mockupa i devet stupaca ga stvarno popuni (zbroj: 1121 px).

   ⚠️ ISPRAVAK OBRAZLOZENJA (isti dan): ovdje je pisalo da se bez `min-width`
   „prelama zaglavlje". IZMJERENO — ne prelama se, i NE MOZE: `.tbl th` nosi
   `white-space: nowrap`. Ono sto se doista dogadja je da CELIJE rastu redak, a
   stupac hitnosti se stisne:
       1120 px → redak  55 px, hitnost 78 px
        820 px → redak  74 px, hitnost 78 px
        600 px → redak 133 px, hitnost 57 px
   `min-width` dakle cuva VISINU RETKA I SIRINU HITNOSTI. Cuva ju
   `tests/browser/sirina-tablica.mjs`, i to na sirini hitnosti — visina ovisi o
   duljini naziva u tom tenantu. Pogresno obrazlozenje je gore od nikakvog: po
   njemu bi sljedeci citatelj cuvao krivu stvar. */
/* ⚠️ 1120 -> 1160 i `table-layout: fixed` s colgroupom (mockup, 04.09.2026.):
   sirine dolaze iz `WO_STUPCI_DEF.sir`, istog izvora za OBA stola. `sticky`
   vise ne treba — zaglavlje je izvan klizne zone — ali ne skodi. */
.wo-master .tbl thead th { background: var(--brand-primary-dark, #0F2C4D); }
.wo-master .tbl thead tr { background: var(--brand-primary-dark, #0F2C4D); }
.wo-master .tbl th { color: #CBD5E1; border-bottom: none; }
/* ⚠️ ODABRANI RED JE TAMNIJI (Mladen, 10.09.2026.: „odabrani red je slabo
   uocljiv, treba biti tamniji"); vrijednosti iz
   `mockups/OSIRIS_NEO_tablica_citljivost_mockup.html`.
   ⚠️ `tr.sel:hover` MORA BITI SPECIFICNIJI od `tr.sel` — (0,4,2) prema (0,3,2)
   — inace hover nad odabranim redom ne radi NISTA. Do danas i nije radio,
   upravo iz tog razloga u obrnutom smjeru. Ne rjesava se s `!important`. */
.wo-master .tbl tr.sel td { background: #D3E2F5; box-shadow: inset 3px 0 0 var(--brand-secondary, #D99A18); }
.wo-master .tbl tr.sel:hover td { background: #C3D7F0; box-shadow: inset 3px 0 0 var(--brand-secondary, #D99A18); }
.wo-master .tbl td { cursor: pointer; }
.wo-id { display: flex; align-items: center; gap: 8px; }
.wo-id__i { width: 30px; height: 30px; border-radius: 8px; background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); flex-shrink: 0; }
.wo-id b { font-size: var(--fs-base); display: block; }
.wo-id span { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
/* Status badge (PCS boje) */
.st { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.st::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.st--0 { background: #F1F5F9; color: #475569; }
.st--1 { background: #FEF9C3; color: #A16207; }
.st--2 { background: #EDE9FE; color: #6D28D9; }
.st--3 { background: #DBEAFE; color: #1D4ED8; }
.st--4 { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.st--5 { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.st--6 { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.prio { font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; border-radius: 999px; padding: 2px 7px; }
.prio--hitno { background: var(--red, #EF4444); color: #fff; }
.prio--norm, .prio--normalna { background: #F1F5F9; color: #475569; }
/* ⚠️ `.prio--visoka` I `.prio--niska` NISU POSTOJALE (dodano 02.09.2026.).
   Tablica ih je ispisivala kao GOLI TEKST, a detalj ih nije pokazivao uopce —
   gledao je samo `hitno`. Nalog s visokim prioritetom time je izgledao isto
   kao normalan, a prioritet je jedina stvar na nalogu zbog koje dispecer
   mijenja raspored dana. Vrijednosti su prepisane iz mockupa, ne izvedene. */
.prio--visoka { background: #FEF3C7; color: #92400E; }
.prio--niska { background: #F8FAFC; color: #94A3B8; }
/* Detail panel */
.wo-side { border-left: 1px solid var(--color-border, #E5E7EB); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* ⚠️ `.wo-side__tabs` UKLONJEN 01.09.2026. Traka Pregleda naloga presla je na
   zajedničku `.tabs tabs--kliz`; pravilo bez korisnika je mrtvi sloj. */
/* Aktivni tab detalja nosi ISTU boju kao odabrani red tablice — oko veze
   „ovaj red ↔ ovaj detalj" bez citanja (vrijedi u svim master-detailima).
   Vrijednosti su u zajednickoj deklaraciji uz `.tabs`. */
/* ⚠️ STARI STEPPER UKLONJEN 02.09.2026. (`.steps` / `.step` / `.step__dot` /
   `.step__lbl`). Dvije izvedbe istog toka statusa su isti razred kvara kao
   tri izvedbe CAN stanja; detalj i zaglavlje modala sada crta `wmSteps`, a
   razlika je SAMO paleta (`.wm-steps--svijetli`).

   ⚠️ USPUT JE TO I BIO UZROK STISNUTOG STEPPERA. `.steps` je bio
   `display: flex`, a od 02.09. je u njemu stajao JEDAN `<ol class="wm-steps">`
   bez `flex: 1` — pa se `<ol>` sirio po SADRZAJU (~250 px) umjesto po panelu.
   `width: 100%` preko toga bila bi zakrpa; uzrok je bio omotac koji vise nema
   posla. */
/* ⚠️ ISTI RASPORED, DVIJE SIRINE — ne drugi markup (02.09.2026.).
   Detalj je ~570 px, modal 1240 px; mreza od 12 stupaca u panelu MORA pasti na
   punu sirinu. To radi JEDNO pravilo nad istim HTML-om, jer bi druga struktura
   za isti sadrzaj bila upravo ono sto ovaj krug uklanja.

   ⚠️ `container-type` je PROVJEREN U PRAVOM CHROMEU (`tests/browser/`), ne
   pretpostavljen: mjerenje je u izvjestaju runde. Zamjena bi bio razred na
   korijenu panela, ali nije bila potrebna. */
.wo-side { container-type: inline-size; container-name: wopanel; }

/* Vrijednost u nacinu `citaj` — isti redak kao `<input>`, bez okvira. */
.wm-ro { font-size: var(--fs-sm); color: var(--color-text, #0F172A); padding: 6px 0;
  min-height: 20px; line-height: 1.45; word-break: break-word; }
/* ⚠️ BOJA, NE VELICINA. 12.09.2026.: pritužba „kao da je smanjen font u modalu"
   imala je uzrok u zoomu preglednika, ne u kodu — pa se veličine NE diraju.
   Kontrast ne ovisi o zoomu i zato ostaje: `#94A3B8` daje 2,56:1 na bijelom,
   ispod praga 4,5. „nije upisano" je TVRDNJA (podatka nema), ne ukras, pa se
   mora moci procitati; tisinu nosi kurziv, ne slabiji kontrast.
   ⚠️ `--color-text-muted` NE POSTOJI — ni ovdje, ni u PWA, ni u serviseru. Svih
   9 upotreba zivi samo od pricuvne vrijednosti, dakle to je ukopan `#94A3B8` s
   imenom koje obecava token; ovo su bile dvije od njih, ostaje ih sedam.
   `--color-text-tertiary` (#64748B, 4,76:1) je stvarno definiran (:root, gore). */
.wm-ro .na { color: var(--color-text-tertiary, #64748B); font-style: italic; }
/* ⚠️ DUGACAK KLIJENTOV TEKST SE POMICE, NE REZE. Preneseno s uklonjenog
   `.izvor__t p`: odrezana rijec je izgubljen podatak, a prelomi redaka koje je
   klijent upisao su dio onoga sto je rekao — zato `pre-line`. */
.wm-ro--tekst { white-space: pre-line; max-height: 140px; overflow-y: auto;
  scrollbar-width: thin; }

@container wopanel (max-width: 720px) {
  /* Nijedno polje ne stoji u dva stupca — sve preko cijele sirine. */
  .wm-g > .wm-f { grid-column: 1 / -1; }
  .vrsta-kartice { grid-template-columns: 1fr; }
  /* ⚠️ TRAKA OSTAJE JEDAN RED, BEZ KLIZANJA: u panelu se pokazuje IKONA i
     znacka, natpis nosi `title`/`aria-label`. Klizanje je bilo uzrok
     odrezanog „Rute" na snimci — traka koja se pomice skriva postojanje
     tabova, a znacka je upravo ono sto kaze „ima li ovdje icega". */
  #woTabs .tab__lbl { display: none; }
  #woTabs .tab { padding: 9px 10px; }
}

/* Detail body */
/* ⚠️ Spremnik tijela nosi skrol; pojedina tijela su njegova djeca. Stepper i
   traka tabova stoje IZVAN njega — tok statusa ne smije odskrolati. */
.wo-side__tijela { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wo-side__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 13px 15px; }
.wo-side__body.pad0 { padding: 0; }
.wo-meta { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.wo-meta .mdi { font-size: var(--fs-lg); color: var(--color-text-secondary, #475569); cursor: pointer; }
.wo-meta .spacer { flex: 1; }
/* Birac vrste — kartice, kao u PCS modalu. */
.vrsta-kartice { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.vrsta { border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; padding: 10px;
  cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.vrsta:hover { border-color: var(--brand-primary, #1F4E8A); }
.vrsta.on { border-color: var(--brand-primary, #1F4E8A); background: var(--color-info-bg, #EEF2FF); }
.vrsta .mdi { font-size: 19px; color: var(--brand-primary, #1F4E8A); }
.vrsta b { font-size: var(--fs-base); }
.vrsta span { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
/* ⚠️ Zakljucana vrsta NOSI RAZLOG. Onemogucen gumb bez objasnjenja izgleda
   kao kvar, pa korisnik pokusava ponovno. */
.vrsta-zakljucana { display: flex; gap: 9px; align-items: flex-start; padding: 10px;
  border: 1px dashed var(--color-border, #E5E7EB); border-radius: 9px;
  background: var(--color-surface, #F8FAFC); }
.vrsta-zakljucana .mdi { font-size: 17px; color: var(--color-text-tertiary, #94A3B8); }
.vrsta-zakljucana span { display: block; font-size: var(--fs-micro);
  color: var(--color-text-secondary, #475569); margin-top: 2px; }
.visestruko { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px; }
.kvacica { display: flex; align-items: center; gap: 6px; font-size: var(--fs-base); cursor: pointer; }
.hint-uvjet { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); font-weight: 400; }
.hint-uvjet.trazi { color: var(--orange-text, #9A3412); font-weight: 600; }
/* Popunjen obrazac u detalju — oznake iz sheme, nikad sirovi kljucevi. */
.ob-red { display: flex; gap: 10px; padding: 5px 0; border-top: 1px solid var(--color-border, #E5E7EB); }
.ob-red:first-child { border-top: 0; }
.ob-red .ob-oznaka { flex: 0 0 42%; color: var(--color-text-secondary, #475569); font-size: var(--fs-base); }
/* Redak je monospace i sitan; gumb za ispis vraca se na tekst sucelja. */
.wo-meta .wo-ispis { font-family: 'Plus Jakarta Sans', sans-serif; font-size: var(--fs-sm); padding: 5px 10px; }
.wo-meta .wo-ispis .mdi { font-size: var(--fs-base); color: inherit; }
.wo-title { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.wo-title__i { width: 42px; height: 42px; border-radius: 11px; background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
.wo-title h2 { font-size: 17px; font-weight: 700; line-height: 1.2; }
.wo-title p { font-size: var(--fs-base); color: var(--color-text-secondary, #475569); }
/* Sekcije (PCS: naslov s ikonom + grid polja) */
.sec { margin-bottom: 13px; }
.sec__h { display: flex; align-items: center; gap: 7px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary, #475569); padding-bottom: 6px; border-bottom: 1px solid var(--color-border, #E5E7EB); margin-bottom: 9px; }
/* ⚠️ `>` , NE POTOMAK — i to je popravak, ne kozmetika (31.08.2026.).
   Kao selektor potomka ovo je pravilo doseglo i ikonu UNUTAR gumba u zaglavlju
   odjeljka: gumb „Novi model" (`btn btn--sm btn--primary`) dobio je navy `+`
   na navy podlozi. Izmjereno u pregledniku: veliki gumb rgb(255,255,255),
   mali rgb(31,78,138) — dakle Mladenov nalaz („gore bijeli +, dolje neka druga
   boja") NIJE bio opticka varka nego ovo pravilo.
   ⚠️ Ne rjesava se dopisivanjem jaceg pravila — to bi bio jos jedan izvor, a
   upravo ih ukidamo. Rjesava se time da pravilo prestane dosezati tamo gdje mu
   nije mjesto. */
.sec__h > .mdi { font-size: var(--fs-lg); color: var(--brand-primary, #1F4E8A); }
.sec__h .right { margin-left: auto; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-text-tertiary, #94A3B8); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.f1 { display: grid; gap: 10px; }
.fi label { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); margin-bottom: 2px; }
.fi div { font-size: var(--fs-base); font-weight: 600; }
.fi div.mono { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-base); }
.fi div.na { color: var(--color-text-tertiary, #94A3B8); font-weight: 400; }
/* Obojene kartice sekcija (PCS žuta / ljubičasta) */
.card-y { background: #FFFBEB; border: 1px solid #FDE68A; border-left: 3px solid #D99A18; border-radius: 10px; padding: 11px 13px; margin-bottom: 12px; }
.card-p { background: #F5F3FF; border: 1px solid #DDD6FE; border-left: 3px solid #7C3AED; border-radius: 10px; padding: 11px 13px; margin-bottom: 12px; }
.card-y .sec__h, .card-p .sec__h { border-bottom: none; padding-bottom: 4px; margin-bottom: 7px; }
.card-y .sec__h > .mdi { color: #B45309; } .card-y .sec__h { color: #92400E; }
.card-p .sec__h > .mdi { color: #6D28D9; } .card-p .sec__h { color: #5B21B6; }
/* QR blok (PCS) */
.qr-box { display: flex; align-items: center; gap: 12px; background: var(--color-info-bg, #EEF2FF); border: 1px solid #C7D2FE; border-radius: 11px; padding: 12px; margin-bottom: 13px; }
.qr-img { width: 62px; height: 62px; border-radius: 8px; background: #fff; border: 1px solid var(--color-border, #E5E7EB); display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--brand-primary-dark, #0F2C4D); flex-shrink: 0; }
.qr-box b { font-size: var(--fs-base); display: block; color: var(--brand-primary, #1F4E8A); }
.qr-box p { font-size: var(--fs-sm); color: var(--color-text-secondary, #475569); margin: 2px 0 4px; }
.qr-box code { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); background: #fff; border: 1px solid var(--color-border, #E5E7EB); border-radius: 5px; padding: 2px 6px; }
.qr-box__act { margin-left: auto; display: flex; flex-direction: column; gap: 6px; }
/* Footer akcije */
.wo-side__foot { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-top: 1px solid var(--color-border, #E5E7EB); background: var(--color-surface, #F8FAFC); flex-shrink: 0; }
/* ⚠️ GUMBI SE NE STISKU I NE LOME U DVA RETKA (12.09.2026., Mladen: „sad mi je
   u radnim nalozima dolje zbrka"). `.btn` nema `white-space: nowrap`, a djeca
   flexa nose zadani `flex-shrink: 1` — pa je „Pregled ispisa" stajao u DVA
   retka i podnozje naraslo sa 58 na 77 px. Izmjereno: trebalo je 660 px bez
   priloga i 794 px s njima, u panelu od 560.
   ⚠️ OPSEG JE NAMJERNO USKO. `white-space: nowrap` na globalnom `.btn` vjerojatno
   je ispravan za cijelu aplikaciju, ali `.btn` je token cijele kuce — odluka
   iznad ovog podnozja (isto obrazlozenje vec stoji uz velicinu gumba).
   ⚠️ BEZ `flex-wrap: wrap`: podnozje u dva retka jede visinu tijela i pomice
   glavni gumb od naloga do naloga. */
.wo-side__foot > .btn { flex: 0 0 auto; white-space: nowrap; }
.wo-side__foot .spacer { flex: 1; }
.wo-side__foot .stat { font-size: var(--fs-sm); color: var(--color-text-secondary, #475569); }
/* Oprema: gate + tablica */
.gate { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 10px 12px; font-size: var(--fs-sm); margin-bottom: 11px; }
.gate .mdi { font-size: 20px; }
.gate--block { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.gate--ok { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.gate b { display: block; } .gate span { font-size: var(--fs-micro); }
.eqst { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.eqst--ok { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.eqst--miss { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.eqst--wait { background: #F1F5F9; color: #475569; }
.eqst--extra { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
/* Dispecerove kontrole nad stavkom opreme — potvrda iz ureda kad uredaj ne radi. */
.eq-akc { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.eq-ser { font-size: var(--fs-sm); padding: 3px 7px; border: 1px solid var(--color-border); border-radius: 6px; min-width: 140px; }
.ai-conf { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); font-weight: 700; border-radius: 999px; padding: 1px 6px;
  background: linear-gradient(120deg, #4C1D95, #7C3AED); color: #EDE9FE; }
.eq-thumb { width: 28px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #E2E8F0, #CBD5E1); display: inline-flex; align-items: center; justify-content: center; color: #94A3B8; font-size: var(--fs-sm); cursor: pointer; }
/* Zadaci */
.task { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; margin-bottom: 6px; cursor: pointer; }
.task:hover { background: var(--color-surface, #F8FAFC); }
.task__chk { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--color-border, #E5E7EB); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); color: #fff; flex-shrink: 0; margin-top: 1px; }
.task.done .task__chk { background: var(--green, #16A34A); border-color: var(--green, #16A34A); }
.task.done .task__txt { text-decoration: line-through; color: var(--color-text-tertiary, #94A3B8); }
.task__txt { font-size: var(--fs-base); }
.task__meta { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); margin-top: 1px; }
/* Poruke / aktivnosti */
.msg { display: flex; gap: 9px; margin-bottom: 10px; }
.msg__av { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-primary, #1F4E8A); color: #fff; font-size: var(--fs-micro); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg__b { background: var(--color-surface, #F8FAFC); border: 1px solid var(--color-border, #E5E7EB); border-radius: 10px; padding: 8px 11px; font-size: var(--fs-sm); }
.msg__b b { display: block; font-size: var(--fs-micro); color: var(--brand-primary, #1F4E8A); }
.msg__t { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); margin-top: 3px; }
.act-row { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--color-border, #E5E7EB); font-size: var(--fs-sm); }
.act-row:last-child { border-bottom: none; }
.act-row .mdi { font-size: var(--fs-lg); color: var(--brand-primary, #1F4E8A); }
.act-row .t { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); white-space: nowrap; }
/* Serviserska app mini */
.sphone { background: #0F172A; border-radius: 24px; padding: 7px; box-shadow: 0 14px 34px rgba(15,23,42,0.35); }
.sphone__scr { background: var(--color-surface, #F8FAFC); border-radius: 18px; overflow: hidden; }
.sphone__head { background: var(--brand-primary-dark, #0F2C4D); color: #fff; padding: 8px 10px; font-size: var(--fs-micro); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.sphone__head .mdi { color: var(--brand-secondary-light, #FCD34D); }
.sphone__cam { margin: 8px; border-radius: 9px; aspect-ratio: 4/3; background: radial-gradient(130px 65px at 50% 55%, #64748B33, transparent), linear-gradient(135deg, #334155, #1E293B); position: relative; overflow: hidden; }
.sphone__box { position: absolute; top: 26%; left: 12%; right: 12%; bottom: 30%; border: 2px solid #4ADE80; border-radius: 6px; }
.sphone__box::after { content: 'S/N AC2419-0087'; position: absolute; top: -17px; left: 0; background: #4ADE80; color: #052E16; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.sphone__lbl { position: absolute; bottom: 7px; left: 7px; right: 7px; background: rgba(255,255,255,0.95); border-radius: 6px; padding: 5px 7px; font-size: var(--fs-micro); }
.sphone__lbl b { display: block; font-size: var(--fs-micro); }
.sphone__body { padding: 0 8px 8px; }
.sphone__row { display: flex; gap: 5px; }
.sphone__row .btn { flex: 1; justify-content: center; padding: 6px 3px; font-size: var(--fs-micro); }
.sphone__note { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); text-align: center; margin-top: 5px; }

/* Veliki modal radnog naloga */
/* dvostruka klasa — nadjačava .modal { max-width: 560px } bez obzira na poredak */
/* ⚠️ FIKSNA VISINA, NE `max-height` (03.09.2026.). S `max-height` se visina
   racunala IZ SADRZAJA i okvir je skakao kroz sedam tabova — izmjereno na
   1920x1080: visina 405 → 930 px, `top` 75 → 337, a gumb „Povratne
   informacije" 223 → 485. Traka tabova je vodoravni izbornik; kad se pri kliku
   pomakne i sam okvir, sljedeci tab vise nije ondje gdje je bio. To je
   promasen klik, ne estetika.

   ⚠️ NE DIRATI `.modal` — ostali modali su i dalje visoki koliko im je
   sadrzaj, i to je za njih ispravno: mali obrazac u okviru od 880 px izgleda
   kao kvar. Fiksna visina je svojstvo modala S TABOVIMA.

   ⚠️ PRAZAN PROSTOR NA KRATKIM TABOVIMA JE NAMJERAN. „Raspored i ekipa" ima
   131 px sadrzaja u okviru za 605 — praznina ispod zadnjeg polja je cijena
   stabilnog okvira. Popuni li ju netko, visina opet ovisi o sadrzaju i
   skakanje se vraca.

   ⚠️ 940, NE 880 (03.09.2026.). Najvisi tab je `vrsta` (655 px sadrzaja), ne
   `osnovno` (594) — mjereno, ne po imenu; s njim modal trazi 930 px. Uz 880 mu
   je ostajalo ~50 px klizanja UNUTAR mreze, a trazeno je bilo da se NE skrola.
   Na 1080p je `94vh` = 1015 px, pa `min(940px, 94vh)` daje 940 i unutarnjeg
   klizanja nema. Na ekranu od 768 px `94vh` je 722 i klizanje ostaje —
   neizbjezno i ispravno.

   ⚠️ BROJ SE VISE NE DIZE. Prijede li ikad neki tab 930 px sadrzaja, ne
   povecava se ovaj broj nego se DIJELI TAB: modal koji raste s najduzim tabom
   vraca se na isti kvar, samo na vecem ekranu. */
/* ⚠️ 1320, NE 1240 (07.09.2026.). Deset tabova sa znackama (Poruke 1, Zadaci 3)
   trazi vise od 1240: izmjereno, zadnji tab „Rute" zavrsavao je izvan okvira
   i nije se dao kliknuti (Mladen, snimka modala RN-2026-0004). Uz 1320 ostaje
   ~70 px pricuve; `95vw` i dalje ogranicava na uzim ekranima. */
.modal.modal--wo { max-width: 1320px; width: 95vw; height: min(940px, 94vh); }
/* ⚠️ `flex: 1` na tijelu (07.09.2026.): bez toga podnozje slijedi sadrzaj, pa je
   kratki tab (Ekipa u citanju) ostavljao bijelo ISPOD gumba „Zatvori". Praznina
   ostaje unutar taba, iznad podnozja — kako i komentar visine iznad kaze. */
.modal.modal--wo .modal__body { flex: 1; padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
/* ⚠️ CITANJE JE BLOK, NE MREZA (07.09.2026.). Blokovi citanja (`woBlok(…,
   'citaj')`) su isti koje crta detalj naloga — u OBICNOM bloku (`.wo-kliz`).
   U mrezi od 12 stupaca svaki blok koji nije na popisu punih (`.wo-info`,
   `.wo-g2`…) pao je u JEDAN stupac: „Nastao iz zahtjeva" sirok 102 px,
   Ekipa stisnuta na cetvrtinu. Isti kontekst kao detalj = isti prikaz. */
.modal.modal--wo .wm-g.wm-g--citaj { display: block; }
.modal.modal--wo .wm-scroll { flex: 1; min-height: 0; }
.modal.modal--wo select, .modal.modal--wo input { max-width: 100%; }

/* ═══ MODAL RADNOG NALOGA — sedam tabova, PCS zaglavlje ═══════════════════
   Vrijednosti su PREPISANE iz `mockups/OSIRIS_NEO_nalog_modal_mockup.html`,
   koji ih je prepisao iz `Port community system/.../MARPOL_Mockup.html`
   (`.wo-header*`, `.wo-step*`) — ne izvedene i ne „prilagodene".

   ⚠️ ZAJEDNICKO ZAGLAVLJE SE SKRIVA, ne mijenja. `.modal__head` nosi ikonu i
   naslov za dvadesetak drugih modala; ovaj ima svoje, s valovima i stepperom.
   Mijenjati zajednicko znacilo bi da svi drugi dobiju stepper koji nemaju. */
.modal.modal--wo .modal__head { display: none; }
.modal.modal--wo .modal__foot { background: #FAFBFC; }

.wm-h { position: relative; background: linear-gradient(135deg, #0F2C4D 0%, #1F4E8A 100%);
  color: #fff; padding: 18px 28px 16px 28px; flex-shrink: 0; overflow: hidden; }
.wm-h__waves { position: absolute; top: 0; right: 0; bottom: 0; width: 55%; height: 100%;
  pointer-events: none; z-index: 1; }
.wm-h__row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  max-width: 55%; position: relative; z-index: 2; }
.wm-h .ic { width: 38px; height: 38px; border-radius: 9px; background: rgba(217,154,24,.20);
  border: 1px solid rgba(217,154,24,.50); color: #E9B44C; display: flex; align-items: center;
  justify-content: center; font-size: 19px; flex-shrink: 0; }
.wm-h h3 { font-size: 17px; font-weight: 700; margin: 0; white-space: nowrap; }
.wm-h .no { font-family: 'JetBrains Mono', monospace; }
.wm-h .x { position: absolute; top: 14px; right: 18px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18); color: #fff; width: 32px; height: 32px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; font-size: 17px; }
/* Pilula statusa — ista receptura kao PCS: tint .2 / obrub .5 / tekst */
.wm-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.wm-pill .mdi { font-size: 12px; }
.wm-pill--kreiran { background: rgba(252,211,77,.20); border: 1px solid rgba(252,211,77,.50); color: #FCD34D; }
.wm-pill--dodijeljen { background: rgba(110,231,183,.20); border: 1px solid rgba(110,231,183,.45); color: #6EE7B7; }
.wm-pill--u_tijeku { background: rgba(147,197,253,.20); border: 1px solid rgba(147,197,253,.45); color: #93C5FD; }
.wm-pill--zavrsen { background: rgba(134,239,172,.20); border: 1px solid rgba(134,239,172,.45); color: #86EFAC; }
.wm-pill--otkazan { background: rgba(248,113,113,.20); border: 1px solid rgba(248,113,113,.45); color: #FCA5A5; }
/* ⚠️ PRIORITET U ZAGLAVLJU. Na navy podlozi svijetle pilule iz tablice ne rade,
   pa zaglavlje ima svoje cetiri: „hitno" je JEDINA puna boja — ono mora vikati. */
/* ⚠️ UTORI ZAJEDNICKOG ZAGLAVLJA (02.09.2026.). Naslovni blok, meta redak i
   brojac dolaze iz zahtjeva; nalog ih danas ne puni, ali ih smije. */
.wm-h__t { min-width: 0; }
.wm-h .meta { display: flex; gap: 13px; margin-top: 4px; font-size: 12px;
  color: rgba(255,255,255,.55); flex-wrap: wrap; align-items: center; }
.wm-h .meta .mono { color: #fff; }
/* ⚠️ ODMAKNUT OD GUMBA ZA ZATVARANJE, i to je SVJESNO ODSTUPANJE OD MOCKUPA
   (trazeno 2026-08-26). Mockup brojku drzi uz sam desni rub, ispod „×" koji je
   ondje goli znak; u aplikaciji je „×" PUN GUMB s pozadinom, pa se brojka uz
   njega citala kao njegov natpis. */
.wm-h__num { position: absolute; top: 16px; right: 84px; text-align: right;
  line-height: 1.15; z-index: 3; }
.wm-h__num b { display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 26px; font-weight: 800; color: var(--brand-secondary); line-height: 1; }
.wm-h__num span { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #94A3B8; margin-top: 3px; display: block; white-space: nowrap; }
/* Mali ugnijezdeni obrazac: isto zaglavlje, niza uvlaka, bez toka. */
.wm-h--sm { padding: 12px 16px; }
.wm-h--sm .wm-h__row { margin-bottom: 0; max-width: 100%; }
.wm-h--sm .ic { width: 32px; height: 32px; border-radius: 8px; font-size: 16px; }
.wm-h--sm h3 { font-size: 15px; }
.wm-h--sm .wm-h__waves { display: none; }

/* ⚠️ HITNOST ZAHTJEVA — ISTA RECEPTURA KAO PRIORITET NALOGA, DRUGE
   VRIJEDNOSTI. `hitnost` (niska/srednja/visoka/kriticna) i `priority`
   (niska/normalna/visoka/hitno) su RAZLICITI popisi i ostaju odvojeni; dijeli
   se izgled, ne vrijednosti. Zato prefiks `--h-`: da se `visoka` iz dva
   popisa ne stope u jedno pravilo koje bi netko sutra promijenio za jedan, a
   promijenio bi za oba.
   Tri prozirna tinta i JEDNA puna boja — `kriticna` mora vikati. */
.hprio--h-niska { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); color: rgba(255,255,255,.62); }
.hprio--h-srednja { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); color: #CBD5E1; }
.hprio--h-visoka { background: rgba(245,158,11,.22); border: 1px solid rgba(245,158,11,.55); color: #FBBF24; }
.hprio--h-kriticna { background: #DC2626; border: 1px solid #DC2626; color: #fff; box-shadow: 0 2px 8px rgba(220,38,38,.45); }
.hprio { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px;
  font-weight: 800; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; letter-spacing: .02em; }
.hprio .mdi { font-size: 12px; }
.hprio--niska { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); color: rgba(255,255,255,.62); }
.hprio--normalna { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); color: #CBD5E1; }
.hprio--visoka { background: rgba(245,158,11,.22); border: 1px solid rgba(245,158,11,.55); color: #FBBF24; }
.hprio--hitno { background: #EF4444; border: 1px solid #EF4444; color: #fff; box-shadow: 0 2px 8px rgba(239,68,68,.45); }
/* ═══ PILULA PRIORITETA UZ NASLOV (14.09.2026.) ════════════════════════════
   Mladen: „pilula prioriteta neka bude odmah do teksta «radni nalog» … samo rub
   i tekst u boji, podloga kako je bila, bez crtice ispred teksta."
   Iz mockupa `OSIRIS_NEO_nalog_osnovno_kao_zahtjev_mockup.html`.

   ⚠️ MODIFIKATOR UZ ZATECENU KLASU, ne izmjena zatecene. `.hprio--*` su
   prigusene namjerno, a `.hprio--h-*` pripadaju ZAHTJEVU — mijenjati njih znaci
   mijenjati zaglavlje koje nitko nije spominjao.

   ⚠️ RUB NOSI PUNU BOJU, TEKST SVJETLIJI TON — i to je izmjereno u ovom stablu,
   ne preneseno. Obrub nema prag citljivosti, tekst ima; pilula je sitna i
   podebljana, pa NIJE „veliki tekst" i prag je 4,5.
   Mjereno uz LIJEVI rub zaglavlja (`#0F2C4D`), jer pilula od danas stoji ondje:
     niska    podloga bijelo .10 → #27415F : puna #16A34A 3,17 → #86EFAC 7,44
     normalna podloga bijelo .14 → #314A66 : puna #EAB308 4,79 → #FACC15 5,99
     visoka   podloga jantar .22 → #42453E : puna #F97316 3,48 → #FFC48A 6,28
   ⚠️ `hitno` NEMA `--boja`: podloga mu je PUNA `#EF4444`, pa bi rub iste boje
   bio nevidljiv (1,00), a `#FEC2C2` bi dao 2,46. Ostaje zatecen.
   ⚠️ ZATECENI NALAZ, PRIJAVLJEN I NEDIRNUT: bijeli tekst na toj punoj crvenoj
   daje 3,76 — ispod praga. Popravak trazi tamniju crvenu ili veci tekst, dakle
   izmjenu pilule koju nitko nije trazio. Stoji zapisano da je vidjeno. */
.wm-h__n { display: inline-flex; align-items: center; gap: 11px; vertical-align: middle; }
.hprio--boja { font-weight: 800; }
.hprio--boja-niska    { border-color: #16A34A; color: #86EFAC; }
.hprio--boja-normalna { border-color: #EAB308; color: #FACC15; }
.hprio--boja-visoka   { border-color: #F97316; color: #FFC48A; }
/* Poveznica na zahtjev u drugoj liniji zaglavlja — jedini put do njega otkad
   blok „Nastao iz zahtjeva" vise ne stoji na kartici. */
.wm-h__z { color: #F5D48A; text-decoration: none; white-space: nowrap;
  border-bottom: 1px dashed rgba(245,212,138,.5); }
.wm-h__z .mdi { font-size: 13px; margin-left: 6px; }

/* Stepper: cetiri koraka (`WO_TIJEK`), ne PCS-ovih pet. */
.wm-steps { display: flex; align-items: flex-start; list-style: none; padding: 0; margin: 0;
  position: relative; z-index: 2; }
.wm-step { flex: 1; position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 4px; text-align: center; }
.wm-step:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 50%;
  width: 100%; height: 2px; background: rgba(255,255,255,.15); }
.wm-step--done:not(:last-child)::after { background: #22C55E; }
.wm-step__num { width: 26px; height: 26px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.55); position: relative; z-index: 1; }
.wm-step--done .wm-step__num { background: #16A34A; border-color: #16A34A; color: #fff; }
.wm-step--active .wm-step__num { background: #FCD34D; border-color: #FCD34D; color: #0F2C4D;
  box-shadow: 0 0 0 4px rgba(252,211,77,.25); }
.wm-step__lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; color: rgba(255,255,255,.55); }
.wm-step--active .wm-step__lbl { color: #fff; }
/* ⚠️ DATUM DIJELI KORAK OD UKRASA. Korak bez datuma se NIJE dogodio i pise „—". */
.wm-step__kad { font-size: 9.5px; font-family: 'JetBrains Mono', monospace; color: rgba(255,255,255,.55); }

/* ⚠️ MODAL SE NE SKROLA. Zaglavlje, traka tabova i podnozje stoje uvijek na
   istom mjestu — covjek ne trazi gumb „Spremi" pomicanjem. Pomice se SAMO
   mreza polja unutar taba. */
.modal.modal--wo .wm-err { margin: 10px 16px 0; }
.modal.modal--wo .wm-b { flex: 1; min-height: 0; overflow: hidden;
  padding: 14px 16px 10px; display: flex; }
.wm-pane { display: none; }
.wm-pane.on { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
/* ⚠️ `scrollbar-gutter: stable` — DRUGI, TISI SKOK. Tab s dugackim sadrzajem
   dobije klizac, kratki ga nema; bez rezerviranog zljeba cijeli sadrzaj
   poskoci VODORAVNO ~15 px pri svakoj promjeni taba, iako visina stoji. */
.wm-pane.on > .wm-g { flex: 1; min-height: 0; overflow-y: auto; align-content: start;
  scrollbar-width: thin; scrollbar-gutter: stable; padding-right: 2px; }
.wm-g { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px 12px; }
.wm-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wm-f--3 { grid-column: span 3; } .wm-f--4 { grid-column: span 4; }
.wm-f--5 { grid-column: span 5; } .wm-f--6 { grid-column: span 6; }
.wm-f--7 { grid-column: span 7; } .wm-f--8 { grid-column: span 8; }
.wm-f--12 { grid-column: span 12; }
/* ⚠️ LJESTVICA, NE VLASTITA BROJKA (13.09.2026., Mladen: „i dalje su mi u modalu
   radnog naloga slova presvijetla i sitna"). Ovdje je stajalo `10.5px`, dakle
   ISPOD najmanje precke u ovoj datoteci — a komentar uz `--fs-micro: 12px` gore
   imenuje tocno ovu upotrebu: „oznake polja". Token se NE MIJENJA i NE DODAJE se
   novi; koristi se onaj koji vec postoji.
   ⚠️ BOJA IDE NA `secondary` (10,35 : 1 naspram 4,76 : 1). Kontrast i velicina
   nisu neovisni u oku, samo u formuli: 4,76 na 10,5 px cita se svjetlije nego
   4,76 na 12 px. */
.wm-f > label { font-size: var(--fs-micro, 12px); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--color-text-secondary, #334155); }
.wm-f > label .req { color: var(--red-text, #DC2626); margin-left: 2px; }
.wm-f input, .wm-f select, .wm-f textarea { font: inherit; font-size: 13px;
  color: var(--color-text, #0F172A); background: #fff;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px; padding: 8px 10px; width: 100%; }
.wm-f textarea { resize: vertical; line-height: 1.5; }
.wm-f :focus { outline: none; border-color: var(--brand-primary, #1F4E8A);
  box-shadow: 0 0 0 3px rgba(31,78,138,.12); }
.wm-f.fali input, .wm-f.fali select, .wm-f.fali textarea { border-color: #FCA5A5; background: #FFFBFB; }
/* Isti znak i za polja OBRASCA (`.fld`): od 04.09.2026. i ona ulaze u brojku
   obaveznih, pa moraju nositi i istu oznaku kad fale. */
.fld.fali input, .fld.fali select, .fld.fali textarea { border-color: #FCA5A5; background: #FFFBFB; }
/* ⚠️ SAMO BOJA — 10,5 px ostaje (vidi `.wm-ro .na`: font nije bio uzrok).
   Tumacenje ispod polja je RECENICA, ne oznaka: u njoj stoji i „Upis broja
   znaci da je nalog fakturiran". Objasnjenje koje ne prolazi prag citljivosti
   nije objasnjenje nego ukras. 2,56:1 → 4,76:1. */
/* ⚠️ BOJA OSTAJE `tertiary`, I TO JE ODLUKA: oznaka i objasnjenje moraju ostati
   razlicitog RANGA. Sada su oba 12 px, pa rang nosi boja — da oba budu
   `secondary` znacilo bi da objasnjenje vice jednako glasno kao ono sto
   objasnjava, i obrazac postaje zid. */
.wm-f .hint { font-size: var(--fs-micro, 12px); color: var(--color-text-tertiary, #64748B); line-height: 1.35; }
.wm-f--uz { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: start; }
.wm-f--uz > label { grid-column: 1 / -1; }
.wm-plus { border: 1px solid var(--color-border, #E5E7EB); background: #fff; border-radius: 8px;
  width: 36px; height: 36px; font-size: 17px; color: var(--brand-primary, #1F4E8A); cursor: pointer; }

/* Birac prioriteta — jedna vrijednost, tri mjesta (birac, zaglavlje, recenica). */
.prio-pick { display: flex; border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px; overflow: hidden; }
.prio-pick button { flex: 1; border: 0; border-right: 1px solid var(--color-border, #E5E7EB);
  background: #fff; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--color-text-tertiary, #64748B); padding: 7px 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; }
.prio-pick button:last-child { border-right: 0; }
.prio-pick button:hover { background: var(--color-surface, #F8FAFC); color: var(--color-text, #0F172A); }
.prio-pick button.on { color: #fff; }
.prio-pick button[data-p="niska"].on { background: #94A3B8; }
.prio-pick button[data-p="normalna"].on { background: #64748B; }
.prio-pick button[data-p="visoka"].on { background: #D97706; }
.prio-pick button[data-p="hitno"].on { background: #EF4444; }

/* Meta-traka (samo pri uredivanju).
   ⚠️ OKVIR IZVORA (`.izvor*`) JE UKLONJEN 14.09.2026. zajedno s `wmIzvor`:
   porijeklo naloga zivi u zaglavlju, klijentove rijeci u kartici „Opis
   zahvata". Pravila bez crtaca su sloj koji ovaj projekt vec triput platio. */
.wm-meta { grid-column: span 12; display: flex; flex-wrap: wrap; gap: 4px 14px;
  background: var(--color-surface, #F8FAFC); border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 9px; padding: 8px 11px; font-size: 11.5px; color: var(--color-text-tertiary, #64748B); }
.wm-meta span { display: inline-flex; align-items: center; gap: 5px; }
.wm-meta b { color: var(--color-text, #0F172A); font-weight: 700; }
.wm-meta .mdi { font-size: 14px; color: var(--color-text-muted, #94A3B8); }
.wm-meta a { color: var(--brand-primary, #1F4E8A); font-weight: 700; text-decoration: none; }

/* ⚠️ DUZINA POPISA JE PODATAK, NE RASPORED: 40 naloga na lokaciji i 20 stavki
   opreme ne smiju rastegnuti modal. Svoja visina + ljepljivo zaglavlje. */
/* ⚠️ VISINA JE RELATIVNA, ne mockupovih 300 px. Mockup je crtan na jednoj
   visini prozora; tvrdi broj je ondje tocan, a na prijenosniku od 768 px
   pojede podnozje. Modal je `min(880px, 94vh)`, pa okvir uzima svoj udio te
   visine. (Uhvatila brana `tbl-skrol-guard`, koja postoji zbog istog broja na
   `.canm-tbl__skrol`.) */
.wm-tblw { grid-column: span 12; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 10px; overflow: auto; max-height: 38vh; }
.wm-tblw table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wm-tblw thead th { position: sticky; top: 0; z-index: 1;
  background: var(--color-surface, #F8FAFC); text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-tertiary, #64748B);
  padding: 7px 10px; border-bottom: 1px solid var(--color-border, #E5E7EB); }
.wm-tblw td { padding: 7px 10px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.wm-tblw tr:last-child td { border-bottom: 0; }
.wm-tblw .num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.wm-tblw .act { width: 34px; text-align: center; }
.wm-tblw .del { border: 0; background: none; color: #94A3B8; font-size: 15px; cursor: pointer; }
/* Tablica opreme u modalu naloga (Mladen 26.09.2026.): stanje i „tko · kada"
   stoje u JEDNOM retku, jedno do drugoga — ne jedno ispod drugoga. */
.wm-opr__st { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
/* ⚠️ SIRINE (Mladen 26.09.2026.: „veliki je razmak između stupaca"). Naziv je
   sirok PO SADRZAJU do granice iznad koje se prelama; Kol. je uzak i desno,
   odmah uz naziv; Stanje i Promijeni u su siroki po sadrzaju. Ostatak uzimaju
   Serijski brojevi — da ga uzme naziv, broj bi bjezao od kratkog naziva.
   `width: 1%` + sadrzaj bez loma = stupac tocno sirok koliko sadrzaj trazi. */
.wm-opr .wm-opr__naz, .wm-opr .num, .wm-opr .wm-opr__uz { width: 1%; }
.wm-opr .num, .wm-opr .wm-opr__uz { white-space: nowrap; }
/* Granica 244 px = najdulji stvarni naziv (produkcija 25.09.2026., 37 znakova
   „opt.patch kabel SM LC-LC duplex od 2m" = 243,0 px) u jednom redu; dulji se
   prelama. Bez granice bi najdulji naziv na nalogu odredio sirinu stupca. */
.wm-opr__naz > div { width: max-content; max-width: 244px; white-space: normal;
  font-weight: 600; color: var(--color-text-primary); }
.wm-opr .num { color: var(--color-text-primary); }
/* Tamnije od zatecenog (tercijarna, odnosno nedefinirani `--color-text-muted`)
   — „tekst je presiv pa se slabo vidi". Samo u ovoj tablici. */
.wm-opr__tko { font-size: 12px; color: var(--color-text-secondary); }
.wm-opr .sn__n:not(.fali) { color: var(--color-text-secondary); }
/* Gumbi u stupcu „Promijeni u": jedan do drugoga, bez odmaka koji su imali
   dok su stajali ispod oznake stanja. */
.wm-opr .eq-akc { margin-top: 0; flex-wrap: nowrap; }
/* ⚠️ PRELAMANJE SAMO KAD NEMA MJESTA (odluka 27.09.2026., (e)). Stanje s „tko ·
   kada" i gumbi „Promijeni u" drze se u jednom retku; na uskom okviru bi to
   dalo vodoravno klizanje (1024 px: 78 px). Upit je na OKVIRU OVE tablice, ne
   na prozoru i ne na zajednickom `.wm-tblw`.
   ⚠️ PRAG 1060 px. Najmanja sirina OTVORENE tablice s gumbima je zbroj
   najmanjih sirina stupaca — izmjereno 27.09.2026.: Naziv 263 (granica 244)
   + Kol. 46 + Serijski 210 (polje 190) + Stanje 279 + Promijeni u 172 + ×
   35 = 1005 px za „Neno Romac"; Stanje raste s imenom potvrditelja, pa je
   najgori stvarni slucaj 1011 px („NIkolina Vučić"). 1060 pokriva ime
   potvrditelja do 20 znakova (sinteticki najgori slucaj: 1053 px). Dulje ime
   daje nekoliko px klizanja samo na okviru tik iznad 1060 px — poznato i
   prihvaceno.
   Mora se IZMJERITI IZNOVA cim se promijeni bilo koji stupac ili granica
   naziva — brani ga `tests/browser/oprema-tablica.mjs` (tvrdnja oko praga i
   sinteticki najgori slucaj).
   Ispod praga stupci Stanje i Promijeni u postaju automatski: preglednik
   dijeli sirinu razmjerno, pa se „tko · kada" i gumbi prelamaju cim je okvir
   ispod praga (izmjereno na 1059 px: redak 75 px), a „tko · kada" ostaje
   jedna cjelina. Zatvoren nalog i pregled bez gumba su uzi i prag ih ne dira. */
.wm-opr__okv { container: wm-opr / inline-size; }
@container wm-opr (width < 1060px) {
  .wm-opr--odluka .wm-opr__uz { width: auto; white-space: normal; }
  .wm-opr--odluka .wm-opr__st { flex-wrap: wrap; row-gap: 2px; }
  .wm-opr--odluka .wm-opr__tko { white-space: nowrap; }
  .wm-opr--odluka .eq-akc { flex-wrap: wrap; }
}

/* Serijski brojevi po komadu — cip, izvor, i brojka koja pocrveni kad fali. */
.sn { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sn__c { display: inline-flex; align-items: center; gap: 4px; background: #F1F5F9;
  border: 1px solid #E2E8F0; border-radius: 999px; padding: 2px 4px 2px 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  color: var(--color-text, #0F172A); }
.sn__c .mdi { font-size: 12px; color: var(--color-text-muted, #94A3B8); }
/* ⚠️ Bar kod se ne prepisuje pogresno, tipkovnica se — zato boja razlikuje
   izvor. Kad se poslije trazi jamstvo, jedan se broj smije osporiti, drugi ne. */
.sn__c .mdi-barcode-scan { color: #15803D; }
.sn__c .x { border: 0; background: none; color: #94A3B8; font-size: 13px; cursor: pointer; padding: 0 1px; }
.sn__b { border: 1px dashed #C6D1E0; background: #fff; border-radius: 999px; padding: 2px 9px;
  font: inherit; font-size: 11px; font-weight: 700; color: var(--brand-primary, #1F4E8A);
  cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.sn__n { font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: var(--color-text-muted, #94A3B8); white-space: nowrap; }
.sn__n.fali { color: var(--orange-text, #B45309); font-weight: 600; }

.wm-warn { grid-column: span 12; background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: 9px; padding: 9px 11px; font-size: 11.5px; color: #78350F; line-height: 1.45;
  display: flex; gap: 8px; }
.wm-warn .mdi { font-size: 15px; color: var(--orange-text, #B45309); flex: none; }
.wm-prazno { grid-column: span 12; background: var(--color-surface, #F8FAFC);
  border: 1px dashed #C6D1E0; border-radius: 10px; padding: 22px 16px; text-align: center;
  color: var(--color-text-tertiary, #64748B); font-size: 12.5px; line-height: 1.5; }
.wm-prazno .mdi { font-size: 26px; color: var(--color-text-muted, #94A3B8); display: block; margin-bottom: 6px; }
.wm-zad { grid-column: span 12; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.wm-zad li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 8px;
  border-radius: 7px; background: var(--color-surface, #F8FAFC); }
.wm-zad li .mdi { font-size: 16px; }
.wm-zad li span { flex: 1; }
.wm-zad li span.d { text-decoration: line-through; color: var(--color-text-muted, #94A3B8); }
.wm-add { grid-column: span 12; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.wm-add input { font: inherit; font-size: 12.5px; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 8px; padding: 7px 9px; }
.wm-add .opr-naziv { flex: 0 0 300px; }
.wm-add .opr-kol { flex: 0 0 70px; text-align: right; font-family: 'JetBrains Mono', monospace; }
/* Podnozje: brojka manjka je KLIKABILNA — skace na prvo prazno polje. */
.wm-stat { flex: 1; font-size: 11.5px; color: var(--color-text-tertiary, #64748B);
  display: flex; align-items: center; gap: 7px; }
.wm-stat.lose { color: var(--red-text, #DC2626); font-weight: 600; cursor: pointer; }
/* ⚠️ MODIFIKATOR, NE NOVO IME. Mockup je znacku zvao `.tab__n2`; brana
   `tabovi_gumbi_guard` to (opravdano) hvata — jedan izvor znaci da se razlike
   pisu kao IMENOVANI modifikatori. Ovo je ista znacka, samo tiha: tab bez
   obaveznih polja ne smije nositi crvenu nulu, jer crvena nula uci covjeka da
   crveno zanemari. */
/* ⚠️ BOJA JE IZ MOCKUPA (`.tb.mut`: `#E2E8F0` / `#94A3B8`), ne iz tokena
   (02.09.2026.). Do danas je tiha znacka nosila `--color-text-secondary`, a
   modal zahtjeva je imao svoje ime znacke koje je mockup pogadalo — pa se
   razlika vidjela tek kad su se dva imena spojila u jedno. */
.tab__n--tiha { background: #E2E8F0; color: #94A3B8; }
.tab__n--tiha:empty { display: none; }

/* ⚠️ ISTI STEPPER NA SVIJETLOJ PODLOZI. PCS boje su racunate za navy zaglavlje;
   detalj naloga stoji na bijelom, pa se prebojava SAMO ono sto bi na bijelom
   nestalo. Oblik, mjere i razmaci ostaju isti — jedan generator (`wmSteps`),
   dva konteksta, ne dva steppera. */
/* Svijetla paleta nosi i TRAKU: stepper u detalju stoji IZVAN tijela koje se
   skrola (`flex-shrink: 0`), jer je tok statusa ono sto dispecer gleda prvo. */
.wm-steps--svijetli { padding: 13px 14px 10px; border-bottom: 1px solid var(--color-border, #E5E7EB);
  flex-shrink: 0; background: #fff; }
.wm-steps--svijetli .wm-step:not(:last-child)::after { background: var(--color-border, #E5E7EB); }
.wm-steps--svijetli .wm-step--done:not(:last-child)::after { background: var(--green, #16A34A); }
.wm-steps--svijetli .wm-step__num { background: #fff; border-color: var(--color-border, #E5E7EB);
  color: var(--color-text-tertiary, #94A3B8); }
.wm-steps--svijetli .wm-step--done .wm-step__num { background: var(--green, #16A34A);
  border-color: var(--green, #16A34A); color: #fff; }
.wm-steps--svijetli .wm-step--active .wm-step__num { background: #fff;
  border-color: var(--brand-primary, #1F4E8A); color: var(--brand-primary, #1F4E8A);
  box-shadow: 0 0 0 4px rgba(31,78,138,0.12); }
.wm-steps--svijetli .wm-step__lbl { color: var(--color-text-tertiary, #94A3B8); }
.wm-steps--svijetli .wm-step--active .wm-step__lbl { color: var(--brand-primary, #1F4E8A); }
.wm-steps--svijetli .wm-step--done .wm-step__lbl { color: var(--green-text, #15803D); }
.wm-steps--svijetli .wm-step__kad { color: var(--color-text-muted, #94A3B8); }
/* ⚠️ U USKOM PANELU SE SKRACUJE NATPIS, ne brise datum i ne pomice traka.
   Cetiri natpisa uppercase u ~570 px su se DOTICALA („KREIRANDODIJELJEN…") —
   uzrok je bio `var(--fs-micro)` = 12 px u koraku bez uvlake. PCS geometrija
   nosi 9,5 px; ovdje se uz to dodaje uvlaka i prelom, jer je datum ono zbog
   cega korak uopce nesto tvrdi. */
.wm-steps--svijetli .wm-step { padding: 0 3px; min-width: 0; }
.wm-steps--svijetli .wm-step__lbl { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%; }

/* Oznaka ishoda i stanja u tablicama modala (povijest, oprema). */
.tag { border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 700;
  background: #E2E8F0; color: var(--color-text-secondary, #475569); white-space: nowrap; }
.tag--traje { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.tag--ok { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
@media (max-width: 1100px) { .wm-grid { grid-template-columns: 1fr; } }
/* ⚠️ SUDAR IMENA UKLONJEN 02.09.2026. Ovdje je stajao DRUGI `.wm-steps`
   (padding 13/20/10, obrub, svijetla podloga) iz napustenog pokusaja modala
   naloga — a od 02.09. to je ime nosi PCS stepper, koji stoji na navy
   gradijentu. Pravilo mu je dodavalo svijetlu podlogu i obrub usred zaglavlja.
   Ostatak tog bloka (`.wm-scroll`, `.wm-grid`, `.wm-full`, `.eqt*`, `.eq-*`)
   nema nijednog korisnika u JS-u ni u markupu; PRIJAVLJEN je, nije diran. */
.wm-scroll { overflow-y: auto; padding: 15px 20px; }
.wm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.wm-full { grid-column: 1 / -1; }
/* Editable tablica opreme */
.eqt { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; border-radius: 9px; overflow: hidden; }
.eqt th { text-align: left; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #92400E; padding: 6px 8px; background: #FEF3C7; white-space: nowrap; }
.eqt td { padding: 4px 6px; border-bottom: 1px solid #FDE68A; }
.eqt tr:last-child td { border-bottom: none; }
.eqt input, .eqt select { width: 100%; border: 1px solid transparent; border-radius: 6px; padding: 5px 7px;
  font-family: inherit; font-size: var(--fs-base); background: transparent; outline: none; }
.eqt input:hover, .eqt select:hover { border-color: #FDE68A; background: #FFFDF5; }
.eqt input:focus, .eqt select:focus { border-color: #D99A18; background: #fff; box-shadow: 0 0 0 3px rgba(217,154,24,0.15); }
.eqt input.mono, .eqt input.num { font-family: 'JetBrains Mono', monospace; }
.eqt input.num { text-align: right; }
.eqt .del { color: #B45309; cursor: pointer; font-size: var(--fs-lg); }
.eqt .del:hover { color: #B91C1C; }
.eqt tfoot td { background: #FFFBEB; font-size: var(--fs-sm); font-weight: 700; color: #92400E; padding: 7px 8px; }
.eq-add { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.eq-add .btn { padding: 6px 11px; font-size: var(--fs-sm); }
.eq-hint { font-size: var(--fs-micro); color: #92400E; margin-top: 8px; display: flex; align-items: flex-start; gap: 6px; }
.eq-hint .mdi { font-size: var(--fs-md); }
/* Zadaci — editable lista */
.tsk-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tsk-row .n { width: 20px; height: 20px; border-radius: 50%; background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A);
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tsk-row input { flex: 1; border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px; padding: 7px 10px; font-family: inherit; font-size: var(--fs-base); background: #fff; outline: none; }
.tsk-row input:focus { border-color: var(--brand-primary, #1F4E8A); box-shadow: 0 0 0 3px rgba(31,78,138,0.08); }
.tsk-row .del { color: var(--color-text-tertiary, #94A3B8); cursor: pointer; font-size: var(--fs-lg); }
.tsk-row .del:hover { color: var(--red, #EF4444); }
.tsk-row .done-chip { font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); border-radius: 999px; padding: 2px 6px; white-space: nowrap; }
/* Crew izbor */
.crew-pick { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===== POSTAVKE SUSTAVA ===== */
.set-layout { display: grid; grid-template-columns: 216px 1fr; gap: 14px; align-items: start; }
.set-nav { background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; overflow: hidden; }
.set-item { width: 100%; text-align: left; display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: none; border: none;
  border-bottom: 1px solid var(--color-border, #E5E7EB); font-family: inherit; cursor: pointer; }
.set-item:last-child { border-bottom: none; }
.set-item:hover { background: var(--color-surface, #F8FAFC); }
.set-item.active { background: var(--color-info-bg, #EEF2FF); box-shadow: inset 3px 0 0 var(--brand-secondary, #D99A18); }
.set-item > .mdi { font-size: 18px; color: var(--brand-primary, #1F4E8A); flex-shrink: 0; }
.set-item b { font-size: var(--fs-base); display: block; }
.set-item span { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }
.set-body { display: none; }
.set-body.active { display: block; }
/* Klijenti master-detail */
.cli-split { display: grid; grid-template-columns: 262px 1fr; gap: 14px; align-items: start; }
.cli-list { background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; overflow: hidden; }
.cli-row { padding: 10px 12px; border-bottom: 1px solid var(--color-border, #E5E7EB); cursor: pointer; display: flex; align-items: center; gap: 9px; }
.cli-row:last-child { border-bottom: none; }
.cli-row:hover { background: var(--color-surface, #F8FAFC); }
.cli-row.sel { background: var(--color-info-bg, #EEF2FF); box-shadow: inset 3px 0 0 var(--brand-secondary, #D99A18); }
.cli-row__i { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-primary-dark, #0F2C4D); color: var(--brand-secondary-light, #FCD34D);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 800; flex-shrink: 0; }
.cli-row__n { font-size: var(--fs-base); font-weight: 700; }
.cli-row__s { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.cli-row__b { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); font-weight: 700; color: var(--brand-primary, #1F4E8A);
  background: var(--color-info-bg, #EEF2FF); border-radius: 999px; padding: 1px 7px; }
.cli-det { background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; overflow: hidden; }
.cli-det__head { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-bottom: 1px solid var(--color-border, #E5E7EB); }
.cli-det__head h2 { font-size: var(--fs-lg); font-weight: 700; }
.cli-det__head .oib { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); color: var(--color-text-secondary, #475569); }
.cli-det__head__a { margin-left: auto; display: flex; gap: 7px; }
.bill { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.bill--ok { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.bill--warn { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.bill--bad { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.unit-chip { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px;
  background: #EDE9FE; color: #6D28D9; }

/* ===== CRUD TABLICE + MODAL ===== */
.crud-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; flex-wrap: wrap; }
.crud-bar input[type=text] { border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px; padding: 6px 10px; font-family: inherit; font-size: var(--fs-base); min-width: 210px; }
.crud-bar .spacer { flex: 1; }
.crud-count { font-size: var(--fs-sm); color: var(--color-text-tertiary, #94A3B8); }
.avatar-sm { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-primary, #1F4E8A); color: #fff; font-size: var(--fs-micro); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-right: 7px; vertical-align: middle; }
.pill { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.03em; border-radius: 999px; padding: 2px 8px; display: inline-block; }
.pill--on { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.pill--off { background: #F1F5F9; color: #475569; }
.pill--warn { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.pill--role { background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); }
.score { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.score--hi { color: var(--green-text, #15803D); } .score--mid { color: var(--orange-text, #B45309); } .score--lo { color: var(--red-text, #B91C1C); }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-bg.open { display: flex; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(15,23,42,0.35); overflow: hidden; }
/* Sirok oblik: sve stane bez pomicanja. `min(…)` da na uskom ekranu ne
   izade iz vidnog polja — ondje se pomicanje vraca, i to je u redu. */
.modal.modal--siroki { max-width: min(1080px, 96vw); max-height: 94vh; }
/* Izbornik i gumb `+` u istom retku; izbornik uzima ostatak sirine. */
.vrsta-red { display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; margin-bottom: 7px; }
.vrsta-red.ugasena { opacity: .6; }
.vrsta-red > .mdi { font-size: 19px; color: var(--brand-primary, #1F4E8A); }
.vrsta-red__t { display: flex; flex-direction: column; }
.vrsta-red__t .mono { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }
.vrsta-red__t span { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.znak { font-size: var(--fs-micro); font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.znak--t { background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); }
.znak--u { background: var(--orange-bg, #FFF7ED); color: var(--orange-text, #9A3412); }
.znak--s { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }

/* ── pregled ispisa: PDF lijevo, razgovor desno (08.09.2026.) ──────────────
   ⚠️ PDF je `blob:` u okviru, a ne slika ni druga izvedba papira: pregled JEST
   dokument koji klijent dobije, pa HTML i PDF ne mogu odlutati. Razgovor je uz
   njega, ali NE u njemu — poruke ne idu na ispis. */
/* ponuda novog zahtjeva kad ishod znaci „nije dovrseno" (08.09.2026.) */
.wo-info--ned { background: var(--orange-bg, #FFF7ED); color: var(--orange-text, #9A3412); align-items: center; }
.wo-info--ned .btn { margin-left: auto; }
/* oznaka u tablici naloga: zavrsen NIJE isto sto i dovrsen */
/* ⚠️ VLASTITO IME, NE PONOVNA UPOTREBA `.tg-ned` (11.09.2026.). Uredaj je isti
   — mala oznaka pod pilulom stanja — ali znacenje je drugo: „nije dovrseno" je
   ISHOD NA KRAJU (nalog je zavrsen), zastoj je STANJE USRED RADA (nalog je u
   tijeku). Tko ih spoji u jedan razred, izgubio je razliku koju dispecer
   upravo treba vidjeti.
   ⚠️ DVIJE BOJE, JEDNO PRAVILO: narancasto dok je „ocekivano do" u buducnosti,
   crveno kad prode. Crvenu nosi `.tg-zas--rok`, ne poseban razred oznake. */
.tg-zas { display: inline-flex; align-items: center; gap: 4px; background: var(--orange-bg, #FFF7ED);
  color: var(--orange-text, #9A3412); border-radius: 6px; padding: 1px 6px;
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; margin-top: 3px; }
.tg-zas i { font-size: 13px; }
.tg-zas--rok { background: #FEE2E2; color: #B91C1C; }
/* Cip „U zastoju N" — ista namjena kao `.wchip--ned` (izdvaja podskup koji
   trazi paznju), pa i ista obitelj boja. */
.wchip--zas { border-color: var(--orange-text, #9A3412); color: var(--orange-text, #9A3412); }
/* ⚠️ „Cekaju mene" nosi BREND-ZLATNU, ne narancastu: to nije zaostatak nego
   MOJ posao — razlika koju ostali cipovi (rok, nedovrseno, zastoj) ne prave. */
.wchip--ja { border-color: var(--brand-secondary); color: #8A5A00; }
.wchip--ja.sel { background: var(--brand-secondary); border-color: var(--brand-secondary); color: #fff; }
.wchip--zas.sel { background: var(--orange-text, #9A3412); border-color: var(--orange-text, #9A3412); color: #fff; }
/* Redak pod trakom koraka u glavi naloga: cijeli zapis + „Nastavi". */
.zas-crta { margin-top: 10px; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; color: #7C2D12; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; }
.zas-crta b { color: #9A3412; }
.zas-crta .btn { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.tg-ned { display: inline-flex; align-items: center; gap: 4px; background: var(--orange-bg, #FFF7ED); color: var(--orange-text, #9A3412); border-radius: 6px; padding: 1px 6px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
/* ⚠️ ISTI OBLIK KAO `.tg-ned`, DRUGA BOJA (10.09.2026.): „za fakturiranje" je
   posao koji ceka (narancasto, `tg-ned`), „fakturirano" je zavrsena cinjenica
   (zeleno). Dva stanja istog pojma nose isti oblik da se citaju kao par. */
/* ⚠️ TRAG ISPRAVKA IZ UREDA JE FUSNOTA, NE OPTUZBA (12.09.2026.). Zato je tih:
   siva, bez pozadine u boji i bez usklicnika — uz `tg-ned` (narancasto) i
   `tg-fakt` (zeleno) koji nose STANJA. Ovo nosi cinjenicu o zapisu, i mora se
   moci procitati (`--color-text-tertiary`, 4,76:1 na bijelom), ali ne smije
   vikati glasnije od podatka uz koji stoji. */
.wo-ispr { display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-text-tertiary, #64748B); font-size: var(--fs-micro);
  font-weight: 600; white-space: nowrap; cursor: help; }
.tg-fakt { display: inline-flex; align-items: center; gap: 4px; background: #ECFDF5; color: #15803D; border-radius: 6px; padding: 1px 6px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }

.znak--off { background: var(--color-surface, #F8FAFC); color: var(--color-text-tertiary, #94A3B8); }
.pol { border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px;
  padding: 10px; margin-bottom: 8px; }
.pol.ugasena { opacity: .6; background: var(--color-surface, #F8FAFC); }
.pol__f { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.uz-gumb { display: flex; gap: 6px; align-items: stretch; }
.uz-gumb select { flex: 1; min-width: 0; }
.btn.btn--plus { padding: 0 11px; flex: 0 0 auto; }
.btn.btn--plus .mdi { font-size: 17px; }
/* Pod-obrazac: ISPOD reda, u punoj sirini modala. Stisnut u pola stupca bio bi
   neupotrebljiv, a upravo ondje se upisuje najvise teksta. */
.pod { border: 1px solid var(--brand-primary, #1F4E8A); border-radius: 10px;
  padding: 12px; background: var(--color-info-bg, #EEF2FF); }
.pod__h { font-weight: 700; color: var(--brand-primary, #1F4E8A);
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.pod .fgrid { margin-bottom: 4px; }
.pod input, .pod select { background: #fff; }
.pod__f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.modal.modal--siroki .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.modal.modal--siroki .fgrid .full { grid-column: 1 / -1; }
/* Sazetak i vrsta trebaju punu sirinu; ostalo ide u dva stupca. */
.modal.modal--siroki .vrsta-kartice { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .modal.modal--siroki .fgrid { grid-template-columns: minmax(0, 1fr); }
  .modal.modal--siroki .vrsta-kartice { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.modal__head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; background: linear-gradient(120deg, var(--brand-primary-dark, #0F2C4D), var(--brand-primary, #1F4E8A)); color: #fff; }
.modal__head .mdi { font-size: 19px; color: var(--brand-secondary-light, #FCD34D); }
.modal__head h3 { font-size: var(--fs-lg); font-weight: 700; }
.modal__close { margin-left: auto; background: rgba(255,255,255,0.12); border: none; color: #E2E8F0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: var(--fs-lg); }
.modal__body { padding: 15px 16px; overflow-y: auto; }
.modal__foot { padding: 12px 16px; border-top: 1px solid var(--color-border, #E5E7EB); display: flex; gap: 8px; }
.modal__foot .spacer { flex: 1; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.fgrid .full { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); }
.fld label .req { color: var(--red, #EF4444); }
/* ⚠️ NATPIS KVACICE NIJE NASLOV POLJA (04.09.2026., Mladenova snimka). Oba su
   `<label>`, pa je `.fld label` kvacicama davao naslovni stil — velika slova,
   sivo, razmaknuto — i „struja" je izgledala kao NOVO POLJE odvojeno od svoje
   kvacice, a ne kao izbor uz nju. Naslov opisuje polje, natpis kvacice je
   VRIJEDNOST u njemu. */
.fld .kvacica { font-size: var(--fs-base); font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--color-text-primary, #0F172A);
  justify-content: flex-start; }
.fld .visestruko { grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: 6px 18px; }
/* ⚠️ KVACICA NIJE POLJE ZA UPIS: naslijedila je sirinu polja obrasca —
   izmjereno 105 px umjesto ~13 — pa je natpis stajao pola stupca dalje i
   izgledao kao tudi tekst. Kutija je kutija, ne unos. */
.fld .kvacica input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.fld input, .fld select, .fld textarea { border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: var(--fs-base); background: var(--color-surface, #F8FAFC); outline: none; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--brand-primary, #1F4E8A); background: #fff; box-shadow: 0 0 0 3px rgba(31,78,138,0.08); }
.fld input.err, .fld textarea.err { border-color: var(--red, #EF4444); background: #FEF2F2; }
/* ⚠️ VIŠEREDNO POLJE nasljeđuje SVE od jednorednog (23.09.2026.) — dodano je
   samo ono što `input` nema: okomito rastezanje i nasljeđivanje fonta, koji
   `textarea` po standardu NE nasljeđuje. Bez toga bi „drugi nazivi" bili u
   monospace fontu preglednika, usred obrasca u Jakarti. */
.fld textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
.fld .hint { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }
.fld--check { flex-direction: row; align-items: center; gap: 8px; }
.fld--check input { width: 16px; height: 16px; }
.fld--check label { text-transform: none; letter-spacing: 0; font-size: var(--fs-base); color: var(--color-text-primary, #0F172A); font-weight: 500; }
.modal-warn { display: flex; gap: 10px; background: var(--red-bg, #FEE2E2); border-radius: 10px; padding: 11px 13px; font-size: var(--fs-base); color: var(--red-text, #B91C1C); }
.modal-warn .mdi { font-size: 19px; }
.btn--danger { background: var(--red, #EF4444); border-color: var(--red, #EF4444); color: #fff; }

/* Toast */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 80px); z-index: 2100;
  background: var(--brand-primary-dark, #0F2C4D); color: #fff; border-radius: 10px; padding: 10px 16px;
  font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 8px; opacity: 0;
  transition: transform 0.25s, opacity 0.25s; box-shadow: 0 12px 30px rgba(15,23,42,0.3); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast .mdi { font-size: 17px; color: #86EFAC; }
/* ⚠️ Upozorenje NIJE potvrda. Kolizija, termin nakon roka i odbijen potez moraju
   izgledati drukcije od „spremljeno" — zelena kvacica na upozorenju je poruka
   koja se ne procita. Stoji dulje jer nosi recenicu, ne rijec. */
.toast.upoz { background: #92600A; }
.toast.upoz .mdi { color: #FDE68A; }
.toast.lose { background: #B91C1C; }
.toast.lose .mdi { color: #FECACA; }

/* Upload zona */
.upload-zone { border: 1.5px dashed #C7D2FE; background: var(--color-info-bg, #EEF2FF); border-radius: 11px; padding: 16px;
  display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.upload-zone:hover { background: #E0E7FF; border-color: var(--brand-primary, #1F4E8A); }
.upload-zone > .mdi { font-size: 28px; color: var(--brand-primary, #1F4E8A); }
.upload-zone b { font-size: var(--fs-base); }
.upload-zone div { font-size: var(--fs-base); color: var(--color-text-secondary, #475569); }
.upload-zone span { margin-left: auto; font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); text-align: right; }
.doc-new { animation: docIn 0.4s ease; }
@keyframes docIn { from { background: var(--green-bg, #DCFCE7); } to { background: transparent; } }
/* Shema vozila s markerima oštećenja */
.dmg-map { background: var(--color-surface, #F8FAFC); border: 1px solid var(--color-border, #E5E7EB); border-radius: 11px; padding: 12px; }
.dmg-map h4 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.dmg-map h4 .mdi { font-size: var(--fs-md); color: var(--brand-primary, #1F4E8A); }
.dmg-svg { width: 100%; height: auto; display: block; }
.dmg-pin { cursor: pointer; }
.dmg-pin circle { stroke: #fff; stroke-width: 2; }
.dmg-pin text { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); font-weight: 700; fill: #fff; text-anchor: middle; }
.dmg-pin.sel circle { stroke: var(--brand-secondary, #D99A18); stroke-width: 3; }
.dmg-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 9px; font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.dmg-legend span { display: flex; align-items: center; gap: 4px; }
.dmg-legend i.sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
/* Kartice oštećenja */
.dmg-card { border: 1px solid var(--color-border, #E5E7EB); border-radius: 11px; padding: 11px 13px; margin-bottom: 9px; display: flex; gap: 11px; }
.dmg-card.sel { border-color: var(--brand-primary, #1F4E8A); box-shadow: 0 0 0 2px rgba(31,78,138,0.12); }
.dmg-card__no { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dmg-card__title { font-size: var(--fs-base); font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dmg-card__meta { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); margin-top: 2px; }
.dmg-card__meta .mono { font-family: 'JetBrains Mono', monospace; }
.dmg-card__desc { font-size: var(--fs-sm); color: var(--color-text-secondary, #475569); margin-top: 5px; }
.dmg-card__right { margin-left: auto; text-align: right; flex-shrink: 0; }
.dmg-card__cost { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-base); font-weight: 700; }
.dmg-thumbs { display: flex; gap: 5px; margin-top: 7px; }
.dmg-thumb { width: 46px; height: 34px; border-radius: 6px; background: linear-gradient(135deg, #E2E8F0, #CBD5E1); border: 1px solid var(--color-border, #E5E7EB); display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: var(--fs-base); cursor: pointer; }
.sev-chip { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 999px; padding: 1px 7px; }
.sev-chip--low { background: #FEF9C3; color: #A16207; }
.sev-chip--mid { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.sev-chip--high { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.sev-chip--fixed { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.sbody { display: none; padding: 14px 16px; }
.sbody.active { display: block; }

/* Kartice s podacima */
.dcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* Kartica je BIJELA (tijelo je sivo) i padding je mockupov 11px 13px 12px. */
.dcard { background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB); border-radius: 11px; padding: 11px 13px 12px; }
/* Olovka/povijest u zaglavlju kartice — jedini put do uredivanja te kartice. */
.dcard h4 .ed { margin-left: auto; color: var(--color-text-tertiary, #94A3B8); font-size: 13px; cursor: pointer; }
.dcard h4 .ed:hover { color: var(--brand-primary, #1F4E8A); }
.dcard h4 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary, #94A3B8); display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.dcard h4 .mdi { font-size: var(--fs-md); color: var(--brand-primary, #1F4E8A); }
.dfield { display: flex; justify-content: space-between; gap: 10px; padding: 3.5px 0; border-bottom: 1px dashed var(--color-border, #E5E7EB); font-size: var(--fs-sm); align-items: baseline; }
.dfield:last-child { border-bottom: none; }
/* BEZ FIKSNIH 100 px: dug natpis se u toj sirini lomio u dva reda. Umjesto
   sirine, natpis se NE STISCE (flex: none) a vrijednost ide DESNO — isti obrazac
   kao mockup. Natpisi su uz to skraceni: izvor pripada OZNACI, ne natpisu
   (Odometar + oznaka GNSS, ne "Odometar (GNSS, uredaj)"). */
.dfield__lbl { flex: none; color: var(--color-text-secondary, #475569); }
.dfield__val { font-weight: 600; text-align: right; margin-left: auto; }
.dfield__val.mono { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); }
.dfield__val--na { color: var(--color-text-tertiary, #94A3B8); font-weight: 400; }
.can-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.odo-big { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 800; }
.odo-sub { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }

/* Galerija slika */
.gal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 12px; }
.gal__main { grid-column: 1 / 3; grid-row: 1 / 3; }
.gal__ph { background: linear-gradient(135deg, #E2E8F0, #CBD5E1); border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 19px; }
.gal__main .gal__ph { height: 100%; aspect-ratio: auto; font-size: 32px; }
.gal__add { border: 1.5px dashed var(--color-border, #E5E7EB); background: #fff; color: var(--brand-primary, #1F4E8A); cursor: pointer; }

/* Tablice (dnevnik goriva, servis, gume, registracija) */
.tbl-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tbl-bar input[type=date] { border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px; padding: 6px 9px; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-sm); background: var(--color-surface, #F8FAFC); }
.tbl-bar .spacer { flex: 1; }
/* Tablica je OMEDENA i zaobljena, sa sivim zaglavljem — mockup table.t. */
/* ⚠️ `overflow: clip`, NE `hidden` — i to je jedina razlika izmedu ljepljivog
   zaglavlja koje radi i onoga koje samo tako pise.

   `hidden` cini tablicu VLASTITIM KLIZISTEM koje se nikad ne kliza, pa se
   `position: sticky; top: 0` lijepi za KUTIJU TABLICE — a ona otklizi zajedno s
   recima. `clip` reze jednako (zaobljeni uglovi ostaju), ali klizište NE stvara.

   IZMJERENO 2026-08-26 u pregledniku, odstupanje zaglavlja od vrha klizne zone
   nakon klizanja do dna (Radni nalozi, 1366×768):
       overflow: hidden  → −728 px   (zaglavlje je otislo van)
       overflow: visible →    0 px
       overflow: clip    →    0 px   uz zaobljenje 11px
   Do tog mjerenja je `.wo-master .tbl thead th` DEKLARIRAO `sticky` i uz njega
   je stajao komentar da radi — a nije radio nikad. Deklaracija nije ponasanje. */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--color-surface-elevated, #FFFFFF); border: 1px solid var(--color-border, #E5E7EB); border-radius: 11px; overflow: clip; }
.tbl th { background: #F1F5F9; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary, #475569); padding: 8px 10px; border-bottom: 1px solid var(--color-border, #E5E7EB); white-space: nowrap; }
/* ⚠️ LJEPLJIVO ZAGLAVLJE NA OSNOVNOJ KLASI, ne devetnaest pojedinacnih iznimaka.
   Tablica koja NIJE u kliznoj zoni ovime ne dobiva nista (nema se za sto
   zalijepiti), a svaka koja jest — dobiva. Pozadina `th`-a je neprozirna, pa
   redci ne prosijavaju kroz zaglavlje. */
.tbl thead th { position: sticky; top: 0; z-index: 2; }
/* ⚠️ SLOVA SU TAMNIJA: `#111827`, ista vrijednost koju PCS koristi za celije
   tablica (Mladen, 10.09.2026.: „slova u tablici moraju biti tamnija isto kao
   pcs"). */
.tbl td { padding: 8px 10px; border-bottom: 1px solid #E5E7EB; color: #111827; }

/* ══ CITLJIVOST TABLICE — PET PRAVILA, I REDOSLIJED JE DIO SPECIFIKACIJE ══
   Izvor: `mockups/OSIRIS_NEO_tablica_citljivost_mockup.html` (10.09.2026.),
   s tablicom kontrasta iz koje su vrijednosti izvedene.

   ⚠️ ZEBRA MORA STAJATI IZNAD HOVERA. `tr:nth-child(even) td` i `tr:hover td`
   imaju ISTU specificnost (0,2,3) — i `:nth-child` i `:hover` broje se kao
   razred — pa pobjeduje ono koje je NIZE u datoteci. Zamijene li se, hover na
   svakom parnom retku tiho prestane raditi. Iz istog razloga `tr.dan` (dnevni
   razdjelnik u izvjestaju kretanja) mora ostati NIZE od zebre. */

/* 1 — ZEBRA.
   ⚠️ NIJE `#F1F5F9`, i to je mjerenje a ne ukus: `.tbl th` ima tocno tu
   vrijednost, pa bi zebra svaki drugi red obojila u boju ZAGLAVLJA — a
   vecina tablica u aplikaciji nema tamnu navy glavu koju ima `.wo-master`.
   `#F3F7FC` uz to daje ravnomjerniju ljestvicu (7,4 / 8,7 / 9,1 / 8,3 %
   luminancije po koraku, prema 9,2 / 6,9 / 9,1 / 8,3). */
.tbl tbody tr:nth-child(even) td { background: #F3F7FC; }

/* 2 — HOVER.
   ⚠️ 06.09.2026. je Mladen izricito trazio da hover OSTANE kakav je bio
   (`#F8FAFC`). Ta zabrana je 10.09. povucena — „treba napraviti tamniji
   hover" — i to uz mjerenje koje 6. rujna nije ni bilo moguce, jer zebre
   tada nije bilo: uz zebru je `#F8FAFC` SVJETLIJI od parnog retka, pa bi
   prelazak misa parni redak POSVIJETLIO. Hover bi radio obrnuto od svoje
   svrhe. Tko ovo bude vracao na `#F8FAFC` citirajuci 06.09. — citat je
   tocan, ali stariji od mjerenja. */
.tbl tbody tr:hover td { background: #E4EDF9; }

/* 3 — ZLATNE CRTE: POVUCENO 11.09.2026., NE VRACATI BEZ NOVE RIJECI.
   Narucene su 10.09. („treba mi u tablicu vratiti ove zute crte koje razdvajaju
   celije") i izvedene kao TRAJNI razdjelnici na svakom retku
   (`.tbl tbody td + td { box-shadow: inset 2px 0 0 rgba(217,154,24,.38) }`).
   Mladen ih je odobrio NA MOCKUPU, a odbio na zivoj tablici od 60 redaka:
   „napravio mi je zute crte izmedu stupaca — to mi treba samo na odabranima."
   ⚠️ Tko ovo bude vracao citirajuci nalog od 10.09.: citat je tocan, ali
   stariji od ekrana na kojem je mjeren. Isto kao s hoverom od 06.09.

   ⚠️ POSLJEDICA KOJU TREBA CUVATI: zlatna crta je time opet OZNAKA, ne ukras.
   `box-shadow` na `<td>` znaci TOCNO DVIJE stvari i nijednu vise:
       zlatna na SVIM celijama reda (`tr.sel td`)  → red je odabran
       zelena na PRVOJ celiji (`td:first-child`)   → nalog je zavrsen
   Na redu koji je zavrsen I odabran pobjeduje zlatna — odabir je jaci i
   prolazan signal. Trece znacenje se ne dodaje. */

/* 4 — ODABRANI RED (Mladen: „odabrani red je slabo uocljiv, treba biti
   tamniji"). Tamnije vrijednosti nose tablice naloga i zahtjeva, i pravilo
   stoji GORE, uz ostala `.wo-master .tbl` pravila (jedan selektor — jedno
   mjesto). Ovdje ostaje samo opcenito pravilo, za tablice izvan `.wo-master`:
   zatecene vrijednosti i tek toliko specificnosti da nadjaca zebru. */
.tbl tbody tr.sel td, .tbl tbody tr.selected td {
  background: var(--color-info-bg, #EEF2FF);
  box-shadow: inset 3px 0 0 var(--brand-secondary, #D99A18); }

/* 5 — TEKST KOJI JE BIO PRESVIJETAO (Mladen: „font je previse svijetao pa je
   napor za oci").
   ⚠️ FONT NIJE PROBLEM — boja jest. Sve tezine Plus Jakarta Sans (400-800) su
   samoposluzene u `vendor/fonts.css`. Drugi red celije je na `#64748B` bio
   4,42:1 na zebri i 3,24:1 na odabranom retku pod hoverom. */
.tbl .zk-sub, .tbl .wo-jed { color: var(--color-text-secondary, #334155); }
.tbl .na { color: var(--color-text-tertiary, #64748B); }
.tbl tbody tr:last-child td { border-bottom: none; }
/* ⚠️ DNEVNI RAZDJELNIK u izvjestaju kretanja — vrijednosti doslovno iz mockupa
   (`tbody tr.dan td { background:#F6F9FC; font-weight:700; font-size:11.5px;
   color: var(--navy-d) }`). Ne dobiva `:hover` podlogu: naslov reda nije redak
   koji se pokazuje ni bira. */
.tbl tbody tr.dan td { background: #F6F9FC; font-weight: 700; font-size: 11.5px;
  color: var(--brand-primary-dark, #0F2C4D); }
.tbl tbody tr.dan:hover td { background: #F6F9FC; }
/* Znak „dolazak je sljedeceg dana" — najuzi koji stane u stupac od 64 px. */
.tbl .preko-noci { font-size: 8.5px; font-weight: 800; color: var(--brand-secondary, #D99A18);
  margin-left: 2px; vertical-align: super; cursor: help; }
.tbl .num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.tbl tfoot td { font-weight: 700; background: var(--color-surface, #F8FAFC); border-bottom: none; }
.tbl .act { text-align: right; white-space: nowrap; }
.tbl .act .mdi { font-size: var(--fs-lg); color: var(--color-text-tertiary, #94A3B8); cursor: pointer; margin-left: 7px; }
.tbl .act .mdi:hover { color: var(--brand-primary, #1F4E8A); }
.tbl-note { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); margin-top: 10px; display: flex; align-items: flex-start; gap: 6px; }
.tbl-note .mdi { font-size: var(--fs-md); color: var(--brand-primary, #1F4E8A); }

.placeholder { border: 2px dashed var(--color-border, #E5E7EB); border-radius: 14px; padding: 56px 20px; text-align: center; color: var(--color-text-tertiary, #94A3B8); }
.placeholder .mdi { font-size: 40px; display: block; margin-bottom: 8px; }
.placeholder h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--color-text-secondary, #475569); margin-bottom: 4px; }
.placeholder p { font-size: var(--fs-base); max-width: 480px; margin: 0 auto; }

/* ===== NADZORNA PLOČA ===== */
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
/* ⚠️ `margin-bottom: 0` NIJE UKRAS (11.09.2026., Mladen: „sredina teksta i
   butuna moraju biti na istom pravcu"). `.page h1` nosi `margin-bottom: 12px`,
   a `align-items: center` centrira MARGIN BOX — pa je naslov sjedao 6 px iznad
   sredine gumba pokraj sebe (izmjereno: naslov 64–89, gumb 64,5–100,5).
   Razmak ispod glave ionako daje sama `.page-head` (`margin-bottom: 18px`), pa
   je ta margina bila i suvisna. */
.page-head h1 { font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 0; }
.page-head__sub { font-size: var(--fs-base); color: var(--color-text-secondary, #475569); }
.page-head__actions { margin-left: auto; display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; padding: 8px 14px;
  font-family: inherit; font-size: var(--fs-base); font-weight: 600; cursor: pointer;
  border: 1px solid var(--color-border, #E5E7EB); background: var(--color-surface-elevated, #FFFFFF); color: var(--color-text-primary, #0F172A); }
.btn--primary { background: var(--brand-primary, #1F4E8A); border-color: var(--brand-primary, #1F4E8A); color: #fff; }
/* ⚠️ KLASA JE POSTOJALA BEZ PRAVILA, i to na 47 MJESTA (izmjereno 2026-08-23).
   Svaki `btn btn--sm` renderirao se u punoj velicini `.btn`, pa je „mali gumb"
   bio dogovor koji nista ne provodi — najvidljivije u praznim stanjima, gdje je
   radnja unutar poruke izgledala kao radnja nad ekranom.

   ⚠️ `.btn` SE NE DIRA. Mockup ima manju osnovnu ljestvicu (`7px 12px / 12.5px`),
   ali globalna velicina gumba je odluka na razini APLIKACIJE, a ne stvar koju
   presuduje jedan mockup (odluka Mladena 2026-08-23). Mockup je obvezujuc za
   raspored i strukturu, NE za tokene koji vrijede svugdje.

   Gdje `btn--sm` PRIPADA: radnja unutar poruke („Pokušaj ponovno"), radnja u
   RETKU tablice, radnja u traci NAD tablicom. Gdje NE pripada: podnozje modala —
   tamo svih 36 ostalih gumba koristi `.btn`, pa je CAN modal bio jedini manji, i
   to nitko nije vidio jer je klasa bila mrtva. */
.btn--sm { padding: 5px 10px; font-size: var(--fs-micro); gap: 5px; }
.btn--sm .mdi { font-size: var(--fs-base); }
.ai-card__icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.ai-card__icon--warn { background: #FEF3C7; color: #B45309; }
.ai-card__icon--danger { background: #FEE2E2; color: #B91C1C; }
.ai-card__icon--info { background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A); }
.ai-card__icon--ok { background: var(--green-bg, #DCFCE7); color: #15803D; }
.eqst { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.eqst--ok { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.eqst--miss { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.eqst--wait { background: #F1F5F9; color: var(--color-text-secondary); }
/* Tko i kada uz stavku opreme — isto sto nose potpis i kvacice zadataka. */
.wo-sub { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
/* ===== KLIJENTI (sifrarnik + operativa) — mockups/OSIRIS_NEO_klijenti_mockup.html
   ⚠️ Sve klase nose prefiks `kl-`. Mockup koristi `.card`, `.chip`, `.two`,
   `.search` — imena koja u ovom SPA-u VEC POSTOJE i drze druge ekrane.
   Preuzimanje bez prefiksa tiho bi prebojalo pola aplikacije. */
/* ⚠️ `align-items: start` → `stretch` (03.09.2026.): sa `start` je svaka
   strana visoka koliko joj je sadrzaj, pa nema sto klizati u sebi i klizi
   stranica. `min-height: 0` je uvjet da klizni okvir uopce moze biti manji od
   sadrzaja unutar flex/grid roditelja. */
.kl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch;
  flex: 1; min-height: 0; }
.kl-two > * { min-height: 0; }
@media (max-width: 1100px) { .kl-two { grid-template-columns: 1fr; } }
.kl-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.kl-search { border: 1px solid var(--color-border); border-radius: 9px; padding: 9px 12px;
  font-family: inherit; font-size: 13px; flex: 1; min-width: 240px; background: #fff; }
.kl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.kl-chip { border: 1px solid var(--color-border); background: #fff; border-radius: 999px;
  padding: 5px 12px; font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; }
.kl-chip.on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.kl-chip .n { opacity: 0.75; margin-left: 4px; }

/* ⚠️ `clip` → `auto` (03.09.2026.). Biljeska uz `.kd` je bila tocna dok ekran
   nije imao vlastite klizace: tada je `hidden` odlijepio traku jer je stvarao
   LAZNI spremnik. Sada je spremnik PRAVI i to je upravo ono sto treba — svaka
   strana klizi u sebi, a ljepljiva djeca imaju za sto se uhvatiti.
   `clip` bi ih sada odsjekao. */
.kl-card, .kl-det { background: var(--color-surface-elevated); border: 1px solid var(--color-border);
  border-radius: 10px; overflow: auto; overscroll-behavior: contain; }
.kl-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
/* ⚠️ ISTA VRIJEDNOST KAO `.wo-master .tbl thead th` — ne nova. Zaglavlje je
   dotad bilo obicno i otklizalo je s tablicom; tek s vlastitim klizacem iznad
   ima za sto se zalijepiti. */
.kl-tbl thead th { position: sticky; top: 0; z-index: 3;
  text-align: left; font-size: 12px; color: #E5EAF2; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 10px 12px; font-weight: 700; background: var(--brand-primary-dark); }
.kl-tbl td { padding: 10px 12px; border-bottom: 1px solid #F1F5F9; vertical-align: top; }
.kl-tbl tbody tr { cursor: pointer; }
/* ⚠️ ZEBRA I OVDJE (Mladen, 10.09.2026.: „sve tablice moraju biti zebraste
   kao u projektu pcs"). Stoji PRIJE hovera i odabira, pa ih ne pregazi —
   hover i odabir ostaju u zatecenim bojama. */
.kl-tbl tbody tr:nth-child(even) td { background: #F1F5F9; }
.kl-tbl tbody tr:hover td { background: #FAFCFF; }
.kl-tbl tr.sel td { background: #F5F8FE; border-top: 1px solid #DCE6F5; border-bottom: 1px solid #DCE6F5; }
.kl-c { text-align: center; }
.kl-small { font-size: 12px; color: var(--color-text-secondary); }
.kl-dim { color: var(--color-text-tertiary); }

.kl-pill { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12px;
  font-weight: 700; white-space: nowrap; }
.kl-pill--ugovor { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.kl-pill--bez { background: #F1F5F9; color: var(--color-text-secondary); }
.kl-pill--istekao { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.kl-pill--odobren { background: #EEF2FF; color: #3730A3; }
.kl-pill--tijeku { background: #FEF3C7; color: #B45309; }
.kl-zona-ok { color: var(--green-text, #15803D); font-weight: 700; }
.kl-zona-no { color: var(--color-text-tertiary); }

.kl-det__h { padding: 13px 16px; border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kl-det__h h2 { margin: 0; font-size: 16px; }
.tabs > .tab .n { background: #EEF2FF; color: #3730A3; border-radius: 999px; padding: 0 6px; font-size: 12px; margin-left: 4px; }
.kl-det__b { padding: 14px 16px; }

.kl-grp { margin-bottom: 14px; }
.kl-grp__h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px;
  padding: 8px 11px; background: #FBFCFE; border: 1px solid var(--color-border); border-radius: 8px 8px 0 0; }
.kl-grp__h .m { font-weight: 500; color: var(--color-text-secondary); font-size: 12px; }
.kl-grp .kl-tbl { border: 1px solid var(--color-border); border-top: 0; }
.kl-grp .kl-tbl thead th { background: #F1F5F9; color: var(--color-text-secondary); letter-spacing: 0.03em; }
.kl-note { background: #EEF2FF; color: #3730A3; border-radius: 8px; padding: 8px 11px; font-size: 12.5px; margin: 10px 0; }
.kl-izvoz { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; background: #FBFCFE;
  border: 1px solid var(--color-border); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.kl-fld label { display: block; font-size: 12px; color: var(--color-text-secondary); font-weight: 600;
  margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
.kl-fld input, .kl-fld select { border: 1px solid var(--color-border); border-radius: 7px;
  padding: 7px 10px; font-family: inherit; font-size: 13px; background: #fff; }
.kl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.kl-f { border-bottom: 1px dotted #E2E8F0; padding: 7px 0; display: flex; gap: 10px; align-items: baseline; }
.kl-f__l { font-size: 12px; color: var(--color-text-secondary); min-width: 118px;
  text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.kl-f__v { font-weight: 600; }
.kl-prazno { text-align: center; color: var(--color-text-tertiary); font-size: 13px; padding: 26px 14px; }

/* podtabovi Nalozi | Klijenti u pogledu Radni nalozi */
.kl-subtabs { display: flex; gap: 6px; margin-bottom: 12px; align-items: center; }
.kl-stab { padding: 8px 15px; font-family: inherit; font-weight: 700; color: var(--color-text-secondary);
  cursor: pointer; border-radius: 999px; border: 1px solid var(--color-border); background: #fff; font-size: 13px; }
.kl-stab.on { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color: #fff; }
.kl-stab .n { background: var(--brand-secondary); color: #1a1a1a; border-radius: 999px;
  padding: 0 7px; font-size: 12px; margin-left: 6px; }
.ai-card { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--color-border, #E5E7EB); }
.ai-card:last-child { border-bottom: none; }
.ai-card p { font-size: var(--fs-sm); color: var(--color-text-secondary, #475569); }
.ai-card b { color: var(--color-text-primary, #0F172A); }



/* ===== EKRAN PRIJAVE (nema ga u mockupu; stil po registraciji iz PWA v3) ===== */
.login { position:fixed; inset:0; z-index:4000; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(160deg,#0F2C4D 0%,#1F4E8A 100%); }
.login.hidden { display:none; }
.login__card { width:min(400px,92vw); background:#fff; border-radius:16px; padding:34px 30px;
  box-shadow:0 24px 60px rgba(15,23,42,0.35); }
.login__brand { display:flex; align-items:baseline; justify-content:center; gap:10px;
  margin-bottom:22px; }
.login__brand i { font-size:30px; color:var(--brand-primary); }
.login__brand b { font-size:20px; letter-spacing:-0.02em; color:var(--brand-secondary); }
.login__lbl { display:block; font-size: var(--fs-sm); font-weight:600; text-transform:uppercase;
  letter-spacing: 0.04em; color:var(--color-text-secondary); margin:0 0 5px; }
.login__in { width:100%; padding:11px 12px; border:1px solid var(--color-border);
  border-radius:9px; font-size: var(--fs-md); font-family:inherit; margin-bottom:14px; }
.login__in:focus { outline:none; border-color:var(--brand-primary);
  box-shadow:0 0 0 3px rgba(31,78,138,0.12); }
.login__btn { width:100%; padding:12px; border:0; border-radius:9px; cursor:pointer;
  background:var(--brand-accent); color:#3A2A05; font-weight:700; font-size: var(--fs-md);
  font-family:inherit; }
.login__btn:disabled { opacity:0.6; cursor:default; }
/* ═══ ISPIS (popis trackera za montere) ═══════════════════════════════
   Preglednicki ispis, ne PDF s posluzitelja: ovo je popis za u kombi, ne
   dokument s potpisom. Ista oznaka poslije moze proci kroz WeasyPrint ako
   zatreba arhivski primjerak — drugi cjevovod se ne gradi unaprijed. */
@media print {
  /* Sve osim ispisa nestaje — inace se na papir prenese i izbornik i karta. */
  body > *:not(#ispis) { display: none !important; }
  #ispis { display: block !important; }
  @page { size: A4 landscape; margin: 12mm; }
  html, body { background: #fff; }
}
/* ⚠️ NA EKRANU GA NEMA — NIKAD, bez obzira na stanje u kodu.
   Prva inacica ga je pokazivala prije `window.print()` i oslanjala se na to da
   ga netko poslije sakrije; zatvaranje pregledinka ispisa ostavljalo je popis
   zalijepljen na vrhu stranice (prijavio Mladen 2026-08-19). Vidljivost je
   sada stvar MEDIJA, ne stanja koje se mora vratiti — greska tog oblika vise
   nije moguca. */
#ispis { display: none; }
#ispis { font-family: 'Plus Jakarta Sans', sans-serif; color: #0F172A; }
.ispis-str { page-break-after: always; }
.ispis-str:last-child { page-break-after: auto; }
.ispis-glava { display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 2px solid #1F4E8A; padding-bottom: 6px; margin-bottom: 10px; }
.ispis-glava h1 { font-size: 15pt; margin: 0; color: #0F2C4D; }
/* ⚠️ VISINA JE ZADANA, NE `max-height` (27.09.2026.). Raspored stranica mjeri
   sondu odmah nakon umetanja, a ugradena slika tada jos nije dekodirana i ima
   visinu 0 — zaglavlje je u mjerenju bilo 42 px, na papiru 88 px, i svaka se
   stranica prelila za visinu logotipa. `object-fit` cuva omjer siroke slike. */
.ispis-logo { height: 46px; width: auto; max-width: 220px; object-fit: contain;
  object-position: left center; display: block; }
.ispis-vrsta { font-size: 11pt; color: #475569; margin-top: 3px; text-transform: lowercase; }
.ispis-meta { font-size: 9pt; color: #475569; text-align: right; line-height: 1.5; }
/* ⚠️ GUSTOCA I `ISPIS_REDAKA` SE MIJENJAJU ZAJEDNO (31.08.2026.). Sitniji font
   bez dizanja broja redaka daje samo vise bjeline na dnu; dignut broj bez
   sitnijeg fonta prelijeva redke na sljedeci list dok zaglavlje i dalje pise
   „1 od 3". Raspored se IZVODI iz izmjerene visine svakog retka (`_ispisRaspored`),
   ne pogada. */
#ispis table, .ispis-list table { width: 100%; border-collapse: collapse; font-size: 8.5pt;
  table-layout: auto; }
#ispis th, .ispis-list th { text-align: left; background: #F8FAFC; border-bottom: 1px solid #94A3B8;
  padding: 3px 5px; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; }
/* ⚠️ JEDNO PUTOVANJE = JEDAN RED. Nijedna celija nije branila lom, pa je
   preglednik lomio najuze prve — na snimci 31.08. datum i vrijeme zavrsili su
   jedno ispod drugoga („21.08. / 09:48"). Format je bio ispravan; lom ga je
   razbio poslije. `vertical-align: middle` jer redak vise nije viserednim. */
#ispis td, .ispis-list td { border-bottom: 1px solid #E5E7EB; padding: 2.5px 5px;
  vertical-align: middle; white-space: nowrap; line-height: 1.25; }
/* ⚠️ LOKACIJE I KLIJENT DOBIVAJU SVE STO PREOSTANE, i krate se s tri tockice —
   NE lome se. Kracena adresa jest gubitak podatka, pa im ide najveca sirina
   koju stranica daje; na ekranu ostaje puni tekst (ovo je samo `@media print`). */
#ispis td.sir, .ispis-list td.sir { max-width: 62mm; overflow: hidden; text-overflow: ellipsis; }
/* ⚠️ IZNIMKA OD „JEDAN RED": zbirna ruta se PRELAMA (Mladen 26.09.2026.). Nowrap
   ruta sirila je tablicu preko stranice i preglednik je smanjivao cijeli list.
   Visina takvog retka mjeri se zasebno (`_ispisRaspored`). */
#ispis td.lom, .ispis-list td.lom { white-space: normal; overflow-wrap: anywhere; }
/* ⚠️ IMEI je jedino polje koje ljudi PREPISUJU RUKOM, i to u slabo osvijetljenoj
   garazi. Zato je monospace i vidno vece od ostalog teksta — kriva znamenka
   ovdje znaci tracker koji se ne javlja i pola dana trazenja uzroka. */
#ispis .imei, .ispis-list .imei { font-family: 'JetBrains Mono', monospace; font-size: 13pt;
  font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
#ispis .bilj, .ispis-list .bilj { width: 22%; }
#ispis .ugasen, .ispis-list .ugasen { font-size: 9pt; color: #b45309; white-space: nowrap; }
#ispis .prazno, .ispis-list .prazno { color: #94A3B8; }
.ispis-noga { margin-top: 8px; font-size: 8.5pt; color: #94A3B8;
  display: flex; justify-content: space-between; }
/* Zbrojevi i ogranicenja na LISTU (izvjestaji). Vrijednosti su iz istog niza kao
   ostatak lista (pt, #1F4E8A, #475569) — novi vizualni jezik se ne uvodi. */
.ispis-zbroj { display: flex; gap: 18px; margin: 0 0 9px; font-size: 9.5pt; color: #475569; }
.ispis-zbroj b { color: #0F2C4D; font-size: 11pt; margin-left: 5px; }
.ispis-ogr { margin-top: 9px; border-top: 1px solid #E5E7EB; padding-top: 6px;
  font-size: 8.5pt; color: #475569; }
.ispis-ogr b { color: #0F172A; }
.ispis-ogr ol { margin: 4px 0 0 16px; padding: 0; }
.ispis-ogr li { margin-bottom: 2px; }
#ispis tr { break-inside: avoid; }

.login__alt { margin-top: 8px; font-size: var(--fs-sm); text-align: center; }
.login__alt a { color: var(--navy); text-decoration: underline; cursor: pointer; }
.login__err { display:none; margin-top:12px; padding:9px 11px; border-radius:8px;
  background:var(--red-bg); color:var(--red-text); font-size: var(--fs-base); font-weight:600; }
.login__err.show { display:block; }

/* Oznaka stanja WebSocket veze (mockup je nema — podaci ne smiju izgledati svjeze
   kad veza padne). */
.wsdot { display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-sm); font-weight:600;
  padding:3px 9px; border-radius:20px; background:var(--green-bg); color:var(--green-text); }
.wsdot--off { background:var(--red-bg); color:var(--red-text); }
.wsdot__d { width:6px; height:6px; border-radius:50%; background:currentColor; }

/* Prazna stanja i ucitavanje */
.empty { padding:26px 16px; text-align:center; color:var(--color-text-tertiary); font-size: var(--fs-base); }
.empty i { display:block; font-size:26px; margin-bottom:7px; opacity:0.5; }
/* ⚠️ PRAZNO STANJE U JEDNOM REDU (03.09.2026.) — za panele niske i FIKSNE
   visine. Donji panel karte je 140 px i to je odluka o karti; okomito slozeno
   prazno stanje ondje trazi 185 px, pa gumb zavrsi ispod ruba. Modifikator, ne
   drugi razred: isti `.empty`, druga geometrija. */
.empty--red { display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 12px 4px; }
.empty--red i { display: inline-flex; font-size: 20px; margin: 0; flex-shrink: 0; }
.empty--red > span { flex: 1; min-width: 0; }
.empty--red .btn { margin-left: auto; flex-shrink: 0; }
.skel { height:52px; margin:7px 12px; border-radius:9px;
  background:linear-gradient(90deg,#EEF2F7 25%,#F8FAFC 50%,#EEF2F7 75%);
  background-size:200% 100%; animation:skel 1.2s ease-in-out infinite; }
@keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Tocka prekoracenja kojoj je ogranicenje samo PRETPOSTAVLJENO (source=no_match). */
.spd-arrow--guess { opacity:0.45; }

/* Atribut `hidden` mora nadjacati `display` iz mockup CSS-a. Bez ovoga se
   pogledi Faze 2 (Nadzorna ploca, Administracija, Radni nalozi) i dalje vide
   u navigaciji, jer `.tnav__item` ima vlastiti `display`. */
[hidden] { display: none !important; }

/* Stavke izbornika koje postoje u mockupu, ali jos nisu implementirane.
   Vide se (da je izbornik cjelovit), ali su prigusene i ne otvaraju ekran s
   demo podacima — klik objasni kada dolaze. */
.soon { opacity: 0.55; position: relative; }
.soon::after { content: "uskoro"; margin-left: 6px; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 5px; border-radius: 20px;
  background: var(--color-border); color: var(--color-text-tertiary); vertical-align: middle; }
.tabs > .tab.soon::after { content: ""; margin: 0; padding: 0; }

/* ===== MODULI: lijevi izbornik (mockups/OSIRIS_NEO_nadzorna_ploca_mockup.html) =====
   Mockupovih 13.5/11.5px podignuto na skalu (nista ispod 12px). */
.module { flex: 1; min-height: 0; display: grid; grid-template-columns: 222px 1fr;
  transition: grid-template-columns .18s ease; }
.module.collapsed { grid-template-columns: 58px 1fr; }
.smenu { background: var(--brand-primary-dark, #0F2C4D); padding: 10px 8px;
  overflow-y: auto; overflow-x: hidden; }
.smenu .burger { display: flex; align-items: center; gap: 10px; width: 100%; border: 0;
  background: transparent; color: #C7D2E1; font: inherit; font-size: var(--fs-sm);
  font-weight: 700; padding: 8px 10px; cursor: pointer; border-radius: 8px;
  margin-bottom: 8px; white-space: nowrap; }
.smenu .burger:hover { background: rgba(255,255,255,0.08); color: #fff; }
.smenu .burger .mdi { font-size: 20px; }
.smenu a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px;
  color: #C7D2E1; text-decoration: none; font-weight: 600; font-size: 13.5px;
  margin-bottom: 2px; white-space: nowrap; cursor: pointer; }
.smenu a .mdi { font-size: 19px; width: 22px; text-align: center; flex: none; }
.smenu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.smenu a.on { background: var(--brand-primary, #1F4E8A); color: #fff;
  box-shadow: inset 3px 0 0 var(--brand-secondary, #D99A18); }
/* ⚠️ Nula se NE crta: prazna značka je šum. Mjesto joj je uz naziv, ne desno
   uz rub, da se ne čita kao „skupi izbornik". */
.smenu a .smenu-b { margin-left: auto; font-size: var(--fs-micro); font-weight: 800;
  background: var(--brand-secondary, #D99A18); color: #1F2937; border-radius: 999px;
  padding: 1px 7px; }
.smenu a .soon-b { margin-left: auto; font-size: var(--fs-micro); font-weight: 700;
  background: rgba(255,255,255,0.12); color: #8FA3BD; border-radius: 6px; padding: 1px 6px; }
.smenu a.dis { color: #5C6F8C; cursor: default; }
.smenu a.dis:hover { background: transparent; color: #5C6F8C; }
.module.collapsed .smenu .burger span { display: none; }
.module.collapsed .smenu a span:not(.mdi) { display: none; }
.module.collapsed .smenu a { justify-content: center; padding: 9px 0; }
.module.collapsed .smenu a .mdi { width: auto; }
.mod-body { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* Paneli Voznog parka: karta je puni format bez paddinga, kartoteke se
   ponasaju kao `.page` (padding + vlastiti scroll). */
#modbody-park > .adm-body.active { flex: 1; min-height: 0; }
#modbody-park > .adm-body.active:not(#atab-karta) { padding: 16px 20px; overflow-y: auto; }
#atab-karta.active { display: flex; flex-direction: column; }

/* ===== NADZORNA PLOCA (mockup nadzorne ploce) =====
   Strukturno bez scrolla: fiksni redovi + .plc-main koji preostalu visinu
   dijeli karticama, a popisi unutar kartica imaju vlastiti scroll. */
#view-dashboard .page.ploca { display: flex; flex-direction: column; overflow: hidden;
  padding: 10px 16px 12px; }
.plc-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex: none; }
.plc-hd h1 { font-size: 19px; margin: 0; }
.plc-hd .spacer { flex: 1; }
.plc-dat { color: var(--color-text-tertiary); font-size: var(--fs-sm); }
.plc-kgroup { display: flex; align-items: baseline; gap: 8px; margin: 0 0 5px; flex: none; }
.plc-kgroup h2 { margin: 0; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-tertiary); }
.plc-kgroup a { font-size: var(--fs-micro); color: var(--brand-primary); font-weight: 600;
  text-decoration: none; cursor: pointer; }
.plc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 10px; flex: none; }
.plc-kpi { background: var(--color-surface-elevated); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.plc-kpi:hover { border-color: #CBD5E1; }
.plc-kpi__l { font-size: var(--fs-micro); color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.plc-kpi__l span { color: var(--orange-text); text-transform: none; letter-spacing: 0; }
.plc-kpi__v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.plc-kpi__v small { font-size: var(--fs-base); color: var(--color-text-tertiary); font-weight: 600; }
.plc-kpi__s { font-size: var(--fs-micro); color: var(--color-text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc-t-up { color: var(--green-text); }
.plc-t-down { color: var(--orange-text); }
.plc-t-flat { color: var(--color-text-tertiary); }
.plc-kpi--warn { border-left: 4px solid var(--orange); }
.plc-kpi--bad { border-left: 4px solid var(--red); }
.plc-kpi--me { outline: 2px solid var(--brand-secondary); outline-offset: -2px; }
/* Pastelna paleta — Mladenova presuda 2026-08-17 preko bijelih kartica iz
   mockupa (vracena s prijasnje ploce). Boja prati ZNACENJE, ne redoslijed:
   neutralno (a), u tijeku (c), cekanje/upozorenje (b), problem (d), plavo (f). */
.plc-kpi--a { background: linear-gradient(135deg, #EEF2FF, #E0E7FF); color: #3730A3; border-color: rgba(15,23,42,0.06); }
.plc-kpi--b { background: linear-gradient(135deg, #FEF9C3, #FDE68A); color: #92400E; border-color: rgba(15,23,42,0.06); }
.plc-kpi--c { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); color: #5B21B6; border-color: rgba(15,23,42,0.06); }
.plc-kpi--d { background: linear-gradient(135deg, #FEE2E2, #FECACA); color: #991B1B; border-color: rgba(15,23,42,0.06); }
.plc-kpi--f { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color: #1E3A8A; border-color: rgba(15,23,42,0.06); }
.plc-kpi[class*="plc-kpi--"] .plc-kpi__l { color: inherit; opacity: 0.75; }
.plc-kpi[class*="plc-kpi--"] .plc-kpi__l span { color: inherit; }
.plc-kpi[class*="plc-kpi--"] .plc-kpi__s { color: inherit; opacity: 0.8; }
.plc-kpi[class*="plc-kpi--"] .plc-kpi__v small { color: inherit; opacity: 0.8; }
.plc-main { display: grid; grid-template-columns: 1fr 390px; gap: 12px; flex: 1; min-height: 0; }
.plc-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.plc-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border);
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.plc-card--rast { flex: 1; min-height: 0; }
.plc-card__h { padding: 10px 14px; border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 8px; flex: none; }
.plc-card__h h3 { margin: 0; font-size: var(--fs-base); }
.plc-card__h .m { font-size: var(--fs-micro); color: var(--color-text-tertiary); }
.plc-card__h a { margin-left: auto; font-size: var(--fs-micro); color: var(--brand-primary);
  font-weight: 600; text-decoration: none; cursor: pointer; }
.plc-scroll { overflow-y: auto; min-height: 0; }
.plc-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.plc-tbl thead th { text-align: left; font-size: var(--fs-micro); color: #E5EAF2;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px; font-weight: 700;
  background: var(--brand-primary-dark); position: sticky; top: 0; }
.plc-tbl td { padding: 7px 12px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.plc-tbl tbody tr { cursor: pointer; }
/* ⚠️ ZEBRA I OVDJE (Mladen, 10.09.2026.: „sve tablice moraju biti zebraste
   kao u projektu pcs"). Stoji PRIJE hovera i odabira, pa ih ne pregazi —
   hover i odabir ostaju u zatecenim bojama. */
.plc-tbl tbody tr:nth-child(even) td { background: #F1F5F9; }
.plc-tbl tbody tr:hover td { background: #FAFCFF; }
.plc-crew { font-size: var(--fs-micro); color: var(--color-text-tertiary); }
.plc-alarm { display: flex; gap: 10px; padding: 7px 14px; border-bottom: 1px solid #F1F5F9;
  align-items: flex-start; cursor: pointer; }
.plc-alarm:hover { background: #FAFCFF; }
.plc-alarm .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; }
.plc-alarm .d-crit { background: var(--red); }
.plc-alarm .d-warn { background: var(--orange); }
.plc-alarm .d-info { background: var(--color-text-disabled); }
.plc-alarm b { font-size: var(--fs-sm); }
.plc-alarm .t { font-size: var(--fs-micro); color: var(--color-text-tertiary); }
.plc-alarm .when { margin-left: auto; font-size: var(--fs-micro);
  color: var(--color-text-disabled); white-space: nowrap; }
.plc-vrow { display: flex; align-items: center; gap: 10px; padding: 6px 14px;
  border-bottom: 1px solid #F1F5F9; cursor: pointer; }
.plc-vrow:hover { background: #FAFCFF; }
.plc-vrow .st { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.plc-vrow b { font-size: var(--fs-sm); min-width: 64px; }
.plc-vrow .reg { font-size: var(--fs-micro); color: var(--color-text-tertiary); min-width: 80px; }
.plc-vrow .who { font-size: var(--fs-micro); color: var(--color-text-tertiary); flex: 1;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plc-vrow .spd { font-size: var(--fs-micro); font-weight: 700; }
.plc-tjedan { padding: 8px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plc-tjedan .plc-kpi__v { font-size: 18px; }


/* ═══ ZAHTJEVI KLIJENATA (etapa 4) ═══════════════════════════════════════
   Vlastiti sloj modala jer se iz njega otvaraju ugniježđeni modali. */
/* ⚠️ `z-index` JE PROCITAN, NE POGODEN. Topbar je 1200, njegov padajuci
   izbornik 1300, zajednicki modal (`.modal-bg`) 2000, toast 2100. Ovaj sloj je
   stajao na 100 — dakle ISPOD topbara: zaglavlje modala (naslov, brojac,
   gumb za zatvaranje) bilo je prekriveno, a topbar nije bio zatamnjen jer
   zastor nikad nije ni dosao preko njega. Sada dijeli visinu sa zajednickim
   modalom, a toast ostaje IZNAD (poruka o ishodu mora se vidjeti i nad modalom).
   ⚠️ CENTRIRANO S GRANICOM VISINE: `flex-start` + `overflow:auto` na zastoru
   znacio je da se na nizem prozoru podnozje (gumbi „Spremi") nade ISPOD ruba —
   a gumb koji se ne vidi ne postoji. Sada tijelo modala kliza unutar okvira. */
/* ⚠️ ZASTOR PREKRIVA SVE (i topbar), ali OKVIR POCINJE ISPOD NJEGA: gornji
   razmak je visina topbara (52 px) + zrak. Tako zaglavlje modala nikad ne
   dolazi pod traku, a zatamnjenje svejedno pokriva cijeli prozor. Mjeri
   geometrijska tvrdnja, ne oko. */
.zk-bg { position: fixed; inset: 0; background: rgba(15,23,42,0.55); display: none;
  align-items: center; justify-content: center; z-index: 2000;
  padding: 62px 16px 24px; }
.zk-bg.open { display: flex; }
.zk-bg--sub { z-index: 2020; }
/* ⚠️ Sirina je iz mockupa (`.modal--lg`). Na 920 px su se tri gumba podnozja
   lomila u dva reda — izmjereno, ne procijenjeno. */
/* ⚠️ `max-width` UZ `width`: mockup ga deklarira, pa ga i mjerilo ocekuje —
   inace `getComputedStyle` vraca `none` i razlika je stvarna, ne kozmeticka. */
/* ⚠️ FIKSNA VISINA, NE `max-height` (02.09.2026.). S `max-height` se visina
   racunala IZ SADRZAJA, pa je okvir pri prelasku Zahtjev → Kronologija →
   Narudzba skakao: izmjereno na 1920x1080, `top` 62 → 338 → 375 px, visina
   994 → 441 → 368. Traka tabova je putovala s njim, pa se gumb „Narudzba i
   uvjeti" pomicao 150 → 426 → 463 — covjek gada metu koja bjezi.

   ⚠️ PRAZAN PROSTOR NA KRATKIM KARTICAMA JE NAMJERAN. Ne popunjavati, ne
   centrirati okomito, ne rastezati polja: cim visina opet ovisi o sadrzaju,
   skakanje se vraca. */
/* ⚠️ 1240, A NE 1080 (11.09.2026., Mladen: „prosiri modal da hitnost stane u
   jedan red"). Broj je IZRACUNAT iz reda hitnosti, ne odabran okom — i
   IZMJEREN u pregledniku prije izmjene (Chrome, 1366x768, prazan zahtjev):

     red hitnosti trazi        360 px  (4 pilule + 3 razmaka, mjereno)
     stupac na 1080 px         332 px  -> red se LOMIO U DVA (68 px umjesto 32)
     stupac = (W - 36 podloge panela - 32 razmaka mreze) / 3
       1080 -> 337   1160 -> 364   1200 -> 377   1240 -> 391  STANE

   ⚠️ NIJE NOVA MJERA U KUCI: modal naloga vec ide do `max-width: 1320px`. Ovo
   je unutar postojece ljestvice, ne njezino sirenje.
   ⚠️ ISPOD ~1230 px SIRINE PROZORA `94vw` opet stisne stupac i red se prelomi.
   To je graciozno, ne kvar, i NAMJERNO nema medija-upita za to. */
.zk-modal { background: #fff; border-radius: 12px; width: min(1240px, 94vw);
  max-width: min(1240px, 94vw);
  box-shadow: 0 18px 48px rgba(15,23,42,0.28); overflow: hidden;
  height: min(880px, calc(100vh - 86px)); display: flex; flex-direction: column; }
/* ⚠️ MALI MODAL OSTAJE PO SADRZAJU. Fiksna visina je svojstvo modala S
   TABOVIMA — ondje je skok stvaran jer se kartice izmjenjuju. Ugnijezdeni
   obrazac (+ klijent, + odjel, + kontakt, odbijanje) ima jednu karticu i
   nema se s cime raziici; 880 px za sest polja bila bi rupa, ne mir. */
.zk-modal--sm { width: min(520px, 100%); height: auto; max-height: calc(100vh - 86px); }
/* ⚠️ VLASTITA GEOMETRIJA ZAGLAVLJA ZAHTJEVA UKLONJENA 02.09.2026. Bila su
   dva zaglavlja za dvije vrste istog posla: gradijent 120deg naspram 135,
   ikona 52/12 naspram 38/9, naslov 19/800 naspram 17/700, meta `#C7D2E1`
   naspram `rgba(255,255,255,.55)`, bez valova, bez steppera, gumb zatvaranja
   s INLINE stilom umjesto razreda. Sada oba crta `wmHeroj` u `.wm-h`, a
   razlike su MODIFIKATORI ispod.

   ⚠️ NASLOV JE SADA 17 px, ne 19. To NIJE tiho ujednacavanje na sredinu:
   mockup naloga je obvezujuci oblik zaglavlja i njegova je vrijednost 17/700.
   Ako Mladen odluci da zahtjev treba glasniji naslov, mijenja se JEDNA
   vrijednost na JEDNOM mjestu — i tada je dobiva i nalog, sto je i smisao. */
/* ⚠️ I MODIFIKATOR MALOG ZAGLAVLJA JE OTISAO: ugnijezdeni obrazac koristi
   `.wm-h--sm`, pa je pravilo ostalo bez ijednog korisnika. Mrtav sloj koji
   nosi staro ime izgleda kao dokaz da staro ime jos treba. */
.zk-broj { opacity: 0.75; font-style: italic; }
/* ⚠️ BROJ NALOGA U ZAGLAVLJU SE NE ODSIJECA (08.09.2026.). IZMJERENO u Chromeu:
   h3 zahtjeva trazi 352 px, a `.wm-h__row` mu daje 314 (`max-width: 55%`), pa je
   zadnjih 38 px — dakle upravo „→ RN-2026-0005" — bilo odrezano, i to bez
   trotocke: veza je pokazivala „RN-2026-0…". Krati se IME KLIJENTA, ne broj:
   klijent stoji i u polju „Klijent" odmah ispod, a broj naloga nigdje drugdje.
   ⚠️ Pravilo je vezano na `#zkHero`, ne na `.wm-h`: zaglavlje NALOGA dijeli isti
   generator (`wmHeroj`) i njegov naslov nije mjeren pod ovim uvjetima. */
/* ⚠️ I SIRI NASLOVNI BLOK: `.wm-h__row` je 55 % zaglavlja, sto je za „broj ·
   klijent · → nalog" premalo (mjereno: treba 352 px, dobiva 314). 72 % staje
   izmedu pilula i brojke „N ranijih zahtjeva" (mjereno: ostaje ~137 px zraka),
   pa se u obicnom slucaju ne krati NISTA — trotocka ispod je samo mreza za
   izrazito duga imena klijenata. */
#zkHero .wm-h__row { max-width: 72%; }
#zkHero .wm-h__t h3 { display: flex; align-items: baseline; gap: 6px; }
#zkHero .wm-h__t h3 > .zk-h__t { overflow: hidden; text-overflow: ellipsis; }
#zkHero .wm-h__t h3 > .wo-iz { flex: 0 0 auto; }
.zk-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 3px 9px; font-size: var(--fs-xs); font-weight: 700; background: rgba(255,255,255,0.16); }
/* Pilula u TABLICI — mjere i boje iz mockupa (`.pill.p-ugovor` i drugovi). */
.zk-tpill { display: inline-block; border-radius: 999px; padding: 1px 7px;
  font-size: 11px; font-weight: 700; white-space: nowrap; }
.zk-tpill--ug { background: #DCFCE7; color: #15803D; }
.zk-tpill--bez { background: #F1F5F9; color: #475569; }
.zk-tpill--ist { background: #FEF3C7; color: #B45309; }
.zk-pill--ug { background: #16A34A; }
.zk-pill--bez { background: rgba(255,255,255,0.2); }
.zk-pill--ist { background: var(--brand-secondary); color: var(--brand-primary-dark); }

/* ⚠️ ZASEBNO IME ZNACKE ZAHTJEVA UKLONJENO 02.09.2026. — znacka taba se
   svugdje zove `.tab__n`,
   a tiha siva varijanta je `.tab__n--tiha`. Isti put kojim je 01.09. otisao
   `stab__count`. Treće ime za istu stvar znaci da izmjena boje znacke mora
   pogoditi tri mjesta, a pogodit ce dva. */
/* ⚠️ TIJELO KLIZA, OKVIR NE. `max-height: 62vh` je bio drugi limit uz onaj na
   modalu i tukao se s njim; sada tijelo uzima ono što preostane između heroja,
   kartica i podnožja (`flex: 1`), pa podnožje uvijek ostaje na ekranu. */
/* ⚠️ `scrollbar-gutter: stable` — DRUGI, TISI SKOK IZ ISTOG KVARA. Kartica
   „Zahtjev" ima klizac (sadrzaj 897 px u 805 px prostora), a „Kronologija" i
   „Narudzba" ga nemaju — bez rezerviranog zljeba sadrzaj bi pri prelasku
   poskocio VODORAVNO za sirinu klizaca, iako visina stoji. */
.zk-body { padding: 16px 18px; overflow-y: auto; scrollbar-gutter: stable;
  flex: 1; min-height: 0; }
.zk-foot { display: flex; gap: 8px; align-items: center; padding: 12px 18px;
  border-top: 1px solid var(--color-border); background: #FAFBFC; }
/* ⚠️ Suzeno na PODNOZJE: globalni `.btn` nosi svaki ekran u aplikaciji. */
.zk-foot .btn { padding: 8px 13px; font-size: 13px; }
.zk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.zk-f { display: flex; flex-direction: column; gap: 4px; }
.zk-f--full { grid-column: 1 / -1; }
/* ⚠️ TRI STUPCA SAMO NA KARTICI „ZAHTJEV" (11.09.2026.). Mjera je modifikator, a
   ne izmjena `.zk-grid`, jer taj razred dijeli OSAM ploca (Kronologija, Narudzba
   i uvjeti, Upute, podmodali) — promjena u njemu preslozila bi sve njih zbog
   jedne. `.zk-f--full` je `grid-column: 1 / -1` i radi pri svakom broju stupaca,
   pa opis preko cijele sirine ne treba nista dodatno. */
/* RAZMAK 10/12 KAO NA NALOGU - NA MODIFIKATORU, NE NA `.zk-grid`
   (14.09.2026.). Sam `.zk-grid` dijeli osam ploha i ostaje na 12/16; ovdje se
   mijenja samo kartica „Zahtjev", koja se usklađuje s tabom „Osnovno". */
.zk-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
/* ⚠️ OPISI NA POLA, PLOCICE U DRUGU POLOVICU (14.09.2026., Mladen: „u zahtjevu
   treba suziti Opis problema i Kratak opis na pola, a u drugu polovicu treba
   staviti ove plocice odrzavanje, kvar…").

   ⚠️ „POLA" NIJE MICANJE `.zk-f--full`. Ploha je TRI stupca (`.zk-grid--3`), pa
   bi polje bez tog modifikatora dobilo TRECINU, ne polovicu — izmjereno
   385,66 px naspram trazenih 586. Zato blok koji se proteze preko sva tri
   stupca, a UNUTAR SEBE dijeli na dvoje: 1189 px → dva puta 586 px uz zljeb 16.

   ⚠️ `.zk-grid`, `.zk-grid--3`, `.zk-f` i `.zk-f--full` OSTAJU NEDIRNUTI:
   `.zk-grid` dijeli osam ploha (Kronologija, Narudzba i uvjeti, Upute,
   podmodali) i to pise uz njega. Ovo je JEDINA iznimka; nijedno drugo polje ne
   mijenja sirinu.

   ⚠️ `minmax(0, 1fr)`, NE `1fr`, i `min-width: 0` na stupcima: zadano
   `min-width: auto` brani stavci mreze da se suzi ispod vlastitog sadrzaja, pa
   bi desni stupac izasao iz modala cim polje u lijevom naraste. */
.zk-opis2 { grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px;
  align-items: stretch; }
.zk-opis2 > .zk-stup { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* ⚠️ DNO SE PORAVNAVA SAMO OD SEBE (14.09.2026., Mladen: „smanji visinu polja
   Opis problema da se dno poravna s plocicama").

   ⚠️ `rows` OSTAJE 6. Upisani broj redaka bio bi tocan JEDAN DAN — do prve nove
   vrste naloga, jer vrste zavodi Mladen bez programera (`models.py`: „Mladen
   mora sam zavesti vrstu"). Sedma vrsta doda red plocica i poravnanje pukne, a
   da se nijedan redak koda nije promijenio.

   ⚠️ `flex: 1 1 0` I `height: 0`, NIKAD `flex: 1`. `flex: 1` nosi
   `flex-basis: auto`, pa polje SVOJOM sadrzajnom visinom i dalje odreduje visinu
   reda — red ostane visi od plocica i poravnanja nema. S basisom `0` polje u
   racun visine ulazi s nulom, visinu reda daju PLOCICE, a polje zatim naraste
   do njih.

   ⚠️ `min-height: 64px` OSTAJE (`.zk-f textarea` ga vec ima): poravnanje nije
   vrijedno polja u koje se ne moze pisati. Izmjereno 14.09.: najnizi slucaj je
   112 px, dakle granica se ne dodiruje.
   ⚠️ `resize: vertical` ostaje. Tko rukom razvuce polje, razbije poravnanje — i
   to je u redu, njegov je upis vazniji od crte. */
.zk-opis2 .zk-f--rast { flex: 1 1 0; min-height: 0; }
.zk-opis2 .zk-f--rast textarea { flex: 1 1 0; height: 0; min-height: 64px; }
/* ⚠️ PLOCICE VRSTE U MODALU ZAHTJEVA — MODIFIKATOR, NE IZMJENA `.vrsta` (§3.2).
   `.vrsta-kartice` i `.vrsta` nose i modal naloga, a `.wm-g > .vrsta-kartice`
   im ondje daje raspon preko cijelog reda. Izmjena bilo kojeg od njih pomakla bi
   modal naloga, pa zahtjev dobiva svoj razred.

   ⚠️ TRI STUPCA, i `minmax(0, 1fr)` a ne `1fr`: zadano `min-width: auto` brani
   stavci mreze da se suzi ispod sadrzaja, pa bi duzi naziv vrste rastegnuo
   stupac i izgurao mrezu iz polovice.
   ⚠️ BEZ `max-height` I BEZ VLASTITOG KLIZACA (§3.1): klizac unutar klizaca
   sakriva zadnji red od covjeka koji ne zna da ondje ima jos. Sedma vrsta doda
   RED, a kliza tijelo modala — kako vec kliza. */
.vrsta-kartice--zk { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ═══ KARTICA „OSNOVNO" NA NALOGU — `zk` jezik (14.09.2026.) ═══════════════
   Mladen: „ovako kako izgleda tab Zahtjev mora izgledati tab Osnovno radnog
   naloga." Sve je MODIFIKATOR: `.zk-grid`, `.zk-grid--3`, `.zk-f` i
   `.zk-f--full` se ne diraju, jer `.zk-grid` dijeli osam ploha. */

/* Traka iznad polja: lijevo prekidac „Projekt" s biracima, desno Izvedba.
   ⚠️ `flex-end`, NE `flex-start` (14.09.2026.): prekidac, biraci i pilule imaju
   natpise razlicite visine, pa se poravnavaju po DNU — inace prekidac (bez
   natpisa) visi iznad polja koja ga imaju. */
.wo-traka { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.wo-traka__l { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
/* ⚠️ Prekidac nema natpis iznad sebe, pa mu dno ne pada na isto mjesto kao
   biracima; 7 px ga vraca u red. Mjera je iz mockupa, ne izvedena. */
.wo-traka .prekidac { margin-bottom: 7px; }
/* ⚠️ POLJA PROJEKTA SU SKRIVENA DOK PREKIDAC NE STOJI. `display: flex` bi
   nadjacao `[hidden]`, pa se skrivanje mora napisati. */
.wo-traka__p { display: flex; gap: 12px; align-items: flex-start; }
.wo-traka__p[hidden] { display: none; }
/* ⚠️ POLJA TRAKE IMAJU VLASTITU SIRINU, NE RASTEGNUTU (14.09.2026., Mladen:
   „vidiš li koliko su uža polja Projekt i Faza — toliko trebaju biti, a ne ovo
   što si ti napravio"). `min-width` je dopustao rast do kraja retka; `width` +
   `flex: none` je odluka: ostatak retka pripada Izvedbi desno. */
.wo-traka__p .zk-f { width: 190px; flex: none; }
/* ⚠️ IZVEDBU DESNO DRZI `justify-content: space-between` NA TRACI, i to je sve
   sto treba: traka ima tocno dva djeteta — lijevu skupinu i Izvedbu.
   ⚠️ OVDJE JE 15.09.2026. STAJALO `.wo-traka .zk-f--izv { flex: none;
   margin-left: auto; }`. Uklonjeno je jer je mjerenje pokazalo da NE DRZI
   NISTA: s uklonjenim pravilom sve tvrdnje scenarija
   `nalog-traka-izvedba.mjs` i dalje prolaze, na 1920 i na 1366. Pravilo koje
   nista ne drzi je sloj koji ovaj projekt vec triput platio. */
/* ⚠️ PILULE IZVEDBE U TRACI NE RASTU SVAKA NA TRECINU (kao u `.zk-box`): traka
   im ne daje sirinu, pa se mjere po svom natpisu i ostaju u jednom redu. */
.wo-traka .zk-seg { flex-wrap: nowrap; }
.wo-traka .zk-seg button[disabled] { opacity: .55; cursor: not-allowed; }
/* ⚠️ OVDJE JE DO 15.09.2026. STAJALO `.wo-traka .wo-info { max-width: 50% … }`.
   Uklonjeno jer u traci nema nijednog `.wo-info`: ostatak je PRVE inacice trake,
   koja je blok izvora bila svela na tanku `.wo-info` crtu. Ta je inacica
   odbacena istog dana, pravilo je ostalo. Provjereno nad svih deset mjesta gdje
   `osiris.js` pise taj razred — nijedno nije u traci. */

/* Preklopnik „Projekt" — afordancija nad `projekt_id`, bez novog podatka. */
.prekidac { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--color-border); background: #fff; border-radius: 999px;
  padding: 6px 12px 6px 6px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--color-text-secondary, #475569); }
.prekidac > span { width: 30px; height: 18px; border-radius: 999px; background: #CBD5E1;
  position: relative; transition: background .12s; flex: none; }
.prekidac > span::after { content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: transform .12s; }
.prekidac.on { border-color: var(--brand-primary); color: var(--brand-primary); }
.prekidac.on > span { background: var(--brand-primary); }
.prekidac.on > span::after { transform: translateX(12px); }

/* Naslov odjeljka unutar `zk` mreze — preko svih stupaca. */
.zk-naslov { grid-column: 1 / -1; font-size: var(--fs-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-tertiary, #94A3B8); margin-top: 2px; }

/* ⚠️ CETIRI POLJA U JEDNOM REDU (kontakt). `minmax(0, 1fr)`, nikad `1fr`:
   zadano `min-width: auto` brani stavci da se suzi ispod sadrzaja, pa bi duza
   e-posta izgurala red iz modala. */
.zk-red4 { grid-column: 1 / -1; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }

/* ⚠️ OBA STUPCA RASTU (kartica „Opis zahvata"): ondje visinu reda ne daje nitko
   treci, pa `flex: 1 1 0` + `height: 0` urusi OBA na nulu i ostanu samo natpisi.
   Zato osnovica `auto` — razlika prema `.zk-f--rast`, gdje visinu daju plocice. */
.zk-opis2 .zk-f--rast2 { flex: 1; min-height: 0; }
.zk-opis2 .zk-f--rast2 textarea { flex: 1; min-height: 96px; }
.zk-opis2--citaj { margin-top: 10px; }

/* ⚠️ FAKTURIRANJE U JEDNOM RETKU. `.wo-dl.three` je trosio 120 px po natpisu —
   360 px prije ijedne vrijednosti — pa se „za fakturiranje" lomilo u dva reda.
   Jedan red je moguc tek zato sto je kvacica ISPRED natpisa. */
/* ⚠️ `auto-fit`, a ne cetiri imenovana stupca: nalog `bez_naplate` nema stavku
   „Broj racuna", pa bi cetvrti stupac ostao prazan i razmaknuo ostale. */
.wo-fakt-red { grid-column: 1 / -1; display: grid;
  /* ⚠️ CETIRI STAVKE NE STANU U JEDAN RED NA SVAKOJ SIRINI, i to je izmjereno:
     u modalu (1276 px) stanu, u uskom panelu master-detaila (516 px) ne — cetiri
     polja ondje padnu na 53 px, sto je uze od placeholdera.
     ⚠️ TO JE SUKOB S ODLUKOM OD 12.09. („fakturiranje u masterdetail stavi sve u
     jednu liniju"), i nastao je zato sto je 14.09. u redak dosao CETVRTI clan
     („Br. narudzbe"). Tada su bila TRI i stala su.
     ⚠️ BIRAM CITLJIVOST NAD JEDNIM REDOM: `minmax(210px, 1fr)` znaci da u panelu
     odjeljak ima DVA reda po dvije stavke, ali je svako polje upotrebljivo.
     Izmjereno: sa 140 px stupcem polje padne na 53 px — uze od vlastitog
     placeholdera, dakle polje u koje se ne vidi sto je upisano. To je isti
     prekrsaj kao natpis koji se lomi, samo tisi. Prijavljeno. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 18px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--color-border); border-radius: 10px; background: #FAFBFC; }
.wo-fakt-st { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wo-fakt-lbl { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-tertiary, #94A3B8); white-space: nowrap; }
.wo-fakt-st input { flex: 1; min-width: 0; border: 1px solid var(--color-border);
  border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; }
/* ⚠️ KVACICA SE PORAVNAVA PO SREDINI S NATPISOM: `<button>` bez ovoga sjedne na
   osnovnu crtu, pa krug visi nize od slova. */
.wo-fakt-mk { background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; line-height: 1; }

/* ⚠️ UPOZORENJE O DVOJNIKU JE SKOCNO I NIKAD ZAPREKA: `client_contacts` nema
   jedinstvenost po imenu, pa su dva Ivana Kovaca kod istog klijenta legitimna.
   ⚠️ `display: flex` NADJACAVA `[hidden]` — skrivanje se mora napisati, inace
   okvir stoji stalno. */
.zk-skok { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px; border: 1px solid var(--brand-secondary, #D99A18);
  border-radius: 10px; background: #FFFBEB; font-size: 13px; }
.zk-skok[hidden] { display: none; }
.zk-skok .red { display: flex; gap: 6px; margin-top: 6px; }

/* Dva okvira umjesto tri. */
.zk-tri--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Traka koja kaze CIJA su ovo polja — bez nje kartica mijenja sadrzaj bez
   vidljivog razloga. ⚠️ Ime razreda NE nosi rijec „obrazac": tab koji covjek
   gleda ne zove obrazac po kljucu (zatecena odluka, `naziv-obrasca.test.mjs`). */
.wo-vrsta-traka { display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border: 1px solid #C7D2FE; border-radius: 10px; background: #F7F9FF;
  font-size: 13px; margin-bottom: 10px; }
.wo-vrsta-traka .mdi { color: var(--brand-primary); font-size: 17px; }
/* ⚠️ POZADINA JE BOJA DONJIH KASETA (Mladen: „pozadina samih plocica neka bude u
   toj boji") — `#EEF2F7` s obrubom `#C6D1E0`, isto kao `.zk-box`. */
.vrsta-kartice--zk .vrsta { background: #EEF2F7; border-color: #C6D1E0; }
/* ⚠️ ODABRANO MORA OSTATI RAZLUCIVO sad kad je i NEodabrano obojeno: navy obrub
   i SVJETLIJA ploha (bijela). Zamjena je namjerno obrnuta od osnovne `.vrsta.on`
   (svijetloplava na bijelom): ondje odabir zatamni, ovdje posvijetli — jer je
   podloga vec plavkasta. Bez toga se „odabrano" gubi, a to je jedino sto
   plocica i radi. */
.vrsta-kartice--zk .vrsta.on { border-color: var(--brand-primary, #1F4E8A);
  background: #fff; box-shadow: inset 0 0 0 1px var(--brand-primary, #1F4E8A); }
/* ⚠️ ZAHTJEV IZVAN STANJA „NOVI" — plocice su SAMO ZA CITANJE (§4.2). Naslanja
   se na postojece pravilo podnozja („mijenja mu se samo podnositelj"), ne
   uvodi novo zakljucavanje. Pokazivac i `:hover` odlaze zajedno s klikom —
   ruka nad neklikajucim poljem je obecanje koje se ne ispuni. */
.vrsta-kartice--zk.je-citanje .vrsta { cursor: default; }
.vrsta-kartice--zk.je-citanje .vrsta:hover { border-color: #C6D1E0; }
.vrsta-kartice--zk.je-citanje .vrsta.on:hover { border-color: var(--brand-primary, #1F4E8A); }
/* USKLADENO S TABOM „Osnovno" NA NALOGU (14.09.2026.).
   VELICINA IDE KROZ RUNG KOJI POSTOJI, ne kroz golu brojku. `--fs-xs` NE
   POSTOJI (14 upotreba, nula definicija), pa je deklaracija bila nevaljana i
   velicina se NASLJEDJIVALA na 14 px, dok nalog svojih 12 px pise brojkom.
   `--fs-micro` je 12 px i njegov komentar imenuje bas ovu upotrebu („oznake
   polja"). Rupa `--fs-xs` se time ne krpa nego zaobilazi ISTINITO - prestaje
   se koristiti rung kojeg nema.
   IZMJERENO prije izmjene: 18 oznaka na otvorenoj plohi, sve u jednom redu,
   nijedna se ne lomi; poslije: 20 px -> 17 px visine, i dalje nijedan prijelom.
   VERZAL SE NE USKLADUJE, i to je odluka a ne previd - vidi pravilo nize:
   zvjezdica uz obavezno polje se u verzalu gubi, a upravo je ona u ovom krugu
   dobila znacenje. */
.zk-f label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-secondary, #334155); }
/* Gumb „+" uz polje: kvadratic 36×36 iz mockupa (`.plus`), ne siroki `.btn`. */
/* ⚠️ POLJA MODALA DOSAD NISU IMALA NIJEDNO PRAVILO — `textarea` je bio goli UA
   element (obrub #767676, bez zaobljenja i bez unutarnjeg razmaka). Mjerenje ga
   je naslo tek kad je par prestao gadjati PROBNI element bez klase: probni je na
   obje strane mjerio UA i reset, dakle razliku preglednika, ne dizajna. */
/* PODLOGA 8/10 KAO NA NALOGU (14.09.2026.).
   OCEKIVAO SAM DA CE `input` TIME NARASTI 34 -> 36 px. NIJE. Izmjereno
   poslije izmjene: zahtjev `input` 34, nalog `input` 37 - a uzrok nije
   podloga (oba imaju 8px gore i dolje) nego `line-height`: nalogov je 18,85 px
   (naslijedjen iz `body`), a ovdje je `normal`. Vodoravna podloga na visinu ne
   utjece uopce.
   VISINA SE U OVOM KRUGU NE DIRA, jer nije bila zadatak nego ocekivana
   posljedica - a posljedica se nije dogodila. Razlika 34/37 je prijavljena
   zasebno; zatvara ju jedan `line-height`, ali on mijenja i `textarea` u svih
   osam ploha koje dijele `.zk-f`, sto je vlastito mjerenje. */
.zk-f input, .zk-f select, .zk-f textarea {
  border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px;
  font-family: inherit; font-size: 13px; background: #fff; width: 100%; }
.zk-f textarea { resize: vertical; min-height: 64px; }
.zk-f .red { display: flex; gap: 6px; }
.zk-f .red button.btn { width: 36px; height: 36px; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center; }
.zk-f .red select, .zk-f .red input { flex: 1; }
.zk-hint { font-size: 12px; color: var(--color-text-tertiary); }
/* ⚠️ PRAZAN REDAK NE SMIJE KOSTATI VISINU (11.09.2026.). `#zkTel` i
   `#zkPravoHint` su JEDAN span koji nosi ili cinjenicu ili — do danas —
   objasnjenje; objasnjenja su otisla u `title`, pa span cesto ostaje prazan.
   Element se NE smije izostaviti: oba id-a prepisuje kod (`zkTel` pri promjeni
   kontakta). A `.zk-f` je `display:flex` s `gap:4px`, pa prazan span i dalje
   trosi tih 4 px — `:empty` ga mice zajedno s razmakom. */
.zk-hint:empty { display: none; }
/* ⚠️ TIHA OZNAKA IZVORA STOJI U REDU POLJA, ne u retku ispod — zato `flex:none`
   (da ne otima sirinu biracu) i `nowrap` (da „(iz odjela)" ne postane dva reda
   i time ipak naraste). */
.zk-f .red .zk-sub { flex: none; align-self: center; white-space: nowrap; }
/* Tri uokvirena okvira u jednom redu (mockup): siva podloga, bijeli gumbi,
   navy odabrani. */
.zk-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; grid-column: 1 / -1; }
/* ⚠️ KASETON JE ONO STO TRI OKVIRA CINI TRI SKUPINE. Uz `--color-surface-alt`
   (gotovo bijelo) gumbi su se stapali s podlogom i citali kao rasute kontrole;
   mockup ima sivi kaseton #EEF2F7 i BIJELE gumbe u njemu. */
.zk-box { background: #EEF2F7; border: 1px solid #C6D1E0;
  border-radius: 12px; padding: 12px 13px; }
/* ⚠️ TRI GUMBA U JEDNOM REDU. „Isporuka" se prelamala u drugi red i okvir je
   narastao, pa su tri okvira bila razlicite visine. Gumbi dijele sirinu i ne
   lome se; provjerava geometrijska tvrdnja u `modal-zahtjeva.mjs`. */
/* ⚠️ IKONA IZNAD NATPISA, ne pokraj njega. Alat je do 2026-08-26 mjerio samo
   boju, obrub i zaobljenje gumba — sve se poklapalo, a gumbi su na ekranu bili
   niski i jednoredni ondje gdje mockup ima visoke. „0 razlika" je znacilo
   „izmjerena svojstva se poklapaju", ne „izgleda isto". */
.zk-box .zk-seg { flex-wrap: nowrap; width: 100%; gap: 8px; border: 0;
  background: transparent; overflow: visible; }
.zk-box .zk-seg button { flex: 1; flex-direction: column; gap: 5px;
  justify-content: center; padding: 10px 6px; font-size: 12px; white-space: normal;
  text-align: center; line-height: 1.25; background: #fff; border-radius: 9px;
  border: 1px solid var(--color-border); }
.zk-box .zk-seg button .mdi { font-size: 19px; }
.zk-box > label { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-tertiary); margin-bottom: 6px; }
/* Ugovor u modalu zahtjeva je PRIKAZ s kartona (06.09.2026.): pilula, datum, link u karton. */
.zk-ugovor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0; }
.zk-uglink { font-size: 12px; font-weight: 600; color: var(--brand-primary); white-space: nowrap; }
/* ⚠️ Labele su REČENIČNE, ne verzalom: mockup ih tako ima, a `*` uz obavezno
   polje se u verzalu gubi. */
.zk-f > label, .zk-box > label { text-transform: none; letter-spacing: 0; }
.zk-f em, .zk-box em, .zk-foot em { color: #DC2626; font-style: normal; font-weight: 800; }
/* Pilule hitnosti s obojenom točkom — isti znak kao u tablici. */
/* ⚠️ `nowrap` JE NAMJERAN, ne propust. Sirina modala (1240) izracunata je tako da
   cetiri pilule stanu u jedan red; doda li netko petu razinu hitnosti, red MORA
   vidljivo probiti stupac umjesto da se tiho prelomi i tiho ponisti razlog zbog
   kojeg je modal sirok. Prelamanje bi taj kvar sakrilo do sljedeceg mjerenja.
   ⚠️ Razmak 6→5 i padding 13→11 kupuju ~19 px BEZ diranja fonta — slova ostaju
   ista, jer je sirina poluga ovdje, a ne tipografija. */
.zk-hitsel { display: flex; gap: 5px; flex-wrap: nowrap; }
.zk-hitsel button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid
  var(--color-border); background: #fff; border-radius: 999px; padding: 6px 11px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  color: var(--color-text-tertiary); cursor: pointer; }
.zk-hitsel button i { width: 9px; height: 9px; border-radius: 50%; }
.zk-hitsel button.on { border-width: 2px; color: var(--color-text-primary); }
.zk-hitsel .pg-hit--niska.on { border-color: #94A3B8; }
.zk-hitsel .pg-hit--srednja.on { border-color: var(--brand-primary); }
.zk-hitsel .pg-hit--visoka.on { border-color: var(--brand-secondary); }
.zk-hitsel .pg-hit--kriticna.on { border-color: #DC2626; }
/* ⚠️ DVA RJECNIKA, JEDAN IZGLED (14.09.2026.). Boje tocke su vec pripremljene za
   oba (`.pg-hit--srednja i, .pg-hit--normalna i` i `--kriticna/--hitno`), pa su
   nedostajala samo ova dva obruba za ODABRANU pilulu na NALOGU.
   ⚠️ POJMOVI SE NE MIJESAJU: nalog sprema `normalna|hitno`, zahtjev
   `srednja|kriticna`. Dijeli se IZGLED pilule, ne vrijednosti — isto pravilo
   koje vec stoji uz hitnost. */
.zk-hitsel .pg-hit--normalna.on { border-color: var(--brand-primary); }
.zk-hitsel .pg-hit--hitno.on { border-color: #DC2626; }
.zk-seg { display: flex; gap: 5px; flex-wrap: wrap; }
.zk-seg button .mdi { margin-right: 5px; }
.zk-seg button { border: 1px solid var(--color-border); background: #fff; border-radius: 9px;
  padding: 5px 9px; font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
  color: var(--color-text-secondary); cursor: pointer; }
.zk-seg button.on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.zk-warn { background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 9px; padding: 8px 10px;
  font-size: var(--fs-sm); color: #7C2D12; display: flex; gap: 7px; align-items: flex-start; }
/* ⚠️ TRAKA NOVE INACICE (09.09.2026.): ponuda, ne automatsko osvjezavanje —
   dispecer koji upisuje ne smije izgubiti tekst. Stoji dolje desno, nad
   sadrzajem, i ne uzima fokus. */
.nova-inacica { position: fixed; right: 18px; bottom: 18px; z-index: 3000;
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  background: var(--brand-dark, #0F2C4D); color: #fff; border-radius: 11px;
  box-shadow: 0 10px 28px rgba(15,23,42,.28); font-size: var(--fs-sm); }
.nova-inacica .mdi { font-size: 18px; color: var(--brand-secondary, #D99A18); }
.nova-inacica .btn { border-color: rgba(255,255,255,.28); color: #fff;
  background: rgba(255,255,255,.12); }
.nova-inacica .btn--primary { background: var(--brand-secondary, #D99A18);
  border-color: var(--brand-secondary, #D99A18); color: #0F2C4D; font-weight: 700; }
/* ⚠️ „STANJE OD HH:MM" UZ GUMBE PRIJELAZA (09.09.2026.): prijelaz se nudi iz
   zadnje DOHVACENOG stanja, pa natpis stoji ondje gdje se klika. Sivlji kad je
   stariji od anketnog razmaka — tada je tvrdnja s rezervom. */
/* ⚠️ ZIG JE 12.09.2026. PRESELIO U NAVY ZAGLAVLJE, uz pilulu stanja — on to
   stanje POJASNJAVA („ovo je ono sto sam znao u 00:01"), pa mu je ondje mjesto,
   a podnozje ostaje samo radnjama.
   ⚠️ ZATO SU I BOJE DRUGE. Dosadasnje su racunate za SVIJETLU podlogu i na
   navyju padaju duboko ispod praga: `--color-text-tertiary` #64748B daje 1,75:1,
   a `--orange-text` #B45309 cak 1,66:1. Nove su mjerene na svjetlijem kraju
   gradijenta (#1F4E8A), 12 px ⇒ prag 4,5:
     svjeze  #BCCADC → 5,02   ·   staro  #FCD34D → 5,79
   ⚠️ NE `#E9B44C` (zlatna koju nosi `.wo-md-ic`): na #1F4E8A je 4,41 — ispod
   praga. Izgleda kao da pripada, a ne prolazi. */
.wo-sinkro { font-size: var(--fs-micro); color: #BCCADC;
  margin-right: 8px; white-space: nowrap; cursor: help; }
.wo-sinkro--staro { color: #FCD34D; font-weight: 600; }
/* ⚠️ TRAKA IZNAD KRONOLOGIJE kaze STO se gleda i nudi drugi pogled: tablica s
   pet redaka izgleda isto za „jedan odjel" i za „cijeli klijent" (09.09.2026.). */
.zk-krono-traka { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.zk-krono-traka .spacer { flex: 1; }
.zk-krono td { vertical-align: top; }
.zk-krono tr.odjel { background: #EFF6FF; }
tr.zk-odbijen { opacity: 0.55; }
.zk-sub { font-size: var(--fs-xs); color: var(--color-text-tertiary); display: block; }
/* ⚠️ TIHA CELIJA, NE DRUGI RED — i to je razlika koja je vec jednom srusila
   raspored. `.zk-sub` nosi `display:block`; na `<td>` to celiju IZBACUJE iz
   tablicnog rasporeda, pa vrijednost stoji kao traka, naslov nad njom visi nad
   prazninom, a svaka celija iza nje se pomakne. Isti kvar je do 04.09.2026.
   imao `td.zk-act` (`display:flex`) — tada su gumbi stajali pod zaglavljem
   IZVEDBA, a naslov AKCIJE nad prazninom.
   Ista tipografija, BEZ `display`: `.zk-sub` znaci „drugi red u celiji",
   `.td-sub` znaci „cijela celija, tiho". Jedno ime ne moze znaciti oboje. */
.td-sub { font-size: var(--fs-xs); color: var(--color-text-tertiary); }
/* ⚠️ PRVI RED CELIJE JE PODEBLJAN (Mladen 10.09.2026.: „neka mi vrati bold
   font"). Vrijedi za `klijent` i `prijavio` — dvoredne celije zahtjeva.
   `display:block` je nuzan da drugi red (`.zk-sub`) padne ispod, i zbog njega
   `ugovorPill` mora stajati UNUTAR `<b>`.
   ⚠️ 700, NE 600: ista tezina koju nosi `.wo-kl b` u tablici naloga, koja je
   jedan izbornik dalje. Dvije tezine za isti stupac u istom modulu citaju se
   kao kvar. */
.zk-kl b { font-weight: 700; display: block; }
/* Redak bez podnositelja: kurziv, jer „nije upisan" nije podatak nego njegov
   izostanak. Boju daje `.tbl .na` (etapa citljivosti).
   ⚠️ `.wo-kl` je uz `.zk-kl` od 11.09.2026., kad je „Prijavio" dobila i tablica
   naloga — ista celija, isti znak za istu prazninu. */
.zk-kl .na, .wo-kl .na { font-style: italic; }
/* Veza zahtjev ↔ nalog. Izgleda kao podnaslov (isto mjesto, ista velicina), ali
   se CITA kao poveznica — inace bi „iz ZK-…" i dalje izgledalo kao mrtav tekst
   kakav je i bilo. */
.zk-veza { color: var(--brand-primary, #1F4E8A); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(31, 78, 138, 0.3); width: fit-content; }
.zk-veza:hover { border-bottom-color: var(--brand-primary, #1F4E8A); }

/* ═══ PREGLED (etapa 6) ══════════════════════════════════════════════════
   Kartice u kucnom stilu: radijalni gradijent iz gornjeg lijevog kuta (ondje je
   najsvjetlije), mekana sjena dolje desno, natpis u prigusenom sivom s tonom
   kartice — BEZ gradijenta na tekstu; vrijednost i ikona u naglasnoj boji. */
.pg-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 11px; }
/* ⚠️ MJERE SU IZ MOCKUPA, i tako se i provjeravaju (`tools/stil-mjera.mjs`).
   Sjena je MEKA I POMAKNUTA DOLJE-DESNO (2px 3px 8px, 9 % crne) — ne raspršena
   naviše: prva je inačica imala `0 6px 16px -10px` uz 35 % crne, što je kartice
   činilo teškima i tamnijima od mockupa. */
.pg-card { position: relative; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 12px 15px; background: #fff; box-shadow: 2px 3px 8px rgba(15,23,42,0.09);
  cursor: pointer; text-align: left; font-family: inherit; }
.pg-card:hover { box-shadow: 3px 5px 13px rgba(15,23,42,0.14); }
.pg-card:hover { border-color: var(--brand-primary); }
/* ⚠️ 11.5px/800 iz mockupa — ne `--fs-xs` (13.33px): tipografske ljestvice
   aplikacije i mockupa se ne poklapaju, pa se ovdje uzima mockupova vrijednost. */
.pg-card__l { font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; }
/* ⚠️ `tabular-nums`: brojke moraju biti iste širine, inače kartica „poskakuje"
   pri svakoj promjeni broja. */
.pg-card__v { font-size: 23px; font-weight: 800; line-height: 1.25; margin: 3px 0 2px;
  font-variant-numeric: tabular-nums; }
/* ⚠️ NIZAK PROZOR: KPI red se stisne, ne otme prostor tablici. Na 1366×768 su
   kartice od 117 px ostavljale popisu 118 px — tehnicki „stane", stvarno
   neupotrebljivo. Prijenosnik je stroj na kojem dispecer i radi. */
@media (max-height: 850px) {
  .pg-card { padding: 8px 12px; }
  .pg-card__v { font-size: 20px; margin: 2px 0 1px; }
  .pg-card__n, .pg-card__q { font-size: var(--fs-micro); }
  .tabs > .tab { padding: 7px 14px; }
}
.pg-card__n { font-size: 11.5px; font-weight: 600; color: var(--color-text-secondary); }
/* ⚠️ Dodatak „ne zna se" nosi vlastitu boju: nula uz njega NIJE dobra vijest. */
.pg-card__q { font-size: 11.5px; font-weight: 600; color: var(--orange-text, #B45309);
  display: block; margin-top: 3px; }
.pg-card .mdi { position: absolute; top: 12px; right: 12px; font-size: 16px; }
/* ⚠️ GRADIJENT IDE DO KRAJA KARTICE, ne do bijelog na 62 %. Prva inačica je
   blijedila u bijelo prije ruba, pa su kartice bile znatno svjetlije od
   mockupa i međusobno teško razlučive (šetnja uz mockup, 2026-08-25). Recept
   iz kuće: četiri postaje, najsvjetlija gore lijevo, najjača nijansa na 100 %;
   obrub u istoj nijansi; natpis prigušeno siv S TONOM kartice (`--lbl`), ne
   naglasna boja s prozirnošću — prozirni tekst se na sivoj podlozi gubi. */
/* ⚠️ `--lbl` I `--sub` SU POTAMNJENI (10.09.2026.) — recept se NE mijenja, samo
   svjetlina. IZMJERENO nad NAJTAMNIJOM postajom svake kartice (tekst je 11,5 px,
   dakle NIJE „large text" i prag je 4.5:1):

     zuta   --lbl #8A7A4C 3,56 → #6E5B2A 5,55   --sub #8A7233 3,90 → #5E4C1D 7,01
     plava  --lbl #5C6B8C 4,01 → #44567E 5,48   --sub #5A6E93 3,86 → #3A4A6E 6,62
     crvena --lbl #8C6A5C 3,57 → #7E4E3A 5,10   --sub #9A6650 3,53 → #6B402E 6,46

   Dakle svih sest zatecenih vrijednosti PADALO je, sve nove prolaze. Ton kartice
   je zadrzan (recept iznad: „prigusen siv S TONOM kartice"), spustena je samo
   svjetlina — naglasna boja s prozirnoscu se i dalje NE koristi. */
.pg-card--yellow { --acc: #A16207; --lbl: #6E5B2A; --sub: #5E4C1D; border-color: #F0E5A8;
  background: radial-gradient(120% 140% at 0% 0%, #FFFEF6 0%, #FDF9DC 38%, #FBF3BF 72%, #F8EDAD 100%); }
.pg-card--blue { --acc: #1D4ED8; --lbl: #44567E; --sub: #3A4A6E; border-color: #CFDDF7;
  background: radial-gradient(120% 140% at 0% 0%, #FBFCFF 0%, #EDF2FE 38%, #DEE9FC 72%, #D2E0FA 100%); }
.pg-card--red { --acc: #C2410C; --lbl: #7E4E3A; --sub: #6B402E; border-color: #F5D3C8;
  background: radial-gradient(120% 140% at 0% 0%, #FFFCFB 0%, #FDF0EC 38%, #FBE3DC 72%, #F8D6CC 100%); }
/* ⚠️ ZELENA JE NOVA VARIJANTA po ISTOM receptu (cetiri postaje, najsvjetlija
   gore lijevo, najjaca na 100 %, obrub u istoj nijansi). `--green` je zatecen
   token; kartica je nova. IZMJERENO na najtamnijoj postaji #CDEEDA:
   --lbl #396F49 = 4,75 · --sub #2E6040 = 5,88. */
.pg-card--green { --acc: #15803D; --lbl: #396F49; --sub: #2E6040; border-color: #BBE9CB;
  background: radial-gradient(120% 140% at 0% 0%, #FBFEFC 0%, #EDF9F1 38%, #DCF3E4 72%, #CDEEDA 100%); }

/* ═══ PLOCA PREGLEDA: blokovi ispod KPI reda (etapa 4, 10.09.2026.) ═══════
   ⚠️ PLOCA SE KLIZE, TABLICNI EKRAN NE. Na 1366x768 — prijenosnik koji ovaj
   CSS izricito mjeri (`@media (max-height:850px)` nize) — KPI red, tablica,
   grafovi i karta NE STANU. Ploca smije kliziti jer JE pregled; ekran s
   tablicom ne smije, jer tablica ima svoj klizac. */
#klPregled { overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
/* ⚠️ „Sto se trenutno radi" NE RASTE U CIJELU VISINU (Mladen, 10.09.: kartica
   je ostavljala veliku prazninu). Visina je po SADRZAJU, s gornjom granicom i
   vlastitim klizacem — prazan prostor ide blokovima ispod, a pun dan ne dobiva
   sitnu kutijicu. */
.plc-card--sadrzaj { flex: none; }
.plc-card--sadrzaj .plc-scroll { max-height: 216px; }
/* ⚠️ DVIJE KARTICE U REDU, JEDNAKE VISINE (Mladen, 10.09.: „zadnje promjene, a
   pored toga ceka fakturiranje"). `align-items: stretch` je zadano u gridu, pa
   obje prate visu — a klizac je u `.plc-scroll`, tako da duzi popis ne razvlaci
   red. „Ceka fakturiranje" je time izasao iz DESNOG stupca: desni nosi ono sto
   je vezano za MJESTO (karta, ljudi), lijevi sve vezano za POSAO. */
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: none; }
.par > .plc-card { min-height: 0; }
.par .plc-scroll { max-height: 196px; }
/* Redak „osvjezeno …" pod blokom: cinjenica o podatku, ne ukras. */
.plc-osvj { display: flex; align-items: center; gap: 7px; font-size: var(--fs-micro);
  color: var(--color-text-tertiary, #94A3B8); flex: none; padding: 0 2px 2px; }
.plc-osvj .sp { flex: 1; }
/* ⚠️ BRZI FILTAR JE PADAJUCI IZBORNIK, ne cipovi: cipovi bi ovdje izgledali kao
   cipovi tablice na drugom ekranu, a filtriraju nesto drugo. */
.qf { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.qf select { border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px;
  padding: 4px 8px; font: inherit; font-size: var(--fs-micro); background: #fff;
  color: var(--color-text-secondary, #475569); }
/* ⚠️ OMJER 2/3 : 1/3 SAMO NA PLOCI (Mladenova mjera, 10.09.). Kucni `.plc-main`
   je `1fr 390px` — FIKSAN desni stupac, da siri monitor dodaje prostor
   SADRZAJU. Ovdje je namjerno drukcije, i `minmax` je jedini dodatak mjeri:
   pod 300 px se desni stupac ne spusta, jer se ondje pribadace na karti i imena
   servisera pocnu preklapati. Zapisano da nitko ovo ne „poravna" s kucnim
   pravilom. */
#klPregled .plc-main--ploca { grid-template-columns: 2fr minmax(300px, 1fr); }
/* ⚠️ TOCKA PRIORITETA POSTOJI SAMO NA PLOCI. U tablici naloga hitnost ima svoj
   stupac s bojom I rijecju, pa bi tocka bila treci znak istog podatka; ovdje
   stupca nema, a redak mora reci koliko gori. Boje dolaze iz zatecenih razreda
   `hit--*`, ne iz novih vrijednosti. */
.pg-tocka { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; background: currentColor; }
/* Redak zapisnika: ikona · rečenica · vrijeme desno (oblik iz mockupa). */
.pg-prom { display: flex; align-items: baseline; gap: 8px; padding: 5px 2px;
  border-bottom: 1px solid #F1F5F9; font-size: var(--fs-sm); }
.pg-prom:last-child { border-bottom: none; }
.pg-prom > .mdi { color: var(--color-text-tertiary, #94A3B8); font-size: var(--fs-base); }
.pg-prom > div { flex: 1; }
.pg-prom > .mono { color: var(--color-text-tertiary, #94A3B8); font-size: var(--fs-micro); }
/* ⚠️ IKONA ZAPISNIKA NOSI BOJU PO VRSTI DOGADAJA (Mladen, 10.09.2026.): siva
   ikona ispred svakog retka nije razlikovala nastanak od prijelaza ni od
   ispravka racuna. Boja je DODATAK rijeci — recenica uvijek stoji ispisana. */
.pg-prom > .prom--novo { color: var(--green, #16A34A); }
.pg-prom > .prom--stanje { color: var(--brand-primary, #1F4E8A); }
.pg-prom > .prom--termin { color: #B45309; }
.pg-prom > .prom--racun { color: var(--brand-secondary, #D99A18); }
.pg-prom > .prom--uredi { color: var(--color-text-secondary, #475569); }
.pg-prom > .prom--zk { color: #7C3AED; }
/* ⚠️ AVATAR SERVISERA U BOJI (Mladen, 10.09.2026.), i to PO OSOBI — stanje vec
   nosi boju desno, pa bi avatar po stanju bio drugi znak istog podatka. Ton se
   izvodi iz imena (`avatarTon`), dakle stabilan je: isti covjek ima istu boju
   svaki put. Sest tonova, svi s tamnim tekstom na svijetloj podlozi. */
.srv__av.av--1 { background: #E0E7FF; color: #3730A3; }
.srv__av.av--2 { background: #DCFCE7; color: #166534; }
.srv__av.av--3 { background: #FEF3C7; color: #92400E; }
.srv__av.av--4 { background: #FCE7F3; color: #9D174D; }
.srv__av.av--5 { background: #CFFAFE; color: #155E75; }
.srv__av.av--6 { background: #EDE9FE; color: #5B21B6; }
/* ═══ GDJE JE KOJI SERVISER (etapa 5) ═════════════════════════════════════
   ⚠️ BOJA PO STANJU, kao u mockupu: depo slate, lokacija zelena, voznja plava,
   stao amber, ne zna se sivo s narancastim tekstom. Boja je DODATAK rijeci, ne
   zamjena — stanje je uvijek i ISPISANO. */
.srv { display: flex; align-items: center; gap: 9px; padding: 7px 2px;
  border-bottom: 1px solid #F1F5F9; cursor: pointer; }
.srv:last-child { border-bottom: none; }
.srv__av { width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface, #F8FAFC); color: var(--color-text-secondary, #475569);
  font-size: var(--fs-micro); font-weight: 800; }
.srv__t { flex: 1; min-width: 0; }
.srv__ime { font-size: var(--fs-sm); font-weight: 700; }
.srv__voz { font-size: var(--fs-micro); font-weight: 500;
  color: var(--color-text-tertiary, #94A3B8); }
.srv__gdje { font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
/* ⚠️ „po:" JE OZNAKA ZAKLJUCKA, ne obican podnaslov — zato kurziv i tisa boja:
   citatelj mora vidjeti da to nije izmjereno. */
.srv__po { font-size: var(--fs-micro); font-style: italic;
  color: var(--color-text-tertiary, #94A3B8); }
.srv__st { flex: none; text-align: right; font-size: var(--fs-micro); font-weight: 700; }
.srv__st .mono { font-weight: 500; color: var(--color-text-tertiary, #94A3B8); }
.srv--depo .srv__st { color: #475569; }
.srv--lok .srv__st { color: var(--green, #16A34A); }
.srv--vozi .srv__st { color: var(--brand-primary, #1F4E8A); }
.srv--stao .srv__st { color: #B45309; }
.srv--nezna .srv__st { color: #C2410C; }
/* Karta terena: vlastiti spremnik, visina po dizajnu ploce. */
.pg-karta { height: 260px; border-radius: 10px; overflow: hidden;
  background: var(--color-surface, #F8FAFC); }
/* ⚠️ OVDJE NE SMIJE BITI `position`. Do 12.09.2026. je stajalo `relative`, uz
   komentar da je to „uvjet za natpis" — to je bilo NETOCNO i koštalo je toga da
   vozila NISU bila na svojim polozajima (Mladen: „vozila na karti se ne
   prikazuju na pravim pozicijama i ne ostaju kad se zumira").

   MapLibre svakom markeru daje `.maplibregl-marker { position: absolute }` i
   polozaj mu zadaje `transform`-om. Nase pravilo ima isti broj razreda i dolazi
   KASNIJE u kaskadi, pa je pobjedivalo — marker je time padao u NORMALAN TOK i
   markeri su se slagali jedan ispod drugoga.

   ⚠️ IZMJERENO U CHROMEU, tri vozila, odstupanje ikone od vlastite tocke
   (`map.project`): 0 px · 26 px · 52 px — dakle tocno visina pribadace po
   markeru. Prvi je bio tocan slucajno. Na zoomu 13,5 tih 52 px je stotinjak
   metara na terenu.

   ⚠️ NATPIS SE NIJE IMAO CEMU USIDRITI — i nema problema: MapLibre-ov
   `absolute` JEST blok-sadrzatelj za apsolutno pozicioniran `.pg-tag`. Nakon
   uklanjanja izmjereno: sva tri odstupanja 0 px, natpis 1 px ispod ikone.

   ⚠️ GLAVNA KARTA JE OD POCETKA ISPRAVNA jer `vehIconHtml` stavlja
   `position: relative` na UNUTARNJI `div`, ne na sam marker. Tko ovdje opet
   zatreba sidro, neka doda unutarnji element — ne `position` na `.pg-pin`. */
.pg-pin { width: 26px; height: 26px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: #fff;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35); }
/* ⚠️ NATPIS POD IKONOM (11.09.2026., Mladen: „prikazuju mi se samo dva vozila i
   to bez informacija"). Do danas je pribadaca ploce nosila SAMO `title` — a
   `title` je tooltip preglednika: trazi da se misem stane na ikonu od 26 px i
   priceka sekundu. Ploca se cita POGLEDOM, pa je ondje `title` isto sto i nista.

   ⚠️ PRAVILA SU PREUZETA IZ `.veh-tag` (glavna karta), ne izmisljena: ista
   tipografija, ista bijela plocica, isti `pointer-events: none`. Vlastito ime
   ima jer je uza (ploca je manja) i jer ju slagac natpisa mora moci razlikovati.
   Dvije razlicite pojave istog uredaja pod istim imenom su nacin na koji jedna
   tiho naslijedi tudju izmjenu. */
.pg-tag { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 3px);
  background: #fff; color: #0F172A; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 5px; padding: 0 5px; font-size: var(--fs-micro); font-weight: 700;
  line-height: 1.35; white-space: nowrap; box-shadow: 0 2px 5px rgba(15,23,42,0.22);
  pointer-events: none; }
/* ⚠️ VOZAČ U VLASTITOM RETKU ispod vozila (25.09.2026.). Natpis ostaje `nowrap`
   — lomi se samo između vozila i vozača, nikad usred imena. */
.pg-tag b, .pg-tag__vozac { display: block; }
.pg-tag__vozac { font-weight: 500; color: var(--color-text-secondary, #475569); }
.pg-pin .mdi { font-size: 14px; }
.pg-pin--depo { background: #475569; }
.pg-pin--vozi { background: var(--brand-primary, #1F4E8A); }
.pg-pin--stao { background: #B45309; }
/* ═══ TRI GRAFA (etapa 6): INLINE SVG, BEZ KNJIZNICE ══════════════════════
   ⚠️ `vendor/` nema knjiznicu za grafove i CLAUDE.md zabranjuje nove CDN-ove.
   Aplikacija grafove vec crta kao inline SVG (`#vcSpark`, `.kt-sp`, CAN crte) —
   ovo slijedi taj obrazac, ne uvodi drugi. */
.gr-red { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin-top: 12px; }
.gr-card { background: #fff; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 12px; overflow: hidden; }
.gr-card__h { padding: 9px 13px; border-bottom: 1px solid var(--color-border, #E5E7EB);
  display: flex; align-items: baseline; gap: 8px; }
.gr-card__h h3 { margin: 0; font-size: var(--fs-base); }
.gr-card__h .m { font-size: var(--fs-micro); color: var(--color-text-tertiary, #94A3B8); }
.gr-card__b { padding: 10px 12px 8px; }
.gr-card svg { display: block; width: 100%; height: 132px; }
.gr-card text { font-size: 9px; fill: var(--color-text-tertiary, #94A3B8); }
.gr-card .os { stroke: #E5E7EB; stroke-width: 1; }
.gr-leg { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 13px 10px;
  font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.gr-leg span { display: inline-flex; align-items: center; gap: 5px; }
.gr-leg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ═══ PLOCA VOZNOG PARKA (#view-dashboard, 12.09.2026.) ═══════════════════
   ⚠️ PLOCA SE KLIZE, i to je promjena naspram stare ploce „Danas". Ta je bila
   strukturno bez klizaca jer je stala u zaslon; ova ima KPI traku, dvije
   tablice, cetiri pite, kartu, popis vozila i devet grafova — na 1366x768 to ne
   stane ni priblizno, a ploca SMIJE kliziti jer JEST pregled (isto pravilo vec
   vrijedi za `#klPregled`). Tablicni ekran i dalje ne smije, jer tablica ima
   svoj klizac. */
#view-dashboard .page.ploca-park { overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
/* `.plc-main` u kuci dijeli PREOSTALU visinu (`flex: 1`); ovdje je visina po
   sadrzaju, jer ispod njega dolazi jos jedan red (grafovi). */
.ploca-park .plc-main { flex: none; align-items: start; }
/* ⚠️ SEDAM KARTICA U JEDAN RED NA 1366 px, i zato uza mjera od kucne.
   Kucni `.pg-kpi` trazi najmanje 215 px po kartici — na 1366 px (prijenosnik
   koji ovaj CSS izricito mjeri) sedam ih trazi 1 571 px, a ima 1 334, pa je
   sedma padala u drugi red sama. Uz 170 px sedam ih trazi 1 256 px i stanu.
   ⚠️ SCOPE JE NAMJERAN: ploca Pregleda ima svoje kartice i svoju mjeru. */
.ploca-park .pg-kpi { margin-bottom: 12px; flex: none;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* ⚠️ KARTICA KOJA NE VODI NIKAMO NE SMIJE GLUMITI DA VODI. Tri kartice plana
   servisa nemaju svoj ekran — njihov sadrzaj je tablica odmah ispod — pa su
   `div`, ne `button`. Kucni `.pg-card` nosi `cursor: pointer` i obrub koji se
   pali na `:hover`; bez ovoga bi obecavale klik koji se ne dogada. */
.ploca-park div.pg-card { cursor: default; }
.ploca-park div.pg-card:hover { border-color: var(--color-border);
  box-shadow: 2px 3px 8px rgba(15,23,42,0.09); }
/* ⚠️ NATPIS NE SMIJE PROCI ISPOD IKONE. `.pg-card .mdi` je `absolute` u gornjem
   desnom kutu (16 px + 12 px odmaka), a `.pg-card__l` je blok pune sirine — pa
   dovoljno dug natpis klizne pod nju bez ijednog znaka upozorenja. IZMJERENO
   12.09.2026. pri preimenovanju kartice: „Bez izračuna servisa" je ulazio 7 px
   POD ikonu, dok je dotad najduzi („Servis prekoračen") imao 7 px zraka — dakle
   rub je bio na jednom znaku, a ne na ovoj kartici.
   ⚠️ Rezervacija prostora znaci da predug natpis PRELAMA, sto je ispravan nacin
   da se kvar vidi; skrivanje pod ikonu nije.
   ⚠️ Suzeno na ovu plocu: isti razred nosi i ploca Pregleda, ali ondje su
   natpisi drugi i mjeri ih se zasebno — prijavljeno, ne dirano. */
.ploca-park .pg-card__l { padding-right: 22px; }
.ploca-park .gr-red { margin-top: 12px; flex: none; }

/* ⚠️ DVIJE TABLICE U REDU, JEDNAKE VISINE. Pod 900 px se slazu jedna ispod
   druge: stupac od 130 px za vozilo i tri brojcana stupca ispod te sirine se
   pocnu lomiti usred brojke. */
.dvije { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1500px) { .dvije { grid-template-columns: 1fr; } }

/* ⚠️ CETIRI PITE U JEDAN RED, i mjera je uzeta iz stvarnog stupca, ne iz oka.
   Lijevi stupac ploce je na 1366 px sirok 915 px, pa cetiri pite s razmacima
   od 12 px imaju po 228 px — tocno ISPOD mockupove mjere od 230, zbog cega je
   cetvrta padala sama u drugi red. 210 px ostavlja zraka i na uzem zaslonu. */
.gr-red--pite { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 0; }

/* ⚠️ SAMO NA OVOJ PLOCI (`.ploca-park`), NE GLOBALNO. `.gr-card` je i kartica
   grafova na ploci Pregleda; da je ovaj blok napisan bez prefiksa, Pregled bi
   se prerasporedio bez ijedne izmjene u svojem kodu i bez ijednog mjerenja.
   Zub je ovdje nastajao jer su zaglavlja i legende razlicite visine: naslov
   koji se lomi u dva retka spustao je graf, a legenda s dva reda dizala je dno.
   Rjesenje: zaglavlje ima najmanju visinu, tijelo se rasteze, legenda je
   prilijepljena na dno. */
.ploca-park .gr-card { display: flex; flex-direction: column; }
.ploca-park .gr-card__h { min-height: 38px; align-items: center; flex-wrap: nowrap;
  white-space: nowrap; }
.ploca-park .gr-card__h h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ploca-park .gr-card__h .m { flex: none; }
.ploca-park .gr-card__b { flex: 1 0 auto; }
.ploca-park .gr-leg { margin-top: auto; }
/* ⚠️ IZNIMKA ZA PITE: NASLOV SE LOMI, NE KRATI. Kartice pita su uze (210 px) i
   u njima je `text-overflow: ellipsis` iz retka gore radio „Vož…" umjesto
   „Vožnja po dispečeru" i „Tko je ulio g…" umjesto „Tko je ulio gorivo" — a kod
   te dvije kartice je naslov CIJELA POANTA: razlika izmedu „tko je ulio" i „tko
   je potrosio" zivi iskljucivo u njemu. Kartice ostaju poravnate jer ih grid i
   dalje rasteze na istu visinu. */
.ploca-park .gr-red--pite .gr-card__h { flex-wrap: wrap; white-space: normal; }
.ploca-park .gr-red--pite .gr-card__h h3 { white-space: normal; overflow: visible; }
/* ⚠️ VISINA SVG-a JE PO GRAFU, ne fiksnih 132 px: vodoravni stupci i traka
   goriva rastu s brojem redaka, pa im visinu daje `style` NA ELEMENTU — i tu
   nema sto dodati, jer umetnuti stil pobjeduje kucni `.gr-card svg { height:
   132px }` bez ijednog pravila ovdje. Izmjereno 12.09.2026.: 112 px, 37 px i
   132 px, tocno kako koji graf trazi. Zapisano da nitko ne doda pravilo koje
   bi „to rijesilo" — ono ne bi moglo ni raditi. */

/* Pita s jednim udjelom nije pita — tada ide brojka i recenica (vidi
   `DASH._pita`). */
.gr-jedan { text-align: center; padding: 22px 8px 16px; }
.gr-jedan b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gr-jedan span { font-size: var(--fs-sm); color: var(--color-text-secondary); margin-left: 4px; }
.gr-jedan .m { font-size: var(--fs-micro); color: var(--color-text-tertiary);
  margin-top: 6px; }

/* Traka razine goriva u tablici vozila. */
.tr-g { height: 6px; border-radius: 999px; background: #E2E8F0; overflow: hidden; }
.tr-g i { display: block; height: 100%; border-radius: 999px; }

/* ⚠️ CETIRI STANJA PLANA SERVISA, CETIRI BOJE. „Nema plana" NIJE zeleno i nije
   crveno nego sivo i kurzivno: izostanak plana je izostanak podatka, ne dobra
   ni losa vijest. */
.ds { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.ds .mdi { font-size: 13px; }
.ds b { font-variant-numeric: tabular-nums; }
.ds--proso { background: var(--red-bg); color: var(--red-text); }
.ds--blizu { background: var(--orange-bg); color: var(--orange-text); }
.ds--uredu { background: var(--green-bg); color: var(--green-text); }
.ds--nema { background: #F1F5F9; color: var(--color-text-secondary); font-style: italic;
  font-weight: 600; }

/* Redak popisa „Gdje je koje vozilo". */
.srvr { display: flex; align-items: center; gap: 9px; padding: 7px 12px;
  border-bottom: 1px solid var(--color-border); cursor: pointer; }
.srvr:last-child { border-bottom: 0; }
.srvr:hover { background: #FAFCFF; }
.srvr__av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; flex: none; background: #E0E7FF; color: #3730A3; }
.srvr__t { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.srvr__t .mono { font-size: var(--fs-micro); color: var(--color-text-tertiary); }
.srvr__d { font-size: var(--fs-micro); color: var(--color-text-secondary); text-align: right;
  white-space: nowrap; }
/* ⚠️ Redak tablice vozila je KLIKABILAN (vodi na kartu), pa mora i izgledati
   tako — `.plc-tbl tbody tr { cursor: pointer }` to vec daje. Traka goriva ima
   dvije crte u celiji, zato `vertical-align: top`. */
.ploca-park .plc-tbl td { vertical-align: top; }
/* Izostanak podatka nosi svoju boju i kurziv — isto pravilo koje vec drzi
   `.tbl .na`; `.plc-tbl` nije `.tbl`, pa ga ne bi naslijedio. */
.ploca-park .plc-tbl .na { color: var(--color-text-tertiary, #64748B); font-style: italic; }
.pg-card__v, .pg-card .mdi { color: var(--acc); }
.pg-card__l { color: var(--lbl); }
.pg-card__n { color: var(--sub); }
/* ⚠️ PRVA KARTICA JE JEDINA S PULSOM I ZLATNIM OBRUBOM — ona je jedina koja
   nudi radnju koju NITKO JOŠ NIJE poduzeo. Puls na svakoj kartici ne bi značio
   ništa. */
.pg-card--puls { border-color: var(--brand-secondary); }
.pg-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #DC2626;
  display: inline-block; margin-right: 6px; vertical-align: 1px;
  animation: pgPuls 1.6s ease-in-out infinite; }
@keyframes pgPuls { 0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); } }
@media (prefers-reduced-motion: reduce) { .pg-card__dot { animation: none; } }
/* Zaglavlje ekrana po mockupu: naslov, datum, pa radnje desno. */
.pg-datum { color: var(--color-text-tertiary); font-size: var(--fs-sm); }
/* Zaglavlje kartice: tražilica lijevo, pa naslov, meta i poveznica desno. */
/* ⚠️ JEDAN RED, i tražilica NE ZAUZIMA cijelu širinu. `.kl-search` je drugdje
   traka pune širine; ovdje je polje u zaglavlju kartice, pa dobiva svoju mjeru
   (izmjereno 2026-08-25: zaglavlje se lomilo u TRI reda, a tražilica je bila
   1195 px široka). */
.pg-sech { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.pg-sech .kl-search { width: 260px; flex: none; margin: 0; }
.pg-sech > span:first-of-type { font-weight: 700; white-space: nowrap; }
.pg-sech .m { font-size: var(--fs-sm); color: var(--color-text-tertiary); font-weight: 400; }
.pg-sech a { margin-left: auto; font-size: var(--fs-sm); color: var(--brand-primary);
  font-weight: 600; text-decoration: none; cursor: pointer; }
/* Hitnost s obojenom točkom — bez nje stupanj gubi znak koji se vidi iz daljine. */
.pg-hit { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  font-weight: 700; white-space: nowrap; }
/* ⚠️ PRSTEN, NE DRUGI TON (11.09.2026.). Tocka od 9 px u zasicenoj zutoj je na
   bijelom 1,92:1 i prakticki se gubi. Tanak tamni obrub joj daje GRANICU, a ton
   ostaje netaknut — sto je i bio nalog.
   ⚠️ ZUTE OD 25.09.2026. U HITNOSTI VISE NEMA, pa je razlog prstena otpao — ali
   prsten STOJI: micanje mijenja izgled birača i nije bilo u opsegu. Hoce li
   otici, odlucuje Mladen (prijavljeno). */
.pg-hit i { width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.20); }
/* ⚠️ ISTI TOKENI KAO `.hit--*` (11.09.2026.). Do danas su to bila DVA popisa
   za jedan pojam, i nisu se slagala: „srednja" je ovdje bila PLAVA
   (`--brand-primary`), a u tablici zlatna. Jedan pojam — jedan izvor boje. */
/* ⚠️ Od 25.09.2026. nova paleta, ista kao `.hit--*` (vidi komentar ondje):
   siva, zelena, narancasta, crvena. Velicina tocke (9 px) je ista na sva cetiri
   gumba — mijenja se SAMO boja; u biracu su opcije ravnopravne za klik. */
.pg-hit--niska i { background: var(--color-text-tertiary); }
.pg-hit--srednja i, .pg-hit--normalna i { background: var(--green); }
.pg-hit--visoka i { background: var(--orange); }
.pg-hit--kriticna i, .pg-hit--hitno i { background: var(--red); }
/* ⚠️ Vrijednosti iz mockupa (`.kat`), ne iz tokena: `--color-surface-alt` se u
   ovom kontekstu razrjesava u prozirno, pa je oznaka izgledala kao goli tekst —
   sto je mjerilo i prijavilo (`rgba(0,0,0,0)` prema `rgb(241,245,249)`). */
.pg-kat { display: inline-block; background: #F1F5F9;
  color: var(--color-text-secondary); border-radius: 6px; padding: 1px 7px;
  font-size: 11px; font-weight: 700; white-space: nowrap; }
.pg-rok { display: inline-block; background: #FEE2E2; color: #B91C1C; border-radius: 20px;
  padding: 0 6px; margin-left: 6px; font-size: var(--fs-micro); font-weight: 700; }
/* ⚠️ KOMPAKTNI RETCI SU IZ MOCKUPA (`.tbl-sm`: 4px 10px, 12.5px), i nisu ukras:
   izmjereno 2026-08-25 na 1920×1080, redak od 55 px gurnuo je tablicu naloga
   64 px izvan prozora — a stati u prozor je jedina svrha ovog ekrana. Stil je
   ogranicen na `#klPregled`, da ne dira nijednu drugu tablicu. */
/* ⚠️ OGRANICENO NA MODUL ZAHTJEVA I PREGLEDA. `.tbl` nosi pola aplikacije; ovo
   je „kompaktna" inacica iz mockupa (`.tbl-sm`) i mijenjati je globalno znacilo
   bi prestiliziranje ekrana koji nisu predmet ovog kruga. */
#klPregled .tbl td, #klZahtjevi .tbl td { padding: 4px 10px; font-size: 12.5px; }
/* Zaglavlje je NAVY, kao u mockupu — svijetlosivo je bilo nasljede `.tbl`. */
#klZahtjevi .tbl thead th { background: var(--brand-primary-dark, #0F2C4D);
  color: #E5EAF2; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  padding: 6px 10px; border-bottom: none; }
#klPregled .tbl thead th { padding: 6px 10px; font-size: 11px; }
#klPregled .tbl .zk-sub { font-size: var(--fs-micro); line-height: 1.25; }
#klPregled .sec { margin-top: 10px !important; }
/* ⚠️ TABLICA NALOGA KLIZA U SEBI, STRANICA NE. Zahtjev je da dispečer vidi dan
   BEZ POMICANJA STRANICE — a broj naloga nije pod našom kontrolom: dan s deset
   izlazaka stane, dan s trideset ne stane ni u kakav raspored. Zato okvir ima
   granicu visine, a zaglavlje stupaca ostaje prilijepljeno: uobičajen dan se
   vidi cijel, a veliki dan kliže UNUTAR kartice umjesto da gura načelnu
   napomenu s ekrana. Bez ovoga je tvrdnja o „stane u prozor" bila istinita samo
   dok podataka ima malo (izmjereno: 1282 px pri prozoru od 1080). */
/* ⚠️ ZONA UZIMA ONO STO PRETEKNE, ne postotak prozora. `42vh` je bio pogodak
   koji je radio na 1920×1080 i ostavljao 286 px viska na 1366×768 — izmjereno
   tvrdnjom o vanjskom spremniku. Sada je omotac flex-stupac (vidi pravilo uz
   `.page`), pa zona jednostavno popuni ostatak i visak nestaje na SVAKOJ visini. */
#klPregled .sec--nalozi { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#klPregled .pg-kliz { flex: 1; min-height: 0; overflow: auto; }
#klPregled .pg-kliz thead th { position: sticky; top: 0; z-index: 2; }
/* Traka tabova — oblik iz `OSIRIS_NEO_kalendar_fullcalendar_mockup.html`. */
/* ⚠️ BEZ `gap`-a i s rubom od 1 px — vrijednosti su u zajednickoj deklaraciji uz
   `.tabs`; ovdje ostaje samo ono sto je svojstvo OVE trake. */
/* ⚠️ PODIGNUTE KARTICE SU UKINUTE 2026-08-28, i to je preokret ranije odluke.
   Od 26. 08. su neaktivni tabovi sjedili na plohi, a aktivni bio bijel i
   podignut, s obrazlozenjem „dosadasnji oblik se na ekranu gubio uz stranicu".
   Mladen je odlucio suprotno: JEDAN stil tabova u cijeloj aplikaciji, ravna
   traka i zlatna crta — ukljucujuci Pregled. „Gubi se uz stranicu" rjesava
   SIVA TRAKA (`position: sticky`) i podloga aktivnog taba, ne podignute
   kartice.
   ⚠️ Redoslijed je isti kao i tada: mockup prvi
   (`OSIRIS_NEO_kalendar_fullcalendar_mockup.html`), aplikacija za njim —
   obrnuto bi dalo razliku koju alat prijavljuje zauvijek. Izgled je sada u
   zajednickoj deklaraciji uz `.tabs`, na dnu ove datoteke. */
.tabs > .tab .b { background: #DC2626; color: #fff; border-radius: 999px; padding: 0 7px;
  font-size: var(--fs-micro); font-weight: 800; }
.pg-grupa { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }
/* ── Filtarska traka kalendara (mockup ljuske, commit b1232be) ──────────
   ⚠️ „Prikaz: Mjesec" se NE crta: FullCalendar to nosi u svojoj alatnoj traci.
   ⚠️ Cipovi i „Resetiraj" nisu ukras nego uvjet: odabir se PAMTI, pa filtar koji
   se ne vidi postaje zamka koju smo sami postavili. */
.filtri { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fdrop { position: relative; }
.fbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--color-surface-elevated);
  border: 1px solid var(--color-border); border-radius: 8px; padding: 6px 11px; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; }
.fbtn:hover { background: #F1F5F9; }
.fbtn.on { border-color: var(--brand-primary); color: var(--brand-primary); }
.fbtn .fn { color: var(--color-text-tertiary); font-weight: 500; }
.fmenu { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 214px;
  max-height: 260px; overflow: auto; background: var(--color-surface-elevated);
  border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.14); padding: 6px; display: none; }
.fmenu.open { display: block; }
.fmenu label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px;
  font-size: 13px; cursor: pointer; }
.fmenu label:hover { background: #F1F5F9; }
.fcip { display: inline-flex; align-items: center; gap: 6px; background: #EEF2F7;
  border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 6px 3px 11px;
  font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); }
.fcip i { font-style: normal; cursor: pointer; color: var(--color-text-tertiary); font-size: 15px;
  line-height: 1; padding: 0 4px; }
.fcip i:hover { color: #B91C1C; }
.freset { font-size: 12.5px; font-weight: 700; color: var(--brand-primary); cursor: pointer;
  text-decoration: underline; margin-left: 2px; }
/* ⚠️ PRAZNO ZBOG FILTRA NIJE PRAZNO — isti zakon kao dvostanjne KPI kartice. */
.fnota { display: flex; align-items: center; gap: 7px; background: #EEF2FF; color: #3730A3;
  border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }

/* ── Kalendar (oblik iz `OSIRIS_NEO_kalendar_fullcalendar_mockup.html`) ──
   ⚠️ Ladica je STUPAC FIKSNE SIRINE, kalendar uzima ostatak. Postotak bi na
   1366×768 ladicu stisnuo ispod citljivosti, a `1fr` kalendaru daje tocno ono
   sto pretekne — isto pravilo koje vec drzi zonu naloga na Pregledu. */
.calwrap { display: grid; grid-template-columns: 236px 1fr; gap: 12px; align-items: start;
  flex: 1; min-height: 0; }
.tray { background: var(--color-surface-elevated); border: 1px solid var(--color-border);
  border-radius: 10px; overflow: hidden; }
.tray__h { padding: 10px 13px; border-bottom: 1px solid var(--color-border);
  font-weight: 700; font-size: var(--fs-sm); display: flex; gap: 7px; align-items: center; }
/* ⚠️ MJERE IZ MOKAPA, DOSLOVNO. `--fs-xs` u ovoj datoteci NE POSTOJI (skala je
   micro/sm/base/md/lg), pa je padao na naslijedenu velicinu i davao 12.5, 13 i
   14 px na tri mjesta koja u mockupu sva imaju 12 px — izmjereno
   `tools/stil-mjera.mjs`, 2026-08-26. Isti postupak kao kod KPI kartica. */
.tray__h .n { margin-left: auto; background: #EF4444; color: #fff; border-radius: 999px;
  padding: 0 8px; font-size: var(--fs-micro); font-weight: 700; line-height: 19px; }
.tray__b { padding: 9px; max-height: 320px; overflow: auto; }
.tray-ev { border: 1px solid var(--color-border); border-left: 4px solid; border-radius: 8px;
  padding: 7px 10px; margin-bottom: 8px; cursor: grab; background: #fff; font-size: 12.5px; }
.tray-ev:active { cursor: grabbing; }
.tray-ev b { display: block; font-size: 12.5px; }
.tray-ev .m { color: var(--color-text-tertiary); font-size: var(--fs-micro); }
.tray-ev.odrz { border-left-color: #6366F1; }
.tray-ev.proj { border-left-color: var(--brand-secondary); }
.tray-ev.nepoznato { border-left-color: #94A3B8; }
.tray__hint { padding: 4px 13px 11px; font-size: 11.5px; color: var(--color-text-tertiary); }
.tray__prazno { padding: 4px 13px 12px; font-size: var(--fs-micro); color: var(--color-text-tertiary); }
.legend { display: flex; gap: 13px; font-size: var(--fs-micro); color: var(--color-text-tertiary);
  align-items: center; flex-wrap: wrap; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  margin-right: 5px; vertical-align: -1px; }
.legend .lock { font-size: 14px; margin-right: 3px; vertical-align: -2px; }
#cal { background: var(--color-surface-elevated); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 10px; }
.fc { --fc-border-color: var(--color-border); --fc-today-bg-color: #FFF8E7;
  --fc-button-bg-color: #fff; --fc-button-text-color: var(--color-text-secondary);
  --fc-button-border-color: var(--color-border);
  --fc-button-hover-bg-color: #F1F5F9; --fc-button-hover-border-color: #cbd5e1;
  --fc-button-active-bg-color: var(--brand-primary-dark, #0F2C4D);
  --fc-button-active-border-color: var(--brand-primary-dark, #0F2C4D);
  --fc-page-bg-color: #fff; font-size: 12.5px; }
.fc .fc-button { font: inherit; font-size: 12.5px; font-weight: 600; border-radius: 8px;
  padding: 6px 12px; text-transform: none; }
/* ⚠️ AKTIVNI GUMB (Mjesec/Tjedan) BIJELIM SLOVIMA (Mladen 06.09.2026.): `--fc-button-text-color`
   boji tekst SVIH gumba, a knjiznica nema varijablu za tekst aktivnog — pa je „Mjesec" na navy
   podlozi bio siv i necitljiv. Jedno pravilo, nista drugo na gumbima. */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { color: #fff; }
/* Oblacic dogadaja u kalendaru: isti obrazac kao `.wo-tab::after` (navy, 0,05 s), ali JEDAN
   element uz pokazivac (`#fcTip`) — u celiji dana bi ga odrezao njezin overflow. */
.fc-tip { position: fixed; z-index: 60; background: var(--brand-primary-dark, #0F2C4D); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1.45; padding: 6px 9px; border-radius: 6px;
  pointer-events: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(15, 44, 77, .25);
  animation: fc-tip-in .06s linear .05s both; }
@keyframes fc-tip-in { from { opacity: 0; } to { opacity: 1; } }
.fc .fc-event.ev-bez-serv .fc-event-title i { font-style: italic; opacity: .8; }
.fc .fc-toolbar-title { font-size: 16px; font-weight: 800; color: var(--color-text-primary); }
.fc .fc-col-header-cell-cushion { color: var(--color-text-tertiary); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  text-decoration: none; padding: 6px 4px; }
.fc .fc-daygrid-day-number { color: var(--color-text-tertiary); font-weight: 700;
  font-size: var(--fs-micro); text-decoration: none; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--brand-secondary); }
.fc .fc-event { border-radius: 6px; font-weight: 600; font-size: 11.5px; border-width: 0;
  border-left: 3px solid; padding: 1px 5px; cursor: pointer; }
.fc .fc-event.ev-lock { cursor: not-allowed; opacity: 0.75; }
.fc .fc-event.ev-lock .fc-event-title::before { content: "\1F512 "; font-size: 10px; }
/* ⚠️ NALOG BEZ PROCIJENJENOG TRAJANJA. FullCalendar mu crta zadanu duljinu, pa
   IZGLEDA kao da traje sat — a nitko to nije procijenio. Isprekidan rub kaze da
   duljina nije podatak; sudar s takvim nalogom se ne racuna (vidi `kolizija`). */
.fc .fc-event.ev-bez-trajanja { border-style: dashed; opacity: 0.9; }
.fc .fc-timegrid-slot { height: 2em; }
.fc .fc-daygrid-event-harness { margin-bottom: 1px; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--color-border); }
/* Vremena u kalendaru su brojke koje se usporeduju — monospace, kao svugdje. */
/* ⚠️ `--font-mono` U OVOJ DATOTECI NE POSTOJI — cijela aplikacija pise obitelj
   doslovno (`.mono`, `.vrow__plate`…). Moje pravilo je zato bilo TIHO MRTVO:
   vrijednost je pala na naslijedenu i vremena su ostala u Jakarti. Nasla ga je
   dopuna `tools/stil-mjera.mjs` koja prijavljuje `var()` bez definicije. */
.fc .fc-timegrid-slot-label-cushion, .fc .fc-event-time {
  font-family: 'JetBrains Mono', monospace; }

.pg-nacelo { margin-top: 10px; background: #EEF2FF; color: #3730A3; border-radius: 8px;
  padding: 9px 12px; font-size: var(--fs-sm); }
tr.pg-grp td { background: #EEF2FF; font-weight: 800; letter-spacing: 0.03em;
  font-size: var(--fs-xs); color: #3730A3; text-transform: uppercase; }
tr.pg-grp .mdi { color: #3730A3; margin-right: 5px; }
/* Stajanja i broj naloga — ista traka, ali tiho: to je opis, ne naslov. */
tr.pg-grp small { font-weight: 600; text-transform: none; letter-spacing: 0;
  color: #6470B8; margin-left: 8px; }
.pg-recenica { margin: 5px 0 3px; font-size: var(--fs-sm); color: var(--color-text-primary);
  background: var(--color-surface-alt); border-radius: 8px; padding: 6px 9px; }
/* ⚠️ ✦ ide SAMO na generirani tekst — oznaka znači „ovu je rečenicu napisao
   model iz brojki pokraj nje", pa na determinističkim dijelovima nema što tražiti. */
.pg-recenica.gen { border-left: 3px solid var(--brand-secondary); }
.pg-recenica.gen .mdi { color: var(--brand-secondary); }
.pg-mjera { display: inline-block; margin-left: 6px; font-size: var(--fs-xs);
  color: var(--color-text-tertiary); }
/* ⚠️ FLEX NA OMOTACU, NE NA `td`: `td{display:flex}` izbacuje celiju iz rasporeda
   tablice pa zaglavlje i tijelo vise nisu poravnani (izmjereno 04.09.2026.). */
.zk-act .zk-act__b { display: flex; gap: 5px; margin-top: 4px; }
.zk-act .chip { white-space: nowrap; }
.zk-ns--nije { background: #F1F5F9; color: #475569; }
.zk-ns--tijek { background: #FEF3C7; color: #B45309; }
.zk-ns--zavrsen { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.zk-ns--otkazan { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
/* izvedeni kratak opis (prvih 80 znakova opisa) — sivo, da se vidi da nije upisan */
.zk-izv { color: var(--color-text-tertiary, #94A3B8); }
/* hitnost u tablici: ikona gore, tekst u boji ikone dolje (12 px, drugi red) */
/* ⚠️ 700, ne 600 (11.09.2026.): znakovi su 17 px / 800, a rijec je 12 px — na
   punim tonovima je tezina jedini alat koji popravlja citljivost bez diranja
   tona. */
.hit-txt { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; margin-top: 1px; }
/* stupac po sadrzaju (broj + datum) */
.tbl thead th.nc { width: 1%; white-space: nowrap; }
.zk-act .btn { padding: 4px 8px; font-size: var(--fs-xs); }
.zk-act .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.zk-hit--niska { background: #F1F5F9; color: #475569; }
.zk-hit--srednja { background: #DBEAFE; color: #1D4ED8; }
.zk-hit--visoka { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
.zk-hit--kriticna { background: #FEE2E2; color: #B91C1C; }
.zk-st--novi { background: #DBEAFE; color: #1D4ED8; }
.zk-st--u_nalogu { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.zk-st--odbijen { background: #F1F5F9; color: #475569; }
.zk-dup { background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 10px;
  padding: 10px 12px; grid-column: 1 / -1; }
.zk-dup b { color: #B91C1C; }
.zk-dup .red { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.zk-dup .stavka { font-size: var(--fs-sm); color: var(--color-text-secondary);
  border-top: 1px dashed #FCA5A5; padding-top: 6px; margin-top: 6px; }
/* Privitci (odluka 81) — drop-zona i popis, oblik iz mockupa. */
/* Panel izlazaka (odluka 83) — obavijest, ne ponuda: nijedan gumb. */
.zk-ruta { background: #EFF9FE; border: 1px solid #BAE0F2; border-left: 3px solid #0EA5E9;
  border-radius: 10px; padding: 10px 12px; grid-column: 1 / -1;
  font-size: var(--fs-sm); color: var(--color-text-secondary); }
.zk-ruta b { color: #0369A1; }
.zk-ruta__red { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
.zk-ruta__red .mdi { color: #0EA5E9; }
.zk-ruta__dalje { color: var(--color-text-tertiary); font-size: var(--fs-xs); }
.zk-drop { border: 2px dashed var(--color-border); border-radius: 10px;
  padding: 14px; text-align: center; color: var(--color-text-tertiary);
  font-size: var(--fs-sm); cursor: pointer; background: var(--color-surface-alt); }
.zk-drop:hover, .zk-drop.nad { border-color: var(--brand-primary);
  color: var(--brand-primary); background: #F8FAFF; }
.zk-prilozi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.zk-prilog { display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--color-border); border-radius: 999px;
  padding: 3px 10px; font-size: var(--fs-sm); }
.zk-prilog .mdi { color: var(--brand-primary); }
.zk-prilog small { color: var(--color-text-tertiary); }
.zk-prilog button { border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-tertiary); font-weight: 800; padding: 0 2px; }
/* ⚠️ Uklonjen privitak se PRIKAZUJE, ne skriva: zapis o tome da je datoteka
   postojala jedini je trag koji ostaje nakon roka čuvanja. */
.zk-prilog--uklonjen { opacity: 0.65; border-style: dashed; }
.zk-korak { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0;
  border-bottom: 1px solid var(--color-border); }
.zk-korak:last-child { border-bottom: 0; }
.zk-korak .mdi { font-size: 18px; color: var(--color-text-tertiary); }
.zk-korak.done .mdi { color: var(--green-text, #15803D); }
.zk-korak b { display: block; }
.zk-link { display: flex; gap: 6px; margin-top: 8px; }
.zk-link input { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); }
/* ═══ KORISNICI: popis i modal (odluka 88) ═══════════════════════════════════
   Preneseno iz `mockups/OSIRIS_NEO_novi_korisnik_mockup.html`.
   ⚠️ VRIJEDNOSTI SU MOCKUPOVE, IMENA SU NASA. Mockup ima vlastiti rjecnik
   tokena (`--t4`, `--info-bg`, `--amber-t`); ovdje se koriste imena koja
   aplikacija stvarno definira, s istim vrijednostima — nedefinirana varijabla
   tiho pada na zadanu i ekran odluta, a to vec ima svoju branu. */

/* ── popis ───────────────────────────────────────────────────────────────── */
.rola { display: inline-block; background: var(--color-info-bg, #EEF2FF); color: #3730A3;
        border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.rola.sa { background: #FDF3DE; color: #92600A; }
.chk { color: var(--green-text, #15803D); font-size: 15px; }
.dash { color: var(--color-text-disabled, #94A3B8); }
/* Serviser bez ijedne vrste posla. Uz kvacicu, ne umjesto nje. */
.nep { color: var(--orange-text, #B45309); font-size: 14px; margin-left: 4px; cursor: help; }

/* ── modal ───────────────────────────────────────────────────────────────── */
.pills { display: flex; gap: 7px; flex-wrap: wrap; }
.pills button { border: 1px solid var(--color-border, #E5E7EB); background: #fff;
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12.5px;
  font-weight: 700; color: var(--color-text-secondary, #334155); cursor: pointer;
  display: flex; gap: 6px; align-items: center; }
.pills button .mdi { font-size: 15px; color: var(--color-text-disabled, #94A3B8); }
.pills button.on { background: var(--brand-primary, #1F4E8A);
  border-color: var(--brand-primary, #1F4E8A); color: #fff; }
.pills button.on .mdi { color: #FCD34D; }

/* ═══ MODAL KORISNIKA — dvije kolone (mockup `OSIRIS_NEO_uredi_korisnika`) ════
   ⚠️ RASPORED JE BIO UZROK SKROLA. Jedna kolona i polja siroka koliko je
   kontejner (`npr. B` na 500 px) davali su sadrzaj visi od 1366×768. */
.kor2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.kor2 > div { min-width: 0; }
.kor-razd { border-left: 1px solid var(--color-border, #E5E7EB); padding-left: 24px; }
.kor-r { display: flex; gap: 10px; margin-bottom: 9px; }
.kor-r:last-child { margin-bottom: 0; }
.kor-r .fld { flex: 1; min-width: 0; margin-bottom: 0; }
/* Sirina po SADRZAJU: mobitel i dozvola trebaju 116 px, beacon 150. */
.kor-r .fld--uz { flex: 0 0 116px; }
.kor-r .fld--ble { flex: 0 0 150px; }
.sec__h .opc { margin-left: auto; font-size: 9px; font-weight: 700;
  color: var(--color-text-disabled, #94A3B8); letter-spacing: 0; text-transform: none; }

.svoj { display: flex; gap: 8px; }
.svoj label { flex: 1; display: flex; gap: 8px; align-items: center;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; padding: 7px 10px;
  cursor: pointer; background: #fff; min-width: 0; }
.svoj input { width: 15px; height: 15px; flex: none; }
.svoj b { font-size: 12px; }
.svoj .mdi { font-size: 14px; color: var(--color-text-disabled, #94A3B8); margin-left: auto; }

/* ⚠️ VRSTE POSLA SE PRELAMAJU, ne slazu u mrezu s fiksnim brojem kolona.
   Sifrarnik nije zatvoren — kategorije se dodaju u Administraciji, pa raspored
   mora primiti i deset i dvadeset stavki bez izmjene koda. Mreza bi na svakoj
   dopuni ostavljala rastegnute celije ili se prelamala na krivom mjestu. */
.kats { display: flex; flex-wrap: wrap; gap: 6px; }
.kats label { display: inline-flex; gap: 6px; align-items: center; font-size: 12px;
  cursor: pointer; border: 1px solid var(--color-border, #E5E7EB); border-radius: 999px;
  padding: 5px 11px 5px 8px; background: #fff; white-space: nowrap; flex: 0 0 auto; }
.kats input { width: 14px; height: 14px; flex: none; }

/* ⚠️ IZGLED ODABIRA IDE IZ CSS-a, NE IZ JS-a. Prije je plocica imala `onclick`
   koji prebacuje klasu, a kvacica `stopPropagation` da se ne pozove dvaput — pa
   klik NA kvacicu nije mijenjao nista i izgledalo je kao da treba dvaput
   kliknuti. Nativni `<label>` to vec radi jednim klikom bilo gdje na plocici.
   Ista podloga za Serviser/Vozac i za vrste posla: jedan pojam, jedan izgled. */
.kats label:has(input:checked) { border-color: var(--brand-primary, #1F4E8A);
  background: var(--color-info-bg, #EEF2FF); color: var(--brand-primary, #1F4E8A);
  font-weight: 700; }
.svoj label:has(input:checked) { border-color: var(--brand-primary, #1F4E8A);
  background: var(--color-info-bg, #EEF2FF); }
.svoj label:has(input:checked) .mdi { color: var(--brand-primary, #1F4E8A); }

/* Poruka stoji UZ UZROK, ne u podnozju. */
.greska { background: var(--red-bg, #FEE2E2); border: 1px solid #F5C6C6; border-radius: 8px;
  padding: 7px 10px; font-size: 11.5px; font-weight: 700; color: var(--red-text, #B91C1C);
  display: flex; gap: 7px; align-items: center; margin-top: 9px; }
.greska .mdi { font-size: 14px; }
.kats--trazi .kats { outline: 1px solid #F5C6C6; outline-offset: 4px; border-radius: 10px; }

/* ⚠️ MODAL KORISNIKA JE UZI OD OPCEG SIROKOG (1080 px): mockup trazi 940, i to
   nije ukras — dvije kolone po 458 px drze polja u citljivoj sirini, dok bi na
   1080 px e-mail i ime bili rastegnuti preko pola ekrana. */
.modal.modal--siroki:has(.kor2) { max-width: min(940px, 96vw); }

/* ⚠️ SUZENO NA OVAJ MODAL, ne na cijelu aplikaciju. `.pills`, `.sec__h` i
   `.fld label` dijele i drugi modali; novi mockup trazi guste vrijednosti koje
   su ovdje ispravne (dvije kolone, bez skrola), a drugdje bi bile promjena koju
   nitko nije trazio. Zato `:has(.kor2)` — pravilo vrijedi samo gdje je mjereno. */
#modalBody:has(.kor2) .pills button { padding: 5px 12px; font-size: 12px; }
#modalBody:has(.kor2) .sec__h { font-weight: 800; }
#modalBody:has(.kor2) .fld label {
  color: var(--color-text-disabled, #94A3B8); font-size: 8.5px;
  font-weight: 800; letter-spacing: 0.05em;
}

.nemaracun { background: var(--color-surface, #F8FAFC); border: 1px dashed #C6D1E0;
  border-radius: 9px; padding: 10px 12px; font-size: 11.5px;
  color: var(--color-text-secondary, #334155); line-height: 1.5; }
.nemaracun b { display: block; margin-bottom: 2px; }
.akc { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.btn--opasno { color: var(--red-text, #B91C1C); border-color: #F5C6C6; }
.sw { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.sw input { width: 16px; height: 16px; }
.podsek { border-left: 3px solid var(--color-info-bg, #EEF2FF); padding-left: 12px; margin-bottom: 12px; }

.napo { background: var(--color-info-bg, #EEF2FF); border: 1px solid #C7D2FE; border-radius: 9px;
  padding: 9px 12px; font-size: 11.5px; color: #3730A3; display: flex; gap: 8px;
  align-items: flex-start; margin-top: 8px; }
.napo .mdi { font-size: 15px; margin-top: 1px; }

/* Razlog uz onemoguceni gumb: gumb koji ne radi i ne kaze zasto je zamka. */
.kRazlog--zivo { color: var(--red-text, #B91C1C); font-weight: 700; }


/* Naslov skupine u lijevom izborniku (mockup `OSIRIS_NEO_administracija_mockup`).
   Crta se samo kad skupina ima barem jednu vidljivu stavku. */
.smenu__grp { margin: 14px 12px 6px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-secondary, #D99A18);
  display: flex; align-items: center; gap: 7px; }
.smenu__grp::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.12); }

/* ═════ JEDAN STIL TABOVA — `OSIRIS_NEO_tabovi_mockup.html` ═════════════════
   ⚠️ DEVET IZVEDBI SVEDENO NA JEDNU (Mladenova odluka 2026-08-28). Do tada su
   `.ltab`, `.btab`, `.wtab`, `.dtab`, `.stab`, `.kt-dtabs button`, `.kl-dtab`,
   `.zk-tab` i `.pg-tabs a` imali devet razlicitih visina, velicina pisma i
   aktivnih stanja — dvije od njih s NAVY crtom umjesto zlatne, jedna s
   podignutim karticama. Nijedan test to nije mogao uhvatiti: svaka je izvedba
   bila dosljedna sama sebi.

   ⚠️ IMENA KLASA U OZNACJU OSTAJU. Popis selektora je alias, jer bi
   preimenovanje diralo markup na devet mjesta i sve njihove testove — a zadatak
   je izgled, ne imena. Novi kod neka pise `.tabs > .tab`.

   ⚠️ `font-family: inherit`, NE `font: inherit` — kratica ponistava velicinu i
   debljinu ispod sebe. Tocno to se vec dogodilo (commit a1a97c2), pa se ovdje
   ne ponavlja iako mockup pise kraticu.

   ⚠️ `flex: 1` NIJE U OSNOVNOJ KLASI. `.ltab` se rasteze jer stoji u uskom
   panelu od 302 px; traka preko cijele sirine ekrana s time bi ostavila 300 px
   praznine oko naziva. Rastezanje je zato svojstvo VARIJANTE (`.ltab`,
   `.tabs--panel .tab`), ne taba.

   ⚠️ `.kl-stab` NIJE TAB NEGO FILTAR (pilule) i namjerno nije na popisu. Isto
   vrijedi za svaku drugu „traku" koja bira podskup umjesto pogleda. */
/* ⚠️ TRAKA JE LJEPLJIVA, I TO JE POLA ODLUKE. Podignute kartice su 26. 08.
   uvedene jer se ravna traka „gubila uz stranicu"; problem je bio da OTKLIZI, ne
   kako izgleda. Zato ostaje ravna, a ne klizi.

   ⚠️ `position: sticky` LIJEPI SE ZA NAJBLIZI SPREMNIK KOJI SE SKROLA, NE ZA
   PROZOR. Izmjereno u pregledniku, po ekranima — spremnik NIJE isti svugdje:

     `.stabs`    (kartoteka)  → `#atab-avozila`, viska 1382 px
     `.kl-dtabs` (klijenti)   → `#klEkran`,      viska 2698 px
     `.zk-tabs`  (modal)      → `.modal__b`
     ostale traka (lijevi i donji panel, detalj naloga) su u flex-stupcu u kojem
     klizi TIJELO, a traka je zaseban redak — ondje je `sticky` bez ucinka i
     ostaje samo zato da pravilo bude jedno.

   ⚠️ `top: 0`, NE 52 px. Gornja traka je fiksna, ali na tim ekranima STRANICA se
   ne skrola (izmjereno: viska 0) — klizi unutarnji spremnik, a njegov vrh je
   ispod `.topbar`. Da je uzeto 52 px, traka bi visjela 52 px prenisko.

   ⚠️ `z-index: 30` mora biti IZNAD ljepljivih zaglavlja tablica (2-3), jer se
   tablica skrola POD trakom. I podloga mora biti neprozirna, inace sadrzaj
   prosijava. */
.tabs {
  /* ⚠️ BEZ `gap`-a: mockup ga nema, a stavke vec nose vlastiti `padding`.
     Dodao sam ga pri ujednacavanju i `stil-mjera` ga je odmah prijavila kao
     JEDINU novu razliku (5 → 6) — vraceno. */
  display: flex; align-items: center; margin: 0; padding: 0 12px;
  border-bottom: 1px solid var(--color-border, #E5E7EB);
  position: sticky; top: 0; z-index: 30;
  background: var(--color-surface-elevated, #FFFFFF);
}
.tabs > .tab {
  padding: 9px 16px; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--color-text-secondary, #475569); background: none; border: none;
  border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px;
  white-space: nowrap; text-decoration: none; box-shadow: none;
}
.tabs > .tab:hover {
  color: var(--color-text-primary, #0F172A); background: none;
}
/* ⚠️ DRUGO IME AKTIVNOG STANJA (`on`) UKLONJENO 02.09.2026. Isto stanje s
   dva imena znaci
   da se tab moze naci u oba, u nijednom, ili da nova traka slucajno izabere
   ono koje netko sutra obrise. Aktivan tab je `active`, svugdje. */
.tabs > .tab.active {
  color: var(--brand-primary, #1F4E8A);
  border-bottom-color: var(--brand-secondary, #D99A18);
  background: var(--color-info-bg, #EEF2FF);
}
.tabs > .tab .mdi { font-size: var(--fs-lg); }
/* Traka u uskom panelu se RASTEZE; traka preko ekrana se slaze slijeva. */
/* ⚠️ DVIJE ISTINSKE VARIJANTE, i nijedna vise.
   `--panel`: traka u USKOM panelu se rasteze na jednake dijelove i nema
   vodoravni razmak — inace tri taba u panelu od 320 px ne stanu.
   `--kliz`: traka SMIJE biti sira od spremnika (kartoteka ima osam tabova);
   bez nje se zadnji tab ne moze dosegnuti. */
/* ⚠️ U PANELU TRAKA NIJE LJEPLJIVA, I NE TREBA BITI (03.09.2026.). `.tabs`
   nosi `position: sticky` za trake koje stoje NAD kliznim sadrzajem. U panelu
   je traka dijete flex-stupca i vec je `flex-shrink: 0` iznad kliznog tijela
   (`.lpanel__body`) — dakle ne klizi ni bez ljepljivosti. Ljepljiv element
   ciji spremnik ne klizi je „omotac koji ne drzi": izgleda kao obavljen posao,
   a ne radi nista — i upravo ga to brana `ljepljivo.mjs` od danas prijavljuje. */
.tabs--panel { padding: 0; position: static; }
.tabs--panel > .tab { flex: 1; justify-content: center; padding: 9px 4px; }
.tabs--kliz { overflow-x: auto; }
/* ⚠️ TRECA VARIJANTA, I NIJE NAVIKA NEGO MOCKUP. Traka tabova u modalu zahtjeva
   ima vodoravni razmak 18 px — mjeri ga `stil-mjera` protiv
   `OSIRIS_NEO_zahtjevi_i_nalozi_mockup.html`. Ujednacavanje na 12 px je tu
   razliku POKAZALO (19 → 13 → 5 nakon vracanja), i to je jedini razlog zasto
   varijanta postoji: mockup je obvezujuci, a 18 px je njegov zljeb. */
/* ⚠️ `gap` je OVDJE, ne na `.tabs`. Dva mockupa traze dvoje: ekranska traka
   nema razmak, modalna ima 2 px. Mjerilo je to pokazalo dvaput — jednom kad sam
   gap stavio na sve (5 → 6), i jednom kad sam ga maknuo sa svih (opet 6). */
.tabs--modal { padding: 0 18px; gap: 2px; }
/* Zakljucan tab modala zadrzava svoje stanje — nije ni aktivan ni obican.
   ⚠️ JEDINA DEKLARACIJA (02.09.2026.). Bile su dvije, identicne; ranija (uz
   `.zk-*` pravila) nikad nista nije obojila jer ju je ova nadjacavala istom
   specificnoscu. Dvostruki komentar iznad bio je trag kopiranja. */
.tabs > .tab.dis { color: #94A3B8; opacity: 1; cursor: not-allowed; }



/* ═════ SORTIRANJE PO STUPCIMA I STANJE U RETKU ═══════
   ⚠️ CIJELO ZAGLAVLJE JE GUMB, ne ikona u njemu (03.09.2026., mockup
   `OSIRIS_NEO_zavrseni_nalozi_u_tablici_mockup.html`). Meta za klik je cijela
   celija; ikona od 12 px je meta koju se promasi. `Tab` i `Enter` time rade bez
   ijedne dodatne linije, a `aria-sort` stoji na `<th>` — to citac ekrana cita.
   ⚠️ LJEPLJIVOST ZAGLAVLJA SE NE DIRA — `<th>` je i dalje `sticky`; gumb je
   unutar njega, pa ga ne moze odlijepiti. */
.tbl thead th.sort { padding: 0; white-space: nowrap; }
.tbl thead th.sort > button {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 5px;
  width: 100%; padding: 10px 12px; cursor: pointer; font: inherit;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #E5EAF2;
}
.tbl thead th.sort > button:hover { background: rgba(255,255,255,0.10); }
.tbl thead th.sort > button:focus-visible {
  outline: 2px solid var(--brand-secondary, #D99A18); outline-offset: -2px; }
/* ⚠️ STRELICA SAMO NA SORTIRANOM STUPCU — na svima bi tvrdila da je sve
   sortirano, a sortiran je jedan. */
.tbl thead th.sort--on { background: #16375E; }
.tbl thead th.sort--on > button { color: #fff; }
.sort__z { font-size: 14px; line-height: 1; color: var(--brand-secondary, #D99A18); }
.tbl thead th.c > button, .tbl thead th.c2 > button {
  justify-content: center; padding-left: 0; padding-right: 0; }
.tbl thead th.c { width: 44px; } .tbl thead th.c2 { width: 78px; }
.tbl td.c { text-align: center; padding-left: 0; padding-right: 0; width: 44px; }
.tbl td.hitc { text-align: center; }
/* Broj naloga se NE prelama — „RN-2026-0097" u cetiri reda nije broj. */
.tbl td.no-c { white-space: nowrap; }
/* Kratak opis u tablici naloga: najvise DVA retka, bez podebljanja (26.09.2026.). */
.wo-opis2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; font-weight: 400; }

/* HITNOST: OBLIK I VELICINA + BOJA (od 25.09.2026.; oblik crta `znakHitnosti`).
   ⚠️ DVA KODA ZA JEDNU VRIJEDNOST: oblik/velicina I boja — tocka 5 px, tocka
   9 px, krug 15 px s usklicnikom, trokut 17 px s usklicnikom. Razina se cita i
   bez boje; rijec je u `title`/`aria-label` i u `.hit-txt` ispod.
   ⚠️ KUTIJA `.hit` SE NE MIJENJA: 17 px (izmjereno 25.09.2026.), a svaki SVG je
   visok tocno toliko. Pravilo ispod je netaknuto; mijenjaju se SAMO boje.

   ⚠️ PRAVILO OD 11.09.2026. VISE NE VRIJEDI. Ondje je pisalo da boje hitnosti
   moraju biti zelena, zuta, narancasta i crvena (Mladen: „hitnost ostaje
   kakva je bila — usklicnici i tekst"). Mladen ga je 25.09.2026. svjesno
   promijenio: „ja bi normalno zeleno". Od tada:
     niska            → neutralna siva (`--color-text-tertiary`)
     srednja/normalna → zelena  (`--green`)
     visoka           → narancasta (`--orange`)
     kriticna/hitno   → crvena  (`--red`)
   Zuta je izasla iz ljestvice hitnosti (token `--yellow` ostaje, drugdje ga
   ima tko koristiti). NISKA VISE NEMA SVOJU BOJU zato sto je zelena sada
   „srednja": niska je ono sto ne trazi paznju, pa je siva — a razlikuje je
   VELICINA (5 px prema 9 px). Tko ovo „ispravi" natrag na zelenu, dobiva dvije
   zelene razine.
   ⚠️ Siva je `--color-text-tertiary`, NE `--color-text-disabled`: ta je
   rezervirana za neaktivno, pa bi niska izgledala kao onemoguceno.
   ⚠️ KONTRAST NA BIJELOM, izmjeren 25.09.2026.: siva 4,76 · zelena 3,30 ·
   narancasta 2,80 · crvena 3,76 :1. Tri su ispod 4,5:1 — svjesno, jer boja
   NIJE jedini kanal (oblik, velicina, rijec). Tezina rijeci ostaje 700.
   ⚠️ Brend-zlatna (`--brand-secondary`) se za hitnost i dalje NE koristi. */
.hit { display: inline-flex; align-items: baseline; justify-content: center;
  font-weight: 800; font-size: 17px; line-height: 1; letter-spacing: -1px; }
.hit--niska { color: var(--color-text-tertiary); }
.hit--srednja, .hit--normalna { color: var(--green); }
.hit--visoka { color: var(--orange); }
.hit--kriticna, .hit--hitno { color: var(--red); }

/* GOTOVO SE VIDI BEZ CITANJA.
   1. Prvi stupac je kvacica — oko klize po jednom uskom stupcu.
   2. Gotov redak BLIJEDI: paznja ide na ono sto nije obavljeno.
   3. ZAVRSEN ≠ OTKAZAN: oba blijede, ali otkazan nosi ✕ — posao nije obavljen
      i kvacica bi lagala. */
.mk { font-size: 21px; line-height: 1; display: inline-block; }
.mk--zavrsen { color: var(--green, #16A34A); }
/* Završen, a nije fakturiran — boja pilule „za fakturiranje" (`.tg-ned`). */
.mk--zafakt { color: var(--orange-text, #B45309); }
.mk--otkazan { color: var(--color-text-tertiary, #94A3B8); }
.mk--otvoren { color: #CBD5E1; font-size: 19px; }
/* ⚠️ ZAVRSENI REDAK JE CITLJIV (10.09.2026., Mladenov nalog). Do tada je
   nosio `opacity: .55`, pa se zavrseni nalog nije mogao PROCITATI — a njega se
   cita najcesce (tko je zatvorio, kada, s kojom ekipom). Razlika ostaje u tri
   znaka koji ne diraju citljivost: zelena pilula stanja, kvacica u prvoj celiji
   i zelena crta uz lijevi rub retka.
   ⚠️ `tr.zk-odbijen { opacity: .55 }` je DRUGA tablica (zahtjevi) i NIJE
   dirana — odbijeni zahtjev je zavrsena prica, zavrseni nalog nije. */
.tbl tr.gotov td:first-child { box-shadow: inset 3px 0 0 var(--green, #16A34A); }
/* Crta u boji ikone iz prvog stupca (`razredCrte`, 25.09.2026.): otkazan/
   odbijen/prekinut = sivi ✕ (`.mk--otkazan`), ceka fakturiranje = narancasta
   kvacica (`.mk--zafakt`). */
.tbl tr.gotov.gotov--otkazan td:first-child { box-shadow: inset 3px 0 0 var(--color-text-tertiary, #94A3B8); }
.tbl tr.gotov.gotov--zafakt td:first-child { box-shadow: inset 3px 0 0 var(--orange-text, #B45309); }

/* Zaglavlje grupe broji zavrsene — je li izlazak zatvoren vidi se bez
   otvaranja ijednog retka; brojka se racuna iz ISTIH redaka koji su vec
   grupirani, nije novi upit. */
.pg-grp__zav { float: right; font-weight: 600; font-size: var(--fs-sm);
  color: var(--color-text-secondary, #475569); display: inline-flex;
  align-items: center; gap: 5px; }
.pg-grp__zav .mdi { color: var(--green, #16A34A); font-size: 15px; }
.pg-grp__zav--sve { color: var(--green-text, #15803D); }

/* ═════ ANALIZA — kartice taba „Pregled" ════════════════════════════════════
   ⚠️ PRENESENO IZ `mockups/OSIRIS_NEO_analiza_mockup.html`, uz jednu mehanicku
   izmjenu: mockupovi tokeni (`--t3`, `--bd`, `--navy`…) zamijenjeni su tokenima
   aplikacije — mockup opisuje jedan ekran, token cijelu aplikaciju.

   ⚠️ SVE JE POD `#atab-aanaliza`, i to nije uljepsavanje. Mockup slobodno
   koristi `.card`, `.hint`, `.leg`, `.pill` i goli `table` — imena koja u
   aplikaciji vec postoje i znace drugo. Bez opsega bi ovaj ekran prebojao pola
   sustava, i to tiho.

   ⚠️ TRAKA TABOVA NIJE OVDJE: koristi zajednicku klasu `.tabs > .tab` (jedan
   stil tabova, odluka 2026-08-28), pa se o njoj ovdje ne pise nista. */
#atab-aanaliza .zona-h { display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--color-text-tertiary, #94A3B8);margin:0 0 10px }
#atab-aanaliza .zona-h .mdi { font-size:14px }
#atab-aanaliza .zona-h::after { content:"";flex:1;height:1px;background:var(--color-border, #E5E7EB) }
#atab-aanaliza .zona-h.crvena { color:var(--red-text, #B91C1C) }
#atab-aanaliza .zona-h.crvena::after { background:#F5C6C6 }
#atab-aanaliza .hitno { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px }
#atab-aanaliza .hcard { border-radius:12px;border:1.5px solid;padding:14px 16px;cursor:pointer; transition:box-shadow .12s,transform .08s }
#atab-aanaliza .hcard:hover { box-shadow:0 6px 18px rgba(15,23,42,.12) }
#atab-aanaliza .hcard__t { display:flex;align-items:center;gap:8px;margin-bottom:6px }
#atab-aanaliza .hcard__t .mdi { font-size:19px }
#atab-aanaliza .hcard__t b { font-size:12.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase }
#atab-aanaliza .hcard__n { font-size:44px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; display:flex;align-items:baseline;gap:9px }
#atab-aanaliza .hcard__n small { font-size:13px;font-weight:700;letter-spacing:-.01em }
#atab-aanaliza .hcard__l { margin-top:9px;padding-top:9px;border-top:1px solid;font-size:11.5px;line-height:1.55 }
#atab-aanaliza .hcard__l div { display:flex;gap:7px;align-items:baseline }
#atab-aanaliza .hcard__l b { font-weight:700 }
#atab-aanaliza .hcard__l span { margin-left:auto;font-weight:700;white-space:nowrap }
#atab-aanaliza .hc-red { border-color:#F0B8B8;background:linear-gradient(150deg,#FFF7F6,#FDEBE9) }
#atab-aanaliza .hc-red .hcard__t,
#atab-aanaliza .hc-red .hcard__n { color:var(--red-text, #B91C1C) }
#atab-aanaliza .hc-red .hcard__l { border-color:#F5D3D0;color:#8C4A44 }
#atab-aanaliza .hc-amber { border-color:#EFD79A;background:linear-gradient(150deg,#FFFDF5,#FCF3DC) }
#atab-aanaliza .hc-amber .hcard__t,
#atab-aanaliza .hc-amber .hcard__n { color:var(--orange-text, #B45309) }
#atab-aanaliza .hc-amber .hcard__l { border-color:#F0E0B4;color:#87683A }
#atab-aanaliza .hc-ok { border-color:#C8E6D3;background:linear-gradient(150deg,#FAFEFB,#EAF8EF) }
#atab-aanaliza .hc-ok .hcard__t,
#atab-aanaliza .hc-ok .hcard__n { color:var(--green-text, #15803D) }
#atab-aanaliza .hc-ok .hcard__l { border-color:#D3EBDB;color:#4A7359 }
#atab-aanaliza .zgrid { display:grid;gap:12px;margin-bottom:24px }
#atab-aanaliza .z2 { grid-template-columns:1.35fr 1fr }
#atab-aanaliza .z3 { grid-template-columns:1.5fr 1fr }
#atab-aanaliza .card { background:var(--color-surface-elevated, #FFFFFF);border:1px solid var(--color-border, #E5E7EB);border-radius:12px;overflow:hidden; box-shadow:2px 3px 8px rgba(15,23,42,.06);cursor:pointer;transition:box-shadow .12s }
#atab-aanaliza .card:hover { box-shadow:0 5px 16px rgba(15,23,42,.11) }
#atab-aanaliza .card__h { padding:11px 14px;border-bottom:1px solid var(--color-border, #E5E7EB);display:flex;align-items:center;gap:8px }
#atab-aanaliza .card__h h3 { font-size:13px;font-weight:700 }
#atab-aanaliza .card__h .mdi { font-size:16px;color:var(--brand-primary, #1F4E8A) }
#atab-aanaliza .card__h .m { margin-left:auto;font-size:11px;color:var(--color-text-secondary, #475569);font-weight:600 }
#atab-aanaliza .card__b { padding:13px 14px }
#atab-aanaliza .dev { margin-bottom:11px }
#atab-aanaliza .dev:last-child { margin-bottom:0 }
#atab-aanaliza .dev__r { display:flex;align-items:baseline;gap:8px;margin-bottom:4px }
#atab-aanaliza .dev__r b { font-size:12.5px }
#atab-aanaliza .dev__r span { font-size:11px;color:var(--color-text-secondary, #475569) }
#atab-aanaliza .dev__r .p { margin-left:auto;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums }
#atab-aanaliza .dev__t { position:relative;height:16px;background:#F1F5F9;border-radius:5px;overflow:hidden }
#atab-aanaliza .dev__mid { position:absolute;left:50%;top:0;bottom:0;width:1.5px;background:#CBD5E1;z-index:2 }
#atab-aanaliza .dev__f { position:absolute;top:2px;bottom:2px;border-radius:4px }
#atab-aanaliza .dev__f.pos { left:50%;background:linear-gradient(90deg,#F0654E,#DC2626) }
#atab-aanaliza .dev__f.neg { right:50%;background:linear-gradient(270deg,#34C06B,#16A34A) }
#atab-aanaliza .dev__f.nul { left:50%;width:2px;background:#CBD5E1 }
#atab-aanaliza .ring-wrap { display:flex;align-items:center;gap:16px;justify-content:center;padding:4px 0 }
#atab-aanaliza .ring { width:118px;height:118px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center }
#atab-aanaliza .ring i { width:78px;height:78px;border-radius:50%;background:#fff;display:flex;flex-direction:column; align-items:center;justify-content:center;font-style:normal }
#atab-aanaliza .ring i b { font-size:19px;font-weight:800;color:var(--red-text, #B91C1C);line-height:1 }
#atab-aanaliza .ring i span { font-size:8.5px;color:var(--color-text-secondary, #475569);font-weight:700;text-align:center;margin-top:2px }
#atab-aanaliza .leg { display:flex;flex-direction:column;gap:8px }
#atab-aanaliza .leg .li { display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600 }
#atab-aanaliza .leg .sq { width:10px;height:10px;border-radius:3px;flex:none }
#atab-aanaliza .leg .li b { margin-left:auto;font-variant-numeric:tabular-nums;padding-left:12px }
#atab-aanaliza .hm { display:grid;grid-template-columns:64px 1fr;gap:5px 9px;align-items:center }
#atab-aanaliza .hm__lb { font-size:11.5px;font-weight:700;text-align:right }
#atab-aanaliza .hm__row { display:grid;grid-template-columns:repeat(22,1fr);gap:2.5px }
#atab-aanaliza .hm__c { aspect-ratio:1;border-radius:2.5px;background:#EEF2F7 }
#atab-aanaliza .hm__c.on { background:#1F4E8A }
#atab-aanaliza .hm__c.half { background:#93B4DC }
#atab-aanaliza .hm__foot { display:flex;align-items:center;gap:14px;margin-top:11px;font-size:10.5px;color:var(--color-text-secondary, #475569) }
#atab-aanaliza .hm__foot .k { display:flex;align-items:center;gap:5px }
#atab-aanaliza .hm__foot .k i { width:9px;height:9px;border-radius:2.5px;display:block;font-style:normal }
#atab-aanaliza .corr { display:flex;align-items:flex-end;gap:14px;height:120px;padding-top:6px }
#atab-aanaliza .corr .grp { flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:5px }
#atab-aanaliza .corr .pair { display:flex;align-items:flex-end;gap:3px;width:100%;height:100%;justify-content:center }
#atab-aanaliza .corr .b { width:17px;border-radius:4px 4px 0 0 }
#atab-aanaliza .corr .b.km { background:linear-gradient(180deg,#2E62A8,#1F4E8A) }
#atab-aanaliza .corr .b.wo { background:linear-gradient(180deg,#F5B93E,#D99A18) }
#atab-aanaliza .corr .lb { font-size:10.5px;font-weight:700;color:var(--color-text-secondary, #475569) }
#atab-aanaliza .corr .kmpo { font-size:10px;font-weight:800;color:var(--color-text-secondary, #475569) }
#atab-aanaliza table { width:100%;border-collapse:collapse;font-size:12.5px }
#atab-aanaliza thead th { text-align:left;font-size:11px;color:#E5EAF2;text-transform:uppercase;letter-spacing:.05em; padding:8px 12px;font-weight:700;background:var(--brand-primary-dark, #0F2C4D) }
#atab-aanaliza td { padding:7px 12px;border-bottom:1px solid #F1F5F9;vertical-align:middle }
#atab-aanaliza tbody tr:hover td { background:#FAFCFF }
#atab-aanaliza tbody tr:last-child td { border-bottom:0 }
#atab-aanaliza td .ime { font-weight:700 }
#atab-aanaliza td .ime small { display:block;font-weight:600;color:var(--color-text-secondary, #475569);font-size:10.5px }
#atab-aanaliza .pill { display:inline-block;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;white-space:nowrap }
#atab-aanaliza .p-ok { background:var(--green-bg, #DCFCE7);color:var(--green-text, #15803D) }
#atab-aanaliza .p-warn { background:var(--orange-bg, #FEF3C7);color:var(--orange-text, #B45309) }
#atab-aanaliza .p-bad { background:var(--red-bg, #FEE2E2);color:var(--red-text, #B91C1C) }
#atab-aanaliza .p-mut { background:#F1F5F9;color:var(--color-text-secondary, #475569) }
#atab-aanaliza .rnk { width:20px;height:20px;border-radius:50%;background:#F1F5F9;color:var(--color-text-secondary, #475569); font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center }
#atab-aanaliza .rnk.r1 { background:#FDE8E4;color:var(--red-text, #B91C1C) }
#atab-aanaliza .hint { font-size:10.5px;color:var(--color-text-secondary, #475569);display:block;margin-top:8px;line-height:1.5 }
#atab-aanaliza .napo { background:var(--color-info-bg, #EEF2FF);border:1px solid #C7D2FE;border-radius:9px;padding:10px 13px; font-size:11.5px;color:var(--info-text, #3730A3);display:flex;gap:9px;align-items:flex-start;margin-top:8px }
#atab-aanaliza .napo .mdi { font-size:16px;margin-top:1px }
#atab-aanaliza .napo.warn { background:var(--orange-bg, #FEF3C7);border-color:#FCD9A0;color:var(--orange-text, #B45309) }
#atab-aanaliza .napo b { font-weight:800 }
#atab-aanaliza .napo ul { margin:5px 0 0 17px }
#atab-aanaliza .napo li { margin-bottom:3px }
#atab-aanaliza .an-pane { display: none; padding-top: 16px; }
#atab-aanaliza .an-pane.active { display: block; }
/* Prazno stanje etapa koje jos nisu isporucene — posteno, ne „uskoro" bez roka. */
#atab-aanaliza .an-cek { border: 2px dashed var(--color-border, #E5E7EB); border-radius: 14px;
  padding: 44px 20px; text-align: center; color: var(--color-text-tertiary, #94A3B8); }
#atab-aanaliza .an-cek .mdi { font-size: 30px; display: block; margin-bottom: 8px; }

/* ═════ LJEPLJIVI BLOK — jedno pravilo za cijelu aplikaciju ═════════════════
   ⚠️ ZAGLAVLJE I TRAKA SE LIJEPE ZAJEDNO. Traka tabova bez imena zapisa ne
   govori CIJI je tab: na kartici vozila je ostajala traka bez „Doblo · ST 811 ZM
   · ugradnja nije potvrdena", pa se nije znalo cije se kartice gledaju.

   ⚠️ JEDAN OMOTAC, NE `sticky` NA OBA. Dva elementa s `top: 0` preklapaju se.
   Omotac ih drzi zajedno, poravnanje se ne moze razici, i — presudno — VISINU
   OMOTACA NIKAD NE TREBA ZNATI: zaglavlja se na uzim ekranima prelamaju, pa bi
   svaka tvrda brojka u `top` bila pogresna.

   ⚠️ UNUTARNJA TRAKA GUBI VLASTITU LJEPLJIVOST. Zajednicka klasa `.tabs` ju daje
   cijeloj aplikaciji; u omotacu ju preuzima omotac, inace dva ljepljiva elementa
   jedan u drugome daju upravo preklapanje zbog kojeg pravilo postoji.

   ⚠️ `z-index: 40` je IZNAD ljepljivih zaglavlja tablica (2-3) — tablica se
   skrola POD blokom, ne kroz njega. */
.lijep {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-surface-elevated, #FFFFFF);
}
/* ⚠️ Jedan selektor otkad je traka jedna (31.08.2026.); prije ih je bilo sedam
   i svaki novi tab trazio je dopisivanje jos jednoga. */
.lijep > .tabs {
  position: static; z-index: auto;
}

/* ⚠️ POJAS IZNAD BLOKA — druga polovica popravka (Mladen, 28.08.).
   Klizni spremnik ima padding (`#modbody-park > .adm-body.active`,
   `padding: 16px 20px`). Padding NE ODSIJECA, pa sadrzaj promice kroz njega, a
   `sticky; top: 0` se smiruje na njegovu RUBU — blok pokrije sve ISPOD sebe, a
   pojas iznad ostane otvoren i kroz njega vire naslovi kartica.

   ⚠️ MJERENJE IZ `b9b3f6b` (traka 69 → 65) NIJE BILO POGRESNO, nego nepotpuno:
   provjeravalo je da se traka LIJEPI, ne da isto SKRIVA.

   ⚠️ DO RUBOVA, ne samo u sredini: pojas je pune sirine spremnika, pa blok koji
   ga pokrije samo u sredini ostavlja dvije pruge sa strane. Negativna margina
   siri blok preko paddinga, `padding` ga vraca na mjesto, a `::before` pokriva
   pojas iznad.

   ⚠️ ZASEBAN RAZRED, ne osnovni: blok UNUTAR kartice (`.kd`) ne smije bojati
   iznad sebe — ondje je rub kartice, a ne pojas spremnika. Nosi ga samo blok
   koji je izravno dijete padanog spremnika. Brana (`tests/browser/ljepljivo.mjs`)
   hvata svaki koji ga treba a nema. */
.lijep--rub { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
.lijep--rub::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
  background: inherit;
}

/* ⚠️ FILTARSKA TRAKA IZVJESTAJA SE LIJEPI — prijenos rjesenja iz Analize
   (Mladen, 28.08.). Izvjestaj je tablica koja se cita dugo i skrola puno, a
   traka nosi RAZDOBLJE: brojevi bez razdoblja nisu podatak. Izmjereno prije
   popravka na 1366x768: `#atab-aizvjestaji` klizi 294 px, a traka je odlazila s
   ekrana (top 69 → −225).

   ⚠️ OVDJE NEMA OMOTACA, i to nije nedosljednost. U Analizi su DVIJE trake
   (filtri i tabovi) i omotac ih drzi zajedno; ovdje je traka JEDNA, pa bi
   omotac bio prazan sloj oko jednog djeteta. Prenosi se ponasanje i brana, ne
   oblik.

   ⚠️ ZAGLAVLJE TABLICE JE OZIVJELO 03.09.2026. Do tada je bilo mrtvo slovo:
   `.tbl thead th` jest bio `sticky`, ali mu je spremnik `.rep-tbl-wrap` imao
   `overflow: auto` BEZ granice visine, pa okomito nikad nije klizao
   (`scrollHeight - clientHeight = 0`, izmjereno 2026-08-28) — skrolao se cijeli
   panel.

   ⚠️ RIJESENO STRUKTURNO, NE MJERENJEM VISINE TRAKE. Stara biljeska na ovom
   mjestu najavljivala je da ce zaglavlje zavrsiti POD trakom filtara i da se
   pomak mora citati iz njezine izmjerene visine (jer se traka na uzem prozoru
   prelama u dva reda: 76 px na 1920, 121 px na 1366 — izmjereno). Ta se
   najava NIJE obistinila i mehanizam NE POSTOJI: `.rep-main` je postao stupac
   s vlastitim klizacem, pa traka filtara stoji IZVAN kliznog dijela i vise se
   nema odakle odlijepiti. Ono sto ne klizi ne moze ni otkliziti — to je jace
   od `sticky` i ne trazi nijednu brojku.

   Izmjereno nakon izmjene, 1366x768 sa 60 redaka: `.rep-tbl-wrap` klizi
   1723 px, zaglavlje tablice miruje na 283 px, lijevi meni na 68, traka
   filtara na 69, a stranica ne klizi uopce.

   ⚠️ BILJESKA JE ZAMIJENJENA, NE DOPUNJENA: opis buducnosti koja je prosla i
   ispala netocna je zamka — sljedeci covjek bi po njoj napravio mehanizam koji
   ne treba. Isti postupak kao s odlukom 88. */
/* ⚠️ `position: sticky` UKLONJEN 03.09.2026. Traka sada stoji IZVAN kliznog
   dijela (`.rep-main` je stupac, `.rbody.active > .rep-tbl-wrap` klizi), pa se
   nema odakle odlijepiti — a ljepljiv element ciji spremnik ne klizi je upravo
   ono sto brana `ljepljivo.mjs` od danas prijavljuje kao gresku. Pozadina
   ostaje: traka je i dalje neprozirna nad sadrzajem koji prolazi ispod nje. */
#atab-aizvjestaji .rep-filter {
  background: var(--color-surface-elevated, #FFFFFF);
}

/* ═════ KARTOTEKA: SVAKA STRANA IMA VLASTITI KLIZAC ════════════════════════
   ⚠️ PRENESEN OBRAZAC IZ RADNIH NALOGA (`.wo-master` / `.wo-master__scroll` /
   `.wo-side__body`), ne izmisljen treci: dva razlicita rjesenja za isto
   ponasanje razisla bi se prvom izmjenom.

   Do 2026-08-29 je `.kart` bila obicna mreza bez vlastite visine — nista nije
   klizalo zasebno, pa je klizao PANEL ispod obje kolone i lijevi popis
   (pretraga, filtri, vozila, legenda) odlazio je s ekrana zajedno s detaljem.

   ⚠️ SKRIVENI KVAR U ISTOM RETKU: `.kart-list` je imao `overflow: hidden` BEZ
   vlastitog klizanja. S cetiri vozila se ne vidi; s cetrdeset se popis ODSIJECE
   i donja vozila nema ni na ekranu ni u klizacu. Isti razred kao kartica koja
   izostavi 13 od 19 putovanja: izgleda tocno dok je podataka malo.

   ⚠️ PRAVILO 1967 SE NE DIRA. Ono vrijedi za SVAKI admin panel; ovdje se samo
   za ovaj panel gasi vlastito klizanje, jer klizanje preuzimaju kolone. */
#modbody-park > #atab-avozila.adm-body.active {
  overflow-y: hidden; display: flex; flex-direction: column;
}
#atab-avozila .kart { flex: 1; min-height: 0; align-items: stretch; }
#atab-avozila .kart-list { display: flex; flex-direction: column; min-height: 0; }
/* Popis dobiva VLASTITI klizac umjesto `hidden` — inace se dugacak popis odsijeca. */
#atab-avozila #kartList { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#atab-avozila .kart-det {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}

/* ⚠️ KLIJENTI IMAJU ISTI KVAR, IZMJEREN 2026-08-29 — ali NIJE popravljen ovdje.
   `#klEkran` klizi 1961 px i obje kartice (`.kl-card`, `.kl-det`) odlaze zajedno
   s njim (top 158 → −242), tocno kao kartoteka prije ovog kruga.

   Pokusaj prijenosa istog obrasca nije sjeo: `#klEkran` nema omedjenu visinu od
   svog pretka, pa `flex: 1` na `.kl-two` nema sto podijeliti — kartice su i
   dalje isle s ekranom, a 1961 px sadrzaja ostalo je odsjeceno bez klizaca, sto
   je gore od zatecenog stanja. Vraceno.

   Za popravak treba omeđiti visinu lanca iznad `#klEkran` (kao sto
   `#atab-avozila` sada radi), a to dira raspored modula naloga — izvan opsega
   ovog kruga i zasluzuje vlastito mjerenje. PRIJAVLJENO, ne popravljeno. */


/* ── Pregled uvoza kataloga trackera ─────────────────────────────────────
   ⚠️ MNOZITELJ I JEDINICA SE ISTICU JACE OD OSTALOG, i to nije ukras: to su
   jedina polja koja tiho mijenjaju BROJKU. 630 i 63,0 oboje izgledaju kao
   podatak, a razlikuje ih samo mnozitelj. */
.kljucna-promjena { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309);
  border-radius: 6px; padding: 2px 8px; font-weight: 700; display: inline-block; margin: 2px 0; }
.kljucna-promjena .mdi { margin-left: 4px; }
.np-sazetak { display: flex; gap: 8px; margin: 12px 0 8px; }
.kljucna-promjena .staro, .np-sazetak + table .staro { text-decoration: line-through; opacity: .75; }
.kljucna-promjena .novo { font-weight: 800; }
/* ⚠️ RECENICA O SKRIVENIM REDOVIMA (03.09.2026.). Tiha traka ispod popisa:
   mora se vidjeti, ali ne natjecati se s podacima — covjek ju traži tek kad se
   pita „gdje mi je redak". Isti razred kao `.tbl-note`, kojemu je i susjed. */
.tbl-skriveni { display: flex; align-items: center; gap: 7px; margin-top: 8px;
  padding: 7px 10px; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 8px; background: var(--color-surface, #F8FAFC);
  font-size: var(--fs-micro); color: var(--color-text-secondary, #475569); }
.tbl-skriveni b { color: var(--color-text-primary, #0F172A); font-weight: 700; }
.tbl-skriveni .mdi { font-size: var(--fs-sm); color: var(--color-text-tertiary, #94A3B8); }
.tbl-skriveni .btn { margin-left: auto; }

/* ═══ PREGLED NALOGA — MASTER-DETAIL (mockup, 03.09.2026.) ══════════════
   Izvor: `mockups/OSIRIS_NEO_pregled_naloga_master_detail_mockup.html`.

   ⚠️ ODLUKA O IMENOVANJU, jednom napisana i tri puta potrosena (DIO 1–4).
   Izmjereno: 51 ime iz mockupa VEC POSTOJI u ovoj datoteci. Prijepis pod istim
   imenom pogodio bi svaku tablicu i svaki tab u sustavu.

   Pravilo po slucaju:
     · nase i novo            → novo ime `.wo-*`
     · isto znacenje          → KORISTI postojece, ne prepisuj
     · drugo znacenje         → NOVO IME, nikad override
     · mockup preoblikuje
       zajednicki element     → suzi opsegom (`#klNalozi table`)

   ⚠️ PREFIKS NIJE JEDNAKO DOBAR KAO NOVO IME. `#klNalozi .chip` i `.chip`
   ostaju dva pravila koja se zauvijek bore specificnoscu — a `f619f2b` je
   pokazao kako to zavrsi: pojacanje jednog tiho je utisalo drugi 33 linije
   nize i dalo 300 px praznine. Razlicito ime nema s cim ratovati. Zato je
   novo ime pravilo, a suzivanje iznimka.

   PRESLIKAVANJE (mockup → ovdje):
     .kl      → .wo-kl        celija klijenta (dva reda)
     .jed     → .wo-jed       drugi red: jedinica
     .tag     → .wo-rad       pilula vrste rada  (`.tag` postoji, znaci drugo)
     .sub2    → .zk-sub       POSTOJECE, isto znacenje (drugi red u celiji)
     .kat     → .pg-kat       POSTOJECE, isto znacenje (pilula kategorije)
     .no      → .no-c .mono   POSTOJECE
     .hit,
     .hitc,
     .st,
     .mk--*   → POSTOJECE, isto znacenje — ne prepisuju se
     .card,
     .chip,
     .tabs,
     .tab,
     .btn,
     .meta,
     .hint,
     .pill,
     .active  → drugo znacenje; dobivaju `.wo-*` ime kad na njih dode red
                (DIO 2–4). Ovdje se NE diraju.
   ⚠️ NIKAD GOL `table`/`thead`/`tbody` — to je dvadesetak tablica. */

/* ⚠️ CELIJA KLIJENTA NOSI DVA REDA: ime + vrsta rada, pa jedinica ispod.
   Sazetak je iz Pregleda IZASAO (zivi u glavi master-detaila) — vidi biljesku
   uz `WO_STUPCI` u `osiris.js`. */
/* ⚠️ `display: block` JE IZ MOCKUPA (`.kl b { display:block }`), ne izvedeno:
   ime i jedinica su dva reda, a pilula vrste rada tece uz ime. Prva inacica je
   imala `inline-flex` — izgleda isto dok je ime kratko, a lomi se drukcije kad
   nije. Mockup je obvezujuci i za ovo. */
.wo-kl b { font-weight: 700; display: block; }
.wo-jed { display: block; font-size: var(--fs-micro);
  color: var(--color-text-secondary, #475569); line-height: 1.3; }
/* ⚠️ `.wo-rad`, NE `.tag`: `.tag` u ovoj datoteci vec postoji i znaci drugo.
   Override bi bio rat specificnosti bez pobjednika. */
.wo-rad { display: inline-block; border-radius: 999px; padding: 1px 8px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .02em;
  background: var(--color-info-bg, #EEF2FF); color: #3730A3; }
.wo-rad--odr { background: #ECFDF5; color: #065F46; }

/* ═══ MASTER-DETAIL NALOGA — LJUSKA (mockup, 03.09.2026.) ═══════════════
   Ocjena po imenu, uz doslovno citiranu zatecenu deklaraciju:

     .md__h .md__row .md__ic .md__t .md__pills .md__h__waves .iz .kj
     .step-l .pane .pane__h .kliz .g2 .dl .sek
        → NE POSTOJE u ovoj datoteci → novo ime `.wo-*`.

     .tabs / .tab  → POSTOJE i ZNACE DRUGO:
        `.tabs > .tab { padding: 7px 14px }`, `#woTabs .tab { padding: 9px 10px }`
        — traka s TEKSTUALNIM natpisima. Mockupova je samo-ikone s vlastitim
        oblacicem: druga komponenta → `.wo-tabs` / `.wo-tab`.

     .tab__n  → POSTOJI, ZNACI ISTO:
        `.tab__n { font-size: var(--fs-micro); font-weight: 700; … }`
        — brojka na tabu. KORISTI SE POSTOJECE.

     .on  → POSTOJI, ZNACI ISTO:
        `.wm-pane.on { display:flex; … }`, `.kt-dbody.on { display:block }`
        — oznaka „odabrano". KORISTI SE POSTOJECE (`.wo-pane.on`).

     .fali  → POSTOJI, ZNACI ISTO (manjak), drugi element:
        `.wm-f.fali input { border-color:#FCA5A5 }`, `.sn__n.fali { … }`
        — KORISTI SE POSTOJECE, suzeno na `.wo-pane-h .fali`.

     .card  → POSTOJI i ZNACI DRUGO: `#atab-aanaliza .card { … }`.
        Vec je suzen, ali slobodno ime nije isto sto i PRAZNO ime — uzeti ga
        znacilo bi da `.card` znaci dvije stvari na dva ekrana. → `.wo-card`.

     .btn / .mdi → POSTOJE i ZNACE ISTO. Koriste se postojeci; mockupove mjere
        (`padding: 7px 12px`) NE prenosimo — drugi sustav gumba bio bi gori od
        svega sto je ovaj krug popravljao. */

/* ⚠️ KARTICA REZE HERO, hero ne zaobljuje sam sebe. */
.wo-side { border-radius: 0 0 12px 12px; overflow: hidden; }

.wo-md-h { position: relative; flex: none; overflow: hidden; border-radius: 0;
  color: #fff; padding: 14px 18px 12px;
  background: linear-gradient(135deg, #0F2C4D 0%, #1F4E8A 100%); }
.wo-md-h-waves { position: absolute; top: 0; right: 0; bottom: 0; width: 55%;
  pointer-events: none; z-index: 1; opacity: .9; }
.wo-md-row { display: flex; align-items: center; gap: 10px; position: relative;
  z-index: 2; margin-bottom: 10px; }
.wo-md-ic { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: rgba(217,154,24,.20); border: 1px solid rgba(217,154,24,.50);
  color: #E9B44C; display: flex; align-items: center; justify-content: center;
  font-size: 17px; }
.wo-md-t { min-width: 0; flex: 1; }
.wo-md-t h2 { font-size: 15px; font-weight: 700; display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.wo-iz { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.7); }
.wo-iz a { color: #FCD34D; text-decoration: none; border-bottom: 1px dashed; }
/* ⚠️ DRUGI RED JE `Klijent · Jedinica · Sažetak` — sazetak je iz TABLICE
   izasao i zivi ovdje (vidi `WO_STUPCI` u `osiris.js`). */
.wo-kj { font-size: 12.5px; color: rgba(255,255,255,.85); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-kj b { color: #fff; }
.wo-md-pills { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

/* ⚠️ `overflow-x: clip`, NIKAD `hidden`. `hidden` stvara klizni spremnik pa se
   okomito izracuna kao `auto` i oblacic bude ODREZAN; `clip` ne stvara
   spremnik, pa okomito smije ostati `visible`. */
.wo-tabs { display: flex; align-items: center; gap: 2px; padding: 0 8px;
  border-bottom: 1px solid var(--color-border, #E5E7EB); background: #fff;
  flex: none; overflow-x: clip; overflow-y: visible; position: relative; z-index: 5; }
.wo-tab { position: relative; padding: 9px 12px; font: inherit; cursor: pointer;
  color: var(--color-text-secondary, #475569); background: none; border: none;
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center;
  margin-bottom: -1px; }
.wo-tab .mdi { font-size: 19px; color: var(--color-text-tertiary, #94A3B8); display: block; }
.wo-tab:hover .mdi { color: var(--color-text-primary, #0F172A); }
.wo-tab.active { border-bottom-color: var(--brand-secondary, #D99A18); background: #EEF2FF; }
.wo-tab.active .mdi { color: var(--brand-primary, #1F4E8A); }
.wo-tab .tab__n { position: absolute; top: 4px; right: 4px; box-shadow: 0 0 0 2px #fff; }
.wo-tab.active .tab__n { box-shadow: 0 0 0 2px #EEF2FF; }
/* ⚠️ VLASTITI OBLACIC, ne `title`: preglednikov ceka oko sekunde i to se ne
   moze ubrzati. Ovdje 0,05 s, i radi i na odabranom tabu. */
.wo-tab::after { content: attr(data-ime); position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 5px); background: var(--brand-primary-dark, #0F2C4D);
  color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 3px 8px; border-radius: 6px; pointer-events: none; opacity: 0;
  transition: opacity .06s linear .05s; z-index: 20;
  box-shadow: 0 3px 10px rgba(15,23,42,.28); }
.wo-tab:hover::after, .wo-tab:focus-visible::after { opacity: 1; }

.wo-pane { display: none; }
.wo-pane.on { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wo-pane-h { flex: none; display: flex; align-items: center; gap: 9px; padding: 9px 16px 0; }
.wo-pane-h .mdi { font-size: 17px; color: var(--brand-primary, #1F4E8A); }
.wo-pane-h h3 { font-size: 14px; font-weight: 800; color: var(--color-text-primary, #0F172A); }
/* ⚠️ MANJAK RIJECIMA. Tocka na ikoni kaze DA nesto fali; samo naslov moze reci
   KOLIKO i cega. */
.wo-pane-h .fali { margin-left: auto; font-size: 11px; font-weight: 700;
  color: var(--red-text, #DC2626); background: #FEE2E2; border-radius: 999px;
  padding: 2px 9px; display: inline-flex; align-items: center; gap: 4px; }
.wo-pane-h .fali.ok { color: var(--green-text, #15803D); background: var(--green-bg, #ECFDF5); }
/* ⚠️ `overflow: auto` je MREZA, ne raspored: sadrzaj se zbija dvostupcanim
   rasporedom i uzim odmacima. Ako proklizi, mjera je SEKCIJA MANJE ili kraci
   tekst, ne veci okvir. */
.wo-kliz { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.wo-pane.on > .wo-kliz { padding: 9px 14px 12px; scrollbar-gutter: stable; }

.wo-sek { font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand-primary, #1F4E8A);
  margin: 11px 0 5px; display: flex; align-items: center; gap: 8px; }
.wo-sek:first-child { margin-top: 0; }
.wo-sek::after { content: ''; flex: 1; height: 1px; background: var(--color-border, #E5E7EB); }

/* ⚠️ MREZA NATPIS/VRIJEDNOST, a tumacenje u `ⓘ` uz natpis — nikad odlomak
   objasnjenja pod svakim poljem: pet vrijednosti tada zauzme ekran. */
.wo-dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; align-items: baseline; }
/* ⚠️ UNUTAR `.wm-g` MREZA MORA PREKO CIJELOG REDA (03.09.2026., izmjereno):
   `.wm-g` je mreza od 12 stupaca, pa `<dl>` bez raspona dobije JEDNU njezinu
   celiju (~90 px). Njegovi `1fr` stupci tada se izracunaju u `0px`
   (`grid-template-columns: 120px 0px 120px 0px`) i vrijednosti se preliju
   preko natpisa — „nij**Osoba**" sa snimke. */
.wm-g > .wo-dl { grid-column: 1 / -1; }
/* ⚠️ ISTI RAZRED KVARA, TRECI PRIMJERAK (04.09.2026., izmjereno u modalu):
   spremnici tabova (`#wmOprema`, `#wmPovijest`, …) su i SAMI `.wm-g`, pa kao
   item roditeljske mreze bez raspona dobiju JEDNU celiju od dvanaest — cijeli
   tab modala stisnut u ~150 px (snimka Mladena). Jedno pravilo za SVE
   ugnijezdene spremnike, ne po id-u. */
.wm-g > .wm-g { grid-column: 1 / -1; }
/* ⚠️ ISTI RAZRED KVARA, CETVRTI PRIMJERAK (04.09.2026., Mladenova snimka
   „vrsta i opis neka bude u sirini modala"): kartica vrste stajala je kao
   golo dijete `.wm-g` bez raspona, pa je dobila JEDNU celiju od dvanaest —
   izmjereno 108 px, tekst se lomio u stup rijeci. Popis, ne po jednom imenu:
   svako dijete mreze koje NIJE polje (`.wm-f`) ide preko cijelog reda.
   ⚠️ Iznimka je pisana inline (`style="grid-column:auto"`) — ondje kartica
   NAMJERNO stoji u pola sirine, uz drugo polje; inline nadjacava ovo. */
/* ⚠️ DOPUNA 14.09.2026.: kartica „Osnovno" je presla na `zk` jezik, pa su joj
   djeca mreze `.zk-grid`, `.wo-traka` i `.wo-vrsta-traka`. Izmjereno prije
   dopune: `.zk-grid--3` je kao golo dijete dobio 481 px umjesto 1250 i vlastite
   stupce 332/64/61 — plocice su ispale JEDNA po retku, a polje naraslo na 574
   px. Isti kvar i isti popravak kao 12.09. s karticom vrste.
   ⚠️ POPIS, NE POJEDINACNO IME: pravilo iznad kaze „svako dijete mreze koje NIJE
   polje ide preko cijelog reda" — novi omoti se dodaju ovdje, ne dobivaju
   vlastito pravilo. */
.wm-g > .zk-grid,
.wm-g > .wo-traka,
.wm-g > .wo-vrsta-traka,
.wm-g > .zk-opis2,
.wm-g > .vrsta-zakljucana,
.wm-g > .vrsta-kartice,
.wm-g > .sec,
.wm-g > .wo-sek,
.wm-g > .wm-warn,
.wm-g > .tbl-note,
.wm-g > .empty,
.wm-g > .wm-prazno { grid-column: 1 / -1; }
.wo-dl dt { font-size: 11.5px; font-weight: 700; color: var(--color-text-secondary, #475569);
  display: flex; align-items: center; gap: 4px; }
.wo-dl dt .i { color: var(--color-text-tertiary, #94A3B8); font-size: 13px; cursor: help; }
.wo-dl dt .req { color: var(--red-text, #DC2626); }
.wo-dl dd { font-size: 13px; color: var(--color-text-primary, #0F172A); min-width: 0; }
.wo-dl dd .mono { font-size: 12.5px; }
.wo-dl dd a { color: var(--brand-primary, #1F4E8A); text-decoration: none; border-bottom: 1px dashed; }
/* ⚠️ DVA STUPCA ondje gdje mockup tako pokazuje — da nema klizaca. */
.wo-dl.two { grid-template-columns: 120px 1fr 120px 1fr; }
/* ⚠️ VRIJEME ZBIJENO (Mladen, 26.09.2026.): natpisi „Termin" i „Rok" su kratki, a
   120 px je ostavljalo prazninu i guralo datum u drugi red (u panelu je stupac
   vrijednosti ~130 px, a „11. 09. 2026. 09:01" je siri). Natpis uzima koliko mu
   treba, a datum sa satom se ne lomi. SAMO ova sekcija — `.wo-dl.two` ostaje. */
.wo-dl.wo-dl--vrijeme { grid-template-columns: auto 1fr auto 1fr; }
.wo-dl--vrijeme dd .mono { white-space: nowrap; }
/* ⚠️ JEDAN PAR PO REDU, CIJELOM SIRINOM (13.09.2026., Mladen: „iza «Što je rađeno»
   ide dvotočka, a opis odmah iza dvotočke s razmakom jednog slova, i mora biti u
   cijeloj dužini panela … Ovako je previše razmaknuto i nepotrebno povećava
   visinu"). VLASTITI modifikator, jer `.wo-dl` i `.two` nose desetak drugih
   odjeljaka — izmjena bilo kojeg od njih pomakla bi sve.

   ⚠️ PAR JE OMOTAN U `<div>` (`dl > div > dt + dd`, valjan HTML5): to je jedini
   nacin da par bude BLOK a `<dt>`/`<dd>` ostanu `<dt>`/`<dd>`. Alternativa
   (`dd { display: inline }` + prelom pseudo-elementom) tukla bi se sa znackama
   koje moraju ostati U LINIJI vrijednosti („nije dovršeno", „ispravio ured").

   ⚠️ DVOTOCKA DOLAZI IZ CSS-a, NE IZ PODATAKA. Natpisi dolaze iz definicije
   obrasca i ISTE ih ispisuje tab „Povratne informacije"; dvotocka utipkana u
   podatak pojavila bi se i ondje, pa bi je netko ondje maknuo i ovdje bi nestala.

   ⚠️ `margin` NA `<dd>` SE IZRICITO PONISTAVA: `.wo-dl dd` ga nikad nije dirao, a
   u mrezi se to nije vidjelo. U tekucoj liniji preglednikov `margin-inline-start:
   40px` bi se vidio odmah. Razmak od jednog slova je ODLUKA (`.35em`), ne ostatak
   zadanog. */
.wo-dl--tekuci { display: block; }
.wo-dl--tekuci > div { display: block; }
.wo-dl--tekuci > div + div { margin-top: 4px; }
.wo-dl--tekuci dt { display: inline; }
.wo-dl--tekuci dt::after { content: ':'; }
.wo-dl--tekuci dd { display: inline; margin: 0 0 0 .35em; }

/* ⚠️ JEDNA VRIJEDNOST DO KRAJA RETKA (13.09.2026., Mladen: „u radnim nalozima
   tekst napomene treba biti do kraja panela, ne na pola").

   `.wo-dl.two` je `120px 1fr 120px 1fr` — dva para po retku. Treci par zato
   pocinje novi redak i dobiva SAMO drugi stupac, dakle cetvrtinu sirine, dok
   desna polovica retka stoji prazna: cetrdeset rijeci u stupcu od 120 px i osam
   praznih redaka pokraj.

   ⚠️ MODIFIKATOR JE NA PARU, NE NA `<dl>`: prva dva para moraju ostati jedan
   pokraj drugoga. Razred na `<dl>` koji bi gadao `dd:last-of-type` bio bi pravilo
   o POLOZAJU — doda li netko cetvrti par, siroko postaje krivo polje.

   ⚠️ NIJE `--tekuci`. Onaj modifikator („natpis: vrijednost odmah iza dvotocke")
   radi za KRATKE vrijednosti; napomena je odlomak, pa bi inline iza dvotocke
   izgubila natpis i otezala citanje. Napomena ostaje oznacen blok, samo pune
   sirine.

   ⚠️ `overflow-wrap: anywhere` JER JE TO SLOBODAN TEKST: netko zalijepi URL,
   serijski broj ili sifru artikla bez razmaka, a u mrezi takav niz RAZVLACI
   stupac i razbija raspored — panel je uzak (~516 px). */
/* ⚠️ `max-width` U `ch`, NE `@media` NI `@container` (13.09.2026., izmjereno).
   Isti crtac hrani panel (~516 px) i modal u citanju (~1276 px). Bez ograde je
   odlomak od 160 znakova u modalu bio JEDAN redak od 160 znakova — udoban raspon
   je 45-90, podnosivo do ~110, dakle oko dvostruko preko; u panelu je isti tekst
   isao u tri retka po ~53 znaka i citao se dobro.
   ⚠️ `80ch` se veze uz velicinu slova SAMOG polja, pa vrijedi u oba spremnika bez
   ijedne grane: u panelu (383 px na raspolaganju) ograda NIKAD ne stupa na snagu,
   u modalu reze redak na ~80 znakova. Container upit bio bi tezi alat nego sto
   problem trazi, a `@media` bi lagao — panel i modal zive u ISTOM prozoru. */
.wo-dl .wo-dd--puna { grid-column: 2 / -1; overflow-wrap: anywhere; max-width: 80ch; }

/* ⚠️ TRI PARA U REDU (12.09.2026., Mladen: „ispod dijela fakturiranje sve se mora
   suziti … Na prvom mjestu ide fakturirano … Iza toga ide stanje i za to broj
   racuna"). VLASTITI modifikator, ne izmjena `.wo-dl` ni `.two` — oba nose druge
   odjeljke i pomaknula bi se s njima.
   ⚠️ U PANELU SE SUZAVA, NE LOMI (ispravak 12.09.2026. — vidi `@container`
   nize). Prvo je rjesenje bilo lomljenje u tri retka, uz racun „3x120 px samih
   natpisa je 360, a panel ~500". Racun je bio tocan, ali nad KRIVOM mjerom:
   natpisi ne traze 120 px nego 81, 53 i 80. Panel zato dobiva `auto` stupce i
   sva tri para stoje u jednom retku. */
.wo-dl.three { grid-template-columns: 120px 1fr 120px 1fr 120px 1fr; }
/* ⚠️ OZNAKA JE KONTROLA, NE SLIKA (12.09.2026.). `<button>` bez okvira i
   pozadine — izgleda kao oznaka iz tablice zahtjeva (`.mk`), ali je dohvatljiva
   tipkovnicom i nosi `aria-pressed`. Oznaka koju dosegne samo mis nije kvacica.
   ⚠️ VELICINA SE NE SMANJUJE da stane u redak („mora biti vidljivo") — redak se
   suzava, ne oznaka. */
/* ⚠️ PANELSKI UPIT STOJI OVDJE, NE GORE UZ OSTALE `@container` UPITE — i to je
   MJERENO, ne ukus. Container-upit NE DIZE specificnost, pa odlucuje redoslijed
   izvora: `.wo-dl.three` je definiran nize od onog bloka i pobjedivao bi ga —
   izmjereno u Chromeu, pravilo odozgo nije imalo ucinka.
   ⚠️ `@container`, ne `@media`: medijski upit mjeri PROZOR, a modal (1276 px) i
   panel (516 px) zive u ISTOM prozoru — pa bi `@media` presudio i modalu. */
@container wopanel (max-width: 720px) {
  /* ⚠️ U PANELU SVA TRI PARA STOJE U JEDNOM RETKU (12.09.2026., Mladen: „pvp
     fakturiranje u masterdetail stavi sve u jednu liniju"). Do danas su se ovdje
     lomila u tri retka, i obrazlozenje je bilo tocno — ali PRAG je bio kriv:
     racunao je sa 120 px po natpisu, a natpisi toliko ne traze.
     ⚠️ IZMJERENO U CHROMEU: `dl` je 516 px; natpisi traze 81 + 53 + 80 = 214,
     vrijednosti 19 (oznaka) + 118 (cip) + polje. Fiksnih 3x120 px trosilo je
     117 px na prazan hod — vise nego sto je nedostajalo.
     ⚠️ ZATO `auto`, NE UZI FIKSNI BROJ: natpis koji se jednom preimenuje sam
     uzme svoju mjeru, umjesto da se odreze ili da opet lomi redak.
     ⚠️ Oznaka i cip se NE SMANJUJU („mora biti vidljivo") — prostor se uzima
     iskljucivo iz praznog hoda i razmaka. */
  .wo-dl.three { grid-template-columns: auto auto auto auto auto 1fr; column-gap: 8px; }
  /* Polju mjeru daje stupac `1fr`; vlastiti `max-width` bi ga drzao uzim od
     prostora koji mu je ostao. */
  .wo-dl.three .wo-fakt-broj { max-width: none; }
}
.wo-fakt-mk { border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  line-height: 1; display: inline-flex; border-radius: 999px; }
.wo-fakt-mk:focus-visible { outline: 2px solid var(--brand-primary, #1F4E8A); outline-offset: 2px; }
/* Broj racuna u retku: ne razvlaci stupac, i vidno je ugasen dok oznaka ne stoji. */
.wo-fakt-broj { width: 100%; max-width: 190px; font-size: 12.5px; padding: 3px 7px;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px;
  font-family: 'JetBrains Mono', monospace; }
.wo-fakt-broj:disabled { background: var(--color-surface, #F8FAFC); color: var(--color-text-tertiary, #64748B); }
.wo-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.wo-g2 > .w { grid-column: 1 / -1; }

.wo-info { display: flex; gap: 8px; align-items: flex-start; background: #EEF2FF;
  border: 1px solid #C7D2FE; border-radius: 9px; padding: 6px 10px;
  font-size: 12px; color: var(--color-text-secondary, #475569); margin-top: 10px; }
.wo-info .mdi { color: var(--brand-primary, #1F4E8A); font-size: 15px; }
/* upozorenje uz karticu „Vozilo (plan)": clan bez vozila na terenskom nalogu = zapreka bez_vozila */
.wo-info--voz { background: #FEF3C7; margin-top: 6px; }
.wo-info--voz .mdi { color: #B45309; }
.wo-pp__a select[data-vozilo] { max-width: 150px; }
/* ⚠️ Ploha koja jos nema sadrzaj KAZE da ga nema — prazna ploha izgleda kao
   kvar. Redoslijed tabova se time ne mijenja dvaput. */
.wo-dolazi { display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 26px 16px; text-align: center;
  color: var(--color-text-tertiary, #94A3B8); font-size: 12.5px; }
.wo-dolazi .mdi { font-size: 30px; opacity: .6; }
/* ⚠️ PRAZNO STANJE MASTER-DETAILA (04.09.2026.). Ista receptura kao
   `.wo-dolazi` — jedna ploha, jedno pravilo praznine — ali svoje ime, jer
   znaci drugo: „nista nije odabrano" nije „ovo tek dolazi". */
.wo-side__nema { flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 30px 24px;
  text-align: center; color: var(--color-text-tertiary, #94A3B8); font-size: 12.5px; }
.wo-side__nema .mdi { font-size: 34px; opacity: .55; }
.wo-side__nema b { font-size: 14px; color: var(--color-text-secondary, #475569); }
.wo-side__nema span { max-width: 260px; line-height: 1.5; }

/* ⚠️ ZBIJENI STEPPER NA NISKIM PROZORIMA (03.09.2026.).
   Na 1366×768 master-detail ima 353 px, a zaglavlje s pripadajucim stepperom
   163 — pa je za sadrzaj ostajalo 45 px i osam od deset tabova je klizalo.

   ⚠️ STEPPER SE NE VADI IZ ZAGLAVLJA nego se ZBIJA: trazeno je da bude
   „rastegnut kroz master-detail", pa vadenje ukida ono sto je naruceno.
   Ovdje NISTA NE NESTAJE osim retka s vremenom — brojevi 20 px umjesto 26,
   manji natpisi. Vrijeme prijelaza i dalje stoji u tabu „Povijest".

   ⚠️ SAMO UNUTAR MASTER-DETAILA (`.wo-md-h`) — modal naloga se ne dira, ondje
   visina nije uska. */
@media (max-height: 820px) {
  .wo-md-h .wm-steps { padding: 8px 14px 6px; }
  .wo-md-h .wm-step__num { width: 20px; height: 20px; font-size: 10px; }
  .wo-md-h .wm-step__lbl { font-size: 8.5px; }
  .wo-md-h .wm-step__kad { display: none; }
}

/* ⚠️ Pilula stanja u navy zaglavlju detalja je `.wm-pill--<status>` — ISTA
   receptura kao u modalu (jedno stanje, jedno ime; dvojnik `.wo-pill` iz
   DIO 2 uklonjen 04.09.2026.). */

/* ⚠️ BLOK TEKSTA U CITANJU (mockup `.opis`) — klijentove/pristupne recenice u
   okviru. NIJE `.wm-ro` (gola read-only vrijednost polja, bez okvira) i nije
   `.wo-info` (plava kutija s ikonom = poruka sustava). Tekst covjeka dobiva
   okvir bez boje upozorenja. */
.wo-opis { background: var(--color-surface, #F8FAFC); border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 8px; padding: 8px 10px; line-height: 1.5; font-size: 12.5px;
  color: var(--color-text-primary, #0F172A);
  /* odlomak, ne vrijednost polja: retci iz govora ostaju retci, dugacka rijec se lomi (06.09.2026.) */
  display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.wo-opis--uredi { width: 100%; min-height: 110px; font: inherit; font-size: 12.5px; line-height: 1.5;
  padding: 8px 10px; border: 1px solid var(--brand-primary, #1F4E8A); border-radius: 8px; resize: vertical; }

/* ⚠️ „nije upisano" u CITANJU je tvrdnja o praznini, ne vrijednost — sivi
   kurziv (mockup `.na`). Globalnog `.na` NEMA (svaki kontekst ima svoj,
   izmjereno: 7 scopanih pravila); ovo je pravilo za tijela master-detaila. */
.wo-kliz .na { color: var(--color-text-tertiary, #94A3B8); font-style: italic; }

/* ═══ EKIPA I RASPORED + DOLASCI (mockup master-detail) ══════════════════
   Procjena po imenu: `.ppl/.pp/.av/.ob/.voz/.dol/.izv` iz mockupa NEMAJU
   postojeceg dvojnika (grep: 0 deklaracija) → nova `.wo-*` imena. `.stan`
   (pilula stanja opreme) POSTOJI kao `.eqst` i ondje se koristi ona. */
.wo-sek small { font-weight: 500; color: var(--color-text-tertiary, #94A3B8);
  text-transform: none; letter-spacing: 0; font-size: 10.5px; }
.wo-ppl { display: grid; gap: 6px; }
/* Redak „— dodaj servisera —" u modalu naloga (07.09.2026., mockup `.srv__add`). */
.wm-srv__add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
/* ⚠️ Tri razreda, ne jedan: `.modal.modal--wo select { max-width: 100% }` inace
   pobjeduje i svaki birac zauzme cijeli red (izmjereno CDP-om 07.09.2026.). */
.modal.modal--wo .wm-srv__add select { width: auto; flex: 1 1 220px; max-width: 360px; }
.wm-srv__lead { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); white-space: nowrap; }
/* ⚠️ Kartica se PRELAMA: uz avatar, zvonce, select prisutnosti i kos za
   brisanje tekstu u pola panela ostane ~80 px pa se „nema registriran uredaj"
   slomi u stup rijeci (izmjereno 04.09.2026.). Tekst drzi najmanje 140 px, a
   radnje padnu u novi red kad ne stanu. */
.wo-pp { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 9px;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; padding: 6px 9px; }
.wo-av { width: 28px; height: 28px; border-radius: 50%; background: #E0E7FF; color: #3730A3;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; flex-shrink: 0; }
.wo-pp__t { min-width: 0; flex: 1 1 140px; }
.wo-pp__t > b { display: block; font-size: 12.5px; }
/* Zvonce je SAZETAK stanja obavijesti; recenica (odluka 91) stoji u kartici. */
.wo-ob { font-size: 15px; color: var(--color-text-tertiary, #94A3B8); flex-shrink: 0;
  display: inline-flex; align-items: center; margin-top: 3px; }
.wo-ob.ok { color: var(--green-text, #15803D); }
.wo-pp__a { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.wo-pp__a select { font-size: 11px; padding: 2px 4px; }

.wo-voz { display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; padding: 6px 9px; }
.wo-voz--prazno { border-style: dashed; background: var(--color-surface, #F8FAFC); }
.wo-voz__i { width: 32px; height: 32px; border-radius: 8px; background: #F1F5F9;
  color: var(--color-text-tertiary, #94A3B8); display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0; }
.wo-voz__t { min-width: 0; flex: 1; }
.wo-voz__t > b { display: block; font-size: 12.5px; color: var(--color-text-tertiary, #94A3B8); }
.wo-voz__t small { color: var(--color-text-secondary, #475569); font-size: 11.5px; display: block; }

/* ⚠️ ZAGLAVLJE JE NAVY NAMJERNO: mockupov globalni `thead th` (navy) kaskadira
   i na njegovu `.dol` — dakle TAKO mockup IZGLEDA, i tako izgleda i glavna
   tablica pregleda. Receptura je vlastita (`.wo-dol`), ne gola `table`. */
.wo-dol { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wo-dol thead th { background: var(--brand-primary-dark, #0F2C4D); color: #E5EAF2;
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 8px; }
.wo-dol td { padding: 7px 8px; border-bottom: 1px solid #F1F5F9; vertical-align: top; }
.wo-dol td .mono { font-size: 11.5px; }

.wo-izv { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 7px;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.wo-izv--auto { background: #EEF2FF; color: #3730A3; }
.wo-izv--rucno { background: #F1F5F9; color: var(--color-text-secondary, #475569); }
.wo-izv--prijedlog { background: #FEF3C7; color: #92400E; }
/* `odbijeno` mockup nema (demo bez odbijenog retka) — crvena je dosljedna
   `nedostaje`/brisanju: covjek je rekao NE, redak nije dokaz. */
.wo-izv--odbijeno { background: #FEE2E2; color: var(--red-text, #DC2626); }

/* Zvjezdice ocjene (mockup): zlatne date, sive preostale. */
.wo-zvj { color: var(--brand-secondary, #D99A18); font-size: 18px; letter-spacing: 2px; }
.wo-zvj > span { color: #E5E7EB; }

/* ⚠️ FOTOGRAFIJE: DVIJE U REDU (Mladenova odluka) — mockupov `.foto` ima tri,
   ali njegov demo nema meta redak ispod slike; s metapodacima tri stupca
   gnjece tekst. Kartica: slika (4/3) + naziv + meta + radnje. */
.wo-foto { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wo-foto__k { margin: 0; border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 9px; overflow: hidden; }
.wo-foto__k img, .wo-foto__p { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(135deg, #E2E8F0, #CBD5E1); }
.wo-foto__p { cursor: default; color: var(--color-text-tertiary, #94A3B8); font-size: 34px; }
.wo-foto__k figcaption { padding: 6px 9px; font-size: 11.5px; }
.wo-foto__k figcaption > b { display: block; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-foto__a { display: flex; gap: 8px; align-items: center; margin-top: 5px; }

/* Kucice zadataka (mockup `.zad`) — kvacica je NASA radnja (prebaciZadatak),
   pa je kucica klikabilna; mockupova je bila ukras demo podataka. */
.wo-zad { list-style: none; display: grid; gap: 5px; padding: 0; margin: 0; }
.wo-zad li { display: flex; align-items: center; gap: 9px; padding: 6px 9px;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px; font-size: 12.5px; }
.wo-zad li .bx { width: 16px; height: 16px; border: 2px solid #CBD5E1;
  border-radius: 4px; flex-shrink: 0; cursor: pointer; }
.wo-zad li.ok .bx { background: var(--green-text, #16A34A); border-color: var(--green-text, #16A34A); }
.wo-zad li.ok > span:not(.bx) { color: var(--color-text-secondary, #475569); text-decoration: line-through; }
.wo-zad li.ok .wo-sub { text-decoration: none; }

/* ═══ PORUKE NALOGA — DOSLOVAN PRIJEPIS IZ ZIVOG PCS-a (DIO 3) ════════════
   Izvor: Port community system/git/app/static/index.html. Spec izricito:
   „Ne uskladuj s nasim tokenima" — trazen je ISTI stil (#1F4E8A je ionako
   nas navy). Tri uloge, PCS receptura: dispecer = role-port_authority,
   serviser = role-agent, klijent = role-concessionaire. */
.wo-chat-header { padding:8px 12px; background:#F8FAFC; border-bottom:1px solid #E5E7EB; flex-shrink:0; }
.wo-chat-header-title { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#0F172A; margin-bottom:5px; }
.wo-chat-header-title .mdi { color:#1F4E8A; font-size:14px; }
.wo-chat-participants { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wo-chat-participants-label { color:#94A3B8; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.wo-chat-participant { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; background:#fff; border:1px solid #E5E7EB; border-radius:999px; font-size:11px; color:#475569; }
.wo-chat-participant-dot { width:6px; height:6px; border-radius:999px; background:var(--p-color,#94A3B8); flex-shrink:0; }
.wo-chat-participant-role { font-size:9px; color:#9CA3AF; text-transform:uppercase; letter-spacing:.04em; }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.chat-empty {
  margin: auto; text-align: center; color: #94A3B8;
  font-size: 13px; font-style: italic; padding: 20px;
}
.chat-message { display: flex; gap: 8px; max-width: 88%; }
.chat-message.own { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #64748B, #475569);
  color: #FFFFFF; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0; position: relative;
}
.chat-avatar.role-port_authority { background: linear-gradient(135deg, var(--color-info-text, #1E40AF), #1F4E8A); }
.chat-avatar.role-agent      { background: linear-gradient(135deg, #16A34A, var(--color-success-text, #166534)); }
.chat-avatar.role-concessionaire { background: linear-gradient(135deg, #EA580C, #C2410C); }
.chat-bubble {
  background: #FFFFFF; border: 1px solid var(--color-border, #E5E7EB);
  padding: 7px 11px; border-radius: 10px;
  font-size: 13px; min-width: 0; word-break: break-word;
}
.chat-message.own .chat-bubble {
  background: #1F4E8A; color: #FFFFFF; border-color: #1F4E8A;
}
.chat-bubble.prio-high   { border-left:3px solid #F59E0B; }
.chat-bubble.prio-urgent { border-left:3px solid #DC2626; }
.chat-meta {
  font-size: 11px; color: #475569; margin-bottom: 3px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.chat-meta strong { color: #0F2C4D; font-weight: 700; }
.chat-message.own .chat-meta, .chat-message.own .chat-meta strong { color: rgba(255,255,255,0.92); }
.role-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 4px;
  background: #E2E8F0; color: #475569;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.role-badge.role-port_authority { background: var(--color-info-bg, #DBEAFE); color: var(--color-info-text, #1E40AF); }
.role-badge.role-agent { background: #D1FAE5; color: #065F46; }
.role-badge.role-concessionaire { background: var(--color-warning-bg, #FEF3C7); color: var(--color-warning-text, #92400E); }
.chat-message.own .role-badge {
  background: rgba(255,255,255,0.22); color: #FFFFFF;
}
.chat-body { white-space: pre-wrap; }
.chat-time { margin-top: 4px; font-size: 10px; color: #94A3B8; display: flex; align-items: center; gap: 3px; }
.chat-message.own .chat-time { color: rgba(255,255,255,0.75); justify-content: flex-end; }
.msg-receipt { font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1; }
.msg-receipt.read { color: #93C5FD; font-weight: 700; }
.message-attachment-image {
  display: block; max-width: 320px; max-height: 220px;
  border-radius: 6px; margin-top: 4px; cursor: pointer;
  background: #F1F5F9;  /* placeholder dok blob ne stigne */
}
.chat-form {
  border-top: 1px solid var(--color-border, #E5E7EB); background: #FFFFFF;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
}
.chat-form textarea {
  width: 100%; border: 1.5px solid #CBD5E1; border-radius: 6px;
  padding: 8px 10px; font-family: inherit; font-size: 13px;
  resize: none; min-height: 56px; max-height: 140px;
}
.chat-form textarea:focus {
  outline: none; border-color: #1F4E8A;
  box-shadow: 0 0 0 3px rgba(31,78,138,0.1);
}
.chat-form-actions {
  display: flex; justify-content: space-between; align-items: center;
}
.chat-form-actions .hint { font-size: 11px; color: #94A3B8; }
.msg-priority-bar { display:flex; gap:4px; margin-bottom:5px; flex-wrap:wrap; }
.msg-priority-chip { padding:3px 10px; border-radius:12px; font-size:11px; font-weight:500; border:1.5px solid; cursor:pointer; transition:all .12s; background:transparent; }
.msg-priority-chip[data-p="low"]    { color:#15803D; border-color:#BBF7D0; }
.msg-priority-chip[data-p="normal"] { color:#475569; border-color:#E5E7EB; }
.msg-priority-chip[data-p="high"]   { color:#A16207; border-color:#FDE68A; }
.msg-priority-chip[data-p="urgent"] { color:#B42318; border-color:#FECACA; }
.msg-priority-chip[data-p="low"]:hover    { background:#F0FDF4; }
.msg-priority-chip[data-p="normal"]:hover { background:#F9FAFB; }
.msg-priority-chip[data-p="high"]:hover   { background:#FFFBEB; }
.msg-priority-chip[data-p="urgent"]:hover { background:#FEF2F2; }
.msg-priority-chip.active { font-weight:700; }
.msg-priority-chip.active[data-p="low"]    { background:#DCFCE7; border-color:#15803D; color:#15803D; }
.msg-priority-chip.active[data-p="normal"] { background:#EFF6FF; border-color:#4F46E5; color:#4F46E5; }
.msg-priority-chip.active[data-p="high"]   { background:#FEF3C7; border-color:#A16207; color:#A16207; }
.msg-priority-chip.active[data-p="urgent"] { background:#FEE2E2; border-color:#B42318; color:#B42318; }
.msg-prio-badge { display:inline-block; font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; margin-left:4px; vertical-align:middle; }
.msg-prio-badge--low    { background:#F0FDF4; color:#15803D; }
.msg-prio-badge--normal { display:none; }
.msg-prio-badge--high   { background:#FFFBEB; color:#D97706; }
.msg-prio-badge--urgent { background:#DC2626; color:#fff; animation:prio-pulse 1.2s ease-in-out infinite; }
@keyframes prio-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
/* Nas jedini dodatak: ljuska koja chat drzi u visini plohe taba (glava fiksna,
   popis klize, obrazac fiksni) — PCS to radi rasporedom modala kojeg mi nemamo. */
.wo-chat-sklop { display:flex; flex-direction:column; height:100%; min-height:0; }

/* ═══ DOKUMENTI NALOGA (DIO 4, mockup) ════════════════════════════════════
   Procjena po imenu: `.dok*` i `.drop` nemaju postojeceg dvojnika (grep: 0)
   -> nova `.wo-dok*`/`.wo-drop` imena. Vrsta dokumenta je PODATAK, ne ime
   datoteke; ikona po TIPU datoteke — serviser na mobitelu bira po ikoni. */
.wo-dok { display: grid; gap: 6px; }
.wo-dok__r { display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 9px; padding: 8px 10px; }
.wo-dok__r:hover { background: var(--color-surface, #F8FAFC); }
/* Dvoklik otvara dokument — bez ovoga bi dvoklik oznacio rijec u nazivu. */
.wo-dok__r[ondblclick] { user-select: none; }
.wo-dok__i { width: 32px; height: 32px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
  background: #F1F5F9; color: var(--color-text-secondary, #475569); }
.wo-dok__i--pdf { background: #FEE2E2; color: #B91C1C; }
.wo-dok__i--img { background: #E0E7FF; color: #3730A3; }
.wo-dok__i--xls { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
.wo-dok__t { min-width: 0; flex: 1; }
.wo-dok__t > b { display: block; font-size: 12.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.wo-dok__t small { color: var(--color-text-secondary, #475569); font-size: 11.5px; }
.wo-dok__v { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 1px 8px;
  white-space: nowrap; background: #F1F5F9; color: var(--color-text-secondary, #475569);
  text-transform: uppercase; letter-spacing: .03em; }
.wo-dok__v--ponuda { background: #FEF3C7; color: #92400E; }
.wo-dok__v--narudzba { background: #EEF2FF; color: #3730A3; }
.wo-dok__v--shema { background: var(--green-bg, #DCFCE7); color: var(--green-text, #15803D); }
/* „serviser vidi" je ODLUKA — kad ju dispecer smije mijenjati, ovo je gumb. */
.wo-dok__pwa { font-size: 11px; color: var(--color-text-tertiary, #94A3B8);
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  background: none; border: 0; font: inherit; padding: 0; }
.wo-dok__pwa.on { color: var(--green-text, #15803D); }
button.wo-dok__pwa { cursor: pointer; }
.wo-dok__a { display: flex; gap: 4px; flex-shrink: 0; }
.wo-dok__a button { all: unset; width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--color-text-secondary, #475569); font-size: 16px; }
.wo-dok__a button:hover { background: #EEF2FF; color: var(--brand-primary, #1F4E8A); }
.wo-dok__a button.del:hover { background: #FEE2E2; color: var(--red-text, #DC2626); }
/* ⚠️ ZONA ZA ISPUST I GUMB — oboje, ne jedno (mockup): ispust je brz na
   stolnom, gumb je jedini put na mobitelu i za tipkovnicu. */
.wo-drop { border: 1.5px dashed var(--color-border, #E5E7EB); border-radius: 10px;
  padding: 14px; text-align: center; color: var(--color-text-secondary, #475569);
  font-size: 12.5px; background: var(--color-surface, #F8FAFC); cursor: pointer; }
.wo-drop .mdi { font-size: 24px; color: var(--color-text-tertiary, #94A3B8);
  display: block; margin-bottom: 4px; }
.wo-drop b { color: var(--brand-primary, #1F4E8A); }
.wo-drop.vuce { border-color: var(--brand-primary, #1F4E8A); background: #EEF2FF; }

/* ⚠️ DESET TABOVA U MODALU NALOGA (04.09.2026.). Otkad modal ima ISTU traku
   kao master-detail, deset natpisa trazi 1351 px, a modal ima 1240 —
   izmjereno; zadnji tab („Rute") zavrsavao je 111 px izvan okvira i nije se
   dao kliknuti. Uzi razmak umjesto klizaca: klizac na traci znaci da tabovi
   POSTOJE a ne vide se, i to bez ijednog znaka da ih ima jos.
   ⚠️ 07.09.2026.: uz uzi razmak ostajalo je 34 px pricuve BEZ znacki; sa
   znackama (Poruke 1, Zadaci 3, crvene nule) Rute je opet ispao. Modal je
   prosiren na 1320 (`.modal.modal--wo`), a u nacinu citanja brojaci obaveznih
   polja se ne crtaju (nema sto brojati).
   ⚠️ SAMO OVA TRAKA (`.modal--wo`): iste stavke drugdje ostaju netaknute. */
.modal--wo .tabs { padding: 0 8px; }
.modal--wo .tabs > .tab { padding: 9px 9px; gap: 5px; }
.modal--wo .tabs > .tab .tab__n { margin-left: 2px; }

/* Traka alata iznad karte u modalu geozone (04.09.2026.) — gumb i rečenica
   o tome što će se dogoditi pri spremanju. */
.gz-mod__alat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 0 8px; }
.gz-mod__alat .hint { flex: 1; min-width: 180px; }

/* ═══════════════════════════════════════════════════════════════════════
   PROJEKTI — tab Pregleda (etapa 1, 05.09.2026.), mockup
   `OSIRIS_NEO_projekti_mockup.html`. Ljuska je ista kao Radni nalozi; ovdje
   su SAMO razredi koje mockup uvodi (blokovi 545–564 prepisani doslovno, s
   tokenima aplikacije umjesto mockupovih `--t2`/`--red`) i jedna sirina.
   ⚠️ Preslikavanje imena (prompt etape 1): mockupovi `.pill--*` su ovdje
   `.wm-pill--*` (obitelj pilula navy zaglavlja), a `.st--u_tijeku`/`--zavrsen`
   NE POSTOJE — nalozi ih nose kao `.st--4`/`.st--5` (`WO_RAZRED`), pa ih i
   projekt tako koristi; nova su samo dva stanja koja nalog nema.
   ═══════════════════════════════════════════════════════════════════════ */
/* Sedam stupaca = zbroj PR_STUPCI.sir (44+230+210+130+160+150+116). */
/* ⚠️ ZBROJ `WO_STUPCI_DEF.sir` ZA PROFIL `pregled` = 1184 px (10.09.2026.).
   Do tada je tablica naloga uzimala opcih 1160 px iz `.tbl-x .tbl`, dakle 24 px
   MANJE od zbroja — stupci su se pri uskom ekranu stiskali. Isti obrazac koji
   vec nose projekti i adresar: svoj razred, svoj zbroj. */
/* ⚠️ 1184 → 1304 px (11.09.2026.): dodan je stupac „Prijavio" (160), a
   „Kreirano" se suzio (150 → 110). Brojka je ZBROJ `WO_STUPCI_DEF.sir` za
   profil `pregled` i tvrdnja u testu — dva mjesta koja se ne smiju raziCi.
   ⚠️ 1304 → 1100 px (25.09.2026.): prostor tablice na 1920 je 1104 px — vidi
   komentar uz `WO_STUPCI.pregled`. 1100 je Mladenova odluka (bez vodoravnog
   klizanja na 1920 px) i NADJACAVA vrijednost 1120 iz mockupa; brana
   `tests/browser/sirina-tablica.mjs` (`NAJMANJE_NALOZI`) mjeri ishod na toj
   sirini. Zahtjevi ostaju na 1120. */
.tbl-x .tbl.tbl--wo { min-width: 1100px; }
.tbl-x .tbl.tbl--projekti { min-width: 1040px; }
/* ═══════════════════════════════════════════════════════════════════════
   ADRESAR (08.09.2026., mockup `OSIRIS_NEO_adresar_mockup.html`)
   Ljuska je POSTOJECA (Nalozi/Projekti). Ovdje su SAMO cetiri stvari koje
   mockup uvodi: sirina stola, redak radnji na mjestu steppera, boje ikona
   izvora i cetiri pilule zaglavlja. Cip „Nije u kartonu" koristi zatecenu
   `.wchip--ned` (narancasta) — nova boja za istu namjenu bila bi peta
   narancasta u paleti.
   ═══════════════════════════════════════════════════════════════════════ */
/* Sedam stupaca = zbroj ADR_STUPCI.sir (44+220+185+165+140+200+110). */
.tbl-x .tbl.tbl--adresar { min-width: 1064px; }
/* ⚠️ NA MJESTU STEPPERA: osoba nema stanja. `off` je gumb koji NE zove —
   siv i s dopisanim „— nema", jer veza koja ne bira broj laze o sebi. */
.adr-akc { display: flex; gap: 8px; position: relative; z-index: 2; margin-top: 11px; }
.adr-akc a { flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
  text-decoration: none; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26); color: #fff; }
.adr-akc a:hover { background: rgba(255,255,255,.24); }
.adr-akc a .mdi { font-size: 16px; }
.adr-akc a.off { opacity: .4; pointer-events: none; }
.adr-akc a.off::after { content: " — nema"; }
/* ⚠️ ZAKLJUCAN KLIJENT U OBRASCU KONTAKTA: osoba se NE PREMJESTA medu
   klijentima — `client_id` je vezan za prosle naloge i zahtjeve. Polje se zato
   VIDI (da se zna ciji je kontakt), ali se ne mijenja. */
.kl-zaklj { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px;
  background: var(--color-surface, #F8FAFC); font-size: 13px; font-weight: 600; }
.kl-zaklj .mdi { color: var(--color-text-tertiary, #94A3B8); }
.kl-zaklj small { font-weight: 500; color: var(--color-text-tertiary, #94A3B8); }
.kl-zaklj .spacer { flex: 1; }
/* tri izvora, tri boje — ikona u prvom stupcu i u detalju */
.adr-izv { font-size: 19px; line-height: 1; }
.adr-izv--karton { color: var(--brand-primary, #1F4E8A); }
.adr-izv--jedinica { color: #0891B2; }
.adr-izv--nalog { color: #C2410C; }
/* pilule zaglavlja (obitelj `.wm-pill--*`, ista receptura: tint .2 / obrub .5) */
.wm-pill--prim { background: rgba(252,211,77,.20); border: 1px solid rgba(252,211,77,.50); color: #FCD34D; }
.wm-pill--jed { background: rgba(103,232,249,.18); border: 1px solid rgba(103,232,249,.45); color: #67E8F9; }
.wm-pill--nema { background: rgba(251,146,60,.22); border: 1px solid rgba(251,146,60,.55); color: #FDBA74; }
.wm-pill--neak { background: rgba(203,213,225,.2); border: 1px solid rgba(203,213,225,.45); color: #CBD5E1; }

/* stanja projekta */
.st--u_pripremi { background: #F1F5F9; color: var(--color-text-secondary, #475569); }
.st--prekinut { background: #CBD5E1; color: #fff; }
.wm-pill--u_pripremi { background: rgba(252,211,77,.20); border: 1px solid rgba(252,211,77,.50); color: #FCD34D; }
.wm-pill--prekinut { background: rgba(203,213,225,.2); border: 1px solid rgba(203,213,225,.45); color: #CBD5E1; }
.wm-pill--rok { background: rgba(252,165,165,.2); border: 1px solid rgba(252,165,165,.5); color: #FCA5A5; }
.rok-preko { color: var(--red, #EF4444); }
.rok-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
  color: var(--red, #EF4444); font-family: 'Plus Jakarta Sans', sans-serif; }
/* napredak naloga u tablici i na Osnovno */
.prog b { font-size: 13px; color: var(--color-text-primary, #0F172A); }
.prog__bar { height: 5px; border-radius: 3px; background: #E5E7EB; margin-top: 4px; overflow: hidden; }
.prog__bar span { display: block; height: 100%; background: var(--green, #16A34A); border-radius: 3px; }
.prog.big b { font-size: 18px; } .prog.big .prog__bar { height: 8px; margin-top: 6px; }
/* mini tablica u tabu (nalozi, zahtjevi, faze, kronologija) — mockupova `.mini`.
   ⚠️ `.pr-mini`, NE `.mini`: `.mini` vec postoji u `can-nadzorna.css` kao tamna
   kartica CAN klastera (izmjereno u pregledniku 06.09.2026.: tablica faza
   dobila navy gradijent i radijus 16 px). Nije `.tbl`, pa je globalna
   `min-width` velikog stola ne dira. */
.pr-mini { width: 100%; min-width: 0; table-layout: auto; border-collapse: collapse; font-size: 12.5px; }
.pr-mini th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-secondary, #475569); padding: 4px 8px; border-bottom: 1px solid var(--color-border, #E5E7EB);
  background: var(--color-surface, #F8FAFC); }
.pr-mini td { padding: 6px 8px; border-bottom: 1px solid var(--color-border, #E5E7EB); vertical-align: top; }
.pr-mini td.c, .pr-mini th.c { text-align: center; }
.pr-mini th.r, .pr-mini td.r { text-align: right; }
.pr-mini tr:hover td { background: var(--color-surface, #F8FAFC); }
.pr-mini tr.grp td { background: #EEF2FF; padding: 6px 8px; font-weight: 800; color: var(--brand-primary-dark, #0F2C4D); font-size: 12px; }
.pr-mini tr.grp:hover td { background: #EEF2FF; }
.pr-mini tr.grp .sub { font-weight: 500; color: var(--color-text-secondary, #475569); margin-left: 8px; }
.pr-mini tr.grp .gcnt { float: right; font-weight: 700; color: var(--green-text, #15803D); }
.pr-mini tr.grp .gcnt .mdi { margin-right: 3px; }
/* naziv projekta pod brojem (mockup `span.iz` s inline stilom) */
.pr-naz { display: block; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--color-text-primary, #0F172A);
  font-weight: 600; white-space: normal; }
/* hitnost naloga u tabu Nalozi — usklicnici po prioritetu */
.pr-hit { font-weight: 800; letter-spacing: -1px; color: var(--color-text-disabled, #94A3B8); }
.pr-hit--visoka { color: var(--orange-text, #B45309); }
.pr-hit--hitno { color: var(--red, #EF4444); }
/* Navy traka Projekata nosi JEDAN gumb vise od naloga („Novi projekt"), pa na
   1440 px zadnji gumb izlazi iz okvira. Prelama se samo OVA traka; nalozi
   ostaju kakvi jesu. */
#klProjekti .wo-search { flex-wrap: wrap; row-gap: 6px; }
#klProjekti .wo-search__in { flex: 1 1 240px; min-width: 200px; }
#klProjekti .wo-search .btn { white-space: nowrap; }
/* Kalendar: pruga roka PROJEKTA preko dana i tanja pruga FAZE unutar nje
   (cjelodnevni, nepomicni dogadaji iz `KAL.prugeProjekata`). */
.fc .fc-event.ev-projekt { border-width: 0 0 0 4px; font-weight: 700; }
.fc .fc-event.ev-faza { border-width: 0 0 0 4px; border-style: dashed; font-size: 10.5px;
  opacity: .85; margin-left: 14px; }

/* ═══ Citac serijskih brojeva na stolu (krug 1, 1A) ═══
   Polje uz stavku: citac tipka kod i posalje Enter; 409 stoji UZ polje, crveno,
   dok se ne skenira sljedeci. Puno polje je onemoguceno s razlogom. */
.sn__in { font-size: 11px; padding: 2px 8px; border: 1px dashed #C6D1E0; border-radius: 999px;
  width: 190px; background: #fff; color: var(--color-text-primary, #0F172A); }
.sn__in:focus { outline: none; border: 1px solid var(--brand-primary, #1F4E8A); }
.sn__in:disabled { background: #F1F5F9; color: var(--color-text-disabled, #94A3B8); border-style: solid; }
.sn__err { flex-basis: 100%; font-size: 11px; font-weight: 600; color: var(--red-text, #B91C1C); }
.sn__p { color: inherit; text-decoration: none; border-bottom: 1px dotted #94A3B8; }
.sn__p:hover { color: var(--brand-primary, #1F4E8A); }

/* ══ PUTNI NALOZI (30.09.2026., mockup OSIRIS_NEO_putni_nalog_mockup.html) ══
   Ekran crta odgovor posluzitelja; boje oznaka su iz mockupa. Oznake izvora km
   (GNSS, procjena) su postojece `.kt-src` s kartice vozila — isti rjecnik. */
.pn-mj { display: flex; align-items: center; border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px; background: #fff; }
.pn-mj .ibtn { border: 0; background: #fff; padding: 5px 7px; cursor: pointer; color: var(--color-text-tertiary, #64748B); font-size: var(--fs-md); }
.pn-mj .mono { padding: 0 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-primary, #0F172A); letter-spacing: 0; text-transform: none; }
#pnNepotpuni.on { background: #FEF6E7; border-color: #F0D6AD; color: #B45309; }
.pn-stanje { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 8px 13px; font-size: var(--fs-micro); color: var(--color-text-tertiary, #64748B); background: var(--color-surface, #F8FAFC); border-bottom: 1px solid var(--color-border, #E5E7EB); }
.pn-stanje b { color: var(--color-text-primary, #0F172A); font-family: 'JetBrains Mono', monospace; }
.pn-stanje .pn-w b { color: #B45309; }
.pn-stanje .pn-m b { color: #6D28D9; }
.pn-stanje .pn-izm { margin-left: auto; }
.pn-tbl { min-width: 1080px; }
/* ⚠️ Okvir klizi sam; visinu (12 voznji, najvise do dna prozora) postavlja
   `PN.visina` iz izmjerenih redaka — tvrdi broj ovdje ne smije stajati
   (`tbl_skrol_guard`). */
.pn-skrol { overflow: auto; }
/* ⚠️ ZAGLAVLJE I PODNOZJE SE LIJEPE KAO CJELINA. Zaglavlje ima dva retka, a
   `.tbl thead th { top: 0 }` bi oba zalijepio na isti vrh — drugi redak
   (Polazak/Dolazak) preklopio bi prvi. Podnozje na dnu okvira cuva da se
   prevaljeno i zadnje stanje km-sata vide odmah, bez klizanja do kraja. */
.pn-tbl thead { position: sticky; top: 0; z-index: 3; }
.pn-tbl thead th { position: static; }
/* ⚠️ Podnozje se lijepi na razini CELIJA, ne `tfoot` grupe: zalijepljena grupa
   redaka u Chromeu ne slaze `z-index` iznad celija s `position: relative`
   (`.pn-tbl td`), pa je sljedeci redak prosijavao kroz dno podnozja (izmjereno
   01.10.2026.). Podnozje ima jedan redak, pa je to isto. */
.pn-tbl tfoot td { position: sticky; bottom: 0; z-index: 4; background: #F8FAFC; box-shadow: 0 -1px 0 var(--color-border, #E5E7EB); }
.pn-tbl th.pn-grp { text-align: center; }
.pn-tbl .pn-c-dt { width: 96px; }
.pn-tbl .pn-c-kor { width: 17%; }
.pn-tbl .pn-c-voz { width: 14%; }
.pn-tbl .pn-c-lok { width: 19%; }
.pn-tbl .pn-c-km { width: 80px; }
.pn-tbl td { vertical-align: top; position: relative; }
.pn-tbl tr.pn-d1 td { border-top: 1px solid #DDE3EB; }
.pn-dt b { display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); }
.pn-dt span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--color-text-tertiary, #64748B); }
.pn-dt .pn-rucna { display: inline-block; margin-top: 3px; font-style: normal; font-size: 8.5px; font-weight: 700; color: #6D28D9; background: #fff; border: 1px solid #D7C4F5; border-radius: 3px; padding: 0 3px; }
.pn-dt .pn-brisi { border: 0; background: none; cursor: pointer; color: var(--color-text-tertiary, #94A3B8); padding: 0 2px; margin-left: 4px; }
.pn-dt .pn-brisi:hover { color: #B91C1C; }
.pn-ed { position: relative; border-radius: 5px; outline: none; min-height: 1.35em; }
.pn-ed[contenteditable]:hover { box-shadow: inset 0 0 0 1px #C9D6E8; background: #fff; cursor: text; }
.pn-ed[contenteditable]:focus { box-shadow: inset 0 0 0 2px var(--brand-primary, #1F4E8A); background: #fff; }
.pn-ed.pn-man { background: #F5F0FD; padding-right: 34px; }
.pn-ed.pn-man::after { content: "ručno"; position: absolute; top: 3px; right: 4px; font-size: 8px; font-weight: 700; letter-spacing: .04em; color: #6D28D9; background: #fff; border: 1px solid #D7C4F5; border-radius: 3px; padding: 0 3px; }
.pn-ed.pn-prazno { background: #FFF8EB; box-shadow: inset 0 0 0 1px #F0D6AD; }
.pn-ed.pn-prazno:empty::before { content: attr(data-prazno); color: #B45309; font-style: italic; font-size: 11.5px; }
.pn-ed.pn-sprema { opacity: .55; }
.pn-ed.pn-krivo { box-shadow: inset 0 0 0 1px #FCA5A5; background: #FEF2F2; }
.pn-vrati { display: none; position: absolute; bottom: 3px; right: 4px; border: 1px solid #D7C4F5; background: #fff; color: #6D28D9; border-radius: 4px; font-size: 11px; line-height: 1; padding: 2px 3px; cursor: pointer; }
.pn-tbl td:hover > .pn-vrati { display: block; }
.pn-kl b { font-weight: 700; }
.pn-kl small { display: block; font-size: 10.5px; color: var(--color-text-tertiary, #64748B); }
.pn-rn { display: inline-block; margin-top: 2px; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--brand-primary, #1F4E8A); background: #EEF4FC; border: 1px solid #C9D9EE; border-radius: 4px; padding: 0 4px; }
.pn-src { font-size: 8.5px; letter-spacing: .03em; border-radius: 4px; padding: 1px 4px; font-weight: 700; margin-left: 4px; white-space: nowrap; border: 1px solid var(--psb); background: var(--psg); color: var(--psc); }
.pn-src--beacon { --psg: #E8F7EE; --psb: #B6E4C6; --psc: #15803D; }
.pn-src--prijavljen { --psg: #FEF6E7; --psb: #F0D6AD; --psc: #B45309; }
.pn-ar { color: var(--color-text-disabled, #94A3B8); margin: 0 3px; }
.pn-tbl tr.pn-razmak td { background: #FFFBEB; border-bottom: 1px solid #FDE68A; font-size: 11.5px; color: #78350F; }
.pn-tbl tr.pn-razmak .mdi { color: #B45309; }
.pn-tbl tr.pn-razmak .btn { margin-left: 8px; background: #fff; }
.pn-tbl.pn-samo-nep tr.pn-ok { display: none; }
.pn-tbl tfoot .pn-l { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-tertiary, #64748B); font-weight: 700; }
.pn-tbl tfoot .pn-n { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--color-text-tertiary, #64748B); font-size: 11.5px; }
.pn-tbl tfoot .pn-v { font-family: 'JetBrains Mono', monospace; font-size: 15px; }
.pn-leg { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 10px 13px; font-size: 11px; color: var(--color-text-tertiary, #64748B); border-top: 1px solid var(--color-border, #E5E7EB); }
.pn-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.pn-sw--nep { background: #FFF8EB; border: 1px solid #F0D6AD; }
.pn-sw--man { background: #F5F0FD; border: 1px solid #D7C4F5; }
.pn-obrazac { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.pn-obrazac .pn-f { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-micro); font-weight: 600; color: var(--color-text-secondary, #475569); }
.pn-obrazac .pn-f input { border: 1px solid var(--color-border, #E5E7EB); border-radius: 7px; padding: 6px 8px; font-family: inherit; font-size: var(--fs-sm); }
.pn-obrazac .pn-greska { grid-column: 1 / -1; color: #B91C1C; font-size: var(--fs-sm); }

/* ===== RADNO VRIJEME (02.10.2026., korak 1) =====
   Pravila iz obvezujuceg mockupa `OSIRIS_NEO_evidencija_radnog_vremena_mockup.html`,
   pod vlastitim prefiksom `.rv-` — postojeca pravila se ne diraju.
   ⚠️ `.rv-ekran` NEMA `display`: ekrani se skrivaju atributom `hidden`, a
   pravilo s `display` bi ga pregazilo (razred greske iz `stanje_ekrana_guard`). */
.rv-mjesec { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; height: 38px; }
.rv-mjesec button { border: 0; background: none; padding: 0 9px; height: 100%; cursor: pointer; color: var(--color-text-tertiary); font-size: 18px; }
.rv-mjesec button:hover { color: var(--brand-primary); }
.rv-mjesec b { min-width: 118px; text-align: center; font-size: var(--fs-base); }
.rv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rv-kpis--4 { grid-template-columns: repeat(4, 1fr); }
.rv-kpi { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 12px; }
.rv-kpi__l { font-size: var(--fs-micro); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.rv-kpi__v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.rv-kpi__v small { font-size: var(--fs-base); color: var(--color-text-tertiary); font-weight: 600; }
.rv-kpi--bad { border-left: 4px solid var(--red, #EF4444); }
.rv-kpi--bad .rv-kpi__v { color: var(--red-text, #B91C1C); }
.rv-kpi--ok { border-left: 4px solid var(--green, #16A34A); }
.rv-kpi--ok .rv-kpi__v { color: var(--green-text, #15803D); }
.rv-kpi--warn { border-left: 4px solid var(--orange, #F97316); }
.rv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 14px; align-items: start; }
.rv-kart { min-width: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 11px; overflow: hidden; }
.rv-traka { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; background: #fff; }
.rv-razmak { flex: 1; }
.rv-oznaka { font-weight: 600; color: var(--color-text-secondary); }
.rv-trazi { display: flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 8px; padding: 0 9px; background: var(--color-surface); height: 34px; }
.rv-trazi .mdi { color: var(--color-text-tertiary); }
.rv-trazi input { border: 0; background: none; font: inherit; font-size: var(--fs-sm); outline: none; width: 180px; }
.rv-sel { border: 1px solid var(--color-border); border-radius: 8px; padding: 0 9px; height: 34px; font: inherit; font-size: var(--fs-sm); background: #fff; color: var(--color-text-primary); }
.rv-mreza-okvir { overflow-x: auto; }
table.rv-g { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-micro); }
.rv-g th, .rv-g td { border-bottom: 1px solid #EEF2F6; border-right: 1px solid #EEF2F6; text-align: center; padding: 0; height: 40px; }
.rv-g thead th { background: #F1F5F9; font-weight: 600; color: var(--color-text-tertiary); height: 44px; position: sticky; top: 0; font-size: 11px; text-transform: lowercase; }
.rv-g thead th .rv-d { display: block; font-size: var(--fs-sm); color: var(--color-text-primary); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.rv-g th.rv-we, .rv-g td.rv-we { background: #F6F8FB; }
.rv-g th.rv-bl .rv-d { color: var(--red-text, #B91C1C); }
.rv-g .rv-ime { position: sticky; left: 0; background: #fff; text-align: left; padding: 0 12px; min-width: 190px; z-index: 1; border-right: 1px solid var(--color-border); }
.rv-g thead .rv-ime { background: #F1F5F9; z-index: 2; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.rv-g .rv-ime b { display: block; font-weight: 700; font-size: var(--fs-sm); color: var(--color-text-primary); }
.rv-g .rv-ime span { color: var(--color-text-tertiary); font-size: 11px; }
.rv-g .rv-zbr { min-width: 58px; font-weight: 700; font-size: var(--fs-micro); background: #F8FAFC; font-family: 'JetBrains Mono', monospace; }
.rv-g thead .rv-zbr { text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; font-family: inherit; }
.rv-g .rv-prek, .tbl td.rv-prek { color: var(--orange-text, #B45309); }
.rv-g .rv-nula { color: var(--color-text-disabled, #94A3B8); }
.rv-cel { width: 100%; height: 100%; min-width: 36px; border: 0; background: none; cursor: pointer; font: 700 11px 'JetBrains Mono', monospace; color: var(--color-text-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; position: relative; }
.rv-cel small { font-weight: 400; font-size: 10px; color: var(--color-text-tertiary); }
.rv-cel:hover { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.rv-cel.rv-odabrana { outline: 2px solid var(--brand-primary); outline-offset: -2px; background: #E4EDF9 !important; }
.rv-cel.rv-flag::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--red, #EF4444); }
.rv-c-GO { background: #E0ECFB; } .rv-c-BO { background: var(--red-bg, #FEE2E2); } .rv-c-PD, .rv-c-ND { background: #EDE9FE; } .rv-c-T { background: var(--green-bg, #DCFCE7); }
.rv-c-RI { background: #E0F2FE; } .rv-c-P { background: var(--orange-bg, #FEF3C7); } .rv-c-BL { background: #FCE7F3; } .rv-c-PR { background: #FFF7ED; } .rv-c-NE { background: #F1F5F9; }
.rv-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; border-top: 1px solid var(--color-border); font-size: var(--fs-micro); color: var(--color-text-secondary); }
.rv-leg i { font: 700 11px 'JetBrains Mono', monospace; font-style: normal; padding: 1px 6px; border-radius: 5px; margin-right: 5px; color: var(--color-text-primary); border: 1px solid var(--color-border); }
.rv-leg i.rv-leg-tocka { background: var(--red, #EF4444); width: 8px; height: 8px; padding: 0; border-radius: 50%; display: inline-block; border: 0; vertical-align: 1px; }
.rv-panel { position: sticky; top: 0; padding: 14px 16px; }
.rv-panel h3 { font-size: var(--fs-lg); font-weight: 700; }
.rv-sub { color: var(--color-text-tertiary); font-size: var(--fs-sm); margin: 2px 0 12px; }
.rv-blagdan { color: var(--red-text, #B91C1C); }
.rv-prazno { color: var(--color-text-tertiary); text-align: center; padding: 40px 10px; font-size: var(--fs-sm); }
.rv-prazno .mdi { font-size: 32px; display: block; margin: 0 auto 6px; color: var(--color-text-disabled, #94A3B8); }
.rv-fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.rv-fld label { font-size: var(--fs-micro); color: var(--color-text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.rv-fld label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rv-fld input, .rv-fld select, .rv-fld textarea { font: inherit; font-size: var(--fs-base); border: 1px solid var(--color-border); border-radius: 8px; padding: 7px 10px; background: #fff; color: var(--color-text-primary); }
.rv-fld input[type=time], .rv-fld input[type=number] { font-family: 'JetBrains Mono', monospace; }
.rv-fld :disabled { background: var(--color-surface); color: var(--color-text-tertiary); }
.rv-red2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rv-calc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 9px 12px; margin: 2px 0 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: var(--fs-sm); }
.rv-calc span { color: var(--color-text-secondary); }
.rv-calc b { font-family: 'JetBrains Mono', monospace; text-align: right; }
.rv-calc .rv-uk { font-weight: 700; color: var(--color-text-primary); }
.rv-ob { border-radius: 10px; padding: 9px 12px; font-size: var(--fs-sm); margin-bottom: 8px; line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; border: 1px solid; }
.rv-ob .mdi { font-size: var(--fs-lg); margin-top: 1px; }
.rv-ob--err { background: var(--red-bg, #FEE2E2); border-color: #FECACA; color: var(--red-text, #B91C1C); }
.rv-ob--warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; border-left: 3px solid var(--brand-secondary); }
.rv-ob--ok { background: var(--green-bg, #DCFCE7); border-color: #BBF7D0; color: var(--green-text, #15803D); }
.rv-izvor { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--color-text-tertiary); margin: -4px 0 12px; }
.rv-chip { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; border: 1px solid #DDD6FE; background: #F5F3FF; color: #6D28D9; }
.rv-nav { display: flex; gap: 8px; margin-top: 4px; }
.rv-rev { font-size: var(--fs-micro); color: var(--color-text-tertiary); margin-top: 10px; line-height: 1.5; border-top: 1px solid var(--color-border); padding-top: 9px; }
.rv-na { color: var(--color-text-tertiary); font-size: 12px; }
.rv-pill { font-size: var(--fs-micro); font-weight: 700; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.rv-pill--err { background: var(--red-bg, #FEE2E2); color: var(--red-text, #B91C1C); }
.rv-pill--warn { background: var(--orange-bg, #FEF3C7); color: var(--orange-text, #B45309); }
a.rv-lnk { color: var(--brand-primary); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
a.rv-lnk:hover { text-decoration: underline; }
.rv-izv { max-width: 860px; padding: 30px 36px; margin-top: 12px; }
.rv-izv-z { display: flex; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--brand-primary-dark); padding-bottom: 12px; margin-bottom: 14px; }
.rv-izv-lg { font-weight: 800; letter-spacing: .04em; font-size: 20px; color: var(--brand-primary-dark); }
.rv-izv-z h2 { margin-left: auto; text-align: right; font-size: 17px; color: var(--brand-primary-dark); }
.rv-izv-z h2 small { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-tertiary); }
.rv-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.rv-meta div { font-size: var(--fs-sm); font-weight: 600; }
.rv-meta span { display: block; font-size: var(--fs-micro); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.rv-potpis { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.rv-potpis .rv-nap { margin-left: auto; font-size: var(--fs-micro); color: var(--color-text-tertiary); max-width: 300px; }
@media (max-width: 1280px) { .rv-layout { grid-template-columns: minmax(0, 1fr); } .rv-panel { position: static; } }