/* ==========================================================================
   ANALITIKA (v1.50.0) — vlasnik 30-POCETNA. src/frontend/analitika/analitika.css
   Ekran Analitika (.an-*) + grafički primitivi (.an-chart, .an-meter, .an-stack, .an-legend,
   .an-cellbar) koje koristi i Početna -> fajl se učitava globalno (index.html).
   Komponente (zaglavlje, segmentirana kontrola, tabovi, KPI + hero + delta, obavijest, čipovi,
   prazno, skeleti, tablica .data-table, logotipi) su iz dizajn sustava (ui/ui.css, 05).
   Boje SAMO tokeni dizajn sustava — bez ijednog hex/rgb literala, bez vlastitih tokena na
   :root / html.icare (iCare slajder interpolira :root; design-tokens test):
     promet/prodano = --viz-1 · kupljeno = --viz-2
     RUC = --viz-ruc (alias --ok), negativno = --danger (RUC i kupljeno nikad u istom grafu)
     prethodno razdoblje = --viz-prev · starost zalihe = --viz-ord-1..4
     mreža = --viz-grid, os/nula = --viz-axis, tekst osi = --ink-3
   Raspored po širini sadržaja (container queries), ne po prozoru (izbornik gura sadržaj).
   ========================================================================== */

.an { gap: 14px; grid-template-columns: minmax(0, 1fr); container-type: inline-size; container-name: an; }

/* --- filteri: razdoblje (ui.seg) · prilagođeno · [usporedba · marka · izvor] ------------------- */
/* Poravnanje po osnovici PRVOG retka teksta (baseline): drugi redak unutar .an-range (greška razdoblja) ne pomiče
   ostale kontrole u retku (kritika PV3-07). */
.an-filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
/* usporedba + marka/izvor = jedna skupina: kad ne stane uz razdoblje, cijela ide u drugi red (prekidač lijevo,
   izbornici desno) — nikad dva izbornika sami u drugom retku (kritike PV2-07, PV3-07) */
.an-filters-aux { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex: 1 1 auto; min-width: 0; }
.an-filters-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; }
/* 144 px: stane "Sve marke" / "Mercedes-Benz"; cijeli red stane u jedan redak na 1366 px uz izbornik u traci */
.an .an-filters select { width: 144px; min-width: 0; height: var(--control-h); }
.an-filters .ui-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
/* razmak desnom marginom, ne column-gap: skrivena greška inače doda 8 px praznine širini .an-range */
.an-range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.an-range > label { margin-right: 8px; }
/* greška = vlastiti redak ispod datuma; mjesto joj je u Prilagođenom UVIJEK rezervirano (prazno dok je razdoblje
   ispravno), pa "Neispravno razdoblje." ne pomiče prekidač ni izbornike (kritika PV3-07); contain: ne širi .an-range */
.an-range .ui-field-error { margin: 0; flex: 1 0 100%; min-height: 16px; contain: inline-size; }
.an-range .ui-field-error[hidden] { display: flex; visibility: hidden; }
.an-range label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--fs-meta); }
.an-range input { width: auto; height: var(--control-h); }
.an .an-switch { font-size: 13px; font-weight: 550; user-select: none; }   /* .switch-control (styles.css) */
.an-switch input:focus-visible + .switch-control-track { box-shadow: 0 0 0 3px var(--brand-ring); }
.an-switch.is-disabled { color: var(--ink-3); cursor: not-allowed; }
.an-switch.is-disabled .switch-control-track { opacity: 0.5; }
/* razlog onemogućenog prekidača vidljiv (ne samo u title): "podaci od 30. 9. 2025." */
/* prekidač nema tekstnu osnovicu (prvi je klizač) -> centriran u retku izbornika, ne po osnovici */
/* bilješka je drugi redak ISPOD natpisa (poravnata s tekstom: klizač 34 px + razmak 8 px, .switch-control u styles.css):
   skupina nije šira ni viša od izbornika (19 + 16 px < 36 px), pa red filtera kad stignu podaci ne prijeđe u drugi redak
   — kostur i gotov ekran imaju isti oblik (kritika POLISH D PD-V2-02: na 1280 px tabovi su skakali 60 px) */
.an-compare { display: inline-grid; justify-items: start; align-items: center; align-self: center; }
.an-switch-note { padding-left: calc(34px + 8px); color: var(--ink-3); font-size: 12px; line-height: 1.3; white-space: nowrap; }

.an-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: -4px; color: var(--ink-3); font-size: var(--fs-meta); }
/* kostur prvog učitavanja = oblik gotovog ekrana (PD-V1-05): redak razdoblja visok kao redak teksta, KPI traka = gotova
   traka s trakama kostura umjesto teksta (niže), traka tabova (onemogućena) — tabovi i kartice ne skoče kad stignu podaci */
.an-period.is-skel { min-height: 1lh; }

/* --- kostur KPI trake (skelKpiBand, analitika-charts.mjs — Analitika i Početna; PD-V2-02) ----------------------------
   Prava traka s izmišljenim brojevima: tekst je nevidljiv, a na njegovom mjestu je traka kostura iste širine (svaki
   redak teksta svoja traka — isti prijelomi kao kad stignu podaci, pa i ista visina pločica). Traka je 62 % visine
   retka, sjaj kao .ui-skel (ui.css); na navy heroju mirna, kao dosadašnji kostur heroja. */
.an-skel-text {
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: 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% 62%; background-repeat: repeat-x; background-position: 100% 50%;
  border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: an-skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes an-skel-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: -100% 50%; } }
.ui-kpi--hero .an-skel-text {
  background-image: linear-gradient(color-mix(in srgb, var(--navy-ink) 14%, var(--navy)), color-mix(in srgb, var(--navy-ink) 14%, var(--navy)));
  animation: none;
}
:is(.an-kpis, .pc-kpis).is-skel > .ui-kpi { pointer-events: none; }   /* Početna: pločice su <a> — kostur bez hovera i klika */
:is(.an-kpis, .pc-kpis).is-skel > .ui-kpi .ui-kpi-label::before { visibility: hidden; }   /* točkica legende / tona tek s podacima */
:is(.an-kpis, .pc-kpis).is-skel > .ui-kpi .ui-delta { border-color: transparent; background: var(--surface-soft); color: transparent; -webkit-text-fill-color: transparent; }
:is(.an-kpis, .pc-kpis).is-skel > .ui-kpi--hero .ui-delta { background: color-mix(in srgb, var(--navy-ink) 14%, var(--navy)); }

/* --- KPI (ui.kpi; .ui-kpis--fluid: broj prati širinu pločice) ---------------------------------- */
.an-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.an-kpis > .ui-kpis { display: contents; }                     /* ui.skelKpis() u istoj mreži */
.an-kpis:not(.an-kpis--4) > .ui-kpi--hero,
.an-kpis:not(.an-kpis--4) > .ui-kpis > .ui-kpi:first-child { grid-column: 1 / -1; }
.an-kpis > .ui-kpis > .ui-kpi:first-child { border-color: var(--navy); background: var(--navy); }
.an-kpis > .ui-kpis > .ui-kpi:first-child .ui-skel { background: color-mix(in srgb, var(--navy-ink) 14%, var(--navy)); animation: none; }
.an-hero-neg { color: var(--neg-on-navy); font-weight: 560; }   /* gubitak = jedina "crvena" na navy plohi */
@container an (min-width: 600px) {
  .an-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* jedan red od 960 px sadržaja (isti pragovi kao Početna): otvoren izbornik na 1280 px ne prelama traku (PV2-02) */
@container an (min-width: 960px) {
  .an-kpis:not(.an-kpis--4) { grid-template-columns: minmax(230px, 1.3fr) repeat(4, minmax(0, 1fr)); }
  .an-kpis:not(.an-kpis--4) > .ui-kpi--hero,
  .an-kpis:not(.an-kpis--4) > .ui-kpis > .ui-kpi:first-child { grid-column: auto; }
}
@container an (min-width: 1050px) {
  .an-kpis:not(.an-kpis--4) { grid-template-columns: minmax(280px, 1.7fr) repeat(4, minmax(0, 1fr)); }
}

/* Izbornik raširen mišem (html.nv-hover): bez zamrzavanja rasporeda zatvorenog izbornika — KPI traka i mreža kartica
   slažu se po stvarnoj širini (container queries), kao uz prikvačen izbornik. Zamrznuta KPI traka u jednom redu
   rezala je "Promet" na 1093–1100 px prozora (kritike integracije CM-R1-01; pocetna.css). */

/* --- tabovi (ui.tabs) + tijelo --------------------------------------------------------------- */
.an-data { display: grid; gap: 14px; min-width: 0; }
.an-body { display: grid; gap: 14px; min-width: 0; }

/* --- kartice + mreža --------------------------------------------------------------------------- */
.an-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container an (min-width: 900px) { .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
/* tablice prate širinu SVOJE kartice (dvije kartice u redu na 900–1050 px sadržaja su uže od mobitela u 1 stupcu) */
.an-card { container-type: inline-size; container-name: an-card; }
.an-card--wide { grid-column: 1 / -1; }
.an-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.an-card-title { min-width: 0; flex: 1 1 220px; }
.an-card-head h3 { margin: 0; color: var(--ink); font-size: var(--fs-h2); font-weight: 620; letter-spacing: -0.01em; }
.an .an-card-head p { margin: 2px 0 0; color: var(--ink-3); font-size: var(--fs-meta); }
.an-card-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.an-card-foot { display: flex; justify-content: flex-end; margin-top: -4px; }
.an .an-table-toggle { white-space: nowrap; color: var(--brand-strong); }
.an .an-foot { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.an-more { display: flex; justify-content: center; padding-top: 2px; }
.an-pad { display: grid; gap: 12px; }
.an .an-warn-line { margin: 0; color: var(--warn); font-size: 13px; font-weight: 560; }   /* jedini alarm na tabu Lager */
.an-muted { color: var(--ink-3); }
/* izvor troška u tablicama zalihe: "Brief" = Izračun vozila nema nabavnu cijenu (VUX-R3-01); prije broja, poravnanje ostaje */
.an-src-tag { margin-right: 6px; color: var(--ink-3); font-size: 11.5px; font-weight: 500; }

/* tablice (.data-table iz dizajn sustava) se na uskom ekranu skrolaju unutar kartice */
.an-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* RUC / zarada (05 §2.11 c): zelena > 0, crvena < 0 (pravi minus dolazi iz hr-HR formata) */
.an-table td.is-pos { color: var(--ok); font-weight: 560; }
.an-table td.is-neg { color: var(--danger); font-weight: 560; }
.an-table td.is-strong { font-weight: 620; }
.an-table b { color: var(--ink); font-weight: 600; }
.an-table .ui-source { vertical-align: middle; }
.an-table tr.is-click { cursor: pointer; }
.an-table tr.is-click:hover td { background: var(--surface-soft); }
.an-table tr.is-click:focus-visible td { background: var(--surface-soft); }
.an-table tr.is-click:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.an-td-bar, .an-th-bar { width: 26%; min-width: 120px; }
.an-veh { display: grid; gap: 1px; min-width: 0; }
.an-veh-title { color: var(--ink); font-weight: 560; text-decoration: none; }
a.an-veh-title:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.an-veh small { color: var(--ink-3); font-size: 12px; }
/* usporedba s prilagođenim razdobljem: spareni mjesec uz iznos ("pro. 2025."), kritika PV3-01 */
.an-prev-month { margin-right: 2px; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.an-source-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--viz-other); flex: 0 0 auto; margin: 0 5px; }
.an-barcell { display: grid; grid-template-columns: minmax(60px, 1fr) auto; align-items: center; gap: 8px; }
.an-barcell b { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
@container an (max-width: 699px) {
  .an .an-filters select { width: auto; min-width: 0; flex: 1 1 140px; }
  .an-filters-aux { flex: 1 1 100%; }
  .an-filters-sel { flex: 1 1 100%; margin-left: 0; }
  .an-td-bar, .an-th-bar { min-width: 80px; }
  .an-table--brands th:nth-child(4), .an-table--brands td:nth-child(4),
  .an-table--brands th:nth-child(7), .an-table--brands td:nth-child(7) { display: none; }
  /* uz ljepljivi stupac platforme ostaje vidljiv broj o kojem je kartica (kritika PV2-06):
     Aukcije = Platforma · Ponuđeno · Dobiveno · Uspješnost */
  .an-table--auk th:nth-child(5), .an-table--auk td:nth-child(5),
  .an-table--auk th:nth-child(6), .an-table--auk td:nth-child(6) { display: none; }
  .an-table--auk .an-barcell { grid-template-columns: auto; }       /* uspješnost: postotak bez trake */
  .an-table--auk .an-barcell .an-meter { display: none; }
}
/* Najdulje na zalihi (5 stupaca) po širini kartice, ne ekrana (kritike PV2-06, RT3-02): svih 5 dok vozilu ostaje
   ~150 px; uža od 520 px bez Ukupnog troška (Očekivani RUC = cijena − trošak), uža od 440 px (mobitel) i bez
   Cijene — Vozilo · Dana · Očekivani RUC; naziv vozila nikad ne pada na stupac od ~100 px u 4 retka. */
@container an-card (max-width: 519px) {
  .an-table--stock th:nth-child(3), .an-table--stock td:nth-child(3) { display: none; }
}
@container an-card (max-width: 439px) {
  .an-table--stock th:nth-child(4), .an-table--stock td:nth-child(4) { display: none; }
}

/* --- graf: stupci po mjesecima ------------------------------------------------------------------- */
.an-chart { display: grid; gap: 6px; }
.an-plot { position: relative; height: var(--an-plot-h, 196px); margin: 18px 0 0 48px; }
.an-gridlines { position: absolute; inset: 0; }
.an-gridline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--viz-grid); }
.an-gridline.is-zero { border-top-color: var(--viz-axis); }
.an-gridline em { position: absolute; right: calc(100% + 8px); top: -8px; color: var(--ink-3); font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-cols { position: absolute; inset: 0; display: grid; align-items: stretch; --bw: 24px; }
.an-cols.has-prev { --bw: 14px; }
.an-col { position: relative; height: 100%; outline: none; }
.an-col::before { content: ""; position: absolute; inset: 0 2px; border-radius: 6px; background: transparent; transition: background-color var(--dur-fast) ease; }
.an-col:hover::before, .an-col.is-tip-active::before, .an-col:focus-visible::before { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.an-col:focus-visible::before { box-shadow: inset 0 0 0 2px var(--brand); }
/* tanki stupac (≤ 24 px) centriran; uz usporedbu dva po 14 px s 2 px razmaka */
.an-bar { --w: min(var(--bw), 60%); position: absolute; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2); border-radius: 4px 4px 0 0; }
.an-cols.has-prev .an-bar { --w: min(var(--bw), 34%); margin-left: 1px; }
.an-cols.has-prev .an-bar--prev { margin-left: calc(-1 * var(--w) - 1px); }
.an-bar.is-neg { border-radius: 0 0 4px 4px; }
.an-bar.is-empty { display: none; }
.an-bar--promet, .an-bar--prodano { background: var(--viz-1); }
.an-bar--ruc { background: var(--viz-ruc); }
.an-bar--ruc.is-neg { background: var(--danger); }
.an-bar--kupljeno { background: var(--viz-2); }
.an-bar--prev { background: var(--viz-prev); }
.an-col.is-partial .an-bar:not(.an-bar--prev) { opacity: 0.55; }
.an-cols--group .an-col { display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.an-cols--group .an-bar { position: relative; left: auto; margin-left: 0; --w: min(14px, 34%); }
.an-bar-label { position: absolute; left: 50%; transform: translate(-50%, -3px); color: var(--ink-2); font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.an-xaxis { display: grid; margin-left: 48px; color: var(--ink-3); font-size: 11.5px; line-height: 1.25; text-align: center; }
.an-xaxis span { min-width: 0; white-space: nowrap; }
.an-xaxis small { display: block; color: var(--ink-4); font-size: 10.5px; }
.an-xaxis .is-partial { color: var(--ink-4); }
/* mjesec prije početka podataka iz Briefa: bez stupaca, šrafura = "nema podataka" (ne nula), tooltip objašnjava */
.an-xaxis .is-nodata { color: var(--ink-4); }
.an-col.is-nodata::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 2px, transparent 2px 7px); }
.an-col.is-nodata:hover::before, .an-col.is-nodata.is-tip-active::before { background-color: color-mix(in srgb, var(--ink) 4%, transparent); }
.an-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: 12.5px; }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend b { color: var(--ink); font-weight: 600; }
.an-key { width: 10px; height: 10px; border-radius: 3px; background: var(--viz-1); }
.an-key--cur, .an-key--prodano { background: var(--viz-1); }
.an-key--prev { background: var(--viz-prev); }
.an-key--kupljeno { background: var(--viz-2); }
.an-key--ruc { background: var(--viz-ruc); }

/* --- traka u ćeliji, udio (ordinalna rampa), mjerač ---------------------------------------------- */
.an-cellbar { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 6%, transparent); overflow: hidden; }
.an-cellbar-fill { display: block; height: 100%; border-radius: 4px; }
.an-cellbar-fill--promet { background: var(--viz-1); }
.an-cellbar-fill--ruc { background: var(--viz-ruc); }
.an-stack { display: flex; gap: 2px; height: 14px; border-radius: 5px; overflow: hidden; }
.an-stack-seg { display: block; min-width: 3px; height: 100%; }
.an-stack-seg.is-1, .an-key.is-1 { background: var(--viz-ord-1); }
.an-stack-seg.is-2, .an-key.is-2 { background: var(--viz-ord-2); }
.an-stack-seg.is-3, .an-key.is-3 { background: var(--viz-ord-3); }
.an-stack-seg.is-4, .an-key.is-4 { background: var(--viz-ord-4); }
.an-legend--stack { margin-top: 8px; font-size: 12px; }
.an-meter { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--brand-soft); overflow: hidden; }
.an-meter > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand); }

/* --- mobilni prikaz (.mobile-shell je JS klasa, ne media query) ------------------------------------ */
.mobile-shell .an-card { padding: 12px; }
.mobile-shell .an .data-table th, .mobile-shell .an .data-table td { padding: 7px 6px; }
/* tablice po vozilu: stupac vozila ne smije se stisnuti na ~90 px (4 retka po vozilu) — tablica se radije
   skrola unutar kartice uz ljepljivi prvi stupac (DS .data-table na mobitelu), datum kupnje u jednom retku */
.mobile-shell .an-table .an-veh { min-width: 150px; }
.mobile-shell .an-table .an-veh small { white-space: nowrap; }
/* Filteri na mobitelu (VUX-12): razdoblje u JEDNOM retku koji se lista (rub "ima još" = data-ui-scroll-edges), uz
   njega "Filtri" (usporedba, marka, izvor u sklopivom dijelu ispod) — tabovi i brojke bliže vrhu. */
.an-filters.is-mobile { display: grid; gap: 8px; }
.an-filters-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.an-seg-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.an-seg-scroll::-webkit-scrollbar { display: none; }
.an .an-seg-scroll > .ui-seg { flex-wrap: nowrap; width: max-content; max-width: none; overflow: visible; }
.an-seg-scroll .tab { flex: 0 0 auto; white-space: nowrap; }
.an-seg-scroll.ui-more-right { -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); }
.an-seg-scroll.ui-more-left { -webkit-mask-image: linear-gradient(to left, black calc(100% - 28px), transparent); mask-image: linear-gradient(to left, black calc(100% - 28px), transparent); }
.an-seg-scroll.ui-more-left.ui-more-right { -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent); }
.an .an-filters-toggle { flex: 0 0 auto; gap: 6px; min-height: 44px; padding: 0 12px; }
.an-filters-chev { transition: transform var(--dur-fast) ease; }
.an-filters-toggle[aria-expanded="true"] .an-filters-chev { transform: rotate(180deg); }
.an-filters.is-mobile > .an-filters-aux[hidden] { display: none; }
/* zaglavlje na mobitelu: naslov piše gornja traka (h1 samo čitaču ekrana) — ostaje samo redak "Brief · …", bez
   praznog pojasa ispod gornje trake */
.mobile-shell .an > .ui-page-head:has(> .ui-head-main > .ui-title-row.visually-hidden) { gap: 0; padding: 0; }
/* zbijenija KPI traka na mobitelu: manji razmaci i unutarnji rubovi, iste brojke i retci ispod njih */
.mobile-shell .an-kpis { gap: 8px; }
.mobile-shell .an-kpis > .ui-kpi { padding: 10px 12px; }
.mobile-shell .an-kpis > .ui-kpi--hero { padding: 12px 14px; }   /* broj heroja = mobilna veličina DS-a (ui.css, 28 px) */

@media (prefers-reduced-motion: reduce) {
  .an-col::before, .an-filters-chev { transition: none; }
  .an-skel-text { animation: none; }
}