/* =============================================================================
   ANIĆ CRM — SUČELJE  v2

   Smjer (DESIGN.md): dva svijeta, oštar rez.
   · SHELL — deep navy gradient (#081F3C→#0B3A6B) sa staklastim površinama.
     Referenca: Vision UI Dashboard PRO, prenesena na NAŠ brend navy.
   · RADNA PLOHA — svijetlo hladno platno, bijele kartice s mekim sjenama i
     plutajućim ikonskim čipovima. Referenca: Material Dashboard 3 PRO.

   Glass postoji SAMO na navy plohama. Tablice i forme su uvijek neprozirne.
   Brend sloj dolazi iz brand.css i ne dira se.
   ============================================================================= */

:root {
  /* ===========================================================================
     TONALNOST CRM-a — vlastita, ne preslikana s weba

     Odluka klijenta: „radi se o CRM-u, ne moramo kopirati anić pristup."
     Alat u kojem se sjedi osam sati smije biti mekši od prodajne stranice.
     Zato CRM ovdje redefinira semantičke aliase iz `brand.css` — taj file se
     i dalje NE uređuje, samo se njegov sloj nadglasava u CRM sloju.

     Smjer: platno u lavandi umjesto hladne sive, indigo umjesto IBM plave,
     statusi razrijeđeni prema pastelu. Svi parovi su IZMJERENI na kontrast,
     ne procijenjeni — mekoća se dobiva posvjetljivanjem podloge, nikad
     posvjetljivanjem teksta.
     =========================================================================== */

  /* --- Semantički aliasi: CRM nadglasava brend sloj --------------------------- */
  --fg:        #1B1D2A;   /* 16.7:1 na bijelom */
  --fg-muted:  #626880;   /* 5.5:1 na bijelom, 5.1:1 na platnu */
  --accent:    #4C56D2;   /* indigo — 5.9:1 na bijelom */
  --accent-hi: #3A43B8;
  --on-accent: #FFFFFF;
  --focus:     #4C56D2;
  --line:      #E8E9F2;

  /* --- Shell (hero i bočni izbornik) ------------------------------------------
     Navy ostaje, ali kao indigo-navy: hladna korporativna plava zamijenjena je
     tonom koji se slaže s akcentom. Bijeli tekst drži 13,4:1 na lijevom kraju
     i 7,7:1 na desnom. */
  /* Sidebar i hero dosad su dijelili jednu vrijednost. Razdvojeni su jer u tamnoj
     temi ne smiju biti isti: hero je naglasak i smije svijetliti, izbornik je
     okvir i mora se stopiti. Rub izbornika je token, ne pravilo komponente —
     tako tamna tema i dalje mijenja samo vrijednosti. */
  /* Svjetliji kraj gradienta bio je #3F49A8. Na njemu su prigušeni tonovi padali
     ispod praga (naslov grupe 2,62:1, podnaslov 3,30:1), a tekst se ne može
     posvijetliti unedogled a da ne izgubi hijerarhiju. Zato je potamnjen kraj —
     jedan potez popravlja sve tekstove odjednom. */
  --shell-grad:    linear-gradient(150deg, #232A5E 0%, #333B80 100%);
  --hero-grad:     linear-gradient(150deg, #232A5E 0%, #333B80 100%);
  --shell-line:    transparent;

  /* Vrijednosti koje su dosad stajale tvrdo u pravilima komponenti. Izvučene su
     u tokene da tamna tema ostane ČISTI SLOJ VRIJEDNOSTI — bez ijednog pravila
     komponente. Kad se komponenta jednom izmijeni, obje teme je slijede. */
  --topbar-bg:      rgba(244, 245, 251, 0.86);
  --field-bg:       var(--surface);
  --switch-off:     var(--line-strong);
  --skeleton-sjaj:  rgba(255, 255, 255, 0.7);
  --btn-sjena:      0 1px 2px rgba(8, 31, 60, 0.16);
  --app-sjena:      0 1px 2px rgba(8, 31, 60, 0.06), 0 18px 44px rgba(8, 31, 60, 0.10);
  --shell-ink:     #E6E8F8;   /* 12,9:1 na svjetlijem kraju */
  --shell-muted:   #C2C8EE;   /*  6,2:1 — bio #B9C0EA na 4,32 */
  --shell-faint:   #AAB2DE;   /*  4,9:1 — bio #8A93CE na 2,62 */
  --shell-glow:    #B4BBE4;   /*  5,4:1 — bio #9AA5F0 na 3,30 */
  --glass:         rgba(255, 255, 255, 0.07);
  --glass-strong:  rgba(255, 255, 255, 0.13);
  --glass-line:    rgba(255, 255, 255, 0.16);
  /* Stupci mikro-grafova u heroju. Bili su tvrdo upisani u `fill` atribut
     (rgba .34), pa ih tema nije mogla dohvatiti — a davali su 2,58:1 prema
     svjetlijem kraju gradienta, ispod praga 3:1 za grafički element. */
  --hero-stupac:     rgba(255, 255, 255, 0.42);   /* 3,16:1 na svjetlijem kraju */
  --hero-stupac-sad: #FFFFFF;                     /* zadnji mjesec, pun naglasak */
  --hero-stupac-alarm: #FF9E96;                   /* zadnji POJAS (dug 90+), ne mjesec — 5,1:1 */
  --glow-aktivno:    rgba(127, 180, 238, 0.55);   /* sjaj ikone aktivne stavke */
  --hero-ink:        #FFFFFF;                     /* tekst na heroju */
  /* TUBÒ segment podjele stoji NA heroju, pa mu treba svjetlija azurna od
     --dj-tubo, koja je računata za bijelu karticu. */
  --split-tubo:      #A9B6F5;
  --hero-aura:
    radial-gradient(ellipse at 78% 6%, rgba(154, 165, 240, 0.30), transparent 58%),
    radial-gradient(ellipse at 12% 94%, rgba(76, 86, 210, 0.34), transparent 62%);
  --hero-sjena:      0 1px 2px rgba(27, 29, 42, 0.10), 0 16px 40px rgba(43, 47, 115, 0.22);

  /* --- Radna ploha ------------------------------------------------------------ */
  --canvas:        #F4F5FB;
  --surface:       #FFFFFF;
  --surface-2:     #F8F9FD;
  --surface-sunk:  #EFF0F8;
  --line-soft:     #E8E9F2;
  --line-strong:   #D5D8E8;

  /* Sjena kartice: navy-tinta, nikad čista crna (brand.css princip) */
  --card-shadow:   0 1px 2px rgba(8, 31, 60, 0.05), 0 8px 24px rgba(8, 31, 60, 0.06);
  --card-shadow-hover: 0 2px 4px rgba(8, 31, 60, 0.06), 0 14px 34px rgba(8, 31, 60, 0.10);

  /* --- Statusi (tint + taman tekst + rub; svaki par izmjeren ≥4.5:1) ----------
     Tinte su podignute prema pastelu, tekst je ostao dovoljno taman. Stara
     „warn" je bila tamnosmeđa #7A4E00 — čitljiva, ali ružna. */
  --ok:   #14785A;  --ok-bg:   #E8F7F1;  --ok-line:   #C3E8D9;   /* 4.9:1 */
  --warn: #8A5A0F;  --warn-bg: #FDF4E4;  --warn-line: #EFDCB4;   /* 5.4:1 */
  --risk: #B23B38;  --risk-bg: #FCEDEC;  --risk-line: #F2CFCD;   /* 5.2:1 */
  --info: #3B45C4;  --info-bg: #EEEFFC;  --info-line: #D0D4F7;   /* 6.5:1 */
  --idle: #5C6178;  --idle-bg: #F0F1F6;  --idle-line: #DDDFE8;   /* 5.4:1 */
  /* Bijela brojka na --hot mora držati 4,5:1. Na #D14A46 je davala 4,39 —
     promašaj za dlaku, ali promašaj. */
  --hot:  #C5352D;          /* bijelo na njemu 5,36:1 */
  --na-oznaci: #FFFFFF;     /* tekst na obojenoj oznaci (brojač, klaster, ruta) */

  /* --- Grafovi (dataviz: validirano skriptom, ne procijenjeno) ----------------
     Tržišni trio prolazi kategorijalne provjere uz obavezan direktni label
     (CVD ΔE 7.6 u 6–8 pojasu). Sekvencijalno = azurni niz, jedna nijansa. */
  --viz-hr:   #4C56D2;   /* indigo  · 5.9:1 na bijelom */
  --viz-bih:  #2A9D78;   /* mint    · 3.4:1 */
  --viz-srb:  #B07A20;   /* jantar  · svijetliji ton pao je na 2.3:1, ovaj drži 3.9:1 */
  --viz-100: #EEEFFC; --viz-200: #D6D9F7; --viz-300: #A9AFEE;
  --viz-400: #7B84E4; --viz-500: #4C56D2; --viz-600: #3A43B8; --viz-700: #2A3190;
  --viz-grid: #EDEEF6;
  --viz-axis: #A9AEC2;

  /* --- Djelatnosti: pijesak (Građevina) i indigo (TUBÒ) ------------------------
     Bronca s weba prelazi u topliji pijesak da se slaže s mekšom paletom.
     Podjela ostaje operativna činjenica, ne ukras — mora se vidjeti na prvi pogled. */
  --dj-grad: #C79355;
  --dj-grad-bg:  #FAF2E6;   /* tinta pilule „Građevina" — bila tvrdo upisana */
  --dj-grad-ink: #7A5A24;
  --dj-tubo: #5B8FE0;

  /* --- Gustoća ---------------------------------------------------------------- */
  --platno:        #EDEEF7;   /* lavanda iza plohe aplikacije */
  --ploha-razmak:  12px;
  --ploha-r:       18px;

  --sidebar-w:     264px;
  --sidebar-w-min: 72px;
  --topbar-h:      60px;
  --row-h:         44px;
  --control-h:     36px;
  --content-max:   1560px;

  /* --- Tipografija sučelja (fiksna, product register) ------------------------- */
  --fs-ui-xs:    0.6875rem;  /* 11 */
  --fs-ui-sm:    0.8125rem;  /* 13 */
  --fs-ui:       0.875rem;   /* 14 */
  --fs-ui-lg:    1rem;       /* 16 */
  --fs-title:    1.125rem;   /* 18 */
  --fs-title-lg: 1.375rem;   /* 22 */
  --fs-kpi:      1.75rem;    /* 28 */
  --fs-figure:   2.25rem;    /* 36 — brojka u KPI traci; jedinica uz nju je 0.44em */
  --fs-hero:     2.75rem;    /* 44 — hero brojka, samo Danas */

  /* --- Z-ljestvica (semantička, nikad 999) ------------------------------------ */
  --z-sticky:   30;
  --z-topbar:   40;
  --z-scrim:    50;
  --z-drawer:   60;
  --z-slideover:70;
  --z-toast:    80;
  --z-tooltip:  90;
}

[data-density="compact"] { --row-h: 36px; --control-h: 32px; }

/* =============================================================================
   BAZA
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

/* UA [hidden] ima najnižu specifičnost — bez ovoga ga svaki display:flex nadjača */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: var(--ploha-razmak);
  background: var(--platno);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-ui);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* tnum SAMO gdje se brojke poravnavaju — globalno bi zarez dobio širinu znamenke */
.num, table, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; font-weight: 600; }
h1 { font-size: var(--fs-title-lg); letter-spacing: -0.015em; line-height: 1.2; }
h2 { font-size: var(--fs-title);    letter-spacing: -0.01em;  line-height: 1.25; }
h3 { font-size: var(--fs-ui-lg);    line-height: 1.3; }
h4 { font-size: var(--fs-ui);       line-height: 1.3; }
p  { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a.visually-hidden:focus {
  position: fixed; top: var(--sp-4); left: var(--sp-4); z-index: var(--z-toast);
  display: inline-flex; align-items: center;
  width: auto; height: auto; min-height: 44px;
  padding: var(--sp-3) var(--sp-6); margin: 0;
  overflow: visible; clip: auto; white-space: normal;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--r-md); font-weight: 600;
  box-shadow: var(--shadow-lg);
}

/* =============================================================================
   OKVIR APLIKACIJE
   ============================================================================= */

/* --- Aplikacija kao ploha na platnu -------------------------------------------
   Sučelje ne ide od ruba do ruba. Sjedi kao zaobljena ploha na tamnijem platnu —
   potez iz referenci koje je Jure poslao: alat izgleda kao predmet, a ne kao
   preglednik razvučen preko ekrana.

   Radius stoji na .sidebar i .main zasebno, NE na .app s `overflow:hidden` —
   overflow na pretku ubija `position: sticky`, pa bi bočni izbornik i gornja
   traka prestali stajati pri skrolanju. */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--ploha-razmak) * 2);
  border-radius: var(--ploha-r);
  box-shadow: var(--app-sjena);
}
[data-nav="collapsed"] .app { grid-template-columns: var(--sidebar-w-min) minmax(0, 1fr); }

/* --- Sidebar: navy svijet ---------------------------------------------------- */
.sidebar {
  position: sticky; top: var(--ploha-razmak); align-self: start;
  height: calc(100vh - var(--ploha-razmak) * 2);
  display: flex; flex-direction: column;
  background: var(--shell-grad);
  color: var(--shell-ink);
  overflow: hidden;
  border-radius: var(--ploha-r) 0 0 var(--ploha-r);
  border-right: 1px solid var(--shell-line);
}
/* Svjetlosni naglasak u vrhu — dubina bez slike, Vision UI potez */
.sidebar::before {
  content: "";
  position: absolute; inset: -40% -30% auto;
  height: 60%;
  background: radial-gradient(ellipse at 30% 0%, rgba(127, 180, 238, 0.16), transparent 65%);
  pointer-events: none;
}

.sidebar__brand {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--topbar-h);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--glass-line);
  color: #fff; text-decoration: none; flex: 0 0 auto;
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__znak { width: 24px; height: auto; color: #fff; flex: 0 0 auto; }
.sidebar__word { font-weight: 700; letter-spacing: -0.01em; font-size: var(--fs-ui-lg); white-space: nowrap; line-height: 1.1; }
.sidebar__word i { font-style: normal; color: var(--shell-glow); }
.sidebar__sub {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--shell-glow);
}

/* Traka skrolanja u izborniku: zadana je svijetla i na navyju strši kao strano
   tijelo. `scrollbar-color` je STANDARDNO svojstvo — tinta se nativna traka, ne
   crta se vlastita preko `::-webkit-scrollbar`. Zabrana „custom scrollbara" iz
   DESIGN.md odnosi se na to drugo: na trake koje izgube nativno ponašanje,
   veličinu hvatišta i vidljivost na tipkovnicu. Ovdje sve to ostaje.

   Uz to gornji i donji rub dobivaju kratki preljev u ništa, pa se popis ne
   prekida oštro nego se stopi s plohom. */
.sidebar__scroll {
  position: relative; flex: 1 1 auto; overflow-y: auto;
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  overscroll-behavior: contain;
}

/* Zbijanje koje vraća ~90 px: pri uobičajenoj visini prozora popis stane, pa se
   traka ni ne pojavi. Mete ostaju iznad 44 px u mobilnom mediju. */
.navgroup { padding-top: var(--sp-3); }
/* Ni ovdje uppercase s 0.14em razmakom — „PRODAJA · IZVEDBA · RESURSI" je isti
   potpis. Grupa se odvaja vlasi i tišim tonom, ne razvučenim verzalom. */
.navgroup__title {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-1);
  font-size: var(--fs-ui-xs); font-weight: 600;
  color: var(--shell-faint);
}
.navgroup__title::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--glass-line);
}
[data-nav="collapsed"] .navgroup__title { visibility: hidden; height: var(--sp-3); padding: 0; }

.navlink {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 36px;
  margin: 1px var(--sp-2);
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--shell-ink); text-decoration: none;
  font-size: var(--fs-ui); font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.navlink:hover { background: var(--glass); color: #fff; text-decoration: none; }
/* Aktivna stavka: staklo + svjetleća nit — jedina „upaljena" stavka u izborniku */
.navlink[aria-current="page"] {
  background: var(--glass-strong);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  color: #fff; font-weight: 600;
}
.navlink[aria-current="page"] .navlink__icon {
  color: var(--shell-glow); opacity: 1;
  filter: drop-shadow(0 0 6px var(--glow-aktivno));
}
.navlink__icon { width: 17px; height: 17px; flex: 0 0 auto; opacity: 0.8; }
.navlink__text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
[data-nav="collapsed"] .navlink__text { display: none; }

.navcount {
  flex: 0 0 auto;
  min-width: 20px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--glass-strong); color: #EAF3FC;
  font-size: var(--fs-ui-xs); font-weight: 600; line-height: 19px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.navcount--hot { background: var(--hot); color: #fff; }
[data-nav="collapsed"] .navcount { display: none; }

.sidebar__foot {
  position: relative; flex: 0 0 auto;
  border-top: 1px solid var(--glass-line);
  padding: var(--sp-2);
  /* Potpis je sad zadnji redak ladice, pa na mobitelu sjeda na sam rub ekrana —
     ispod njega je gesture bar. Rezervacija je bezopasna na desktopu (env = 0). */
  padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
}
.userchip {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 46px; padding: var(--sp-2);
  background: none; border: 0; border-radius: var(--r-md);
  color: var(--shell-ink); font: inherit; text-align: left; cursor: pointer;
}
.userchip:hover { background: var(--glass); }
.userchip__meta { flex: 1 1 auto; min-width: 0; }
.userchip__name { display: block; font-size: var(--fs-ui-sm); font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userchip__role { display: block; font-size: var(--fs-ui-xs); color: var(--shell-muted); }
[data-nav="collapsed"] .userchip__meta { display: none; }

/* --- MADEBY — potpis studija koji je izradio sustav ---------------------------
   Ovo je alat koji klijentov tim gleda svaki dan, pa potpis mora izdržati
   ponavljanje: jedan redak ispod korisničkog čipa, bez plohe i bez akcenta.
   Znak je izvorni VERGE simbol (viewBox 0 0 449 327) u currentColor.
   U skupljenom sidebaru ostaje samo znak.

   BOJA: --shell-muted OVDJE PADA. Sidebar je gradient, a pri dnu je već na
   svjetlijem kraju (izmjereno iz rendera: rgb(61,71,163)) — #B9C0EA na tome daje
   4.49:1, tik ispod 4.5:1 za tekst od 11 px. Zato smjesa prema --shell-ink:
   izmjereno 5.86:1, a i dalje tiša od navigacije. Tišina se ovdje radi veličinom
   i debljinom (11 px, regular naspram 13 px/600), ne ispiranjem boje.
   ---------------------------------------------------------------------------- */
.madeby {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 30px; padding: 0 var(--sp-2);
  color: var(--shell-ink); /* zaleđe za preglednike bez color-mix */
  color: color-mix(in srgb, var(--shell-ink) 70%, var(--shell-muted));
  text-decoration: none;
  font-size: var(--fs-ui-xs); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.madeby:hover, .madeby:focus-visible { color: #fff; }
.madeby__mark { height: 11px; width: auto; flex: 0 0 auto; }
.madeby__word { font-weight: 600; letter-spacing: 0.02em; }
[data-nav="collapsed"] .madeby { justify-content: center; padding: 0; }
[data-nav="collapsed"] .madeby__text { display: none; }

/* --- Prekidač djelatnosti: Građevina / TUBÒ sustavi ---------------------------
   Dvije grane tvrtke, isti jezik kao web: bronca = Građevina, azurna = TUBÒ.
   Aktivna djelatnost oboji svoju nit; „Sve" je zadana. */
.divisions { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3) 0; }
[data-nav="collapsed"] .divisions { display: none; }
.division {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 34px; padding: 0 var(--sp-3);
  background: var(--glass); border: 1px solid transparent;
  color: var(--shell-ink); font: 600 var(--fs-ui-sm)/1 var(--font-text);
  border-radius: var(--r-md); cursor: pointer; text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.division:hover:not([aria-pressed="true"]) { background: var(--glass-strong); color: #fff; }
.division[aria-pressed="true"] { background: var(--glass-strong); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line); }
.division__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--shell-muted); }
/* Boja djelatnosti nikad ne dolazi iz --shell-glow ni --accent: u tamnoj temi
   je --shell-glow jednak akcentu, pa bi TUBÒ i Građevina dobili istu točkicu. */
.division--tubo .division__dot { background: var(--dj-tubo); }
.division--grad .division__dot { background: var(--dj-grad); }
.division[aria-pressed="true"] .division__dot { box-shadow: 0 0 8px currentColor; }

/* Oznaka djelatnosti na zapisu (kartica, tablica, detalj) */
/* Oznaka djelatnosti zadržava točkicu: ondje ona NIJE višak nego jedini nositelj
   podjele pijesak/indigo, koja se prepoznaje prije nego se pročita riječ. */
.dj {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-ui-xs); font-weight: 600; white-space: nowrap;
  border: 0;
}
.dj--tubo { background: var(--info-bg); color: var(--info); }
.dj--gradevina { background: var(--dj-grad-bg); color: var(--dj-grad-ink); }
.dj__dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.dj--tubo .dj__dot { background: var(--dj-tubo); }
.dj--gradevina .dj__dot { background: var(--dj-grad); }

/* --- Prekidač tržišta -------------------------------------------------------- */
.markets { position: relative; display: flex; gap: 3px; padding: var(--sp-2) var(--sp-3) 0; }
[data-nav="collapsed"] .markets { display: none; }
.market {
  flex: 1 1 0; min-height: 30px; padding: 0 var(--sp-1);
  background: var(--glass); border: 1px solid transparent;
  color: var(--shell-ink); font: 600 var(--fs-ui-xs)/1 var(--font-text);
  border-radius: var(--r-sm); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.market[aria-pressed="true"] { background: #fff; color: var(--tubo-deep); }
.market:hover:not([aria-pressed="true"]) { background: var(--glass-strong); color: #fff; }

/* =============================================================================
   GORNJA TRAKA
   ============================================================================= */
.topbar {
  position: sticky; top: var(--ploha-razmak); z-index: var(--z-topbar);
  border-radius: 0 var(--ploha-r) 0 0;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--topbar-h);
  padding: 0 var(--sp-6);
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-ui-sm); color: var(--fg-muted); white-space: nowrap; }
.crumbs a { color: var(--fg-muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs strong { color: var(--fg); font-weight: 600; }
.crumbs svg { opacity: 0.5; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  background: none; border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--fg-muted); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.iconbtn:hover { background: var(--surface-sunk); color: var(--fg); }
.iconbtn--rel { position: relative; }
.iconbtn__dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hot); border: 1.5px solid var(--canvas);
}

.search { flex: 1 1 auto; max-width: 440px; position: relative; display: flex; align-items: center; }
.search__icon { position: absolute; left: var(--sp-3); width: 15px; height: 15px; color: var(--ink-400); pointer-events: none; }
.search__input {
  width: 100%; height: var(--control-h);
  padding: 0 64px 0 34px;
  background: var(--field-bg); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  font: var(--fs-ui)/1 var(--font-text); color: var(--fg);
  box-shadow: 0 1px 2px rgba(8, 31, 60, 0.04);
}
.search__input::placeholder { color: var(--ink-400); }
.search__input:focus { border-color: var(--accent); outline: none; }
.kbd {
  position: absolute; right: var(--sp-2);
  padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--field-bg);
  font: 600 var(--fs-ui-xs)/1.4 var(--font-mono); color: var(--fg-muted);
  pointer-events: none;
}

.topbar__spacer { flex: 1 1 auto; }

.select {
  height: var(--control-h); padding: 0 var(--sp-3);
  background: var(--field-bg); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font: var(--fs-ui-sm)/1 var(--font-text); color: var(--fg); cursor: pointer;
}

/* Boju slova zadaje sam avatar (tamnija verzija svoje tinte). Ovdje stoji samo
   zadana vrijednost za slučaj da je netko ne pošalje. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; color: var(--fg);
  font: 700 var(--fs-ui-xs)/1 var(--font-text);
}
.avatar--sm { width: 22px; height: 22px; font-size: 10px; }
.avatar--lg { width: 40px; height: 40px; font-size: var(--fs-ui-sm); }
.avatars { display: flex; }
.avatars .avatar + .avatar { margin-left: -7px; box-shadow: 0 0 0 2px var(--surface); }


/* --- Filtri u gornjoj traci: djelatnost i tržište ------------------------------
   Segmentirana kontrola, ne padajući izbornik: tri odnosno četiri stanja koja se
   često prebacuju traže jedan klik, a ne dva. */
.filtar {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
  padding: 2px; border-radius: var(--r-md);
  background: var(--surface-sunk);
}
.filtar__b {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 var(--sp-3);
  background: none; border: 0; border-radius: var(--r-sm);
  font: 600 var(--fs-ui-sm)/1 var(--font-text); color: var(--fg-muted);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.filtar__b:hover { color: var(--fg); }
.filtar__b[aria-pressed="true"] {
  background: var(--surface); color: var(--fg);
  box-shadow: 0 1px 2px rgba(27, 29, 42, 0.10);
}
.filtar__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.filtar__b--grad .filtar__dot { background: var(--dj-grad); }
.filtar__b--tubo .filtar__dot { background: var(--dj-tubo); }

@media (max-width: 1240px) { .filtar--mkt { display: none; } }
@media (max-width: 1080px) { .filtar { display: none; } }

/* =============================================================================
   STRANICA
   ============================================================================= */
.main {
  min-width: 0; display: flex; flex-direction: column;
  background: var(--canvas);
  border-radius: 0 var(--ploha-r) var(--ploha-r) 0;
}
.page { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--sp-6); flex: 1 1 auto; }
.page__head { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.page__title { flex: 1 1 auto; min-width: 0; }
.page__sub { color: var(--fg-muted); font-size: var(--fs-ui-sm); margin-top: 3px; }
/* `flex: 0 1` a ne `0 0`: s tri radnje u zaglavlju traka ima 437px prirodne širine
   i uz `0 0` ne popušta, pa na 360px probije ekran unatoč vlastitom `wrap`. */
.page__actions { display: flex; gap: var(--sp-2); flex: 0 1 auto; flex-wrap: wrap; min-width: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--control-h); padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font: 600 var(--fs-ui)/1 var(--font-text);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
/* Sjena gumba je tijesna i neutralna: obojena aura ispod pune plohe je potpis predloška. */
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--btn-sjena); }
.btn--primary:hover { background: var(--accent-hi); }
.btn--ghost { background: var(--surface); color: var(--fg); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--quiet { background: none; color: var(--fg-muted); }
.btn--quiet:hover { background: var(--surface-sunk); color: var(--fg); }
.btn--sm { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-ui-sm); }
.btn--danger { background: var(--risk); color: #fff; }

/* =============================================================================
   HERO ZONA (Danas) — navy svijet unutar svijetle stranice
   ============================================================================= */
/* Hero je PLOHA, ne traka od ruba do ruba: zaobljena, uvučena, s prostorom oko
   sebe. Puna širina bez radiusa čitala se kao odsječen blok; ovako je predmet
   na platnu, u istom jeziku kao ostale kartice. */
.hero {
  position: relative;
  margin: 0 0 var(--sp-6);
  padding: var(--sp-8);
  background: var(--hero-grad);
  color: var(--hero-ink);
  overflow: hidden;
  border-radius: 20px;
  box-shadow: var(--hero-sjena);
}
/* Dvije indigo aure koje daju heroju dubinu na svijetloj temi. Stajale su tvrdo
   upisane, pa ih tamna tema nije mogla dohvatiti — i probijale su plavo kroz
   neutralnu podlogu. Sada su token: tamna ih gasi. */
.hero::before {
  content: "";
  position: absolute; inset: -60% -20% auto;
  height: 130%;
  background: var(--hero-aura);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero__head { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.hero__title h1 { color: var(--hero-ink); font-size: var(--fs-title-lg); }
.hero__title p { color: var(--shell-muted); font-size: var(--fs-ui-sm); margin-top: 3px; }
.hero__spacer { flex: 1 1 auto; }

/* Kompozicija hero zone: JEDNA dominantna staklena ploha + polje brojki na navyju.
   Namjerno asimetrično — niz jednakih kartica ne kaže što je najvažnije. */
.hero__grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: var(--sp-6); align-items: stretch; }
@media (max-width: 1100px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } }

/* Hero brojka — jedina na ekranu; proporcionalne znamenke (dataviz pravilo) */
.hero__figure { font-family: var(--font-display); }
.hero__figure .v { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--hero-ink); }
.hero__figure .l { font-size: var(--fs-ui-sm); color: var(--shell-muted); margin-top: var(--sp-1); }

/* Staklene KPI kartice na navyju */
/* Dijagonalni gradient stakla (Vision UI potez). Krajevi su tokeni jer tamna
   tema treba jaču neprozirnost — ista vrijednost preko tamne podloge daje
   manju razliku nego preko svijetle. */
.glasscard {
  display: block;
  padding: var(--sp-6);
  background: linear-gradient(127deg, var(--glass-strong) 18%, var(--glass) 78%);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  color: inherit; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
a.glasscard:hover { background: var(--glass-strong); text-decoration: none; }
.glasscard__label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-ui-sm); color: var(--shell-muted); font-weight: 500; }
.glasscard__value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: var(--sp-2); color: #fff; }
.glasscard__value small { font-size: var(--fs-ui-sm); font-weight: 500; color: var(--shell-muted); letter-spacing: 0; }
.glasscard__foot { display: flex; align-items: flex-end; gap: var(--sp-3); margin-top: var(--sp-2); min-height: 26px; }
.glasscard__delta { font-size: var(--fs-ui-sm); font-weight: 600; }
.glasscard__delta--up { color: #7EE0B0; }
.glasscard__delta--down { color: #F2A9B4; }
.glasscard__spark { margin-left: auto; }

/* --- Polje brojki na navyju (BEZ kartica) -------------------------------------
   Pet jednakih staklenih kartica u nizu je predložak, a ne kompozicija. Staklo
   nosi JEDNA dominantna ploha; ostale brojke stoje izravno na navyju i razdvaja
   ih vlas, ne ploha. Rubovi su fiksni po poziciji u mreži — auto-fit bi na prelomu
   ostavio vodeću crtu u novom redu. */
.figgrid { display: grid; grid-template-columns: 1fr 1fr; align-content: center; }
.figgrid__i { padding: var(--sp-4) var(--sp-6); min-width: 0; color: inherit; text-decoration: none; display: block; }
.figgrid__i:nth-child(2n) { border-left: 1px solid var(--glass-line); }
.figgrid__i:nth-child(n + 3) { border-top: 1px solid var(--glass-line); }
a.figgrid__i:hover { background: rgba(255, 255, 255, 0.05); text-decoration: none; }
/* Ćelija: oznaka + delta u istom retku, velika brojka, pa graf koji ISPUNJAVA
   širinu ćelije. Prije je graf stajao stisnut uz desni rub i pola ćelije bilo je
   prazno — na 1440 px svaka je ćelija široka 350 px, a sadržaj je trošio 150. */
.figgrid__head { display: flex; align-items: center; gap: var(--sp-2); min-height: 20px; }
.figgrid__l { flex: 1 1 auto; min-width: 0; font-size: var(--fs-ui-sm); color: var(--shell-muted); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.figgrid__v { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-top: var(--sp-1); color: #fff; }
.figgrid__v small { font-size: 0.46em; font-weight: 600; color: var(--shell-muted); letter-spacing: 0; margin-left: 3px; }
.figgrid__spark { display: block; margin-top: var(--sp-3); }
.figgrid__spark svg { width: 100%; height: auto; display: block; }
.figgrid__f { display: block; margin-top: var(--sp-2); font-size: var(--fs-ui-xs); color: var(--shell-muted); }

/* Delta na tamnom: pilula od stakla, ne goli obojeni tekst */
.hdelta {
  flex: 0 0 auto;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.17);
  font-size: var(--fs-ui-xs); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: #E6E8F8;
}
.hdelta--up { color: #8FE8BC; }
.hdelta--down { color: #F7B6BE; }
@media (max-width: 560px) {
  .figgrid { grid-template-columns: 1fr; }
  .figgrid__i:nth-child(2n) { border-left: 0; }
  .figgrid__i + .figgrid__i { border-top: 1px solid var(--glass-line); }
}

/* --- Podjela djelatnosti: bronca Građevina / azurna TUBÒ -----------------------
   Potpis tvrtke, ne ukras: dvije grane u istom zapisu. Isti motiv na svakom
   ekranu gdje se vrijednost dijeli po djelatnosti (hero, statistika, financije).
   `--udio-grad` je udio Građevine u postocima; ostatak pripada TUBÒ grani. */
.split { display: flex; height: 10px; gap: 3px; border-radius: var(--r-pill); overflow: hidden; }
.split__grad { width: var(--udio-grad, 50%); background: var(--dj-grad); border-radius: var(--r-pill); }
.split__tubo { flex: 1 1 auto; background: var(--split-tubo); border-radius: var(--r-pill); }
.split--svijetlo .split__tubo { background: var(--viz-500); }
.splitkey { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); font-size: var(--fs-ui-sm); color: var(--shell-muted); font-weight: 500; }
.splitkey__i { display: inline-flex; align-items: center; gap: 6px; }
.splitkey__d { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.splitkey__d--grad { background: var(--dj-grad); }
.splitkey__d--tubo { background: var(--split-tubo); }
.split--svijetlo ~ .splitkey { color: var(--fg-muted); }
.split--svijetlo ~ .splitkey .splitkey__d--tubo { background: var(--viz-500); }

/* =============================================================================
   KARTICE — svijetli svijet (Material)
   ============================================================================= */
/* Hijerarhija ploha kroz radius, umjesto 14px na svemu: podatkovna kartica je
   mirnija (12), traka brojki i ploča pažnje srednje (14), staklo u heroju i
   ploha aplikacije najzaobljeniji (16–18). Kad je sve isto zaobljeno, ekran
   nema prvi i drugi plan. */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}
.card__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) 0; }
.card__title { flex: 1 1 auto; font-size: var(--fs-ui-lg); font-weight: 600; }
/* `display:block` je obavezan: ekrani ga pisu i kao <span> UNUTAR naslova
   (`<h2 class="card__title">Transkript <span class="card__sub">11 izmjena</span></h2>`),
   pa se bez toga podnaslov slijeva u naslov — „Transkript11 izmjena". Ista klasa
   greske kao kod .ent__sub u tablicama. */
.card__sub { display: block; font-size: var(--fs-ui-sm); color: var(--fg-muted); margin-top: 1px; font-weight: 400; }
.card__body { padding: var(--sp-4); }
.card__body--flush { padding: 0; }
.card__foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line-soft); font-size: var(--fs-ui-sm); color: var(--fg-muted); }

/* `min(Xpx, 100%)` je nužan: goli `minmax(340px, 1fr)` drži stupac na 340px i kad
   spremnik ima 313px, pa mreža probije ekran. S `min()` se stupac na uskom ekranu
   svede na širinu spremnika. */
.grid { display: grid; gap: var(--sp-4); }
.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
/* `align-items: start`: bez toga se niža kartica rasteže na visinu više i pri dnu
   ostane prazna ploha. Ragged dno je pošteniji prikaz od rupe. */
.grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.grid--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
@media (max-width: 1100px) { .grid--7-5, .grid--8-4 { grid-template-columns: minmax(0, 1fr); } }

/* --- KPI kartica s plutajućim čipom (Material potpis) ------------------------- */
.kpi {
  display: block; position: relative;
  margin-top: var(--sp-3);              /* prostor za izdignuti čip */
  padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px;
  box-shadow: var(--card-shadow);
  color: inherit; text-decoration: none;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a.kpi:hover { box-shadow: var(--card-shadow-hover); border-color: var(--line-strong); text-decoration: none; }
/* Plutajući ikonski čip je Material potpis iz klijentove reference i ostaje.
   Gradient i obojena aura ispod njega su ono po čemu se prepoznaje predložak —
   njih nema: tinta statusa, ikona u boji statusa, 1px rub. Ploha ostaje mirna. */
.kpi__chip {
  position: absolute; top: -13px; left: var(--sp-4);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--info-bg); color: var(--info);
  border: 1px solid var(--info-line);
}
.kpi__chip--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.kpi__chip--warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.kpi__chip--risk { background: var(--risk-bg); color: var(--risk); border-color: var(--risk-line); }
.kpi__chip--deep { background: var(--surface-sunk); color: var(--tubo-deep); border-color: var(--line-strong); }
.kpi__label { padding-left: 50px; min-height: 28px; display: flex; align-items: center; font-size: var(--fs-ui-sm); color: var(--fg-muted); font-weight: 500; }
.kpi__value { font-family: var(--font-display); font-size: var(--fs-kpi); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: var(--sp-2); }
.kpi__value small { font-size: var(--fs-ui-sm); font-weight: 500; color: var(--fg-muted); letter-spacing: 0; }
.kpi__foot { display: flex; align-items: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); min-height: 24px; flex-wrap: wrap; }
/* Bez `nowrap`: u podnožju ne stoji samo „+12 %" nego i objašnjenje („rokovi su još
   pred nama"), koje na 360px razvuče karticu na 229px i otvori vodoravni skrol.
   Iznosi se ionako ne lome — hr-HR ispred € stavlja tvrdi razmak. */
.kpi__delta { font-size: var(--fs-ui-sm); font-weight: 600; }
.kpi__delta--up { color: var(--ok); }
.kpi__delta--down { color: var(--risk); }
.kpi__delta--flat { color: var(--fg-muted); }
.kpi__vs { font-size: var(--fs-ui-xs); color: var(--fg-muted); }
.kpi__spark { margin-left: auto; }

/* --- KPI TRAKA: jedna ploha s pregradama, ne N istih kartica -------------------
   Iz referenci: brojke koje pripadaju istoj priči stoje u jednoj plohi, razdvojene
   vlasima. Red od četiri odvojene kartice čita se kao predložak; traka se čita kao
   jedan podatak s četiri lica. Koristi se kad brojke NEMAJU vlastitu hijerarhiju.
   Kad jedna brojka vodi ekran, ostaje `.kpi` s plutajućim čipom. */
.kpistrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.kpistrip__i {
  padding: var(--sp-4);
  border-left: 1px solid var(--line-soft);
  margin-left: -1px;                 /* prva u retku gubi vodeću vlas */
  color: inherit; text-decoration: none;
  min-width: 0;
}
a.kpistrip__i:hover { background: var(--surface-2); text-decoration: none; }
.kpistrip__head { display: flex; align-items: center; gap: var(--sp-2); min-height: 22px; }
.kpistrip__l { font-size: var(--fs-ui-sm); color: var(--fg-muted); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpistrip__v {
  display: block; margin-top: var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-figure);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
}
/* Mjerna jedinica je manja i tiša — brojka nosi, jedinica objašnjava. */
/* Razmak je 0,4em vlastite veličine, ne 2px: na 2px se „10" i „AI poziva"
   slijepe u „10AI poziva", a ispred „%" hrvatska tipografija ionako traži
   razmak („27 %", ne „27%"). */
.kpistrip__v small, .kpi__value small, .figgrid__v small {
  font-size: 0.44em; font-weight: 600; color: var(--fg-muted);
  letter-spacing: 0; margin-left: 0.4em;
}
.kpistrip__f { display: block; margin-top: var(--sp-1); font-size: var(--fs-ui-xs); color: var(--fg-muted); }

/* Delta kao pilula uz oznaku, ne kao rečenica ispod brojke. */
.delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: var(--r-pill);
  font-size: var(--fs-ui-xs); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--idle-bg); color: var(--idle); border: 1px solid var(--idle-line);
  margin-left: auto;
}
.delta--up   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.delta--down { background: var(--risk-bg); color: var(--risk); border-color: var(--risk-line); }

/* --- Statusne oznake ---------------------------------------------------------- */
/* Statusna oznaka NIJE gumb i ne smije se tako čitati.
   Prije je nosila tri signala za istu stvar: tintu, rub i točkicu, uz obojeni
   tekst — a to je točno anatomija bootstrap značke koju svaki generirani UI ima.
   Ostaje jedan signal: mirna tinta s tekstom u istoj obitelji boje.

   Točkica otpada jer boja ovdje nikad ne stoji sama — uz nju uvijek ide riječ
   („Servis kasni"), pa je pravilo o statusnoj boji zadovoljeno tekstom.
   Kontrast teksta na tinti izmjeren je i nepromijenjen (4,9–6,5:1). */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 0;
  font-size: var(--fs-ui-xs); font-weight: 600; white-space: nowrap;
  background: var(--idle-bg); color: var(--idle);
}
.pill--ok   { background: var(--ok-bg);   color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--risk { background: var(--risk-bg); color: var(--risk); }
.pill--info { background: var(--info-bg); color: var(--info); }
.pill__dot { display: none; }

.tag {
  display: inline-block; padding: 1px 7px;
  border-radius: var(--r-sm); background: var(--surface-sunk);
  font-size: var(--fs-ui-xs); color: var(--fg-muted); font-weight: 500;
}

/* Tržišna točka: boja + SLOVO, nikad boja sama (dataviz pravilo) */
.mkt { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-ui-xs); font-weight: 600; color: var(--fg-muted); }
.mkt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.mkt--hr::before  { background: var(--viz-hr); }
.mkt--bih::before { background: var(--viz-bih); }
.mkt--srb::before { background: var(--viz-srb); }

/* --- Ploča „Zahtijeva pažnju" — jedina crvena ploha u sučelju ------------------ */
.attention {
  border: 1px solid var(--risk-line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
  margin-bottom: var(--sp-6);
  overflow: hidden;
}
/* Ploha statusa, ne gradient: gradient prema bijelom ostavlja sredinu bez razloga za boju. */
.attention__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-weight: 600; color: var(--risk); background: var(--risk-bg); }
.attention__count { margin-left: auto; font-size: var(--fs-ui-sm); font-weight: 700; color: var(--risk); font-variant-numeric: tabular-nums; }
/* Separatori rubovima, ne gap+background trikom: auto-fit s nepunim zadnjim
   redom inače ostavi golu obojenu plohu na praznim trakama. Vidjelo se u renderu. */
.attention__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--surface);
  border-top: 1px solid var(--risk-line);
  border-radius: 0 0 14px 14px; overflow: hidden;
}
.alert {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); color: inherit; text-decoration: none;
  border-top: 1px solid var(--risk-line);
  border-left: 1px solid var(--risk-line);
  margin: -1px 0 0 -1px;
}
.alert:hover { background: var(--risk-bg); text-decoration: none; }
.alert__n { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--risk); line-height: 1; min-width: 30px; }
.alert__t { font-size: var(--fs-ui-sm); color: var(--fg-muted); line-height: 1.35; }

/* =============================================================================
   TABLICE
   ============================================================================= */
.tablewrap { overflow-x: auto; border-radius: 0 0 12px 12px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui-sm); }
/* Zaglavlje tablice NIJE uppercase s razmakom slova. To je najprepoznatljiviji
   tipografski potpis generiranog sučelja: mikro-oznaka od 11px, 0.05em, velikim
   slovima. Ovdje je obična rečenična tipografija, tamnija i teža — čita se brže,
   a tablica prestaje izgledati kao predložak. */
.table th {
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-ui-sm); font-weight: 600; text-align: left;
  color: var(--fg); white-space: nowrap;
}
.table td { height: var(--row-h); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.table tbody tr:hover td { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num, .table .r { text-align: right; }
.table a { font-weight: 500; }
.table .ent { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.table .ent__t { min-width: 0; }
/* `display:block` je obavezan: oba su <span> unutar flex stavke, pa se bez njega
   naziv i podnaslov slijevaju u isti redak („Telefon38 % konverzija"). */
.table .ent__name { display: block; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .ent__sub { display: block; font-size: var(--fs-ui-xs); color: var(--fg-muted); }

/* --- Redci (aktivnost, zadaci) ------------------------------------------------ */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.row:last-child { border-bottom: 0; }
a.row:hover { background: var(--surface-2); text-decoration: none; }
.row__main { flex: 1 1 auto; min-width: 0; }
.row__title { display: block; font-size: var(--fs-ui); font-weight: 500; }
.row__meta { display: block; font-size: var(--fs-ui-sm); color: var(--fg-muted); margin-top: 1px; }
.row__side { flex: 0 0 auto; text-align: right; font-size: var(--fs-ui-sm); color: var(--fg-muted); white-space: nowrap; }

/* =============================================================================
   KANBAN
   ============================================================================= */
.board { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-4); align-items: flex-start; }
.col { flex: 0 0 292px; max-width: 292px; }
.col__head { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.col__name { font-size: var(--fs-ui-sm); font-weight: 700; }
.col__n { font-size: var(--fs-ui-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.col__sum { margin-left: auto; font-size: var(--fs-ui-xs); font-weight: 600; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.col__list { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 60px; }
.kcard {
  display: block; padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(8, 31, 60, 0.05);
  color: inherit; text-decoration: none;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.kcard:hover { border-color: var(--line-strong); box-shadow: var(--card-shadow); text-decoration: none; }
.kcard__top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.kcard__id { font-family: var(--font-mono); font-size: var(--fs-ui-xs); color: var(--fg-muted); }
.kcard__title { font-size: var(--fs-ui); font-weight: 600; line-height: 1.35; }
.kcard__meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.kcard__val { font-family: var(--font-mono); font-size: var(--fs-ui-sm); font-weight: 600; margin-left: auto; }

/* =============================================================================
   GRAFOVI — ručni SVG (dataviz specifikacije)
   ============================================================================= */
.viz { position: relative; }
.viz svg { width: 100%; height: auto; display: block; }
.viz text { font-family: var(--font-text); font-size: 11px; fill: var(--fg-muted); }
.viz .axis text { fill: var(--viz-axis); }
.viz .grid line { stroke: var(--viz-grid); stroke-width: 1; stroke-dasharray: 3 5; }
.viz .lbl { font-weight: 600; fill: var(--fg); }

.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-ui-xs); color: var(--fg-muted); font-weight: 500; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; }

/* Tooltip grafa (JS pozicionira) */
.viztip {
  position: absolute; z-index: var(--z-tooltip);
  pointer-events: none;
  padding: var(--sp-2) var(--sp-3);
  background: var(--tubo-deep); color: #fff;
  border-radius: var(--r-md);
  font-size: var(--fs-ui-xs); line-height: 1.5;
  box-shadow: var(--shadow-md);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.viztip[data-on="true"] { opacity: 1; }
.viztip .t-v { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Vodoravni stupci (HTML, bez SVG-a) */
.bars { display: flex; flex-direction: column; gap: var(--sp-3); }
.bar { display: grid; grid-template-columns: 130px minmax(0, 1fr) 88px; align-items: center; gap: var(--sp-3); }
.bar__label { font-size: var(--fs-ui-sm); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__track { display: block; height: 22px; background: var(--viz-100); border-radius: var(--r-pill); overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--viz-500); border-radius: var(--r-pill); }
.bar__val { text-align: right; font-size: var(--fs-ui-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Meter (zaliha, napredak) — trag je svjetliji korak istog niza */
.meter { height: 10px; border-radius: var(--r-pill); background: var(--viz-100); overflow: hidden; }
.meter__fill { height: 100%; border-radius: var(--r-pill); background: var(--viz-500); }
.meter__fill--warn { background: #E0A93F; }
.meter__fill--risk { background: var(--risk); }

/* =============================================================================
   FORME
   ============================================================================= */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field__label { font-size: var(--fs-ui-sm); font-weight: 600; color: var(--fg); }
.field__hint { font-size: var(--fs-ui-xs); color: var(--fg-muted); }
.input, .textarea, select.input {
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-3);
  background: var(--field-bg); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font: var(--fs-ui)/1.4 var(--font-text); color: var(--fg);
  width: 100%;
}
.input:focus, .textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(15, 98, 196, 0.12); }
.textarea { min-height: 90px; resize: vertical; }
.field--err .input { border-color: var(--risk); }
.field__err { font-size: var(--fs-ui-xs); color: var(--risk); font-weight: 600; }

.switch { position: relative; display: inline-flex; width: 36px; height: 20px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--switch-off); transition: background-color var(--dur-fast) var(--ease-out); }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--dur-fast) var(--ease-out); box-shadow: 0 1px 2px rgba(8,31,60,0.2); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Filteri iznad liste */
.toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.toolbar .search { max-width: 320px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 var(--sp-3);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font: 500 var(--fs-ui-sm)/1 var(--font-text); color: var(--fg-muted); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--info-bg); border-color: var(--info-line); color: var(--info); font-weight: 600; }
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* Prikaz: kanban / tablica / kalendar */
.viewswitch { display: inline-flex; background: var(--surface-sunk); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.viewswitch button {
  height: 30px; padding: 0 var(--sp-3);
  background: none; border: 0; border-radius: var(--r-sm);
  font: 600 var(--fs-ui-sm)/1 var(--font-text); color: var(--fg-muted); cursor: pointer;
}
.viewswitch button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(8, 31, 60, 0.08); }

/* =============================================================================
   SLIDE-OVER I MODAL
   ============================================================================= */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(8, 31, 60, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  border: 0; padding: 0; width: 100%;
}
.overlay[data-on="true"] { opacity: 1; pointer-events: auto; }

.slideover {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-slideover);
  width: min(480px, 94vw);
  background: var(--surface);
  box-shadow: -12px 0 40px rgba(8, 31, 60, 0.18);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
}
.slideover[data-on="true"] { transform: none; }
.slideover__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.slideover__body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4); }
.slideover__foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line-soft); display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* Toast */
.toast {
  position: fixed; bottom: var(--sp-6); left: 50%; transform: translate(-50%, 12px);
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--tubo-deep); color: #fff;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  font-size: var(--fs-ui-sm); font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast[data-on="true"] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--shell-glow); }

/* =============================================================================
   STANJA
   ============================================================================= */
.empty { padding: var(--sp-12) var(--sp-6); text-align: center; }
.empty__icon { margin: 0 auto var(--sp-4); color: var(--ink-300); }
.empty__title { font-size: var(--fs-ui-lg); font-weight: 600; }
.empty__text { color: var(--fg-muted); font-size: var(--fs-ui-sm); margin: var(--sp-2) auto var(--sp-4); max-width: 44ch; }

.skeleton { position: relative; overflow: hidden; background: var(--surface-sunk); border-radius: var(--r-sm); color: transparent !important; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-sjaj), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Vremenska crta */
.timeline { display: flex; flex-direction: column; }
.tl { display: flex; gap: var(--sp-3); position: relative; padding-bottom: var(--sp-4); }
.tl::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 1px; background: var(--line-soft); }
.tl:last-child::before { display: none; }
.tl__icon {
  width: 29px; height: 29px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--info-bg); color: var(--info);
  border: 1px solid var(--info-line);
}
.tl__main { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.tl__title { font-size: var(--fs-ui-sm); font-weight: 600; }
.tl__meta { font-size: var(--fs-ui-xs); color: var(--fg-muted); }

/* Tabovi detalja */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line-soft); overflow-x: auto; margin-bottom: var(--sp-4); }
.tab-btn {
  height: 38px; padding: 0 var(--sp-3); flex: 0 0 auto;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font: 600 var(--fs-ui-sm)/1 var(--font-text); color: var(--fg-muted); cursor: pointer;
  white-space: nowrap;
}
.tab-btn[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn:hover { color: var(--fg); }

/* =============================================================================
   MOBITEL — ladica + donja traka; mete 48px
   ============================================================================= */
.burger, .tabbar, .scrim { display: none; }

@media (max-width: 900px) {
  /* Na mobitelu ploha ide od ruba do ruba — okvir oko okvira ondje samo krade
     prostor koji ekranu ionako nedostaje. */
  :root { --ploha-razmak: 0px; --ploha-r: 0px; }
  body { padding: 0; background: var(--canvas); }
  .app { grid-template-columns: minmax(0, 1fr); box-shadow: none; min-height: 100vh; }
  .main { border-radius: 0; }
  .topbar { border-radius: 0; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer);
    width: min(300px, 84vw);
    height: 100vh; border-radius: 0;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  [data-drawer="open"] .sidebar { transform: none; }
  .scrim {
    display: block; position: fixed; inset: 0; z-index: var(--z-scrim);
    background: rgba(8, 31, 60, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
    border: 0; padding: 0;
  }
  [data-drawer="open"] .scrim { opacity: 1; pointer-events: auto; }

  .burger { display: inline-flex; }
  .topbar { padding: 0 var(--sp-4); gap: var(--sp-2); }
  .crumbs { display: none; }
  .search { max-width: none; }
  .search__input { padding-right: var(--sp-3); }
  .kbd, .topbar .select { display: none; }
  .iconbtn--opcija { display: none; }

  .page { padding: var(--sp-4) var(--sp-4) calc(68px + var(--sp-6)); }
  .hero { margin: 0 0 var(--sp-4); padding: var(--sp-4); border-radius: 16px; }
  .grid--kpi { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

  /* Mete ≥48px vrijede za SVAKI upravljački element, ne samo za gumbe. Polja i
     padajući izbornici visjeli su na 36px jer `--control-h` nije bio podignut —
     vidjelo se tek mjerenjem u pregledniku na 360px. */
  :root { --fs-hero: 2.25rem; --control-h: 48px; }

  .navlink { min-height: 48px; }
  .iconbtn { width: 48px; height: 48px; }
  .btn, .btn--sm { height: 48px; }
  .chip, .tab-btn, .viewswitch button { height: 48px; }
  .division { min-height: 48px; }
  .market { min-height: 44px; }
  .input, .textarea, select.input, .select, .search__input { min-height: 48px; }
  .textarea { min-height: 96px; }
  /* Prekidač zadržava vizualnu veličinu; hvatište se širi nevidljivo. */
  .switch input { inset: -14px -6px; }

  /* Sigurnosna mreža: stranice definiraju i vlastite kontrole (polje za količinu u
     konfiguratoru, filter u tablici). Bez ovoga svaka takva klasa mora pamtiti
     mobilnu visinu, a jedna se uvijek zaboravi. Prekidač i checkbox su izuzeti
     jer imaju vlastito hvatište. */
  input:not([type="checkbox"]):not([type="radio"]):not(.switch input),
  select, textarea, button { min-height: 44px; }
  /* Checkbox u gustoj tablici ne može biti 48px bez rušenja retka; 24px je
     minimum po WCAG 2.2, a ondje gdje stoji unutar <label> meta je cijeli redak.
     `!important` jer stranice checkboxu zadaju veličinu inline stilom — kao kod
     `[hidden]`, ovdje je riječ o pragu pristupačnosti, ne o stilskom izboru. */
  input[type="checkbox"], input[type="radio"] { width: 24px !important; height: 24px !important; }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-topbar);
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface); border-top: 1px solid var(--line-soft);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(8, 31, 60, 0.06);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; padding: var(--sp-1);
    color: var(--fg-muted); text-decoration: none;
    font-size: 10px; font-weight: 600;
    border: 0; background: none; cursor: pointer; font-family: var(--font-text);
  }
  .tab[aria-current="page"] { color: var(--accent); }
  .tab:hover { text-decoration: none; }
  .tab__wrap { position: relative; }
  .tab__n {
    position: absolute; top: -4px; right: -9px;
    min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: var(--r-pill); background: var(--hot); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  }

  /* Tablica → kartice; vodoravni skrol na mobitelu guta stupce */
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: var(--sp-3) var(--sp-1); border-bottom: 1px solid var(--line-soft); }
  .table--stack td { height: auto; padding: 2px var(--sp-2); border: 0; }
  .table--stack td::before {
    content: attr(data-label) " ";
    font-size: var(--fs-ui-xs); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--fg-muted); font-weight: 600;
  }
  .table--stack td[data-label=""]::before { content: none; }
  .table--stack .num, .table--stack .r { text-align: left; }

  .slideover { width: 100vw; }
  .bar { grid-template-columns: 96px minmax(0, 1fr) 76px; }
}