/* OPTIKOM NOC - tamna tema (boje na jednom mestu u :root) */
:root {
  --poz: #07111f; --poz2: #0b1a2e; --karta: #0e2038; --karta2: #12294a; --ivica: #1d3a63; --ivica2: #27507f;
  --tekst: #e6eef9; --tekst2: #9fb3cf; --tekst3: #6b84a6;
  --plava: #2f8cff; --plava2: #5ab4ff; --zelena: #22c55e; --crvena: #ef4444; --narandz: #f59e0b; --siva: #64748b;
  --r: 10px; --senka: 0 6px 24px rgba(0, 0, 0, .35);
  --graf-tekst: #6b84a6; --graf-tekst2: #9fb3cf; --graf-mreza: rgba(39, 80, 127, .3);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(1200px 600px at 70% -10%, #13325c 0%, transparent 60%), var(--poz); color: var(--tekst);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
a { color: var(--plava2); text-decoration: none; }
a:hover { text-decoration: underline; }
.ik { flex: none; }
.okvir { display: flex; min-height: 100vh; }

/* levi meni */
.meni { width: 232px; flex: none; background: linear-gradient(180deg, #0a1830, #081325); border-right: 1px solid var(--ivica); position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; }
.brend { display: flex; gap: 10px; align-items: center; padding: 16px 14px 18px; color: var(--tekst); text-decoration: none !important; }
.brend b { display: block; font-size: 19px; letter-spacing: .5px; line-height: 1.1; }
.brend span { font-size: 11.5px; color: var(--tekst2); }
.meni nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; }
.meni nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--tekst2); font-size: 14.5px; text-decoration: none; position: relative; }
.meni nav a:hover { background: rgba(47, 140, 255, .08); color: var(--tekst); }
.meni nav a.akt { background: linear-gradient(90deg, #1b4f9c, #143a73); color: #fff; box-shadow: inset 3px 0 0 var(--plava2); }
.znacka { margin-left: auto; background: var(--crvena); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* gornja traka */
.traka { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--ivica); background: rgba(7, 17, 31, .7); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 20; }
.traka h1 { margin: 0; font-size: 18px; font-weight: 600; }
.traka-d { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.sat { display: flex; align-items: center; gap: 8px; color: var(--tekst2); font-variant-numeric: tabular-nums; }
.tacka { width: 10px; height: 10px; border-radius: 50%; background: var(--siva); display: inline-block; flex: none; }
.tacka.ok { background: var(--zelena); box-shadow: 0 0 8px var(--zelena); }
.tacka.los { background: var(--crvena); box-shadow: 0 0 8px var(--crvena); }
.sys { border: 1.5px solid var(--siva); color: var(--tekst2); padding: 4px 12px; border-radius: 20px; font-weight: 600; font-size: 13px; }
.sys.ok { border-color: var(--zelena); color: var(--zelena); background: rgba(34, 197, 94, .08); }
.sys.los { border-color: var(--crvena); color: var(--crvena); background: rgba(239, 68, 68, .08); }
.zvono { color: var(--tekst2); position: relative; display: flex; }
.zvono .znacka { position: absolute; top: -8px; right: -10px; }
.korisnik { position: relative; }
.korisnik summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--tekst2); }
.korisnik summary::-webkit-details-marker { display: none; }
.korisnik > div { position: absolute; right: 0; top: 30px; background: var(--karta2); border: 1px solid var(--ivica2); border-radius: 8px; padding: 10px 14px; min-width: 170px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--senka); }
.hamb { display: none; background: none; border: 0; color: var(--tekst); cursor: pointer; padding: 4px; }
.sadrzaj { padding: 18px 20px 30px; }

/* kartice i mreza */
.kpi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
a.kp { color: inherit; text-decoration: none !important; }
.kp.ap { border-color: rgba(139, 92, 246, .55); background: linear-gradient(160deg, #2a1f4d, #1a1533); }
.kp.ap .kr { background: rgba(139, 92, 246, .2); color: #b49cff; } .kp.ap .p { background: rgba(139, 92, 246, .2); color: #c9b8ff; }
.kp.ap .p.los { background: rgba(239, 68, 68, .2); color: #ff8a8a; }
.kp.ap:hover { border-color: #b49cff; }
.kp { background: linear-gradient(160deg, var(--karta2), var(--karta)); border: 1px solid var(--ivica); border-radius: var(--r); padding: 14px 16px; display: flex; gap: 14px; align-items: center; min-height: 92px; position: relative; overflow: hidden; }
.kp .kr { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.kp .l { color: var(--tekst2); font-size: 13px; }
.kp .v { font-size: 28px; font-weight: 700; line-height: 1.1; }
.kp .p { font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 4px; display: inline-block; margin-top: 4px; }
.kp.z { border-color: rgba(34, 197, 94, .45); } .kp.z .kr { background: rgba(34, 197, 94, .15); color: var(--zelena); } .kp.z .p { background: rgba(34, 197, 94, .15); color: var(--zelena); }
.kp.c { border-color: rgba(239, 68, 68, .5); background: linear-gradient(160deg, #3a1622, #24121c); } .kp.c .kr { background: rgba(239, 68, 68, .18); color: var(--crvena); } .kp.c .p { background: rgba(239, 68, 68, .18); color: #ff8a8a; }
.kp.n { border-color: rgba(245, 158, 11, .5); background: linear-gradient(160deg, #3a2a10, #24190c); } .kp.n .kr { background: rgba(245, 158, 11, .18); color: var(--narandz); } .kp.n .p { background: rgba(245, 158, 11, .18); color: var(--narandz); }
.kp.b .kr { background: rgba(47, 140, 255, .15); color: var(--plava2); }
.kp.b { flex-direction: column; align-items: stretch; gap: 2px; }
.kp canvas.spark { display: block; width: 100% !important; height: 26px !important; opacity: .9; }
.mreza2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.mreza3 { display: grid; grid-template-columns: 1.15fr .85fr 1.1fr; gap: 16px; }
.karta { background: linear-gradient(170deg, var(--karta), #0b1b31); border: 1px solid var(--ivica); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
.karta > h3 { margin: 0 0 10px; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.karta > h3 .d { margin-left: auto; font-weight: 400; font-size: 12.5px; display: flex; gap: 10px; align-items: center; }
.leg { display: inline-flex; align-items: center; gap: 5px; color: var(--tekst2); font-size: 12.5px; }
.leg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cipovi { display: inline-flex; gap: 4px; }
.cip { background: #13294a; border: 1px solid var(--ivica2); color: var(--tekst2); border-radius: 6px; padding: 2px 10px; font-size: 12.5px; cursor: pointer; }
.cip.akt { background: var(--plava); border-color: var(--plava); color: #fff; }
.vis-topo { height: 380px; } .vis-mapa { height: 380px; border-radius: 8px; overflow: hidden; }
.vis-graf { height: 210px; position: relative; }
.napomena { color: var(--tekst3); font-size: 12.5px; }
.prazno { color: var(--tekst3); padding: 30px 10px; text-align: center; }

/* tabele */
.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tab th { text-align: left; color: var(--tekst2); font-weight: 600; padding: 8px 8px; border-bottom: 1px solid var(--ivica2); background: #132a4a; position: sticky; top: 0; z-index: 2; }
.tab td { padding: 7px 8px; border-bottom: 1px solid rgba(29, 58, 99, .6); vertical-align: middle; }
.tab tr:hover td { background: rgba(47, 140, 255, .05); }
.tab .n { text-align: right; font-variant-numeric: tabular-nums; }
.tab-skrol { overflow-x: auto; max-width: 100%; }
.st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; }
.st i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.st.online { color: var(--zelena); } .st.online i { background: var(--zelena); }
.st.offline { color: var(--crvena); } .st.offline i { background: var(--crvena); }
.st.alarm { color: var(--narandz); } .st.alarm i { background: var(--narandz); }
.oz { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.oz0, .oz1 { background: rgba(100, 116, 139, .25); color: #b9c6d8; } .oz2 { background: rgba(250, 204, 21, .15); color: #facc15; }
.oz3 { background: rgba(245, 158, 11, .18); color: var(--narandz); } .oz4 { background: rgba(239, 68, 68, .18); color: #ff8a8a; } .oz5 { background: #b91c1c; color: #fff; }

/* forme i dugmad */
.dugme { background: #16325a; border: 1px solid var(--ivica2); color: var(--tekst); padding: 7px 14px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; }
.dugme:hover { border-color: var(--plava2); }
.dugme.plavo { background: var(--plava); border-color: var(--plava); color: #fff; }
.dugme.crveno { background: #7f1d1d; border-color: #b91c1c; }
.dugme.malo { padding: 3px 9px; font-size: 12.5px; }
.dugme[disabled] { opacity: .5; cursor: default; }
input, select, textarea { background: #0a1729; border: 1px solid var(--ivica2); color: var(--tekst); border-radius: 7px; padding: 7px 10px; font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(90, 180, 255, .35); border-color: var(--plava2); }
.red { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.forma { display: grid; grid-template-columns: 170px minmax(0, 420px); gap: 10px 14px; align-items: center; }
.forma label { color: var(--tekst2); text-align: right; }
.poruka { padding: 9px 12px; border-radius: 7px; margin-bottom: 12px; }
.poruka.ok { background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .4); }
.poruka.gr { background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .4); }
.detalji { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.detalji > div { background: rgba(19, 41, 74, .5); border: 1px solid var(--ivica); border-radius: 8px; padding: 9px 12px; }
.detalji span { display: block; color: var(--tekst3); font-size: 12px; } .detalji b { font-size: 15px; }

/* topologija */
.topo-svg { width: 100%; height: 100%; display: block; user-select: none; }
.topo-svg .veza { stroke-width: 2.6; fill: none; }
.topo-svg .veza.rezervna { stroke-dasharray: 7 6; }
.topo-svg .cv text { fill: var(--tekst); font-size: 13px; }
.topo-svg .cv text.ip { fill: var(--tekst2); font-size: 11px; }
.topo-svg .cv.izabran circle.oreol { stroke: var(--plava2); stroke-width: 2; }
.topo-svg .cv { cursor: pointer; }
.topo-alat { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.topo-velika { height: calc(100vh - 210px); min-height: 460px; background: radial-gradient(800px 400px at 50% 0%, #11294d, transparent), #0a1729; border-radius: 8px; border: 1px solid var(--ivica); }

/* mapa */
.leaflet-container { background: #0a1729; font: inherit; }
.mk { width: 30px; height: 30px; }
.mk svg { filter: drop-shadow(0 0 4px rgba(0, 0, 0, .8)); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--karta2); color: var(--tekst); border: 1px solid var(--ivica2); }
.leaflet-popup-content b { font-size: 14px; }
.mapa-velika { height: calc(100vh - 200px); min-height: 460px; border-radius: 8px; overflow: hidden; border: 1px solid var(--ivica); }
.mapa-raspored { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.lista { max-height: calc(100vh - 260px); overflow-y: auto; border: 1px solid var(--ivica); border-radius: 8px; }
.lista div { padding: 7px 10px; border-bottom: 1px solid rgba(29, 58, 99, .6); cursor: pointer; display: flex; gap: 8px; align-items: center; }
.lista div:hover, .lista div.akt { background: rgba(47, 140, 255, .14); }
.lista small { color: var(--tekst3); margin-left: auto; }

/* prijava */
.prijava-telo { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.prijava { width: min(380px, 92vw); background: linear-gradient(170deg, var(--karta2), var(--karta)); border: 1px solid var(--ivica2); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--senka); }
.prijava .brend { padding: 0 0 8px; }
.prijava label { display: flex; flex-direction: column; gap: 6px; color: var(--tekst2); }
.prijava .gr { color: #ff8a8a; }
.prijava small { color: var(--tekst3); text-align: center; }
.prijava .dugme { justify-content: center; padding: 10px; font-size: 15px; }

/* telefon i manji ekrani */
@media (max-width: 1500px) { .kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .mreza2, .mreza3 { grid-template-columns: minmax(0, 1fr); } .detalji { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mapa-raspored { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .meni { position: fixed; left: -250px; transition: left .2s; box-shadow: var(--senka); }
  body.meni-otvoren .meni { left: 0; }
  body.meni-otvoren .zavesa { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 25; }
  .hamb { display: flex; }
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kp { padding: 10px 12px; min-height: 76px; } .kp .v { font-size: 22px; } .kp .kr { width: 36px; height: 36px; }
  .sadrzaj { padding: 12px; } .traka { padding: 10px 12px; } .sat span, .sys { display: none; }
  .forma { grid-template-columns: minmax(0, 1fr); } .forma label { text-align: left; }
  .vis-topo, .vis-mapa { height: 300px; }
}