/* Izgled iz prototipa planer.html (zajednički stilovi), plus dodaci aplikacije na kraju */
:root{--bg:#f6f7f9;--card:#fff;--line:#e3e6eb;--ink:#1c2230;--mute:#667085;--acc:#2f6fdb;--accbg:#e8f0fd;--red:#c93a3a;--redbg:#fdeaea;--grn:#1f8a4c;--pur:#6b46c1;--purbg:#efe9fb;--amb:#9a6700;--ambbg:#fff4d6}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.45 "Segoe UI",Arial,sans-serif}
header{background:var(--card);border-bottom:1px solid var(--line);padding:10px 20px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:2}
header b{font-size:15px;white-space:nowrap}
header{flex-wrap:wrap;row-gap:6px;padding-bottom:6px}nav{order:3;flex-basis:100%;margin-left:-11px}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{padding:6px 11px;border-radius:6px;color:var(--mute);text-decoration:none;cursor:pointer}
nav a.on{background:var(--accbg);color:var(--acc);font-weight:600}
main{padding:16px 20px}
.sec{display:none}.sec.on{display:block}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
select,input,button{font:inherit}
select,input{height:32px;border:1px solid var(--line);border-radius:6px;padding:0 8px;background:#fff}
button{height:32px;border:1px solid var(--line);border-radius:6px;padding:0 14px;background:#fff;cursor:pointer}
button.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.st{font-size:12px;padding:3px 9px;border-radius:6px;background:var(--ambbg);color:var(--amb)}
.pg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;margin:14px 0}
.pb .t{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
.pb .t b{color:var(--ink);font-weight:600}
.pb .tr{height:8px;background:#eef0f3;border-radius:4px;overflow:hidden;margin-top:4px}
.pb .f{height:8px;border-radius:4px;background:var(--acc)}.pb .f.over{background:var(--red)}
table{width:100%;border-collapse:collapse}
th{font-weight:600;color:var(--mute);text-align:left;font-size:12px;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td.wrap{white-space:normal}
tr.day td{background:#f2f4f7;font-size:12px;color:var(--mute);font-weight:600}
tbody tr:hover td{background:#fafbfd}
.pill{font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;margin-right:5px}
.h{background:var(--redbg);color:var(--red)}.i{background:var(--purbg);color:var(--pur)}
.ok{color:var(--grn);font-weight:700}.no{color:var(--red);font-weight:700}
.late{color:var(--red);font-weight:600}
.num{text-align:right;font-variant-numeric:tabular-nums}
.grip{color:#b0b7c3;cursor:grab}
.muted{color:var(--mute)}
.todo{padding:40px;text-align:center;color:var(--mute)}
button:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:1000px){.e2g,.e3g,.e4g,.e5g,.e6g,.e7g,.e8g,.e8two{grid-template-columns:minmax(0,1fr)!important}}

/* stilovi bivše sekcije E3 (spojena u E5) — .seg, .tag i dr. koriste i drugi ekrani */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg a{padding:6px 14px;cursor:pointer;color:var(--mute)}.seg a.on{background:var(--accbg);color:var(--acc);font-weight:600}
.e2g{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;margin-top:14px}
.sr{border:1px solid var(--line);border-radius:10px;background:var(--card);margin-bottom:10px}
.sr .top{display:grid;grid-template-columns:80px minmax(0,1fr) 44px 60px 90px 100px 180px;gap:10px;align-items:center;padding:10px 12px;cursor:pointer}
.sr .det{display:none;border-top:1px solid var(--line);padding:8px 12px 12px;background:#fbfcfd}
.sr.open .det{display:block}
.tag{font-size:11px;padding:2px 7px;border-radius:5px;background:#eef0f3;color:var(--mute);font-weight:600}
.tag.pri{background:var(--accbg);color:var(--acc)}.tag.ok{background:#e6f5ec;color:var(--grn)}.tag.koop{background:var(--ambbg);color:var(--amb)}
.src{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}.src span{display:inline-block;white-space:nowrap;font-size:11px;padding:1px 6px;border-radius:5px;background:#f1f3f6;margin:1px 3px 1px 0}
.src span.un{background:var(--ambbg);color:var(--amb)}.src span button{height:18px;padding:0 4px;margin-left:4px;border:none;background:transparent;color:var(--mute);cursor:pointer;font-size:12px}.src span button:hover{color:var(--red)}.src span.dis{opacity:.5}.addsel{height:24px;font-size:11px;margin-top:4px}
.kf{display:none;gap:8px;align-items:center;flex-wrap:wrap;padding:0 12px 12px}
.sr.koopo .kf{display:flex}
.cov td,.cov th{padding:6px 6px}
.miss{color:var(--red);font-weight:600}

/* --- dodaci aplikacije (prijava, ljuska, poruke) --- */
[hidden]{display:none!important}
.spacer{flex:1}
.error{background:var(--redbg);color:var(--red);border-radius:6px;padding:8px 10px}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{width:320px;display:flex;flex-direction:column;gap:10px;padding:22px}
.login-card .brand{font-size:17px;margin-bottom:6px}
.login-card label{display:flex;flex-direction:column;gap:4px;color:var(--mute);font-size:12px}
.toast{position:fixed;right:16px;bottom:16px;max-width:420px;padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff;z-index:10}
.toast.err{background:var(--red)}
.faza-prikaza{background:var(--ambbg);color:var(--amb);border-radius:8px;padding:7px 12px;font-size:12px;margin-bottom:10px}
header nav{order:0;flex-basis:auto;margin-left:0}

/* zajednički stilovi prototipa koje koristi E6 (sekcija E5 u planer.html) */
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.kpi .card b{font-size:20px;display:block}
.dl div{font-size:12px;padding:5px 0;border-bottom:1px solid var(--line)}
@media (max-width:1000px){.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}