/* ==========================================================================
   GLAVNI IZBORNIK (v1.50.0) — src/frontend/nav/nav.css
   REFERENCE (plan 10-NAV.md §3, revizija 2). Prefiksi: .nv (izbornik), .ah (#/aukcije),
   .m-* (launcher dodaci). Trajni korijen <aside id="app-nav" class="nv"> je IZVAN #app.
   Stanje je na <html>:
     nv-on       izbornik postoji (klasični prikaz; postavlja ga i rana skripta u index.html)
     nv-boot     prije provjere prijave: traka samo s logom (bez skoka sadržaja)
     nv-open     raširen (miš / tipkovnica / pribadača / povlačenje / dodir)
     nv-push     sadržaj pomaknut za punu širinu (obično zajedno s nv-open)
     nv-instant  sadržaj bez tranzicije (neispitani teški ekrani, prefers-reduced-motion)
     nv-dragging povlačenje stavke u tijeku
   Boje SAMO preko tokena; novi tokeni imaju tamne vrijednosti ovdje (html.icare)
   I u ICARE_DARK/ICARE_BLACK u app.js (slajder interpolira).
   ========================================================================== */

:root {
  --nv-rail: 64px;
  --nv-wide: 248px;
  --nv-dur: 160ms;
  --nv-bar-h: 49px;         /* <=860px vodoravna traka: 8 + 32 + 8 + 1 (rub) */
  --nv-well: #f3f5f9;       /* podloga otvorene grupe */
  --nv-hover: #f2f4f7;      /* hover retka na vrhu */
  --nv-logo-tile: #ffffff;  /* pločica iza logotipa platforme */
}
html.icare {
  --nv-well: #181b20;
  --nv-hover: #262b32;
  --nv-logo-tile: #262b32;
}
/* ===== [WS:NAV] ostatak izbornika (10-NAV §3) — puni samo NAV ===== */
/* Namjerno BEZ prilagođenog svojstva na <html> koje prati guranje (plan: --app-nav-offset): promjena nasljednog
   svojstva na korijenu ponovno računa stil CIJELOG dokumenta (izmjereno: Moje ponude 11–16 ms po guranju, s njim
   ~1 ms bez). Fiksne trake koje trebaju širinu izbornika neka koriste html.nv-on / html.nv-on.nv-push + --nv-rail/--nv-wide. */

.nv { display: none; }
.nv[hidden] { display: none !important; }

/* ===== Računalo (>=861px): fiksna traka + guranje sadržaja ================ */
@media (min-width: 861px) {
  html.nv-on .nv {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 60;
    width: var(--nv-rail);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--line);
    /* clip (ne hidden): traka nije spremnik za skrol — vodoravni pomak uske trake (<= 860 px, aktivni čip
       uskrolan) ili fokus/scrollIntoView ne mogu je pomaknuti ulijevo (prazna traka od 64 px; integracija XR-01).
       hidden ostaje za preglednike bez clip; nav.mjs (resetRailScroll) ionako vraća scrollLeft na 0. */
    overflow: hidden;
    overflow: clip;
    contain: layout paint style;
    user-select: none;
    transition: width var(--nv-dur) var(--ease-out);
  }
  html.nv-on.nv-open .nv { width: var(--nv-wide); }

  html.nv-on .app-shell:not(.mobile-shell) { display: block; }
  /* Pomak je na TRAJNOM <main id="app"> (render() mijenja samo njegov sadržaj), ne na .main-area: tranzicija u
     tijeku preživi svaki render(). Na novom .main-area tranzicija nikad ne krene, pa bi render() usred zatvaranja
     sadržaj odmah vratio na 64 px dok je izbornik još širok — i prekrio ga (do 184 px, ~100 ms). nv-on postoji samo
     uz izbornik (prijava, postavljanje lozinke i mobilni prikaz ga skidaju), pa ekran prijave ostaje na sredini
     cijelog prozora; bez :has() (ključno pravilo ne smije ovisiti o novijem selektoru). */
  html.nv-on #app {
    margin-left: var(--nv-rail);
    transition: margin-left var(--nv-dur) var(--ease-out);
  }
  html.nv-on.nv-push #app { margin-left: var(--nv-wide); }
  /* nv-instant: teški ekran (pomak u jednom koraku) i pojava izbornika (prijava, boot, povratak iz mobilnog prikaza) */
  html.nv-instant #app { transition: none !important; }
  /* "Učitavanje aplikacije…" (.auth-shell) dok je traka rezervirana: kartica na sredini CIJELOG prozora, kao ekran
     prijave — ako provjera završi prijavom (istekla sesija), kartica se ne pomakne za 32 px (kritike r2 RT2-03). */
  html.nv-on #app > .auth-shell { margin-left: calc(-1 * var(--nv-rail)); }
}
@media (prefers-reduced-motion: reduce) {
  html.nv-on .nv,
  html.nv-on #app,
  .nv .nv-group-body,
  .nv .nv-chev { transition: none !important; }
}

/* --- Logo blok (78px = visina trake zaglavlja, crta se nastavlja) -------- */
.nv .nv-brand {
  flex: 0 0 78px;
  width: var(--nv-wide);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--line);
}
.nv .nv-brand-link { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; text-decoration: none; color: inherit; border-radius: 10px; }
.nv .nv-brand-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nv .nv-brand-mark {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--brand);
  color: #ffffff;
}
.nv .nv-brand-mark svg { width: 21px; height: 21px; display: block; }
.nv .nv-brand-text { display: grid; min-width: 0; line-height: 1.15; opacity: 0; transition: opacity .08s ease; }
.nv .nv-brand-name { color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.nv .nv-brand-sub { color: var(--ink-3); font-size: 11.5px; font-weight: 550; letter-spacing: 0.01em; }
.nv .nv-pin {
  flex: 0 0 28px; width: 28px; height: 28px; min-height: 0; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink-3);
  opacity: 0; visibility: hidden;
  transition: opacity .08s ease, visibility 0s linear .08s;
}
.nv .nv-pin svg { width: 15px; height: 15px; display: block; transform: rotate(40deg); transition: transform .16s var(--ease-out); }
.nv .nv-pin:hover:not(:disabled) { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); }
.nv .nv-pin[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #ffffff; }
.nv .nv-pin[aria-pressed="true"]:hover:not(:disabled) { border-color: var(--brand-strong); background: var(--brand-strong); color: #ffffff; }
.nv .nv-pin[aria-pressed="true"] svg { transform: rotate(0deg); }
html.nv-open .nv .nv-brand-text { opacity: 1; transition: opacity .14s ease .03s; }
html.nv-open .nv .nv-pin { opacity: 1; visibility: visible; transition: opacity .14s ease .03s, visibility 0s; }

/* Tablet (dodir, nema prilaska mišem): u traci pribadača umjesto logotipa */
@media (min-width: 861px) and (hover: none) {
  html.nv-on:not(.nv-open) .nv .nv-brand-link { display: none; }
  html.nv-on:not(.nv-open) .nv .nv-pin { opacity: 1; visibility: visible; margin-left: 4px; }
}

/* --- ← → povijest ekrana (Matija 11.10.) ---------------------------------
   Ispod loga, na računalu uvijek vidljivo (izbornik je fiksan, sadržaj ga ne prekriva); kad se izbornik raširi, gumbi
   ostaju na istom mjestu. Prilazak mišem preko njih ne širi izbornik (nav.mjs). Onemogućeni = nema kamo (aria-disabled). */
.nv .nv-hist {
  flex: 0 0 auto;
  display: flex; gap: 2px;
  width: max-content;
  margin: 10px 0 0 5px;
  padding: 2px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
}
.nv .nv-hist-btn {
  flex: 0 0 auto; width: 23px; height: 26px; min-height: 0; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-2);
  cursor: pointer;
}
.nv .nv-hist-btn svg { width: 16px; height: 16px; display: block; stroke-width: 2; }
.nv .nv-hist-btn:hover:not([aria-disabled="true"]) { background: var(--nv-hover); color: var(--ink); }
.nv .nv-hist-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.nv .nv-hist-btn[aria-disabled="true"] { color: var(--ink-3); opacity: .4; cursor: default; }

/* --- Popis --------------------------------------------------------------- */
.nv .nv-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
/* Kotačić i tipke (PageDown, razmak, strelice) nad popisom koji se NE skrola idu stranici, kao kod starog izbornika;
   tek popis koji se stvarno skrola (obje grupe otvorene na nižem ekranu) ne prenosi kraj skrola na stranicu
   (is-overflowing iz nav.mjs; kritike r3 RT3-01 / RT3-04). */
.nv .nv-scroll.is-overflowing { overscroll-behavior: contain; }
.nv .nv-scroll::-webkit-scrollbar { width: 0; height: 0; }
html.nv-open .nv .nv-scroll { scrollbar-width: thin; }
html.nv-open .nv .nv-scroll::-webkit-scrollbar { width: 6px; }
/* Iznad/ispod vidljivog dijela ima još stavki: rub popisa blijedi — i u uskoj traci (64 px), gdje nema trake za
   skrolanje (kritike r3 RT3-03: traka odskrolana do Korisnika skrivala je Početnu i Aukcije bez traga). */
@media (min-width: 861px) {
  .nv .nv-scroll.is-more-up { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px); mask-image: linear-gradient(to bottom, transparent, #000 22px); }
  .nv .nv-scroll.is-more-down { -webkit-mask-image: linear-gradient(to top, transparent, #000 22px); mask-image: linear-gradient(to top, transparent, #000 22px); }
  .nv .nv-scroll.is-more-up.is-more-down {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
}
/* Nove obaveze izvan vidljivog dijela popisa (ni Status obaveza ni naslov njegove grupe se ne vide): gumb sa strelicom
   na crti između popisa i podnožja (ili loga), na osi ikona (x = 32), s istom crvenom točkom; klik pomakne popis do
   stavke (nav.mjs placeAlertDot). */
.nv .nv-edge {
  position: absolute; left: 20px; z-index: 3;
  width: 24px; height: 16px; min-height: 0; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
.nv .nv-edge[hidden] { display: none; }
.nv .nv-edge svg { width: 14px; height: 14px; display: block; stroke-width: 2.2; }
.nv .nv-edge[data-edge="up"] svg { transform: rotate(180deg); }
.nv .nv-edge::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 2px var(--surface);
}
.nv .nv-edge:hover:not(:disabled) { border-color: var(--line-hover); background: var(--nv-hover); color: var(--ink); }
.nv .nv-list,
.nv .nv-sublist { list-style: none; margin: 0; }
.nv .nv-list { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 8px 8px; }
.nv .nv-sublist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 0 0 4px; }

/* Redak (a ili button). Ikona 30px uvijek na osi x=32 (8 + 9 + 15).
   Hijerarhija (R5/R12): vrh 14/580 --ink + glif --ink-2 1.9; djeca 13/530 --ink-2 + glif --ink-3;
   naslov grupe 13.5/650 --ink. */
.nv .nv-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 0;
  padding: 0 10px 0 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 580;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-drag: none;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.nv .nv-ico {
  position: relative;
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--ink-2);
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.nv .nv-ico svg { width: 18px; height: 18px; display: block; stroke-width: 1.9; }
.nv .nv-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .08s ease;
}
html.nv-open .nv .nv-label { opacity: 1; transition: opacity .14s ease .03s; }

.nv .nv-item:hover:not(:disabled) .nv-ico { color: var(--ink); }
html:not(.nv-open) .nv .nv-item:hover:not(:disabled) { background: transparent; }
html:not(.nv-open) .nv .nv-item:hover:not(:disabled) .nv-ico { background: var(--nv-hover); }
html.nv-open .nv .nv-item:hover:not(:disabled) { background: var(--nv-hover); }

/* Naslov grupe: jasno "naslov" (650) */
.nv .nv-group-head > .nv-item { font-size: 13.5px; font-weight: 650; letter-spacing: -0.005em; color: var(--ink); }

/* Djeca: manja pločica (28px) na ISTOJ osi, retci 34px; bez uvlačenja — hijerarhiju nose podloga + tipografija. */
.nv .nv-child { height: 34px; gap: 12px; padding-left: 10px; font-size: 13px; font-weight: 530; letter-spacing: 0; color: var(--ink-2); }
.nv .nv-child .nv-ico { flex-basis: 28px; width: 28px; height: 28px; border-radius: 7px; color: var(--ink-3); }
.nv .nv-child .nv-ico svg { width: 16px; height: 16px; stroke-width: 1.8; }
.nv .nv-child:hover:not(:disabled) { color: var(--ink); }
html.nv-open .nv .nv-group .nv-child:hover:not(:disabled) { background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); }
/* Naslov OTVORENE grupe: isti "podignuti" hover kao djeca — --nv-hover na podlozi --nv-well je gotovo nevidljiv */
html.nv-open .nv .nv-group.is-open > .nv-group-head > .nv-item:not(.is-active):hover:not(:disabled) { background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); }

/* Aktivno: puna plava pločica + bijeli glif + "zarez" na rubu izbornika; redak --brand-soft
   (i na vrhu i u podlozi grupe). Pozadina retka tek kad je raširen (u traci bi bila odrezana). */
.nv .nv-item.is-active,
.nv .nv-item.is-active:hover:not(:disabled) { color: var(--brand-strong); font-weight: 620; }
html.nv-open .nv .nv-item.is-active,
html.nv-open .nv .nv-item.is-active:hover:not(:disabled),
html.nv-open .nv .nv-group .nv-child.is-active,
html.nv-open .nv .nv-group .nv-child.is-active:hover:not(:disabled) { background: var(--brand-soft); box-shadow: none; }
.nv .nv-item.is-active .nv-ico,
.nv .nv-item.is-active:hover:not(:disabled) .nv-ico { background: var(--brand); color: #ffffff; }
.nv .nv-item.is-active::before,
.nv .nv-group:not(.is-open).has-active > .nv-group-head > .nv-item::before {
  content: "";
  position: absolute;
  left: -8px; top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
}
.nv .nv-item.is-active.nv-child::before { top: 8px; bottom: 8px; }
.nv .nv-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* --- Značke (R12: neutralni broj, crvena SAMO točka 6px) -------------------- */
.nv .nv-badge {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  height: 18px; min-width: 18px; padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--ink-3);
  font-size: 11px; font-weight: 650; line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .08s ease;
}
html.nv-open .nv .nv-badge { opacity: 1; transition: opacity .14s ease .03s; }
.nv .nv-badge--new { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); font-size: 10.5px; letter-spacing: .02em; }
/* Bez novih obaveza brojač je skriven ([hidden]; display iz .nv-badge bi ga inače pregazio) */
.nv .nv-badge[hidden] { display: none; }
/* "Nešto novo unutra": točka na pločici (traka i raširen) — na stavki ili na sklopljenoj grupi */
.nv .nv-dot {
  position: absolute; top: -1px; right: -1px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}
.nv .nv-group.is-open .nv-dot { box-shadow: 0 0 0 2px var(--nv-well); }

/* --- Grupe (harmonike) ---------------------------------------------------- */
.nv .nv-group { position: relative; border-radius: 12px; transition: background-color .16s ease; }
.nv .nv-group.is-open { background: var(--nv-well); }
.nv .nv-group-head { position: relative; display: flex; align-items: center; }
.nv .nv-group-head > .nv-item { flex: 1 1 auto; }
.nv .nv-group-link { padding-right: 38px; }
.nv .nv-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink-3); stroke-width: 2; opacity: 0; transition: transform .16s var(--ease-out), opacity .08s ease; }
html.nv-open .nv .nv-chev { opacity: 1; }
.nv .nv-group.is-open > .nv-group-head .nv-chev { transform: rotate(180deg); }
/* Strelica Aukcija: cijela visina retka × 32px (veća meta od same strelice) */
.nv .nv-chev-btn {
  position: absolute; right: 0; top: 0;
  width: 32px; height: 38px; min-height: 0; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 0 10px 10px 0;
  background: transparent;
  opacity: 0; pointer-events: none;
}
.nv .nv-chev-btn .nv-chev { position: relative; opacity: 1; }
html.nv-open .nv .nv-chev-btn { opacity: 1; pointer-events: auto; }
/* Hover strelice = zaobljeni kvadrat 24 px oko nje (cijela meta ostaje 32 × 38), ne odvojena ploča uz rub retka */
.nv .nv-chev-btn::before { content: ""; position: absolute; inset: 7px 4px; border-radius: 7px; transition: background-color .12s ease, box-shadow .12s ease; }
.nv .nv-chev-btn:hover:not(:disabled) { background: transparent; }
.nv .nv-chev-btn:hover:not(:disabled)::before { background: var(--nv-hover); }
.nv .nv-group.is-open .nv-chev-btn:hover:not(:disabled)::before { background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); }
.nv .nv-chev-btn:hover:not(:disabled) .nv-chev { color: var(--ink); }
.nv .nv-inside-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0; }
html.nv-open .nv .nv-group:not(.is-open).has-active .nv-inside-dot { opacity: 1; }
.nv .nv-group:not(.is-open).has-active > .nv-group-head > .nv-item .nv-ico { background: var(--brand-soft); color: var(--brand-strong); }

.nv .nv-group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s var(--ease-out); }
.nv .nv-group.is-open > .nv-group-body { grid-template-rows: 1fr; }
.nv .nv-group-body > .nv-sublist { min-height: 0; overflow: hidden; }
/* Zarez aktivnog djeteta (left: -8px, rub izbornika) odrezao bi overflow podliste (potreban harmonici): podlista se
   proteže 8 px ulijevo do ruba izbornika, sadržaj ostaje na istom mjestu (kritike r2 R2-03 — aktivni Athlon/Ayvens/
   Arval ili Kalendar u otvorenoj grupi ima zarez kao i stavke na vrhu, i u uskoj traci). */
@media (min-width: 861px) {
  .nv .nv-group-body > .nv-sublist { margin-left: -8px; padding-left: 8px; }
}
/* Sklopljena grupa: djeca nisu u redoslijedu Taba (nevidljiv redak ne smije dobiti fokus); vidljivost se
   gasi tek nakon sklapanja (.18s), pali odmah pri rasklapanju. */
.nv .nv-group-body > .nv-sublist { visibility: hidden; transition: visibility 0s linear .18s; }
.nv .nv-group.is-open > .nv-group-body > .nv-sublist { visibility: visible; transition: visibility 0s; }
/* Razdjelnik "Sustav" (brief §7) ispred prve sistemske stavke u grupi */
.nv .nv-sep { height: 1px; margin: 4px 10px; background: var(--line); }

/* Logotipi platformi: ISTO za sve tri — neutralna pločica + znak 18px (Arval = samo zvjezdice) */
.nv .nv-logo { background: var(--nv-logo-tile); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.nv .nv-logo svg { width: 18px; height: 18px; display: block; }
.nv .nv-child .nv-logo svg { width: 17px; height: 17px; }
/* Optička korekcija: Arvalove zvjezdice su rijetke — 2px veće da izgledaju jednako "teške" */
.nv .nv-logo[data-platform="arval"] svg { width: 20px; height: 20px; }
.nv .nv-child .nv-logo[data-platform="arval"] svg { width: 19px; height: 19px; }
.nv .nv-logo .nv-logo-dark { display: none; }
html.icare .nv .nv-logo .nv-logo-light { display: none; }
html.icare .nv .nv-logo .nv-logo-dark { display: block; }
.nv .nv-logo :is(.nv-logo-light, .nv-logo-dark) { line-height: 0; }
.nv .nv-item.is-active .nv-logo,
.nv .nv-item.is-active:hover:not(:disabled) .nv-logo { background: var(--nv-logo-tile); color: inherit; box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 2px var(--brand-ring); }
.nv .nv-logo-fallback { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }

/* --- Vrati zadani izbornik: na dnu popisa, odmah iznad crte podnožja ------- */
.nv .nv-reset {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  align-self: flex-start;
  height: 26px; min-height: 0;
  margin: auto 8px 8px 17px; padding: 0 6px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-3); font-size: 12px; font-weight: 560;
  opacity: 0; pointer-events: none; transition: opacity .08s ease;
}
.nv .nv-reset svg { width: 14px; height: 14px; display: block; }
html.nv-open .nv .nv-reset { opacity: 1; pointer-events: auto; }
.nv .nv-reset:hover:not(:disabled) { background: var(--nv-hover); color: var(--ink); }

/* --- Podnožje: iCare (jedan klik, kao do sada) + korisnik ------------------- */
.nv .nv-foot { flex: 0 0 auto; display: grid; gap: 2px; padding: 8px; border-top: 1px solid var(--line); }
.nv .nv-icare { height: 38px; }
.nv .nv-icare[aria-pressed="true"] .nv-ico { background: var(--brand-soft); color: var(--brand-strong); }
.nv .nv-icare .nv-label { font-size: 13px; font-weight: 560; color: var(--ink-2); }
.nv .nv-switch { position: relative; flex: 0 0 auto; margin-left: auto; width: 30px; height: 17px; border-radius: 999px; background: var(--line-strong); opacity: 0; transition: background-color .15s ease, opacity .08s ease; }
html.nv-open .nv .nv-switch { opacity: 1; transition: background-color .15s ease, opacity .14s ease .03s; }
.nv .nv-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform .15s var(--ease-out); }
.nv .nv-icare[aria-pressed="true"] .nv-switch { background: var(--brand); }
.nv .nv-icare[aria-pressed="true"] .nv-switch::after { transform: translateX(13px); }
.nv .nv-level { display: none; gap: 4px; padding: 0 10px 6px 50px; }
html.nv-open .nv .nv-level { display: grid; }
.nv .nv-level-label { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11.5px; font-weight: 560; }
/* Slajder: poništi globalni input (styles.css 250: rub, padding, min-height) */
.nv .nv-level input[type="range"] {
  width: 100%; height: 18px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
  appearance: none; -webkit-appearance: none; cursor: pointer; touch-action: pan-y;
}
.nv .nv-level input[type="range"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nv .nv-level input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--line-strong), var(--ink)); }
.nv .nv-level input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 2px solid var(--brand); border-radius: 50%; background: var(--surface); }
.nv .nv-level input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--line-strong), var(--ink)); }
.nv .nv-level input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid var(--brand); border-radius: 50%; background: var(--surface); }

.nv .nv-user { display: flex; align-items: center; gap: 11px; height: 48px; padding: 0 4px 0 9px; border-radius: 10px; }
.nv .nv-avatar {
  flex: 0 0 30px; width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-strong);
  font-size: 11.5px; font-weight: 700;
}
.nv .nv-user-meta { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; line-height: 1.2; opacity: 0; transition: opacity .08s ease; }
html.nv-open .nv .nv-user-meta { opacity: 1; transition: opacity .14s ease .03s; }
.nv .nv-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 13px; font-weight: 600; }
.nv .nv-user-ver { justify-self: start; color: var(--ink-3); font-size: 11.5px; font-weight: 550; font-variant-numeric: tabular-nums; text-decoration: none; border-radius: 4px; }
.nv .nv-user-ver:hover { color: var(--brand-strong); text-decoration: underline; }
.nv .nv-user-ver:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.nv .nv-user-act {
  flex: 0 0 28px; width: 28px; height: 28px; min-height: 0; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-3);
  opacity: 0; pointer-events: none; transition: opacity .08s ease;
}
.nv .nv-user-act svg { width: 16px; height: 16px; display: block; }
html.nv-open .nv .nv-user-act { opacity: 1; pointer-events: auto; transition: opacity .14s ease .03s; }
.nv .nv-user-act:hover:not(:disabled) { background: var(--nv-hover); color: var(--ink); }
.nv .nv-user-act--danger:hover:not(:disabled) { color: var(--danger); }
.nv .nv-user-act:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* --- Povlačenje (DnD) ----------------------------------------------------- */
.nv .nv-grip { position: absolute; left: 1px; top: 50%; width: 8px; height: 14px; margin-top: -7px; color: var(--ink-4); opacity: 0; transition: opacity .12s ease; pointer-events: none; cursor: grab; }
.nv .nv-grip svg { width: 8px; height: 14px; display: block; }
html.nv-open:not(.nv-dragging) .nv .nv-item[data-nav-drag]:hover > .nv-grip { opacity: .8; pointer-events: auto; transition-delay: .25s; }
.nv .nv-item.is-drag-source,
.nv .nv-group.is-drag-source { opacity: .35; }
.nv .nv-group.is-drop-into > .nv-group-head > .nv-item { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); }
.nv .nv-drop-line { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 2px; border-radius: 2px; background: var(--brand); pointer-events: none; }
.nv .nv-drop-line::before { content: ""; position: absolute; left: -5px; top: -3px; width: 8px; height: 8px; box-sizing: border-box; border: 2px solid var(--brand); border-radius: 50%; background: var(--surface); }
.nv .nv-drop-line[hidden] { display: none; }
.nv .nv-empty-drop { height: 32px; margin: 2px 8px 4px; display: grid; place-items: center; border: 1.5px dashed var(--brand-line); border-radius: 8px; color: var(--ink-3); font-size: 12px; font-weight: 560; }
.nv .nv-empty-drop.is-drop-into { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.nv .nv-item.is-just-dropped { animation: nv-dropped .7s var(--ease-out); }
@keyframes nv-dropped { from { background: var(--brand-soft); } }
/* izvan .nv (dodaje se u body). Duh je kompaktna "etiketa" DESNO od pokazivača (nav.mjs GHOST_DX), ne cijeli
   redak ispod njega: crta ispuštanja (s točkom lijevo) je uvijek na granici retka uz pokazivač, a duh širok
   232 px na mjestu hvata ju je skrivao u svakom položaju. */
.nv-drag-shield { position: fixed; inset: 0; z-index: 999; cursor: grabbing; }
.nv-ghost {
  position: fixed; left: 0; top: 0; z-index: 1000;
  width: max-content; max-width: 232px; height: 38px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 4px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: .97;
}
.nv-ghost .nv-ico { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--ink-2); }
.nv-ghost .nv-ico svg { width: 18px; height: 18px; display: block; stroke-width: 1.9; }
.nv-ghost .nv-badge, .nv-ghost .nv-dot, .nv-ghost .nv-grip, .nv-ghost .nv-chev { display: none; }
.nv-ghost .nv-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Duh je izvan .nv: logotip platforme treba istu neutralnu pločicu i zamjenu svijetli/tamni znak */
.nv-ghost .nv-logo { background: var(--nv-logo-tile); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.nv-ghost .nv-logo[data-platform="arval"] svg { width: 20px; height: 20px; }
.nv-ghost .nv-logo :is(.nv-logo-light, .nv-logo-dark) { line-height: 0; }
.nv-ghost .nv-logo .nv-logo-dark { display: none; }
html.icare .nv-ghost .nv-logo .nv-logo-light { display: none; }
html.icare .nv-ghost .nv-logo .nv-logo-dark { display: block; }
.nv-ghost .nv-logo-fallback { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }

/* ===== Uski prozor (<=860px, klasični prikaz): vodoravna traka u toku ======
   (isto kao do sada: sve stavke u nizu, bez ikona, bez guranja i povlačenja) */
@media (max-width: 860px) {
  html.nv-on .nv {
    position: sticky; top: 0; z-index: 80;
    height: var(--nv-bar-h);
    box-sizing: border-box;
    display: flex; flex-direction: row; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
  }
  html.nv-on .nv::-webkit-scrollbar { display: none; }
  /* Ima još desno / lijevo: rub blijedi (nv-more-right / nv-more-left iz nav.mjs) — traka odskrolana do aktivnog čipa
     inače bi lijevo odrezala logo i prve čipove bez traga (kritike r3 R3-04). Blijeđenje je ljepljivi sloj boje trake
     preko čipova (::before lijevo, ::after desno, 8 % širine; margina poništi njegovu širinu i razmak, pa u redu ne
     zauzima mjesto), ne maska: maska je i pozadinu ljepljive trake činila prozirnom, pa se kroz rub vidio sadržaj
     stranice koji se skrola ispod nje (tamna pilula statusa preko čipa Carina — QA runda 4 VD4-01). Ljepljivi pomak
     se mjeri od unutarnjeg ruba trake (padding 12 px): −12 px stavlja sloj na sam rub, a −13 px još 1 px preko njega
     (taj dio traka odreže) — pri razlomljenom skaliranju zaslona (125 / 150 / 175 %) sloj bi inače stao djelić
     piksela prije ruba, pa bi krajnji stupac zadržao dio čipa (QA runda 4b VE4-01). Lijevo su ljepljivi ← → (širina
     --nv-hist-w od ruba trake), pa lijevi sloj počinje odmah iza njih, uz 1 px preklopa (isti razlog). */
  html.nv-on .nv::before,
  html.nv-on .nv::after {
    content: ""; position: sticky; z-index: 1;
    flex: 0 0 8%; align-self: stretch; margin-block: -8px;
    pointer-events: none; opacity: 0;
  }
  html.nv-on .nv::before { left: calc(var(--nv-hist-w) - 13px); margin-right: calc(-8% - 6px); background: linear-gradient(90deg, var(--surface), transparent); }
  html.nv-on .nv::after { right: -13px; margin-left: calc(-8% - 6px); background: linear-gradient(270deg, var(--surface), transparent); }
  html.nv-on .nv.nv-more-left::before,
  html.nv-on .nv.nv-more-right::after { opacity: 1; }
  html.nv-on .nv .nv-edge { display: none; }
  /* Ljepljivi slojevi ispod trake: tabovi dosjea, .ui-tabs--sticky, alatne trake (05 §2) */
  html.nv-on .app-shell:not(.mobile-shell) > .main-area { --app-sticky-top: var(--nv-bar-h); }
  html.nv-on .app-shell:not(.mobile-shell) > .main-area:has(> .environment-banner) { --app-sticky-top: calc(var(--nv-bar-h) + 32px); }
  html.nv-on .app-shell:not(.mobile-shell) > .main-area > .environment-banner { top: var(--nv-bar-h); }
  /* Računi editor: ljepljiva traka radnji (Spremi, Izdaj) ispod trake izbornika, ne ispod nje (racuni-editor.css
     čita --rc-ed-top; inače se pri skrolanju sakrije iza trake). */
  html.nv-on .app-shell:not(.mobile-shell) .rc-ed { --rc-ed-top: var(--app-sticky-top); }
  /* ← → prvi u redu (order −1) i ljepljivi na lijevom rubu: logo i čipovi prolaze ispod njih, aktivni čip se uskrola
     desno od njih (nav.mjs revealActiveRow, scroll-padding za fokus tipkovnicom). Neprozirna podloga cijele visine
     trake pokriva i njezin padding; −13 px = 1 px preko ruba (razlomljeno skaliranje, VE4-01). */
  html.nv-on .nv { --nv-hist-w: 74px; scroll-padding-left: calc(var(--nv-hist-w) + 12px); }
  html.nv-on .nv .nv-hist {
    order: -1; position: sticky; left: -13px; z-index: 2;
    box-sizing: border-box; flex: 0 0 auto; width: calc(var(--nv-hist-w) + 1px); align-self: stretch; align-items: center; gap: 2px;
    margin: -8px 0 -8px -13px; padding: 0 0 0 13px;
    border: 0; border-radius: 0; background: var(--surface);
  }
  html.nv-on .nv .nv-hist-btn { width: 28px; height: 32px; border-radius: 8px; }
  html.nv-on .nv .nv-brand { flex: 0 0 auto; width: auto; height: auto; padding: 0; border: 0; }
  html.nv-on .nv .nv-brand-text, html.nv-on .nv .nv-pin { display: none; }
  html.nv-on .nv .nv-brand-mark { width: 30px; height: 30px; border-radius: 8px; }
  html.nv-on .nv .nv-brand-mark svg { width: 17px; height: 17px; }
  html.nv-on .nv .nv-scroll { flex: 0 0 auto; display: block; overflow: visible; }
  html.nv-on .nv .nv-list,
  html.nv-on .nv .nv-sublist { display: flex; flex-direction: row; align-items: center; gap: 4px; padding: 0; }
  html.nv-on .nv .nv-group,
  html.nv-on .nv .nv-group-head,
  html.nv-on .nv .nv-group-body { display: contents; }
  html.nv-on .nv .nv-list > li, html.nv-on .nv .nv-sublist > li { display: contents; }
  html.nv-on .nv .nv-group-toggle, html.nv-on .nv .nv-sep { display: none; }
  html.nv-on .nv .nv-sublist { visibility: visible; }   /* skupine su ovdje razvijene u čipove */
  html.nv-on .nv .nv-item { width: auto; height: 32px; padding: 0 10px; flex: 0 0 auto; font-size: 13.5px; }
  html.nv-on .nv .nv-ico { display: none; }
  html.nv-on .nv .nv-label, html.nv-on .nv .nv-badge, html.nv-on .nv .nv-user-act, html.nv-on .nv .nv-switch { opacity: 1; }
  html.nv-on .nv .nv-item { color: var(--ink-2); font-weight: 560; }
  html.nv-on .nv .nv-item.is-active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 620; }
  html.nv-on .nv .nv-item::before { display: none; }
  html.nv-on .nv :is(.nv-chev, .nv-chev-btn, .nv-grip, .nv-dot, .nv-inside-dot, .nv-reset, .nv-drop-line, .nv-avatar, .nv-user-meta) { display: none !important; }
  html.nv-on .nv .nv-foot { display: contents; }
  html.nv-on .nv .nv-user { display: contents; }
  html.nv-on .nv .nv-user-act { pointer-events: auto; flex: 0 0 32px; height: 32px; }
  /* Traka je flex red koji se prelijeva (skrola vodoravno): bez flex: 0 0 slajder bi se stisnuo na 0 px (ostao bi
     samo kružić, a pritisak bi postavio mračninu na 0 %). */
  html.nv-on .nv .nv-level { display: grid; flex: 0 0 74px; width: 74px; padding: 0; }
  html.nv-on .nv .nv-level-label { display: none; }
}

/* ===== Ispis ============================================================== */
@media print {
  .nv, .nv-ghost, .nv-drag-shield { display: none !important; }
  html.nv-on #app { margin-left: 0 !important; transition: none !important; }
}

/* ===== Velike liste: content-visibility (push 60 fps; plan §4.3) ===========
   Visina = SADRŽAJ retka (medijan border-box − padding − rub); "auto" pamti stvarnu
   visinu nakon prvog iscrtavanja. Stabilnost skrola: [data-anchor] + restoreScrollAnchor (app.js).
   Izmjereno 2026-10-07 (1600 px, traka): vozila 241→211, ponude 351→321, filteri 294→264,
   katalog (Athlon 280 auta) 177→147, oglašavanje 104→84. Nakon redizajna redaka ponovno izmjeriti.
   POLISH 2026-10-09: Moja vozila kompaktni retci (.ov-row) 85→64, Moje ponude (.of-row) 93→68; kartica auta .ac-card
   (Filteri i sve tri aukcije) 202→176 (1600 px, traka i +184 px). */
.owned-vehicle-list > .ov-row { content-visibility: auto; contain-intrinsic-block-size: auto 64px; }
.offer-list > .of-row { content-visibility: auto; contain-intrinsic-block-size: auto 68px; }
.filters-results > .vehicle-list > .ac-card { content-visibility: auto; contain-intrinsic-block-size: auto 176px; }
.auction-car-list > .ac-card { content-visibility: auto; contain-intrinsic-block-size: auto 176px; }
.oglasavanje-list > .oglasavanje-item { content-visibility: auto; contain-intrinsic-block-size: auto 84px; }
/* Preskočeni retci pamte zadnju ŠIRINU i guraju je u min-content liste: bez eksplicitnog stupca lista (i
   .content-card / .page-stack oko nje) ostane šira od prostora nakon guranja (izmjereno: Filteri 139 px preko
   desnog ruba). Stupac minmax(0, 1fr) uzima širinu od roditelja, ne od redaka. */
.filters-results > .vehicle-list,
.offer-list,
.owned-vehicle-list,
.auction-car-list { grid-template-columns: minmax(0, 1fr); }
/* Oglašavanje: lista je blok (ne grid) u .content-card (grid) u .page-stack (grid) — širina preskočenih redaka bi
   kroz automatski minimum stavki mreže raširila karticu (izmjereno guranjem pri 880–1200 px: 31–112 px preko desnog
   ruba, a gumb Osvježi ispod kružića obaveza). min-width: 0 na obje razine prekida lanac. */
.oglasavanje-panel,
.oglasavanje-list { min-width: 0; }
/* Kartice auta (Filteri, popis aukcije): spremnik "acrows" i raspored po širini popisa su u styles.css §07 (POLISH WP8)
   — jedan raspored za svaki popis od 660 px naviše, pa guranje izbornika više ne prebacuje karticu. */
/* Moje ponude (v1.50 POLISH): sažeti retci .of-row imaju vlastiti spremnik "oflist" i raspored po širini popisa u
   styles.css §09 (prijašnji navoffers raspored za kartice od 340 px je maknut). */
/* content-visibility uključuje paint containment: crta između redaka na top:-1px bi se odrezala */
.oglasavanje-list > .oglasavanje-item + .oglasavanje-item::before { top: 0; }

/* ===== Računi pri guranju: tablice i traka uređivača po širini SPREMNIKA ==========================
   racuni-screens.css / racuni-editor.css sužavaju stupce po širini PROZORA (≤1320, ≤1200, ≤1100, ≤720 kartice), a
   raširen izbornik oduzme sadržaju 184 px bez promjene prozora: pri 880–1100 px sličica vozila crtala se preko iznosa
   ("25.000,00 €" -> "5.000,00 €"), a naslov uređivača bio je odrezan (kritike r3 R3-02). Ovdje ISTI koraci po širini
   tablice — u traci (64 px) se pale na istim prozorima kao i dosad (tablica = prozor − 118 px: 1320 -> 1202, 1200 ->
   1082, 1100 -> 982), a kad izbornik gura, na užem sadržaju. Novo: < 900 px bez stupca Rok / Vrijedi do; < 820 px
   kartice (kao ≤720). Tekst u ćeliji se skraćuje (…), a sličica se reže na rubu ćelije — nikad preko susjeda.
   Samo ≥861 px (uža traka nema guranja; tamo vrijede pravila po prozoru kao i dosad). */
.rc-list-card > .rc-table-wrap { container: rclist / inline-size; }
.rc-list-card .rc-table .rc-cell-text { grid-template-columns: minmax(0, 1fr); }
.rc-list-card .rc-doc-table :is(td.c-buyer, td.c-vehicle),
.rc-list-card .rc-in-table :is(td.u-supplier, td.u-vehicles),
.rc-list-card .rc-p-table td.p-name { overflow: hidden; }
@media (min-width: 861px) {
  @container rclist (max-width: 1202px) {
    .rc-doc-table .c-regime { display: none; }
    .rc-doc-table .c-num { width: 164px; }
    .rc-doc-table .c-status { width: 150px; }
    .rc-in-table .u-vehicles { width: 20%; }
    .rc-p-table .p-used { display: none; }
  }
  @container rclist (max-width: 1082px) {
    .rc-in-table .u-number { width: 132px; }
    .rc-p-table .p-city { display: none; }
  }
  @container rclist (max-width: 982px) {
    .rc-doc-table .c-vehicle .rc-cell-sub { display: none; }
    .rc-doc-table .c-due { width: 112px; }
    .rc-in-table .u-dates { display: none; }
  }
  @container rclist (max-width: 899px) {
    .rc .rc-doc-table .c-due { display: none; }
    /* rok ostaje na popisu: kratko ispod statusa ("za 3 dana", "kasni 2 dana", "još 5 dana"; racuni-hub statusDue) */
    .rc .rc-doc-table .c-status .rc-status-due { display: flex; margin-top: 4px; font-size: 12px; }
    .rc .rc-doc-table .c-num { width: 140px; }
    .rc .rc-doc-table--ponuda .c-status { width: 120px; }
    .rc .rc-table tr.rc-grp .rc-grp-hint { display: none; }
  }
  /* Kartice umjesto tablice (isto kao racuni-screens.css @media (max-width: 720px)) */
  @container rclist (max-width: 819px) {
    .rc .rc-doc-table, .rc .rc-in-table, .rc .rc-p-table { table-layout: auto; }
    .rc .rc-doc-table thead, .rc .rc-in-table thead, .rc .rc-p-table thead { display: none; }
    .rc .rc-doc-table tbody, .rc .rc-in-table tbody, .rc .rc-p-table tbody { display: block; }
    .rc .rc-doc-table tr.rc-row, .rc .rc-in-table tr.rc-row, .rc .rc-p-table tr.rc-row, .rc .rc-table tr.rc-skel-row { display: grid; gap: 8px 12px; padding: 13px 14px; border-bottom: 1px solid var(--rc-line); }
    .rc .rc-doc-table tr.rc-row td, .rc .rc-in-table tr.rc-row td, .rc .rc-p-table tr.rc-row td, .rc .rc-table tr.rc-skel-row td { display: block; width: auto; padding: 0; border: 0; min-width: 0; height: auto; }
    .rc .rc-doc-table .c-num .rc-docnum-sub { display: none; }
    .rc .rc-doc-table .c-num .rc-docnum-text { overflow: visible; }
    .rc .rc-doc-table .c-due .rc-faint { display: none; }
    .rc .rc-table tr.rc-skel-row { grid-template-columns: 1fr; }
    .rc .rc-table tr.rc-skel-row td:nth-child(n+3) { display: none; }
    .rc .rc-table tbody tr.rc-row:hover td { background: transparent; }

    .rc .rc-doc-table tr.rc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "buyer amount" "num status" "vehicle due"; }
    .rc .rc-doc-table .c-buyer { grid-area: buyer; }
    .rc .rc-doc-table .c-amount { grid-area: amount; }
    .rc .rc-doc-table .c-num { grid-area: num; display: flex !important; align-items: center; gap: 8px; }
    .rc .rc-doc-table .c-num .rc-cell-sub { display: inline; }
    .rc .rc-doc-table .c-status { grid-area: status; justify-self: end; }
    .rc .rc-doc-table .c-vehicle { grid-area: vehicle; }
    .rc .rc-doc-table .c-due { grid-area: due; display: block; justify-self: end; text-align: right; }
    .rc .rc-doc-table .c-status .rc-status-due { display: none; }   /* kartica ima svoj redak roka */
    .rc .rc-doc-table .c-due .rc-cell-sub { display: none; }
    .rc .rc-doc-table .c-regime, .rc .rc-doc-table .c-actions { display: none !important; }
    .rc .rc-doc-table .c-vehicle .rc-thumb { width: 40px; height: 28px; }
    .rc .rc-doc-table tr.rc-grp { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 14px 7px; background: var(--rc-canvas); border-bottom: 1px solid var(--rc-line); }
    .rc .rc-doc-table tbody tr.rc-grp:first-child { background: var(--rc-sunken); }
    .rc .rc-doc-table tr.rc-grp td { display: none; padding: 0; height: auto; border: 0; background: transparent; }
    .rc .rc-doc-table tr.rc-grp td.c-num, .rc .rc-doc-table tr.rc-grp td.c-amount { display: block; }
    .rc .rc-doc-table tr.rc-grp .rc-grp-label { position: static; }
    .rc .rc-doc-table tr.rc-grp .rc-grp-hint { display: none; }

    .rc .rc-in-table tr.rc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sup amount" "num status" "veh veh"; }
    .rc .rc-in-table .u-supplier { grid-area: sup; }
    .rc .rc-in-table .u-amount { grid-area: amount; }
    .rc .rc-in-table .u-number { grid-area: num; }
    .rc .rc-in-table .u-number .rc-cell-sub { display: none; }
    .rc .rc-in-table .u-status { grid-area: status; justify-self: end; }
    .rc .rc-in-table .u-vehicles { grid-area: veh; }
    .rc .rc-in-table .u-dates, .rc .rc-in-table .u-actions { display: none !important; }

    .rc .rc-p-table tr.rc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name kind" "oib docs"; }
    .rc .rc-p-table .p-name { grid-area: name; }
    .rc .rc-p-table .p-kind { grid-area: kind; justify-self: end; }
    .rc .rc-p-table .p-kind .rc-kind-roles { display: none; }
    .rc .rc-p-table .p-oib { grid-area: oib; }
    .rc .rc-p-table .p-docs { grid-area: docs; justify-self: end; }
    .rc .rc-p-table .p-city, .rc .rc-p-table .p-used, .rc .rc-p-table .p-go { display: none !important; }
  }
}
/* Traka uređivača računa (Natrag · ikona · naslov + stanje · radnje): kad je uska, sporedne radnje (Pregled ispisa;
   kod ponude Ispiši, Pošalji…, Status) ostaju kao ikone — natpis je skriven samo vidljivo (čitač ga i dalje čita),
   a natpis "Računi"/"Ponude" uz strelicu natrag, razdjelnik i ikona dokumenta se skrivaju. Nijedna radnja ne nestaje
   (na računalu ih "⋯" ne nudi). Prije: pri 960 px s raširenim izbornikom naslov je bio odrezan na gornjem rubu i
   stanje spremanja prelomljeno; ponuda (tri sporedne radnje) treba ~950 px sadržaja trake (u traci već pri 1024–1180 px
   naslov je bio na gornjem rubu, a stanje u dva retka). */
.rc-ed-bar { container: rcedbar / inline-size; }
/* Naslov i stanje skraćuju se unutar svog stupca (bez minmax stupac mreže raste do punog naslova i tekst klizi pod
   gumbe radnji — ponuda pri 880 px s raširenim izbornikom). */
.rc-ed-bar .rc-ed-ident-text { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {
  @container rcedbar (max-width: 740px) {
    .rc-ed-bar-in { gap: 8px; }
    .rc-ed-bar-in :is(.rc-ed-bar-sep, .rc-ed-back span, .rc-ed-doc-ico, .rc-ed-actions .rc-kbd) { display: none; }
    .rc .rc-ed-bar-in .rc-ed-title { font-size: 15px; }
    .rc .rc-ed-bar-in .rc-ed-act-secondary { padding: 0 10px; }
    .rc .rc-ed-bar-in .rc-ed-act-secondary > span:not(.rc-kbd) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  @container rcedbar (max-width: 960px) {
    .rc-ed-bar-in:has(.rc-ed-act-secondary ~ .rc-ed-act-secondary) { gap: 8px; }
    .rc-ed-bar-in:has(.rc-ed-act-secondary ~ .rc-ed-act-secondary) :is(.rc-ed-bar-sep, .rc-ed-back span, .rc-ed-doc-ico, .rc-ed-actions .rc-kbd) { display: none; }
    .rc .rc-ed-bar-in:has(.rc-ed-act-secondary ~ .rc-ed-act-secondary) .rc-ed-title { font-size: 15px; }
    .rc .rc-ed-bar-in:has(.rc-ed-act-secondary ~ .rc-ed-act-secondary) .rc-ed-act-secondary { padding: 0 10px; }
    .rc .rc-ed-bar-in:has(.rc-ed-act-secondary ~ .rc-ed-act-secondary) .rc-ed-act-secondary > span:not(.rc-kbd) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  /* Još uže (861–960 px s raširenim izbornikom): stanje spremanja se reže u istom retku umjesto da se prelomi i
     naslov odgura do gornjeg ruba trake. */
  @container rcedbar (max-width: 600px) {
    .rc-ed-sub { flex-wrap: nowrap; overflow: hidden; }
  }
}

/* ===== Aukcije (#/aukcije, view auctionsHub) ==============================
   Kartica = isti sažetak kao Početna (ui/platform-summary.mjs), naglasak marke SAMO
   gornjom trakom .ui-pf-stripe[data-platform] (05 §3) — bez hex boja ovdje. */
/* Kartice u redu iste visine (Ayvens nema "Završava uskoro" — bez rastezanja je bila upola niža). Tri u redu od
   872 px mreže (1016–1100 px prozora u traci); u dva stupca (576–871 px, raširen izbornik) treća kartica ide preko
   cijelog reda — bez rupe pored Arvala (kritike r2 R2-05). */
.ah-grid { container: ahgrid / inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
@container ahgrid (max-width: 871px) {
  .ah-grid > .ah-card:nth-child(3):last-child { grid-column: 1 / -1; }
}
/* Korisnik s jednom platformom: kartica ne ide preko cijele stranice (~1300 px — "Otvori" i vremena "Završava uskoro"
   daleko od loga), nego je široka kao kartica u redu od dvije (kritike r3 R3-05). */
.ah-grid > .ah-card:only-child { max-width: 560px; }
.ah-card {
  position: relative;
  display: grid; gap: 16px; align-content: start;
  padding: 20px 20px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 3px 0 var(--pf, var(--line)), var(--shadow-xs);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ah-card:hover { border-color: var(--line-hover); box-shadow: inset 0 3px 0 var(--pf, var(--line)), var(--shadow-sm); }
.ah-card-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; color: inherit; text-decoration: none; }
/* Cijela kartica je klikljiva ("stretched link"); retci "Završava uskoro" su iznad nje */
.ah-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ah-card-link:focus-visible { outline: none; }
.ah-card:has(.ah-card-link:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.ah-logo { display: flex; align-items: center; height: 30px; }   /* riječ 24 px, Arval 30 px (optička veličina) */
.ah-open { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-strong); font-size: 13px; font-weight: 600; }
.ah-open svg { width: 15px; height: 15px; transition: transform .12s ease; }
.ah-card:hover .ah-open svg { transform: translateX(2px); }
/* Brojke uvijek u JEDNOM redu (stupci po sadržaju): u uskoj kartici (1280 px s raširenim izbornikom) prelomi se
   natpis ("završava / danas"), a treća brojka ne pada sama u novi red. */
.ah-stats { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; align-items: start; gap: 8px 22px; }
.ah-stat { display: grid; gap: 2px; }
.ah-stat b { color: var(--ink); font-size: 24px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ah-stat span { color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.ah-stat--warn b { color: var(--warn); }
.ah-next { align-self: end; color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.ah-empty { color: var(--ink-3); font-size: 13px; }
.ah-soon { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.ah-soon-title { margin: 0 0 2px; color: var(--ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ah-soon-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ah-soon-row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  width: 100%; min-height: 0; padding: 7px 8px; margin: 0 -8px;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.ah-soon-row:hover:not(:disabled) { background: var(--surface-soft); }
/* Naziv aukcije: do dva retka pa tek onda "…" (u uskoj kartici jedan redak je bio ~20 znakova) */
.ah-soon-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: break-word;
  font-size: 13px; font-weight: 560; line-height: 1.3;
}
.ah-soon-sub { grid-column: 1; color: var(--ink-3); font-size: 12px; }
.ah-when { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ah-when.is-danger { color: var(--danger); }
/* Kostur dok /api/platforms ne stigne: iste visine kao brojka + natpis (47 px), naslov popisa (19 px) i redak
   "Završava uskoro" s jednim retkom naziva (51 px) — kartice ne narastu kad stignu podaci. */
.ah-stat--skel { gap: 6px; padding-bottom: 2px; }
.ah-soon > .ui-skel:first-child { margin: 3px 0 5px; }
.ah-soon-skel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 17px 18px; align-items: center; gap: 2px 12px; padding: 7px 0; }
.ah-soon-skel > .ui-skel:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.ah-soon-skel > .ui-skel:nth-child(3) { grid-column: 1; grid-row: 2; }
/* BCA / Auto1 (administratori): jedan tihi redak, ne kartice */
.ah-later { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 2px 0; color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.ah-later-label { margin-right: 6px; color: var(--ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ah-later-item { color: var(--ink-2); }
.ah-later-sep { color: var(--ink-4); }
.ah-later--skel { height: 18.75px; }
.ah-later--skel .ui-skel { width: 150px; height: 11px; }
.ah-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ah-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; }
.ah-link:hover { border-color: var(--line-hover); }
.ah-link .ah-link-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-soft); color: var(--ink-2); }
.ah-link .ah-link-ico svg { width: 18px; height: 18px; }
.ah-link small { display: block; color: var(--ink-3); font-size: 12px; font-weight: 500; }

/* ===== Mobilni launcher: odjeljci + logotipi ============================== */
.m-section-title { margin: 6px 2px -4px; color: var(--ink-3); font-size: 12px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; }
.m-tile-icon.m-tile-logo { border-color: var(--line); background: var(--surface); }
/* Dva stupca (telefon): zadnja pločica neparnog odjeljka (Analitika, Korisnici) bez praznog para — preko cijelog
   reda, ikona lijevo od natpisa (niža pločica). Od 640 px launcher ima 3–4 stupca i ovo ne vrijedi. */
@media (max-width: 639px) {
  .mobile-shell .m-tile-grid > .m-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    min-height: 0;
  }
}