/* ==========================================================================
   CENTUM PRO v4 — ZAJEDNIČKE KOMPONENTE (src/frontend/ui/ui.css)
   Jezik modula Računi (.rc) prenesen na cijelu aplikaciju, ali na GLOBALNIM
   tokenima (--ink, --brand, --navy…) — bez --rc-* varijabli, pa radi bilo
   gdje (izvan .rc korijena) i iCare tamni mod radi sam od sebe.
   Učitava se u index.html ODMAH IZA styles.css (prije racuni/*.css).
   OVDJE SU SAMO NOVE KLASE (.ui-*, .icon-btn, .btn-sm, .back, .row-more…).
   Pravila koja mijenjaju postojeće klase (.page-header, .tab, .status-pill,
   .empty-state, .data-table, .metric-strip…) NISU ovdje — ona se lijepe u
   styles.css §04 preko starih (styles-s04-v4.css), da pravila stranica
   kasnije u styles.css i dalje pobjeđuju.
   Sva pravila za elemente koji mogu biti <button> imaju :hover:not(:disabled)
   jer bazni `button:hover:not(:disabled)` ima specifičnost (0,2,1).
   ========================================================================== */

/* --- 1. Ikone (iste staze kao racuni-ui icon(), klasa ui-i) --------------- */
svg.ui-i { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.ui-i--xs { width: 12px; height: 12px; }
svg.ui-i--sm { width: 14px; height: 14px; }
svg.ui-i--lg { width: 20px; height: 20px; }

/* --- 2. Zaglavlje: putanja (samo pod-ekrani), naslov, broj, meta ----------- */
.ui-kicker {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--ink-3); font-size: var(--fs-kicker); font-weight: 550; line-height: 1.3; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden;
  /* 3 px unutarnjeg ruba (poništen marginom): fokus-prsten karike (2 px + 1 px razmaka) stane u overflow okvir */
  padding: 3px; margin: -3px;
}
.ui-kicker a { color: inherit; text-decoration: none; }
.ui-kicker a:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.ui-kicker .ui-kicker-link,
button.ui-kicker-link {
  min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: inherit; font: inherit; cursor: pointer;
}
button.ui-kicker-link:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.ui-kicker-sep { color: var(--ink-4); }
.ui-kicker > :last-child { overflow: hidden; text-overflow: ellipsis; }
/* Zadnja karika kao <button> (aukcija, vozilo): bazni gumb je inline-flex sa sredinom, pa bi se dugi naziv
   rezao na OBA kraja bez "…" — blok poravnat na početak reže samo kraj (puni naziv u title=) */
.ui-kicker > button.ui-kicker-link:last-child { display: block; min-width: 0; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zaglavlje (stavka grida .page-stack) i njegov lijevi stupac se smiju suziti (i u stupcu ≤860 px),
   pa dugi naslov dobije "…" umjesto da razvuče stranicu u širinu */
.ui-page-head { min-width: 0; }
.ui-head-main { min-width: 0; max-width: 100%; }
.ui-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-title-row h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-title-row h1.is-clamp { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ui-title-count {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-soft);
  color: var(--ink-3); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ui-page-meta { color: var(--ink-3); font-size: var(--fs-meta); white-space: nowrap; }
.page-header.has-tabs { flex-wrap: wrap; row-gap: 6px; }
.page-header.has-tabs > .ui-tabs { flex: 1 0 100%; margin: 0; box-shadow: none; }
/* Računalo: naslov i radnje u JEDNOM retku dok naslov stane — radnje ostaju desno i cijele, traka 78 px
   (05 §2.10). Kad ne stane, radnje prelaze u 2. red; nikad naslov od jednog slova ni odrezana putanja
   (putanja je na računalu jedini put natrag).
   - Ekran iz izbornika (bez putanje, kratki naslov): osnovica = cijeli naslov → lomi se tek kad naslov
     i radnje zaista ne stanu (Moja vozila ostaje u jednom retku i dok izbornik gura sadržaj).
   - Pod-ekran (putanja; dugi naslovi vozila/aukcija): naslov dobije barem 280 px, ostatak "…" (puni naziv
     u title=) — dugi naziv aukcije ostaje u jednom retku na 1280/1600 px, a detalj vozila s 3 gumba na
     uskom prozoru prebaci gumbe u 2. red.
   Zaglavlje s tabovima se i dalje lomi (tabovi = svoj red). */
@media (min-width: 861px) {
  .app-shell:not(.mobile-shell) .ui-page-head:not(.has-tabs) { flex-wrap: wrap; }
  .app-shell:not(.mobile-shell) .ui-page-head:not(.has-tabs) > .ui-head-main { flex: 1 1 auto; }
  .app-shell:not(.mobile-shell) .ui-page-head.has-kicker:not(.has-tabs) > .ui-head-main { flex-basis: 280px; }
  .app-shell:not(.mobile-shell) .ui-page-head:not(.has-tabs) > .page-actions { flex: 0 1 auto; }
}
/* Jedan put natrag po prikazu: računalo = putanja (gumb .back sakriven), mobitel = gumb .back (putanja sakrivena) */
.app-shell:not(.mobile-shell) .page-header.has-kicker .page-actions > .back { display: none; }

/* --- 3. Podcrtani tabovi (dijelovi stranice) ------------------------------ */
.ui-tabs {
  display: flex; align-items: flex-end; gap: 4px; min-width: 0;
  box-shadow: inset 0 -1px 0 var(--line); /* crta ispod; aktivna podcrta (2px) je prekriva */
  overflow-x: auto; scrollbar-width: none;
}
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tabs .ui-tab {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--tab-h); min-height: var(--tab-h); padding: 0 12px;
  border: 0; border-radius: var(--radius) var(--radius) 0 0; background: transparent; box-shadow: none;
  color: var(--ink-3); font: inherit; font-size: 13.5px; font-weight: 560; white-space: nowrap; text-decoration: none;
  cursor: pointer; transition: color var(--dur-fast) ease;
}
.ui-tabs .ui-tab::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px;
  border-radius: 2px 2px 0 0; background: transparent; transition: background-color var(--dur-fast) ease;
}
.ui-tabs .ui-tab:hover:not(:disabled) { color: var(--ink); background: transparent; border-color: transparent; }
.ui-tabs .ui-tab.is-active,
.ui-tabs .ui-tab[aria-selected="true"],
.ui-tabs .ui-tab[aria-current="page"] { color: var(--ink); font-weight: 600; }
.ui-tabs .ui-tab.is-active::after,
.ui-tabs .ui-tab[aria-selected="true"]::after,
.ui-tabs .ui-tab[aria-current="page"]::after { background: var(--brand); }
.ui-tabs .ui-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.ui-tabs .ui-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.ui-tabs .ui-tab svg.ui-tab-i { width: 16px; height: 16px; margin-right: -2px; color: var(--ink-4); transition: color var(--dur-fast) ease; }
.ui-tabs .ui-tab:hover:not(:disabled) svg.ui-tab-i { color: var(--ink-3); }
.ui-tabs .ui-tab.is-active svg.ui-tab-i,
.ui-tabs .ui-tab[aria-current="page"] svg.ui-tab-i { color: var(--brand); }
.ui-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-soft);
  color: var(--ink-3); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.ui-tab.is-active .ui-tab-count,
.ui-tab[aria-selected="true"] .ui-tab-count,
.ui-tab[aria-current="page"] .ui-tab-count { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-strong); }
.ui-tab-count.is-ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.ui-tab-count.is-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.ui-tab-count.is-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.ui-tab-short { display: none; } /* kraći natpis (ui.tabs short) — ekran ga uključi u uskoj traci (dosje.css) */
.ui-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn-fill); flex: 0 0 auto; }
.ui-tab-dot.is-danger { background: var(--danger); }
.ui-tab-dirty { margin-left: -4px; color: var(--brand-strong); font-style: italic; font-weight: 700; }
.ui-tabs--sticky { position: sticky; top: var(--app-sticky-top); z-index: var(--z-sticky); background: var(--bg); }
.ui-tabs--card { --ui-tabs-fade: var(--surface); background: var(--surface); padding: 0 8px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
/* Traka koja se lista vodoravno (mobitel, uski prozor, izbornik koji gura sadržaj): blagi rub u boji pozadine trake s
   one strane gdje ima još tabova — klase ui-more-left / ui-more-right postavlja app.js (bindUiScrollEdges) nakon
   svakog render()-a i pri promjeni širine; isti app.js drži aktivni tab u vidu. Rubovi su "ljepljive" stavke same
   trake bez utjecaja na raspored (28 px + razmak 4 px = negativna margina 32 px). */
.ui-tabs::before,
.ui-tabs::after {
  content: ""; position: sticky; z-index: 1; flex: 0 0 28px; align-self: stretch;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) ease;
}
.ui-tabs::before { left: 0; margin-right: -32px; background: linear-gradient(to right, var(--ui-tabs-fade, var(--bg)) 20%, transparent); }
.ui-tabs::after { right: 0; margin-left: -32px; background: linear-gradient(to left, var(--ui-tabs-fade, var(--bg)) 20%, transparent); }
.ui-tabs.ui-more-left::before,
.ui-tabs.ui-more-right::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ui-tabs::before, .ui-tabs::after { transition: none; }
}

/* --- 4. Filter-čipovi (popisi: status, marka, kategorija) ------------------ */
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ui-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ui-chips--scroll::-webkit-scrollbar { display: none; }
.ui-chip {
  appearance: none; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--chip-h); min-height: var(--chip-h); padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-2); box-shadow: none;
  font: inherit; font-size: 12.5px; font-weight: 550; line-height: 1; white-space: nowrap; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ui-chip:hover:not(:disabled) { border-color: var(--line-hover); background: var(--surface); color: var(--ink); }
.ui-chip.is-active,
.ui-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--navy-ink); }
.ui-chip.is-active:hover:not(:disabled),
.ui-chip[aria-pressed="true"]:hover:not(:disabled) { background: var(--navy-hover); border-color: var(--navy-hover); color: var(--navy-ink); }
.ui-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* kao tabovi — vidljivo i oko navy čipa (E.3) */
.ui-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.ui-chip-count { color: var(--ink-3); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; } /* AA: 4,97 na bijelom, 4,68 u .ui-seg */
.ui-chip.is-active .ui-chip-count,
.ui-chip[aria-pressed="true"] .ui-chip-count { color: var(--navy-ink-2); } /* 8,83 na navy */
.ui-chip.has-alert .ui-chip-count { color: var(--danger); font-weight: 650; }
.ui-chip.is-active.has-alert .ui-chip-count,
.ui-chip[aria-pressed="true"].has-alert .ui-chip-count { color: var(--neg-on-navy); }
.ui-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-dot, var(--ink-4)); flex: 0 0 auto; }
.ui-chip.is-active .ui-chip-dot { box-shadow: 0 0 0 2px var(--navy-ink); }
.ui-chip .ui-logo { --logo-size: 16px; }
.ui-chip-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; flex: 0 0 auto; }

/* --- 5. KPI kartice (JEDINA KPI komponenta; metricCard() emitira .ui-kpi) --- */
.ui-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ui-kpi {
  position: relative; display: grid; gap: 4px; align-content: start; min-width: 0;
  padding: var(--kpi-pad);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs);
  color: inherit; text-decoration: none;
}
a.ui-kpi, button.ui-kpi { cursor: pointer; text-align: left; font: inherit; min-height: 0; justify-content: stretch; align-items: stretch; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
a.ui-kpi:hover, button.ui-kpi:hover:not(:disabled) { border-color: var(--line-hover); background: var(--surface); box-shadow: var(--shadow-sm); }
.ui-kpi--span2 { grid-column: span 2; }
.ui-kpi-label { display: flex; align-items: flex-start; gap: 7px; min-width: 0; color: var(--ink-3); font-size: 12.5px; font-weight: 550; line-height: 1.3; }
/* Točkica SAMO kad nosi značenje (ok/warn/danger) ili kad je KPI legenda grafa ispod (§3.5) */
.ui-kpi:is([data-tone], [data-legend]) > .ui-kpi-label::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 0.38em; border-radius: 50%; background: var(--kpi-tone, var(--ink-4)); }
.ui-kpi[data-tone="ok"] { --kpi-tone: var(--ok); }
.ui-kpi[data-tone="warn"] { --kpi-tone: var(--warn-fill); }
.ui-kpi[data-tone="danger"] { --kpi-tone: var(--danger); }
.ui-kpi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.ui-kpi-value {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); font-size: var(--fs-kpi); font-weight: 650; line-height: 1.15; letter-spacing: -0.025em;
  font-variant-numeric: normal; /* proporcionalne znamenke za velik samostalan broj (dataviz); tablice = tabular */
}
.ui-kpi-unit { margin-left: 6px; color: var(--ink-3); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.ui-kpi-sub { color: var(--ink-2); font-size: 13.5px; font-weight: 560; line-height: 1.35; }
.ui-kpi-meta { color: var(--ink-3); font-size: 12px; line-height: 1.35; }
.ui-kpi-meta .is-alert { color: var(--danger); font-weight: 560; }
.ui-kpi-meta .is-warn { color: var(--warn); font-weight: 560; }
.ui-kpi-cta { color: var(--brand-strong); font-size: 13px; font-weight: 560; }
.ui-kpi-foot { display: block; margin-top: 6px; min-width: 0; }
.ui-kpi.is-pos .ui-kpi-value { color: var(--ok); }
.ui-kpi.is-neg .ui-kpi-value { color: var(--danger); }
/* Obojena kartica: broj koji traži radnju (Nepotpuno, Kasni, Bez cijene) — §2.11 d */
.ui-kpi.is-tint-ok { border-color: var(--ok-line); background: var(--ok-soft); }
.ui-kpi.is-tint-warn { border-color: var(--warn-line); background: var(--warn-soft); }
.ui-kpi.is-tint-danger, .ui-kpi.is-alert { border-color: var(--danger-line); background: var(--danger-soft); }
.ui-kpi.is-tint-ok .ui-kpi-value { color: var(--ok); }
.ui-kpi.is-tint-warn .ui-kpi-value { color: var(--warn); }
.ui-kpi.is-tint-danger .ui-kpi-value, .ui-kpi.is-alert .ui-kpi-value { color: var(--danger); }
.ui-kpi:is([class*="is-tint-"], .is-alert) .ui-kpi-meta, .ui-kpi:is([class*="is-tint-"], .is-alert) .ui-kpi-label { color: var(--ink-2); }
.ui-kpi--mini { padding: 12px 14px; gap: 2px; }
.ui-kpi--mini .ui-kpi-value { font-size: var(--fs-kpi-mini); }
.ui-kpi--mini .ui-kpi-label { font-size: 12px; }
/* Hero: JEDNA po ekranu (Početna, Analitika: "Zarada (RUC) <godina>") — duboka mornarska */
.ui-kpi--hero { padding: 18px 20px; gap: 6px; border-color: var(--navy-line); background: var(--navy); box-shadow: none; color: var(--navy-ink); }
.ui-kpi--hero .ui-kpi-label { color: var(--navy-ink-2); }
.ui-kpi--hero .ui-kpi-value { color: var(--navy-ink); font-size: var(--fs-kpi-hero); font-weight: 680; letter-spacing: -0.03em; line-height: 1.1; }
.ui-kpi--hero .ui-kpi-unit,
.ui-kpi--hero .ui-kpi-meta,
.ui-kpi--hero .ui-kpi-sub,
.ui-kpi--hero .ui-money-dec { color: var(--navy-ink-2); }
/* Na navy: pozitivno ostaje bijelo (navy je već naglasak), negativno --neg-on-navy */
.ui-kpi--hero .ui-money.is-pos { color: var(--navy-ink); }
.ui-kpi--hero .ui-money.is-neg { color: var(--neg-on-navy); }
.ui-kpi--hero.has-foot { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
.ui-kpi--hero.has-foot > :not(.ui-kpi-foot) { grid-column: 1; }
.ui-kpi--hero.has-foot > .ui-kpi-foot { grid-column: 2; grid-row: 1 / span 4; align-self: end; margin: 0; }
a.ui-kpi--hero:hover, button.ui-kpi--hero:hover:not(:disabled) { background: var(--navy-hover); border-color: var(--navy-hover); }
.ui-kpi.is-editable { cursor: pointer; }
.ui-kpi.is-editable .ui-kpi-edit { position: absolute; top: 12px; right: 12px; color: var(--ink-4); opacity: 0; transition: opacity var(--dur-fast) ease; }
/* zaključana pločica (:disabled, npr. otvoren drugi uređivač) ne obećava uređivanje — bez olovke i na hover */
.ui-kpi.is-editable:hover:not(:disabled) .ui-kpi-edit, .ui-kpi.is-editable:focus-visible:not(:disabled) .ui-kpi-edit { opacity: 1; }
.ui-kpi.is-editable:hover:not(:disabled) { border-color: var(--line-hover); }
.ui-kpi.is-editable:disabled { cursor: not-allowed; opacity: 0.6; }
/* Uređivanje u pločici (dosje Izračun): input + pregled + greška + Odustani/Potvrdi */
.ui-kpi.is-editing { gap: 8px; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
/* Broj se smanjuje sa ŠIRINOM pločice (dosje dok izbornik gura sadržaj) — 20-DOSJE §7.5-4 */
.ui-kpis--fluid > .ui-kpi { container-type: inline-size; }
.ui-kpis--fluid .ui-kpi-value { font-size: clamp(var(--fs-kpi-mini), 14cqi, var(--fs-kpi)); }
.ui-kpis--fluid .ui-kpi--hero .ui-kpi-value { font-size: clamp(var(--fs-kpi), 12cqi, var(--fs-kpi-hero)); } /* 30-POCETNA P-1 */
.ui-kpis--fluid .ui-kpi-row { flex-wrap: wrap; row-gap: 4px; } /* 30-POCETNA P-2: delta ide ispod broja umjesto da ga reže */

/* Delta: ▲▼ u odnosu na prethodno razdoblje (boja = smjer × je li to dobro); na navy SAMO obrub */
.ui-delta {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  height: 20px; padding: 0 6px; border-radius: var(--radius-pill); border: 1px solid transparent;
  font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap;
  background: var(--surface-soft); border-color: var(--line); color: var(--ink-3);
}
.ui-delta svg { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.ui-delta.is-good { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.ui-delta.is-bad { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.ui-kpi--hero .ui-delta { background: transparent; border-color: color-mix(in srgb, var(--navy-ink-2) 35%, transparent); color: var(--navy-ink-2); }
.ui-kpi--hero .ui-delta.is-good { color: var(--pos-on-navy); border-color: color-mix(in srgb, var(--pos-on-navy) 45%, transparent); }
.ui-kpi--hero .ui-delta.is-bad { color: var(--neg-on-navy); border-color: color-mix(in srgb, var(--neg-on-navy) 45%, transparent); }
.ui-delta-cap { color: inherit; opacity: 0.8; font-weight: 550; }

/* --- 6. Iznosi: cijeli dio naglašen, centi + valuta prigušeni ------------- */
.ui-money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-kpi-value .ui-money, .ui-money--big { font-variant-numeric: normal; }
.ui-money-int { color: inherit; }
.ui-money-dec { color: var(--ink-3); font-weight: 560; font-size: 0.62em; letter-spacing: -0.01em; margin-left: 1px; }
.ui-money.is-pos { color: var(--ok); }
.ui-money.is-neg { color: var(--danger); }
.ui-money.is-pos .ui-money-dec, .ui-money.is-neg .ui-money-dec { color: inherit; } /* puna boja (AA); prigušenje = manja veličina */

/* --- 7. Traka brojki (operativni ekrani — umjesto 4–5 velikih KPI kartica) -- */
.ui-stats {
  display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs);
}
.ui-stat { display: grid; gap: 1px; padding: 10px 18px; min-width: 120px; border-left: 1px solid var(--line); text-decoration: none; color: inherit; }
.ui-stat:first-child { border-left: 0; }
.ui-stat-label { color: var(--ink-3); font-size: 12px; font-weight: 550; white-space: nowrap; }
.ui-stat-value { color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; white-space: nowrap; }
.ui-stat.is-danger .ui-stat-value { color: var(--danger); }
.ui-stat.is-warn .ui-stat-value { color: var(--warn); }
.ui-stat.is-ok .ui-stat-value { color: var(--ok); }
a.ui-stat:hover .ui-stat-label { color: var(--brand-strong); }

/* --- 8. Obavijest (1 red; činjenica se nikad ne reže; neobavezna radnja; "Detalji") --- */
.ui-notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  padding: 8px 8px 8px 12px; min-height: 42px;
  border: 1px solid var(--n-line, var(--line)); border-radius: var(--radius-md);
  background: var(--n-bg, var(--surface-soft)); color: var(--n-ink, var(--ink-2));
  font-size: 13px; line-height: 1.4;
}
.ui-notice--info { --n-bg: var(--info-soft); --n-line: var(--brand-line); --n-ink: var(--brand-strong); }
.ui-notice--warn { --n-bg: var(--warn-soft); --n-line: var(--warn-line); --n-ink: var(--warn); }
.ui-notice--danger { --n-bg: var(--danger-soft); --n-line: var(--danger-line); --n-ink: var(--danger); }
.ui-notice--success { --n-bg: var(--ok-soft); --n-line: var(--ok-line); --n-ink: var(--ok); }
.ui-notice--neutral { --n-bg: var(--surface); --n-line: var(--line); --n-ink: var(--ink-2); }
.ui-notice-icon { display: inline-flex; color: var(--n-ink, var(--ink-3)); }
.ui-notice-text { display: flex; align-items: baseline; min-width: 0; margin: 0; white-space: nowrap; }
.ui-notice-text > strong { flex: 0 0 auto; color: inherit; font-weight: 650; }
.ui-notice-text > .ui-notice-sep { flex: 0 0 auto; color: var(--ink-4); margin: 0 6px; }
.ui-notice-text > .ui-notice-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.ui-notice.is-free .ui-notice-text { display: block; overflow: hidden; text-overflow: ellipsis; }
.ui-notice-actions { display: flex; align-items: center; gap: 6px; }
.ui-notice-actions > button, .ui-notice-actions > a.button-like { min-height: 28px; height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: var(--radius); }
.ui-notice .ui-notice-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px; height: 28px; padding: 0 8px 0 10px;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; box-shadow: none;
  color: var(--n-ink, var(--ink-2)); font-size: 12.5px; font-weight: 600;
}
/* Prelazak mišem: blaga podloga boje obavijesti i malo tamnije slovo — zelena i crvena obavijest ostaju ≥ 4,5:1 (AA);
   s 9 % podloge i istim slovom padale su na 4,2:1. Bez pravog miša (telefon) :hover ostaje na dodirnutom gumbu do
   idućeg dodira, zato tamo izgleda kao bez prelaska — i ne preuzima sivi button:hover (QA runda 4 MD4-03). */
.ui-notice .ui-notice-toggle:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--n-ink, var(--ink-2)); }
@media (hover: hover) {
  .ui-notice .ui-notice-toggle:hover:not(:disabled) { background: color-mix(in srgb, var(--n-ink, var(--ink-2)) 7%, transparent); color: color-mix(in srgb, var(--n-ink, var(--ink-2)) 85%, var(--ink)); }
}
.ui-notice .ui-notice-toggle svg { width: 14px; height: 14px; transition: transform var(--dur-fast) ease; }
.ui-notice .ui-notice-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ui-notice-details {
  grid-column: 1 / -1; margin: 8px -8px -8px -12px; padding: 12px 14px 12px 38px;
  border-top: 1px solid var(--n-line, var(--line)); background: var(--surface);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  color: var(--ink-2); font-size: 13px; white-space: normal;
}
.ui-notice-details[hidden] { display: none; }
.ui-notice-details ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ui-notice-details dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.ui-notice-details dt { color: var(--ink-3); }
.ui-notice-details dd { margin: 0; color: var(--ink); }
.ui-notice.is-wrap .ui-notice-text { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- 9. Skeleton učitavanje (umjesto "Učitavam…" u praznim kutijama) ----- */
.ui-skel {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-soft) 0%, color-mix(in srgb, var(--line) 70%, var(--surface-soft)) 50%, var(--surface-soft) 100%);
  background-size: 200% 100%;
  animation: ui-shimmer 1.3s ease-in-out infinite;
}
@keyframes ui-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.ui-skel-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ui-skel-row:last-child { border-bottom: 0; }
.ui-skel-stack { display: grid; gap: 7px; flex: 1 1 auto; min-width: 0; }
.ui-skel-card { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ui-kpi--hero .ui-skel { background: color-mix(in srgb, var(--navy-ink) 12%, var(--navy)); }
.ui-refreshing { opacity: 0.55; transition: opacity var(--dur) ease; pointer-events: none; } /* ponovno učitavanje: zadrži stari prikaz */

/* --- 10. Greške polja i potvrde (§3.18) ---------------------------------- */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.ui-field-error { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; color: var(--danger); font-size: 12px; font-weight: 550; line-height: 1.35; }
.ui-field-error[hidden] { display: none; } /* ui.fieldError(id, "", { keep: true }) — bez zalutale ikone */
.ui-field-error svg.ui-i { width: 12px; height: 12px; }

/* --- 11. Tablice u mobilnom prikazu (§3.11) --------------------------------- */
/* Zadano: vodoravni scroll s ljepljivim prvim stupcem i sjenom ruba */
.mobile-shell .data-table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, 0.14), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, 0.14), transparent) right / 10px 100% no-repeat scroll,
    var(--surface); }
/* Ljepljiva ćelija mora biti neprozirna: boja retka dolazi iz --row-bg (obojeni retci je postavljaju na <tr>),
   inače --surface; --row-edge = lijevi naglasak retka (npr. "dugo bez kontakta") uz crtu desnog ruba. */
.mobile-shell .data-table:not(.is-stack) th:first-child,
.mobile-shell .data-table:not(.is-stack) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--row-bg, var(--surface)); box-shadow: var(--row-edge, 0 0 0 transparent), inset -1px 0 0 var(--line); }
.mobile-shell .data-table:not(.is-stack) th:first-child { z-index: 3; background: var(--surface-soft); }
/* Ljepljivi stupac najviše ~42 % ekrana (lomi se u više redaka) — inače ostane ~100 px za sve ostale stupce.
   break-word, NE anywhere: anywhere smanji min. širinu stupca na jedno slovo pa ga tablica širine 100 %
   (Carina, Status sustava, Praćenje) stisne na ~35 px i tekst ide slovo po slovo. */
.mobile-shell .data-table:not(.is-stack) :is(th, td):first-child { max-width: 42vw; white-space: normal; overflow-wrap: break-word; }
/* Uključivo: .data-table.is-stack -> svaki redak je kartica u 2 reda (td[data-cell] uloge, td[data-label] oznake) */
.mobile-shell .data-table.is-stack, .mobile-shell .data-table.is-stack tbody { display: block; width: 100%; }
.mobile-shell .data-table.is-stack thead { display: none; }
.mobile-shell .data-table.is-stack tbody tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.mobile-shell .data-table.is-stack tbody tr:last-child { border-bottom: 0; }
.mobile-shell .data-table.is-stack td { display: block; padding: 0; border: 0; min-width: 0; }
.mobile-shell .data-table.is-stack td[data-cell="title"] { grid-column: 1; grid-row: 1; }
.mobile-shell .data-table.is-stack td[data-cell="amount"] { grid-column: 2; grid-row: 1; text-align: right; }
.mobile-shell .data-table.is-stack td[data-cell="meta"] { grid-column: 1; grid-row: 2; color: var(--ink-3); font-size: 12.5px; }
.mobile-shell .data-table.is-stack td[data-cell="status"] { grid-column: 2; grid-row: 2; justify-self: end; }
.mobile-shell .data-table.is-stack td:not([data-cell]) { grid-column: 1 / -1; font-size: 12.5px; }
.mobile-shell .data-table.is-stack td[data-label]:not([data-cell])::before { content: attr(data-label) " "; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
.mobile-shell .data-table.is-stack td.row-action { grid-column: 1 / -1; justify-self: end; margin-top: 4px; white-space: normal; }
.mobile-shell .data-table.is-stack td.row-action button { min-height: 40px; }
/* Isto slaganje i po ŠIRINI SPREMNIKA, ne samo u mobilnom prikazu: uključuje se spremnikom "uistack" na roditelju
   (.ui-stack-host, ili ime uz vlastito: container: <ime> uistack / inline-size) — npr. panel dosjea uz prikvačen
   izbornik. Uži od 520 px -> retci kao kartice u 2 reda (iste uloge td[data-cell] i oznake td[data-label]). */
.ui-stack-host { container: uistack / inline-size; }
@container uistack (max-width: 520px) {
  .data-table.is-stack, .data-table.is-stack tbody { display: block; width: 100%; }
  .data-table.is-stack thead { display: none; }
  .data-table.is-stack tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px;
    padding: 10px 12px; border-bottom: 1px solid var(--line);
  }
  .data-table.is-stack tbody tr:last-child { border-bottom: 0; }
  .data-table.is-stack td { display: block; padding: 0; border: 0; min-width: 0; }
  .data-table.is-stack td[data-cell="title"] { grid-column: 1; grid-row: 1; }
  .data-table.is-stack td[data-cell="amount"] { grid-column: 2; grid-row: 1; text-align: right; }
  .data-table.is-stack td[data-cell="meta"] { grid-column: 1; grid-row: 2; color: var(--ink-3); font-size: 12.5px; }
  .data-table.is-stack td[data-cell="status"] { grid-column: 2; grid-row: 2; justify-self: end; }
  .data-table.is-stack td:not([data-cell]) { grid-column: 1 / -1; font-size: 12.5px; }
  .data-table.is-stack td[data-label]:not([data-cell])::before { content: attr(data-label) " "; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
  .data-table.is-stack td.row-action { grid-column: 1 / -1; justify-self: end; margin-top: 4px; white-space: normal; }
}

/* --- 12. Gumbi: dopune bazi (bazni button/.primary/.ghost/.danger ostaju) -- */
.icon-btn,
button.icon-btn {
  width: 32px; height: 32px; min-height: 32px; padding: 0; gap: 0;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; box-shadow: none; color: var(--ink-3);
}
button.icon-btn:hover:not(:disabled), a.icon-btn:hover { border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
.icon-btn--bordered, button.icon-btn--bordered { width: var(--control-h); height: var(--control-h); min-height: var(--control-h); border-color: var(--line-strong); background: var(--surface); }
.icon-btn svg { width: 16px; height: 16px; }
/* Zauzeto (aria-busy, npr. "Osvježi" = refreshIconButton u app.js): ikona se vrti, gumb ne blijedi */
.icon-btn[aria-busy="true"] svg { animation: refresh-spin 0.9s linear infinite; }
.icon-btn[aria-busy="true"]:disabled { opacity: 1; color: var(--ink-3); cursor: progress; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
.btn-sm, button.btn-sm, .button-like.btn-sm { min-height: 30px; height: 30px; padding: 0 10px; font-size: 12.5px; }
/* "Nazad" na pod-ekranu = sporedna radnja s natpisom odredišta ("Moja vozila", "Lista vozila") */
.back,
button.back,
a.back { border-color: transparent; background: transparent; color: var(--ink-3); padding-left: 8px; padding-right: 12px; box-shadow: none; }
button.back:hover:not(:disabled),
a.back:hover { border-color: transparent; background: var(--surface-soft); color: var(--ink); }
/* Poveznica kao primarni gumb (<a class="button-like primary">) — srednji klik = novi tab (20-DOSJE §7.5-4) */
a.button-like.primary { background: var(--brand); border-color: var(--brand); color: #ffffff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
a.button-like.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #ffffff; }
/* Pritisak = 0,5 px niže. Svojstvo `translate` (NE `transform`) se zbraja s transformom gumba, pa strelice
   galerije/lightboxa/oglasa centrirane s transform: translateY(-50%) ne skaču pod mišem. Računi .rc-btn ima svoj pomak. */
button:active:not(:disabled):not(.rc-btn) { translate: 0 0.5px; }

/* --- 13. Logotipi platformi --------------------------------------------- */
.ui-logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; vertical-align: middle; }
.ui-logo svg, .ui-logo img { display: block; width: auto; height: 100%; }
.ui-logo--mark { width: var(--logo-size, 20px); height: var(--logo-size, 20px); }
.ui-logo--mark svg, .ui-logo--mark > span > svg { width: 100%; height: 100%; }
.ui-logo--mark > span { display: block; width: 100%; height: 100%; }
.ui-logo--tile { width: var(--logo-size, 28px); height: var(--logo-size, 28px); border-radius: 22%; overflow: hidden; }
.ui-logo--tile svg { width: 100%; height: 100%; }
.ui-logo--framed { padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-sizing: content-box; }
.ui-logo--framed.is-bleed { padding: 0; border: 0; border-radius: 8px; overflow: hidden; }
.ui-logo--wordmark { height: var(--logo-size, 20px); }
.ui-logo-d { display: none !important; }
html.icare .ui-logo-l { display: none !important; }
html.icare .ui-logo-d { display: block !important; }
html.icare .ui-logo img { filter: none; } /* poništi globalno prigušenje fotki u iCare */
.ui-logo-fallback { display: inline-flex; align-items: center; justify-content: center; width: var(--logo-size, 20px); height: var(--logo-size, 20px); border-radius: 6px; background: var(--surface-soft); border: 1px solid var(--line); color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
/* Identitet platforme: pruga 3px (kartice), lijevi rub (izvor u dosjeu), prsten odabrane pločice */
[data-platform="athlon"] { --pf: var(--pf-athlon); }
[data-platform="ayvens_ald"] { --pf: var(--pf-ayvens); }
[data-platform="arval"] { --pf: var(--pf-arval); }
.ui-pf-stripe { box-shadow: inset 0 3px 0 var(--pf, var(--line)); }
.ui-source { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.ui-source--edge { justify-self: start; width: fit-content; padding: 2px 8px 2px 9px; border-radius: 6px; background: var(--surface-soft); box-shadow: inset 3px 0 0 var(--pf, var(--line)); }
.ui-pf-ring.is-selected, .ui-pf-ring[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pf, var(--brand)); }

/* --- 14. Avatar i korisnički čip ------------------------------------------ */
.ui-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: hsl(var(--av-h, 215) 70% 94%); color: hsl(var(--av-h, 215) 55% 32%);
  border: 1px solid hsl(var(--av-h, 215) 55% 86%);
  font-size: 11px; font-weight: 650; letter-spacing: 0.02em; line-height: 1;
}
.ui-avatar--sm { width: 22px; height: 22px; font-size: 9.5px; }
.ui-avatar--lg { width: 36px; height: 36px; font-size: 13px; }
html.icare .ui-avatar { background: hsl(var(--av-h, 215) 30% 21%); color: hsl(var(--av-h, 215) 70% 80%); border-color: hsl(var(--av-h, 215) 25% 31%); }
.ui-user { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ui-user-text { display: grid; min-width: 0; line-height: 1.25; }
.ui-user-name { color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-user-meta { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-avatars { display: inline-flex; }
.ui-avatars .ui-avatar { box-shadow: 0 0 0 2px var(--surface); }
.ui-avatars .ui-avatar + .ui-avatar { margin-left: -6px; }

/* --- 15. Info-oblačić (objašnjenje umjesto podnaslova) --------------------- */
.ui-info,
button.ui-info {
  position: relative; display: inline-grid; place-items: center;
  width: 20px; height: 20px; min-height: 20px; padding: 0; flex: 0 0 auto;
  border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--ink-3); cursor: help; /* ≥ 3:1 (kontrola) */
}
button.ui-info:hover:not(:disabled), .ui-info:focus-visible { color: var(--brand-strong); background: var(--brand-soft); border-color: transparent; }
.ui-info svg { width: 15px; height: 15px; }
/* Skriven oblačić nema kutiju (display: none) — nevidljiva kutija uz desni rub bi raširila stranicu u širinu.
   --ui-tip-dx: pomak centriranog oblačića da ne prijeđe rub ekrana — postavlja ga ui.mjs (placeInfoTip) samo na
   telefonu i u prozoru ≤ 860 px; na širem prozoru ga nema pa je oblačić centriran kao i prije (QA MD2-02). */
.ui-info::after {
  content: attr(data-tip);
  box-sizing: border-box; /* * { box-sizing } ne seže do ::after — max-width uključuje padding i rub (mobitel: ne izlazi preko ruba) */
  position: absolute; left: 50%; top: calc(100% + 8px); z-index: var(--z-menu);
  display: none;
  width: max-content; max-width: min(320px, calc(100vw - 24px)); padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md);
  color: var(--ink-2); font-size: 12.5px; font-weight: 450; line-height: 1.45; text-align: left; white-space: normal;
  transform: translate(calc(-50% + var(--ui-tip-dx, 0px)), 0); pointer-events: none;
}
.ui-info:hover::after, .ui-info:focus-visible::after { display: block; animation: ui-tip-in var(--dur-fast) ease-out; }
.ui-info.is-tip-measure::after { display: block; visibility: hidden; animation: none; } /* placeInfoTip mjeri širinu */
@keyframes ui-tip-in { from { opacity: 0; transform: translate(calc(-50% + var(--ui-tip-dx, 0px)), -4px); } }
/* Telefon i prozor ≤ 860 px: dodirna meta 40 × 40 px oko ikone od 20 px — prazan ::before bez umetaka stoji na mjestu
   ikone (statični položaj) i −10 px margina ga širi na sve strane; apsolutan je, pa ne mijenja raspored, a
   prozirnost ostavlja izgled (i) i oblačića kakav jest (QA MD2-02). Apsolutna meta se crta iznad susjeda u toku pa
   bi im "krala" dodir: kontrole uz (i) su zato position: relative + z-index: 1 (iznad mete, ispod oblačića) — dodir
   na gumb ide gumbu, slobodni dio mete ostaje 40 px (QA MD3-02; retci stranica: styles.css "dodirna meta (i)").
   Samo u obavijesti koja u radnjama IMA (i) — ostale obavijesti ostaju kakve jesu (npr. ispod ljepljive trake
   Pregleda vozila bez z-indexa). */
@media (max-width: 860px) {
  .ui-info::before { content: ""; position: absolute; width: 40px; height: 40px; margin: -10px; }
  .ui-notice-actions:has(> .ui-info) > :is(button, a):not(.ui-info) { position: relative; z-index: 1; }
}
.mobile-shell .ui-info::before { content: ""; position: absolute; width: 40px; height: 40px; margin: -10px; }
.mobile-shell .ui-notice-actions:has(> .ui-info) > :is(button, a):not(.ui-info) { position: relative; z-index: 1; }
/* Oblačić uz naslov (zaglavlje) se otvara ispod cijelog retka naslova, poravnat s početkom naslova —
   nikad preko izbornika lijevo (kratki naslov) ni preko ruba ekrana (računalo i mobitel). */
.ui-title-row { position: relative; }
.ui-title-row .ui-info { position: static; }
.ui-title-row .ui-info::after { left: 0; transform: none; }
.ui-title-row .ui-info:hover::after, .ui-title-row .ui-info:focus-visible::after { animation-name: ui-tip-in-start; }
@keyframes ui-tip-in-start { from { opacity: 0; transform: translateY(-4px); } }
.mobile-shell .ui-title-row .ui-info::after { max-width: 100%; animation: none; }

/* --- 16. Nadnaslov sekcije (umjesto plavih VELIKIH naslova) ---------------- */
.ui-overline { margin: 0; color: var(--ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }

/* --- 17. Mobilni prikaz (.mobile-shell, JS klasa) ------------------------- */
.mobile-shell .page-header h1 { font-size: 21px; }
.mobile-shell .ui-kicker, .mobile-shell .page-header .ui-page-sub { display: none; }
/* Dugi naslov (vozilo) u 2 retka umjesto "…" u jednom (na dodir nema title= oblačića) */
.mobile-shell .ui-title-row h1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
/* Zaglavlje bez ičega vidljivog (naslov = gornja traka, bez radnji i tabova) ne zauzima mjesto —
   ostaje samo čitaču ekrana; inače ~37 px praznine između gornje trake i sadržaja. */
.mobile-shell .ui-page-head:not(.has-tabs):not(:has(> .page-actions)):has(> .ui-head-main > .ui-title-row.visually-hidden) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mobile-shell .ui-kpi { padding: 12px 14px; }
.mobile-shell .ui-kpi-row { flex-wrap: wrap; row-gap: 4px; }
.mobile-shell .ui-kpi-value { font-size: 20px; overflow: visible; }
.mobile-shell .ui-kpis--fluid .ui-kpi-value { font-size: clamp(18px, 14cqi, 20px); }
.mobile-shell .ui-kpi--hero,
.mobile-shell .ui-kpi--span2 { grid-column: 1 / -1; }
.mobile-shell .ui-kpi--hero .ui-kpi-value { font-size: 28px; }
.mobile-shell .ui-kpi--hero.has-foot { grid-template-columns: minmax(0, 1fr); }
.mobile-shell .ui-kpi--hero.has-foot > .ui-kpi-foot { grid-column: 1; grid-row: auto; margin-top: 6px; }
.mobile-shell .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mobile-shell .ui-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-shell .ui-stat { border-left: 0; border-top: 1px solid var(--line); }
.mobile-shell .ui-stat:nth-child(-n+2) { border-top: 0; }
.mobile-shell .ui-stat:nth-child(even) { border-left: 1px solid var(--line); }
.mobile-shell .ui-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mobile-shell .ui-chip { height: 36px; min-height: 36px; padding: 0 14px; font-size: 13px; }
.mobile-shell .ui-tabs .ui-tab { height: 46px; min-height: 46px; }
.mobile-shell .ui-notice { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
.mobile-shell .ui-notice-text { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mobile-shell .ui-notice-text > * { display: inline; }
.mobile-shell .ui-notice-actions { grid-column: 1 / -1; justify-content: flex-end; }

/* --- 18. Manje pokreta po želji sustava ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ui-skel { animation: none; }
  .ui-tabs .ui-tab, .ui-tabs .ui-tab::after, .ui-chip, .ui-notice .ui-notice-toggle svg, .ui-kpi.is-editable .ui-kpi-edit { transition: none; }
  .ui-info:hover::after, .ui-info:focus-visible::after,
  .ui-title-row .ui-info:hover::after, .ui-title-row .ui-info:focus-visible::after { animation: none; }
  button:active:not(:disabled):not(.rc-btn) { translate: none; }
  .icon-btn[aria-busy="true"] svg { animation: none; }
}