/* SMM Operations - follows the approved Phase 1 reference design:
   dark navy sidebar/header, SMM orange actions, white cards on cool grey. */
:root{
  --navy:#17212b; --navy2:#202d3a; --navy3:#2b3a49; --orange:#c75006; --orange2:#e8710a; --orange-soft:#fff1e6;
  --bg:#eef1f4; --card:#fff; --line:#dfe4ea; --text:#1c2733; --muted:#5f6b78;
  --green:#1e8e4e; --green-soft:#e6f5ec; --red:#c62828; --red-soft:#fdecea; --amber:#b26a00; --amber-soft:#fff6e0; --blue:#2f6db5;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06),0 2px 8px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.45 "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:24px;margin:0} h2{font-size:18px;margin:0 0 12px} h3{font-size:15px;margin:0 0 8px}
.icon{width:20px;height:20px;flex:none;vertical-align:middle}
.icon.sm{width:16px;height:16px}.icon.lg{width:28px;height:28px}.icon.xl{width:40px;height:40px}
.muted{color:var(--muted)} .small{font-size:13px} .right{text-align:right} .nowrap{white-space:nowrap} .mono{font-family:ui-monospace,Consolas,monospace}
.hidden{display:none!important}

/* layout */
.shell{display:flex;min-height:100vh}
.side{width:248px;background:var(--navy);color:#dfe6ee;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex:none}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid var(--navy3)}
.brand img{width:40px;height:40px}
.brand b{display:block;font-size:15px;letter-spacing:.5px;color:#fff}
.brand span{font-size:11px;color:#9fb0c2;letter-spacing:.4px}
.nav{padding:10px;display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1}
.nav a{display:flex;align-items:center;gap:12px;color:#dfe6ee;padding:10px 12px;border-radius:9px;font-weight:500}
.nav a:hover{background:var(--navy3);text-decoration:none}
.nav a.on{background:linear-gradient(90deg,var(--orange),var(--orange2));color:#fff}
.side-foot{padding:12px 16px;border-top:1px solid var(--navy3);font-size:13px}
.side-foot form{margin-top:6px}
.linkbtn{background:none;border:0;color:#9fd0ff;padding:0;font:inherit;cursor:pointer}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:16px;padding:14px 24px;background:var(--card);border-bottom:1px solid var(--line)}
.top .grow{flex:1}
.datechip{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;display:flex;gap:8px;align-items:center}
.netchip{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--green-soft);color:var(--green)}
.netchip.off{background:var(--red-soft);color:var(--red)}
.envbar{background:repeating-linear-gradient(45deg,#2b3a49,#2b3a49 12px,#33465a 12px,#33465a 24px);color:#ffd9b8;font-size:12.5px;padding:6px 24px;font-weight:600;letter-spacing:.2px}
.content{padding:22px 24px 40px;max-width:1500px;width:100%}
.pagehead{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.pagehead .grow{flex:1}

/* cards & grid */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;border:1px solid #e8ecf0}
.card.flush{padding:0}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card-h h2,.card-h h3{margin:0;flex:1}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-side{grid-template-columns:minmax(0,2fr) minmax(320px,1fr)}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g-side{grid-template-columns:1fr}}
@media (max-width:800px){.side{display:none}.g2{grid-template-columns:1fr}}

/* tiles (dashboard) */
.tile{border-radius:var(--radius);padding:16px 18px;display:flex;gap:14px;align-items:center;color:var(--text);background:var(--card);box-shadow:var(--shadow);border:1px solid #e8ecf0}
.tile b{font-size:30px;line-height:1;display:block}
.tile span{font-size:13px;color:var(--muted)}
.tile.green{background:linear-gradient(135deg,#1e7f47,#2a9d5c);color:#fff;border:0}.tile.green span{color:#d7f3e2}
.tile.amber{background:var(--amber-soft);border-color:#f3dcab}.tile.amber .icon{color:#e8a10a}
.tile.red{background:var(--red-soft);border-color:#f6c9c4}.tile.red .icon{color:var(--red)}
.tile .icon{width:38px;height:38px}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:left;font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);background:#f8fafb}
.t td{padding:9px 10px;border-bottom:1px solid #eef1f4;vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tr.click:hover td{background:#fafbfc}
.tablewrap{overflow:auto}

/* badges & pills */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px;background:#eef1f4;color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--green-soft);color:var(--green)} .pill.bad{background:var(--red-soft);color:var(--red)}
.pill.warn{background:var(--amber-soft);color:var(--amber)} .pill.info{background:#e8f0fb;color:var(--blue)} .pill.dark{background:var(--navy);color:#fff}
.zone{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:#e8f0fb;color:#24538d;margin:1px}
.zone.rad{background:#fff1cc;color:#8a5a00}

/* forms */
label{display:block;font-size:13px;font-weight:600;color:#3a4654;margin:0 0 5px}
.field{margin-bottom:12px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=datetime-local],input[type=email],input[type=search],select,textarea{
  width:100%;padding:10px 12px;border:1px solid #cfd6de;border-radius:9px;font:inherit;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid #f6b27d;border-color:var(--orange2)}
textarea{min-height:70px;resize:vertical}
.check{display:flex;align-items:center;gap:8px;font-weight:500;margin:6px 0}
.check input{width:18px;height:18px}
.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline .field{margin:0;flex:1;min-width:140px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #cfd6de;background:#fff;color:var(--text);
  padding:10px 16px;border-radius:9px;font:600 14px/1 inherit;cursor:pointer;white-space:nowrap;text-decoration:none!important}
.btn:hover{background:#f6f8fa}
.btn.primary{background:linear-gradient(180deg,var(--orange2),var(--orange));border-color:var(--orange);color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.amber{background:#fff3d6;border-color:#f0c869;color:#7a4b00}
.btn.danger{background:#fff;border-color:#e5a39d;color:var(--red)}
.btn.big{padding:15px 22px;font-size:16px;border-radius:11px}
.btn.block{width:100%}
.btn.sm{padding:6px 10px;font-size:13px}
.btn[disabled],.btn.busy{opacity:.55;cursor:not-allowed}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs a{padding:9px 14px;color:var(--muted);font-weight:600;border-bottom:3px solid transparent}
.tabs a.on{color:var(--orange);border-color:var(--orange)} .tabs a:hover{text-decoration:none;color:var(--text)}
.seg{display:flex;background:#eef1f4;border-radius:10px;padding:4px;gap:4px}
.seg a{flex:1;text-align:center;padding:9px;border-radius:8px;color:var(--muted);font-weight:600}
.seg a.on{background:linear-gradient(180deg,var(--orange2),var(--orange));color:#fff}
.seg a:hover{text-decoration:none}

/* messages */
.msgs{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.msg{padding:11px 14px;border-radius:9px;font-weight:500;border:1px solid}
.msg.success{background:var(--green-soft);border-color:#b6e2c6;color:#145c33}
.msg.error{background:var(--red-soft);border-color:#f3b8b1;color:#8e1c1c}
.msg.warning{background:var(--amber-soft);border-color:#f3dcab;color:#7a4b00}
.msg.info{background:#e8f0fb;border-color:#c3d6f1;color:#1d4677}
.note{background:#f8fafb;border:1px dashed #cfd6de;border-radius:9px;padding:10px 12px;font-size:13px;color:var(--muted)}
.note.warn{background:var(--amber-soft);border-color:#f0c869;color:#7a4b00}

/* person header / decision */
.avatar{width:120px;height:140px;border-radius:10px;object-fit:cover;background:linear-gradient(135deg,#d9e1e8,#c5d0da);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#6a7b8c;flex:none}
.avatar.sm{width:44px;height:44px;border-radius:50%;font-size:15px}
.phead{display:flex;gap:18px;align-items:flex-start}
.phead h2{font-size:22px;margin:0 0 6px}
.facts{display:flex;flex-direction:column;gap:5px;font-size:14px;color:#3a4654}
.facts div{display:flex;gap:8px;align-items:center}
.checks{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.checks .c{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid #eef1f4;background:#fff}
.checks .c:last-child{border-bottom:0}
.checks .c b{width:190px;flex:none;font-weight:600}
.checks .c .st{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.checks .c.ok .st{background:var(--green);color:#fff} .checks .c.bad .st{background:var(--red);color:#fff}
.checks .c.ok span{color:var(--green);font-weight:600} .checks .c.bad span{color:var(--red);font-weight:600}
.checks .c .st .icon{width:15px;height:15px}
.zonegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.zonebox{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.zonebox.ok{border-color:#9fd6b5;background:var(--green-soft)} .zonebox.bad{border-color:#f0b5ae;background:var(--red-soft)}
.zonebox .r{font-size:12px;color:var(--red);margin-top:4px}
.decisionbar{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:12px;margin-top:16px}
.decisionbar .btn{padding:16px;font-size:16px}
.outcome{font-size:13px;font-weight:700;padding:5px 12px;border-radius:20px}
.outcome.ELIGIBLE{background:var(--green-soft);color:var(--green)} .outcome.PARTIAL{background:var(--amber-soft);color:var(--amber)} .outcome.HOLD{background:var(--red-soft);color:var(--red)}

/* signature pad */
.sigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.sigpad{border:1px solid #cfd6de;border-radius:10px;background:#fff;position:relative}
.sigpad .lbl{position:absolute;left:10px;top:7px;font-size:12px;font-weight:700;color:#3a4654;pointer-events:none}
.sigpad canvas{display:block;width:100%;height:120px;touch-action:none;cursor:crosshair;border-radius:10px}
.sigpad .clr{position:absolute;right:8px;top:6px;font-size:12px;background:none;border:0;color:var(--blue);cursor:pointer}
.sigpad.signed{border-color:var(--green)}

/* queue */
.qitem{display:flex;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}
.qitem:hover{border-color:var(--orange2);text-decoration:none}
.qitem .ack{font-weight:800;font-family:ui-monospace,Consolas,monospace;background:var(--navy);color:#fff;border-radius:7px;padding:5px 8px;font-size:13px}
.qlist{display:flex;flex-direction:column;gap:8px}

/* stepper & counter */
.counter{display:flex;align-items:center;gap:0;border:1px solid #cfd6de;border-radius:10px;overflow:hidden;width:max-content}
.counter button{border:0;background:#f3f5f7;width:48px;height:48px;cursor:pointer}
.counter input{width:80px;height:48px;border:0;text-align:center;font-size:22px;font-weight:700;border-radius:0}

/* donut */
.donut{display:flex;gap:20px;align-items:center}
.legend{display:flex;flex-direction:column;gap:8px;font-size:14px;flex:1}
.legend div{display:flex;align-items:center;gap:8px}.legend b{margin-left:auto}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.sw.EMPLOYEE{background:#e8710a}.sw.CONTRACTOR{background:#2a9d5c}.sw.SERVICE_PROVIDER{background:#2f6db5}.sw.VISITOR{background:#9aa5b1}
.zonestat{border-radius:10px;padding:14px;text-align:center;background:#f6f8fa;border:1px solid var(--line)}
.zonestat b{display:block;font-size:22px}
.zonestat .icon{color:var(--green);width:30px;height:30px}
.attn{display:flex;flex-direction:column;gap:6px}
.attn a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:#fffaf3;color:var(--text)}
.attn a .icon{color:#e8a10a}

/* login */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy) 0%,#24384c 55%,var(--orange) 140%)}
.authcard{width:400px;max-width:92vw;background:#fff;border-radius:16px;padding:28px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.authcard .brand{border:0;padding:0 0 18px;color:var(--text)} .authcard .brand b{color:var(--text)} .authcard .brand span{color:var(--muted)}
.qr svg{width:200px;height:200px}

/* print */
@media print{.side,.top,.envbar,.noprint,.btn{display:none!important}.content{padding:0}.card{box-shadow:none;border:0}body{background:#fff}}
.w480{max-width:480px}.w640{max-width:640px}.w900{max-width:900px}.mt{margin-top:16px}.mb{margin-bottom:16px}.mt0{margin-top:0}
.sigpad.needsig{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.kv{display:grid;grid-template-columns:170px 1fr;gap:8px 14px;font-size:14px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}
.split{display:flex;gap:16px;align-items:flex-start}.split>.grow{flex:1;min-width:0}
details.box{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:#fff}details.box summary{cursor:pointer;font-weight:600}
input.hm{width:80px}
.decisionbar{grid-template-columns:1fr 1fr}.decisionbar .btn.green{grid-column:1/-1;order:-1}.decisionbar .btn{white-space:normal}
.qphoto{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;background:linear-gradient(135deg,#d9e1e8,#c5d0da)}
.qinit{display:flex;align-items:center;justify-content:center;font-weight:800;color:#6a7b8c}
.qname{font-size:17px}