/* ====== STOLAR — zajednički dizajn sistem ====== */
:root {
  --ground:#E8ECEA; --surface:#FFFFFF; --surface-2:#F4F6F5;
  --ink:#1A211D; --ink-2:#5C665F; --ink-3:#8A938C;
  --line:#D3D9D5; --line-2:#E3E7E4;
  --accent:#B5651D; --accent-d:#944F12;
  --steel:#2C6E68; --slate:#5B4B8A; --gun:#51606B;
  --ok:#2E7D52; --ok-bg:#E4F1EA; --warn:#C0492B; --warn-bg:#F8E7E2;
  --mono:"Cascadia Mono","Consolas",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:var(--sans); background:var(--ground); color:var(--ink); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; }
button, input, select, textarea { font-family:inherit; }
a { color:inherit; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---- shell ---- */
.app { display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
.side { background:var(--ink); color:#C9D2CC; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:11px; padding:20px 20px 22px; border-bottom:1px solid #2B342E; text-decoration:none; }
.brand .mark { width:34px; height:34px; flex:none; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:-.5px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.22); }
.brand b { color:#fff; font-size:17px; letter-spacing:2.5px; }
.brand small { display:block; color:#7E887F; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; margin-top:1px; }
.nav { padding:12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.nav .grp { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#6C766E; padding:14px 12px 6px; }
.nav a { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:7px; color:#C2CBC4; text-decoration:none; font-size:13.5px; border:1px solid transparent; }
.nav a .ic { width:17px; text-align:center; opacity:.8; font-size:13px; }
.nav a:hover { background:#232C26; color:#fff; }
.nav a.active { background:var(--accent); color:#fff; border-color:var(--accent-d); }
.nav a.soon { opacity:.65; }
.side .foot { margin-top:auto; padding:16px 20px; border-top:1px solid #2B342E; font-size:12px; color:#7E887F; }

.main { display:flex; flex-direction:column; min-width:0; }
.topbar { background:var(--surface); border-bottom:1px solid var(--line); padding:14px 26px; display:flex; align-items:center; gap:14px; }
.crumb { font-size:13.5px; color:var(--ink-2); }
.crumb b { color:var(--ink); }
.topbar .who { margin-left:auto; display:flex; align-items:center; gap:10px; color:var(--ink-2); font-size:13px; }
.topbar .who .av { width:30px; height:30px; border-radius:50%; background:var(--steel); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; }

.screen { padding:24px 26px 40px; }

/* ---- page head ---- */
.phead { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--accent-d); font-weight:700; }
.phead h1 { margin:4px 0 2px; font-size:24px; letter-spacing:-.4px; font-weight:700; }
.phead .cnt { font-family:var(--mono); font-size:13px; color:var(--ink-3); }
.phead .sub, .phead .desc { color:var(--ink-2); font-size:13.5px; max-width:660px; }
.spacer { flex:1; }

/* ---- buttons ---- */
.btn { border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:9px 15px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.btn:hover { border-color:var(--ink-3); }
.btn.primary { background:var(--accent); border-color:var(--accent-d); color:#fff; }
.btn.primary:hover { background:var(--accent-d); }
.btn.ghost { background:transparent; }

.search { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:7px 12px; }
.search input { border:0; outline:0; background:transparent; font-size:13px; width:170px; color:var(--ink); }
.search .mg { color:var(--ink-3); }

/* ---- select (custom dropdown) ---- */
select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-family:inherit; font-size:13.5px; color:var(--ink); line-height:1.3;
  border:1px solid var(--line); border-radius:8px;
  padding:9px 34px 9px 12px; cursor:pointer;
  background-color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.5%204.5l3.5%203.5%203.5-3.5'%20fill='none'%20stroke='%235C665F'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:12px 12px;
  transition:border-color .12s, box-shadow .12s;
}
select:hover { border-color:var(--ink-3); }
select:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,101,29,.14);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.5%204.5l3.5%203.5%203.5-3.5'%20fill='none'%20stroke='%23944F12'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); }
select option { color:var(--ink); }
.vtable select { width:100%; }

/* ---- card + table ---- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th { text-align:left; font-size:11px; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-3); padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
tbody td { padding:11px 16px; border-bottom:1px solid var(--line-2); font-size:13.5px; vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#FAFBFA; }
.empty { padding:30px; text-align:center; color:var(--ink-3); font-size:13px; }
.note { font-size:12px; color:var(--ink-3); margin-top:10px; }

/* ---- pills / flags / chips ---- */
.flag { font-family:var(--mono); font-weight:700; font-size:11px; padding:2px 7px; border-radius:5px; }
.flag.k { background:#EAEEF0; color:var(--gun); } .flag.p { background:#FBF1E4; color:var(--accent-d); }
.pill { font-size:11.5px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); background:var(--surface-2); white-space:nowrap; }
.pill.ok { color:var(--ok); border-color:#BEE0CC; background:var(--ok-bg); }
.pill.mut { color:var(--ink-3); }
.pill.warn { color:var(--warn); border-color:#E6C3BA; background:var(--warn-bg); }
.sk { display:inline-block; font-size:11px; padding:2px 8px; border-radius:6px; background:#EFEAF5; color:var(--slate); margin:1px 3px 1px 0; }
.stk.in { color:var(--ok); } .stk.ord { color:var(--accent-d); } .stk.low { color:var(--warn); }
.yes { color:var(--ok); font-weight:700; } .no { color:var(--ink-3); }

/* ---- order context strip ---- */
.ctx { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:4px; display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-bottom:14px; }
.ctx .cell { padding:11px 15px; border-radius:9px; }
.ctx .cell + .cell { box-shadow:-1px 0 0 var(--line-2); }
.ctx .k { font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); }
.ctx .v { font-size:15px; font-weight:600; margin-top:3px; }
.ctx .v small { font-weight:400; color:var(--ink-2); font-size:12px; }

/* ---- banner ---- */
.banner { display:flex; align-items:center; gap:13px; border-radius:11px; padding:13px 18px; margin-bottom:18px; font-size:14px; border:1px solid; }
.banner.good { background:var(--ok-bg); border-color:#BEE0CC; color:#1E5C3C; }
.banner .dot { width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; box-shadow:0 0 0 4px rgba(46,125,82,.16); }
.banner b { font-weight:700; } .banner .push { margin-left:auto; }

/* ---- gantt ---- */
.board { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.board .legend { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--line-2); font-size:12px; color:var(--ink-2); }
.legend .lg { display:inline-flex; align-items:center; gap:7px; }
.legend .sw { width:18px; height:12px; border-radius:3px; border-left:3px solid; }
.legend .sw.a { background:#FBF1E4; border-color:var(--accent); }
.legend .sw.b { background:#E6F1EF; border-color:var(--steel); }
.legend .sw.c { background:#ECE9F5; border-color:var(--slate); }
.legend .sw.d { background:#EAEEF0; border-color:var(--gun); }
.legend .sw.wait { background:repeating-linear-gradient(45deg,#fff,#fff 4px,#E7E2D7 4px,#E7E2D7 7px); border:1px dashed var(--ink-3); }
.legend .sw.bn { background:#fff; border:0; box-shadow:inset 3px 0 0 var(--warn); }
.gantt { --cols:8; }
.grow { display:grid; grid-template-columns:196px 1fr; }
.grow + .grow { border-top:1px solid var(--line-2); }
.ghead { background:var(--surface-2); }
.glabel { padding:9px 16px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.glabel .nm { font-weight:600; font-size:13.5px; }
.glabel .skl { font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:2px; }
.glabel.bn { box-shadow:inset 3px 0 0 var(--warn); }
.glabel .tag-bn { font-family:var(--mono); font-size:9.5px; letter-spacing:.8px; color:var(--warn); font-weight:700; margin-top:3px; text-transform:uppercase; }
.days { display:flex; }
.days .d { flex:1 1 0; padding:9px 8px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--ink-2); border-right:1px solid var(--line-2); }
.days .d:last-child { border-right:0; }
.days .d b { display:block; color:var(--ink); font-size:12px; }
.lane { position:relative; height:54px; background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px calc(100%/var(--cols))); }
.lane.bn { background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px calc(100%/var(--cols))),linear-gradient(0deg,rgba(192,73,43,.05),rgba(192,73,43,.05)); }
.op { position:absolute; top:8px; height:38px; left:calc(var(--s)*(100%/var(--cols)) + 4px); width:calc(var(--n)*(100%/var(--cols)) - 8px); border-radius:7px; padding:5px 9px; border-left:3px solid var(--c,var(--gun)); background:var(--bg,#EAEEF0); box-shadow:0 1px 2px rgba(20,30,25,.10),0 0 0 1px rgba(20,30,25,.04); overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.op .code { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--c,var(--gun)); letter-spacing:.5px; }
.op .name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op.a { --c:var(--accent); --bg:#FBF1E4; } .op.b { --c:var(--steel); --bg:#E6F1EF; }
.op.c { --c:var(--slate); --bg:#ECE9F5; } .op.d { --c:var(--gun); --bg:#EAEEF0; }
.op.bnop { box-shadow:0 1px 2px rgba(192,73,43,.2),0 0 0 1px rgba(192,73,43,.35); }
.op.wait { background:repeating-linear-gradient(45deg,#fff,#fff 5px,#EFE9DC 5px,#EFE9DC 9px); border:1px dashed var(--ink-3); border-left:1px dashed var(--ink-3); box-shadow:none; }
.op.wait .code { color:var(--ink-2); } .op.wait .name { color:var(--ink-2); font-weight:500; font-size:11px; }
@media (prefers-reduced-motion: no-preference) {
  .anim .op { opacity:0; transform:translateX(-10px); animation:place .42s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:calc(var(--i,0)*55ms); }
  @keyframes place { to { opacity:1; transform:none; } }
}
.foot-note { color:var(--ink-3); font-size:12px; margin-top:12px; display:flex; gap:8px; align-items:center; }

/* ---- planiranje: insert bar + capacity grid + machine strip ---- */
.planbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.planbar .lbl { font-size:12.5px; color:var(--ink-2); font-weight:600; }
.planbar select { min-width:230px; }

.mstrip { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.mstrip .mttl { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); margin-right:2px; }
.mcard { border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:var(--surface); font-size:12.5px; display:flex; align-items:center; gap:9px; }
.mcard .mc { font-family:var(--mono); font-weight:700; }
.mcard .ml { color:var(--ink-3); font-size:11.5px; }
.mcard .mdot { width:9px; height:9px; border-radius:50%; flex:none; }
.mdot.ok { background:var(--ok); } .mdot.kvar { background:var(--warn); } .mdot.odr { background:#E2A33C; }
.mcard.down { border-color:#E6C3BA; background:var(--warn-bg); }
.mcard .mst { font-family:var(--mono); font-size:11px; }
.mcard.down .mst { color:var(--warn); font-weight:700; }

.rangebar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.rangebar .pager { display:inline-flex; }
.rangebar .nav { width:36px; height:36px; border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink-2); display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; padding:0; }
.rangebar .pager .nav:first-child { border-radius:8px 0 0 8px; }
.rangebar .pager .nav:last-child { border-radius:0 8px 8px 0; margin-left:-1px; }
.rangebar .nav:hover { border-color:var(--ink-3); color:var(--ink); background:var(--surface-2); position:relative; z-index:1; }
.rangebar .nav:active { background:var(--line-2); }
.rangebar .period { font-weight:700; font-size:14.5px; min-width:188px; }
.rtoggle { display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:3px; gap:3px; }
.rtoggle button { border:0; background:transparent; color:var(--ink-2); padding:6px 13px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.rtoggle button.on { background:var(--ink); color:#fff; }
.cap-h.weekend { color:var(--ink-3); background:#E4E7E5; }
.ccell.weekend { background:#EFF1F0; cursor:default; }
.cap-h.today { box-shadow:inset 0 -3px 0 var(--accent); }
.cap-h.today b { color:var(--accent-d); }
.ccell.past { background:#FBFAF8; }
.ccell .hrs.act { font-size:10.5px; }

.capgrid { display:grid; grid-template-columns:188px repeat(8, minmax(74px,1fr)); min-width:760px; }
.cap-h { background:var(--surface-2); padding:9px 6px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--ink-2); border-bottom:1px solid var(--line); border-right:1px solid var(--line-2); }
.cap-h:last-child { border-right:0; }
.cap-h.corner { text-align:left; padding-left:14px; font-size:10.5px; letter-spacing:.5px; color:var(--ink-3); }
.cap-h b { display:block; color:var(--ink); font-size:12px; }
.cap-rl { padding:8px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line-2); display:flex; flex-direction:column; justify-content:center; }
.cap-rl .nm { font-weight:600; font-size:13.5px; }
.cap-rl .rl { font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.cap-rl.bn { box-shadow:inset 3px 0 0 var(--warn); }
.ccell { border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:8px 8px 7px; cursor:pointer; display:flex; flex-direction:column; gap:5px; justify-content:center; min-height:56px; }
.ccell:last-child { border-right:0; }
.ccell:hover { background:#FAFBFA; }
.ccell.empty { cursor:default; background:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(0,0,0,.018) 7px,rgba(0,0,0,.018) 8px); }
.ccell .barwrap { height:9px; border-radius:5px; background:var(--surface-2); overflow:hidden; display:flex; }
.ccell .seg { height:100%; }
.ccell .seg.a { background:var(--accent); } .ccell .seg.b { background:var(--steel); }
.ccell .seg.c { background:var(--slate); } .ccell .seg.d { background:var(--gun); }
.ccell .seg.e { background:#A24D7A; }
.ccell .seg.f { background:#3E7CB1; }
.ccell .seg.g { background:#7A8C3A; }

.ostrip { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.ostrip .mttl { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); margin-right:2px; }
.ochip { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:4px 5px 4px 11px; font-size:12.5px; background:var(--surface); }
.ochip .od { width:9px; height:9px; border-radius:50%; flex:none; }
.ochip .act { border:0; background:var(--surface-2); border-radius:999px; padding:3px 10px; font-size:11.5px; cursor:pointer; color:var(--ink-2); }
.ochip .act:hover { background:var(--line-2); color:var(--ink); }
.ochip.stopped { opacity:.55; }
.ochip.stopped .onm { text-decoration:line-through; }
.ccell .hrs { font-family:var(--mono); font-size:11px; color:var(--ink-2); display:flex; align-items:center; }
.ccell .hrs .ld { margin-right:5px; }
.ccell .hrs.mid { color:#9A6B14; } .ccell .hrs.hi { color:var(--warn); font-weight:700; }

.legend-inline { display:inline-flex; gap:12px; align-items:center; font-size:12px; color:var(--ink-2); flex-wrap:wrap; }
.legend-inline .lg { display:inline-flex; align-items:center; gap:6px; }
.legend-inline .sw { width:14px; height:10px; border-radius:3px; }
.loadleg { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-2); }
.ld { width:9px; height:9px; border-radius:50%; display:inline-block; }
.ld.ok { background:var(--ok); } .ld.mid { background:#E2A33C; } .ld.hi { background:var(--warn); }
.ccell.down { cursor:default; background:var(--warn-bg); }
.ccell.down .dtxt { font-family:var(--mono); font-size:10px; color:var(--warn); font-weight:700; }

.daydetail .dl { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2); }
.daydetail .dl:last-child { border-bottom:0; }
.daydetail .dl .tm { font-family:var(--mono); font-size:12px; color:var(--ink-3); width:46px; flex:none; padding-top:1px; }
.daydetail .dl .cd { font-family:var(--mono); font-weight:700; font-size:11px; color:#fff; background:var(--accent); border-radius:5px; padding:2px 6px; flex:none; }
.daydetail .dl .cd.b { background:var(--steel); }
.daydetail .dl .info { flex:1; min-width:0; }
.daydetail .dl .info .nm { font-weight:600; font-size:13px; }
.daydetail .dl .info .mt { font-family:var(--mono); font-size:11px; color:var(--ink-2); margin-top:2px; }
.daydetail .dl .info .mt .ord { color:var(--accent-d); font-weight:600; }
.daydetail .dl .dur { font-family:var(--mono); font-size:12px; color:var(--ink); white-space:nowrap; }
.daydetail .sumbar { display:flex; justify-content:space-between; align-items:center; background:var(--surface-2); border-radius:9px; padding:10px 13px; margin-bottom:14px; font-size:13px; }
.daydetail .sumbar b { font-family:var(--mono); }

/* ---- routing diagram ---- */
.routing { display:flex; flex-direction:column; gap:14px; }
.swim { background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:13px 15px; }
.swim .lh { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.swim .lh .tag { font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:1px; padding:3px 9px; border-radius:6px; color:#fff; }
.swim .lh .ttl { font-weight:600; }
.swim .lh .feed { margin-left:auto; font-size:11.5px; color:var(--ink-2); font-family:var(--mono); }
.swim.A .tag { background:var(--accent); } .swim.B .tag { background:var(--steel); }
.swim.C .tag { background:var(--slate); } .swim.D .tag { background:var(--gun); }
.flow { display:flex; align-items:stretch; flex-wrap:wrap; }
.node { flex:1 1 0; min-width:130px; border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:var(--surface-2); border-top:3px solid var(--nc,var(--gun)); }
.node .code { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--nc,var(--gun)); letter-spacing:.5px; }
.node .nm { font-size:13px; font-weight:600; margin:2px 0 5px; }
.node .meta { font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.node .meta b { color:var(--ink-2); font-weight:600; }
.swim.A .node { --nc:var(--accent); } .swim.B .node { --nc:var(--steel); }
.swim.C .node { --nc:var(--slate); } .swim.D .node { --nc:var(--gun); }
.arrow { flex:0 0 26px; display:grid; place-items:center; color:var(--ink-3); font-size:15px; }
.node.bn { border-color:var(--warn); box-shadow:0 0 0 1px var(--warn); }
.node.bn .bnt { font-family:var(--mono); font-size:9px; letter-spacing:.6px; color:var(--warn); font-weight:700; text-transform:uppercase; display:inline-block; margin-top:4px; }
.merge { display:flex; align-items:center; gap:12px; padding:4px 2px; color:var(--ink-2); font-size:12.5px; flex-wrap:wrap; }
.merge .pipe { font-family:var(--mono); color:var(--ink-3); }
.chip { font-size:11.5px; font-family:var(--mono); padding:3px 9px; border-radius:6px; border:1px dashed var(--ink-3); color:var(--ink-2); }
.chip.k { border-style:solid; background:#EAEEF0; color:var(--gun); border-color:var(--line); }

/* ---- product head ---- */
.prodhead { display:grid; grid-template-columns:168px 1fr; gap:22px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:18px; }
.photo { border-radius:11px; aspect-ratio:1; background:radial-gradient(120% 90% at 50% 18%,#D9A86A 0%,#B5651D 46%,#8A4D14 100%); position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.photo .chair { position:absolute; inset:0; display:grid; place-items:center; }
.photo .cap { position:absolute; left:0; right:0; bottom:0; padding:8px 11px; font-family:var(--mono); font-size:10.5px; color:#fff; background:linear-gradient(0deg,rgba(0,0,0,.35),transparent); }
.prodmeta h1 { margin:2px 0 8px; font-size:24px; letter-spacing:-.4px; }
.badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.kv { display:grid; grid-template-columns:repeat(3,1fr); gap:12px 24px; max-width:560px; }
.kv .k { font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-3); }
.kv .v { font-weight:600; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.tabs button { border:0; background:transparent; padding:11px 16px; font-size:13.5px; font-weight:600; color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.tabs button.on { color:var(--accent-d); border-bottom-color:var(--accent); }
.tabpane[hidden] { display:none; }

/* ---- dashboard ---- */
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:16px 17px; }
.stat .k { font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-3); }
.stat .v { font-size:30px; font-weight:700; letter-spacing:-1px; margin-top:6px; font-family:var(--mono); }
.stat .d { font-size:12px; color:var(--ink-2); margin-top:3px; }
.stat.warn { border-color:#E6C3BA; } .stat.warn .v { color:var(--warn); }
.stat.ok .v { color:var(--ok); }
.cols2 { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; align-items:start; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.panel .ph { padding:13px 16px; border-bottom:1px solid var(--line-2); font-weight:700; display:flex; align-items:center; gap:8px; }
.panel .ph .more { margin-left:auto; font-size:12px; font-weight:500; color:var(--accent-d); text-decoration:none; }
.tasklist { padding:6px 0; }
.tl { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line-2); }
.tl:last-child { border-bottom:0; }
.tl .who { font-weight:600; width:120px; }
.tl .op2 { font-family:var(--mono); font-size:12px; color:var(--ink-2); flex:1; }
.bar { height:8px; border-radius:6px; background:var(--surface-2); overflow:hidden; min-width:90px; flex:0 0 110px; }
.bar > i { display:block; height:100%; background:var(--accent); }
.bar.bn > i { background:var(--warn); }

/* ---- izvještaj: učinak ---- */
.effwrap { display:flex; align-items:center; gap:10px; min-width:160px; }
.effbar { flex:1; height:8px; border-radius:6px; background:var(--surface-2); overflow:hidden; min-width:80px; }
.effbar > i { display:block; height:100%; }
.effbar.ok > i { background:var(--ok); } .effbar.mid > i { background:#E2A33C; } .effbar.hi > i { background:var(--warn); }
.effval { font-family:var(--mono); font-weight:700; width:46px; text-align:right; }
.effval.ok { color:var(--ok); } .effval.mid { color:#9A6B14; } .effval.hi { color:var(--warn); }
.repbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.rtrack { position:relative; flex:1; height:11px; background:var(--surface-2); border-radius:6px; overflow:hidden; min-width:120px; }
.rtrack > i { display:block; height:100%; }
.rtrack.ok > i { background:var(--ok); } .rtrack.mid > i { background:#E2A33C; } .rtrack.hi > i { background:var(--warn); }
.rtrack .avg { position:absolute; top:0; bottom:0; width:2px; background:var(--ink); opacity:.55; }
.rwrap { display:flex; align-items:center; gap:10px; min-width:200px; }
.rwrap .rv { font-family:var(--mono); font-weight:700; width:64px; text-align:right; font-size:12.5px; }
.rwrap .rv.ok { color:var(--ok); } .rwrap .rv.mid { color:#9A6B14; } .rwrap .rv.hi { color:var(--warn); }
.mininote { font-size:11.5px; color:var(--ink-3); }
.verdict { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:8px; font-weight:600; font-size:13px; }
.verdict.ok { background:var(--ok-bg); color:#1E5C3C; border:1px solid #BEE0CC; }
.verdict.bad { background:var(--warn-bg); color:#8a2f1c; border:1px solid #E6C3BA; }

/* ---- two-col registers layout ---- */
.regwrap { display:grid; grid-template-columns:236px 1fr; min-height:calc(100vh - 57px); }
.regnav { border-right:1px solid var(--line); background:var(--surface); padding:12px; overflow-y:auto; }
.regnav .grp { font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-3); padding:14px 10px 5px; }
.regnav a { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; color:var(--ink-2); text-decoration:none; font-size:13px; }
.regnav a .ic { width:15px; text-align:center; color:var(--ink-3); }
.regnav a:hover { background:var(--surface-2); color:var(--ink); }
.regnav a.active { background:var(--accent); color:#fff; }
.regnav a.active .ic { color:#fff; }

/* ---- order form ---- */
.formgrid { display:grid; grid-template-columns:1fr 322px; gap:18px; align-items:start; }
.formcard { background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:18px 20px; margin-bottom:18px; }
.formcard h3 { margin:0 0 14px; font-size:15px; display:flex; align-items:center; gap:8px; }
.formcard h3 .step { font-family:var(--mono); font-size:11px; color:#fff; background:var(--accent); width:22px; height:22px; border-radius:6px; display:grid; place-items:center; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.frow.three { grid-template-columns:1fr 1fr 1fr; }
.vtable td { padding:8px 12px; }
.vtable input.qin {
  width:92px; border:1px solid var(--line); border-radius:8px;
  padding:9px 12px; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:13.5px; color:var(--ink); text-align:center; background:var(--surface);
  transition:border-color .12s, box-shadow .12s;
}
.vtable input.qin:hover { border-color:var(--ink-3); }
.vtable input.qin:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,101,29,.14); }
.vtable input.qin::-webkit-outer-spin-button,
.vtable input.qin::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.vtable input.qin { -moz-appearance:textfield; }
.vtable .rm { border:0; background:transparent; color:var(--ink-3); cursor:pointer; font-size:16px; }
.vtable .rm:hover { color:var(--warn); }
.addrow { margin:12px; }
.summary { position:sticky; top:18px; }
.summary .big { font-family:var(--mono); font-size:36px; font-weight:700; letter-spacing:-1.5px; }
.summary .big small { font-size:14px; font-weight:400; color:var(--ink-2); letter-spacing:0; }
.sumline { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.sumline:last-of-type { border-bottom:0; }
.sumline b { font-weight:600; }
.feas { display:flex; gap:9px; align-items:flex-start; background:var(--ok-bg); border:1px solid #BEE0CC; color:#1E5C3C; border-radius:10px; padding:11px 13px; font-size:12.5px; margin-top:14px; }

/* ---- tablet radnika (shop floor) ---- */
.tablet { max-width:780px; margin:0 auto; }
.tdev { background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 6px 24px rgba(20,30,25,.08); }
.tdev .tbar { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--ink); color:#fff; }
.tdev .tbar .live { width:9px; height:9px; border-radius:50%; background:#5BD08C; box-shadow:0 0 0 4px rgba(91,208,140,.25); flex:none; }
.tdev .tbar .wsel { display:flex; flex-direction:column; gap:1px; }
.tdev .tbar .wsel small { font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:#8A938C; }
.tdev .tbar select { background-color:#232C26; color:#fff; border:1px solid #38423B; border-radius:7px; padding:6px 30px 6px 10px; font-size:14px; font-weight:600;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.5%204.5l3.5%203.5%203.5-3.5'%20fill='none'%20stroke='%23C9D2CC'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:12px 12px; }
.tdev .tbar select:hover { border-color:#4a564d; }
.tdev .tbar .shift { margin-left:auto; font-size:12.5px; color:#C9D2CC; font-family:var(--mono); }

.activecard { padding:24px 24px 26px; border-bottom:1px solid var(--line-2); background:linear-gradient(180deg,#FCF7F1,var(--surface)); }
.activecard .lab { font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--accent-d); font-weight:700; }
.activecard .opname { font-size:26px; font-weight:700; letter-spacing:-.4px; margin:5px 0 8px; }
.activecard .chips { display:flex; gap:8px; flex-wrap:wrap; }
.timer { font-family:var(--mono); font-size:60px; font-weight:700; letter-spacing:-3px; margin:14px 0 18px; color:var(--ink-3); }
.timer.run { color:var(--ok); }
.tbtns { display:flex; gap:12px; }
.tbtn { flex:1; padding:18px; border-radius:13px; font-size:16px; font-weight:700; border:1px solid; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; }
.tbtn.start { background:var(--ok); border-color:#236b45; color:#fff; }
.tbtn.pause { background:#E2A33C; border-color:#b97e1f; color:#3a2a08; }
.tbtn.done  { background:var(--accent); border-color:var(--accent-d); color:#fff; }
.tbtn:disabled { opacity:.4; cursor:default; }

.tlist { padding:6px 0 8px; }
.tlhead { padding:13px 18px 6px; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3); }
.tlbar { display:flex; align-items:center; gap:8px; padding:8px 14px 4px; flex-wrap:wrap; }
.tlbar .tlhead { padding:0; flex:0 0 auto; }
.tlbar select { font-size:12.5px; padding:6px 28px 6px 10px; }
.tlbar .spacer { flex:1; }
.titem { display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--line-2); }
.titem:last-child { border-bottom:0; }
.titem .ix { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:12px; flex:none; }
.titem.done .ix { background:var(--ok-bg); color:var(--ok); }
.titem.active .ix { background:var(--accent); color:#fff; }
.titem.queue .ix { background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line); }
.titem .tinfo { flex:1; min-width:0; }
.titem .tinfo .nm { font-weight:600; }
.titem .tinfo .sub { font-size:12px; color:var(--ink-2); font-family:var(--mono); }
.titem .st { font-size:12px; color:var(--ink-3); text-align:right; white-space:nowrap; }
.titem .st .tm { font-family:var(--mono); color:var(--ok); font-weight:600; }
.titem .vanred { font-size:12px; color:var(--accent-d); background:transparent; border:0; cursor:pointer; padding:0; }
.titem .vanred:hover { text-decoration:underline; }

/* ---- drawer + form ---- */
.drawer-ov { position:fixed; inset:0; background:rgba(20,28,23,.45); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s; }
.drawer-ov.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:452px; max-width:94vw; background:var(--surface); box-shadow:-14px 0 44px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.7,.3,1); z-index:41; display:flex; flex-direction:column; }
.drawer.open { transform:none; }
.drawer .dh { padding:18px 22px 16px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px; }
.drawer .dh .tag { font-family:var(--mono); font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent-d); font-weight:700; }
.drawer .dh h2 { margin:3px 0 1px; font-size:18px; }
.drawer .dh .sub { font-size:12.5px; color:var(--ink-2); }
.drawer .dh .x { margin-left:auto; border:0; background:transparent; font-size:22px; color:var(--ink-3); cursor:pointer; line-height:1; padding:0 2px; }
.drawer .x:hover { color:var(--ink); }
.drawer .body { padding:18px 22px; overflow-y:auto; flex:1; }
.field { margin-bottom:15px; }
.field > label { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:5px; }
.field input[type=text], .field input[type=number], .field textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:13.5px; color:var(--ink); background:var(--surface); }
.field select { width:100%; }
.field textarea { min-height:64px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,101,29,.14); }
.field .hint { font-size:11.5px; color:var(--ink-3); margin-top:4px; }
.field .ro { padding:9px 11px; background:var(--surface-2); border:1px dashed var(--line); border-radius:8px; font-family:var(--mono); color:var(--ink-2); font-size:13px; }
.segflag { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.segflag button { border:0; background:var(--surface); padding:8px 18px; font-weight:700; font-family:var(--mono); font-size:13px; cursor:pointer; color:var(--ink-2); }
.segflag button + button { border-left:1px solid var(--line); }
.segflag button.on.k { background:var(--gun); color:#fff; }
.segflag button.on.p { background:var(--accent); color:#fff; }
.checks { display:flex; flex-wrap:wrap; gap:8px; }
.chk { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:8px; padding:7px 11px; font-size:13px; cursor:pointer; user-select:none; }
.chk input { accent-color:var(--accent); margin:0; }
.chk.on { border-color:var(--accent); background:#FCF7F1; }
.drawer .df { padding:14px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }

/* ---- dialog ---- */
.overlay { position:fixed; inset:0; background:rgba(20,28,23,.5); display:grid; place-items:center; padding:20px; z-index:50; }
.overlay[hidden] { display:none; }
.dialog { background:var(--surface); border-radius:16px; width:520px; max-width:100%; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.3); }
.dialog .dh { padding:20px 22px 16px; border-bottom:1px solid var(--line-2); display:flex; gap:14px; align-items:flex-start; }
.dialog .dh .ix { width:38px; height:38px; border-radius:9px; background:var(--warn-bg); color:var(--warn); display:grid; place-items:center; font-size:19px; font-weight:700; flex:none; }
.dialog h3 { margin:0; font-size:17px; }
.dialog .dh p { margin:3px 0 0; color:var(--ink-2); font-size:13px; }
.dialog .db { padding:18px 22px; }
.infoline { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.infoline:last-child { border-bottom:0; }
.warnpill { color:var(--warn); font-weight:700; }
.options { margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.opt { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; text-align:left; background:var(--surface); cursor:pointer; }
.opt:hover { border-color:var(--accent); background:#FCF7F1; }
.opt .onum { font-family:var(--mono); font-weight:700; color:var(--accent-d); }
.opt .ot { font-weight:600; } .opt .od { color:var(--ink-2); font-size:12.5px; }
.opt.rec { border-color:#BEE0CC; }
.dialog .dfo { padding:14px 22px 20px; display:flex; justify-content:flex-end; gap:10px; }

/* ---- toast ---- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 20px; border-radius:11px; font-size:13.5px; box-shadow:0 12px 34px rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:60; display:flex; gap:10px; align-items:center; max-width:90vw; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast .ck { color:#86E3AD; font-weight:700; }

@media (prefers-reduced-motion: reduce) { .drawer, .drawer-ov, .toast { transition:none; } }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---- izvještaj / O sistemu (overview report) ---- */
.rep { max-width:1080px; }
.rep .lead { font-size:16px; line-height:1.6; color:var(--ink-2); max-width:760px; margin:2px 0 0; }
.rep .lead b { color:var(--ink); }
.rep p { color:var(--ink-2); font-size:14px; line-height:1.6; max-width:760px; }

.secthead { display:flex; align-items:center; gap:14px; margin:34px 0 16px; padding-top:22px; border-top:1px solid var(--line); }
.secthead:first-of-type { border-top:0; padding-top:0; }
.secthead .marker { width:40px; height:40px; flex:none; border-radius:10px; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:18px; color:#fff; background:var(--accent); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); }
.secthead.b .marker { background:var(--steel); }
.secthead.t .marker { background:var(--gun); }
.secthead .htext .eyebrow { margin-bottom:2px; }
.secthead h2 { margin:0; font-size:20px; letter-spacing:-.3px; }

/* value cards */
.vcards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 8px; }
.vcards.c4 { grid-template-columns:repeat(4,1fr); }
.vcard { background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:16px 17px; }
.vcard .vic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:17px; background:#FBF1E4; color:var(--accent-d); margin-bottom:11px; }
.vcard.s .vic { background:#E6F1EF; color:var(--steel); }
.vcard.l .vic { background:#ECE9F5; color:var(--slate); }
.vcard.g .vic { background:#EAEEF0; color:var(--gun); }
.vcard h4 { margin:0 0 5px; font-size:14.5px; }
.vcard p { margin:0; font-size:13px; color:var(--ink-2); line-height:1.55; max-width:none; }
.vcard .tagrow { margin-top:10px; }

/* numbered flow steps */
.flowsteps { display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin:4px 0 6px; }
.fstep { flex:1 1 0; min-width:150px; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:13px 14px; border-top:3px solid var(--accent); position:relative; }
.fstep .n { font-family:var(--mono); font-weight:700; font-size:11px; color:#fff; background:var(--accent); width:22px; height:22px; border-radius:6px; display:grid; place-items:center; margin-bottom:8px; }
.fstep h5 { margin:0 0 4px; font-size:13.5px; }
.fstep p { margin:0; font-size:12px; color:var(--ink-2); line-height:1.5; max-width:none; }
.fstep .arr { position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:16px; z-index:1; }
.fstep:last-child .arr { display:none; }

/* neutral callout */
.callout { display:flex; gap:13px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--steel); border-radius:10px; padding:14px 16px; margin:14px 0; font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.callout .ci { font-size:18px; color:var(--steel); flex:none; line-height:1.3; }
.callout b { color:var(--ink); }
.callout .formula { font-family:var(--mono); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:1px 7px; color:var(--ink); white-space:nowrap; }

/* algorithm compact list */
.algo { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 18px; margin:6px 0 4px; }
.algo .ai { display:flex; gap:11px; align-items:flex-start; }
.algo .ai .k { font-family:var(--mono); font-weight:700; font-size:11px; color:var(--accent-d); background:#FBF1E4; border-radius:6px; padding:3px 8px; flex:none; }
.algo .ai .t { font-size:13px; color:var(--ink-2); line-height:1.5; }
.algo .ai .t b { color:var(--ink); }

/* architecture diagram frame */
.archframe { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 18px 14px; margin:6px 0 16px; }
.archframe svg { width:100%; height:auto; display:block; }
.archcap { text-align:center; font-size:12px; color:var(--ink-3); margin-top:10px; }

.linkrow { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0 4px; }
.tagrow { display:flex; flex-wrap:wrap; gap:5px; }

@media (max-width:980px) {
  .vcards, .vcards.c4 { grid-template-columns:1fr 1fr; }
  .algo { grid-template-columns:1fr; }
  .fstep .arr { display:none; }
}

@media (max-width:980px) {
  .app { grid-template-columns:1fr; } .side { display:none; }
  .cards { grid-template-columns:1fr 1fr; } .cols2 { grid-template-columns:1fr; }
  .ctx { grid-template-columns:1fr 1fr; } .prodhead { grid-template-columns:1fr; }
  .regwrap { grid-template-columns:1fr; } .regnav { border-right:0; border-bottom:1px solid var(--line); }
}