/* ==========================================================================
   POČETNA (v1.50.0) — vlasnik 30-POCETNA. src/frontend/pocetna/pocetna.css
   SAMO raspored i sadržaj kartica Početne (.pc-*). Komponente — KPI + hero + delta (ui.kpi,
   ui.delta), iznosi (ui.money), čipovi (ui.chips), traka brojki (ui.stats), pilule
   (ui.statusPill), nadnaslov (ui.overline), prazno (ui.empty), skeleti (ui.skel*), logotipi
   (platformLogo) — dolaze iz dizajn sustava (ui/ui.css, 05). Grafički primitivi (mjerač,
   traka starosti, legenda) su u analitika/analitika.css (učitava se globalno).
   Boje: SAMO tokeni dizajn sustava (05 §2.2) — nijedan hex/rgb literal, nijedan vlastiti token na
   :root / html.icare (test/pocetna-render.test.mjs + test/design-tokens.test.mjs).
   Raspored po ŠIRINI SADRŽAJA (container queries), ne po prozoru: izbornik (10-NAV) gura sadržaj
   (64 -> 248 px), pa ista širina prozora daje različitu širinu sadržaja.
   Pragovi (širina .pc): ≥ 960 KPI u jednom redu i kartice u 3 stupca (i 1280 px s otvorenim
   izbornikom = 980 px: otvaranje izbornika ne prebacuje raspored) · 680–959 kartice u 2 uravnotežena stupca
   (multicol, Brzi pristup preko oba stupca na dnu) · < 680 jedan stupac.
   ========================================================================== */

.pc {
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);   /* page-stack grid ne smije rasti s nowrap sadržajem */
  container-type: inline-size;
  container-name: pc;
}

/* --- zaglavlje = bijela traka 78 px (.home-hero, styles.css §37) ------------------------------- */
/* traka je visoka točno 78 px (kao zaglavlja ostalih ekrana i logo-blok izbornika): naslov + jedan redak podnaslova */
.pc-head { display: grid; align-content: center; gap: 2px; }
.pc-title { margin: 0; color: var(--ink); font-size: var(--fs-h1); font-weight: 650; letter-spacing: -0.022em; line-height: 1.15; }
.pc .pc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ink-3); font-size: var(--fs-meta); line-height: 1.35; }
.pc-sub-sep { color: var(--ink-4); }
.pc-fresh.is-warn { color: var(--warn); font-weight: 560; }

/* --- KPI traka (ui.kpi + .ui-kpis--fluid: veličina broja prati širinu pločice) ------------------- */
.pc-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-kpis > .ui-kpis { display: contents; }                   /* ui.skelKpis() = iste ćelije kao pravi KPI */
.pc-kpis > .ui-kpi--hero,
.pc-kpis > .ui-kpis > .ui-kpi:first-child { grid-column: 1 / -1; }
.pc-kpis > .ui-kpis > .ui-kpi:first-child { border-color: var(--navy); background: var(--navy); }   /* hero skelet bez bljeska */
.pc-kpis > .ui-kpis > .ui-kpi:first-child .ui-skel { background: color-mix(in srgb, var(--navy-ink) 14%, var(--navy)); animation: none; }
.pc-kpis .ui-kpi { min-height: 108px; }
.pc-spark { display: block; flex: 0 0 auto; margin-left: auto; }
@container (max-width: 299px) { .pc-spark { display: none; } }   /* kontejner = hero pločica (fluid), content-box */
.pc-spark rect { fill: color-mix(in srgb, var(--navy-ink) 42%, transparent); }
.pc-spark rect.is-partial { fill: color-mix(in srgb, var(--navy-ink) 18%, transparent); }
/* kostur trake (skelKpiBand, analitika-charts.mjs + .an-skel-text u analitika.css): ista traka kao s podacima, tekst je
   traka kostura istih prijeloma, sparkline u boji kostura heroja — visina pločica ista kad stignu podaci, i kad se reci
   ispod brojeva prelome (kritike POLISH D PD-V1-04 / PD-V2-02) */
.pc-kpis.is-skel .pc-spark rect { fill: color-mix(in srgb, var(--navy-ink) 14%, var(--navy)); }

@container pc (min-width: 600px) {
  .pc-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc-kpis[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Jedan red od 960 px sadržaja — isti prag kao 3 stupca kartica: otvaranje izbornika na 1280 px (sadržaj
   1164 -> 980) ne prelama traku u dva reda i ne gura kartice ~130 px dolje (kritike PR-08, PV2-02). */
@container pc (min-width: 960px) {
  .pc-kpis { grid-template-columns: minmax(230px, 1.3fr) repeat(4, minmax(0, 1fr)); }
  .pc-kpis[data-count="3"] { grid-template-columns: minmax(230px, 1.3fr) repeat(2, minmax(0, 1fr)); }
  .pc-kpis > .ui-kpi--hero,
  .pc-kpis > .ui-kpis > .ui-kpi:first-child { grid-column: auto; }
}
@container pc (min-width: 1050px) {
  /* šire: hero (najmanje 280 px) dobiva više mjesta za sparkline */
  .pc-kpis { grid-template-columns: minmax(280px, 1.7fr) repeat(4, minmax(0, 1fr)); }
  .pc-kpis[data-count="3"] { grid-template-columns: minmax(280px, 1.7fr) repeat(2, minmax(0, 1fr)); }
}

/* --- stupci: A (Računi, Obaveze, Oglašavanje) · B (Ponude, Kalendar, Najdulje) · strana (Aukcije, Brzi pristup)
   Uže od 960: omotači stupaca nestaju (display: contents) i kartice teku u 2 stupca koja preglednik
   sam uravnoteži (CSS multicol); Brzi pristup (široka mreža pločica) ide preko oba stupca na dno, pa se
   ostale kartice dijele podjednako (Obaveze, Oglašavanje, Kalendar | Najdulje, Aukcije) — bez rupe. */
.pc-grid { columns: 1; column-gap: 16px; }
.pc-col { display: contents; }
.pc-grid .pc-card { break-inside: avoid; margin-bottom: 16px; }
@container pc (min-width: 680px) {
  .pc-grid { columns: 2; }
  /* donja margina zadnje kartice stupca se na prijelomu stupca odbacuje -> razmak daje sam Brzi pristup (PV2-01) */
  .pc-grid .pc-card--quick { column-span: all; margin-top: 16px; }
  .pc-card--quick .pc-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 6 stavki = 2 puna reda (PV2-08) */
}
@container pc (min-width: 960px) {
  .pc-grid { columns: auto; display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(280px, 27cqi, 380px); }
  .pc-grid:not(:has(> .pc-col--side)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .pc-grid .pc-card { margin-bottom: 0; }
  .pc-grid .pc-card--quick { margin-top: 0; }
  .pc-card--quick .pc-quick { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* --- izbornik raširen mišem (html.nv-hover) — BEZ zamrzavanja rasporeda zatvorenog izbornika -----------------
   Prolazno otvaranje gura sadržaj za 184 px; Početna se tada slaže po STVARNOJ širini (container queries iznad), kao
   i s prikvačenim izbornikom. Zamrznuti raspored zatvorenog izbornika (3 stupca, KPI u jednom redu) na 1093–1276 px
   prozora rezao je iznose ("vrijednost 11…", KPI s "…") — odluka 3: preslagivanje smije, skriven sadržaj ne smije
   (kritike integracije CM-R1-01). Od 1277 px prozora (≥ 960 px sadržaja i s raširenim izbornikom) raspored ostaje
   isti (3 stupca, KPI u jednom redu) bez ikakvog posebnog pravila; koliko preslagivanja na užim prozorima je OK —
   pitanje za Matiju. */

/* --- kartica s popisom (redak preko cijele širine, hover) ------------------------------------------ */
.pc-card {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.pc-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 48px; padding: 12px 16px 8px; }
.pc-card-head h2 { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--ink); font-size: var(--fs-h2); font-weight: 620; letter-spacing: -0.01em; line-height: 1.3; }
.pc-card-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pc .pc-card-sub { margin: -2px 16px 8px; color: var(--ink-3); font-size: var(--fs-meta); }
.pc-pad { padding: 0 16px 14px; }
.pc-card .ui-overline { padding: 8px 16px 4px; }
.pc-more { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-strong); font-size: var(--fs-meta); font-weight: 560; text-decoration: none; white-space: nowrap; }
.pc-more:hover { text-decoration: underline; text-underline-offset: 2px; }
.pc-more:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-xs); }
.pc-more--list { padding: 2px 8px 0; }
.pc .pc-add { gap: 4px; padding: 0 8px; color: var(--ink-2); }

.pc-list { list-style: none; margin: 0; padding: 0; }
.pc-list > li + li > .pc-row { border-top: 1px solid var(--line); }
.pc-row {
  display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%; min-height: 52px;
  padding: 8px 16px; color: inherit; text-decoration: none; text-align: left;
}
.pc button.pc-row {                                            /* reset baznog button stila (05 §3.0) */
  justify-content: flex-start; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font: inherit; font-weight: inherit; color: inherit; min-height: 52px;
}
.pc .pc-row.is-link:hover:not(:disabled) { background: var(--surface-soft); color: inherit; text-decoration: none; }
.pc .pc-row.is-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pc-row-main { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pc-row-title { overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 560; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.pc-row-title.has-pill { display: flex; align-items: center; gap: 6px; }
.pc-row-title.has-pill > .pc-row-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-row-title.has-pill > .status-pill { flex: 0 0 auto; }
/* Najdulje na zalihi: naslov + dani u prvom retku, iznosi u drugom preko cijele širine (PV2-03) */
.pc-row-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pc-row-head > .pc-row-title { flex: 1 1 auto; min-width: 0; }
.pc-new-dot { display: none; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
/* strana (Aukcije · Završava uskoro): naslov aukcije u najviše dva retka, ne "Poland Week 40-2…" (PV2-03) */
.pc-col--side .pc-row-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.pc-row-sub { overflow: hidden; color: var(--ink-3); font-size: 12.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
/* podredak od više dijelova (ukupni trošak · cijena): uvijek JEDAN redak — redak Najdulje na zalihi najviše dva retka i na
   960–1049 px sadržaja (PV2-03). Trošak (prvi dio) se nikad ne skraćuje; razdjelnik je u dijelu koji slijedi; cijeli
   tekst je u title i čitaču ekrana; iznos se nikad ne reže usred broja ("13.49…", PR-15). Uska kartica: niže. */
.pc-row-sub.is-parts { position: relative; display: flex; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.pc-part { white-space: nowrap; }
.pc-row-sub.is-parts > .pc-part { flex: 0 0 auto; }
/* drugi dio (cijena / bez cijene) se, ako baš ne stane, skrati s "…" — nikad tiho nestane; iznos (.pc-amt, atomski
   inline-block) se ne reže usred broja nego se cijeli zamijeni s "…" ("cijena …"), cijeli tekst je u title (PD-V1-03) */
.pc-row-sub.is-parts > .pc-part + .pc-part { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-amt { display: inline-block; }
.pc-part-sep { margin: 0 5px; color: var(--ink-3); }
/* R12: dani i vremena su neutralni (alarm je jedna pilula u zaglavlju kartice) */
.pc-age, .pc-when { flex: 0 0 auto; color: var(--ink-2); font-size: 12.5px; font-weight: 560; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-when.is-danger { color: var(--danger); font-weight: 600; }   /* završava za < 3 h */
.pc-chev { display: inline-flex; flex: 0 0 auto; color: var(--ink-4); }
.pc .pc-row.is-link:hover .pc-chev { color: var(--ink-3); }
/* tri stupca od ~334 px (1280 px s otvorenim izbornikom): naslovi obaveza dobiju mjesto — "Novo" je točkica
   (tekst pilule ostaje čitaču ekrana), bez strelica (cijeli redak je i dalje link s hoverom) (PV2-03) */
@container pc (min-width: 960px) and (max-width: 1049px) {
  .pc-row-title.has-pill > .status-pill { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pc-new-dot { display: inline-block; }
  .pc-chev { display: none; }
}
/* Najdulje na zalihi u uskoj kartici (redak teksta = kartica − 100 px): "bez prodajne cijene" -> "bez cijene" od
   kartice ≤ 380 px (činjenica koja traži radnju UVIJEK se vidi); u najužoj (≤ 350 px: tri stupca na 960–1049 px
   sadržaja) ni "ukupni trošak 12.500 € · cijena 13.900 €" ne stane — iznos cijene IZA troška samo čitaču ekrana i u
   title retka. Cijena bez troška (vozilo bez nabavne cijene i u Izračunu i u Briefu) je jedini dio retka i ostaje
   vidljiva — drugi redak nikad nije prazan (kritike POLISH D PD-V2-03 / PD-R2-04). Isto pravilo u svim retcima
   kartice, ništa se ne skriva samo ponegdje (PD-V1-03 / PD-REG-02). */
.pc-card--stock { container: pcstock / inline-size; }
@container pcstock (max-width: 380px) {
  .pc-opt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@container pcstock (max-width: 350px) {
  .pc-row-sub.is-parts > .pc-part + .pc-part--price { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.pc-part--noprice { color: var(--ink-2); }   /* činjenica koja traži radnju jače od iznosa uz nju (R12), bez boje upozorenja */
.pc-thumb {
  display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 42px; overflow: hidden;
  border-radius: var(--radius); background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-4);
}
.pc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-card-foot { padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--surface-soft); }

/* Oglašavanje: jedan omjer + čipovi-prečaci na tabove */
.pc-meter-block { display: grid; gap: 10px; }
.pc-meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: 13px; }
.pc-meter-row b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.pc-meter-pct { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Aukcije */
.pc-plat-list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0 8px 8px; }
.pc-plat { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px; border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.pc-plat:hover { background: var(--surface-soft); text-decoration: none; }
.pc-plat:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pc-plat-main { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pc-plat-main b { color: var(--ink); font-size: 14px; font-weight: 620; }
/* broj aukcija i vozila se prelama IZMEĐU dijelova, nikad se ne reže ("2 aukcije · 99 voz…" u dva stupca od ~707 px
   sadržaja s raširenim izbornikom; kritike integracije CM-R1-01) */
.pc-plat-main small { color: var(--ink-3); font-size: 12.5px; white-space: normal; }
@container pc (min-width: 960px) and (max-width: 1329px) {         /* strana uža od 360 px: stanje ispod brojki */
  .pc-plat { flex-wrap: wrap; row-gap: 2px; }
  .pc-plat-main { flex-basis: calc(100% - 46px); }
  .pc-plat > .status-pill, .pc-plat > .pc-when { margin-left: 46px; }
}

/* Kalendar (agenda 7 dana; boja kategorije = postojeći .cal-cat-* --cc) */
.pc-agenda { display: grid; gap: 10px; padding: 0 8px 12px; }
.pc-day .ui-overline { padding: 0 8px 4px; }
.pc .pc-event {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 34px;
  padding: 6px 8px; border: 0; border-radius: var(--radius); background: transparent; box-shadow: none;
  color: var(--ink-2); font: inherit; font-weight: inherit; text-align: left;
}
.pc .pc-event:hover:not(:disabled) { background: var(--surface-soft); border-color: transparent; color: var(--ink); }
.pc .pc-event:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pc-event-time { flex: 0 0 64px; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pc-event-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cc, var(--ink-4)); }
.pc-event-title { overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }

/* Brzi pristup (do 6 stavki iz grupe Alati u izborniku) */
.pc-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px; padding: 0 8px 10px; }
.pc-quick-item { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 38px; padding: 4px 8px; border-radius: var(--radius); color: var(--ink-2); font-size: 13px; font-weight: 550; text-decoration: none; }
.pc-quick-item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-quick-item:hover { background: var(--surface-soft); color: var(--ink); text-decoration: none; }
.pc-quick-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pc-quick-icon { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-strong); }
.pc-quick-icon svg { width: 16px; height: 16px; }

/* --- mobilni sažetak iznad launchera (.mobile-shell; launcher = NAV) ------------------------------ */
.pc-mobile { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.pc-mstat { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: inherit; text-decoration: none; }
.pc-mstat b { color: var(--ink); font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pc-mstat span { color: var(--ink-3); font-size: 12px; }
.pc-mstat.is-hero { border-color: var(--navy); background: var(--navy); }
.pc-mstat.is-hero b { color: var(--navy-ink); }
.pc-mstat.is-hero span { color: var(--navy-ink-2); }

/* --- zaslon pri pokretanju (renderBootShell, prije /api/auth/me) ------------------------------------
   Bez vlastite trake (C-21): blok preko cijele širine; kad je rana skripta rezervirala traku (html.nv-on nv-boot),
   cijeli #app pomiče NAV-ovo pravilo margine (html.nv-on #app, nav.css). Bez rezervirane trake se crta neutralna
   kartica .auth-shell (renderBootShell({ neutral })) — nema rasporeda koji bi skočio na 64 px. */
.app-shell.boot-shell { display: block; min-height: 100vh; background: var(--bg); }
.boot-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.boot-shell .m-home-hero { display: grid; gap: 8px; }
.pc-boot-tile { cursor: default; }                                   /* skelet pločice launchera (mobilni prikaz) */

@media (prefers-reduced-motion: reduce) {
  .pc .pc-row, .pc-plat, .pc-quick-item { transition: none; }
}