/* Inventrik O&M - same design language as app.inventrik.co.in (navy #10294F, orange #F5811F) */
:root{--navy:#10294F;--navy2:#1A3A6B;--orange:#F5811F;--orange2:#E0731A;--bg:#F3F5F9;--card:#fff;--line:#E4E7EC;--line2:#F2F4F7;--text:#1D2939;--muted:#667085;--muted2:#475467;--edge:#D0D5DD;--green:#0B6B2E;--green-bg:#E6F4EA;--green-ln:#BFE3C9;--amber:#93370D;--amber-bg:#FFF2DF;--amber-ln:#F7D8A6;--red:#B42318;--red-bg:#FDE7E4;--red-ln:#F0B8B2;--soft:#EEF1F6;--blue-bg:#EEF4FF;--blue-ln:#C7D7F4;--sb:252px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Gujarati",sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45}
button,input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--navy)}
h1,h2,h3{margin:0}
[hidden]{display:none!important}
/* ---- shell ---- */
.shell{display:flex;min-height:100vh}
.sb{width:var(--sb);background:var(--navy);color:#fff;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:30;transition:transform .2s}
.sb .wm{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.sb .wm b{font-weight:800;font-size:19px;letter-spacing:.4px;display:block;line-height:1.1}
.sb .wm b i{font-style:normal;color:var(--orange)}
.sb .wm small{display:block;font-weight:500;font-size:9.5px;letter-spacing:1.3px;color:#C5CFDE;margin-top:4px;text-transform:uppercase}
.sb nav{flex:1;overflow-y:auto;padding:10px 0}
.sb .grp{padding:12px 18px 4px;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#8EA0BE;font-weight:700}
.sb a.it{display:flex;align-items:center;gap:10px;padding:9px 18px;color:#DCE3EE;text-decoration:none;font-size:14px;font-weight:500;border-left:3px solid transparent}
.sb a.it svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sb a.it:hover{background:rgba(255,255,255,.06);color:#fff}
.sb a.it.on{background:rgba(255,255,255,.1);color:#fff;border-left-color:var(--orange);font-weight:700}
.sb a.it .bdg{margin-left:auto;background:var(--orange);color:#fff;border-radius:10px;font-size:11px;padding:0 7px;line-height:18px;font-weight:700}
.sb .usr{padding:12px 18px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#C5CFDE}
.sb .usr b{display:block;color:#fff;font-size:14px}
.sb .usr button{margin-top:8px;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:7px;padding:5px 11px;font-size:12.5px;cursor:pointer}
.main{flex:1;margin-left:var(--sb);min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 18px;min-height:56px}
.top .burger{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--navy)}
.top .burger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.top h1{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.2px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top select.plant{max-width:260px;min-height:36px;border:1px solid var(--edge);border-radius:8px;padding:6px 10px;background:#fff;color:var(--navy);font-weight:600}
.content{padding:16px 18px 40px;max-width:1240px;width:100%}
.scrim{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:25;display:none}
@media (max-width:900px){
  .sb{transform:translateX(-100%)}.sb.open{transform:none}.scrim.open{display:block}
  .main{margin-left:0}.top .burger{display:block}.content{padding:12px 12px 90px}.top select.plant{max-width:46vw}
}
/* ---- components ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 12px;min-width:0}
.card h3{font-size:14.5px;color:var(--navy);font-weight:800;margin:0 0 10px}
.card h3 span{font-weight:600;color:var(--muted);font-size:12.5px}
.hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hd h2{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.2px}
.sub{font-size:13px;color:var(--muted);margin-top:3px;max-width:760px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 13px;border:1px solid var(--edge);border-radius:8px;background:#fff;color:var(--navy);font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap;text-decoration:none}
.b:hover{background:#F6F7F9}
.b.pri{background:var(--orange);border-color:var(--orange);color:#fff}.b.pri:hover{background:var(--orange2)}
.b.navy{background:var(--navy);border-color:var(--navy);color:#fff}.b.navy:hover{background:var(--navy2)}
.b.red{color:var(--red);border-color:var(--red-ln)}
.b.sm{min-height:30px;padding:4px 9px;font-size:12px}
.b.big{min-height:46px;font-size:15px;padding:10px 18px}
.b:disabled{opacity:.55;cursor:default}
.b svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i{min-height:36px;padding:7px 10px;border:1px solid var(--edge);border-radius:8px;background:#fff;color:var(--text);width:100%;max-width:100%}
.i:focus,.b:focus-visible{outline:2px solid rgba(245,129,31,.4);outline-offset:0}
textarea.i{min-height:72px;resize:vertical}
.l{display:block;font-size:12px;font-weight:600;color:var(--muted2);margin:0 0 4px}
.f{display:flex;flex-direction:column;min-width:0}
.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:900px){.g2{grid-template-columns:minmax(0,1fr)}}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.warn{font-size:13px;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-ln);border-radius:8px;padding:8px 10px;margin:8px 0 0;line-height:1.45}
.okb{font-size:13px;color:var(--green);background:var(--green-bg);border:1px solid var(--green-ln);border-radius:8px;padding:8px 10px;margin:8px 0 0}
.bad{font-size:13px;color:var(--red);background:var(--red-bg);border:1px solid var(--red-ln);border-radius:8px;padding:8px 10px;margin:8px 0 0}
.tw{border:1px solid var(--line);border-radius:12px;background:#fff;overflow-x:auto;margin-bottom:12px}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{text-align:left;font-size:11.5px;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--line);background:#F9FAFB;white-space:nowrap}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tr.click{cursor:pointer}table.t tr.click:hover td{background:#FAFBFC}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.num{text-align:right}
.nm{font-weight:700;color:var(--navy)}
.mu{color:var(--muted);font-size:12.5px}
.chip{display:inline-block;font-size:11.5px;font-weight:700;border-radius:20px;padding:2px 9px;background:var(--soft);color:var(--muted2);white-space:nowrap;vertical-align:middle}
.chip.ok{background:var(--green-bg);color:var(--green)}.chip.am{background:var(--amber-bg);color:var(--amber)}.chip.rd{background:var(--red-bg);color:var(--red)}.chip.bl{background:var(--blue-bg);color:var(--navy)}
.kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line2)}
.kv:last-child{border-bottom:0}.kv span{color:var(--muted2)}.kv b{font-variant-numeric:tabular-nums;text-align:right}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.kpi small{display:block;color:var(--muted);font-size:12px;line-height:1.3}
.kpi b{display:block;font-size:21px;color:var(--navy);font-variant-numeric:tabular-nums;margin-top:2px;overflow-wrap:anywhere}
.kpi b em{font-style:normal;font-size:13px;color:var(--muted);font-weight:600}
.kpi.am b{color:var(--amber)}.kpi.rd b{color:var(--red)}.kpi.gr b{color:var(--green)}
.empty{color:var(--muted);font-size:14px;padding:14px;text-align:center}
.loading{color:var(--muted);padding:40px;text-align:center}
.chart svg{width:100%;height:auto;display:block}
/* tree */
.tree{font-size:13.5px}
.tn{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;min-height:40px}
.tn:hover{background:#FAFBFC}
.tn.sel{background:var(--blue-bg)}
.tn .tg{width:26px;height:26px;border:0;background:transparent;color:var(--muted);cursor:pointer;flex:none;border-radius:6px;font-size:12px}
.tn .tg:hover{background:var(--soft)}
.tn .ic{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:#fff;flex:none;letter-spacing:.3px}
.tn .nm{flex:1;min-width:0;cursor:pointer}
.tn .nm small{display:block;color:var(--muted);font-weight:500;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn .cnt{color:var(--muted);font-size:12px;white-space:nowrap}
.tn .st{width:9px;height:9px;border-radius:50%;flex:none}
.st.ok{background:#16A34A}.st.alarm{background:#F59E0B}.st.fault{background:#DC2626}.st.off,.st.removed{background:#9CA3AF}
.kids{margin-left:18px;border-left:1px dashed var(--line);padding-left:6px}
/* modal */
.ov{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:900;display:flex;align-items:flex-start;justify-content:center;padding:30px 12px;overflow:auto}
.md{background:#fff;border-radius:14px;padding:18px;width:100%;max-width:640px;box-shadow:0 20px 50px rgba(16,24,40,.25)}
.md.wide{max-width:900px}
.md h3{font-size:16px;color:var(--navy);margin:0 0 10px}
.md .ft{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}
@media (max-width:600px){.ov{padding:0;align-items:flex-end}.md{border-radius:14px 14px 0 0;max-height:96vh;overflow:auto}}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;z-index:950;max-width:92vw;box-shadow:0 8px 24px rgba(16,24,40,.3);text-align:center}
.toast.bad{background:var(--red)}
/* login */
.login{max-width:400px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.login .wm b{font-weight:800;font-size:22px;color:var(--navy);letter-spacing:.4px}.login .wm b i{font-style:normal;color:var(--orange)}
.login .wm small{display:block;font-size:10px;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase;margin-top:3px}
.login label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
.login .i{min-height:44px;font-size:16px}
.login .b{width:100%;margin-top:18px}
.err{color:var(--red);font-weight:600;margin-top:10px;min-height:20px;font-size:14px}
/* scanner */
.scan{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:4/3;max-height:52vh}
.scan video{width:100%;height:100%;object-fit:cover;display:block}
.scan .box{position:absolute;inset:14%;border:2px solid rgba(255,255,255,.85);border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,.25)}
.scan .msg{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:13px;padding:6px 10px;text-align:center}
.slist{max-height:34vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.slist div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line2);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.slist div:last-child{border-bottom:0}
.slist div.dup{background:var(--amber-bg)}
.slist button{border:0;background:transparent;color:var(--red);font-size:16px;cursor:pointer;padding:0 4px}
.cl{list-style:none;margin:0;padding:0}
.cl li{display:flex;gap:9px;align-items:flex-start;padding:5px 0;font-size:13.5px}
.cl input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--navy);flex:none}
.cl li.d span{text-decoration:line-through;color:var(--muted)}
.ph{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ph img{width:88px;height:88px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer;background:#eee}
.sticky-act{position:sticky;bottom:0;background:var(--bg);padding:10px 0 4px;margin-top:8px}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}
.tabs .b{flex:none}
.prog{height:8px;background:var(--soft);border-radius:6px;overflow:hidden;margin:6px 0}
.prog i{display:block;height:100%;background:var(--green);border-radius:6px}
.fab{position:fixed;right:16px;bottom:18px;z-index:28;border-radius:30px;box-shadow:0 8px 20px rgba(16,41,79,.3)}
@media (min-width:901px){.fab{display:none}}
@media (max-width:600px){.row .b.big{flex:1 1 100%}.hd .row{width:100%}.hd .row .b{flex:1}.bar .i{flex:1 1 140px}.kpi b{font-size:19px}}