/* Koridor Twin: svedena tema, plava #223259, tamnocrvena #7C1034, svetlo siva #F4F6F8 */
:root{
  --navy:#223259;--n80:rgba(34,50,89,.8);--n60:rgba(34,50,89,.6);--n40:rgba(34,50,89,.4);--n20:rgba(34,50,89,.2);--n10:rgba(34,50,89,.1);--n05:rgba(34,50,89,.05);
  --red:#7C1034;--red-soft:rgba(124,16,52,.08);--grey:#F4F6F8;--white:#FFFFFF;
  /* nazivi koje koristi app.js */
  --bg0:#F4F6F8;--panel:#FFFFFF;--panel-2:#F4F6F8;--panel-solid:#FFFFFF;
  --line:#E1E5EB;--line-2:#CBD2DC;--edge:#223259;
  --blue:#223259;--blue-2:rgba(34,50,89,.55);--blue-3:#223259;--cyan:#7C1034;--deep:#223259;--road:#E6EAF0;
  --ink:#1D2638;--muted:#566074;--dim:#6B7486;
  --go:#2E9E6B;--amber:#D99422;--stop:#C8313E;--off:#D6DCE4;
  --go-soft:rgba(46,158,107,.10);--amber-soft:rgba(217,148,34,.12);--stop-soft:rgba(200,49,62,.09);--blue-soft:rgba(34,50,89,.07);
  --font:'Source Sans 3','Segoe UI',Arial,sans-serif;
  --r:4px;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--grey)}
body{margin:0;min-height:100%;background:var(--grey);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font);margin:0;line-height:1.2;color:var(--navy)}
h1{font-size:30px;font-weight:700;letter-spacing:-.01em}
h2{font-size:18px;font-weight:700}
h3{font-size:15.5px;font-weight:700}
p{margin:0}
a{color:var(--navy)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.hidden{display:none!important}

/* ---------- raspored ---------- */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100%}
.rail{position:sticky;top:env(safe-area-inset-top,0px);height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;padding:20px 12px 16px;background:var(--navy);color:#fff}
.brand{padding:2px 10px 18px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.14)}
.brand .mark{display:flex;align-items:center;gap:10px}
.brand .hex{width:14px;height:28px;flex:none;background:var(--red);border-radius:2px}
.brand strong{font-size:20px;font-weight:700;color:#fff;white-space:nowrap}
.brand small{display:block;color:rgba(255,255,255,.6);font-size:13px;margin-top:4px}
.navsec{font-size:12.5px;color:rgba(255,255,255,.5);padding:14px 12px 4px}
.nav{display:flex;flex-direction:column;gap:1px}
.nav button{position:relative;display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:8px 12px;font-size:15.5px;font-weight:600;color:rgba(255,255,255,.75);border-radius:var(--r)}
.nav button:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav button[aria-current="page"]{color:#fff;background:rgba(255,255,255,.13)}
.nav button[aria-current="page"]::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;background:#D6315F;border-radius:2px}
.rail .foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.14);padding:12px 10px 0;font-size:14px}
.rail .foot .who{color:#fff;font-weight:600}
.rail .foot .role{font-size:13px;color:rgba(255,255,255,.6)}
.rail .foot .row{margin-top:8px}
.rail .linkbtn{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}

main{min-width:0;padding:22px 28px 44px}
.wrap{max-width:1360px;margin:0 auto}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.topbar .kick{font-size:14px;font-weight:600;color:var(--red)}
.topbar h1{margin-top:2px}
.readout{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.readout .box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 14px;display:flex;flex-direction:column;justify-content:center;min-width:118px}
.readout .box .l{font-size:12.5px;color:var(--dim)}
.readout .box .v{font-size:19px;font-weight:700;color:var(--navy)}
.readout select{background:transparent;border:0;color:var(--navy);font-size:17px;font-weight:700;padding:0;cursor:pointer}
.dotlive{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--go);margin-right:7px;vertical-align:1px}

/* ---------- paneli: puna plava traka sa naslovom, kao kolone na slici ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 18px 16px;min-width:0;overflow:hidden}
.panel>.ph,.panel>h2:first-child{margin:0 -18px 14px;padding:11px 18px;background:var(--navy);color:#fff}
.panel>h2:first-child{font-size:18px}
.panel>.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.panel>.ph h2{color:#fff}
.panel>.ph .c-muted,.panel>.ph p{color:rgba(255,255,255,.75)}
.panel>.ph .tag{color:#fff;background:rgba(255,255,255,.14);border-color:transparent}
.panel>.ph .btn{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.panel>.ph .btn:hover{background:rgba(255,255,255,.12)}
.panel>.ph .btn.primary{background:#fff;color:var(--navy);border-color:#fff}
.panel>.ph .btn.danger{color:#fff;border-color:rgba(255,255,255,.55)}
.panel>.ph .seg{background:transparent;border-color:rgba(255,255,255,.4)}
.panel>.ph .seg button{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.25)}
.panel>.ph .seg button[aria-pressed="true"]{background:#fff;color:var(--navy)}
.panel>.ph select{width:auto;border-color:rgba(255,255,255,.5)}
.panel>.ph b{color:#fff}
.panel.accent>.ph,.panel.accent>h2:first-child{background:var(--red)}
.panel.accent>.ph .btn.primary{color:var(--red)}
.panel .hint{color:var(--muted);font-size:14px;font-style:italic;margin-bottom:12px}
.tag{font-size:12.5px;font-weight:600;color:var(--navy);background:var(--n10);border:1px solid transparent;padding:1px 9px;border-radius:999px;white-space:nowrap}
.stack{display:grid;gap:16px}
.g2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.g2e{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spread{justify-content:space-between}
.mt{margin-top:12px}.mt2{margin-top:20px}

/* ---------- ključni pokazatelji ---------- */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kpi{padding:14px 18px 16px;border-left:1px solid var(--line)}
.kpi:first-child{border-left:0;background:var(--red-soft)}
.kpi:first-child .v{color:var(--red)}
.kpi .l{font-size:14px;font-weight:600;color:var(--navy)}
.kpi .v{font-size:38px;font-weight:700;line-height:1.05;margin:6px 0 4px;color:var(--navy);letter-spacing:-.01em}
.kpi .v small{font-size:17px;font-weight:600;color:var(--dim);margin-left:3px}
.kpi .d{font-size:13.5px;color:var(--muted)}
.bar{height:4px;background:var(--n10);margin-top:10px;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--navy)}
.c-go{color:var(--go)}.c-amber{color:var(--amber)}.c-stop{color:var(--stop)}.c-muted{color:var(--muted)}.c-cyan{color:var(--red)}
.kpi .d .c-amber{color:var(--red);font-weight:600}

.chip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:1px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.chip.crit{color:var(--stop);background:var(--stop-soft)}
.chip.warn{color:#9A6408;background:var(--amber-soft)}
.chip.ok{color:var(--go);background:var(--go-soft)}
.chip.info,.chip.nodata{color:var(--navy);background:var(--n10)}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--n40);background:#fff;color:var(--navy);padding:7px 15px;cursor:pointer;font-size:14.5px;font-weight:600;border-radius:var(--r);white-space:nowrap}
.btn:hover{background:var(--n05);border-color:var(--navy)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:#1A274A}
.btn.danger{border-color:rgba(124,16,52,.5);color:var(--red)}
.btn.danger:hover{background:var(--red-soft)}
.btn.small{padding:4px 11px;font-size:13.5px}
.btn:disabled{opacity:.45;cursor:default}
.linkbtn{background:none;border:0;color:var(--navy);cursor:pointer;font-weight:600;font-size:14.5px;padding:0;text-decoration:underline;text-decoration-color:var(--n20);text-underline-offset:3px}
.linkbtn:hover{color:var(--red);text-decoration-color:var(--red)}
.seg{display:inline-flex;border:1px solid var(--n20);background:#fff;border-radius:var(--r);overflow:hidden}
.seg button{border:0;background:none;padding:6px 14px;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--muted);border-left:1px solid var(--n20)}
.seg button:first-child{border-left:0}
.seg button:hover{background:var(--n05)}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}

.field{display:grid;gap:4px}
.field label,.flabel{font-size:13.5px;font-weight:600;color:var(--navy)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  background:#fff;border:1px solid var(--line-2);color:var(--ink);padding:7px 10px;width:100%;border-radius:var(--r)}
input:focus,select:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--n10);outline:none}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;min-height:260px}
.form{display:grid;grid-template-columns:180px minmax(0,1fr);gap:10px 14px;align-items:center;max-width:680px}
.form label{font-size:14px;font-weight:600;color:var(--navy)}

.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:13px;font-weight:600;color:var(--dim);padding:8px 10px;border-bottom:2px solid var(--n20);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover td{background:var(--n05)}
td.n,th.n{text-align:right}
td.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.gname{display:block;font-size:12.5px;color:var(--muted);font-weight:400}

.list{display:flex;flex-direction:column}
.item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .t{font-weight:600;color:var(--navy)}
.item .s{font-size:14px;color:var(--muted)}
.item .end{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.hm{display:grid;grid-template-columns:repeat(24,minmax(6px,1fr));gap:2px;min-width:230px}
.hm span{height:15px;background:var(--off);border-radius:1px}
.strip{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 14px 4px;margin-bottom:16px;overflow-x:auto}
.strip svg{display:block;width:100%;min-width:640px;height:auto}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:2px 4px 6px}
.dot{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:0;border-radius:2px}

.chart{width:100%}
.chart svg{display:block;width:100%;height:auto}
.canvas{position:relative;width:100%}
.canvas canvas{display:block;width:100%}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.metric{background:var(--grey);border-radius:var(--r);padding:10px 14px}
.metric .l{font-size:13.5px;font-weight:600;color:var(--navy)}
.metric .v{font-size:26px;font-weight:700;color:var(--navy)}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:4px 0 14px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:8px 14px;cursor:pointer;font-weight:600;font-size:15px;color:var(--muted);white-space:nowrap}
.tabs button:hover{color:var(--navy)}
.tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--red)}
.srcbtn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;width:100%;text-align:left;border:1px solid var(--line);background:#fff;padding:11px 14px;cursor:pointer;margin-bottom:8px;border-radius:var(--r)}
.srcbtn:hover{border-color:var(--n40)}
.srcbtn[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 4px 0 0 var(--red);background:var(--n05)}
.srcbtn .t{font-weight:600;color:var(--navy)}
.srcbtn .chip{align-self:start}
.srcbtn .s{grid-column:1/-1;font-size:13.5px;color:var(--muted)}
.note{background:var(--n05);border-left:3px solid var(--navy);padding:10px 14px;font-size:14px;color:var(--muted);border-radius:0 var(--r) var(--r) 0}
.note.warn{border-left-color:var(--red);background:var(--red-soft)}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--grey);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;overflow-x:auto;white-space:pre;color:var(--navy)}
.key{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:var(--red-soft);border:1px solid rgba(124,16,52,.3);border-radius:var(--r);padding:9px 12px;color:var(--red);word-break:break-all}
.dl{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 14px;margin:10px 0}
.dl dt{font-weight:600;color:var(--navy)}
.dl dd{margin:0}
.empty{padding:24px;text-align:center;color:var(--muted);font-style:italic;background:var(--grey);border-radius:var(--r)}
.loading{padding:40px;text-align:center;color:var(--muted)}
.loading::after{content:"";display:inline-block;width:12px;height:12px;margin-left:10px;border:2px solid var(--navy);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}
details summary{color:var(--navy);font-weight:600}

/* ---------- dijalog i obaveštenja ---------- */
.modal-back{position:fixed;inset:0;background:rgba(34,50,89,.45);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{max-width:620px;width:100%;max-height:calc(100vh - 40px);overflow:auto;padding-top:0}
.modal>h2:first-child,.modal #wz>.ph{margin:0 -18px 14px;padding:12px 18px;background:var(--navy);color:#fff}
.modal #wz>.ph h2{color:#fff}
.modal #wz>.ph .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.toasts{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:grid;gap:8px}
.toast{background:var(--navy);color:#fff;border-radius:var(--r);padding:10px 16px;min-width:260px;max-width:420px;box-shadow:0 6px 20px rgba(34,50,89,.25)}
.toast.err{background:var(--red)}

/* ---------- prijava ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login .panel{width:100%;max-width:420px;padding-bottom:26px}
.login .panel>.kick{margin:0 -18px 0;padding:18px 18px 0;background:var(--navy);color:rgba(255,255,255,.7);font-size:14px}
.login .panel>h1{margin:0 -18px 18px;padding:2px 18px 18px;background:var(--navy);color:#fff;font-size:30px;border-bottom:4px solid var(--red)}
.login form{display:grid;gap:14px;margin-top:18px}
.err{color:var(--stop);font-size:14px;min-height:20px}

/* ---------- izveštaj ---------- */
.sheet{background:#fff;color:var(--ink);max-width:880px;margin:0 auto;padding:46px 54px;border:1px solid var(--line);border-radius:var(--r)}
.sheet h1{color:var(--navy);font-size:27px}
.sheet h2{color:var(--navy);font-size:18px;margin:26px 0 8px;padding-bottom:5px;border-bottom:2px solid var(--red)}
.sheet p{margin:6px 0;line-height:1.6}
.sheet .meta{color:var(--muted);font-size:14px}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.kpi:nth-child(4){border-left:0}.kpi:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:980px){.g2,.g2e{grid-template-columns:minmax(0,1fr)}.g3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:840px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:sticky;top:env(safe-area-inset-top,0px);height:auto;flex-direction:row;align-items:center;overflow-x:auto;padding:8px 10px;z-index:20}
  .brand{border:0;padding:0 10px 0 0;margin:0}.brand small,.navsec,.rail .foot .who,.rail .foot .role{display:none}
  .nav{flex-direction:row}.nav button{white-space:nowrap;font-size:15px}.nav button[aria-current="page"]::before{left:8px;right:8px;top:auto;bottom:0;width:auto;height:3px}
  .rail .foot{margin:0 0 0 8px;border:0;padding:0}.rail .foot .row{margin:0;flex-wrap:nowrap}
  main{padding:14px 12px 30px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi{border-left:0!important;border-top:1px solid var(--line)}
  .form,.dl{grid-template-columns:minmax(0,1fr)}.metrics{grid-template-columns:minmax(0,1fr)}
  .sheet{padding:24px 18px}
}
@media (prefers-reduced-motion:reduce){.loading::after{animation:none}}
@media print{
  body,html{background:#fff}
  .rail,.topbar,.strip,.no-print,.toasts{display:none!important}
  .shell{display:block}main{padding:0}.sheet{padding:0;max-width:none;border:0}
}
.map{position:relative;overflow:hidden;background:#E8ECF1;border-radius:var(--r);touch-action:none;cursor:grab;user-select:none}
.map:active{cursor:grabbing}
.map-tiles img{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none}
.map-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-mark{position:absolute;transform:translate(-50%,-50%);min-width:32px;height:32px;padding:0 6px;border-radius:16px;background:var(--mc);color:#fff;font-weight:700;font-size:13px;border:3px solid #fff;box-shadow:0 2px 6px rgba(34,50,89,.35);cursor:pointer}
.map-mark:hover,.map-mark.active{outline:3px solid var(--red);outline-offset:1px}
.map-ctl{position:absolute;right:10px;top:10px;display:grid;gap:4px}
.map-ctl button{width:32px;height:32px;border:1px solid var(--line-2);background:#fff;color:var(--navy);font-size:18px;font-weight:700;border-radius:var(--r);cursor:pointer}
.map-attr{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.88);font-size:11.5px;padding:1px 7px;color:var(--muted)}
.map-attr a{color:var(--navy)}
.schem svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.edgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}
.lanebox{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--grey)}
.checks{display:flex;gap:14px;flex-wrap:wrap}
.checks label{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--navy)}
.lanes-row{display:flex;gap:6px;flex-wrap:wrap}
.lanes-row button{border:1px solid var(--line-2);background:#fff;border-radius:var(--r);padding:4px 10px;cursor:pointer;font-weight:600;color:var(--navy)}
.lanes-row button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.intlist{display:flex;flex-direction:column;gap:6px}
.planbar{display:block;width:100%;height:auto}
.tbl input,.tbl select{padding:5px 7px}
@media (max-width:980px){.edgrid{grid-template-columns:minmax(0,1fr)}}