/* SV Media · demo sustava za javnu nabavu. Podaci su izmišljeni. */
:root{--bg:#F8F6F1;--panel:#fff;--soft:#F1EEE7;--line:#E4DFD4;--ink:#0D0D0D;--muted:#6B6A64;--faint:#9B998F;--ok:#00a35c;--warn:#f59e0b;--bad:#e2445c;--blue:#579bfc;--r:12px;--display:"Sora",system-ui,sans-serif;--body:"Manrope",system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
.app{display:grid;grid-template-columns:232px 1fr;height:100vh}
.side{background:var(--ink);color:#F8F6F1;padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px 18px}
.brand .lg{width:38px;height:38px;border-radius:10px;background:#F8F6F1;display:grid;place-items:center;overflow:hidden}
.brand .lg img{height:30px}
.brand b{font-family:var(--display);font-size:15px;display:block;line-height:1.2}
.brand small{color:#9B998F;font-size:11.5px}
.nav button{all:unset;display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border-radius:9px;cursor:pointer;color:#C9C6BD;font-weight:600}
.nav button:hover{background:#1E1E1E;color:#fff}
.nav button.on{background:#F8F6F1;color:var(--ink)}
.nav .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#222;font-size:13px}
.nav button.on .ic{background:var(--ink);color:#fff}
.nav .cnt{margin-left:auto;font-size:11px;background:var(--ok);color:#fff;border-radius:99px;padding:0 7px}
.side .co{margin-top:auto;font-size:12px;color:#9B998F;border-top:1px solid #262626;padding:12px 8px 2px;line-height:1.5}
.side .co b{color:#F8F6F1;display:block}
.main{overflow:auto;padding:20px 28px 60px;position:relative;background:radial-gradient(1100px 380px at 100% -10%,#EFE7D6 0%,transparent 60%),var(--bg)}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.top h1{font-family:var(--display);font-size:24px;letter-spacing:-.02em;margin:0 8px 0 0}
.sp{flex:1}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.btn:hover{background:var(--soft)}
.btn.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.pri:hover{background:#262626}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.sm{padding:5px 11px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:default}
.muted{color:var(--muted)}.small{font-size:12px}
.demo-badge{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#fff;border:1px dashed var(--line);border-radius:99px;padding:3px 9px;color:var(--muted)}
.av{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:10.5px;font-weight:800;color:#fff;flex:none}
/* kartice */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi .l{font-size:12px;color:var(--muted);font-weight:600}
.kpi .v{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
.kpi .s{font-size:12px;color:var(--muted)}
.kpi .v.g{color:var(--ok)}
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.box h3{margin:0 0 12px;font-family:var(--display);font-size:14px}
.row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--soft)}
.row:last-child{border-bottom:0}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.days{font-weight:800;font-size:12px;border-radius:6px;padding:2px 7px;white-space:nowrap}
.bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:8px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.bars i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:var(--ink)}
.bars i.w{background:var(--ok)}
/* Monday tablica */
.groups{display:grid;gap:18px}
.gh{display:flex;align-items:center;gap:10px;padding:2px 2px 8px;cursor:pointer;user-select:none}
.gh strong{font-family:var(--display);font-size:15px;color:var(--c)}
.gh .car{color:var(--c);width:12px;font-size:12px}
.tbl{background:var(--panel);border:1px solid var(--line);border-left:0;border-radius:0 var(--r) var(--r) 0;overflow:hidden}
.tr{display:grid;grid-template-columns:6px minmax(220px,2.4fr) 110px 110px 92px 150px 140px;align-items:center;border-bottom:1px solid var(--soft);min-height:52px;transition:background .5s}
.tr:last-child{border-bottom:0}
.tr>*{padding:7px 10px;min-width:0}
.tr>.bar{padding:0;align-self:stretch;background:var(--c)}
.tr.hd{min-height:36px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;background:#FBFAF7}
.tr.it{cursor:pointer}.tr.it:hover{background:#FBFAF7}
.tr.flash{background:#E8F8EF}
.tr .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .by{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.new{display:inline-block;font-size:10px;font-weight:800;background:var(--ok);color:#fff;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.cell{color:#fff;font-weight:700;font-size:12px;text-align:center;border-radius:5px;padding:7px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.pb{flex:1;height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
.pb i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .8s ease}
.why{font-size:12px;color:var(--bad);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num{text-align:right;font-variant-numeric:tabular-nums}
/* ladica */
.back{position:fixed;inset:0;background:rgba(13,13,13,.28);z-index:20;animation:fade .2s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(620px,100vw);background:var(--bg);z-index:21;box-shadow:-20px 0 60px -30px rgba(0,0,0,.4);display:flex;flex-direction:column;animation:slide .28s ease}
.dh{padding:18px 22px;border-bottom:1px solid var(--line);background:var(--panel);display:flex;gap:12px;align-items:flex-start}
.dh h2{margin:0;font-family:var(--display);font-size:19px;line-height:1.25}
.db{padding:16px 22px 40px;overflow:auto;display:grid;gap:14px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.facts div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.facts span{display:block;font-size:11px;color:var(--muted);font-weight:600}
.facts b{font-size:14px}
.chk{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--soft)}
.chk:last-child{border-bottom:0}
.chk .ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900;flex:none;margin-top:1px;transition:transform .3s}
.chk .ico.pop{animation:pop .35s}
.chk .t{font-weight:600}
.chk .d{font-size:12px;color:var(--muted)}
.chk .r{margin-left:auto;flex:none}
.typer{background:#FBFAF7;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:12.5px;line-height:1.6;white-space:pre-wrap;min-height:40px}
.typer .cur{display:inline-block;width:7px;height:14px;background:var(--ink);vertical-align:-2px;animation:blink 1s steps(1) infinite}
.ai{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:#7c3aed;background:#F3EEFF;border-radius:99px;padding:2px 8px}
/* kriteriji */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:12.5px;font-weight:600}
.rule{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--soft)}
.rule:last-child{border-bottom:0}
.tg{width:38px;height:22px;border-radius:99px;background:#D9D3C6;position:relative;flex:none;cursor:pointer;transition:background .2s}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.tg.on{background:var(--ok)}.tg.on::after{left:19px}
.inp{border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fff;width:120px}
/* skeniranje */
.scanbar{height:10px;border-radius:99px;background:var(--soft);overflow:hidden;margin:10px 0 6px}
.scanbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#34d399);transition:width .25s linear}
.log{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#0D0D0D;color:#D9F5E5;border-radius:10px;padding:12px 14px;line-height:1.7;max-height:220px;overflow:hidden}
.log .x{color:#9B998F}.log .y{color:#FCA5A5}.log .g{color:#6EE7B7}
/* tost, tura */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:99px;padding:11px 18px;font-weight:700;font-size:13px;z-index:40;animation:up .3s;white-space:nowrap}
.cursor{position:fixed;z-index:60;pointer-events:none;transition:left .75s cubic-bezier(.4,.1,.2,1),top .75s cubic-bezier(.4,.1,.2,1);transform:translate(-4px,-2px)}
.cursor.click svg{transform:scale(.82)}
.cursor svg{transition:transform .12s;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.caption{position:fixed;left:50%;bottom:34px;z-index:55;background:rgba(13,13,13,.92);color:#fff;font-family:var(--display);font-weight:700;font-size:22px;padding:14px 24px;border-radius:16px;max-width:88vw;text-align:center;transform:translateX(-50%);animation:capin .35s ease}
.endcard{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;animation:fade .5s}
.endcard img{height:70px}
.endcard h2{font-family:var(--display);font-size:44px;letter-spacing:-.03em;margin:6px 0 0;line-height:1.05}
.endcard p{font-size:19px;color:var(--muted);margin:0}
.endcard .pill{background:var(--ink);color:#fff;border-radius:99px;padding:16px 30px;font-family:var(--display);font-weight:700;font-size:20px;margin-top:10px}
.endcard .url{font-weight:700;font-size:17px}
.cta-float{position:fixed;right:18px;bottom:18px;z-index:15;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;border-radius:99px;padding:12px 18px;box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
@keyframes up{from{transform:translate(-50%,12px);opacity:0}}
@keyframes capin{from{opacity:0;transform:translate(-50%,10px)}}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes blink{50%{opacity:0}}
/* uži zasloni (i video 4:5 / 9:16) */
@media (max-width:900px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{flex-direction:row;align-items:center;padding:8px 10px;gap:2px;overflow-x:auto}
  .brand{padding:0 8px 0 2px}.brand small,.brand b{display:none}
  .side .co{display:none}
  .nav{display:flex;gap:2px}
  .nav button{padding:7px 9px;font-size:12.5px;width:auto}
  .nav .ic{display:none}
  .main{padding:14px 14px 70px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .tr{grid-template-columns:5px minmax(0,1fr) 84px 118px}
  .tr .c-val,.tr .c-who,.tr .c-doc{display:none}
  .facts{grid-template-columns:repeat(2,1fr)}
  .drawer{width:100vw}
  .caption{font-size:19px;bottom:90px}
  .endcard h2{font-size:36px}
}