html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Mora pre svega ostalog: bez ovoga naša pravila sa `display:` gaze
   atribut `hidden` i element ostane na ekranu. */
[hidden] { display: none !important; }

:root{
  --tirkiz:#2AA5A0;
  --tamna:#062117;
  --panel:rgba(6,20,15,.88);
  --linija:rgba(255,255,255,.13);
  --tekst:#eef4f0;
  --prigusen:#9fb3aa;
  --meki:#6f8279;
  --zdravo:#ffffff;
  --oslabljeno:#f5c243;
  --suvo:#ff4d3d;
  --nepoznato:#8b9aa3;
  --poseceno:#4d9de0;
  --vrh:72px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02120c;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--tekst)}
#cesiumContainer{position:fixed;inset:0}
.cesium-widget-credits{display:none!important}

body:not(.prijavljen) #traka,
body:not(.prijavljen) #panelLevo,
body:not(.prijavljen) #panelDesno{display:none}
/* VAŽNO: #cesiumContainer se NE sme sakrivati sa display:none — Cesium bi se
   inicijalizovao sa platnom veličine 0x0 i ortofoto podloga ostane crna.
   Umesto toga ga samo prekrijemo ekranom za prijavu/učitavanje. */
body:not(.prijavljen) #cesiumContainer{visibility:hidden}

/* ---------- PRIJAVA ---------- */
#prijavaEkran{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
body.prijavljen #prijavaEkran,body.ucitavanje #prijavaEkran{display:none}
.prijava-poz{position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.85)),radial-gradient(circle at center,#14382a 0%,#02120c 68%)}
.prijava-box{position:relative;width:min(410px,100%);padding:34px 30px;text-align:center;
  background:rgba(5,18,13,.82);border:1px solid var(--linija);border-radius:18px;
  backdrop-filter:blur(18px);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.prijava-logo{width:210px;height:auto;margin-bottom:8px}
.prijava-podnaslov{margin:0 0 24px;color:var(--prigusen);font-size:13px;letter-spacing:.4px}
.polje{display:block;text-align:left;margin-bottom:13px}
.polje span{display:block;margin-bottom:6px;color:var(--meki);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.7px}
.polje input{width:100%;height:44px;padding:0 13px;color:#fff;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:11px;outline:none;font-size:15px}
.polje input:focus{border-color:var(--tirkiz);box-shadow:0 0 0 3px rgba(42,165,160,.18)}
#dugmePrijava{width:100%;height:46px;margin-top:8px;color:#03150f;background:var(--tirkiz);
  border:none;border-radius:11px;cursor:pointer;font-weight:900;font-size:14px;letter-spacing:.4px}
#dugmePrijava:hover{filter:brightness(1.08)}
#dugmePrijava:disabled{opacity:.6;cursor:wait}
#prijavaGreska{display:none;margin-top:12px;color:#ff7a6b;font-size:13px}
#prijavaGreska.vidljiv{display:block}
.sigurnost{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:13px;text-align:left;
  background:linear-gradient(135deg,rgba(42,165,160,.13),rgba(6,33,23,.6));
  border:1px solid rgba(42,165,160,.32);border-radius:14px}
.sigurnost svg{width:24px;height:24px;min-width:24px;color:var(--tirkiz);stroke:currentColor;
  stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sigurnost strong{display:block;color:#d9fff4;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.sigurnost span{display:block;margin-top:3px;color:#a8ded3;font-size:11.5px;line-height:1.45}

/* ---------- UČITAVANJE ---------- */
#ucitavanje{position:fixed;inset:0;z-index:150;display:none;flex-direction:column;
  align-items:center;justify-content:center;background:radial-gradient(circle at center,#0f2a1f 0%,#02120c 70%)}
body.ucitavanje #ucitavanje{display:flex}
#ucitavanjeLogo{width:250px;margin-bottom:30px}
.traka{width:min(320px,70vw);height:6px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden}
.traka span{display:block;width:0;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#3ecf6d,var(--tirkiz));transition:width .3s}
#ucitavanjeTekst{margin-top:14px;color:var(--prigusen);font-size:13px}

/* ---------- GORNJA TRAKA ---------- */
#traka{position:fixed;top:0;left:0;right:0;height:var(--vrh);z-index:20;display:grid;
  grid-template-columns:280px 1fr auto;align-items:center;gap:16px;padding:0 16px;
  background:rgba(3,14,10,.82);border-bottom:1px solid var(--linija);backdrop-filter:blur(14px)}
.traka-logo{height:42px;width:auto;display:block}
.traka-sredina{display:flex;flex-direction:column;align-items:center;gap:7px}
.traka-sredina h1{margin:0;font-size:13px;font-weight:800;letter-spacing:.3px;color:var(--tekst)}
.prekidac-prikaza{display:flex;gap:4px;padding:3px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--linija)}
.prekidac-prikaza button{height:26px;min-width:110px;padding:0 12px;border:0;border-radius:7px;
  display:flex;align-items:center;justify-content:center;gap:7px;color:var(--prigusen);
  background:transparent;cursor:pointer;font-size:12px;font-weight:800}
.prekidac-prikaza button svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.prekidac-prikaza button.aktivno{color:#03150f;background:var(--tirkiz)}
.traka-desno{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.traka-desno button{height:32px;padding:0 12px;color:var(--tekst);background:rgba(255,255,255,.07);
  border:1px solid var(--linija);border-radius:8px;cursor:pointer;font-size:12px;font-weight:700}
.traka-desno button:hover{background:rgba(255,255,255,.13)}
.traka-desno button.tanko{background:transparent;color:var(--meki)}
#korisnikOznaka{color:var(--meki);font-size:12px;margin-left:6px}

/* ---------- PANELI ---------- */
#panelLevo{position:fixed;top:calc(var(--vrh) + 14px);left:14px;width:262px;z-index:15;
  max-height:calc(100vh - var(--vrh) - 28px);overflow-y:auto;background:var(--panel);
  border:1px solid var(--linija);border-radius:14px;backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,.45);scrollbar-width:thin}
.panel-odeljak{padding:14px;border-bottom:1px solid rgba(255,255,255,.07)}
.panel-odeljak:last-child{border-bottom:none}
.panel-odeljak h2{margin:0 0 10px;font-size:11px;font-weight:900;color:var(--meki);
  text-transform:uppercase;letter-spacing:.8px}
.prekidac{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;font-size:13px}
.prekidac input{width:15px;height:15px;accent-color:var(--tirkiz);cursor:pointer}
.prekidac span{flex:1}
.prekidac b{color:var(--prigusen);font-size:11.5px;font-variant-numeric:tabular-nums}
.prekidac.boja-zdravo span::before,.prekidac.boja-oslabljeno span::before,
.prekidac.boja-suvo span::before,.prekidac.boja-nepoznato span::before{
  content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.boja-zdravo span::before{background:var(--zdravo);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.boja-oslabljeno span::before{background:var(--oslabljeno)}
.boja-suvo span::before{background:var(--suvo)}
.boja-nepoznato span::before{background:var(--nepoznato)}
.boja-poseceno span::before{background:var(--poseceno)}
.klizac{display:flex;flex-direction:column;gap:6px}
.klizac input{width:100%;accent-color:var(--tirkiz)}
.klizac span{color:var(--prigusen);font-size:12px}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:12.5px}
.stat span{color:var(--prigusen)}
.stat b{font-variant-numeric:tabular-nums}

#panelDesno{position:fixed;top:calc(var(--vrh) + 14px);right:14px;width:320px;z-index:16;
  max-height:calc(100vh - var(--vrh) - 28px);display:none;flex-direction:column;background:var(--panel);
  border:1px solid var(--linija);border-radius:14px;backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,.45);overflow:hidden}
#panelDesno.vidljiv{display:flex}
.panel-glava{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  background:rgba(255,255,255,.05);border-bottom:1px solid var(--linija)}
.panel-glava h2{margin:0;font-size:14px;font-weight:800}
.panel-glava button{width:28px;height:28px;border:1px solid var(--linija);border-radius:8px;
  color:#fff;background:rgba(255,255,255,.07);cursor:pointer;font-size:17px;line-height:1}
.panel-telo{padding:14px;overflow-y:auto;scrollbar-width:thin}
.red{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.red:last-child{border-bottom:none}
.red span{color:var(--prigusen)}
.red b{font-variant-numeric:tabular-nums;text-align:right}
.znacka{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:900;
  text-transform:uppercase;letter-spacing:.4px}
.znacka.zdravo{background:rgba(255,255,255,.16);color:#eef4f0}
.znacka.oslabljeno{background:rgba(245,194,67,.18);color:var(--oslabljeno)}
.znacka.suvo{background:rgba(255,77,61,.18);color:var(--suvo)}
.znacka.nepoznato{background:rgba(139,154,163,.18);color:var(--nepoznato)}
.znacka.poseceno{background:rgba(77,157,224,.18);color:var(--poseceno)}
.uredi{margin-top:14px;padding-top:14px;border-top:1px solid var(--linija)}
.uredi label{display:block;margin-bottom:8px;color:var(--meki);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px}
.uredi select,.uredi textarea{width:100%;padding:8px 10px;color:#fff;background:rgba(255,255,255,.07);
  border:1px solid var(--linija);border-radius:8px;outline:none;font:13px inherit;margin-bottom:10px}
.uredi button{width:100%;height:38px;color:#03150f;background:var(--tirkiz);border:none;
  border-radius:9px;cursor:pointer;font-weight:900;font-size:13px}

/* ---------- PORUKA ---------- */
/* Na laptopu bez miša se do približavanja teško dolazi, pa mapa ima i dugmad.
   Stoje dole desno da ne smetaju panelima koji su gore. */
#zumMape{position:fixed;right:14px;bottom:26px;z-index:14;display:flex;
  flex-direction:column;gap:6px}
body:not(.prijavljen) #zumMape{display:none}
#zumMape button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:700;line-height:1;color:var(--tekst);
  background:var(--panel);border:1px solid var(--linija);border-radius:11px;
  backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer}
#zumMape button:hover{background:rgba(255,255,255,.14)}
#zumMape button:active{transform:scale(.94)}
#poruka{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  padding:11px 18px;border-radius:99px;background:rgba(3,14,10,.94);border:1px solid var(--linija);
  color:#fff;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:.25s}
#poruka.vidljiv{opacity:1}

/* ---------- MODAL ---------- */
.modal-omot{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.6);backdrop-filter:blur(5px)}
.modal-omot.vidljiv{display:flex}
.modal{width:min(760px,100%);max-height:calc(100vh - 60px);display:flex;flex-direction:column;
  background:#07201699;background:rgba(6,26,19,.97);border:1px solid var(--linija);
  border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.6);overflow:hidden}
.modal-glava{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--linija)}
.modal-glava h2{margin:0;font-size:16px}
.modal-glava button{width:30px;height:30px;border:1px solid var(--linija);border-radius:8px;
  color:#fff;background:rgba(255,255,255,.07);cursor:pointer;font-size:18px}
.modal-telo{padding:20px;overflow-y:auto}
.modal-noga{padding:14px 20px;border-top:1px solid var(--linija);display:flex;justify-content:flex-end}
.modal-noga button{height:38px;padding:0 18px;color:#03150f;background:var(--tirkiz);border:none;
  border-radius:9px;cursor:pointer;font-weight:900}
.izv-naslov{font-size:20px;font-weight:900;margin:0 0 4px}
.izv-podnaslov{color:var(--prigusen);font-size:13px;margin:0 0 20px}
.izv-mreza{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:20px}
.izv-kartica{padding:14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--linija)}
.izv-kartica span{display:block;color:var(--meki);font-size:11px;text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:5px}
.izv-kartica b{font-size:20px;font-variant-numeric:tabular-nums}
table.izv{width:100%;border-collapse:collapse;font-size:13px}
table.izv th,table.izv td{padding:9px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
table.izv th{color:var(--meki);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
table.izv td{font-variant-numeric:tabular-nums}
.napomena{margin-top:18px;padding:12px 14px;border-radius:10px;font-size:12px;line-height:1.5;
  background:rgba(245,194,67,.1);border:1px solid rgba(245,194,67,.28);color:#f0d79a}

@media(max-width:1100px){
  #traka{grid-template-columns:1fr;height:auto;padding:10px 12px;gap:10px}
  :root{--vrh:150px}
  #panelLevo{width:calc(100vw - 28px);max-height:40vh}
  #panelDesno{left:14px;right:14px;width:auto;top:auto;bottom:14px;max-height:46vh}
}

.napomena-prikaza{margin-top:8px;color:#f5c243;font-size:11.5px;line-height:1.4}

.dugmad-prikaz{display:flex;gap:6px;margin-bottom:12px}
.dugmad-prikaz .dugme-fokus{margin-bottom:0}
.dugme-fokus{width:100%;height:34px;margin-bottom:12px;color:var(--tekst);
  background:rgba(42,165,160,.16);border:1px solid rgba(42,165,160,.42);border-radius:9px;
  cursor:pointer;font-size:12.5px;font-weight:800}
.dugme-fokus:hover{background:rgba(42,165,160,.28)}

.merenje-dugmad{display:flex;gap:6px;flex-wrap:wrap}
.merenje-dugmad button{flex:1;min-width:70px;height:32px;color:var(--tekst);
  background:rgba(255,255,255,.07);border:1px solid var(--linija);border-radius:8px;
  cursor:pointer;font-size:12px;font-weight:700}
.merenje-dugmad button:hover{background:rgba(255,255,255,.13)}
.merenje-dugmad button.aktivno{color:#03150f;background:var(--tirkiz);border-color:var(--tirkiz)}
.merenje-dugmad button.tanko{flex:0 0 62px;background:transparent;color:var(--meki)}

.qc-opis{margin:0 0 9px;color:var(--prigusen);font-size:11.5px;line-height:1.45}
/* Alatke stoje kao red ikonica; otvara se telo samo pritisnute, i uvek
   najvise jedno — inace je levi panel duzi od ekrana. */
.alatke{display:flex;gap:6px}
.alat{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 2px;background:rgba(255,255,255,.06);border:1px solid var(--linija);
  border-radius:10px;color:var(--prigusen);cursor:pointer;font:inherit;
  transition:background .15s,color .15s,border-color .15s}
.alat svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.alat span{font-size:9.5px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.alat:hover{background:rgba(255,255,255,.12);color:var(--tekst)}
.alat.aktivno{background:rgba(42,165,160,.18);border-color:var(--tirkiz);color:var(--tirkiz)}
.alat-telo{margin-top:12px}
.qc-dugme{width:100%;height:34px;color:var(--tekst);background:rgba(255,255,255,.07);
  border:1px solid var(--linija);border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:800}
.qc-dugme:hover{background:rgba(255,255,255,.13)}
.qc-dugme.aktivno{color:#03150f;background:var(--oslabljeno);border-color:var(--oslabljeno)}
.qc-stanje{margin-top:8px;color:var(--prigusen);font-size:12px}
.qc-akcije{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.qc-akcije button{flex:1;min-width:88px;height:34px;border-radius:9px;cursor:pointer;
  font-size:12px;font-weight:800;border:1px solid var(--linija);color:var(--tekst);
  background:rgba(255,255,255,.07)}
.qc-akcije .qc-ok{background:rgba(62,207,109,.2);border-color:rgba(62,207,109,.5);color:#8ef0b0}
.qc-akcije .qc-ne{background:rgba(255,77,61,.18);border-color:rgba(255,77,61,.45);color:#ffab9f}
.qc-akcije .qc-preskoci{flex:0 0 84px;background:transparent;color:var(--meki)}

.upozorenje{margin:8px 0;padding:9px 11px;border-radius:9px;font-size:11.5px;line-height:1.45;
  background:rgba(245,194,67,.12);border:1px solid rgba(245,194,67,.32);color:#f0d79a}

.spisak-zona{max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;
  scrollbar-width:thin}
.zona-red{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:7px 9px;
  text-align:left;color:var(--tekst);background:rgba(255,77,61,.10);
  border:1px solid rgba(255,77,61,.28);border-radius:8px;cursor:pointer;font:inherit}
.zona-red:hover{background:rgba(255,77,61,.2)}
.zona-red b{font-size:12px}
.zona-red span{color:var(--prigusen);font-size:11px}

.dugme-zone{width:100%;height:36px;margin-top:10px;color:#fff;
  background:linear-gradient(135deg,rgba(255,77,61,.9),rgba(200,40,28,.9));
  border:1px solid rgba(255,110,90,.7);border-radius:9px;cursor:pointer;
  font-size:12.5px;font-weight:800;letter-spacing:.2px;
  box-shadow:0 4px 14px rgba(255,77,61,.22)}
.dugme-zone:hover{filter:brightness(1.12)}

.qc-akcije .qc-brisi{background:rgba(139,154,163,.18);border-color:rgba(139,154,163,.45);color:#cfd8dd}
.qc-akcije .qc-brisi:hover{background:rgba(139,154,163,.3)}

/* Padajući meniji: `color-scheme: dark` kaže pregledaču da kontrolu crta
   tamnom, pa i otvorena lista dođe u boji teme umesto bele. */
select{
  color-scheme:dark;
}
.uredi select{
  color:#eef4f0;
  background:rgba(255,255,255,.07);
}
.uredi select option,
select option{
  color:#eef4f0;
  background:#0e211a;
  padding:6px 8px;
}
.uredi select option:checked,
.uredi select option:hover{
  color:#03150f;
  background:#2AA5A0;
}
/* radni nalozi */
.veza-nalozi { display: inline-block; margin-top: 8px; color: var(--tirkiz);
  font-size: 12px; font-weight: 700; text-decoration: none; }
.veza-nalozi:hover { text-decoration: underline; }
.modal.uzak { max-width: 460px; }
.nalog-oznaka { display: block; margin: 12px 0 5px; color: var(--meki);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.nalog-polje { width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--tekst);
  background: rgba(255,255,255,.07); border: 1px solid var(--linija); font: inherit; font-size: 13px; }
select.nalog-polje { color-scheme: dark; }
.nalog-zbir { margin: 14px 0 8px; font-size: 13px; color: var(--meki); }
.nalog-zbir b { color: var(--tekst); }
.nalog-stabla { max-height: 260px; overflow-y: auto; border: 1px solid var(--linija);
  border-radius: 9px; }
.nalog-red { display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.nalog-red:last-child { border-bottom: 0; }
.nalog-red > span:first-child { flex: 1; font-variant-numeric: tabular-nums; }
.nalog-red .v { color: var(--meki); font-variant-numeric: tabular-nums; }
.nalog-red button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px;
  cursor: pointer; color: #7f938b; background: transparent; font-size: 12px; }
.nalog-red button:hover { background: rgba(255,255,255,.12); color: var(--tekst); }
#nalogPotvrdi:disabled { opacity: .5; cursor: default; }

/* izbor šume kad ih čovek ima više */
.izbor-sume { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.izbor-sume b { margin-bottom: 4px; }
.izbor-sume a { padding: 9px 18px; border-radius: 9px; color: var(--tekst);
  background: rgba(255,255,255,.07); border: 1px solid var(--linija);
  text-decoration: none; font-size: 13px; font-weight: 700; }
.izbor-sume a:hover { background: rgba(42,165,160,.22); border-color: var(--tirkiz); }

.veza-panel { display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: 8px; color: var(--tekst); background: rgba(255,255,255,.07);
  border: 1px solid var(--linija); font-size: 12px; font-weight: 700; text-decoration: none; }
.veza-panel:hover { background: rgba(255,255,255,.13); }

/* ================= TELEFON =================
   Paneli lebde preko mape umesto da je stiskaju — na 6 inča mapa mora da
   ostane glavna stvar, inače se od nje ne vidi ništa. */
@media (max-width: 700px) {
  :root { --vrh: 104px; }

  #traka { grid-template-columns: 1fr; height: auto; padding: 8px 10px; gap: 6px; }
  .traka-logo { height: 30px; }
  .traka-sredina h1 { font-size: 12px; text-align: center; }
  .traka-desno { justify-content: center; flex-wrap: wrap; gap: 6px; }
  .traka-desno button, .traka-desno a { height: 28px; padding: 0 10px; font-size: 11.5px; }

  /* leva fioka je sklopljena dok se ne dodirne */
  #panelLevo {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: 100vw;
    max-height: 62vh; box-sizing: border-box; padding: 0 14px 14px;
    overflow-x: hidden;   /* ništa ne sme da klizi u stranu */
    border-radius: 14px 14px 0 0; transform: translateY(calc(100% - 48px));
    transition: transform .22s ease;
  }
  #panelLevo.otvoren { transform: translateY(0); }
  .jezicak {
    display: flex; align-items: center; justify-content: space-between;
    height: 48px; margin: 0 -14px 6px; padding: 0 16px; cursor: pointer;
    color: var(--tekst); font-size: 13px; font-weight: 800;
    border-bottom: 1px solid var(--linija);
  }
  .jezicak b { width: 9px; height: 9px; flex: none;
    border-right: 2px solid var(--meki); border-bottom: 2px solid var(--meki);
    transform: rotate(-135deg) translate(-2px, -2px); transition: transform .22s; }
  #panelLevo.otvoren .jezicak b { transform: rotate(45deg); }

  #panelDesno {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 64vh;
    border-radius: 14px 14px 0 0; z-index: 18;
  }
  /* 14 px je računarska mera — na ekranu od 393 px izgleda kao da tekst dodiruje
     ivicu. Na telefonu treba više vazduha. */
  #panelDesno .panel-telo { padding: 16px 18px 22px; }
  #panelDesno .panel-glava { padding: 14px 18px; }
  /* Duge vrednosti (koordinate, „srednja — samo boja") razvlačile su se celom
     širinom pa je red delovao kao da curi preko ivice. Sada padaju u svoj red. */
  #panelDesno .red { flex-wrap: wrap; row-gap: 2px; }
  #panelDesno .red span { flex: 1 1 auto; min-width: 0; }
  #panelDesno .red b { min-width: 0; overflow-wrap: anywhere; }
  #panelZone { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 64vh;
    border-radius: 14px 14px 0 0; }

  /* na telefonu se zumira sa dva prsta — dugmad bi samo zaklanjala mapu */
  #zumMape { display: none; }
  .modal { max-width: none; margin: 0 8px; }
  .modal-telo { font-size: 12.5px; }
}

/* spisak izvora merenja u napomeni izveštaja */
.napomena p{margin:0 0 8px}
.napomena p:last-child{margin-bottom:0}
.napomena-spisak{margin:0 0 8px;padding-left:18px}
.napomena-spisak li{margin:3px 0}

/* dugme Pozari: crvena tacka kad postoji sveza satelitska dojava (24 h) */
#dugmePozari.uzbuna { border-color: var(--suvo); color: var(--suvo); }
#dugmePozari { position: relative; }
#dugmePozari.uzbuna::after { content: ''; position: absolute; top: -4px; right: -4px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--suvo);
  animation: uzbuna-puls 1.6s ease-in-out infinite; }
@keyframes uzbuna-puls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* prozorce satelitskog nadzora na glavnoj mapi, dole levo */
#satProzorce{position:fixed;right:66px;bottom:26px;z-index:14;display:flex;align-items:center;
  gap:7px;background:rgba(3,14,10,.82);border:1px solid var(--linija);backdrop-filter:blur(14px);
  border-radius:999px;padding:7px 13px;color:var(--prigusen);font-size:12px;line-height:1;
  text-decoration:none;white-space:nowrap}
body:not(.prijavljen) #satProzorce{display:none}
#satProzorce:hover{border-color:var(--tirkiz);color:var(--tekst)}
#satProzorce.uzbuna{border-color:var(--suvo);color:var(--tekst)}
.sp-tacka{width:9px;height:9px;border-radius:50%;background:var(--suvo);
  animation:uzbuna-puls 1.6s ease-in-out infinite}
@media (max-width: 700px){
  /* dole su fioke panela: na telefonu prozorce ide gore levo, ispod trake */
  #satProzorce{left:10px;right:auto;bottom:auto;top:calc(var(--vrh) + 10px);padding:6px 11px;font-size:11.5px}
}

/* kartica ugljenika u levom panelu */
.ug-kartica{display:block;width:100%;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,rgba(42,165,160,.14),rgba(42,165,160,.05));
  border:1px solid rgba(42,165,160,.32);border-radius:12px;padding:12px 14px;
  color:var(--tekst);font:inherit}
.ug-kartica:hover{border-color:var(--tirkiz)}
.ug-kartica b{display:block;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.ug-kartica span{display:block;color:var(--prigusen);font-size:11.5px;margin-top:3px}
.ug-kartica i{display:block;color:var(--meki);font-size:11px;font-style:normal;margin-top:6px}
/* blok o ugljeniku u izvestaju */
.izv-podnaslov-blok{margin:26px 0 12px;font-size:15px;color:var(--tekst);
  padding-top:18px;border-top:1px solid var(--linija)}

/* prozorce i dugme Pozari kad je opasnost od pozara visoka (narandzasto,
   za razliku od crvenog koje znaci da satelit vec vidi toplotu) */
#satProzorce.pazi { border-color: #d97010; color: var(--tekst); }
#satProzorce.pazi .sp-tacka { background: #d97010; }
#dugmePozari.pazi { border-color: #d97010; color: #e8913f; }