/* Velja – nadzorni plošči (#/nadzorna, #/admin) in grafi. Vse pod .nz-stran / .graf, da se ne križa s slog.css.
   Barve serij so preverjene z validatorjem (pas svetlosti, CVD, kontrast ≥ 3:1) za svetlo (bela kartica) in temno (#1B2029) temo; besedilo vedno nosi barve besedila, barva je le na marki. */
.nz-stran, .graf, .graf-vrstice, .graf-lijak, .graf-obroc, .graf-iskrica { --nz-serija-1: #0F9A69; --nz-serija-2: #2F66D0; --nz-serija-3: #C98500; --nz-serija-4: #7C5CDC;
  --nz-ord-1: #46C292; --nz-ord-2: #19A974; --nz-ord-3: #128A60; --nz-ord-4: #0C6B4B; --nz-ord-5: #063D2E; --nz-siva: #8A919E; --nz-hitro: .55s; --nz-pocasi: .9s; --nz-krivulja: cubic-bezier(.2, .7, .2, 1); }
[data-tema="temna"] .nz-stran, [data-tema="temna"] .graf, [data-tema="temna"] .graf-vrstice, [data-tema="temna"] .graf-lijak, [data-tema="temna"] .graf-obroc, [data-tema="temna"] .graf-iskrica { --nz-serija-1: #19A974; --nz-serija-2: #4A7FE0; --nz-serija-3: #BF8A22; --nz-serija-4: #8E7AE5; --nz-ord-1: #0C6B4B; --nz-ord-2: #128A60; --nz-ord-3: #19A974; --nz-ord-4: #46C292; --nz-ord-5: #7EDDB5; --nz-siva: #7E8696; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="svetla"]) :is(.nz-stran, .graf, .graf-vrstice, .graf-lijak, .graf-obroc, .graf-iskrica) { --nz-serija-1: #19A974; --nz-serija-2: #4A7FE0; --nz-serija-3: #BF8A22; --nz-serija-4: #8E7AE5; --nz-ord-1: #0C6B4B; --nz-ord-2: #128A60; --nz-ord-3: #19A974; --nz-ord-4: #46C292; --nz-ord-5: #7EDDB5; --nz-siva: #7E8696; } }

/* širše platno samo za nadzorni plošči (do 1480 px), sicer portal ostane 1120 px */
.vsebina:has(> .nz-stran) { width: min(1480px, 100% - 2 * clamp(12px, 3vw, 32px)); }
.nz-stran { display: grid; gap: 16px; } .nz-stran :focus-visible { outline: 2px solid var(--smaragd); outline-offset: 2px; border-radius: 6px; }
.nz-stran h2 { font-size: 1.05rem; margin: 0 0 10px; } .nz-stran .st, .nz-stran .tabela td.st { font-variant-numeric: tabular-nums; }
.nz-stran .tabela td.st, .nz-stran .tabela th.st { text-align: right; }

/* glava: pozdrav, dan, stavek pozornosti; desno orodja */
.nz-glava { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; }
.nz-glava h1 { margin: 0; } .nz-glava .dan { color: var(--fg2); margin: 2px 0 0; } .nz-glava .dan b { color: var(--fg); font-weight: 600; }
.nz-glava .pozor { margin: 8px 0 0; max-width: 64ch; font-size: 1.02rem; }
.nz-orodja { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .nz-osvezeno { color: var(--fg2); font-size: .82rem; font-variant-numeric: tabular-nums; min-width: 12ch; }
.nz-stran .cip.vzorec { background: color-mix(in srgb, var(--rumeno) 18%, transparent); color: var(--fg); }

/* mreža kartic: 12 stolpcev; na telefonu en stolpec */
.nz-mreza { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); transition: opacity .35s ease; } .nz-mreza > * { grid-column: span 12; min-width: 0; }
@media (min-width: 640px) { .nz-mreza > :is(.s3, .s4, .s6, .s8) { grid-column: span 6; } }
@media (min-width: 1024px) { .nz-mreza > .s3 { grid-column: span 3; } .nz-mreza > .s4 { grid-column: span 4; } .nz-mreza > .s6 { grid-column: span 6; } .nz-mreza > .s8 { grid-column: span 8; } }
.nz-stran[data-osvezujem] .nz-telo { opacity: .55; } .nz-telo { transition: opacity .35s ease; display: grid; gap: 16px; }
.nz-k-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .nz-k-glava h2 { margin: 0; } .nz-k-glava a, .nz-k-glava .tiho { font-size: .85rem; }
.nz-mreza > h2.nz-naslov { margin: 6px 0 -4px; }

/* ključne številke: trak ploščic na podlagi strani, med njimi tanke črte (gap trik), brez kartic */
.nz-stevci { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px; border-block: 1px solid var(--rob); overflow: hidden; }
.nz-stevci.gosto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); }
.nz-stevec { display: block; background: var(--bg); box-shadow: 1px 0 0 var(--rob), 0 1px 0 var(--rob); padding: 14px 16px 14px 14px; color: inherit; text-decoration: none; min-width: 0; transition: background .2s ease; }
a.nz-stevec:hover { background: color-mix(in srgb, var(--fg) 4%, var(--bg)); text-decoration: none; }
.nz-stevec .oznaka { display: block; color: var(--fg2); font-size: .82rem; font-weight: 600; } .nz-stevec .vrednost { display: block; font-family: "Outfit", "Manrope", sans-serif; font-size: clamp(1.6rem, 1.3rem + .9vw, 2.1rem); font-weight: 700; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.nz-stevec .pod { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg2); font-size: .8rem; margin-top: 4px; min-height: 1.3em; } .nz-stevec .pod .graf-iskrica { flex: none; } .nz-stevec .pod > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz-stevec.pozor .vrednost { color: var(--rdece); } .nz-stevec.mirno .vrednost { color: var(--poudarek); }
@media (max-width: 639px) { .nz-stevci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* kartica primera: semafor (pika + besedilo), obroč napredka, naslednji korak, rok */
.nz-primer { display: grid; gap: 10px; color: inherit; text-decoration: none; transition: border-color .2s ease, transform var(--nz-hitro) var(--nz-krivulja); }
a.nz-primer:hover { text-decoration: none; border-color: var(--fg2); } .nz-primer h3 { margin: 0; font-size: 1rem; }
.nz-primer .korak { display: flex; align-items: center; gap: 12px; } .nz-primer .korak p { margin: 0; font-size: .9rem; } .nz-primer .korak .tiho { font-size: .8rem; }
.nz-primer .rok { font-size: .85rem; color: var(--fg2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nz-sem { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; white-space: nowrap; } .nz-sem::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--nz-siva); flex: none; }
.nz-sem.zelena::before { background: var(--zeleno); } .nz-sem.rumena::before { background: var(--rumeno); } .nz-sem.rdeca::before { background: var(--rdece); }
.nz-stanje { font-size: .78rem; color: var(--fg2); } .nz-firma { margin: 0; color: var(--fg2); font-size: .85rem; }

/* roki: barvna črta po nujnosti + besedilo (nikoli samo barva) */
.nz-roki { list-style: none; margin: 0; padding: 0; } .nz-roki li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 8px 0 8px 12px; border-left: 3px solid var(--nz-siva); margin: 6px 0; align-items: baseline; }
.nz-roki li[data-nujnost="zamujen"], .nz-roki li[data-nujnost="nujen"] { border-color: var(--rdece); } .nz-roki li[data-nujnost="kmalu"] { border-color: var(--rumeno); } .nz-roki li[data-nujnost="mirno"] { border-color: var(--zeleno); }
.nz-roki .kdaj { font-weight: 700; font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .nz-roki li[data-nujnost="zamujen"] .kdaj, .nz-roki li[data-nujnost="nujen"] .kdaj { color: var(--rdece); }
.nz-roki .kaj { font-size: .9rem; } .nz-roki .kaj a { display: block; font-size: .8rem; }

/* aktivnosti: časovnica z vrsto dogodka kot besedilom */
.nz-aktivnosti { list-style: none; margin: 0; padding: 0; } .nz-aktivnosti li { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rob); font-size: .9rem; }
.nz-aktivnosti li:last-child { border-bottom: 0; } .nz-aktivnosti time { color: var(--fg2); font-variant-numeric: tabular-nums; font-size: .82rem; padding-top: 2px; } .nz-aktivnosti .vrsta-d { color: var(--fg2); font-size: .78rem; margin-left: 6px; }

/* pot od A do Ž: vozlišča s številom primerov, črta se napolni do zadnjega aktivnega koraka */
.nz-pot { position: relative; margin-top: 8px; } .nz-pot-seznam { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
.nz-pot::before { content: ""; position: absolute; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); top: 15px; height: 2px; background: var(--rob); }
.sr-le { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nz-pozor-b .vrednost { color: var(--rdece); }
.nz-pot .polnilo { position: absolute; left: calc(100% / var(--n) / 2); top: 15px; height: 2px; width: calc((100% - 100% / var(--n)) * var(--delez)); background: var(--smaragd); transform: scaleX(0); transform-origin: left; transition: transform var(--nz-pocasi) var(--nz-krivulja) .2s; }
.nz-pot.narisan .polnilo { transform: scaleX(1); }
.nz-pot li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.nz-pot .vozel { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--rob); background: var(--bg2); display: grid; place-items: center; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg2); position: relative; z-index: 1; transition: transform var(--nz-hitro) var(--nz-krivulja), background var(--nz-hitro), border-color var(--nz-hitro); }
.nz-pot li.aktiven .vozel { background: var(--ink); border-color: var(--ink); color: var(--ivory); } [data-tema="temna"] .nz-pot li.aktiven .vozel { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="svetla"]) .nz-pot li.aktiven .vozel { background: var(--ivory); border-color: var(--ivory); color: var(--ink); } }
.nz-pot li.prehojen .vozel { border-color: var(--smaragd); } .nz-pot .naziv { font-size: .72rem; line-height: 1.25; color: var(--fg2); max-width: calc(100% - 4px); overflow-wrap: normal; hyphens: manual; } .nz-pot li.aktiven .naziv { color: var(--fg); font-weight: 600; }
.nz-telo > [role="tabpanel"] { display: grid; gap: 16px; } .nz-telo > [role="tabpanel"][hidden] { display: none; }
@media (max-width: 759px) { .nz-pot-seznam { grid-auto-flow: row; grid-auto-columns: auto; gap: 8px; } .nz-pot::before { left: 15px; right: auto; top: 16px; bottom: 16px; width: 2px; height: auto; }
  .nz-pot .polnilo { left: 15px; top: 16px; width: 2px; height: calc((100% - 32px) * var(--delez)); transform: scaleY(0); transform-origin: top; } .nz-pot.narisan .polnilo { transform: scaleY(1); }
  .nz-pot li { grid-template-columns: 32px 1fr; justify-items: start; align-items: center; text-align: left; gap: 12px; } .nz-pot .naziv { max-width: none; font-size: .85rem; } }

/* obdobje (Danes / Teden / Mesec) in zavihki admina */
.nz-filtri { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .nz-filtri .tiho { font-size: .85rem; }
.nz-obdobje { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--rob); border-radius: 11px; background: var(--bg2); }
.nz-obdobje button { border: 0; background: transparent; color: var(--fg2); font: inherit; font-weight: 600; font-size: .88rem; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.nz-obdobje button[aria-pressed="true"] { background: var(--ink); color: var(--ivory); } [data-tema="temna"] .nz-obdobje button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="svetla"]) .nz-obdobje button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); } }
.nz-zavihki { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--rob); }
.nz-zavihki button { border: 0; background: transparent; color: var(--fg2); font: inherit; font-weight: 600; padding: 10px 14px; cursor: pointer; border-radius: 8px 8px 0 0; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color .2s ease, box-shadow .2s ease; }
.nz-zavihki button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); } .nz-zavihki button[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--smaragd); }

/* sistem: utripajoča pika + besedilo; opozorilo za testno pošiljanje */
.nz-sistem { list-style: none; margin: 0; padding: 0; } .nz-sistem li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rob); font-size: .9rem; } .nz-sistem li:last-child { border: 0; }
.nz-sistem .vrednost { color: var(--fg2); font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; }
.nz-pika { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--nz-siva); justify-self: center; } .nz-pika.ok { background: var(--zeleno); } .nz-pika.pozor { background: var(--rumeno); } .nz-pika.napaka { background: var(--rdece); }
.nz-pika.utrip::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--zeleno); opacity: 0; animation: nz-utrip 2.4s ease-out infinite; }
@keyframes nz-utrip { 0% { transform: scale(.5); opacity: .9; } 70% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1.25); opacity: 0; } }
.nz-opozorilo { background: color-mix(in srgb, var(--rumeno) 16%, transparent); padding: 10px 14px; border-radius: 10px; font-size: .9rem; margin-bottom: 12px; }
.nz-junak { font-family: "Outfit", "Manrope", sans-serif; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; margin: 2px 0 2px; }
.nz-mali-stevci { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 14px; margin: 10px 0 12px; } .nz-mali-stevci div { min-width: 0; } .nz-mali-stevci .oznaka { display: block; color: var(--fg2); font-size: .78rem; } .nz-mali-stevci .vrednost { display: block; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.nz-semafor-vrsta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; } .nz-semafor-vrsta .nz-sem b { font-size: 1rem; }
.nz-prijave { list-style: none; margin: 10px 0 0; padding: 0; font-size: .85rem; } .nz-prijave li { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--rob); flex-wrap: wrap; } .nz-prijave time { color: var(--fg2); font-variant-numeric: tabular-nums; white-space: nowrap; } .nz-prijave .ip { color: var(--fg2); font-size: .78rem; }
.nz-izid { margin-top: 10px; } .nz-izid dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .9rem; } .nz-izid dt { color: var(--fg2); } .nz-izid dd { margin: 0; font-variant-numeric: tabular-nums; }
.nz-mreza > .s5, .nz-mreza > .s7 { grid-column: span 12; } @media (min-width: 1024px) { .nz-mreza > .s5 { grid-column: span 5; } .nz-mreza > .s7 { grid-column: span 7; } }
.nz-sklic { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: .03em; background: color-mix(in srgb, var(--smaragd) 16%, transparent); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.nz-racuni td.vrsta { gap: 6px; } .nz-potrdi-vrsta td { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.nz-potrdi { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; } .nz-potrdi > div { flex: 1 1 150px; } .nz-potrdi > .siroko { flex: 2 1 220px; } .nz-potrdi label { margin: 0 0 4px; } .nz-potrdi .vrsta { flex: 0 0 auto; padding-bottom: 1px; }
.nz-akt { margin-top: 14px; max-width: 80ch; font-size: .92rem; } .nz-akt h2 { font-size: 1.1rem; margin: 0 0 10px; } .nz-akt h3 { margin: 18px 0 6px; } .nz-akt p { margin: 0 0 10px; } .nz-akt ol { padding-left: 22px; } .nz-akt li { margin-bottom: 6px; } .nz-akt code { font-family: ui-monospace, Menlo, monospace; font-size: .88em; }
.nz-posli { display: grid; gap: 14px; } .nz-posli .vrsta .gumb { flex-direction: column; align-items: flex-start; gap: 2px; } .nz-posli .gumb small { color: var(--fg2); font-weight: 500; }

/* vstop: zamaknjen pojav kartic (ena orkestrirana sekvenca ob nalaganju; ob osvežitvi brez) */
.nz-stran .vstop { animation: nz-vstop var(--nz-hitro) var(--nz-krivulja) both; animation-delay: calc(var(--i, 0) * var(--korak, 50ms)); }
.nz-stran.brez-vstopa .vstop { animation: none; } @keyframes nz-vstop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* skelet med prvim nalaganjem (brez belih bliskov v temni temi) */
.nz-skelet { display: grid; gap: 16px; } .nz-skelet .vrsta-sk { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.nz-skelet .sk { border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--fg) 6%, transparent) 0 30%, color-mix(in srgb, var(--fg) 11%, transparent) 50%, color-mix(in srgb, var(--fg) 6%, transparent) 70% 100%); background-size: 200% 100%; animation: nz-sij 1.4s linear infinite; }
@keyframes nz-sij { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* --- grafi --- */
.graf { position: relative; } .graf-platno { line-height: 0; min-height: var(--graf-v, 200px); }
.graf-svg { display: block; width: 100%; height: auto; touch-action: pan-y; font-family: "Manrope", -apple-system, sans-serif; outline: none; border-radius: 6px; } .graf-svg:focus-visible { outline: 2px solid var(--smaragd); outline-offset: 2px; }
.graf-svg .mreza { stroke: var(--rob); stroke-width: 1; } .graf-svg .os { fill: var(--fg2); font-size: 11px; font-variant-numeric: tabular-nums; }
.graf-svg .serija { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--nz-pocasi) cubic-bezier(.3, .6, .3, 1); } .graf.narisan .serija { stroke-dashoffset: 0; }
.graf-svg .obmocje { fill-opacity: .1; opacity: 0; transition: opacity .5s ease .5s; } .graf.narisan .obmocje { opacity: 1; }
.graf-svg .konec { stroke: var(--bg2); stroke-width: 2; opacity: 0; transition: opacity .3s ease .8s; } .graf.narisan .konec { opacity: 1; }
.graf-svg .oznaka-konec { fill: var(--fg); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s ease .85s; } .graf.narisan .oznaka-konec { opacity: 1; }
.graf-svg .krizec { stroke: var(--fg2); stroke-width: 1; } .graf-svg .krizec-pika { stroke: var(--bg2); stroke-width: 2; } .graf-svg .graf-hit { cursor: crosshair; }
.graf-svg .stolpec { transform: translate(var(--x), var(--y)) scaleY(0); transform-origin: 0 0; transition: transform .6s var(--nz-krivulja), opacity .2s ease; } .graf.narisan .stolpec { transform: translate(var(--x), var(--y)) scaleY(1); }
.graf-svg .stolpec.dvignjen path { fill-opacity: .72; }
.graf.takoj, .graf.takoj *, .takoj .trak i, .takoj .polnilo, .graf-iskrica.takoj path { transition: none !important; }
.graf-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--fg2); margin: 0 0 8px; } .graf-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.kljuc { display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: var(--b); flex: none; } .kljuc.stolpec { width: 10px; height: 10px; border-radius: 3px; }
.graf-namig { position: absolute; z-index: 3; pointer-events: none; background: var(--bg2); border: 1px solid var(--rob); border-radius: 10px; padding: 8px 10px; font-size: .8rem; box-shadow: var(--senca); min-width: 120px; line-height: 1.35; }
.graf-namig-naslov { color: var(--fg2); margin-bottom: 4px; } .graf-namig-vrsta { display: flex; align-items: center; gap: 8px; } .graf-namig-vrsta strong { font-variant-numeric: tabular-nums; } .graf-namig-vrsta span { color: var(--fg2); }
.graf-tabela { margin-top: 8px; } .graf-tabela summary { font-size: .8rem; color: var(--fg2); cursor: pointer; } .graf-tabela .tabela { margin-top: 6px; font-size: .82rem; } .graf-tabela .tabela td.st { text-align: right; font-variant-numeric: tabular-nums; }
.graf-vrstice { display: grid; gap: 2px; } .graf-vrstice .vrstica { display: grid; grid-template-columns: minmax(80px, 38%) 1fr auto; gap: 10px; align-items: center; padding: 4px 0; color: inherit; text-decoration: none; font-size: .88rem; border-radius: 6px; }
a.vrstica:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); text-decoration: none; } .graf-vrstice .oznaka { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .graf-vrstice .vrednost { font-weight: 700; min-width: 3ch; text-align: right; }
.trak { display: block; height: 10px; border-radius: 0 3px 3px 0; background: color-mix(in srgb, var(--fg) 6%, transparent); overflow: hidden; } .trak i { display: block; height: 100%; border-radius: 0 3px 3px 0; transform: scaleX(0); transform-origin: left; transition: transform .7s var(--nz-krivulja) calc(var(--i, 0) * 45ms); }
.narisan .trak i { transform: scaleX(1); }
.graf-lijak { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .graf-lijak .lijak-glava { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; margin-bottom: 4px; } .graf-lijak .vrednost { font-weight: 700; } .graf-lijak .trak { height: 16px; }
.graf-obroc { position: relative; display: inline-grid; place-items: center; flex: none; } .graf-obroc svg { transform: rotate(-90deg); display: block; } .graf-obroc .tir { fill: none; stroke: color-mix(in srgb, var(--smaragd) 22%, transparent); }
.graf-obroc .polnilo { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--nz-pocasi) cubic-bezier(.3, .6, .3, 1) .15s; } .graf-obroc.narisan .polnilo { stroke-dashoffset: var(--cilj, 1); }
.graf-obroc b { position: absolute; font-size: .72rem; font-weight: 700; }
.graf-iskrica { display: block; overflow: visible; } .graf-iskrica path { fill: none; stroke: var(--nz-siva); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--nz-pocasi) ease .25s; } .graf-iskrica.narisan path { stroke-dashoffset: 0; }
.graf-iskrica circle { stroke: var(--bg); stroke-width: 2; }

/* manj gibanja: vse takoj, vsebina enaka */
@media (prefers-reduced-motion: reduce) { .nz-stran *, .graf, .graf *, .graf-vrstice *, .graf-lijak *, .graf-obroc *, .graf-iskrica * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; } .nz-pika.utrip::after { display: none; } }