/* NaSicu (biciklisti Novog Sada) — izgled po uzoru na Adminator 2026 (MIT): levi meni, gornja traka, kartice.
   Boje su tokeni; podrazumevana tema je tamna (data-theme na <html>, bira se u gornjoj traci i pamti). */

/* razmera sajta: na računaru sve je kao na 90 % zuma pregledača (manje i prozračnije); na telefonu ostaje 100 %.
   --z se koristi i u visinama od 100vh / širinama od 100vw, jer zoom smanjuje i njih. */
:root { --z: 1; }
@media (min-width: 961px) { :root { --z: 0.9; } html { zoom: var(--z); } }

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg-body: #0B1120;
  --bg-card: #141B2D;
  --bg-sidebar: #141B2D;
  --bg-hover: #1C2438;
  --bg-muted: #1A2237;
  --t-base: #F1F5F9;
  --t-muted: #B4C0D0;
  --t-light: #94A3B8;
  --border: #222C42;
  --border-soft: #1A2237;
  --primary: #60A5FA;
  --primary-strong: #3B82F6;
  --primary-soft: #0F2847;
  --primary-ring: rgba(96, 165, 250, 0.24);
  --success: #34D399; --success-soft: #0F2A20;
  --warning: #FBBF24; --warning-soft: #2B1F08;
  --danger: #F87171; --danger-soft: #2B1414;
  --purple: #A78BFA; --purple-soft: #1E1A2C;
  --teal: #2DD4BF; --teal-soft: #0E2826;
  --orange: #FB923C; --orange-soft: #2A1810;
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --overlay: rgba(11, 17, 32, 0.72);
  /* grafici (provereno validatorom na #141B2D) */
  --g-bicikl: #3987e5; --g-bicikl-blago: #256abf; --g-prosek: #60A5FA; --g-temp: #d95926; --g-kisa: #199e70;
  --g-nema: #64748B; --g-mreza: #222C42; --g-osa: #334155;
  --g-tip-1: #3987e5; --g-tip-2: #d55181; --g-tip-3: #9085e9;
  --g-god-0: #475569; --g-god-1: #256abf; --g-god-2: #3987e5; --g-god-3: #6da7ec; --g-god-4: #9ec5f4; --g-god-5: #cde2fb;
  --g-top-0: #1A2237; --g-top-1: #184f95; --g-top-2: #256abf; --g-top-3: #3987e5; --g-top-4: #86b6ef; --g-top-5: #cde2fb;
  /* staze (kao bikemap: žuto-zelena sredina, zeleni obod) */
  --pin-radi: #4282F5; --pin-delimicno: #FF9800; --pin-ne_radi: #E5484D; --pin-neispravan: #94A3B8;
  --staza-obod: #14532d; --staza: #c6f432; --traka: #ffd60a; --zajednicka: #86efac;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-body: #F0F4F8;
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-hover: #F8FAFC;
  --bg-muted: #F1F5F9;
  --t-base: #1E293B;
  --t-muted: #526178;
  --t-light: #64748B;
  --border: #E4E8EF;
  --border-soft: #EEF1F5;
  --primary: #2563EB;
  --primary-strong: #1D4ED8;
  --primary-soft: #EFF6FF;
  --primary-ring: rgba(37, 99, 235, 0.18);
  --success: #059669; --success-soft: #ECFDF5;
  --warning: #D97706; --warning-soft: #FFFBEB;
  --danger: #DC2626; --danger-soft: #FEF2F2;
  --purple: #7C3AED; --purple-soft: #F5F3FF;
  --teal: #0D9488; --teal-soft: #F0FDFA;
  --orange: #EA580C; --orange-soft: #FFF7ED;
  --shadow-card: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.05);
  --overlay: rgba(240, 244, 248, 0.72);
  --g-bicikl: #2563EB; --g-bicikl-blago: #93C5FD; --g-prosek: #1D4ED8; --g-temp: #EA580C; --g-kisa: #0D9488;
  --g-nema: #94A3B8; --g-mreza: #EEF1F5; --g-osa: #CBD5E1;
  --g-tip-1: #2563EB; --g-tip-2: #DB2777; --g-tip-3: #7C3AED;
  --g-god-0: #CBD5E1; --g-god-1: #86b6ef; --g-god-2: #5598e7; --g-god-3: #2a78d6; --g-god-4: #1c5cab; --g-god-5: #104281;
  --g-top-0: #F1F5F9; --g-top-1: #cde2fb; --g-top-2: #86b6ef; --g-top-3: #3987e5; --g-top-4: #1c5cab; --g-top-5: #0d366b;
  --pin-radi: #4282F5; --pin-delimicno: #FF9800; --pin-ne_radi: #E5484D; --pin-neispravan: #1E293B;
  --staza-obod: #15803d; --staza: #a3e635; --traka: #facc15; --zajednicka: #4ade80;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg-body); color: var(--t-base);
  font: 14px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: "Inter Tight", "Inter", system-ui, sans-serif; margin: 0; letter-spacing: -0.01em; }
p { margin: 0.35rem 0; }
.mono, .eyebrow, .kpi-delta, .znacka, kbd { font-family: "JetBrains Mono", ui-monospace, monospace; }
.eyebrow { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-light); }
.muted { color: var(--t-muted); }
.sitno { font-size: 12px; color: var(--t-muted); }
.skriveno { display: none !important; }
svg.ik { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- ljuska */
.ljuska { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh / var(--z)); }
.ljuska.uzak { grid-template-columns: 76px minmax(0, 1fr); }
.meni {
  position: sticky; top: 0; height: calc(100vh / var(--z)); overflow-y: auto; background: var(--bg-sidebar);
  border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 18px 16px; z-index: 1200;
}
.meni .brend { display: flex; gap: 10px; align-items: center; padding: 4px 8px 18px; border-bottom: 1px solid var(--border-soft); color: var(--t-base); }
.meni .brend:hover { text-decoration: none; }
.meni .brend img { width: 34px; height: 34px; }
.meni .brend b { font-family: "Inter Tight", sans-serif; font-size: 15.5px; display: block; line-height: 1.15; }
.meni .brend small { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--t-light); letter-spacing: 0.04em; }
.meni .grupa { margin-top: 22px; }
.meni .grupa > .eyebrow { padding: 0 10px 8px; display: block; }
.meni a.stavka {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 2px 0;
  border-radius: 10px; color: var(--t-muted); font-weight: 500; text-decoration: none;
}
.meni a.stavka:hover { background: var(--bg-hover); color: var(--t-base); }
.meni a.stavka.aktivna { background: var(--primary-soft); color: var(--primary); }
.meni a.stavka.aktivna::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.meni .oznaka-meni { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; background: var(--success-soft); color: var(--success); }
.meni .oznaka-meni.plava { background: var(--primary-soft); color: var(--primary); }
.meni .oznaka-meni.siva { background: var(--bg-muted); color: var(--t-muted); }
.meni .oznaka-meni.katanac, .gm-panel .oznaka-meni.katanac { display: inline-grid; place-items: center; padding: 3px 5px; background: var(--bg-muted); color: var(--t-light); }
.meni .oznaka-meni.katanac .ik, .gm-panel .oznaka-meni.katanac .ik { width: 12px; height: 12px; }
.meni a[data-zakljucano], .gm-panel a[data-zakljucano] { cursor: not-allowed; opacity: 0.7; }
.meni a[data-zakljucano]:hover, .gm-panel a[data-zakljucano]:hover { background: transparent; color: inherit; }
.meni .dno { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft); display: flex; gap: 10px; align-items: center; }
.meni .dno .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; background: linear-gradient(135deg, #3B82F6, #8B5CF6); flex: none; }
.meni .dno b { display: block; font-size: 13px; }
.ljuska.uzak .meni .tekst, .ljuska.uzak .meni .eyebrow, .ljuska.uzak .meni .oznaka-meni, .ljuska.uzak .meni .brend span, .ljuska.uzak .meni .dno div { display: none; }
.ljuska.uzak .meni a.stavka { justify-content: center; padding: 10px; }

.gornja {
  position: sticky; top: 0; z-index: 1100; height: 60px; display: flex; align-items: center; gap: 12px;
  padding: 0 28px; background: color-mix(in srgb, var(--bg-body) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.putanja { display: flex; align-items: center; gap: 8px; color: var(--t-muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.putanja b { color: var(--t-base); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.putanja svg.ik { width: 14px; height: 14px; opacity: 0.6; }
.gornja .razmak { flex: 1; }
.ikonica-dugme {
  position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--t-muted); cursor: pointer; padding: 0;
}
.ikonica-dugme:hover { background: var(--bg-hover); color: var(--t-base); }
.ikonica-dugme .brojac { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; font-size: 10px; font-weight: 700; line-height: 16px; color: #fff; background: #EF4444; }
.pretraga-dugme {
  display: flex; align-items: center; gap: 10px; width: 260px; height: 38px; padding: 0 10px 0 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--t-light); cursor: pointer; font: inherit;
}
.pretraga-dugme:hover { border-color: var(--t-light); }
.pretraga-dugme span { flex: 1; text-align: left; }
kbd { font-size: 10px; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-muted); color: var(--t-muted); }
.jezik { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; }
.meni-dugme { display: none; }

/* padajući paneli (obaveštenja, jezik) */
.padajuce { position: relative; }
.panel {
  position: absolute; right: 0; top: 46px; width: 320px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 1300;
}
.panel.mali { width: 180px; }
.panel .naslov-panela { padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; }
.panel a.red-panela, .panel button.red-panela {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--t-base);
  background: none; border: 0; text-align: left; font: inherit; cursor: pointer;
}
.panel .red-panela:hover { background: var(--bg-hover); text-decoration: none; }
.panel .red-panela img { width: 26px; height: 26px; }
.panel .red-panela small { display: block; color: var(--t-muted); font-size: 12px; }

/* glavni sadržaj */
.glavno { min-width: 0; }
.sadrzaj { max-width: 1320px; margin: 0 auto; padding: 32px 28px 48px; display: grid; gap: 22px; }
.zaglavlje-strane { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 4px; }
.zaglavlje-strane h1 { font-size: 34px; line-height: 1.12; margin: 8px 0 10px; }
.zaglavlje-strane h1 em { font-style: normal; color: var(--primary); }
.zaglavlje-strane p.uvod { color: var(--t-muted); max-width: 640px; font-size: 14.5px; }
.zaglavlje-strane p.uvod b { color: var(--t-base); }
.akcije { display: flex; gap: 10px; flex-wrap: wrap; }

.dugme {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font: inherit;
  font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--bg-card); color: var(--t-base); text-decoration: none;
}
.dugme:hover { border-color: var(--t-light); text-decoration: none; }
.dugme.primarno { background: var(--primary); border-color: var(--primary); color: #fff; }
:root[data-theme="dark"] .dugme.primarno, :root:not([data-theme]) .dugme.primarno { color: #0B1120; }
.dugme.primarno:hover { filter: brightness(1.08); }
.dugme.malo { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }

/* kartice */
.kartica { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card); padding: 22px; min-width: 0; }
.kartica-glava { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.kartica-glava h2 { font-size: 16px; margin-top: 4px; }
.kartica-glava .opis { color: var(--t-muted); font-size: 12.5px; margin-top: 4px; max-width: 640px; }
.kartica-glava a.vise { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; }
.kartica-noga { display: flex; flex-wrap: wrap; gap: 18px 40px; padding-top: 16px; margin-top: 12px; border-top: 1px dashed var(--border); }
.kartica-noga .eyebrow { display: block; }
.kartica-noga b { font-family: "Inter Tight", sans-serif; font-size: 18px; }
.mreza-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mreza-3-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px; }

/* KPI */
.kpi-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kpi { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-card); }
.kpi::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 100% 0%, var(--kpi-sjaj, transparent) 0%, transparent 60%); opacity: 0.55; }
.kpi .vrh { display: flex; align-items: center; gap: 12px; }
.kpi .kvadrat { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--kpi-pozadina); color: var(--kpi-boja); }
.kpi .naslov { color: var(--t-muted); font-weight: 500; }
.kpi .kpi-delta { margin-left: auto; font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: var(--kpi-pozadina); color: var(--kpi-boja); white-space: nowrap; }
.kpi .vrednost { font-family: "Inter Tight", sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin: 14px 0 10px; line-height: 1; }
.kpi .vrednost sup { font-size: 16px; color: var(--t-muted); font-weight: 500; margin-left: 4px; vertical-align: 18px; }
.kpi .dole { border-top: 1px solid var(--border-soft); padding-top: 12px; color: var(--t-muted); font-size: 12.5px; }
.kpi .dole b { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--t-base); }
.c-plava { --kpi-boja: var(--primary); --kpi-pozadina: var(--primary-soft); --kpi-sjaj: var(--primary-soft); }
.c-zelena { --kpi-boja: var(--success); --kpi-pozadina: var(--success-soft); --kpi-sjaj: var(--success-soft); }
.c-ljubicasta { --kpi-boja: var(--purple); --kpi-pozadina: var(--purple-soft); --kpi-sjaj: var(--purple-soft); }
.c-narandzasta { --kpi-boja: var(--orange); --kpi-pozadina: var(--orange-soft); --kpi-sjaj: var(--orange-soft); }
.c-teal { --kpi-boja: var(--teal); --kpi-pozadina: var(--teal-soft); --kpi-sjaj: var(--teal-soft); }
.c-crvena { --kpi-boja: var(--danger); --kpi-pozadina: var(--danger-soft); --kpi-sjaj: var(--danger-soft); }

/* trake napretka, prstenovi */
.traka-napretka { height: 4px; border-radius: 4px; background: var(--bg-muted); overflow: hidden; }
.traka-napretka i { display: block; height: 100%; border-radius: 4px; background: var(--boja, var(--primary)); width: 0; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.mesta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 26px; }
.mesto-stat .ime { display: flex; align-items: center; gap: 8px; color: var(--t-muted); }
.mesto-stat .ime i { width: 8px; height: 8px; border-radius: 50%; background: var(--boja); }
.mesto-stat .broj { font-family: "Inter Tight", sans-serif; font-size: 26px; font-weight: 700; margin: 4px 0 8px; }
.mesto-stat .broj small { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--t-light); margin-left: 6px; font-weight: 500; }
.prstenovi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--border-soft); }
.prsten { display: flex; align-items: center; gap: 16px; }
.prsten svg { width: 66px; height: 66px; transform: rotate(-90deg); flex: none; }
.prsten circle { fill: none; stroke-width: 6; }
.prsten .pozadina { stroke: var(--bg-muted); }
.prsten .luk { stroke: var(--boja); stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
.prsten .unutra { position: relative; }
.prsten .procenat { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.prsten b { display: block; }

/* kontrole */
.segment { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-muted); gap: 2px; }
.segment button { border: 0; background: transparent; color: var(--t-muted); font: inherit; font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.segment button[aria-pressed="true"] { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-card); }
.cipovi { display: flex; flex-wrap: wrap; gap: 8px; }
.cip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; font: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--t-muted);
}
.cip i { width: 10px; height: 10px; border-radius: 3px; background: var(--boja); opacity: 0.35; }
.cip[aria-pressed="true"] { color: var(--t-base); border-color: var(--boja); background: color-mix(in srgb, var(--boja) 12%, transparent); }
.cip[aria-pressed="true"] i { opacity: 1; }
.cip .broj { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--t-light); }
select, input[type="date"], input[type="search"], input[type="text"] {
  font: inherit; color: var(--t-base); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  height: 38px; padding: 0 12px;
}
select:focus, input:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--primary-ring); outline-offset: 1px; border-color: var(--primary); }
input[type="range"] { accent-color: var(--primary); width: 100%; }
.kontrole { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* grafici */
.grafik { width: 100%; height: 340px; }
.grafik.visok { height: 460px; }
.grafik.srednji { height: 400px; }
.grafik.nizak { height: 190px; }
.grafik-mesto { position: relative; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--t-muted); align-items: center; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--boja); }
.legenda i.crta { width: 16px; height: 3px; border-radius: 2px; }
.legenda i.isprekidano { width: 16px; height: 0; border-top: 2px dashed var(--boja); background: none; border-radius: 0; }

/* priča (scrollytelling) */
.prica { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; align-items: start; }
.prica .koraci { display: grid; gap: 38vh; padding: 10vh 0 30vh; }
.prica .korak { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; opacity: 0.35; transform: translateY(12px); transition: opacity .5s, transform .5s, border-color .5s; box-shadow: var(--shadow-card); }
.prica .korak.aktivan { opacity: 1; transform: none; border-color: var(--primary); }
.prica .korak h3 { font-size: 19px; margin: 8px 0 6px; }
.prica .korak .velik { font-family: "Inter Tight", sans-serif; font-size: 30px; font-weight: 700; color: var(--primary); }
.prica .lepljivo { position: sticky; top: 84px; }
.prica .lepljivo .grafik { height: min(62vh, 520px); }

/* tabele */
.tabela-omot { overflow-x: auto; }
table.tabela { border-collapse: collapse; width: 100%; font-size: 13px; }
.tabela th { text-align: left; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--t-base); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; }
.tabela td { padding: 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.tabela tbody tr:hover { background: var(--bg-hover); }
.tabela td.broj, .tabela th.broj { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td.mono { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--t-muted); white-space: nowrap; }
.tabela .stanica-celija { display: flex; gap: 12px; align-items: center; min-width: 240px; }
.tabela .stanica-celija img { width: 30px; height: 30px; }
.tabela .stanica-celija b { display: block; }
.tabela .stanica-celija small { display: block; color: var(--t-muted); font-size: 11.5px; }
.tabela.prugasta tbody tr:nth-child(odd) { background: var(--bg-hover); }
.znacka { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--z-pozadina, var(--bg-muted)); color: var(--z-boja, var(--t-muted)); white-space: nowrap; }
.znacka.tacka::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.z-radi { --z-boja: var(--success); --z-pozadina: var(--success-soft); }
.z-delimicno { --z-boja: var(--warning); --z-pozadina: var(--warning-soft); }
.z-ne_radi { --z-boja: var(--danger); --z-pozadina: var(--danger-soft); }
.z-neispravan { --z-boja: var(--t-muted); --z-pozadina: var(--bg-muted); }
.z-uskoro { --z-boja: var(--primary); --z-pozadina: var(--primary-soft); }
.alat-tabele { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.alat-tabele .pretraga { position: relative; flex: 1 1 260px; max-width: 360px; }
.alat-tabele .pretraga svg { position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; color: var(--t-light); }
.alat-tabele .pretraga input { width: 100%; padding-left: 36px; }
.stranicenje { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; color: var(--t-muted); font-size: 12.5px; }
.stranicenje .dugmad { display: flex; gap: 4px; }
.stranicenje button { min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--t-muted); cursor: pointer; font: inherit; font-weight: 600; }
.stranicenje button[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.stranicenje button:disabled { opacity: 0.4; cursor: default; }
.mini-traka { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.mini-traka .traka-napretka { flex: 1; }

/* mapa i pinovi */
.mapa { width: 100%; height: 520px; border-radius: 12px; overflow: hidden; background: var(--bg-muted); }
.mapa.velika { height: calc(100vh / var(--z) - 290px); min-height: 520px; }
.mapa-alat { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.leaflet-container { font: inherit; background: var(--bg-muted); }
:root[data-theme="dark"] .podloga-carto .leaflet-tile-pane { filter: brightness(1.55) contrast(0.92); }
:root[data-theme="dark"] .podloga-osm .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.6); }
.leaflet-tooltip, .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-card); color: var(--t-base); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.leaflet-tooltip { border-radius: 10px; padding: 8px 10px; }
.leaflet-tooltip-top::before { border-top-color: var(--bg-card); }
.leaflet-bar a { background: var(--bg-card); color: var(--t-base); border-color: var(--border); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--bg-card) 80%, transparent) !important; color: var(--t-muted); }
.pin { position: relative; width: 34px; height: 34px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.45)); transition: transform .18s; transform-origin: 50% 100%; }
.pin:hover { transform: scale(1.15); }
.pin.izabran { transform: scale(1.4); }
.pin img { width: 34px; height: 34px; display: block; }
.pin .telo img.h { display: none; }
.pin:hover .telo img.n, .pin.izabran .telo img.n { display: none; }
.pin:hover .telo img.h, .pin.izabran .telo img.h { display: block; }
.pin.skok .telo { animation: skok 1.15s cubic-bezier(.3, .6, .4, 1); }
@keyframes skok {
  0% { transform: translateY(0); } 18% { transform: translateY(-30px); } 34% { transform: translateY(0) scaleY(.9); }
  46% { transform: translateY(-14px); } 58% { transform: translateY(0) scaleY(.95); } 68% { transform: translateY(-6px); }
  77% { transform: translateY(0); } 85% { transform: translateY(-2px); } 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .pin.skok .telo { animation: none; } }
:root[data-theme="dark"] .pin.svetli-obod img.n,
:root[data-theme="dark"] img[src$="neispravan.png"], :root[data-theme="dark"] img[src$="nije_postavljen.png"] { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.pin .pin-broj {
  position: absolute; left: 50%; bottom: 33px; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--bg-card); color: var(--t-base); border: 1px solid var(--border); white-space: nowrap;
}
.pin.bez-broja .pin-broj { display: none; }
.legenda-pinova { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12px; color: var(--t-muted); }
.legenda-pinova img { width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; }
.legenda-pinova .linija { display: inline-block; width: 22px; height: 6px; border-radius: 3px; background: var(--staza-obod); position: relative; vertical-align: 1px; margin-right: 6px; }
.legenda-pinova .linija::after { content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 2px; border-radius: 1px; background: var(--b); }
.mapa-raspored { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.spisak { max-height: calc(100vh / var(--z) - 290px); min-height: 520px; overflow-y: auto; display: grid; align-content: start; gap: 4px; }
.spisak button { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--t-base); font: inherit; text-align: left; cursor: pointer; }
.spisak button:hover, .spisak button.izabran { background: var(--bg-hover); border-color: var(--border); }
.spisak img { width: 26px; height: 26px; flex: none; }
.spisak small { display: block; color: var(--t-muted); font-size: 11.5px; }
.spisak .vrednost-reda { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--t-muted); }
.dan-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.stanje-dana { font-size: 14px; }
.stanje-dana b { font-family: "Inter Tight", sans-serif; }

/* upozorenja, uskoro */
.upozorenje { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); font-size: 13px; }
.upozorenje span { color: var(--t-base); }
.uskoro { display: flex; gap: 16px; align-items: center; }
.uskoro .ikona-velika { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.uskoro .ikona-velika svg { width: 26px; height: 26px; }

/* paleta komandi (pretraga) i obaveštenje (toast) */
.paleta-pozadina { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(4px); z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.paleta { width: min(620px, calc(100vw - 32px)); background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.paleta .unos { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.paleta .unos input { flex: 1; border: 0; background: transparent; height: 30px; font-size: 15px; padding: 0; outline: none; }
.paleta .rezultati { max-height: 420px; overflow-y: auto; padding: 8px; }
.paleta .rezultati a { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--t-base); text-decoration: none; }
.paleta .rezultati a.aktivan, .paleta .rezultati a:hover { background: var(--primary-soft); }
.paleta .rezultati img { width: 26px; height: 26px; }
.paleta .rezultati small { display: block; color: var(--t-muted); font-size: 12px; }
.paleta .grupa-rez { padding: 8px 10px 4px; }
.tost { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; z-index: 2100; background: var(--bg-card); color: var(--t-base); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-lg); transition: opacity .25s, transform .25s; display: flex; gap: 10px; align-items: center; }
.tost.vidljiv { opacity: 1; transform: translate(-50%, 0); }

/* pojava pri skrolovanju */
.pojava { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.pojava.vidljivo { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pojava { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

footer.podnozje { color: var(--t-light); font-size: 12px; padding: 8px 28px 32px; max-width: 1320px; margin: 0 auto; }

/* odzivnost */
@media (max-width: 1180px) {
  .kpi-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mesta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa-raspored { grid-template-columns: minmax(0, 1fr); }
  .spisak { max-height: 360px; min-height: 0; }
}
@media (max-width: 960px) {
  .ljuska, .ljuska.uzak { grid-template-columns: minmax(0, 1fr); }
  .meni { position: fixed; left: 0; top: 0; width: 272px; transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow-lg); }
  .ljuska.otvoren .meni { transform: none; }
  .ljuska.otvoren::after { content: ""; position: fixed; inset: 0; background: var(--overlay); z-index: 1150; }
  .meni-dugme { display: grid; }
  .ljuska.uzak .meni .tekst, .ljuska.uzak .meni .eyebrow, .ljuska.uzak .meni .oznaka-meni, .ljuska.uzak .meni .brend span, .ljuska.uzak .meni .dno div { display: revert; }
  .sakupi-dugme { display: none; }
  .mreza-2, .mreza-3-2, .prica, .dan-panel { grid-template-columns: minmax(0, 1fr); }
  .prica .lepljivo { top: 64px; z-index: 2; order: -1; background: var(--bg-card); padding-bottom: 6px; }
  .prica .lepljivo .grafik { height: 42vh; }
  .prica .koraci { gap: 50vh; padding-top: 5vh; position: relative; z-index: 3; }
  .prstenovi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gornja { padding: 0 12px; gap: 6px; }
  .pretraga-dugme { width: 38px; padding: 0; justify-content: center; }
  .pretraga-dugme span, .pretraga-dugme kbd { display: none; }
  .putanja .srednje { display: none; }
  .sadrzaj { padding: 20px 16px 40px; gap: 16px; }
  .zaglavlje-strane h1 { font-size: 27px; }
  .kartica { padding: 16px; border-radius: 14px; }
  .kpi-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; border-radius: 14px; }
  .kpi .vrh { gap: 8px; }
  .kpi .kvadrat { width: 28px; height: 28px; }
  .kpi .naslov { font-size: 12px; line-height: 1.25; }
  .kpi .kpi-delta { display: none; }
  .kpi .vrednost { font-size: 26px; margin: 10px 0 8px; }
  .kpi .vrednost sup { font-size: 12px; vertical-align: 12px; }
  .kpi .dole { font-size: 11px; padding-top: 8px; }
  .mesta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .mapa { height: 420px; }
  .mapa.velika { height: 62vh; min-height: 380px; }
  .grafik.visok { height: 420px; }
  .panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* mapa: grupe kontrola, štikla, savet za zum, info, legenda, spisak */
.mapa { position: relative; }
.mapa-savet { position: absolute; inset: 0; z-index: 900; display: grid; place-items: center; pointer-events: none; opacity: 0;
  transition: opacity .25s; background: rgb(0 0 0 / 0.38); color: #fff; font-weight: 600; font-size: 15px; text-align: center; padding: 20px; }
.mapa-savet.vidljiv { opacity: 1; }
.grupa-kontrola { display: flex; flex-direction: column; gap: 6px; }
.grupa-kontrola > .eyebrow { padding-left: 2px; }
.mapa-alat { align-items: flex-end; gap: 14px 22px; }
.stikla { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-muted); cursor: pointer; font-weight: 600; font-size: 12.5px; user-select: none; }
.stikla input { position: absolute; opacity: 0; width: 0; height: 0; }
.stikla .kvacica { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--t-light); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.stikla input:checked + .kvacica { background: var(--primary); border-color: var(--primary); }
.stikla input:checked + .kvacica::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.stikla input:focus-visible + .kvacica { outline: 2px solid var(--primary-ring); outline-offset: 2px; }
.stikla .linija { display: inline-block; width: 22px; height: 6px; border-radius: 3px; background: var(--staza-obod); position: relative; }
.stikla .linija::after { content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 2px; border-radius: 1px; background: var(--b); }
.info { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; border-radius: 50%; border: 1px solid var(--t-light);
  color: var(--t-muted); font: 600 10px/1 "JetBrains Mono", monospace; cursor: help; position: relative; vertical-align: 1px; }
.info:hover::after, .info:focus::after { content: attr(data-info); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 260px; white-space: normal; padding: 8px 10px; border-radius: 8px; background: var(--bg-card); color: var(--t-base);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); font: 400 12px/1.4 Inter, system-ui, sans-serif; z-index: 1500; text-align: left; }
.legenda-pinova { gap: 8px 18px; }
.legenda-pinova img { width: 28px; height: 28px; vertical-align: -8px; margin-right: 6px; }
.legenda-pinova > .eyebrow { margin-right: -6px; }
.cip img { width: 22px; height: 22px; margin: 0 -2px 0 -6px; }
.tt-red { margin-top: 5px; }
.tt-red small { font-size: 11px; color: var(--t-muted); }
.leaflet-tooltip { max-width: 280px; white-space: normal; }
.spisak-glava { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px 8px; color: var(--t-light); }
.krofna { height: 260px; }

/* izmene: info ikonica, čip-štikla za staze, kontrole levo, krofna u spisku */
.info { border: 0; width: 15px; height: 15px; color: var(--t-light); text-transform: none; letter-spacing: 0; }
.info svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.info:hover, .info:focus { color: var(--primary); outline: none; }
.cip-stikla { position: relative; height: 38px; padding: 0 14px 0 10px; }
.cip-stikla input { position: absolute; opacity: 0; width: 0; height: 0; }
.cip-stikla .kvacica { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--t-light); display: grid; place-items: center; }
.cip-stikla:has(input:checked) { color: var(--t-base); border-color: var(--boja); background: color-mix(in srgb, var(--boja) 12%, transparent); }
.cip-stikla:has(input:checked) .kvacica { background: var(--boja); border-color: var(--boja); }
.cip-stikla:has(input:checked) .kvacica::after { content: ""; width: 4px; height: 8px; border: solid #0B1120; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.cip-stikla:has(input:focus-visible) { outline: 2px solid var(--primary-ring); }
.mapa-alat { justify-content: flex-start; gap: 14px 28px; }
.mapa-raspored aside { display: flex; flex-direction: column; min-height: 0; }
.mapa-raspored aside .spisak { max-height: none; min-height: 0; flex: 1 1 auto; height: calc(100vh / var(--z) - 290px - 300px + 50px); min-height: 220px; }
.krofna-okvir { border-top: 1px solid var(--border-soft); margin-top: 10px; padding-top: 10px; }
.krofna-okvir .krofna { height: 250px; cursor: pointer; }
@media (max-width: 1180px) { .mapa-raspored aside .spisak { height: 320px; } }

.leaflet-popup.bez-vrha .leaflet-popup-tip-container { display: none; }

/* padajući izbor stanica (Dani u nedelji) */
.panel.izbor-stanica { left: 0; right: auto; width: 320px; max-width: calc(100vw - 32px); }
.panel.izbor-stanica input[type="search"] { width: 100%; margin-bottom: 6px; }
.spisak-izbora { max-height: 280px; overflow-y: auto; border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 4px; }
.red-izbora { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.red-izbora:hover { background: var(--bg-hover); }
.red-izbora input { accent-color: var(--primary); width: 16px; height: 16px; flex: none; }
.red-izbora img { width: 22px; height: 22px; flex: none; }
#dani-dugme { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* prekidač (toggle) i izbor u desnom uglu kartice */
.prekidac-ui { display: inline-flex; align-items: center; gap: 9px; height: 38px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--t-muted); user-select: none; }
.prekidac-ui input { position: absolute; opacity: 0; width: 0; height: 0; }
.prekidac-ui .klizac { width: 38px; height: 22px; border-radius: 999px; background: var(--bg-muted); border: 1px solid var(--border); position: relative; transition: background .2s; }
.prekidac-ui .klizac::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--t-light); transition: transform .2s, background .2s; }
.prekidac-ui input:checked + .klizac { background: var(--primary); border-color: var(--primary); }
.prekidac-ui input:checked + .klizac::after { transform: translateX(16px); background: #fff; }
.prekidac-ui input:focus-visible + .klizac { outline: 2px solid var(--primary-ring); outline-offset: 2px; }
.kartica-glava > .grupa-kontrola { align-items: flex-end; }
.kartica-glava .padajuce .panel.izbor-stanica { left: auto; right: 0; }
.izbor-dugme { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 30px; }
/* šire strane, manji razmaci */
.sadrzaj { max-width: 1680px; padding: 22px 22px 40px; gap: 16px; }
.mreza-2, .mreza-3-2 { gap: 16px; }
.kpi-mreza { gap: 14px; }
.kartica { padding: 18px; }
footer.podnozje { max-width: 1680px; padding: 8px 22px 28px; }
@media (max-width: 640px) { .sadrzaj { padding: 16px 12px 32px; gap: 12px; } }
.kartica-glava { flex-wrap: nowrap; }
.kartica-glava > div:first-child { flex: 1 1 auto; min-width: 0; }
.kartica-glava > .grupa-kontrola, .kartica-glava > .segment, .kartica-glava > a.vise, .kartica-glava > .kontrole { flex: none; }
.grupa-kontrola { align-items: flex-start; }
@media (max-width: 640px) { .kartica-glava { flex-wrap: wrap; } }

/* Sub/Ned spojeni ispod dugmeta Vikend */
.segment.pod-vikend { position: absolute; z-index: 2; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; padding-bottom: 4px; display: flex; }
.grupa-kontrola:has(#temp-vikend) { position: relative; }
.segment.pod-vikend button { flex: 1; padding: 4px 6px; font-size: 11.5px; }
.segment.pod-vikend.skriveno { display: none !important; }
#temp-dani .segment, #temp-dani.segment { position: relative; z-index: 1; }
.red-izbora .info { margin-left: auto; }

h2 .info { vertical-align: 2px; }

/* strane u izradi: skica i plan */
.uskoro-znacka { font-size: 12px; padding: 6px 12px; }
.skica { position: relative; display: grid; gap: 14px; padding: 34px 14px 14px; border: 2px dashed var(--border); border-radius: 18px;
  background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--t-light) 4%, transparent) 14px 15px); }
.skica-oznaka { position: absolute; top: -13px; left: 18px; display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; border-radius: 999px;
  background: var(--bg-body); border: 1px solid var(--border); font: 600 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.skica-oznaka svg { width: 14px; height: 14px; }
.skica-mreza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.skica-mreza > .cela { grid-column: 1 / -1; }
.skica .cip { cursor: default; }
.skica .dugme[aria-disabled="true"] { opacity: .55; cursor: not-allowed; gap: 6px; }
.skica .dugme[aria-disabled="true"] svg { width: 14px; height: 14px; }
.skica-klizac { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.skica-klizac .traka { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-muted); position: relative; }
.skica-klizac .traka i { position: absolute; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
ol.plan { margin: 0; padding: 0; list-style: none; counter-reset: plan; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
ol.plan li { counter-increment: plan; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; align-items: start; }
ol.plan li::before { content: counter(plan); grid-row: span 2; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font: 600 12px/1 "JetBrains Mono", monospace; }
ol.plan li span { font-size: 12.5px; }
.tok { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 10px 0; }
.tok-kolona { display: grid; gap: 8px; }
.tok-kutija { display: grid; grid-template-columns: 22px 1fr; gap: 0 10px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-muted); min-width: 190px; max-width: 230px; }
.tok-kutija svg { grid-row: span 2; color: var(--primary); }
.tok-kutija small { color: var(--t-muted); font-size: 11.5px; line-height: 1.35; }
.tok-kutija.istaknuta { border-color: var(--primary); background: var(--primary-soft); }
.tok-strelica { color: var(--t-light); display: grid; place-items: center; }
.recnik-slova { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.recnik-slova span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; font: 600 12px/1 "JetBrains Mono", monospace; color: var(--t-light); background: var(--bg-muted); }
.recnik-slova span.ima { color: var(--primary); background: var(--primary-soft); }
.recnik-mreza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.recnik-pojam { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-hover); }
.meni .grupa { margin-top: 16px; }
.meni a.stavka { padding: 7px 12px; margin: 1px 0; }
@media (max-width: 960px) { .skica-mreza, ol.plan, .recnik-mreza { grid-template-columns: minmax(0, 1fr); } .tok { flex-direction: column; } .tok-strelica { transform: rotate(90deg); } }

/* kalendar */
.kal-kontrole { align-items: flex-end; gap: 14px; }
.kal-kontrole select { max-width: 320px; }
.kal-legenda { margin-top: 6px; gap: 8px 22px; }
.kal-legenda .skala { display: inline-flex; align-items: center; gap: 8px; }
.kal-legenda .skala i { width: 140px; height: 10px; border-radius: 5px; margin: 0; }
.kal-legenda small { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--t-light); }
.kal-legenda i.srafura { width: 14px; height: 14px; border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--g-nema) 0 2px, transparent 2px 4px); opacity: .7; }
.kal-legenda i.tacka-p { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.kal-legenda i.okvir-izabran { width: 14px; height: 14px; border-radius: 3px; background: none; border: 2px solid var(--warning); }
.dan-detalji { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr); gap: 22px; align-items: start; }
dl.cinjenice { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; }
dl.cinjenice dt { color: var(--t-muted); font-size: 12.5px; padding-top: 2px; }
dl.cinjenice dd { margin: 0; font-size: 14px; }
dl.cinjenice dd b { font-family: "Inter Tight", sans-serif; font-size: 17px; }
dl.cinjenice dd small { display: block; color: var(--t-muted); font-size: 11.5px; }
.dugme svg.ik { width: 15px; height: 15px; }
@media (max-width: 960px) { .dan-detalji { grid-template-columns: minmax(0, 1fr); } .kartica-glava:has(.kal-kontrole) { flex-wrap: wrap; } }
/* duži meni: nazivi u jednom redu */
@media (min-width: 961px) { .ljuska:not(.uzak) { grid-template-columns: 280px minmax(0, 1fr); } }
.meni { padding: 18px 12px; }
.meni a.stavka { gap: 10px; font-size: 13.5px; padding: 7px 10px; }
.meni a.stavka .tekst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.meni .oznaka-meni { font-size: 8.5px; padding: 2px 6px; letter-spacing: 0.04em; flex: none; }
.meni a.stavka.aktivna::before { left: -12px; }

/* rekordi */
.rekordi-vreme { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(240px, 1.3fr); gap: 14px; }
.rekord, .cinjenica { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--bg-hover); color: var(--t-base); text-decoration: none; transition: border-color .2s, transform .2s; }
a.rekord:hover, a.cinjenica:hover { border-color: var(--kpi-boja, var(--primary)); transform: translateY(-2px); text-decoration: none; }
.rekord .kvadrat, .cinjenica .kvadrat { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--kpi-pozadina, var(--primary-soft)); color: var(--kpi-boja, var(--primary)); margin-bottom: 4px; }
.rekord .vel, .cinjenica .vel { font-family: "Inter Tight", sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.rekord .vel sup, .cinjenica .vel sup { font-size: 13px; color: var(--t-muted); font-weight: 500; margin-left: 3px; vertical-align: 12px; }
.rekord .datum { color: var(--primary); font-size: 12.5px; }
.rekord .biciklisti { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.mirni { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); }
.mirni a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border-soft); color: var(--t-base); font-size: 13px; text-decoration: none; }
.mirni a:hover { color: var(--primary); }
.mirni a small { display: block; color: var(--t-muted); font-size: 11px; }
.mirni a b { font-family: "JetBrains Mono", monospace; }
.zanimljivosti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cinjenica .muted { font-size: 12.5px; }
@media (max-width: 1180px) { .rekordi-vreme { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mirni { grid-column: 1 / -1; } .zanimljivosti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rekordi-vreme, .zanimljivosti { grid-template-columns: minmax(0, 1fr); } }
.rekordi-vreme { align-items: start; }
.vise-redova { display: flex; justify-content: center; padding-top: 14px; }

/* MapLibre: kartica (popup), kontrole, Ctrl + točkić, 3D */
.maplibregl-map { font: inherit; }
.pin-omot { cursor: pointer; }
.maplibregl-popup { z-index: 6; }
.maplibregl-popup-content { background: var(--bg-card); color: var(--t-base); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  border-radius: 12px; padding: 12px 30px 12px 14px; font-size: 13px; line-height: 1.45; }
.maplibregl-popup-close-button { color: var(--t-muted); font-size: 18px; width: 26px; height: 26px; right: 2px; top: 2px; border-radius: 8px; }
.maplibregl-popup-close-button:hover { background: var(--bg-hover); color: var(--t-base); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--bg-card); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--bg-card); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--bg-card); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--bg-card); }
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .maplibregl-popup-anchor-top-right .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { display: none; }
.maplibregl-ctrl-group { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px !important; box-shadow: var(--shadow-card) !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 34px; height: 34px; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--border); }
.maplibregl-ctrl-group button:hover { background-color: var(--bg-hover) !important; }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(0.9); }
.dugme-3d button { font: 700 12px/1 "JetBrains Mono", monospace; color: var(--t-base); }
.dugme-3d button.aktivno { color: var(--primary); background: var(--primary-soft) !important; }
.maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--bg-card) 85%, transparent) !important; color: var(--t-muted); font-size: 11px; }
.maplibregl-ctrl-attrib a { color: var(--t-muted); }
.maplibregl-ctrl-attrib-button { background-color: var(--bg-card) !important; }
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }
.maplibregl-ctrl-scale { background: color-mix(in srgb, var(--bg-card) 80%, transparent); color: var(--t-muted); border-color: var(--t-light); font-size: 10.5px; }
.maplibregl-cooperative-gesture-screen { background: rgb(0 0 0 / 0.42); color: #fff; font: 600 15px/1.4 Inter, system-ui, sans-serif; }
.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message, .maplibregl-cooperative-gesture-screen .maplibregl-mobile-message { padding: 12px 18px; border-radius: 12px; }
.mapa[data-podloga="plava"], .mapa[data-podloga="siva"], .mapa[data-podloga="bela"] { background: transparent; }

/* 3D pin izabrane stanice */
.pin .telo { position: relative; }
.pin .telo canvas.pin-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pin .telo.u-3d img { visibility: hidden; }
.pin .senka { display: none; position: absolute; left: 50%; bottom: -3px; width: 20px; height: 5px; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.45), transparent); pointer-events: none; }
.pin.rotira .senka { display: block; }

/* ================================================================ PRILAGODI: boje naglaska */
:root[data-boja="ljubicasta"] { --primary: #A78BFA; --primary-strong: #8B5CF6; --primary-soft: #221A3D; --primary-ring: rgba(167, 139, 250, 0.26); }
:root[data-theme="light"][data-boja="ljubicasta"] { --primary: #7C3AED; --primary-strong: #6D28D9; --primary-soft: #F5F3FF; --primary-ring: rgba(124, 58, 237, 0.18); }
:root[data-boja="zelena"] { --primary: #34D399; --primary-strong: #10B981; --primary-soft: #0F2A20; --primary-ring: rgba(52, 211, 153, 0.24); }
:root[data-theme="light"][data-boja="zelena"] { --primary: #059669; --primary-strong: #047857; --primary-soft: #ECFDF5; --primary-ring: rgba(5, 150, 105, 0.18); }
:root[data-boja="narandzasta"] { --primary: #FB923C; --primary-strong: #F97316; --primary-soft: #2A1810; --primary-ring: rgba(251, 146, 60, 0.24); }
:root[data-theme="light"][data-boja="narandzasta"] { --primary: #EA580C; --primary-strong: #C2410C; --primary-soft: #FFF7ED; --primary-ring: rgba(234, 88, 12, 0.18); }
:root[data-boja="roze"] { --primary: #F472B6; --primary-strong: #EC4899; --primary-soft: #2D1424; --primary-ring: rgba(244, 114, 182, 0.24); }
:root[data-theme="light"][data-boja="roze"] { --primary: #DB2777; --primary-strong: #BE185D; --primary-soft: #FDF2F8; --primary-ring: rgba(219, 39, 119, 0.18); }
:root[data-boja="grafit"] { --primary: #CBD5E1; --primary-strong: #94A3B8; --primary-soft: #1E293B; --primary-ring: rgba(203, 213, 225, 0.22); }
:root[data-theme="light"][data-boja="grafit"] { --primary: #334155; --primary-strong: #1E293B; --primary-soft: #F1F5F9; --primary-ring: rgba(51, 65, 85, 0.18); }
.meni .dno .avatar { background: linear-gradient(135deg, var(--primary-strong), var(--purple)); }

/* gustina */
:root[data-gustina="zbijeno"] body { font-size: 13.25px; }
:root[data-gustina="zbijeno"] .sadrzaj { gap: 10px; padding: 14px 16px 28px; }
:root[data-gustina="zbijeno"] .kartica { padding: 13px 14px; border-radius: 13px; }
:root[data-gustina="zbijeno"] .kartica-glava { padding-bottom: 10px; margin-bottom: 12px; }
:root[data-gustina="zbijeno"] .kpi { padding: 13px 15px; border-radius: 13px; }
:root[data-gustina="zbijeno"] .kpi .vrednost { font-size: 31px; margin: 9px 0 7px; }
:root[data-gustina="zbijeno"] .kpi .dole { padding-top: 8px; }
:root[data-gustina="zbijeno"] .mreza-2, :root[data-gustina="zbijeno"] .mreza-3-2, :root[data-gustina="zbijeno"] .kpi-mreza { gap: 10px; }
:root[data-gustina="zbijeno"] .zaglavlje-strane h1 { font-size: 28px; margin: 4px 0 6px; }
:root[data-gustina="zbijeno"] .meni .grupa { margin-top: 10px; }
:root[data-gustina="zbijeno"] .meni a.stavka { padding: 5px 10px; }
:root[data-gustina="zbijeno"] .gornja { height: 52px; }
:root[data-gustina="zbijeno"] .tabela td { padding: 8px 10px; }
:root[data-gustina="prozracno"] body { font-size: 14.5px; }
:root[data-gustina="prozracno"] .sadrzaj { gap: 24px; padding: 30px 32px 52px; }
:root[data-gustina="prozracno"] .kartica { padding: 26px; border-radius: 18px; }
:root[data-gustina="prozracno"] .kartica-glava { padding-bottom: 18px; margin-bottom: 20px; }
:root[data-gustina="prozracno"] .kpi { padding: 24px 26px; border-radius: 18px; }
:root[data-gustina="prozracno"] .mreza-2, :root[data-gustina="prozracno"] .mreza-3-2 { gap: 24px; }
:root[data-gustina="prozracno"] .kpi-mreza { gap: 20px; }
:root[data-gustina="prozracno"] .meni a.stavka { padding: 9px 12px; margin: 2px 0; }
:root[data-gustina="prozracno"] .meni .grupa { margin-top: 20px; }
:root[data-gustina="prozracno"] .tabela td { padding: 15px 14px; }

/* širina sadržaja */
:root[data-sirina="uokvirena"] .sadrzaj, :root[data-sirina="uokvirena"] footer.podnozje { max-width: 1240px; }
:root[data-sirina="uokvirena"] .gornji-meni-unutra { max-width: 1240px; }

/* raspored menija: plutajući i gornji (uzak = postojeća .ljuska.uzak) */
.brend-gornji { display: none; align-items: center; gap: 9px; color: var(--t-base); font-family: "Inter Tight", sans-serif; font-size: 15px; margin-right: 6px; white-space: nowrap; }
.brend-gornji:hover { text-decoration: none; }
.brend-gornji img { width: 30px; height: 30px; }
.gornji-meni { display: none; }
@media (min-width: 961px) {
  .ljuska { transition: grid-template-columns .3s cubic-bezier(.2, .8, .2, 1); }
  :root[data-raspored="plutajuci"] .ljuska:not(.uzak) { grid-template-columns: 292px minmax(0, 1fr); }
  :root[data-raspored="plutajuci"] .ljuska.uzak { grid-template-columns: 88px minmax(0, 1fr); }
  :root[data-raspored="plutajuci"] .meni { margin: 12px 0 12px 12px; top: 12px; height: calc(100vh / var(--z) - 24px); border: 1px solid var(--border);
    border-radius: 18px; box-shadow: var(--shadow-lg); }
  :root[data-raspored="plutajuci"] .gornja { margin: 12px 12px 0; top: 12px; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); }
  :root[data-raspored="gornji"] .ljuska, :root[data-raspored="gornji"] .ljuska.uzak { grid-template-columns: minmax(0, 1fr); }
  :root[data-raspored="gornji"] .meni, :root[data-raspored="gornji"] #meni-dugme { display: none; }
  :root[data-raspored="gornji"] .brend-gornji { display: inline-flex; }
  :root[data-raspored="gornji"] .gornja { border-bottom-color: transparent; }
  :root[data-raspored="gornji"] .gornji-meni { display: flex; gap: 4px; position: sticky; top: 60px; z-index: 1090; padding: 6px 22px 8px;
    background: color-mix(in srgb, var(--bg-body) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
  :root[data-raspored="gornji"][data-gustina="zbijeno"] .gornji-meni { top: 52px; }
}
.gm-grupa { position: relative; }
.gm-dugme { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--t-muted); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.gm-dugme svg.ik { width: 16px; height: 16px; }
.gm-dugme svg.strelica { width: 13px; height: 13px; transform: rotate(90deg); opacity: .6; transition: transform .2s; }
.gm-dugme:hover, .gm-grupa.otvorena .gm-dugme { background: var(--bg-hover); color: var(--t-base); }
.gm-dugme.aktivna { color: var(--primary); background: var(--primary-soft); }
.gm-grupa.otvorena .strelica { transform: rotate(-90deg); }
.gm-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; padding: 6px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card); box-shadow: var(--shadow-lg); display: grid; gap: 2px; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s, transform .16s; z-index: 1300; }
.gm-grupa.otvorena .gm-panel { opacity: 1; transform: none; pointer-events: auto; }
.gm-panel a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--t-base); font-size: 13.5px; white-space: nowrap; }
.gm-panel a:hover { background: var(--bg-hover); text-decoration: none; }
.gm-panel a.aktivna { background: var(--primary-soft); color: var(--primary); }
.gm-panel a svg.ik { width: 17px; height: 17px; color: var(--t-muted); }
.gm-panel a.aktivna svg.ik { color: var(--primary); }
.gm-panel .oznaka-meni { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 8.5px; font-weight: 600; letter-spacing: .04em; padding: 2px 6px;
  border-radius: 999px; background: var(--success-soft); color: var(--success); }
.gm-panel .oznaka-meni.siva { background: var(--bg-muted); color: var(--t-muted); }
.gm-panel .oznaka-meni.plava { background: var(--primary-soft); color: var(--primary); }

/* smer zdesna nalevo */
[dir="rtl"] .meni { border-right: 0; border-left: 1px solid var(--border); }
[dir="rtl"] .meni a.stavka.aktivna::before { left: auto; right: -12px; border-radius: 3px 0 0 3px; }
[dir="rtl"] .meni .oznaka-meni, [dir="rtl"] .gm-panel .oznaka-meni { margin-left: 0; margin-right: auto; }
[dir="rtl"] .putanja svg.ik { transform: scaleX(-1); }
[dir="rtl"] .panel { right: auto; left: 0; }
[dir="rtl"] .gm-panel { left: auto; right: 0; }
[dir="rtl"] .pretraga-dugme span, [dir="rtl"] .panel .red-panela { text-align: right; }
[dir="rtl"] .alat-tabele .pretraga svg { left: auto; right: 12px; }
[dir="rtl"] .alat-tabele .pretraga input { padding-left: 12px; padding-right: 36px; }
@media (min-width: 961px) { [dir="rtl"][data-raspored="plutajuci"] .meni { margin: 12px 12px 12px 0; } }
@media (max-width: 960px) {
  [dir="rtl"] .meni { left: auto; right: 0; transform: translateX(100%); }
  [dir="rtl"] .ljuska.otvoren .meni { transform: none; }
}

/* ================================================================ PRILAGODI: dugme i fioka */
#prilagodi-dugme .tacka-novo { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 0 var(--primary-ring); animation: puls 2s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 var(--primary-ring); } 70% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }
#prilagodi-dugme svg { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
#prilagodi-dugme:hover svg { transform: rotate(35deg); }
html.bez-skrola { overflow: hidden; }
.prilagodi-pozadina { position: fixed; inset: 0; z-index: 1900; background: transparent; opacity: 0; pointer-events: none; transition: opacity .25s; }
.prilagodi-pozadina.otvoren { opacity: 1; pointer-events: auto; }
.prilagodi { position: fixed; top: 0; bottom: 0; right: 0; z-index: 1950; width: min(408px, 100vw); display: flex; flex-direction: column;
  background: var(--bg-card); border-left: 1px solid var(--border); box-shadow: -18px 0 40px -12px rgb(0 0 0 / 0.35);
  transform: translateX(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); visibility: hidden; }
.prilagodi.otvoren { transform: none; visibility: visible; }
[dir="rtl"] .prilagodi { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--border); transform: translateX(-105%); }
[dir="rtl"] .prilagodi.otvoren { transform: none; }
.prilagodi-glava { display: flex; gap: 12px; align-items: flex-start; padding: 18px 18px 16px 20px; border-bottom: 1px solid var(--border); }
.prilagodi-glava .kvadrat { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.prilagodi-glava h2 { font-size: 17px; margin-top: 1px; }
.prilagodi-glava p { color: var(--t-muted); font-size: 12.5px; margin: 2px 0 0; }
.prilagodi-glava .ikonica-dugme { margin-left: auto; flex: none; }
.prilagodi-telo { flex: 1; overflow-y: auto; padding: 4px 20px 12px; overscroll-behavior: contain; }
.prilagodi-sekcija { padding: 16px 0 18px; border-bottom: 1px dashed var(--border); }
.prilagodi-sekcija:last-child { border-bottom: 0; }
.sekcija-glava { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sekcija-glava .vrednost { font-size: 12px; font-weight: 600; color: var(--primary); }
.prilagodi-sekcija > .sitno { margin: 4px 0 12px; }
.opcije { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opcije.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcije.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.opcija { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 6px 6px 8px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-hover); color: var(--t-muted); font: 600 12px/1.2 Inter, system-ui, sans-serif; cursor: pointer; text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .15s, color .15s; }
.opcija:hover { border-color: var(--t-light); transform: translateY(-1px); color: var(--t-base); }
.opcija[aria-pressed="true"] { border-color: var(--primary); color: var(--t-base); box-shadow: 0 0 0 3px var(--primary-ring); }
.opcija:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kvacica-o { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); display: grid; place-items: center;
  transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 0 0 2px var(--bg-card); }
.kvacica-o svg { width: 12px; height: 12px; stroke: var(--bg-card); fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.opcija[aria-pressed="true"] .kvacica-o { transform: scale(1); }
[dir="rtl"] .kvacica-o { right: auto; left: -7px; }
.uzorci { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.uzorak { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; background: none; padding: 3px; cursor: pointer; transition: border-color .15s, transform .15s; }
.uzorak i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--uz) 55%, #fff), var(--uz) 62%); box-shadow: inset 0 -3px 6px rgb(0 0 0 / 0.18); }
.uzorak:hover { transform: scale(1.08); }
.uzorak[aria-pressed="true"] { border-color: var(--uz); }
.uzorak[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 14px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-2px) rotate(45deg); }
.uzorak:focus-visible { outline: 2px solid var(--uz); outline-offset: 3px; }
.prilagodi-dno { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--border); background: var(--bg-card); }
.prilagodi-dno .dugme { justify-content: center; height: 40px; }
.prilagodi-dno .dugme svg.ik { width: 16px; height: 16px; }
.prilagodi-dno .sitno { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.prilagodi-dno .sitno svg.ik { width: 14px; height: 14px; }

/* skice opcija (mali prikazi rasporeda) */
.slicica { position: relative; display: block; height: 54px; border-radius: 8px; overflow: hidden; background: var(--bg-body); border: 1px solid var(--border-soft); }
.slicica i { position: absolute; display: block; border-radius: 3px; }
.sl-tema .m { left: 0; top: 0; bottom: 0; width: 26%; border-radius: 0; }
.sl-tema .t { left: 32%; right: 6%; top: 10%; height: 12%; }
.sl-tema .k { top: 32%; height: 56%; width: 19%; }
.sl-tema .k1 { left: 32%; } .sl-tema .k2 { left: 55%; } .sl-tema .k3 { left: 78%; width: 16%; }
.sl-light { background: #EEF2F7; } .sl-light .m { background: #fff; border-right: 1px solid #E2E8F0; } .sl-light .t { background: var(--primary-strong); opacity: .85; } .sl-light .k { background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .12); }
.sl-dark { background: #0B1120; } .sl-dark .m { background: #141B2D; } .sl-dark .t { background: var(--primary); opacity: .85; } .sl-dark .k { background: #1A2237; }
.sl-sistem { background: linear-gradient(90deg, #EEF2F7 0 50%, #0B1120 50% 100%); }
.sl-sistem .m { background: #fff; border-right: 1px solid #E2E8F0; }
.sl-sistem .t { background: linear-gradient(90deg, var(--primary-strong) 0 50%, var(--primary) 50%); opacity: .85; }
.sl-sistem .k1 { background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .12); } .sl-sistem .k2 { background: #1A2237; } .sl-sistem .k3 { background: #1A2237; }
.sl-gustina { display: flex; flex-direction: column; justify-content: center; padding: 0 9px; }
.sl-gustina i { position: static; height: 5px; border-radius: 3px; background: var(--t-light); opacity: .55; }
.sl-gustina i:first-child { background: var(--primary); opacity: .9; width: 60%; }
.sl-zbijeno { gap: 3px; } .sl-obicna { gap: 6px; } .sl-prozracno { gap: 10px; padding: 0 13px; }
.sl-raspored .m, .sl-sirina .m { background: var(--t-light); opacity: .45; }
.sl-raspored .t, .sl-sirina .t { background: var(--t-light); opacity: .3; }
.sl-raspored .k, .sl-sirina .k { background: var(--primary); opacity: .5; }
.sl-bocni .m { left: 0; top: 0; bottom: 0; width: 28%; border-radius: 0; } .sl-bocni .t { left: 34%; right: 6%; top: 8%; height: 11%; }
.sl-bocni .k1 { left: 34%; width: 27%; top: 30%; bottom: 10%; } .sl-bocni .k2 { left: 66%; right: 6%; top: 30%; bottom: 10%; }
.sl-uzak .m { left: 0; top: 0; bottom: 0; width: 11%; border-radius: 0; } .sl-uzak .t { left: 17%; right: 6%; top: 8%; height: 11%; }
.sl-uzak .k1 { left: 17%; width: 36%; top: 30%; bottom: 10%; } .sl-uzak .k2 { left: 58%; right: 6%; top: 30%; bottom: 10%; }
.sl-plutajuci .m { left: 6%; top: 9%; bottom: 9%; width: 24%; border-radius: 4px; opacity: .6; } .sl-plutajuci .t { left: 36%; right: 6%; top: 9%; height: 11%; border-radius: 3px; }
.sl-plutajuci .k1 { left: 36%; width: 26%; top: 30%; bottom: 10%; } .sl-plutajuci .k2 { left: 67%; right: 6%; top: 30%; bottom: 10%; }
.sl-gornji .m { left: 0; right: 0; top: 0; height: 16%; border-radius: 0; } .sl-gornji .t { left: 6%; right: 50%; top: 24%; height: 9%; }
.sl-gornji .k1 { left: 6%; width: 42%; top: 40%; bottom: 10%; } .sl-gornji .k2 { left: 52%; right: 6%; top: 40%; bottom: 10%; }
.sl-sirina .m { left: 0; right: 0; top: 0; height: 15%; border-radius: 0; } .sl-sirina .t { display: none; }
.sl-puna .k { left: 6%; right: 6%; top: 26%; bottom: 10%; } .sl-uokvirena .k { left: 26%; right: 26%; top: 26%; bottom: 10%; }
.sl-uokvirena::before, .sl-uokvirena::after { content: ""; position: absolute; top: 26%; bottom: 10%; width: 0; border-left: 1px dashed var(--t-light); opacity: .6; }
.sl-uokvirena::before { left: 22%; } .sl-uokvirena::after { right: 22%; }
.sl-smer .m { top: 0; bottom: 0; width: 22%; border-radius: 0; background: var(--t-light); opacity: .45; }
.sl-smer .r { height: 6px; background: var(--t-light); opacity: .5; } .sl-smer .r1 { top: 22%; width: 46%; background: var(--primary); opacity: .8; } .sl-smer .r2 { top: 44%; width: 38%; } .sl-smer .r3 { top: 66%; width: 30%; }
.sl-ltr .m { left: 0; } .sl-ltr .r { left: 28%; } .sl-rtl .m { right: 0; } .sl-rtl .r { right: 28%; }
.sl-smer b { position: absolute; bottom: 4px; font: 700 12px/1 Inter, sans-serif; color: var(--primary); }
.sl-ltr b { right: 8px; } .sl-rtl b { left: 8px; }
@media (max-width: 640px) { .opcije.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uzorci { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .prilagodi, .prilagodi-pozadina, .ljuska { transition: none; } #prilagodi-dugme .tacka-novo { animation: none; } }
@media (max-width: 640px) { .kartica-glava > .kal-kontrole { flex: 1 1 100%; } .kal-kontrole select { max-width: 100%; width: 100%; } }

/* ================================================================ UŽIVO: odašiljač koji pulsira */
.uzivo-znak { --uz-boja: #EF4444; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 5px; border-radius: 999px; flex: none;
  background: color-mix(in srgb, var(--uz-boja) 14%, transparent); color: var(--uz-boja); border: 1px solid color-mix(in srgb, var(--uz-boja) 35%, transparent);
  font: 700 9.5px/1 "JetBrains Mono", monospace; letter-spacing: 0.1em; white-space: nowrap; }
:root[data-theme="light"] .uzivo-znak { --uz-boja: #DC2626; }
.meni .uzivo-znak, .gm-panel .uzivo-znak { margin-left: auto; }
[dir="rtl"] .meni .uzivo-znak, [dir="rtl"] .gm-panel .uzivo-znak { margin-left: 0; margin-right: auto; }
.uzivo-znak .odasiljac { width: 18px; height: 12px; overflow: visible; }
.odasiljac .talas { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; opacity: 0; }
.odasiljac .srce { fill: currentColor; }
.odasiljac .krug-puls { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; }
.uzivo-znak.sveze b { animation: uzivo-treperi 1.4s ease-in-out infinite; }
.uzivo-znak.sveze .t1 { animation: uzivo-talas 1.8s ease-out infinite; }
.uzivo-znak.sveze .t2 { animation: uzivo-talas 1.8s ease-out 0.35s infinite; }
.uzivo-znak.sveze .krug-puls { animation: uzivo-puls 1.8s ease-out infinite; }
.uzivo-znak.sveze .srce { animation: uzivo-srce 1.8s ease-in-out infinite; }
@keyframes uzivo-treperi { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes uzivo-talas { 0% { opacity: 0; } 25% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes uzivo-puls { 0% { opacity: 0.55; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes uzivo-srce { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.uzivo-znak.staro { --uz-boja: var(--t-muted); }
.uzivo-znak.staro .talas { opacity: 0.35; }
/* mala varijanta (u kartici pina, ispred „danas …“) */
.uzivo-znak.mala { height: 16px; padding: 0 3px; gap: 0; margin-right: 6px; vertical-align: -3px; }
.uzivo-znak.mala .odasiljac { width: 16px; height: 11px; }
.tt-uzivo { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
/* zaglavlje strane Danas */
.zaglavlje-strane .akcije .uzivo-znak { height: 28px; padding: 0 12px 0 8px; font-size: 11px; gap: 7px; }
.zaglavlje-strane .akcije .uzivo-znak .odasiljac { width: 24px; height: 16px; }
.zaglavlje-strane .akcije { display: flex; gap: 10px; align-items: center; }
/* uzak meni: crvena tačka koja pulsira na ikonici */
.ljuska.uzak .meni a.stavka.uzivo-sveze { position: relative; }
.ljuska.uzak .meni a.stavka.uzivo-sveze::after { content: ""; position: absolute; top: 7px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: #EF4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); animation: uzivo-tacka 1.8s ease-out infinite; }
@keyframes uzivo-tacka { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) {
  .uzivo-znak.sveze b, .uzivo-znak.sveze .talas, .uzivo-znak.sveze .krug-puls, .uzivo-znak.sveze .srce, .ljuska.uzak .meni a.stavka.uzivo-sveze::after { animation: none; }
  .uzivo-znak.sveze .talas { opacity: 1; }
}
@media (min-width: 961px) { .ljuska.uzak .meni .uzivo-znak { display: none; } }

/* mapa: prikaz preko celog ekrana */
.mapa.ceo-ekran, .mapa:fullscreen { border-radius: 0; width: calc(100vw / var(--z)); height: calc(100vh / var(--z)) !important; max-height: none; }
.maplibregl-ctrl-fullscreen, .maplibregl-ctrl-shrink { width: 34px; height: 34px; }
/* info u kartici pina: oblačić ispod ikonice i u granicama kartice */
.maplibregl-popup .info::after { bottom: calc(100% + 6px); top: auto; left: auto; right: -10px; transform: none; width: 200px; max-width: 200px; }
.maplibregl-popup .info { vertical-align: -2px; }

/* tip mape: Standardna | Satelitska | Vektor + nijanse vektorske mape (boja mape – boja ulica) */
.izbor-podloge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nijanse { display: inline-flex; gap: 6px; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-muted); }
.nijansa { width: 30px; height: 30px; border-radius: 50%; padding: 3px; border: 2px solid transparent; background: none; cursor: pointer; transition: transform .15s, border-color .15s; }
.nijansa i { display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);
  box-shadow: inset 0 0 0 1px rgb(127 127 127 / 0.45); }
.nijansa:hover { transform: scale(1.08); }
.nijansa[aria-pressed="true"] { border-color: var(--primary); }
.nijansa:focus-visible { outline: 2px solid var(--primary-ring); outline-offset: 2px; }
.maplibregl-popup.kartica-parking .maplibregl-popup-content { padding: 10px 30px 10px 12px; }
#staze-cip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* natpisi: padajući meni na samoj mapi (gore levo; samo vektorska i satelitska) */
.maplibregl-ctrl.natpisi-ctrl { margin: 10px 0 0 10px; position: relative; }
.natpisi-dugme { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px 0 12px; border-radius: 8px; cursor: pointer;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent); color: var(--t-base); border: 1px solid var(--border); box-shadow: var(--shadow-card);
  font: 600 12px/1 Inter, system-ui, sans-serif; backdrop-filter: blur(4px); }
.natpisi-dugme:hover { border-color: var(--t-light); }
.natpisi-dugme:focus-visible { outline: 2px solid var(--primary-ring); outline-offset: 2px; }
.natpisi-dugme svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; transform: rotate(90deg); transition: transform .15s; }
.natpisi-dugme[aria-expanded="true"] svg { transform: rotate(-90deg); }
.natpisi-panel { position: absolute; left: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px; border-radius: 10px; background: var(--bg-card);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); color: var(--t-base); font: 500 13px/1.3 Inter, system-ui, sans-serif; }
[dir="rtl"] .natpisi-panel { left: auto; right: 0; }
.natpisi-panel .pod-izbor { margin-left: 22px; font-size: 12.5px; color: var(--t-muted); }
[dir="rtl"] .natpisi-panel .pod-izbor { margin-left: 0; margin-right: 22px; }
/* sloj „Za bicikliste“: čip + strelica za izbor vrsta */
.parking-grupa { position: relative; display: inline-flex; align-items: center; }
.parking-grupa .cip-parking { border-radius: 999px 0 0 999px; border-right-width: 0; height: 38px; padding: 0 6px 0 10px; gap: 2px; cursor: default; }
.cip-parking.aktivno { color: var(--t-base); border-color: var(--boja); background: color-mix(in srgb, var(--boja) 12%, transparent); }
.parking-sve { position: relative; display: grid; place-items: center; width: 26px; height: 30px; margin-right: 2px; cursor: pointer; }
.parking-sve input { position: absolute; opacity: 0; width: 0; height: 0; }
.parking-sve .kvacica { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--t-light); display: grid; place-items: center; }
.parking-sve input:checked + .kvacica, .parking-sve input:indeterminate + .kvacica { background: var(--boja); border-color: var(--boja); }
.parking-sve input:checked + .kvacica::after { content: ""; width: 4px; height: 8px; border: solid #0B1120; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.parking-sve input:indeterminate + .kvacica::after { content: ""; width: 8px; height: 2px; border-radius: 1px; background: #0B1120; }
.parking-sve input:focus-visible + .kvacica { outline: 2px solid var(--primary-ring); outline-offset: 2px; }
.ikonica-parkinga { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.ikonica-parkinga img { width: 22px; height: 22px; margin: 0; opacity: 0.35; filter: grayscale(1); transition: opacity .15s, filter .15s, transform .15s; }
.ikonica-parkinga:hover { background: var(--bg-hover); }
.ikonica-parkinga:hover img { opacity: 0.7; }
.ikonica-parkinga[aria-pressed="true"] img { opacity: 1; filter: none; }
.ikonica-parkinga:active img { transform: scale(0.9); }
.ikonica-parkinga:focus-visible { outline: 2px solid var(--primary-ring); outline-offset: 1px; }.cip-strelica { height: 38px; padding: 0 10px 0 8px; border-radius: 0 999px 999px 0; }
.cip-strelica svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; transform: rotate(90deg); transition: transform .15s; }
.cip-strelica[aria-expanded="true"] svg { transform: rotate(-90deg); }
.cip-strelica:hover { color: var(--t-base); }
.parking-grupa:has(.cip-parking.aktivno) .cip-strelica { color: var(--t-base); border-color: #2f7de1; background: color-mix(in srgb, #2f7de1 12%, transparent); }
.panel.tipovi-parkinga { left: 0; right: auto; top: calc(100% + 6px); width: 280px; padding: 10px; }
.panel.tipovi-parkinga { padding-top: 34px; }
.panel-x { position: absolute; top: 6px; right: 6px; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 7px;
  background: transparent; color: var(--t-muted); cursor: pointer; flex: none; }
.panel-x:hover, .panel-x:focus-visible { color: var(--t-base); background: var(--bg-hover); outline: none; }
.panel-x svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
[dir="rtl"] .panel.tipovi-parkinga { left: auto; right: 0; }
@media (max-width: 960px) { .panel.tipovi-parkinga { position: absolute; left: 0; right: auto; top: calc(100% + 6px); width: min(300px, calc(100vw - 40px)); } }
/* kartica NS bike stanice */
.nsb-slika-omot { position: relative; display: block; width: 100%; max-width: 236px; margin: 8px 0 2px; padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: var(--bg-muted); cursor: zoom-in; }
.maplibregl-popup .nsb-slika { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.nsb-slika-broj { position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; font: 600 10.5px/1.6 Inter, sans-serif;
  color: #fff; background: rgb(0 0 0 / 0.55); }
.nsb-uzivo .nsb-brojevi { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.nsb-uzivo .nsb-meta { display: flex; align-items: center; gap: 8px; }
.nsb-uzivo .nsb-brojevi b { font-size: 15px; }
.uskoro-uzivo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--t-muted); background: var(--bg-muted); border: 1px dashed var(--border); }
.uskoro-uzivo svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
/* staze: čip sa tri linije (izdvojena staza, traka, zajednička) i legenda u padajućem panelu */
.cip-staze .cip-naziv { font-weight: 600; margin: 0 8px 0 2px; white-space: nowrap; }
.linija-staze { display: inline-block; flex: none; width: 24px; height: 8px; border-radius: 4px; background: var(--staza-obod); position: relative; }
.linija-staze::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 2px; border-radius: 1px; background: var(--b); }
.linija-staze.isprekidana::after { background: repeating-linear-gradient(90deg, var(--b) 0 4px, transparent 4px 7px); }
.ikonica-staze { width: 34px; }
.ikonica-staze .linija-staze { opacity: 0.35; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.ikonica-staze:hover .linija-staze { opacity: 0.7; }
.ikonica-staze[aria-pressed="true"] .linija-staze { opacity: 1; filter: none; }
.tipovi-staza .red-staze { align-items: flex-start; }
.tipovi-staza .red-staze input { margin-top: 2px; }
.tipovi-staza .red-staze .linija-staze { margin-top: 5px; }
.tipovi-staza .red-staze small { display: block; color: var(--t-muted); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
.panel.tipovi-staza { width: 300px; }
.cip .linija-staze { width: 24px; height: 8px; border-radius: 4px; background: var(--staza-obod); }
.cip .ikonica-staze .linija-staze { opacity: 0.35; filter: grayscale(1); }
.cip .ikonica-staze:hover .linija-staze { opacity: 0.7; }
.cip .ikonica-staze[aria-pressed="true"] .linija-staze { opacity: 1; filter: none; }
.staze-grupa:has(.cip-staze.aktivno) .cip-strelica { color: var(--t-base); border-color: var(--staza); background: color-mix(in srgb, var(--staza) 12%, transparent); }
.mapa-raspored aside .info::after { left: auto; right: -10px; transform: none; }
/* mapa: kružići boja idu u red sa natpisom „Tip mape“, pa grupa ne menja širinu i sve kontrole ostaju u jednom redu */
.mapa-alat { gap: 14px 18px; }
.mapa-alat .grupa-kontrola:has(.izbor-podloge) { position: relative; }
.mapa-alat .izbor-podloge .nijanse { position: absolute; top: -7px; right: 0; gap: 2px; padding: 1px; }
.mapa-alat .izbor-podloge .nijansa { width: 22px; height: 22px; padding: 2px; }
.mapa-alat .segment button { padding: 6px 9px; }
/* panel „Na mapi“: NS bike stanice su uživo (oznaka i vreme poslednjeg osvežavanja) */
.grupa-tacaka .panel.tipovi-parkinga { width: 310px; }
.red-izbora.red-uzivo > span:not(.uzivo-znak) { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.red-izbora .nsb-osvezeno { font-size: 11px; color: var(--t-light); }
.red-izbora .uzivo-znak { margin-left: auto; }
/* ---------------------------------------------------------------- Danas uživo */
.danas-uzivo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-bottom: 10px; }
.danas-osvezeno { font-size: 13px; color: var(--t-muted); }
.danas-osvezeno b { color: var(--t-base); font-family: "JetBrains Mono", monospace; font-size: 12.5px; }
.danas-osvezeno .upozorenje { color: var(--warning); font-weight: 600; }
.danas-traka { width: 110px; height: 4px; border-radius: 4px; background: var(--bg-muted); overflow: hidden; }
.danas-traka span { display: block; height: 100%; background: var(--primary); transition: width .4s; }
.danas-obavestenje { padding: 10px 14px; border-radius: 10px; background: var(--warning-soft); color: var(--warning); font-size: 13.5px; }
.danas-mreza { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.danas-mreza.dole { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.danas-kontrole { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.danas .legenda-grafika { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--t-muted); margin-bottom: 6px; }
.danas .legenda-grafika > span { display: inline-flex; align-items: center; gap: 6px; }
.danas .legenda-grafika i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.danas .legenda-grafika i.isprekidano { height: 0; border-top: 2px dashed; border-radius: 0; }
.danas .legenda-grafika img { width: 18px; height: 18px; }
.danas-mapa { height: 420px; }
.danas-tabela td { padding: 9px 12px; }
.danas-tabela .stanica-celija { min-width: 170px; }
.danas-tabela tbody tr { cursor: pointer; }
.danas-tabela tbody tr.izabran { background: var(--primary-soft); }
.danas-tabela tbody tr:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.danas-spark { display: block; }
.danas-spark rect { fill: var(--g-bicikl); }
.danas-spark rect.buduce { fill: var(--border); }
.danas-spark rect.nema { fill: var(--danger); opacity: .6; }
.danas-razlika { display: inline-block; font: 600 11.5px/1 "JetBrains Mono", monospace; padding: 4px 7px; border-radius: 6px; background: var(--bg-muted); color: var(--t-muted); white-space: nowrap; }
.danas-razlika.ton-vise, .pin .pin-broj.ton-vise { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.danas-razlika.ton-manje, .pin .pin-broj.ton-manje { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.danas-stanje { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--t-muted); white-space: nowrap; }
.danas-stanje i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.danas-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.danas-mini-k { display: grid; gap: 6px; align-content: start; }
.danas-mini-k .eyebrow { display: flex; align-items: center; gap: 8px; }
.danas-mini-k .vrednost { font: 700 26px/1.1 "Inter Tight", sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 1200px) { .danas-mreza, .danas-mreza.dole { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .danas-mini { grid-template-columns: minmax(0, 1fr); } .danas-mapa { height: 340px; } }
.danas-tabela-omot { max-height: 470px; overflow-y: auto; overscroll-behavior: contain; border-radius: 10px; }
.danas-tabela-omot thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-card); }
.danas-kontrole select { max-width: 280px; }
@media (max-width: 640px) { .danas-kontrole { flex: 1 1 100%; } .danas-kontrole select { max-width: 100%; width: 100%; } }
/* Danas: info oblačići se ne seku (KPI kartica i tabela sa skrolom) */
.danas .kpi { overflow: visible; }
.danas .kpi::after { border-radius: inherit; }
.danas .kpi .info::after { left: auto; right: -12px; transform: none; }
.danas-tabela th .info::after { bottom: auto; top: calc(100% + 8px); left: auto; right: -10px; transform: none; text-transform: none; letter-spacing: 0; }
.danas-tabela th[data-sort] { cursor: pointer; }
.danas-tabela th[data-sort]:hover, .danas-tabela th.sortirano { color: var(--t-base); }
.danas-tabela th.bez-sorta { cursor: default; }
.danas-tabela .strelica-sort { margin-left: 4px; font-size: 9px; color: var(--primary); }
.danas-tabela-omot { max-height: 336px; }
.danas-pretraga { width: 240px; max-width: 100%; }
.izbor-vremena { width: 260px; }
.izbor-vremena .jedinica { color: var(--t-light); font-family: "JetBrains Mono", monospace; font-size: 11.5px; }
.izbor-vremena .onemoguceno { opacity: .55; cursor: default; }
.izbor-vremena small { display: block; color: var(--t-light); font-size: 11px; }
@media (max-width: 640px) { .danas-pretraga { width: 100%; } }
.danas-pretraga { position: relative; align-self: center; }
.danas-pretraga svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--t-light); }
.danas-pretraga input { width: 100%; padding-left: 36px; }
[dir="rtl"] .danas-pretraga svg { left: auto; right: 12px; }
[dir="rtl"] .danas-pretraga input { padding-left: 12px; padding-right: 36px; }
/* vreme iste visine kao tabela brojača (tabela: najviše 4 reda, ostalo skrol) */
.danas-tabela-omot { max-height: 280px; }
.danas-mreza.dole { align-items: stretch; }
.danas-vreme-kartica { display: flex; flex-direction: column; }
.danas-vreme-grafik { flex: 1 1 0; height: auto; min-height: 140px; overflow: hidden; }
.izbor-vremena { padding-top: 38px; }
.izbor-vremena .skala-napomena { margin: 8px 4px 2px; border-top: 1px solid var(--border-soft); padding-top: 8px; }
@media (max-width: 1200px) { .danas-vreme-grafik { min-height: 240px; } }
.dan-panel .dan-glava { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.dan-panel .dan-glava p { margin: 0; }
.danas-desno { display: grid; gap: 10px; justify-items: end; }
.danas-dan { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.danas-dan input[type="date"] { height: 32px; }
.danas-dan button:disabled { opacity: .45; cursor: default; }
@media (max-width: 760px) { .danas-desno { justify-items: start; } }
/* ---------------------------------------------------------------- izbor datuma (assets/datum.js) */
.izbor-datuma { position: relative; display: inline-flex; }
.izbor-datuma-polje { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; border: 0 !important; padding: 0 !important; }
.izbor-datuma-dugme { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--t-base); font: 500 13px Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.izbor-datuma-dugme:hover { border-color: var(--t-light); }
.izbor-datuma-dugme[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.izbor-datuma-dugme svg { width: 16px; height: 16px; stroke: var(--primary); fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
.izbor-datuma-dugme b { font-weight: 600; color: var(--t-muted); margin-right: 2px; }
.izbor-datuma-danas { font: 600 10px/1 "JetBrains Mono", monospace; font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-soft); padding: 3px 6px; border-radius: 5px; }
.izbor-datuma-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1400; width: 316px; padding: 14px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: grid; gap: 10px;
  animation: izd-ulaz .14s ease-out; }
.izbor-datuma-panel.desno { left: auto; right: 0; }
@keyframes izd-ulaz { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .izbor-datuma-panel { animation: none; } }
.izd-glava { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.izd-naslov { display: flex; gap: 2px; }
.izd-mesec, .izd-godina { border: 0; background: transparent; color: var(--t-base); font: 700 15px "Inter Tight", Inter, sans-serif; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.izd-godina { color: var(--t-muted); }
.izd-mesec:hover, .izd-godina:hover, .izd-mesec.aktivno, .izd-godina.aktivno { background: var(--bg-hover); color: var(--primary); }
.izd-strelica { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--t-muted); cursor: pointer; }
.izd-strelica:hover { color: var(--t-base); background: var(--bg-hover); }
.izd-strelica svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.izd-strelica[data-k="-1"] svg { transform: rotate(180deg); }
.izd-nedelja, .izd-mreza { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.izd-nedelja span { text-align: center; font: 600 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--t-light); padding: 4px 0 6px; }
.izd-nedelja span.vikend { color: var(--orange); }
.izd-dan { position: relative; height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--t-base); cursor: pointer;
  display: grid; place-items: center; padding: 0 0 5px; font: 500 13px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.izd-dan.vikend { color: var(--orange); }
.izd-dan:hover:not(.ugaseno) { background: var(--bg-hover); }
.izd-dan.danas::after { content: ""; position: absolute; inset: 2px; border: 1.5px solid var(--primary); border-radius: 8px; pointer-events: none; }
.izd-dan.izabran { background: var(--primary); color: #fff; font-weight: 700; }
.izd-dan.izabran .izd-traka { background: rgb(255 255 255 / .75); }
.izd-dan.ugaseno { color: var(--t-light); opacity: .38; cursor: not-allowed; }
.izd-dan:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.izd-traka { position: absolute; left: 30%; right: 30%; bottom: 5px; height: 3px; border-radius: 2px; background: transparent; }
.izd-traka.n0, .izd-legenda i.n0 { background: var(--g-top-1); }
.izd-traka.n1, .izd-legenda i.n1 { background: var(--g-top-2); }
.izd-traka.n2, .izd-legenda i.n2 { background: var(--g-top-3); }
.izd-traka.n3, .izd-legenda i.n3 { background: var(--g-top-4); }
.izd-traka.n4, .izd-legenda i.n4 { background: var(--g-top-5); }
.izd-mreza-veliko { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 0; }
.izd-veliko { height: 44px; border: 1px solid var(--border-soft); border-radius: 10px; background: transparent; color: var(--t-base); font: 600 13px Inter, sans-serif; cursor: pointer; }
.izd-veliko:hover:not(.ugaseno) { background: var(--bg-hover); border-color: var(--border); }
.izd-veliko.izabran { background: var(--primary); border-color: var(--primary); color: #fff; }
.izd-veliko.ugaseno { opacity: .35; cursor: not-allowed; }
.izd-precice { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.izd-precica { border: 1px solid var(--border); background: var(--bg-muted); color: var(--t-base); font: 600 12px Inter, sans-serif; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.izd-precica:hover { border-color: var(--primary); color: var(--primary); }
.izd-dno { display: grid; gap: 6px; }
.izd-opis { font-size: 12.5px; color: var(--t-muted); min-height: 18px; }
.izd-opis b { color: var(--t-base); font-variant-numeric: tabular-nums; }
.izd-legenda { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--t-light); }
.izd-legenda i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; }
@media (max-width: 520px) {
  .izbor-datuma-panel { position: fixed; left: 8px; right: 8px; top: auto; bottom: max(8px, env(safe-area-inset-bottom, 0px)); width: auto; }
  .izbor-datuma-panel.desno { left: 8px; right: 8px; }
  .izd-dan { height: 42px; }
}
@media (min-width: 521px) { .izbor-datuma-panel.gore { top: auto; bottom: calc(100% + 8px); animation-name: izd-ulaz-gore; } }
@keyframes izd-ulaz-gore { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Biciklističke staze (staze.html) */
.st-linija { display: inline-block; flex: none; width: 24px; height: 5px; border-radius: 3px; background: var(--boja); box-shadow: 0 0 0 1.5px var(--staza-obod); }
.st-linija.isprekidana { background: repeating-linear-gradient(90deg, var(--boja) 0 6px, transparent 6px 10px); box-shadow: none; }
.st-linija.mala { width: 16px; height: 4px; margin-right: 6px; vertical-align: 2px; }
.st-tacka { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; flex: none; }

.st-raspored { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
.st-mapa { height: 640px; }
.st-strana { height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
.st-blok { padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.st-blok:last-child { border-bottom: 0; margin-bottom: 0; }
.st-blok > .eyebrow { display: flex; align-items: center; gap: 2px; margin-bottom: 10px; }
.st-vrsta, .st-klasa { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.st-klasa { grid-template-columns: auto minmax(0, 1fr) auto; cursor: default; }
.st-vrsta:hover { background: var(--bg-hover); }
.st-vrsta input { accent-color: var(--primary); margin: 0; }
.st-vrsta b, .st-klasa b { font-weight: 600; font-size: 13px; }
.st-vrsta small, .st-klasa small { display: block; font-size: 11.5px; color: var(--t-muted); line-height: 1.35; margin-top: 2px; }
.st-vrsta.mala { grid-template-columns: auto auto minmax(0, 1fr); padding: 6px 8px; margin: -4px 0 6px; }
.st-vrsta.mala span { font-size: 12.5px; }
.st-vrsta-km { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--t-muted); white-space: nowrap; }
.st-vrsta-km b { font-size: 15px; color: var(--t-base); }
.st-klasa > i { width: 14px; height: 14px; border-radius: 4px; }
.st-red { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none;
  color: inherit; font: inherit; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.st-red:hover, .st-red:focus-visible { background: var(--bg-hover); outline: none; }
.st-red.izabran { background: var(--primary-soft); }
.st-red > span:first-child { display: grid; gap: 5px; min-width: 0; }
.st-red-ime { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.st-red-ime small { display: block; font-weight: 400; font-size: 11.5px; color: var(--t-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-red-desno { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--t-base); white-space: nowrap; }
.st-traka-mini { display: block; height: 4px; border-radius: 2px; background: var(--border-soft); overflow: hidden; }
.st-traka-mini i { display: block; height: 100%; border-radius: 2px; background: var(--primary); transform-origin: left; animation: st-rast .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes st-rast { from { transform: scaleX(0); } }
.st-cip { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--bg-muted); color: var(--t-muted); font-size: 10.5px; font-weight: 500; vertical-align: 1px; }
.st-gradijent { display: grid; grid-template-columns: repeat(3, 1fr); font-size: 11px; color: var(--t-light); font-family: "JetBrains Mono", monospace; }
.st-gradijent i { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--g); margin-bottom: 5px; }
.st-gradijent span:nth-child(3) { text-align: center; }
.st-gradijent span:last-child { text-align: right; }
.st-slozena { display: flex; gap: 2px; height: 10px; margin: 10px 0 2px; border-radius: 5px; overflow: hidden; }
.st-slozena.mala { height: 7px; width: 84px; margin: 0; border-radius: 4px; }
.st-napomena { font-size: 12px; color: var(--t-muted); line-height: 1.5; margin: 10px 0 0; }
.kartica-glava + .st-napomena { margin: -6px 0 10px; }

.st-dole { align-items: start; }
.st-tabela-omot { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; border-radius: 10px; }
.st-tabela-omot thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-card); }
.st-tabela td { padding: 9px 12px; }
.st-tabela td b { font-weight: 600; }
.st-tabela td small { display: block; font-size: 11px; color: var(--t-muted); }
.st-tabela td.broj small { display: inline; }
.st-tabela tbody tr { cursor: pointer; }
.st-tabela tbody tr.izabran { background: var(--primary-soft); }
.st-tabela tbody tr:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.st-tabela th[data-sort]:hover, .st-tabela th.sortirano { color: var(--t-base); }
.st-tabela th.bez-sorta { cursor: default; }
.st-tabela .strelica-sort { margin-left: 4px; font-size: 9px; color: var(--primary); }
.st-strane { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--bg-muted); color: var(--t-muted); }
.st-strane-obe { background: var(--success-soft); color: var(--success); }
.st-strane-delom { background: var(--warning-soft); color: var(--warning); }
.st-pretraga { position: relative; width: 220px; max-width: 100%; align-self: center; }
.st-pretraga svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--t-light); }
.st-pretraga input { width: 100%; padding-left: 36px; }
[dir="rtl"] .st-pretraga svg { left: auto; right: 12px; }
.st-delovi-grafik { min-height: 400px; cursor: pointer; }
.st-delovi-omot { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.st-metod-mreza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.st-metod-mreza h3 { font-size: 13px; margin: 0 0 6px; }
.st-metod-mreza p { font-size: 12.5px; color: var(--t-muted); line-height: 1.55; margin: 0; }
.st-metod-mreza p b { color: var(--t-base); font-weight: 600; }

.maplibregl-popup.kartica-staze .maplibregl-popup-content { padding: 10px 30px 10px 12px; font-size: 12.5px; }
.kartica-staze .tt-red.sitno:empty { display: none; }
.veza-dugme { border: 0; background: none; padding: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; }
.veza-dugme:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .st-raspored { grid-template-columns: minmax(0, 1fr); }
  .st-strana { height: auto; min-height: 0; max-height: 620px; }
  .st-metod-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .st-mapa { height: 460px; }
  .st-metod-mreza { grid-template-columns: minmax(0, 1fr); }
  .st-pretraga { width: 100%; }
  .st-tabela .st-slozena.mala { width: 54px; }
}
.st-red-ime small.st-cip { display: inline-block; white-space: nowrap; vertical-align: middle; line-height: 1.5; margin-top: -2px; }
.st-tabela td.broj { white-space: nowrap; }
@media (max-width: 640px) { #st-mod, #dg-mera { flex-wrap: wrap; } }

.st-pokr { display: grid; gap: 4px; min-width: 110px; }
.st-pokr small { font-size: 11px; color: var(--t-muted); white-space: nowrap; }
.st-krofna { height: 300px; cursor: pointer; }
.st-strana .krofna-okvir { border-top: 0; margin-top: 0; padding-top: 0; }
.st-strana .krofna-okvir .st-napomena { margin-top: 4px; }
.st-strana .krofna-okvir .st-napomena b { color: var(--t-base); }
.st-dole + .st-dole { margin-top: 22px; }

/* ---------------------------------------------------------------- meni: grupe se otvaraju i zatvaraju; bez trake za skrol */
.meni { scrollbar-width: none; }
.meni::-webkit-scrollbar { display: none; }
.meni .grupa-glava { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; color: var(--t-light); font: inherit;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.meni .grupa-glava:hover { background: var(--bg-hover); color: var(--t-base); }
.meni .grupa-glava:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.meni .grupa-glava .eyebrow { flex: 1; padding: 0; color: inherit; }
.meni .grupa-ikona { display: none; }
.meni .grupa-strelica { width: 14px; height: 14px; flex: none; transition: transform .22s ease; }
.meni .grupa.otvorena .grupa-strelica { transform: rotate(90deg); }
.meni .grupa-broj { display: none; font: 600 9.5px/1 "JetBrains Mono", monospace; padding: 3px 6px; border-radius: 999px; background: var(--bg-muted); color: var(--t-muted); }
.meni .grupa:not(.otvorena) .grupa-broj { display: inline-block; }
.meni .grupa-telo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.meni .grupa:not(.otvorena) .grupa-telo { grid-template-rows: 0fr; }
.meni .grupa-unutra { min-height: 0; overflow: hidden; margin: 0 -12px; padding: 0 12px; }
.meni .grupa:not(.otvorena) .grupa-unutra { visibility: hidden; transition: visibility 0s .25s; }
.ljuska.uzak .meni .grupa-glava { display: none; }
.ljuska.uzak .meni .grupa-telo { grid-template-rows: 1fr; }
.ljuska.uzak .meni .grupa-unutra { visibility: visible; }
@media (max-width: 960px) { .ljuska.uzak .meni .grupa-glava { display: flex; } }
@media (prefers-reduced-motion: reduce) { .meni .grupa-telo, .meni .grupa-strelica { transition: none; } }

/* predlog A — „linija“: stavke vise o tankoj liniji ispod naslova grupe, kao grane */
.ljuska:not(.uzak) .meni[data-stil="linija"] .grupa-unutra > a.stavka { margin-left: 22px; }
.ljuska:not(.uzak) .meni[data-stil="linija"] .grupa-unutra { position: relative; }
.ljuska:not(.uzak) .meni[data-stil="linija"] .grupa-unutra::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 18px; width: 1px; background: var(--border); }
.ljuska:not(.uzak) .meni[data-stil="linija"] a.stavka::after { content: ""; position: absolute; left: -12px; top: 50%; width: 9px; height: 1px; background: var(--border); }
.ljuska:not(.uzak) .meni[data-stil="linija"] a.stavka.aktivna::before { left: -13px; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; }
.ljuska:not(.uzak) .meni[data-stil="linija"] a.stavka.aktivna::after { background: var(--primary); }

/* predlog B — „kartica“: svaka grupa je blaga kartica, zatvorena grupa je samo traka sa naslovom i brojem stavki */
.ljuska:not(.uzak) .meni[data-stil="kartica"] .grupa { margin-top: 10px; padding: 4px 6px; border-radius: 12px; border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-muted) 45%, transparent); }
.ljuska:not(.uzak) .meni[data-stil="kartica"] .grupa.otvorena { padding-bottom: 6px; }
.ljuska:not(.uzak) .meni[data-stil="kartica"] .grupa-unutra { margin: 0 -6px; padding: 0 6px; }
.ljuska:not(.uzak) .meni[data-stil="kartica"] a.stavka.aktivna::before { left: -6px; }
.ljuska:not(.uzak) .meni[data-stil="kartica"] a.stavka:hover { background: var(--bg-card); }

/* predlog C — „boja“: svaka grupa ima svoju boju (ikonica naslova, linija i ikonice stavki) */
.ljuska:not(.uzak) .meni[data-stil="boja"] .grupa-ikona { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; flex: none;
  color: var(--grupa-boja); background: color-mix(in srgb, var(--grupa-boja) 16%, transparent); }
.ljuska:not(.uzak) .meni[data-stil="boja"] .grupa-ikona svg { width: 14px; height: 14px; }
.ljuska:not(.uzak) .meni[data-stil="boja"] .grupa-glava { padding-left: 6px; }
.ljuska:not(.uzak) .meni[data-stil="boja"] .grupa-unutra { position: relative; }
.ljuska:not(.uzak) .meni[data-stil="boja"] .grupa-unutra::before { content: ""; position: absolute; left: 29px; top: 0; bottom: 14px; width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--grupa-boja) 35%, transparent); }
.ljuska:not(.uzak) .meni[data-stil="boja"] .grupa-unutra > a.stavka { margin-left: 26px; }
.ljuska:not(.uzak) .meni[data-stil="boja"] a.stavka svg.ik { color: var(--grupa-boja); opacity: .85; }
.ljuska:not(.uzak) .meni[data-stil="boja"] a.stavka.aktivna { background: color-mix(in srgb, var(--grupa-boja) 14%, transparent); color: var(--t-base); }
.ljuska:not(.uzak) .meni[data-stil="boja"] a.stavka.aktivna::before { left: -9px; top: 6px; bottom: 6px; width: 2px; background: var(--grupa-boja); }

/* predlog D — „stepenik“: naslov grupe je kao stavka (ikonica, krupnije), ispod su podstranice sa tačkama, bez ikonica — najkraći meni */
.ljuska:not(.uzak) .meni[data-stil="stepenik"] .grupa { margin-top: 4px; }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] .grupa-glava { padding: 8px 10px; color: var(--t-muted); }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] .grupa-glava .eyebrow { font-family: Inter, system-ui, sans-serif; font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] .grupa-ikona { display: grid; place-items: center; }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] .grupa-ikona svg { width: 18px; height: 18px; }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] .grupa:has(a.aktivna) .grupa-glava { color: var(--t-base); }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] .grupa-unutra > a.stavka { margin-left: 16px; padding: 5px 10px 5px 18px; font-size: 13px; }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] .grupa-unutra > a.stavka > svg.ik { display: none; }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] a.stavka::after { content: ""; position: absolute; left: 1px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--border); }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] a.stavka.aktivna::after { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] a.stavka.aktivna::before { display: none; }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] .grupa-unutra { position: relative; }
.ljuska:not(.uzak) .meni[data-stil="stepenik"] .grupa-unutra::before { content: ""; position: absolute; left: 31px; top: 0; bottom: 14px; width: 1px; background: var(--border-soft); }

/* ---------------------------------------------------------------- NaSicu: znak i natpis u meniju i gornjoj traci */
.meni .brend { gap: 10px; padding: 2px 6px 16px 4px; }
.meni .brend img.brend-znak { width: 80px; height: 50px; object-fit: cover; flex: none; }     /* NaSicu_ikonica_bicikl.svg je kvadrat: bicikl po sredini */
.meni .brend .brend-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meni .brend img.natpis { width: 140px; height: auto; display: block; }
.meni .brend .brend-tekst small { font: 500 9.5px/1.2 "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-light); white-space: nowrap; }
.meni .brend img.brend-ns { display: none; width: 40px; height: 40px; }
:root[data-theme="light"] .natpis-tamna, :root:not([data-theme="light"]) .natpis-svetla { display: none !important; }
.ljuska.uzak .meni .brend { justify-content: center; padding: 2px 0 16px; }
.ljuska.uzak .meni .brend img.brend-znak, .ljuska.uzak .meni .brend .brend-tekst { display: none; }
.ljuska.uzak .meni .brend img.brend-ns { display: block; }
@media (max-width: 960px) {
  .ljuska.uzak .meni .brend img.brend-znak, .ljuska.uzak .meni .brend .brend-tekst { display: flex; }
  .ljuska.uzak .meni .brend img.brend-ns { display: none; }
}
.brend-gornji img.brend-znak { width: 46px; height: 29px; object-fit: cover; }
.brend-gornji .brend-tekst { display: flex; align-items: center; }
.brend-gornji img.natpis { width: 84px; height: auto; display: block; }
.brend-gornji .brend-tekst small { display: none; }
/* nadnaslovi grupa bliže levoj ivici */
.meni .grupa-glava { padding: 6px 8px 6px 2px; }

/* Danas uživo: levo vreme + traka „dan prema prognozi“, desno tabela iste visine */
.danas-levo { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.danas-levo .danas-vreme-grafik { flex: none; height: 240px; }
.danas-tabela-kartica { display: flex; flex-direction: column; min-height: 0; }
.danas-tabela-kartica .danas-tabela-omot { flex: 1 1 0; max-height: none; min-height: 320px; }
@media (max-width: 1200px) { .danas-tabela-kartica .danas-tabela-omot { flex: none; max-height: 420px; } }
.srafura-dopuna { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--b) 45%, transparent) 0 3px, color-mix(in srgb, var(--b) 85%, white) 3px 5px) !important; }
.cilj-brojke { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cilj-brojke > b { font: 700 32px/1 "Inter Tight", Inter, sans-serif; letter-spacing: -.02em; }
.cilj-brojke span { color: var(--t-muted); font-size: 13px; }
.cilj-brojke span b { color: var(--t-base); }
.cilj-traka { position: relative; height: 22px; border-radius: 11px; background: var(--bg-muted); margin: 6px 0 12px; }
.cilj-traka > span { position: absolute; top: 0; bottom: 0; }
.cilj-interval { background: color-mix(in srgb, var(--warning) 22%, transparent); border-left: 1px dashed color-mix(in srgb, var(--warning) 60%, transparent);
  border-right: 1px dashed color-mix(in srgb, var(--warning) 60%, transparent); }
.cilj-izbrojano { left: 0; border-radius: 11px; background: linear-gradient(90deg, var(--g-bicikl-blago), var(--g-bicikl)); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.cilj-meta { width: 3px; margin-left: -1.5px; top: -5px !important; bottom: -5px !important; border-radius: 2px; background: var(--warning); }
.cilj-sada { width: 2px; margin-left: -1px; top: -3px !important; bottom: -3px !important; background: var(--t-base); opacity: .7; }
.cilj-legenda i { display: inline-block; width: 12px; height: 8px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.cilj-l-izbr { background: var(--g-bicikl); }
.cilj-l-meta { width: 3px !important; height: 12px !important; background: var(--warning); }
.cilj-l-int { background: color-mix(in srgb, var(--warning) 30%, transparent); }
.cilj-l-sada { width: 2px !important; height: 12px !important; background: var(--t-base); opacity: .7; }
.cilj-cinjenice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.cilj-cinjenice dt { font-size: 11.5px; color: var(--t-muted); }
.cilj-cinjenice dd { margin: 2px 0 0; }
.cilj-cinjenice dd b { font: 600 17px/1.2 "Inter Tight", Inter, sans-serif; }
.cilj-cinjenice dd small { display: block; font-size: 11.5px; color: var(--t-muted); }
#dan-danas[hidden] { display: none; }

/* Danas: „Pusti dan“ — dugme i okvir sa danom i satom ispod njega */
.pusti-omot { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pusti-sat { white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.pusti-dan { font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; font-size: 14px; color: var(--t-base); text-transform: capitalize; }
.pusti-sat.igra { padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent); background: color-mix(in srgb, var(--teal) 12%, var(--bg-card)); }
.pusti-vreme { font: 700 24px/1.1 "JetBrains Mono", monospace; color: var(--teal); letter-spacing: -0.02em; }
.pusti-broj { font-size: 12.5px; color: var(--t-muted); }
.pusti-broj b { color: var(--t-base); font-size: 14px; }

/* Verzija aplikacije (dno menija) */
.meni .dno .verzija { font-family: "JetBrains Mono", monospace; font-size: 11px; }

/* Prijava — šablon (nalog i avatar stižu sa backend-om) */
.prijava-dugme { gap: 6px; }
@media (max-width: 640px) { .prijava-dugme span { display: none; } }
dialog.prijava { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 22px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--t-base); box-shadow: 0 30px 80px rgb(0 0 0 / .45); }
dialog.prijava::backdrop { background: rgb(2 8 20 / .6); backdrop-filter: blur(3px); }
.prijava-glava { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.prijava-glava h2 { margin: 4px 0 0; font-size: 20px; }
.prijava-forma { display: grid; gap: 12px; margin: 16px 0 20px; }
.prijava-forma label { display: grid; gap: 6px; font-size: 12.5px; color: var(--t-muted); }
.prijava-forma input { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-muted); color: var(--t-base); font: inherit; }
.prijava-forma input:disabled, .prijava button:disabled { opacity: 0.6; cursor: not-allowed; }
.prijava-dugmad { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-sablon { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
/* panorama: pozadina dela grada klizi ulevo, biciklista stoji u sredini (kasnije GIF koji vrti pedale) */
.avatar-panorama { position: relative; height: 120px; border-radius: 12px; overflow: hidden; border: 1px dashed var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 22%, var(--bg-card)) 0%, var(--bg-card) 100%); }
.avatar-pozadina { position: absolute; inset: auto 0 0 0; height: 70%; width: 200%;
  background: repeating-linear-gradient(90deg, var(--bg-muted) 0 34px, transparent 34px 46px, var(--border) 46px 70px, transparent 70px 96px);
  -webkit-mask: linear-gradient(transparent 0 30%, #000 30%); mask: linear-gradient(transparent 0 30%, #000 30%); opacity: .8; }
.avatar-panorama::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; border-top: 3px dashed color-mix(in srgb, var(--success) 70%, transparent); }
.avatar-biciklista { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 92px; height: auto; }
@media (prefers-reduced-motion: no-preference) { .avatar-pozadina { animation: panorama 8s linear infinite; } }
@keyframes panorama { to { transform: translateX(-96px); } }
.avatar-korak { display: grid; gap: 8px; font-size: 13px; }
.avatar-mreza { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.avatar-polje { aspect-ratio: 1; border-radius: 10px; border: 1px dashed var(--border); background: var(--bg-muted); color: var(--t-light); font: 12px "JetBrains Mono", monospace; }
.avatar-cipovi { display: flex; flex-wrap: wrap; gap: 6px; }