/* ============================================================
   ODS-OS  ·  Ortoimplant Dental Spa Operating System
   Paleta iz brand knjige klinike: teal, porculan, zlatni akcent.
   ============================================================ */
:root{
  --ground:#F2F6F5; --paper:#FFFFFF; --ink:#11292E; --ink-soft:#33504F; --muted:#65807F;
  --line:#DCE7E6; --line-soft:#EDF3F2; --teal:#21707A; --teal-deep:#12474E; --teal-dark:#0C3237;
  --gold:#AA8340; --gold-soft:#F6EFE1; --hr:#8A6E33;
  --ok:#3E8E6E; --ok-soft:#E6F2EC; --flag:#B0563F; --flag-soft:#FBEFEB;
  --sky:#79BDD5; --porcelain:#EFEAE0;
  --sirina-bocne:246px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--ground);color:var(--ink);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;display:flex;min-height:100vh;
}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;font-weight:600;line-height:1.18;color:var(--ink)}
a{color:var(--teal-deep)}

/* ---------- bočna traka ---------- */
.bocna{
  width:var(--sirina-bocne);flex:0 0 var(--sirina-bocne);background:var(--teal-dark);color:#CFE2E1;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.marka{display:block;padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none}
.marka-logo{display:block;width:100%;max-width:172px;height:auto}
.marka-os{display:block;margin-top:9px;color:#7FA3A7;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.marka:hover .marka-os{color:var(--sky)}
.bocna nav{padding:12px 10px;flex:1}
.nav-skupina{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#5E8388;padding:15px 10px 6px;font-weight:700}
.nav-st{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:8px;color:#CFE2E1;
  text-decoration:none;font-size:13.4px;margin-bottom:1px}
.nav-st:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-st.aktivno{background:var(--teal);color:#fff;font-weight:600}
.nav-st .ik{width:17px;text-align:center;opacity:.75;font-size:12px}
.nav-st.aktivno .ik{opacity:1}
.bocna-dno{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08)}
.verzija{font-size:10.5px;color:#5E8388}

/* ---------- glavni stupac ---------- */
.glavna{flex:1;min-width:0;padding:0 26px 40px;max-width:1560px}
.zaglavlje{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:24px 0 14px}
.oko{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.zaglavlje h1{font-size:27px;margin-top:3px}
.razdoblje-info{text-align:right;font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.razdoblje-info b{display:block;font-size:14px;color:var(--teal-deep);letter-spacing:0;text-transform:none;margin-top:2px}

/* ---------- filtar ---------- */
.filtar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.f-polje{display:flex;flex-direction:column;gap:3px}
.f-polje label{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700}
.f-polje select,.f-polje input{font:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);min-width:130px}
.f-polje select:focus,.f-polje input:focus{outline:2px solid var(--teal);outline-offset:-1px}
.f-polje select:disabled{background:#F3F6F6;color:#9BB0AF}
.f-ocisti{align-self:center;font-size:12px;color:var(--flag);text-decoration:none;border-bottom:1px dotted var(--flag);margin-left:4px}

.traka-demo{background:var(--gold-soft);border:1px solid #E4D3B0;border-left:3px solid var(--gold);
  border-radius:8px;padding:9px 14px;font-size:12.3px;color:var(--hr);margin-bottom:16px}
.traka-demo b{color:#6B5320}
.traka-demo a{color:var(--hr)}

/* ---------- mreže i kartice ---------- */
.mreza{display:grid;gap:14px;margin-bottom:16px}
.m2{grid-template-columns:repeat(2,1fr)}
.m3{grid-template-columns:repeat(3,1fr)}
.m4{grid-template-columns:repeat(4,1fr)}
.m6{grid-template-columns:repeat(6,1fr)}
.m-2-1{grid-template-columns:2fr 1fr}
.m-1-2{grid-template-columns:1fr 2fr}
@media(max-width:1400px){.m6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.m4{grid-template-columns:repeat(2,1fr)}.m-2-1,.m-1-2{grid-template-columns:1fr}}
@media(max-width:800px){.m2,.m3,.m6{grid-template-columns:1fr}}

.kart{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px 18px}
.kart-glava{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.kart h2{font-size:17px}
.kart h3{font-size:15px}
.kart .pod{font-size:11.5px;color:var(--muted)}
.kart.plosno{padding:0;overflow:hidden}

/* ---------- pokazatelji ---------- */
.pk{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:14px 16px;position:relative}
.pk .oznaka{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pk .v{font-family:Georgia,serif;font-size:29px;line-height:1.05;margin-top:5px;color:var(--ink)}
.pk .v small{font-size:14px;color:var(--muted);font-family:inherit}
.pk .pod{font-size:11.5px;color:var(--muted);margin-top:3px}
.pk .usporedbe{display:flex;gap:9px;flex-wrap:wrap;margin-top:9px;padding-top:8px;border-top:1px solid var(--line-soft)}
.pk.istaknuto{border-top:3px solid var(--teal)}
.pk.zlatno{border-top:3px solid var(--gold)}
.pk.opasno{border-top:3px solid var(--flag)}
.usp{display:flex;flex-direction:column;gap:1px}
.usp em{font-style:normal;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#9BB0AF;font-weight:700}

.d{font-size:11.5px;font-weight:700;white-space:nowrap}
.d-up{color:var(--ok)} .d-down{color:var(--flag)} .d-flat,.d-none{color:var(--muted)}

/* ---------- tablice ---------- */
.tabl{width:100%;border-collapse:collapse;font-size:13px}
.tabl th{text-align:left;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  padding:10px 12px;border-bottom:1px solid var(--line);background:#FBFAF6;font-weight:700;white-space:nowrap}
.tabl td{padding:9px 12px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top}
.tabl tr:last-child td{border-bottom:none}
.tabl tr:hover td{background:#FAFCFC}
.tabl td.p{color:var(--ink);font-weight:600}
.tabl td.n,.tabl th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabl .mini{font-size:11px;color:var(--muted);display:block}
.omot{overflow-x:auto}

/* ---------- lijevak ---------- */
.graf{width:100%;height:auto;display:block}
.lijevak .lv-broj{font:600 15px Georgia,serif;fill:#fff;text-anchor:middle}
.lijevak .lv-oznaka{font:600 10.5px -apple-system,sans-serif;fill:var(--ink);text-anchor:middle}
.lijevak .lv-konv{font:700 11px -apple-system,sans-serif;text-anchor:middle}
.lijevak .lv-osip{font:600 10px -apple-system,sans-serif;fill:var(--flag);text-anchor:middle}
.linija .ax{font:10px -apple-system,sans-serif;fill:var(--muted);text-anchor:end}
.karta .ax{font:9px -apple-system,sans-serif;fill:#A9BEBD;text-anchor:middle}
.karta .ax.mala{text-anchor:start}
.karta .kt-oznaka{font:700 10px -apple-system,sans-serif;fill:var(--teal-deep);text-anchor:middle}

/* ---------- udjeli ---------- */
.udjeli{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.ud{display:grid;grid-template-columns:120px 1fr 58px;gap:10px;align-items:center;font-size:12.5px}
.ud-l{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ud-b{height:9px;background:var(--line-soft);border-radius:5px;overflow:hidden}
.ud-b i{display:block;height:100%;border-radius:5px}
.ud-v{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- upozorenja ---------- */
.upoz{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:1100px){.upoz{grid-template-columns:repeat(2,1fr)}}
.up{border-radius:11px;padding:12px 14px;border:1px solid}
.up .v{font-family:Georgia,serif;font-size:25px;line-height:1}
.up .o{font-size:11px;margin-top:3px}
.up.crveno{background:var(--flag-soft);border-color:#EFD6CD;color:var(--flag)}
.up.zuto{background:var(--gold-soft);border-color:#E4D3B0;color:var(--hr)}
.up.zeleno{background:var(--ok-soft);border-color:#CFE4DA;color:var(--ok)}
.up.sivo{background:#F3F6F6;border-color:var(--line);color:var(--ink-soft)}

/* ---------- oznake ---------- */
.oz{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:5px;padding:2px 7px;white-space:nowrap}
.oz.teal{background:#E4F0EF;color:var(--teal-deep)}
.oz.zlato{background:var(--gold-soft);color:var(--hr)}
.oz.zeleno{background:var(--ok-soft);color:var(--ok)}
.oz.crveno{background:var(--flag-soft);color:var(--flag)}
.oz.sivo{background:#EEF2F2;color:var(--muted)}
.oz.tamno{background:var(--teal-deep);color:#fff}

/* ---------- organigram ---------- */
.org{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 0}
.org-red{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.org-kut{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 16px;min-width:210px;max-width:290px}
.org-kut.r1{border-top:3px solid var(--teal-deep);background:var(--teal-deep);color:#DCEAE9}
.org-kut.r1 b,.org-kut.r1 .f{color:#fff}
.org-kut.r2{border-top:3px solid var(--gold)}
.org-kut.r4{border-top:3px solid var(--sky);border-style:dashed}
.org-kut .f{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.org-kut b{display:block;font-family:Georgia,serif;font-size:15.5px;margin-top:3px}
.org-kut p{font-size:11.5px;color:var(--ink-soft);margin-top:6px}
.org-kut .nap{font-size:10.5px;color:var(--muted);margin-top:6px;font-style:italic}
.org-kut.r1 p,.org-kut.r1 .nap{color:#9FC0C0}
.org-veza{width:2px;height:22px;background:var(--line)}

/* ---------- razine napredovanja ---------- */
.razine{display:flex;flex-direction:column;gap:10px}
.razina{display:grid;grid-template-columns:52px 1fr;gap:14px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.razina .num{font-family:Georgia,serif;font-size:26px;color:var(--gold);text-align:center;line-height:1}
.razina h3{font-size:15.5px}
.razina p{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.razina ul{margin-top:8px;padding-left:17px;font-size:12px;color:var(--ink-soft)}
.razina li{margin-top:2px}

/* ---------- proza ---------- */
.proza{font-size:13.6px;color:var(--ink-soft);white-space:pre-line;line-height:1.62}
.proza b{color:var(--ink)}

.prazno{padding:26px;text-align:center;color:var(--muted);font-size:13px}
.podnozje{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px}

.gumb{display:inline-block;background:var(--teal);color:#fff;border:none;border-radius:9px;
  padding:9px 16px;font:600 13px -apple-system,sans-serif;cursor:pointer;text-decoration:none}
.gumb:hover{background:var(--teal-deep)}
.gumb.tanki{background:transparent;color:var(--teal-deep);border:1px solid var(--line)}

@media print{
  body{display:block;background:#fff}
  .bocna,.filtar,.f-ocisti{display:none}
  .glavna{padding:0;max-width:none}
  .kart{break-inside:avoid}
}

/* ---------- oblačić ---------- */
.oblacic{position:fixed;z-index:99;display:none;max-width:290px;background:var(--teal-dark);color:#DCEAE9;
  border-radius:10px;padding:11px 14px;font-size:12.3px;line-height:1.5;box-shadow:0 10px 30px rgba(12,50,55,.28);
  pointer-events:none}
.oblacic b{color:#fff;font-family:Georgia,serif;font-size:14.5px}
.oblacic .o-broj{font-family:Georgia,serif;font-size:19px;color:var(--sky)}
.oblacic .o-mala{color:#9FC0C0;font-size:11.5px}
.oblacic .o-osip{color:#E39B86;font-size:11.5px;font-weight:600}
.oblacic .o-opis{display:inline-block;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.14);
  color:#9FC0C0;font-size:11.5px;font-style:italic}
.lv-korak{cursor:default}
.lv-korak:hover .lv-broj{fill:var(--sky)}
.lv-korak:hover .lv-oznaka{fill:var(--teal-deep);font-weight:700}

/* ---------- kontakt u tablici ---------- */
.kontakt{display:flex;flex-direction:column;gap:2px;font-size:12px}
.kontakt a{color:var(--teal-deep);text-decoration:none;white-space:nowrap}
.kontakt a:hover{text-decoration:underline}
.kontakt .nema{color:#B7C6C5}
.ime-gumb{background:none;border:none;padding:0;font:inherit;color:var(--ink);font-weight:600;cursor:pointer;
  text-align:left;border-bottom:1px dotted var(--muted)}
.ime-gumb:hover{color:var(--teal)}
.ime-gumb.otvoreno{color:var(--teal);border-bottom-style:solid}
tr.detalj td{background:#F7FAFA;border-bottom:1px solid var(--line)}
.detalj-mreza{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 20px;padding:4px 0}
.detalj-mreza div{font-size:12px}
.detalj-mreza em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:2px}
.detalj-akcije{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* ---------- organigram: dva pravca ---------- */
.org-pravci{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:0}
@media(max-width:900px){.org-pravci{grid-template-columns:1fr}}
.org-stupac{display:flex;flex-direction:column;align-items:center}
.org-kut.r2.klin{border-top-color:var(--teal)}
.org-kut.r2.oper{border-top-color:var(--gold)}
.org-djeca{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:0}
.org-djeca .org-kut{max-width:none;width:100%}
.org-grana{width:100%;display:flex;justify-content:center}
.prihod .ax.os{text-anchor:middle;font-size:9.5px}
.pr-stupac{cursor:default}
.pr-stupac:hover rect:not(.pr-meta){fill:#12474E;fill-opacity:1}
.uloga{color:#CFE2E1;font-size:12px;font-weight:600;margin-bottom:3px}
.verzija a{color:#7FA3A7}

/* ============================================================
   v1.2 — razmaci, legenda, responzivnost, hamburger
   Dodano na kraj namjerno: ova pravila pobjeđuju gornja.
   ============================================================ */

/* ---------- više zraka između elemenata ---------- */
.mreza{gap:20px;margin-bottom:24px}
.kart{padding:20px 22px}
.kart.plosno{padding:0}
.kart-glava{margin-bottom:14px;gap:16px}
.filtar{padding:14px 16px;margin-bottom:20px;gap:12px}
.traka-demo{padding:11px 16px;margin-bottom:20px}
.pk{padding:16px 18px}
.zaglavlje{padding:26px 0 16px}
.glavna{padding:0 30px 48px}
.upoz{gap:12px}
.tabl td{padding:11px 14px}
.omot{padding-bottom:2px}
section + section{margin-top:8px}

/* ---------- legenda grafa ---------- */
.legenda{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-soft)}
.legenda span{display:flex;align-items:center;gap:7px}
.legenda i{width:14px;height:3px;border-radius:2px;display:block}
.kretanje .ax.os{text-anchor:middle;font-size:9.5px}
.kr-tocka{cursor:crosshair}
.kr-tocka:hover .kr-crta{stroke-opacity:.22}
.kr-tocka:hover .kr-kruzic{r:4.2}
.kr-kruzic{transition:r .08s}

/* ---------- hamburger i zastor ---------- */
.hamburger{display:none;position:fixed;top:12px;left:12px;z-index:40;width:44px;height:44px;
  border:none;border-radius:11px;background:var(--teal-dark);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 14px rgba(12,50,55,.3)}
.hamburger i{display:block;width:20px;height:2px;background:#CFE2E1;border-radius:2px;transition:transform .18s,opacity .18s}
.hamburger.otvoren i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.otvoren i:nth-child(2){opacity:0}
.hamburger.otvoren i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.zastor{position:fixed;inset:0;background:rgba(12,50,55,.45);z-index:25;border:none}

/* ---------- bočna traka: puna visina, uvijek ---------- */
.bocna{height:100vh;position:sticky;top:0;overflow-y:auto;overscroll-behavior:contain}

/* ---------- responzivno ---------- */
@media(max-width:1240px){
  .m4{grid-template-columns:repeat(2,1fr)}
  .m-2-1,.m-1-2{grid-template-columns:1fr}
}
@media(max-width:1024px){
  .hamburger{display:flex}
  .bocna{position:fixed;top:0;left:0;height:100dvh;z-index:30;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:6px 0 26px rgba(12,50,55,.22)}
  body.izbornik-otvoren .bocna{transform:none}
  .glavna{max-width:none;padding:0 18px 44px}
  .zaglavlje{padding:62px 0 14px;flex-direction:column;align-items:flex-start;gap:8px}
  .razdoblje-info{text-align:left}
  .m3{grid-template-columns:repeat(2,1fr)}
  .upoz{grid-template-columns:repeat(2,1fr)}
  .org-pravci{grid-template-columns:1fr;gap:18px}
}
@media(max-width:760px){
  body{font-size:14px}
  .glavna{padding:0 13px 40px}
  .zaglavlje h1{font-size:22px}
  .m2,.m3,.m4,.m6{grid-template-columns:1fr}
  .mreza{gap:14px;margin-bottom:18px}
  .kart{padding:15px 16px;border-radius:11px}
  .filtar{gap:9px;padding:12px}
  .f-polje{flex:1 1 46%;min-width:0}
  .f-polje select,.f-polje input{min-width:0;width:100%;font-size:16px}  /* 16px da iOS ne zumira */
  .upoz{grid-template-columns:1fr 1fr}
  .pk .v{font-size:25px}
  .tabl{font-size:12.4px}
  .tabl td,.tabl th{padding:9px 10px}
  .ud{grid-template-columns:96px 1fr 48px}
  .legenda{gap:12px;font-size:11.5px}
  .detalj-mreza{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .f-polje{flex:1 1 100%}
  .upoz{grid-template-columns:1fr}
}

/* ---------- tablice na uskom ekranu ---------- */
@media(max-width:900px){
  .omot{-webkit-overflow-scrolling:touch}
  .omot::after{content:"";display:block;height:1px}
}
.kt-tocka{cursor:crosshair}
.kt-tocka:hover circle:first-child{fill-opacity:.38}
.karta .kt-oznaka{font:700 11.5px -apple-system,sans-serif;fill:var(--teal-deep);text-anchor:middle;pointer-events:none}

/* ---------- OpenStreetMap ---------- */
.osm-karta{height:620px;border-radius:11px;overflow:hidden;border:1px solid var(--line);z-index:1}
@media(max-width:1024px){.osm-karta{height:460px}}
@media(max-width:760px){.osm-karta{height:360px}}
.leaflet-container{font:inherit;background:#EDF2F1}
.leaflet-popup-content-wrapper{border-radius:11px;box-shadow:0 10px 30px rgba(12,50,55,.2)}
.leaflet-popup-content{margin:12px 14px;font-size:12.5px}
.pop b{font-family:Georgia,serif;font-size:15px;color:var(--ink);display:block}
.pop-drz{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.pop table{border-collapse:collapse;margin-top:6px;width:100%}
.pop td{padding:2px 0;color:var(--ink-soft)}
.pop td:last-child{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;padding-left:16px}
.leaflet-tooltip{font-size:11.5px;font-weight:700;color:var(--teal-deep);border-radius:6px;border:1px solid var(--line)}

/* ---------- traka naplate ---------- */
.traka-naplate{margin-top:18px}
.tn-traka{height:16px;background:var(--flag-soft);border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.tn-traka i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#5FAE8C);border-radius:9px 0 0 9px}
.tn-oznake{display:flex;justify-content:space-between;margin-top:7px;font-size:12px;color:var(--muted)}
.tn-oznake b{color:var(--ink)}
.tn-oznake span:last-child b{color:var(--flag)}

/* ---------- ikone kanala ---------- */
.kanal{display:flex;align-items:center;gap:8px}
.ik-kanal{flex:0 0 18px}

/* ============================================================
   v1.3 — bočna traka bez prekida i ljepši scrollbar
   Sticky se lomio na dugim stranicama: čim sadržaj naraste,
   ljepljivi element prestane pratiti i ispod njega se vidi pozadina.
   Fiksni element toga nema, uvijek je puna visina prozora.
   ============================================================ */
body{display:block}

.bocna{
  position:fixed;top:0;left:0;
  width:var(--sirina-bocne);
  height:100vh;height:100dvh;
  z-index:30;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
}
.glavna{margin-left:var(--sirina-bocne);max-width:none;width:auto}

@media(max-width:1024px){
  .bocna{transform:translateX(-100%)}
  body.izbornik-otvoren .bocna{transform:none}
  .glavna{margin-left:0}
}

/* ---------- scrollbar ---------- */
/* Firefox */
html{scrollbar-width:thin;scrollbar-color:#B4C8C7 transparent}
.bocna{scrollbar-width:thin;scrollbar-color:#2A5A60 transparent}

/* WebKit i Chromium */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:#C2D3D2;border-radius:8px;
  border:2px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:#9FB6B5;background-clip:content-box;border:2px solid transparent}
::-webkit-scrollbar-corner{background:transparent}

.bocna::-webkit-scrollbar{width:8px}
.bocna::-webkit-scrollbar-thumb{
  background:#2E6068;border-radius:8px;
  border:2px solid transparent;background-clip:content-box;
}
.bocna::-webkit-scrollbar-thumb:hover{background:#3E7F88;background-clip:content-box;border:2px solid transparent}

/* Vodoravno klizanje tablica: tanko i nenametljivo */
.omot::-webkit-scrollbar{height:8px}
.omot::-webkit-scrollbar-thumb{background:#CBDAD9;border-radius:8px;border:2px solid transparent;background-clip:content-box}

/* ============================================================
   v1.4 — razmak ispod blokova u glavnom stupcu
   app.css na vrhu radi *{margin:0}, pa .kart nikad nije dobio
   donju marginu. Posljedica: svaka se kartica lijepila za ono
   ispod sebe, na svakoj stranici. Ovdje glavni stupac dobiva
   jedan ritam, a zadnje dijete unutar kartice gubi visak.
   ============================================================ */
.glavna > .kart,
.glavna > .mreza,
.glavna > .traka-demo,
.glavna > .filtar,
.glavna > .razine,
.glavna > .upoz,
.glavna > section,
.glavna > .hub-sadrzaj{margin-bottom:24px}

.kart > :last-child,
.kart-telo > :last-child{margin-bottom:0}

@media(max-width:640px){
  .glavna > .kart,
  .glavna > .mreza,
  .glavna > .traka-demo,
  .glavna > .filtar,
  .glavna > .razine,
  .glavna > section,
  .glavna > .hub-sadrzaj{margin-bottom:18px}
}

/* ============================================================
   v1.5 — zbornik pacijenata, oznake i koraci
   .tag i .steps koristile su se na stranici punjenja, a nikad
   nisu dobile stil, pa su se prikazivale kao goli tekst.
   ============================================================ */

/* ---------- male oznake ---------- */
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;
     letter-spacing:.07em;text-transform:uppercase;background:var(--line-soft);color:var(--ink-soft);
     vertical-align:middle;white-space:nowrap}
.tag.ok,.tag.zel{background:var(--ok-soft);color:var(--ok)}
.tag.crv{background:var(--flag-soft);color:var(--flag)}
.tag.zut,.tag.now{background:var(--gold-soft);color:var(--hr)}
.tag.tir{background:var(--mist);color:var(--teal-deep)}

/* ---------- koraci na stranici punjenja ---------- */
ol.steps{list-style:none;counter-reset:korak;display:flex;flex-direction:column;gap:18px}
ol.steps li{counter-increment:korak;position:relative;padding-left:46px}
ol.steps li::before{content:counter(korak);position:absolute;left:0;top:1px;
    width:30px;height:30px;border-radius:50%;background:var(--mist);color:var(--teal-deep);
    display:grid;place-items:center;font-family:Georgia,serif;font-size:15px;font-weight:600}
ol.steps li + li{border-top:1px solid var(--line-soft);padding-top:16px}
ol.steps li + li::before{top:17px}
ol.steps h4{font-family:Georgia,serif;font-size:15px;color:var(--ink);
            display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
ol.steps p{font-size:13px;color:var(--ink-soft);margin-bottom:2px}

/* ---------- alatna traka zbornika ---------- */
.zb-alat{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.zb-alat .gumb{margin-bottom:1px}
.zb-alat input[type=search],.zb-alat input[type=number]{width:100%}

/* ---------- tablica zbornika ---------- */
.tabl.zb td{vertical-align:middle}
.tabl.zb td.sitno{font-size:12px;line-height:1.45}
.tabl.zb td.sitno a{color:var(--teal-deep);text-decoration:none}
.tabl.zb td.sitno a:hover{text-decoration:underline}
.tabl.zb tbody tr:hover td{background:var(--line-soft)}

/* ---------- stranicenje ---------- */
.zb-str{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.zb-gumbi{display:flex;gap:8px;flex-wrap:wrap}

@media(max-width:640px){
  .zb-alat{gap:10px}
  .zb-alat .f-polje{flex:1 1 100%}
  .zb-str{flex-direction:column;align-items:flex-start}
}