:root{
  --ink:#131A22; --ink2:#1A2530; --ink3:#223041; --inkline:#2C3A4A; --inkmut:#8695A6;
  --paper:#EDF0F3; --card:#FFFFFF; --line:#DCE2E8; --line2:#EAEEF2;
  --text:#1A2530; --muted:#5F6E7D; --faint:#8A97A4;
  --teal:#0E7C86; --teald:#0A5B62; --tealw:#E3F1F2;
  --blue:#2563EB; --bluew:#E5EDFD;
  --indigo:#6366F1; --indigow:#EAEBFE;
  --amber:#C2740B; --amberw:#FBEED6;
  --violet:#7C3AED; --violetw:#EEE7FD;
  --green:#15803D; --greenw:#E1F1E7;
  --red:#DC2626; --redw:#FBE4E4;
  --slate:#5A6B7B; --slatew:#E7ECF0;
  --radius:10px; --shadow:0 1px 2px rgba(19,26,34,.06),0 6px 20px rgba(19,26,34,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--paper);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
.mono{font-family:'IBM Plex Mono',monospace}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
::selection{background:var(--tealw)}

/* ---------- Layout shell ---------- */
.app{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.rail{background:var(--ink);color:#C7D2DC;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px}
.brand .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),#12A0AC);display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 22px -4px var(--teal)}
.brand .logo svg{width:17px;height:17px}
.brand b{font-family:'Space Grotesk';color:#fff;font-size:16px;letter-spacing:.2px;font-weight:600}
.brand small{display:block;color:var(--inkmut);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:1px}
.railscroll{overflow-y:auto;flex:1;padding:4px 10px 16px}
.railscroll::-webkit-scrollbar{width:8px}.railscroll::-webkit-scrollbar-thumb{background:#2b3947;border-radius:8px}
.navgrp{margin-top:14px}
.navgrp .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5f6f7f;padding:0 10px 6px;font-weight:600}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#B4C1CD;font-size:13px;font-weight:500;position:relative;transition:.12s}
.nav:hover{background:var(--ink2);color:#eaf1f6}
.nav.active{background:var(--ink3);color:#fff}
.nav.active::before{content:"";position:absolute;left:-10px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--teal)}
.nav svg{width:17px;height:17px;flex:none;opacity:.9}
.nav .ct{margin-left:auto;font-size:11px;background:#2a3846;color:#9fb0bd;border-radius:20px;padding:1px 7px;font-family:'IBM Plex Mono'}
.nav.active .ct{background:var(--teal);color:#fff}
.railfoot{border-top:1px solid var(--inkline);padding:12px;display:flex;align-items:center;gap:10px}
.railfoot .av{width:32px;height:32px;border-radius:50%;background:#2a3846;color:#cfe0ea;display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
.railfoot .who{font-size:12.5px;color:#dfe8ee;font-weight:500}
.railfoot .who small{display:block;color:var(--inkmut);font-size:10.5px}

/* ---------- Main ---------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:20;background:rgba(237,240,243,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:12px 26px;display:flex;align-items:center;gap:16px}
.crumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);min-width:0}
.crumbs .c{cursor:pointer;white-space:nowrap}.crumbs .c:hover{color:var(--teal)}
.crumbs .sep{color:var(--faint)}
.crumbs .cur{color:var(--text);font-weight:600}
.search{margin-left:auto;position:relative}
.search input{width:230px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 10px 7px 30px;font-family:inherit;font-size:12.5px;color:var(--text)}
.search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--tealw)}
.search svg{position:absolute;left:9px;top:8px;width:15px;height:15px;color:var(--faint)}
.bell{width:34px;height:34px;border-radius:8px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);position:relative}
.bell .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--red);border:2px solid #fff}
.content{padding:24px 26px 60px;max-width:1320px;width:100%}

/* ---------- Typography / headers ---------- */
h1.page{font-family:'Space Grotesk';font-size:24px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:12px}
.pagehead{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.pagehead p.sub{color:var(--muted);font-size:13px;margin-top:3px;max-width:640px}
.pagehead .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.phase-tag{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#cfe0e4;padding:3px 9px;border-radius:20px;font-weight:600}

/* ---------- Buttons ---------- */
.btn{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:8px;padding:8px 13px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:.12s}
.btn:hover{border-color:#c2ccd4;background:#fbfcfd}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teald);border-color:var(--teald)}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:#e4e9ee}
.btn.sm{padding:5px 10px;font-size:12px}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .hd{padding:14px 16px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px}
.card .hd h3{font-size:13.5px;font-weight:700;letter-spacing:.01em}
.card .hd .sub{font-size:11.5px;color:var(--faint)}
.card .bd{padding:16px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1080px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}}

/* KPI */
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .k-lbl{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:7px}
.kpi .k-lbl svg{width:15px;height:15px;color:var(--teal)}
.kpi .k-val{font-family:'Space Grotesk';font-size:30px;font-weight:600;line-height:1.1;margin-top:8px;letter-spacing:-.02em}
.kpi .k-val span{font-size:14px;color:var(--faint);font-weight:500}
.kpi .k-delta{font-size:11.5px;margin-top:4px;font-weight:600}
.kpi .k-delta.up{color:var(--green)}.kpi .k-delta.dn{color:var(--red)}.kpi .k-delta.fl{color:var(--muted)}

/* ---------- Status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px 3px 8px;border-radius:20px;white-space:nowrap;letter-spacing:.01em}
.pill .d{width:7px;height:7px;border-radius:50%;flex:none}
.st-blue{background:var(--bluew);color:#1a4bc4}.st-blue .d{background:var(--blue)}
.st-indigo{background:var(--indigow);color:#4548c4}.st-indigo .d{background:var(--indigo)}
.st-amber{background:var(--amberw);color:#95560a}.st-amber .d{background:var(--amber)}
.st-violet{background:var(--violetw);color:#6027c0}.st-violet .d{background:var(--violet)}
.st-green{background:var(--greenw);color:#116632}.st-green .d{background:var(--green)}
.st-red{background:var(--redw);color:#b81d1d}.st-red .d{background:var(--red)}
.st-slate{background:var(--slatew);color:#465563}.st-slate .d{background:var(--slate)}
.st-teal{background:var(--tealw);color:var(--teald)}.st-teal .d{background:var(--teal)}

/* ---------- Tables ---------- */
.tablewrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tbar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.tbar .chip{font-size:12px;border:1px solid var(--line);background:#fff;border-radius:20px;padding:4px 11px;font-weight:500;color:var(--muted)}
.tbar .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tbar .rt{margin-left:auto;font-size:12px;color:var(--faint)}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:9px 14px;border-bottom:1px solid var(--line);background:#fafbfc}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:middle}
tbody tr{cursor:pointer;transition:background .1s}
tbody tr:hover{background:#f6f9fa}
tbody tr:last-child td{border-bottom:none}
td .rowmain{font-weight:600}
td .rowsub{font-size:11.5px;color:var(--faint);margin-top:1px}
.chev{color:var(--faint)}
tbody tr:hover .chev{color:var(--teal)}
.tid{font-family:'IBM Plex Mono';font-size:12px;color:var(--teald);font-weight:500}

/* ---------- Detail ---------- */
.detailhead{display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);margin-bottom:16px;flex-wrap:wrap}
.detailhead .icon{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--tealw);color:var(--teald)}
.detailhead .icon svg{width:23px;height:23px}
.detailhead h2{font-family:'Space Grotesk';font-size:20px;font-weight:600}
.detailhead .meta{color:var(--muted);font-size:12.5px;margin-top:3px;display:flex;gap:14px;flex-wrap:wrap}
.detailhead .meta b{color:var(--text);font-weight:600}
.detailhead .side{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab{padding:9px 14px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:.12s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--teald);border-bottom-color:var(--teal)}

/* definition rows */
.dl{display:grid;grid-template-columns:150px 1fr;gap:2px 14px}
.dl dt{font-size:12px;color:var(--faint);padding:8px 0;font-weight:500}
.dl dd{font-size:13px;padding:8px 0;font-weight:500;border-bottom:1px solid var(--line2)}
.dl dt{border-bottom:1px solid var(--line2)}
.dl dt:last-of-type,.dl dd:last-of-type{border-bottom:none}

/* status lifecycle stepper */
.lifecycle{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:4px 0}
.lc{display:flex;align-items:center}
.lc .node{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:78px}
.lc .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);color:var(--faint);font-size:12px;font-weight:700}
.lc.done .dot{background:var(--teal);border-color:var(--teal);color:#fff}
.lc.cur .dot{background:#fff;border-color:var(--teal);color:var(--teald);box-shadow:0 0 0 4px var(--tealw)}
.lc .cap{font-size:10.5px;color:var(--muted);font-weight:600;max-width:80px;line-height:1.25}
.lc.cur .cap{color:var(--teald)}
.lc .bar{width:34px;height:2px;background:var(--line);margin:0 2px;margin-bottom:20px}
.lc.done .bar{background:var(--teal)}

/* custody timeline */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tev{position:relative;padding:0 0 20px}
.tev:last-child{padding-bottom:0}
.tev .tdot{position:absolute;left:-22px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--teal);display:grid;place-items:center}
.tev .tdot i{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.tev.warn .tdot{border-color:var(--amber)}.tev.warn .tdot i{background:var(--amber)}
.tev.red .tdot{border-color:var(--red)}.tev.red .tdot i{background:var(--red)}
.tev .tt{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tev .tm{font-size:11.5px;color:var(--faint);margin-top:2px}
.tev .tbox{margin-top:7px;background:#fafbfc;border:1px solid var(--line2);border-radius:8px;padding:8px 11px;font-size:12px;color:var(--muted);display:grid;grid-template-columns:auto 1fr;gap:3px 12px}
.tev .tbox b{color:var(--text);font-weight:600}

/* photo grid */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.ph{aspect-ratio:4/3;border-radius:9px;border:1px solid var(--line);background:linear-gradient(135deg,#dfe6ec,#eef2f5);position:relative;overflow:hidden;display:grid;place-items:center}
.ph .lab{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(19,26,34,.72));color:#fff;font-size:10.5px;font-weight:600;padding:14px 8px 6px}
.ph .badge{position:absolute;top:6px;right:6px;background:var(--green);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;letter-spacing:.04em}
.ph svg{width:26px;height:26px;color:#9fadb9}

/* checklist */
.check{list-style:none;display:flex;flex-direction:column;gap:1px}
.check li{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line2);font-size:13px;font-weight:500}
.check li:last-child{border:none}
.check .cbox{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none}
.check .cbox.ok{background:var(--green);color:#fff}
.check .cbox.no{background:#fff;border:2px solid var(--line)}
.check .cbox svg{width:13px;height:13px}
.check .st{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--faint)}

/* two-col detail */
.split{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
@media(max-width:980px){.split{grid-template-columns:1fr}}

/* mini map */
.map{height:220px;border-radius:var(--radius);border:1px solid var(--line);position:relative;overflow:hidden;background:
  radial-gradient(circle at 30% 40%,rgba(14,124,134,.06),transparent 40%),
  radial-gradient(circle at 70% 60%,rgba(37,99,235,.05),transparent 40%),
  linear-gradient(#f2f5f7,#e9eef1)}
.map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:34px 34px;opacity:.6}
.pin{position:absolute;transform:translate(-50%,-100%);z-index:2}
.pin .p{width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 5px rgba(0,0,0,.25);border:2px solid #fff}
.pin .lbl{position:absolute;top:-24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:10px;padding:2px 6px;border-radius:5px;white-space:nowrap;font-family:'IBM Plex Mono';font-weight:500}

/* bar chart */
.bars{display:flex;align-items:flex-end;gap:12px;height:150px;padding-top:10px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bars .stack{width:70%;border-radius:5px 5px 0 0;display:flex;flex-direction:column-reverse;overflow:hidden;min-height:3px}
.bars .seg{width:100%}
.bars .xl{font-size:10.5px;color:var(--faint);font-weight:600}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px}

/* progress */
.prog{height:7px;background:var(--line2);border-radius:20px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--teal);border-radius:20px}

/* mobile app frame */
.phonewrap{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.phone{width:300px;flex:none;background:var(--ink);border-radius:34px;padding:11px;box-shadow:0 20px 50px -12px rgba(19,26,34,.4),0 0 0 1px rgba(0,0,0,.05)}
.phone .notch{height:22px;display:flex;justify-content:center}
.phone .notch::after{content:"";width:90px;height:20px;background:var(--ink);border-radius:0 0 14px 14px}
.screen{background:var(--paper);border-radius:24px;overflow:hidden;height:600px;display:flex;flex-direction:column}
.mtop{background:var(--ink);color:#fff;padding:6px 16px 12px;display:flex;align-items:center;gap:10px}
.mtop .mback{font-size:18px;opacity:.85}
.mtop h4{font-size:14px;font-weight:600;flex:1}
.mtop .mst{font-size:10px;opacity:.6;font-family:'IBM Plex Mono'}
.mbody{flex:1;overflow-y:auto;padding:14px}
.mbody::-webkit-scrollbar{width:0}
.mnav{display:flex;background:#fff;border-top:1px solid var(--line)}
.mnav .mi{flex:1;text-align:center;padding:8px 0 10px;font-size:9.5px;color:var(--faint);font-weight:600}
.mnav .mi.on{color:var(--teal)}
.mnav .mi svg{width:19px;height:19px;display:block;margin:0 auto 2px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:11px;box-shadow:var(--shadow)}
.mcard h5{font-size:13px;font-weight:700;margin-bottom:3px}
.mcard .mrow{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid var(--line2)}
.mcard .mrow:last-child{border:none}
.mcard .mrow span:first-child{color:var(--faint)}
.mbtn{width:100%;background:var(--teal);color:#fff;border:none;border-radius:10px;padding:12px;font-size:13.5px;font-weight:700;margin-top:4px}
.mbtn.alt{background:#fff;color:var(--text);border:1px solid var(--line)}
.scanbox{aspect-ratio:1;border-radius:14px;background:linear-gradient(135deg,#1a2530,#2a3846);position:relative;display:grid;place-items:center;overflow:hidden;margin-bottom:11px}
.scanbox .frame{width:64%;height:64%;border:2px solid var(--teal);border-radius:10px;position:relative;box-shadow:0 0 0 2000px rgba(19,26,34,.35)}
.scanbox .frame::before,.scanbox .frame::after{content:"";position:absolute;width:20px;height:20px;border:3px solid #fff}
.scanbox .frame::before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.scanbox .frame::after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 6px 0}
.scanbox .line{position:absolute;left:18%;right:18%;height:2px;background:var(--teal);box-shadow:0 0 12px 2px var(--teal);top:50%;animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%,100%{top:20%}50%{top:80%}}
.scanhint{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#cfe0e4;font-size:11px;font-family:'IBM Plex Mono'}
.mstepper{display:flex;gap:5px;margin-bottom:12px}
.mstepper i{flex:1;height:4px;border-radius:20px;background:var(--line)}
.mstepper i.on{background:var(--teal)}
.phonelbl{max-width:300px}
.phonelbl h4{font-family:'Space Grotesk';font-size:15px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.phonelbl p{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.stepnav{display:flex;gap:6px;flex-wrap:wrap}
.stepnav button{font-size:11.5px;padding:5px 10px;border-radius:7px;border:1px solid var(--line);background:#fff;font-weight:600;color:var(--muted)}
.stepnav button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* misc */
.note{background:var(--tealw);border:1px solid #cfe6e8;border-radius:9px;padding:11px 13px;font-size:12.5px;color:var(--teald);display:flex;gap:9px}
.note svg{width:17px;height:17px;flex:none;margin-top:1px}
.warnnote{background:var(--amberw);border-color:#e6d3a8;color:#8a5308}
.emptyhint{color:var(--faint);font-size:12.5px;text-align:center;padding:26px}
.tag{font-size:11px;background:var(--line2);color:var(--muted);padding:2px 8px;border-radius:6px;font-weight:600}
.sectitle{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:22px 0 10px}
.hier{display:flex;flex-direction:column;gap:2px}
.hier .hnode{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500}
.hier .hnode:hover{background:#f4f7f9;cursor:pointer}
.hier .hnode .ci{width:9px;height:9px;border-radius:3px}
.hier .l1{margin-left:0}.hier .l2{margin-left:22px}.hier .l3{margin-left:44px}.hier .l4{margin-left:66px}
.hier .cnt{margin-left:auto;font-family:'IBM Plex Mono';font-size:11px;color:var(--faint)}
.assign{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.assign{grid-template-columns:1fr}}
.tech-col{background:#fafbfc;border:1px solid var(--line2);border-radius:10px;padding:10px}
.tech-col h5{font-size:12px;display:flex;align-items:center;gap:8px;margin-bottom:9px}
.tech-col h5 .av{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:600}
.jcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin-bottom:7px;font-size:12px;box-shadow:0 1px 2px rgba(19,26,34,.04)}
.jcard .jt{font-weight:600;display:flex;justify-content:space-between}
.jcard .jm{color:var(--faint);font-size:11px;margin-top:2px}
.reportcard{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow)}
.reportcard .ri{width:40px;height:40px;border-radius:9px;background:var(--redw);color:var(--red);display:grid;place-items:center;flex:none}
.reportcard.xls .ri{background:var(--greenw);color:var(--green)}
.reportcard .rx{margin-left:auto;display:flex;gap:6px}
.notif{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line2)}
.notif:last-child{border:none}
.notif .ni{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none}
.notif .nt{font-size:13px;font-weight:600}
.notif .nm{font-size:12px;color:var(--muted);margin-top:1px}
.notif .nx{font-size:11px;color:var(--faint);margin-top:3px;font-family:'IBM Plex Mono'}
.toggle{width:38px;height:22px;border-radius:20px;background:var(--teal);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:2px;left:18px;width:18px;height:18px;border-radius:50%;background:#fff}
.toggle.off{background:var(--line)}.toggle.off::after{left:2px}
.uploadzone{border:2px dashed var(--line);border-radius:12px;padding:30px;text-align:center;color:var(--muted);background:#fafbfc}
.uploadzone svg{width:30px;height:30px;color:var(--faint);margin-bottom:8px}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:-260px;z-index:50;transition:.2s;width:238px}
  .rail.open{left:0}
  .content{padding:18px 14px 60px}
  .search input{width:150px}
}
.menubtn{display:none}
@media(max-width:820px){.menubtn{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#fff}}

/* ---------- Server-routed application additions ---------- */
a{text-decoration:none}.nav-icon{width:18px;display:inline-grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:15px;color:#8fa2b3;flex:none}.nav.active .nav-icon{color:#fff}.nav-sub{padding-left:20px;font-size:12.5px}.nav-sub .nav-icon{font-size:12px;width:12px}.signout{color:#b4c1cd!important}.search-symbol{position:absolute;left:9px;top:5px;font-size:18px;color:var(--faint)}.search input{padding-left:31px}.bell{text-decoration:none;font-size:13px}.content{max-width:none}.section-gap{margin-bottom:16px}.top-gap{margin-top:16px}.small-value{font-size:18px!important;line-height:1.25!important}.no-pad{padding:0!important}.status-summary,.compact-list{display:flex;flex-direction:column;gap:8px}.summary-row,.list-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line2)}.summary-row:last-child,.list-row:last-child{border-bottom:none}.list-row{color:var(--text);border-radius:7px;padding:9px 8px}.list-row:hover{background:#f5f8fa}.list-row span:first-child{display:flex;flex-direction:column}.list-row small{color:var(--faint);font-size:11.5px;margin-top:2px}.card .hd>a.btn{margin-left:auto}.filterbar{display:flex;gap:8px;margin-bottom:14px}.filterbar input{flex:1;max-width:520px}.form-card{max-width:940px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid label,.upload-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}.form-grid label>span,.upload-field>span{font-size:11.5px;letter-spacing:.02em}.span-2{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea,.filterbar input,.inline-form input,.inline-form select,.upload-field input{width:100%;border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 10px;font-family:inherit;font-size:13px;color:var(--text)}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.filterbar input:focus,.inline-form input:focus,.inline-form select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--tealw)}.form-actions{padding:13px 16px;border-top:1px solid var(--line2);display:flex;justify-content:flex-end;gap:8px}.check-label{flex-direction:row!important;align-items:center!important}.check-label input{width:auto!important}.inline-form{display:grid;grid-template-columns:minmax(150px,1.2fr) 145px minmax(140px,1fr) auto;gap:7px;align-items:center}.actions-cell{display:flex;align-items:center;gap:6px;white-space:nowrap}.actions-cell form{display:inline}.btn.danger{border-color:#efc2c2;color:#b81d1d;background:#fff}.btn.danger:hover{background:var(--redw);border-color:#e5aaaa}.flash-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.flash{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:var(--shadow);font-size:13px}.flash-success{background:var(--greenw);border-color:#bfdfca;color:#116632}.flash-error{background:var(--redw);border-color:#efc4c4;color:#b81d1d}.flash-warning{background:var(--amberw);border-color:#e8d2a5;color:#8a5308}.flash button{border:0;background:transparent;color:inherit;font-size:18px;line-height:1}.settings-card{max-width:800px}.setting-list{display:flex;flex-direction:column}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 2px;border-bottom:1px solid var(--line2)}.setting-row:last-child{border-bottom:none}.setting-row span{display:flex;flex-direction:column}.setting-row small{color:var(--muted);font-weight:400;margin-top:2px}.setting-row input{width:19px;height:19px}.app-link{display:block;text-align:center;text-decoration:none}.admin-nav{padding-bottom:8px}.tablewrap{overflow-x:auto}.tablewrap table{min-width:760px}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.inline-form{grid-template-columns:1fr}.content{padding:18px 14px 50px}.pagehead .actions{width:100%;margin-left:0}.pagehead .actions .btn{flex:1;justify-content:center}}
/* =========================================================
   Work Order form — premium UI
   ========================================================= */

[data-work-order-form] {
  max-width: 1180px;
  margin: 0 auto;
}

[data-work-order-form] .form-card {
  max-width: none;
  overflow: hidden;
  border-radius: 14px;
  border-color: #d8e1e7;
  box-shadow:
    0 8px 28px rgba(19, 26, 34, 0.055);
}

[data-work-order-form] .form-card .hd {
  min-height: 62px;
  padding: 15px 19px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fafcfd 100%
    );
}

[data-work-order-form] .form-card .hd h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  letter-spacing: -0.01em;
}

[data-work-order-form] .form-card .hd .sub {
  margin-left: 4px;
  color: #80909e;
}

[data-work-order-form] .form-card .bd {
  padding: 20px;
}

[data-work-order-form] .form-grid {
  gap: 17px;
}

[data-work-order-form]
.form-grid label > span {
  color: #536270;
  font-size: 11.5px;
  font-weight: 700;
}

[data-work-order-form] .form-grid input,
[data-work-order-form] .form-grid select,
[data-work-order-form]
.requirement-row input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #d5dfe5;
  border-radius: 9px;
  background: #ffffff;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}

[data-work-order-form] input:hover,
[data-work-order-form] select:hover {
  border-color: #b9c7d0;
}

[data-work-order-form] input:focus,
[data-work-order-form] select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow:
    0 0 0 3px rgba(14, 124, 134, 0.12);
}

/* Site and warehouse preview */

[data-work-order-form] .detail-preview {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 13px;
  border: 1px dashed #d3dee5;
  border-radius: 12px;
  background: #f7f9fa;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

[data-work-order-form]
.detail-preview.is-populated {
  border-style: solid;
  border-color: #b9dfe1;
  background:
    linear-gradient(
      135deg,
      #f1fbfb 0%,
      #f9fcfc 100%
    );
  box-shadow:
    inset 0 0 0 1px
    rgba(14, 124, 134, 0.025);
}

[data-work-order-form]
.detail-preview > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line2);
  border-radius: 9px;
  background: #ffffff;
}

[data-work-order-form]
.detail-preview span {
  display: block;
  margin-bottom: 3px;
  color: #8593a0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

[data-work-order-form]
.detail-preview b {
  display: block;
  color: #1b2a35;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Equipment requirements */

[data-work-order-form]
.requirement-table {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

[data-work-order-form]
.requirement-head,
[data-work-order-form]
.requirement-row {
  display: grid;
  grid-template-columns:
    minmax(230px, 1.35fr)
    115px
    minmax(210px, 1fr)
    86px;
  gap: 10px;
  align-items: center;
}

[data-work-order-form]
.requirement-head {
  padding: 0 12px 3px;
  color: #84929f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

[data-work-order-form]
.requirement-row {
  padding: 12px;
  border: 1px solid var(--line2);
  border-radius: 11px;
  background: #fafbfc;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}

[data-work-order-form]
.requirement-row:focus-within {
  border-color: #bddfe1;
  background: #ffffff;
  box-shadow:
    0 5px 18px rgba(14, 124, 134, 0.06);
}

[data-work-order-form]
.requirement-row .btn {
  min-height: 40px;
  justify-content: center;
}

[data-work-order-form] .field-help {
  margin-top: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f7f9;
  color: #687987;
  font-size: 11.8px;
}

[data-work-order-form]
.btn[data-add-equipment-row] {
  margin-left: auto;
  border-color: #b9dfe1;
  background: var(--tealw);
  color: var(--teald);
}

[data-work-order-form]
.btn[data-add-equipment-row]:hover {
  background: #d5ebed;
}

/* Bottom action bar */

[data-work-order-form]
.standalone-actions {
  position: sticky;
  bottom: 0;
  z-index: 12;
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid #d6e0e6;
  border-radius: 12px;
  background:
    rgba(237, 240, 243, 0.92);
  backdrop-filter: blur(9px);
  box-shadow:
    0 -10px 30px
    rgba(19, 26, 34, 0.055);
}

[data-work-order-form]
.standalone-actions .btn.primary {
  min-width: 160px;
  justify-content: center;
  box-shadow:
    0 7px 17px
    rgba(14, 124, 134, 0.18);
}

@media (max-width: 900px) {
  [data-work-order-form]
  .requirement-head {
    display: none;
  }

  [data-work-order-form]
  .requirement-row {
    grid-template-columns: 1fr 110px;
  }

  [data-work-order-form]
  .requirement-row
  input:nth-of-type(3),
  [data-work-order-form]
  .requirement-row .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  [data-work-order-form]
  .detail-preview {
    grid-template-columns: 1fr;
  }

  [data-work-order-form]
  .requirement-row {
    grid-template-columns: 1fr;
  }

  [data-work-order-form]
  .requirement-row
  input:nth-of-type(3),
  [data-work-order-form]
  .requirement-row .btn {
    grid-column: auto;
  }

  [data-work-order-form]
  .standalone-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* Searchable select controls */

.searchable-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.searchable-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.searchable-select-input {
  width: 100%;
  min-height: 42px;
  padding: 9px 38px 9px 11px !important;
  border: 1px solid #d5dfe5;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: text;
}

.searchable-select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid #7d8c98;
  border-bottom: 2px solid #7d8c98;
  transform: rotate(45deg);
  pointer-events: none;
  transition:
    transform 0.15s ease,
    margin-top 0.15s ease;
}

.searchable-select.is-open::after {
  margin-top: -1px;
  transform: rotate(225deg);
}

.searchable-select.is-open
.searchable-select-input {
  border-color: var(--teal);
  box-shadow:
    0 0 0 3px
    rgba(14, 124, 134, 0.12);
}

.searchable-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #d4dee5;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 16px 36px
    rgba(20, 31, 42, 0.16);
}

.searchable-select.is-open
.searchable-select-menu {
  display: block;
}

.searchable-select-option {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #273642;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.searchable-select-option:hover,
.searchable-select-option.is-active {
  background: var(--tealw);
  color: var(--teald);
}

.searchable-select-option.is-selected {
  font-weight: 700;
}

.searchable-select-empty {
  padding: 12px 10px;
  color: #8795a0;
  font-size: 12px;
  text-align: center;
}

.requirement-row
.searchable-select {
  min-width: 0;
}

.assignment-total {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-size: 12px;
}

.assignment-groups {
  display: grid;
  gap: 16px;
}

.assignment-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.assignment-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line2);
  background: #f8fafb;
}

.assignment-search {
  padding: 12px 14px 0;
}

.assignment-search input {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #d5dfe5;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
}

.stock-choice-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
}

.stock-choice {
  position: relative;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.stock-choice:hover {
  border-color: var(--teal);
  background: var(--tealw);
}

.stock-choice:has(
  input:checked
) {
  border-color: var(--teal);
  background: var(--tealw);
  box-shadow:
    0 0 0 2px
    rgba(14, 124, 134, 0.1);
}

.stock-choice:has(
  input:disabled:not(:checked)
) {
  opacity: 0.45;
  cursor: not-allowed;
}

.stock-choice input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex: none;
}

.stock-choice-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.stock-choice-title {
  font-weight: 700;
  color: var(--text);
}

.stock-choice-id {
  color: var(--teald);
  font-size: 11.5px;
}

.stock-choice-meta {
  color: var(--muted);
  font-size: 11.5px;
}

.stock-choice-warehouse {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line2);
  color: var(--faint);
  font-size: 11.5px;
}

.assignment-group-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line2);
  background: #fafbfc;
  color: var(--muted);
  font-size: 12px;
}

.assignment-limit-message {
  color: var(--amber);
  font-weight: 600;
}

.warehouse-source {
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line2);
}

.warehouse-source:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.compact-dl {
  margin-top: 10px;
}

@media (max-width: 900px) {
  .stock-choice-grid {
    grid-template-columns: 1fr;
  }

  .assignment-group-head {
    align-items: flex-start;
    flex-direction: column;
  }
}




/* =========================================================
   Technician portal
   ========================================================= */

.technician-app-shell{
  min-height:100vh;
}

.technician-main{
  min-width:0;
}

.technician-mobile-bar{
  display:none;
}

.technician-content{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:28px;
}

.technician-sidebar-overlay{
  display:none;
}

/* Technician sidebar differences */

.technician-rail .railscroll{
  padding-top:10px;
}

.technician-rail .railfoot{
  flex-shrink:0;
}

/* Page headings */

.technician-pagehead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.technician-pagehead h1,
.technician-job-detail-head h1{
  margin:3px 0 0;
  font-family:'Space Grotesk';
  font-size:30px;
  line-height:1.15;
}

.technician-pagehead p{
  max-width:650px;
  margin-top:7px;
  color:var(--muted);
}

.technician-eyebrow{
  display:block;
  color:var(--teald);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.technician-profile-card{
  min-width:220px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.technician-profile-card span,
.technician-profile-card b,
.technician-profile-card small{
  display:block;
}

.technician-profile-card span{
  color:var(--faint);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
}

.technician-profile-card b{
  margin-top:4px;
}

.technician-profile-card small{
  margin-top:2px;
  color:var(--teald);
  font-family:'IBM Plex Mono';
  font-size:11px;
}

/* Job list */

.technician-section{
  margin-top:24px;
}

.technician-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:15px;
  margin-bottom:12px;
}

.technician-section-head h2{
  font-family:'Space Grotesk';
  font-size:19px;
}

.technician-section-head p{
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}

.technician-job-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}

.technician-job-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
}

.technician-job-card.is-complete{
  opacity:.88;
}

.technician-job-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.technician-job-top > div{
  min-width:0;
}

.technician-job-top h3{
  margin:3px 0;
  overflow-wrap:anywhere;
  font-size:18px;
}

.technician-job-label{
  color:var(--faint);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
}

.technician-job-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:16px;
  border-top:1px solid var(--line2);
  border-left:1px solid var(--line2);
}

.technician-job-summary div{
  min-width:0;
  padding:11px;
  border-right:1px solid var(--line2);
  border-bottom:1px solid var(--line2);
}

.technician-job-summary dt{
  color:var(--faint);
  font-size:9.5px;
  font-weight:600;
  text-transform:uppercase;
}

.technician-job-summary dd{
  margin-top:4px;
  overflow-wrap:anywhere;
  font-weight:600;
}

.technician-job-location{
  margin-top:12px;
  padding:11px 12px;
  background:var(--tealw);
  border-radius:8px;
}

.technician-job-location span,
.technician-job-location b{
  display:block;
}

.technician-job-location span{
  color:var(--teald);
  font-size:10px;
  text-transform:uppercase;
}

.technician-job-location b{
  margin-top:3px;
  overflow-wrap:anywhere;
}

.technician-open-job{
  justify-content:center;
  width:100%;
  margin-top:15px;
}

.technician-empty-state{
  grid-column:1/-1;
  padding:46px 20px;
  text-align:center;
  background:#fff;
  border:1px dashed var(--line);
  border-radius:12px;
}

.technician-empty-state p{
  max-width:480px;
  margin:7px auto 0;
  color:var(--muted);
}

/* Job detail page */

.technician-detail-actions{
  margin-bottom:14px;
}

.technician-job-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
}

.technician-job-detail-head > div{
  min-width:0;
}

.technician-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:9px;
  color:var(--muted);
}

.technician-detail-meta span{
  overflow-wrap:anywhere;
}

.technician-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}

.technician-map-link{
  justify-content:center;
  margin-top:15px;
}

.technician-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.technician-table-scroll table{
  min-width:800px;
}

/* Tablet */

@media(max-width:900px){
  .technician-content{
    padding:22px;
  }

  .technician-pagehead{
    flex-direction:column;
  }

  .technician-profile-card{
    width:100%;
  }

  .technician-detail-grid{
    grid-template-columns:1fr;
  }
}

/* Mobile sidebar and pages */

@media(max-width:760px){
  .technician-app-shell{
    display:block;
  }

  .technician-rail{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    z-index:100;
    width:min(280px,84vw);
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:12px 0 32px rgba(0,0,0,.24);
  }

  .technician-rail.open{
    transform:translateX(0);
  }

  .technician-main{
    width:100%;
    min-height:100vh;
  }

  .technician-mobile-bar{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    gap:11px;
    min-height:58px;
    padding:8px 14px;
    background:#fff;
    border-bottom:1px solid var(--line);
  }

  .technician-mobile-bar .menubtn{
    display:grid;
    flex:0 0 auto;
    place-items:center;
  }

  .technician-mobile-bar b,
  .technician-mobile-bar small{
    display:block;
  }

  .technician-mobile-bar b{
    font-family:'Space Grotesk';
    font-size:15px;
  }

  .technician-mobile-bar small{
    margin-top:1px;
    color:var(--muted);
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .technician-sidebar-overlay{
    position:fixed;
    inset:0;
    z-index:90;
    width:100%;
    height:100%;
    padding:0;
    background:rgba(15,24,34,.48);
    border:0;
  }

  body:has(.technician-rail.open)
  .technician-sidebar-overlay{
    display:block;
  }

  body:has(.technician-rail.open){
    overflow:hidden;
  }

  .technician-content{
    max-width:none;
    padding:18px 14px 42px;
  }

  .technician-pagehead{
    gap:14px;
    margin-bottom:20px;
  }

  .technician-pagehead h1,
  .technician-job-detail-head h1{
    font-size:25px;
  }

  .technician-job-grid{
    grid-template-columns:1fr;
  }

  .technician-job-card{
    padding:15px;
  }

  .technician-job-top{
    flex-direction:column;
  }

  .technician-job-summary{
    grid-template-columns:1fr;
  }

  .technician-section-head{
    align-items:flex-start;
  }

  .technician-job-detail-head{
    flex-direction:column;
    padding:16px;
  }

  .technician-detail-meta{
    flex-direction:column;
    gap:5px;
  }

  .technician-detail-grid{
    gap:12px;
  }

  .technician-detail-actions .btn{
    width:100%;
    justify-content:center;
  }

  .technician-map-link{
    width:100%;
  }

  .technician-profile-card{
    min-width:0;
  }
}

/* Small phones */

@media(max-width:420px){
  .technician-content{
    padding-right:10px;
    padding-left:10px;
  }

  .technician-pagehead h1,
  .technician-job-detail-head h1{
    font-size:22px;
  }

  .technician-job-card{
    border-radius:10px;
  }

  .technician-section-head{
    flex-direction:column;
    gap:8px;
  }

  .technician-job-summary div{
    padding:10px;
  }

  .technician-empty-state{
    padding:34px 15px;
  }
}



/* =========================================================
   Technician field workflow stages
   ========================================================= */

.field-stage-page{
  width:100%;
}

.field-stage-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:14px;
}

.field-stage-heading h1{
  margin-top:3px;
  font-family:'Space Grotesk';
  font-size:28px;
  line-height:1.15;
}

.field-stage-heading p{
  margin-top:5px;
  color:var(--muted);
}

.technician-user-text{
  text-align:right;
  white-space:nowrap;
}

.technician-user-text b,
.technician-user-text small{
  display:block;
}

.technician-user-text small{
  margin-top:2px;
  color:var(--teald);
  font-family:'IBM Plex Mono';
  font-size:11px;
}

.field-info-banner,
.field-success-banner{
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #cbdcff;
  border-radius:9px;
  background:#edf4ff;
  color:#174b9b;
}

.field-success-banner{
  border-color:#bfe2ca;
  background:var(--greenw);
  color:var(--green);
}

.field-stepper{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding:16px;
  overflow-x:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.field-stepper > i{
  flex:1;
  min-width:30px;
  height:1px;
  border-top:1px dashed #aebbc7;
}

.field-step{
  display:grid;
  grid-template-columns:34px auto;
  column-gap:9px;
  min-width:150px;
}

.field-step > span{
  grid-row:1/3;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:#f8fafb;
  font-weight:700;
}

.field-step b{
  align-self:end;
  font-size:12px;
}

.field-step small{
  color:var(--faint);
  font-size:10px;
}

.field-step.is-current > span{
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
}

.field-step.is-current small{
  color:var(--blue);
  font-weight:700;
}

.field-step.is-complete > span{
  border-color:var(--teal);
  background:var(--teal);
  color:#fff;
}

.field-site-summary,
.field-pickup-summary{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.field-site-symbol{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:10px;
  background:var(--bluew);
  color:var(--blue);
  font-size:26px;
}

.field-site-summary > div > span,
.field-pickup-summary span{
  display:block;
  color:var(--faint);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.field-site-summary h2{
  margin-top:2px;
  font-family:'Space Grotesk';
  font-size:22px;
}

.field-site-summary > div > small{
  color:var(--teald);
  font-family:'IBM Plex Mono';
}

.field-site-summary dl{
  display:grid;
  grid-template-columns:repeat(4,minmax(130px,1fr));
  flex:1;
  margin-left:12px;
}

.field-site-summary dl > div,
.field-pickup-summary > div{
  min-width:0;
  padding:3px 18px;
  border-left:1px solid var(--line2);
}

.field-site-summary dt{
  color:var(--faint);
  font-size:10px;
  text-transform:uppercase;
}

.field-site-summary dd{
  margin-top:5px;
  overflow-wrap:anywhere;
  font-weight:600;
}

.field-two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}

.field-navigation-layout{
  display:flex;
  flex-direction:column;
}

.field-navigation-button{
  align-self:flex-start;
  margin-top:14px;
}

.field-document-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(135px,1fr));
  gap:9px;
}

.field-document{
  min-height:100px;
  padding:12px;
  text-decoration:none;
  background:#fafbfc;
  border:1px solid var(--line);
  border-radius:9px;
}

.field-document:hover{
  border-color:var(--teal);
}

.field-document span,
.field-document b,
.field-document small{
  display:block;
}

.field-document span{
  color:var(--teal);
  font-size:20px;
}

.field-document b{
  margin-top:8px;
  font-size:12px;
}

.field-document small{
  margin-top:4px;
  color:var(--faint);
}

.field-readiness p{
  color:var(--muted);
}

.field-readiness-item{
  display:flex;
  align-items:center;
  gap:9px;
  margin:16px 0;
}

.field-readiness-item span{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--greenw);
  color:var(--green);
  font-weight:700;
}

.field-full-button{
  justify-content:center;
  width:100%;
}

.field-pickup-summary{
  display:grid;
  grid-template-columns:
    1.25fr repeat(4,1fr);
  margin-bottom:16px;
}

.field-pickup-summary b,
.field-pickup-summary small{
  display:block;
  margin-top:4px;
  overflow-wrap:anywhere;
}

.field-pickup-summary small{
  color:var(--teald);
}

.field-pickup-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:16px;
}

.field-pickup-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.field-verification-editor td{
  padding:0;
  background:#f8fafb;
}

.field-verification-form{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:12px;
  padding:15px;
}

.field-verification-form label{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.field-verification-form label > span{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.field-verification-form input,
.field-verification-form select{
  width:100%;
  min-height:39px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font:inherit;
}

.field-verification-form .span-2{
  grid-column:span 2;
}

.field-editor-actions{
  display:flex;
  justify-content:flex-end;
  align-items:end;
  gap:8px;
}

.field-stat-list{
  display:flex;
  flex-direction:column;
}

.field-stat-list > div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--line2);
}

.field-stat-list dt{
  color:var(--muted);
}

.field-stat-list dd{
  font-weight:700;
}

.field-danger-text{
  color:var(--red);
}

.field-validation-progress{
  margin-top:14px;
}

.field-validation-progress + small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  text-align:right;
}

.compact-dl{
  grid-template-columns:90px 1fr;
}

.field-custody-preview{
  display:grid;
  grid-template-columns:
    1fr auto 1fr 1fr 1fr;
  align-items:center;
  gap:18px;
}

.field-custody-preview > div{
  min-width:0;
}

.field-custody-preview span,
.field-custody-preview b,
.field-custody-preview small{
  display:block;
}

.field-custody-preview span{
  color:var(--faint);
  font-size:10px;
  text-transform:uppercase;
}

.field-custody-preview b{
  margin-top:4px;
  overflow-wrap:anywhere;
}

.field-custody-preview small{
  color:var(--teald);
}

.field-checkout-form{
  margin-top:14px;
  text-align:center;
}

.field-checkout-button{
  justify-content:center;
  width:100%;
  min-height:44px;
}

.field-checkout-form small{
  display:block;
  margin-top:7px;
  color:var(--muted);
}

.field-checkout-button:disabled{
  cursor:not-allowed;
  opacity:.5;
}

.technician-empty-state.compact{
  padding:24px 15px;
}

@media(max-width:1050px){
  .field-site-summary{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .field-site-summary dl{
    grid-template-columns:repeat(2,1fr);
    width:100%;
    margin-left:0;
  }

  .field-pickup-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .field-pickup-layout{
    grid-template-columns:1fr;
  }

  .field-pickup-side{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px){
  .field-stage-heading{
    flex-direction:column;
  }

  .technician-user-text{
    display:none;
  }

  .field-two-column{
    grid-template-columns:1fr;
  }

  .field-site-summary{
    display:block;
  }

  .field-site-symbol{
    margin-bottom:12px;
  }

  .field-site-summary dl{
    grid-template-columns:1fr;
    margin-top:14px;
  }

  .field-site-summary dl > div{
    padding:10px 0;
    border-top:1px solid var(--line2);
    border-left:0;
  }

  .field-pickup-summary{
    grid-template-columns:1fr;
  }

  .field-pickup-summary > div{
    padding:10px 0;
    border-left:0;
    border-bottom:1px solid var(--line2);
  }

  .field-pickup-side{
    display:flex;
  }

  .field-verification-form{
    grid-template-columns:1fr;
  }

  .field-verification-form .span-2{
    grid-column:auto;
  }

  .field-editor-actions{
    justify-content:stretch;
  }

  .field-editor-actions .btn{
    flex:1;
    justify-content:center;
  }

  .field-custody-preview{
    grid-template-columns:1fr;
  }

  .field-custody-preview > strong{
    transform:rotate(90deg);
  }
}




/* =========================================================
   Technician Stage 5 — Transport to Storage
   ========================================================= */

.field-status-warning{
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #e8c982;
  border-radius:9px;
  background:var(--amberw);
  color:#855207;
}

.field-transport-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:16px;
}

.field-transport-main{
  min-width:0;
}

.field-transport-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.field-inline-sub{
  margin-left:7px;
  color:var(--faint);
  font-family:'IBM Plex Mono';
}

.field-location-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.field-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.field-location-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field-location-form label > span{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.field-location-form input,
.field-location-form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:9px 10px;
  color:var(--text);
  font:inherit;
}

.field-location-form input:focus,
.field-location-form textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--tealw);
}

.field-location-button{
  align-self:flex-start;
}

.field-location-message{
  min-height:18px;
  color:var(--green);
  font-size:12px;
}

.field-location-message.is-error{
  color:var(--red);
}

.field-block-label{
  width:100%;
}

.field-arrival-photo-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field-arrival-photo{
  display:grid !important;
  grid-template-columns:minmax(180px,1fr) minmax(220px,1fr);
  align-items:center;
  gap:16px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fafbfc;
}

.field-arrival-photo b,
.field-arrival-photo small{
  display:block;
}

.field-arrival-photo small{
  margin-top:2px;
  color:var(--faint);
  font-family:'IBM Plex Mono';
  font-size:10.5px;
}

.field-arrival-photo input{
  padding:7px;
  background:#fff;
}

.field-evidence-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}

.field-evidence-card{
  overflow:hidden;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}

.field-evidence-card:hover{
  border-color:var(--teal);
}

.field-evidence-card img{
  display:block;
  width:100%;
  height:130px;
  object-fit:cover;
  background:var(--line2);
}

.field-evidence-card > div{
  padding:10px;
}

.field-evidence-card b,
.field-evidence-card small{
  display:block;
}

.field-evidence-card small{
  margin-top:3px;
  overflow:hidden;
  color:var(--faint);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.field-next-step{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.field-next-number{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:50%;
  background:var(--bluew);
  color:var(--blue);
  font-weight:700;
}

.field-next-step p{
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
}

.field-stage-next-action{
  margin-top:14px;
}

.section-gap-small{
  margin-top:12px;
}

@media(max-width:1000px){
  .field-transport-layout{
    grid-template-columns:1fr;
  }

  .field-transport-side{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:700px){
  .field-form-grid{
    grid-template-columns:1fr;
  }

  .field-transport-side{
    display:flex;
  }

  .field-arrival-photo{
    grid-template-columns:1fr;
  }

  .field-location-button{
    width:100%;
    justify-content:center;
  }
}

.equipment-assignment-section {
  overflow: hidden;
  border: 1px solid #bfd2e5;
  border-radius: 17px;
  background: #ffffff;
  box-shadow:
    0 13px 34px rgba(15, 53, 87, 0.1);
}

.assignment-main-header {
  border-bottom: 1px solid #153d63 !important;
  background:
    linear-gradient(
      135deg,
      #082f49,
      #0c4a6e
    ) !important;
}

.assignment-main-header h3 {
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 850;
}

.assignment-main-header .sub {
  color: #bae6fd !important;
  font-weight: 550;
}

.assignment-total {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid #38bdf8;
  border-radius: 999px;
  background: #075985;
  color: #e0f2fe;
  font-size: 11px;
  font-weight: 800;
}

.assignment-total b {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  background: #38bdf8;
  color: #082f49;
}

.assignment-groups {
  display: grid;
  gap: 18px;
}

.assignment-group {
  overflow: hidden;
  border: 1px solid #a7c5df;
  border-radius: 14px;
  background: #ffffff;
}

.assignment-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px;
  border-bottom: 1px solid #164e63;
  background:
    linear-gradient(
      135deg,
      #0f3d5e,
      #155e75
    );
}

.assignment-group-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 850;
}

.assignment-group-summary {
  display: flex;
  gap: 7px 17px;
  margin-top: 7px;
  flex-wrap: wrap;
  color: #bae6fd;
  font-size: 10px;
}

.assignment-group-summary b {
  color: #ffffff;
}

.assignment-limit-badge {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 5px 10px;
  border: 1px solid #67e8f9;
  border-radius: 999px;
  background: #164e63;
  color: #cffafe;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.assignment-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid #cfe0ef;
  background: #eaf6ff;
}

.assignment-search-wrap {
  position: relative;
  width: min(520px, 100%);
}

.assignment-search-wrap svg {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  color: #075985;
  pointer-events: none;
  transform: translateY(-50%);
}

.assignment-search-input {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px 9px 39px;
  border: 1px solid #5b9bc4;
  border-radius: 9px;
  outline: none;
  background: #ffffff;
  color: #0c2740;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}

.assignment-search-input::placeholder {
  color: #51748e;
}

.assignment-search-input:focus {
  border-color: #0284c7;
  box-shadow:
    0 0 0 3px rgba(2, 132, 199, 0.14);
}

.assignment-result-count {
  color: #164e63;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.assignment-result-count b {
  color: #0c2740;
}

.assignment-table-wrap {
  overflow-x: auto;
}

.assignment-stock-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}

.assignment-stock-table thead th {
  padding: 12px 13px;
  border-right: 1px solid #276383;
  border-bottom: 1px solid #082f49;
  background: #0c4a6e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.assignment-stock-table thead th:last-child {
  border-right: 0;
}

.assignment-stock-table tbody td {
  padding: 12px 13px;
  border-bottom: 1px solid #cfe2f0;
  color: #17324a;
  font-size: 11px;
  vertical-align: middle;
}

.assignment-stock-table tbody tr:nth-child(even) {
  background: #edf8ff;
}

.assignment-stock-table tbody tr:nth-child(odd) {
  background: #ffffff;
}

.assignment-stock-table tbody tr:hover {
  background: #d9f1ff;
}

.assignment-stock-table tbody tr.is-selected {
  background: #d7f7eb;
}

.assignment-stock-table tbody tr.selection-disabled {
  opacity: 0.58;
}

.assignment-stock-table tbody tr[hidden] {
  display: none;
}

.select-column {
  width: 68px;
  text-align: center !important;
}

.assignment-checkbox-label {
  display: inline-flex;
  cursor: pointer;
}

.assignment-checkbox-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.assignment-checkbox-label span {
  position: relative;
  width: 21px;
  height: 21px;
  border: 2px solid #1475a6;
  border-radius: 6px;
  background: #ffffff;
}

.assignment-checkbox-label input:checked + span {
  border-color: #047857;
  background: #059669;
}

.assignment-checkbox-label input:checked + span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.assignment-checkbox-label input:disabled + span {
  border-color: #8fb6cb;
  background: #dcecf4;
  cursor: not-allowed;
}

.assignment-equipment-name {
  color: #092f49;
  font-weight: 850;
}

.assignment-equipment-id {
  color: #0369a1;
  font-weight: 850;
}

.assignment-warehouse-name {
  color: #17324a;
  font-weight: 750;
}

.assignment-warehouse-id {
  margin-top: 3px;
  color: #256384;
  font-size: 9px;
}

.assignment-no-result {
  padding: 34px 16px;
  background: #f0f9ff;
  color: #0c4a6e;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.assignment-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 16px;
  border-top: 1px solid #b9d5e8;
  background: #e2f2fc;
}

.assignment-selection-summary {
  color: #164e63;
  font-size: 11px;
  font-weight: 700;
}

.assignment-selection-summary b {
  color: #082f49;
}

.assignment-limit-message {
  margin-left: 8px;
  color: #b45309;
  font-weight: 850;
}

.assignment-page-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.assignment-page-button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #397fa6;
  border-radius: 8px;
  background: #ffffff;
  color: #0c4a6e;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.assignment-page-button:hover:not(:disabled) {
  border-color: #075985;
  background: #bae6fd;
}

.assignment-page-button:disabled {
  border-color: #a8c7d9;
  background: #dcecf4;
  color: #69879a;
  cursor: not-allowed;
}

.assignment-page-status {
  min-width: 94px;
  color: #164e63;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.assignment-page-status b {
  color: #082f49;
}

.equipment-assignment-actions {
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 19px;
  border-top: 1px solid #082f49;
  background:
    linear-gradient(
      135deg,
      #082f49,
      #0c4a6e
    );
  box-shadow:
    0 -10px 25px rgba(8, 47, 73, 0.2);
}

.assignment-action-message {
  display: grid;
  gap: 4px;
}

.assignment-action-message strong {
  color: #ffffff;
  font-size: 12px;
}

.assignment-action-message span {
  color: #bae6fd;
  font-size: 10px;
}

.assignment-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 250px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid #a5f3fc;
  border-radius: 11px;
  background:
    linear-gradient(
      135deg,
      #06b6d4,
      #0284c7
    );
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 10px 22px rgba(2, 132, 199, 0.3);
}

.assignment-submit-button:hover:not(:disabled) {
  background:
    linear-gradient(
      135deg,
      #22d3ee,
      #0369a1
    );
}

.assignment-submit-button:disabled {
  border-color: #5e8196;
  background: #315b72;
  color: #9ec1d4;
  box-shadow: none;
  cursor: not-allowed;
}

.assignment-submit-count {
  display: grid;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  background: #ffffff;
  color: #075985;
}

@media (max-width: 760px) {
  .assignment-group-head,
  .assignment-toolbar,
  .assignment-pagination,
  .equipment-assignment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .assignment-limit-badge {
    align-self: flex-start;
  }

  .assignment-search-wrap {
    width: 100%;
  }

  .assignment-result-count {
    white-space: normal;
  }

  .assignment-page-controls {
    justify-content: center;
    flex-wrap: wrap;
  }

  .assignment-submit-button {
    width: 100%;
    min-width: 0;
  }
}

/* ========================================================================
   NOVUS360 / ADMIN — GLOBAL ORYA-INSPIRED DARK THEME
   ------------------------------------------------------------------------
   This block intentionally lives at the END of app.css.
   It converts every shared admin component to one consistent dark system
   without changing HTML structure, Flask/Jinja templates, or JS behavior.
   ======================================================================== */

/* ---------- Dark design tokens ---------- */
:root {
  color-scheme: dark;

  --ink: #09131f;
  --ink2: #0f1d2b;
  --ink3: #17314a;
  --inkline: #22364b;
  --inkmut: #8294a9;

  --paper: #070b12;
  --card: #0d1420;
  --line: #223047;
  --line2: #1b283a;

  --text: #e7edf6;
  --muted: #93a4b8;
  --faint: #718399;

  --teal: #4b8dff;
  --teald: #93c5fd;
  --tealw: rgba(75, 141, 255, .12);

  --blue: #4b8dff;
  --bluew: rgba(75, 141, 255, .12);

  --indigo: #818cf8;
  --indigow: rgba(129, 140, 248, .12);

  --amber: #fbbf24;
  --amberw: rgba(180, 83, 9, .14);

  --violet: #a78bfa;
  --violetw: rgba(139, 92, 246, .13);

  --green: #34d399;
  --greenw: rgba(5, 150, 105, .13);

  --red: #fb7185;
  --redw: rgba(190, 24, 93, .13);

  --slate: #94a3b8;
  --slatew: #152131;

  --radius: 10px;
  --shadow:
    0 1px 0 rgba(255,255,255,.018),
    0 10px 28px rgba(0,0,0,.16);
}

/* ---------- Base ---------- */
html,
body {
  background: #070b12 !important;
  color: var(--text);
}

body {
  font-family: Roboto, Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

.mono,
.tid,
.nav-icon,
.hier .cnt,
.notif .nx,
.technician-profile-card small,
.technician-user-text small,
.field-inline-sub,
.field-arrival-photo small {
  font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace !important;
}

::selection {
  background: rgba(75,141,255,.28);
  color: #fff;
}

/* ---------- Full application shell ---------- */
.app,
.main,
.content,
.technician-app-shell,
.technician-main,
.technician-content {
  background-color: #18263f !important;
}

.main {
  min-height: 100vh;
}

.content {
  color: var(--text);
}

/* ---------- Sidebar ---------- */
.rail {
  background:
    linear-gradient(180deg, #0c1b29 0%, #091724 100%) !important;
  border-right: 1px solid #223047;
  color: #bac8d8;
}

.brand .logo {
  background: linear-gradient(135deg, #4b8dff, #2563eb);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 24px -7px rgba(75,141,255,.8);
}

.brand b {
  font-family: Roboto, Inter, "Segoe UI", sans-serif;
  color: #f8fafc;
}

.brand small,
.navgrp .lbl {
  color: #6f849a;
}

.nav {
  color: #b2c1d1;
}

.nav:hover {
  background: #132538 !important;
  color: #eef4fb !important;
}

.nav.active {
  background: #183d5b !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.12);
}

.nav.active::before {
  background: #4b8dff !important;
}

.nav .ct {
  background: #172638;
  color: #94a7bb;
}

.nav.active .ct {
  background: #4b8dff;
  color: #fff;
}

.railscroll::-webkit-scrollbar-thumb {
  background: #314159;
}

.railfoot {
  border-top-color: #223047;
}

.railfoot .av {
  background: #18314a;
  color: #d6e2ee;
}

/* ---------- Top header ---------- */
.topbar {
  background: rgba(9, 15, 24, .96) !important;
  border-bottom: 1px solid #223047 !important;
  color: #c7d3e1;
  box-shadow:
    0 1px 0 rgba(255,255,255,.015),
    0 8px 24px rgba(0,0,0,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.crumbs {
  color: #7f91a7;
}

.crumbs .c {
  color: #8fa1b7;
}

.crumbs .c:hover {
  color: #93c5fd;
}

.crumbs .sep {
  color: #52657b;
}

.crumbs .cur {
  color: #e8eef7;
}

.search input {
  background: #0d1724 !important;
  border-color: #314159 !important;
  color: #e7edf6 !important;
}

.search input::placeholder {
  color: #66798f;
}

.search input:hover {
  border-color: #40536f !important;
}

.search input:focus {
  border-color: #4b8dff !important;
  box-shadow: 0 0 0 3px rgba(75,141,255,.13) !important;
}

.search svg,
.search-symbol {
  color: #718399 !important;
}

.bell,
.menubtn {
  background: #0d1724 !important;
  border-color: #314159 !important;
  color: #a5b5c7 !important;
}

.bell:hover,
.menubtn:hover {
  background: #142136 !important;
  border-color: #40536f !important;
  color: #e5edf6 !important;
}

.bell .dot {
  border-color: #0d1724 !important;
}

/* ---------- Page heading ---------- */
h1.page,
.technician-pagehead h1,
.technician-job-detail-head h1,
.field-stage-heading h1 {
  font-family: Roboto, Inter, "Segoe UI", system-ui, sans-serif;
  color: #f5f8fc;
}

.pagehead {
  color: var(--text);
}

.pagehead p.sub,
.technician-pagehead p,
.field-stage-heading p {
  color: var(--muted);
}

.phase-tag {
  background: #18283a;
  color: #bcd0e4;
  border: 1px solid #2b4058;
}

/* ---------- Universal buttons ---------- */
.btn {
  border-color: #314159;
  background: #101927;
  color: #c9d5e4;
  box-shadow: none;
}

.btn:hover {
  border-color: #40536f;
  background: #152235;
  color: #f1f5fa;
}

.btn.primary {
  border-color: #4b8dff;
  background:
    linear-gradient(135deg, #4b8dff, #3677e8);
  color: #fff;
  box-shadow: 0 7px 18px rgba(75,141,255,.18);
}

.btn.primary:hover {
  border-color: #69a4ff;
  background:
    linear-gradient(135deg, #60a5fa, #4b8dff);
  color: #fff;
}

.btn.ghost {
  color: #aebed0;
}

.btn.ghost:hover {
  background: #152235;
  color: #f2f6fb;
}

.btn.danger {
  border-color: rgba(251,113,133,.28) !important;
  background: rgba(190,24,93,.10) !important;
  color: #fda4af !important;
}

.btn.danger:hover {
  border-color: rgba(251,113,133,.5) !important;
  background: rgba(190,24,93,.17) !important;
  color: #fecdd3 !important;
}

.btn:disabled,
button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---------- Generic cards ---------- */
.card,
.form-card,
.settings-card,
.reportcard,
.technician-profile-card,
.technician-job-card,
.technician-job-detail-head,
.technician-empty-state,
.field-stepper,
.field-site-summary,
.field-pickup-summary {
  background: #0d1420 !important;
  border-color: #223047 !important;
  color: var(--text);
  box-shadow: var(--shadow);
}

.card .hd,
.form-card > .hd {
  border-bottom-color: #223047;
  background:
    linear-gradient(180deg, #111b29 0%, #0e1723 100%);
}

.card .hd h3,
.form-card > .hd h3 {
  color: #f5f8fc;
}

.card .hd .sub,
.form-card > .hd .sub {
  color: #93a4b8;
}

.card .bd,
.form-card > .bd {
  background: #0d1420;
  color: var(--text);
}

/* ---------- KPI ---------- */
.kpi {
  border-color: #223047;
  background:
    linear-gradient(180deg, #111b29 0%, #0d1420 100%);
  box-shadow: var(--shadow);
}

.kpi .k-lbl {
  color: #93a4b8;
}

.kpi .k-lbl svg {
  color: #69a4ff;
}

.kpi .k-val {
  font-family: Roboto, Inter, "Segoe UI", sans-serif;
  color: #f6f8fc;
}

.kpi .k-val span {
  color: #718399;
}

/* ---------- Pills ---------- */
.st-blue {
  background: rgba(59,130,246,.12);
  color: #93c5fd;
}
.st-indigo {
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
}
.st-amber {
  background: rgba(180,83,9,.14);
  color: #fcd34d;
}
.st-violet {
  background: rgba(139,92,246,.13);
  color: #c4b5fd;
}
.st-green {
  background: rgba(5,150,105,.13);
  color: #6ee7b7;
}
.st-red {
  background: rgba(190,24,93,.13);
  color: #fda4af;
}
.st-slate {
  background: #152131;
  color: #b3c0cf;
}
.st-teal {
  background: rgba(75,141,255,.12);
  color: #93c5fd;
}

/* ---------- Generic tables ---------- */
.tablewrap {
  border-color: #223047 !important;
  background: #0d1420 !important;
  box-shadow: var(--shadow);
}

.tbar {
  border-bottom-color: #223047;
  background:
    linear-gradient(180deg, #111b29 0%, #0e1723 100%);
}

.tbar > b,
.tbar strong {
  color: #f5f8fc;
}

.tbar .rt {
  color: #93a4b8;
}

.tbar .chip {
  border-color: #314159;
  background: #101927;
  color: #9fb0c4;
}

.tbar .chip:hover {
  border-color: #40536f;
  background: #142136;
}

.tbar .chip.on {
  border-color: #4b8dff;
  background: rgba(75,141,255,.14);
  color: #bfdbfe;
}

table {
  background: transparent;
}

thead th {
  border-bottom-color: #314159 !important;
  background: #111b29 !important;
  color: #8296ae !important;
}

tbody td {
  border-bottom-color: #1b283a !important;
  color: #aebdcd;
}

tbody tr {
  background: #0d1420;
}

tbody tr:nth-child(even) {
  background: #101927;
}

tbody tr:hover {
  background: #142136 !important;
}

td .rowmain,
.rowmain {
  color: #eef3fa;
}

td .rowsub,
.rowsub {
  color: #8293a8;
}

.tid {
  color: #69a4ff;
}

/* ---------- Detail pages ---------- */
.detailhead {
  border-color: #223047;
  background:
    linear-gradient(180deg, #111b29 0%, #0d1420 100%);
  box-shadow: var(--shadow);
}

.detailhead .icon {
  background: rgba(75,141,255,.12);
  color: #93c5fd;
  border: 1px solid rgba(75,141,255,.24);
}

.detailhead h2 {
  font-family: Roboto, Inter, "Segoe UI", sans-serif;
  color: #f5f8fc;
}

.detailhead .meta {
  color: #93a4b8;
}

.detailhead .meta b {
  color: #e7edf6;
}

.tabs {
  border-bottom-color: #223047;
}

.tab {
  color: #8496aa;
}

.tab:hover {
  color: #e6edf6;
}

.tab.active {
  color: #93c5fd;
  border-bottom-color: #4b8dff;
}

.dl dt {
  color: #718399;
  border-bottom-color: #1b283a;
}

.dl dd {
  color: #d5dee9;
  border-bottom-color: #1b283a;
}

/* ---------- Common form containers ---------- */
.form-card {
  max-width: 940px;
}

.form-grid label,
.upload-field,
.inline-form label,
.field-location-form label,
.field-verification-form label {
  color: #93a4b8;
}

.form-grid label > span,
.upload-field > span,
.inline-form label > span,
.field-location-form label > span,
.field-verification-form label > span {
  color: #8293a8 !important;
}

/* All common admin inputs */
.form-grid input,
.form-grid select,
.form-grid textarea,
.filterbar input,
.filterbar select,
.inline-form input,
.inline-form select,
.inline-form textarea,
.upload-field input,
.upload-field select,
.upload-field textarea,
.settings-card input,
.settings-card select,
.settings-card textarea,
.field-location-form input,
.field-location-form select,
.field-location-form textarea,
.field-verification-form input,
.field-verification-form select,
.field-verification-form textarea,
.assignment-search-input,
.searchable-select-input {
  border-color: #314159 !important;
  background: #0d1724 !important;
  color: #e7edf6 !important;
  color-scheme: dark;
}

.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover,
.filterbar input:hover,
.filterbar select:hover,
.inline-form input:hover,
.inline-form select:hover,
.inline-form textarea:hover,
.upload-field input:hover,
.upload-field select:hover,
.upload-field textarea:hover,
.settings-card input:hover,
.settings-card select:hover,
.settings-card textarea:hover,
.field-location-form input:hover,
.field-location-form select:hover,
.field-location-form textarea:hover,
.field-verification-form input:hover,
.field-verification-form select:hover,
.field-verification-form textarea:hover,
.assignment-search-input:hover,
.searchable-select-input:hover {
  border-color: #40536f !important;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.filterbar input:focus,
.filterbar select:focus,
.inline-form input:focus,
.inline-form select:focus,
.inline-form textarea:focus,
.upload-field input:focus,
.upload-field select:focus,
.upload-field textarea:focus,
.settings-card input:focus,
.settings-card select:focus,
.settings-card textarea:focus,
.field-location-form input:focus,
.field-location-form select:focus,
.field-location-form textarea:focus,
.field-verification-form input:focus,
.field-verification-form select:focus,
.field-verification-form textarea:focus,
.assignment-search-input:focus,
.searchable-select-input:focus,
.searchable-select.is-open .searchable-select-input {
  outline: none !important;
  border-color: #4b8dff !important;
  box-shadow: 0 0 0 3px rgba(75,141,255,.13) !important;
}

input::placeholder,
textarea::placeholder {
  color: #65788f !important;
}

select option,
select optgroup {
  background: #0d1724;
  color: #e7edf6;
}

/* Native browser date/time widgets */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  color-scheme: dark;
}

/* Disabled admin controls */
.form-grid input:disabled,
.form-grid select:disabled,
.form-grid textarea:disabled,
.inline-form input:disabled,
.inline-form select:disabled,
.upload-field input:disabled,
.settings-card input:disabled,
.settings-card select:disabled,
.settings-card textarea:disabled {
  border-color: #263347 !important;
  background: #111923 !important;
  color: #627285 !important;
  cursor: not-allowed;
}

/* Autofill — prevent Chrome white background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #e7edf6 !important;
  -webkit-box-shadow: 0 0 0 1000px #0d1724 inset !important;
  caret-color: #e7edf6;
  transition: background-color 9999s ease-out 0s;
}

/* File input button */
input[type="file"] {
  color: #93a4b8 !important;
}

input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 1px solid #314159;
  border-radius: 7px;
  padding: 7px 10px;
  background: #152235;
  color: #d8e2ed;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  border-color: #4b8dff;
  background: rgba(75,141,255,.14);
  color: #bfdbfe;
}

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #4b8dff;
}

/* ---------- Form action bars ---------- */
.form-actions,
.standalone-actions {
  border-top-color: #223047 !important;
  background: #0f1825 !important;
}

[data-work-order-form] .standalone-actions {
  border-color: #223047 !important;
  background: rgba(9, 15, 24, .94) !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,.18) !important;
}

/* ---------- Generic filter/list rows ---------- */
.summary-row,
.list-row,
.setting-row {
  border-bottom-color: #1b283a;
}

.list-row {
  color: #d4deea;
}

.list-row:hover,
.hier .hnode:hover {
  background: #142136;
}

.list-row small,
.setting-row small {
  color: #718399;
}

/* ---------- Settings ---------- */
.settings-card {
  background: #0d1420 !important;
}

.setting-row {
  color: #d9e3ed;
}

.setting-row input[type="checkbox"] {
  accent-color: #4b8dff;
}

/* ---------- Alerts / notes ---------- */
.note {
  border-color: rgba(96,165,250,.22);
  background: rgba(59,130,246,.09);
  color: #b8d7ff;
}

.warnnote {
  border-color: rgba(245,158,11,.26);
  background: rgba(180,83,9,.12);
  color: #fcd34d;
}

.flash {
  border-color: #223047;
  background: #101927;
  color: #c7d2df;
  box-shadow: var(--shadow);
}

.flash-success {
  border-color: rgba(52,211,153,.24);
  background: rgba(5,150,105,.12);
  color: #6ee7b7;
}

.flash-error {
  border-color: rgba(251,113,133,.24);
  background: rgba(190,24,93,.12);
  color: #fda4af;
}

.flash-warning {
  border-color: rgba(245,158,11,.24);
  background: rgba(180,83,9,.12);
  color: #fcd34d;
}

.tag {
  border: 1px solid #2b3b52;
  background: #152131;
  color: #b3c0cf;
}

/* ---------- Searchable selects ---------- */
.searchable-select::after {
  border-right-color: #8293a8;
  border-bottom-color: #8293a8;
}

.searchable-select-menu {
  border-color: #314159;
  background: #101927;
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
}

.searchable-select-option {
  color: #c7d2df;
}

.searchable-select-option:hover,
.searchable-select-option.is-active {
  background: rgba(75,141,255,.13);
  color: #bfdbfe;
}

.searchable-select-option.is-selected {
  color: #e8f1ff;
}

.searchable-select-empty {
  color: #718399;
}

/* ---------- Upload ---------- */
.uploadzone {
  border-color: #314159;
  background: #0f1825;
  color: #93a4b8;
}

.uploadzone:hover {
  border-color: #4b8dff;
  background: rgba(75,141,255,.06);
}

.uploadzone svg {
  color: #718399;
}

/* ---------- Reports / notifications ---------- */
.reportcard {
  background: #0d1420 !important;
  border-color: #223047;
}

.reportcard .ri {
  background: rgba(190,24,93,.12);
  color: #fda4af;
}

.reportcard.xls .ri {
  background: rgba(5,150,105,.12);
  color: #6ee7b7;
}

.notif {
  border-bottom-color: #1b283a;
}

.notif .nt {
  color: #e7edf6;
}

.notif .nm {
  color: #93a4b8;
}

.notif .nx {
  color: #718399;
}

.toggle {
  background: #4b8dff;
}

.toggle.off {
  background: #314159;
}

/* ---------- Hierarchy / job cards ---------- */
.tech-col,
.jcard {
  border-color: #223047;
  background: #101927;
}

.jcard .jm {
  color: #718399;
}

/* ---------- Lifecycle / timeline ---------- */
.lc .dot {
  border-color: #314159;
  background: #101927;
  color: #8293a8;
}

.lc.done .dot {
  border-color: #4b8dff;
  background: #4b8dff;
  color: #fff;
}

.lc.cur .dot {
  border-color: #4b8dff;
  background: #0d1420;
  color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(75,141,255,.12);
}

.lc .bar,
.timeline::before {
  background: #27364a;
}

.lc.done .bar {
  background: #4b8dff;
}

.tev .tdot {
  background: #0d1420;
  border-color: #4b8dff;
}

.tev .tdot i {
  background: #60a5fa;
}

.tev .tbox {
  border-color: #223047;
  background: #101927;
  color: #93a4b8;
}

.tev .tbox b {
  color: #e7edf6;
}

/* ---------- Checklist ---------- */
.check li {
  border-bottom-color: #1b283a;
}

.check .cbox.no {
  border-color: #314159;
  background: #101927;
}

/* ---------- Progress ---------- */
.prog {
  background: #1b293a;
}

.prog i {
  background: #4b8dff;
}

/* ---------- Generic map mock ---------- */
.map {
  border-color: #223047;
  background:
    radial-gradient(circle at 30% 40%, rgba(75,141,255,.055), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(96,165,250,.04), transparent 40%),
    linear-gradient(#0f1825, #0b121c);
}

.map::before {
  background-image:
    linear-gradient(#1b283a 1px, transparent 1px),
    linear-gradient(90deg, #1b283a 1px, transparent 1px);
}

/* ---------- Work Order form special controls in app.css ---------- */
[data-work-order-form] .form-card {
  border-color: #223047 !important;
  background: #0d1420 !important;
  box-shadow: var(--shadow) !important;
}

[data-work-order-form] .form-card .hd {
  background:
    linear-gradient(180deg, #111b29 0%, #0e1723 100%) !important;
  border-bottom-color: #223047 !important;
}

[data-work-order-form] .form-card .hd h3 {
  font-family: Roboto, Inter, "Segoe UI", sans-serif;
  color: #f5f8fc;
}

[data-work-order-form] .form-card .hd .sub {
  color: #93a4b8;
}

[data-work-order-form] .form-grid label > span {
  color: #8293a8;
}

[data-work-order-form] .form-grid input,
[data-work-order-form] .form-grid select,
[data-work-order-form] .requirement-row input {
  border-color: #314159;
  background: #0d1724;
  color: #e7edf6;
}

[data-work-order-form] .detail-preview {
  border-color: #314159;
  background: #0f1825;
}

[data-work-order-form] .detail-preview.is-populated {
  border-color: rgba(75,141,255,.32);
  background: rgba(75,141,255,.055);
  box-shadow: inset 0 0 0 1px rgba(75,141,255,.025);
}

[data-work-order-form] .detail-preview > div {
  border-color: #223047;
  background: #101927;
}

[data-work-order-form] .detail-preview span {
  color: #718399;
}

[data-work-order-form] .detail-preview b {
  color: #e7edf6;
}

[data-work-order-form] .requirement-head {
  color: #8293a8;
}

[data-work-order-form] .requirement-row {
  border-color: #223047;
  background: #101927;
}

[data-work-order-form] .requirement-row:focus-within {
  border-color: rgba(75,141,255,.40);
  background: #121f30;
  box-shadow: 0 5px 18px rgba(0,0,0,.15);
}

[data-work-order-form] .field-help {
  background: #101927;
  color: #8293a8;
}

[data-work-order-form] .btn[data-add-equipment-row] {
  border-color: rgba(75,141,255,.30);
  background: rgba(75,141,255,.11);
  color: #93c5fd;
}

[data-work-order-form] .btn[data-add-equipment-row]:hover {
  background: rgba(75,141,255,.18);
}

/* ---------- Assignment groups / stock selection ---------- */
.assignment-total {
  border-color: #314159;
  background: #101927;
  color: #cbd7e5;
}

.assignment-group,
.equipment-assignment-section {
  border-color: #223047 !important;
  background: #0d1420 !important;
  box-shadow: var(--shadow);
}

.assignment-group-head,
.assignment-main-header {
  border-bottom-color: #26364e !important;
  background:
    linear-gradient(135deg, #111b29, #132033) !important;
}

.assignment-group-title,
.assignment-main-header h3 {
  color: #f5f8fc !important;
}

.assignment-group-summary,
.assignment-main-header .sub {
  color: #93a4b8 !important;
}

.assignment-group-summary b {
  color: #e7edf6;
}

.assignment-limit-badge {
  border-color: rgba(75,141,255,.28);
  background: rgba(75,141,255,.11);
  color: #bfdbfe;
}

.assignment-toolbar,
.assignment-pagination {
  border-color: #223047;
  background: #101927;
}

.assignment-search-wrap svg {
  color: #718399;
}

.assignment-result-count,
.assignment-selection-summary,
.assignment-page-status {
  color: #93a4b8;
}

.assignment-result-count b,
.assignment-selection-summary b,
.assignment-page-status b {
  color: #e7edf6;
}

.assignment-stock-table thead th {
  border-right-color: #2b3b52;
  border-bottom-color: #314159;
  background: #111b29;
  color: #8296ae;
}

.assignment-stock-table tbody td {
  border-bottom-color: #1b283a;
  color: #b6c4d3;
}

.assignment-stock-table tbody tr:nth-child(odd) {
  background: #0d1420;
}

.assignment-stock-table tbody tr:nth-child(even) {
  background: #101927;
}

.assignment-stock-table tbody tr:hover {
  background: #142136;
}

.assignment-stock-table tbody tr.is-selected {
  background: rgba(5,150,105,.11);
}

.assignment-checkbox-label span {
  border-color: #4b8dff;
  background: #0d1724;
}

.assignment-checkbox-label input:checked + span {
  border-color: #34d399;
  background: #059669;
}

.assignment-checkbox-label input:disabled + span {
  border-color: #314159;
  background: #172131;
}

.assignment-equipment-name,
.assignment-warehouse-name {
  color: #edf3fa;
}

.assignment-equipment-id {
  color: #69a4ff;
}

.assignment-warehouse-id {
  color: #8293a8;
}

.assignment-no-result {
  background: #0f1825;
  color: #93a4b8;
}

.assignment-page-button {
  border-color: #314159;
  background: #101927;
  color: #c9d5e4;
}

.assignment-page-button:hover:not(:disabled) {
  border-color: #4b8dff;
  background: rgba(75,141,255,.12);
  color: #93c5fd;
}

.assignment-page-button:disabled {
  border-color: #222f40;
  background: #111923;
  color: #556578;
}

.equipment-assignment-actions {
  border-top-color: #26364e;
  background:
    linear-gradient(135deg, #111b29, #0e1723);
  box-shadow: 0 -10px 25px rgba(0,0,0,.20);
}

.assignment-action-message strong {
  color: #f5f8fc;
}

.assignment-action-message span {
  color: #93a4b8;
}

.assignment-submit-button {
  border-color: #4b8dff;
  background:
    linear-gradient(135deg, #4b8dff, #3677e8);
  color: #fff;
  box-shadow: 0 9px 22px rgba(75,141,255,.20);
}

.assignment-submit-button:hover:not(:disabled) {
  background:
    linear-gradient(135deg, #60a5fa, #4b8dff);
}

.assignment-submit-button:disabled {
  border-color: #2f4054;
  background: #253548;
  color: #718399;
}

.assignment-submit-count {
  background: #e8f1ff;
  color: #2563eb;
}

/* Earlier stock-choice implementation */
.assignment-group {
  border-color: #223047;
  background: #0d1420;
}

.assignment-group-head {
  border-bottom-color: #223047;
  background: #111b29;
}

.assignment-search input {
  border-color: #314159;
  background: #0d1724;
  color: #e7edf6;
}

.stock-choice {
  border-color: #223047;
  background: #101927;
}

.stock-choice:hover,
.stock-choice:has(input:checked) {
  border-color: #4b8dff;
  background: rgba(75,141,255,.10);
}

.stock-choice-title {
  color: #e7edf6;
}

.stock-choice-id {
  color: #69a4ff;
}

.stock-choice-meta {
  color: #93a4b8;
}

.stock-choice-warehouse {
  border-top-color: #1b283a;
  color: #718399;
}

.assignment-group-foot {
  border-top-color: #223047;
  background: #0f1825;
  color: #93a4b8;
}

/* ---------- Technician admin/field UI ---------- */
.technician-profile-card,
.technician-job-card,
.technician-job-detail-head,
.technician-empty-state {
  background: #0d1420 !important;
  border-color: #223047 !important;
}

.technician-profile-card span,
.technician-job-label {
  color: #718399;
}

.technician-profile-card small,
.technician-eyebrow,
.technician-user-text small {
  color: #93c5fd;
}

.technician-job-summary {
  border-top-color: #1b283a;
  border-left-color: #1b283a;
}

.technician-job-summary div {
  border-right-color: #1b283a;
  border-bottom-color: #1b283a;
}

.technician-job-summary dt {
  color: #718399;
}

.technician-job-location {
  background: rgba(75,141,255,.09);
}

.technician-job-location span {
  color: #93c5fd;
}

.technician-mobile-bar {
  background: #091018 !important;
  border-bottom-color: #223047 !important;
}

.technician-sidebar-overlay {
  background: rgba(0,0,0,.62);
}

/* ---------- Field workflow ---------- */
.field-info-banner {
  border-color: rgba(75,141,255,.26);
  background: rgba(75,141,255,.10);
  color: #b8d7ff;
}

.field-success-banner {
  border-color: rgba(52,211,153,.25);
  background: rgba(5,150,105,.12);
  color: #6ee7b7;
}

.field-status-warning {
  border-color: rgba(245,158,11,.26);
  background: rgba(180,83,9,.12);
  color: #fcd34d;
}

.field-stepper,
.field-site-summary,
.field-pickup-summary {
  border-color: #223047;
  background: #0d1420 !important;
}

.field-stepper > i {
  border-top-color: #405066;
}

.field-step > span {
  border-color: #314159;
  background: #101927;
  color: #a8b7c7;
}

.field-step small,
.field-site-summary > div > span,
.field-pickup-summary span,
.field-site-summary dt,
.field-custody-preview span {
  color: #718399;
}

.field-step.is-current > span {
  border-color: #4b8dff;
  background: #4b8dff;
}

.field-step.is-current small {
  color: #93c5fd;
}

.field-step.is-complete > span {
  border-color: #34d399;
  background: #059669;
}

.field-site-symbol,
.field-next-number {
  background: rgba(75,141,255,.12);
  color: #93c5fd;
}

.field-site-summary h2 {
  font-family: Roboto, Inter, "Segoe UI", sans-serif;
  color: #edf3fa;
}

.field-site-summary > div > small,
.field-pickup-summary small,
.field-custody-preview small {
  color: #93c5fd;
}

.field-site-summary dl > div,
.field-pickup-summary > div {
  border-left-color: #1b283a;
}

.field-document {
  border-color: #223047;
  background: #101927;
}

.field-document:hover {
  border-color: #4b8dff;
  background: #142136;
}

.field-document span {
  color: #69a4ff;
}

.field-document small,
.field-readiness p,
.field-next-step p {
  color: #718399;
}

.field-readiness-item span {
  background: rgba(5,150,105,.12);
  color: #6ee7b7;
}

.field-verification-editor td {
  background: #101927 !important;
}

.field-stat-list > div {
  border-bottom-color: #1b283a;
}

.field-stat-list dt {
  color: #93a4b8;
}

.field-arrival-photo,
.field-evidence-card {
  border-color: #223047;
  background: #101927 !important;
}

.field-evidence-card:hover {
  border-color: #4b8dff;
}

.field-arrival-photo input {
  background: #0d1724 !important;
}

.field-evidence-card img {
  background: #1b283a;
}

/* ---------- Mobile-app preview components ---------- */
.screen {
  background: #070b12;
}

.mnav {
  border-top-color: #223047;
  background: #0d1420;
}

.mcard {
  border-color: #223047;
  background: #0d1420;
  color: #e7edf6;
}

.mcard .mrow {
  border-bottom-color: #1b283a;
}

.mbtn {
  background: #4b8dff;
}

.mbtn.alt {
  border-color: #314159;
  background: #101927;
  color: #d4deea;
}

.stepnav button {
  border-color: #314159;
  background: #101927;
  color: #93a4b8;
}

.stepnav button.on {
  border-color: #4b8dff;
  background: rgba(75,141,255,.14);
  color: #bfdbfe;
}

/* ---------- Global scrollbar ---------- */
html,
body,
.main,
.content,
.tablewrap,
.technician-table-scroll,
.assignment-table-wrap,
.searchable-select-menu {
  scrollbar-color: #314159 #070b12;
  scrollbar-width: thin;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.main::-webkit-scrollbar,
.content::-webkit-scrollbar,
.tablewrap::-webkit-scrollbar,
.technician-table-scroll::-webkit-scrollbar,
.assignment-table-wrap::-webkit-scrollbar,
.searchable-select-menu::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.tablewrap::-webkit-scrollbar-track,
.technician-table-scroll::-webkit-scrollbar-track,
.assignment-table-wrap::-webkit-scrollbar-track,
.searchable-select-menu::-webkit-scrollbar-track {
  background: #070b12;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.tablewrap::-webkit-scrollbar-thumb,
.technician-table-scroll::-webkit-scrollbar-thumb,
.assignment-table-wrap::-webkit-scrollbar-thumb,
.searchable-select-menu::-webkit-scrollbar-thumb {
  border: 2px solid #070b12;
  border-radius: 999px;
  background: #314159;
}

/* ---------- Responsive dark shell ---------- */
@media (max-width: 900px) {
  .content {
    background: #070b12 !important;
  }

  .pagehead .actions .btn {
    justify-content: center;
  }
}

@media (max-width: 820px) {
  .topbar {
    background: #091018 !important;
  }

  .rail {
    box-shadow: 12px 0 34px rgba(0,0,0,.35);
  }
}

/* ========================================================================
   ORYA SHELL COLOR MATCH — BACKGROUND + LEFT SIDEBAR
   Keep this at the very end of app.css
   ======================================================================== */

:root {
  --orya-app-bg: #0b0f14;
  --orya-sidebar-bg: #111820;
  --orya-sidebar-bg-deep: #0d141b;
  --orya-sidebar-border: #202a35;
  --orya-sidebar-hover: #19232e;
  --orya-sidebar-active: #20384e;
}

html,
body,
.app,
.main,
.content,
.main-content,
.page-content,
.content-wrapper,
.app-content,
.technician-app-shell,
.technician-main,
.technician-content {
  background: var(--orya-app-bg) !important;
}

.rail,
.technician-rail {
  background:
    linear-gradient(
      180deg,
      var(--orya-sidebar-bg) 0%,
      var(--orya-sidebar-bg-deep) 100%
    ) !important;
  border-right: 1px solid var(--orya-sidebar-border) !important;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.012);
}

.navgrp .lbl {
  color: #718196 !important;
}

.nav {
  color: #aebdcd !important;
}

.nav:hover {
  background: var(--orya-sidebar-hover) !important;
  color: #eef4fb !important;
}

.nav.active {
  background: var(--orya-sidebar-active) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(96,165,250,.10) !important;
}

.nav.active::before {
  background: #4b8dff !important;
}

.railfoot {
  border-top-color: var(--orya-sidebar-border) !important;
  background: transparent !important;
}

.railfoot .av {
  background: #223244 !important;
}

.railscroll {
  scrollbar-color: #334253 transparent;
}

.railscroll::-webkit-scrollbar-track {
  background: transparent;
}

.railscroll::-webkit-scrollbar-thumb {
  background: #334253 !important;
}

.section-gap,
.top-gap {
  background-color: transparent !important;
}

@media (max-width: 820px) {
  .main,
  .content,
  .technician-main,
  .technician-content {
    background: var(--orya-app-bg) !important;
  }

  .rail,
  .technician-rail {
    background:
      linear-gradient(
        180deg,
        var(--orya-sidebar-bg) 0%,
        var(--orya-sidebar-bg-deep) 100%
      ) !important;
  }
}

/* ========================================================================
   ORYA BALANCED DARK — LIGHTER VERSION
   Appended after all existing dark-theme rules.
   ======================================================================== */

:root {
  --orya-app-bg: #121922;
  --orya-sidebar-bg: #172635;
  --orya-sidebar-bg-deep: #13212e;
  --orya-sidebar-border: #2a3a4a;
  --orya-sidebar-hover: #1d3041;
  --orya-sidebar-active: #244966;

  --paper: #121922;
  --card: #18222e;
  --line: #2b3a4b;
  --line2: #223141;

  --text: #e9eef5;
  --muted: #a2b0c0;
  --faint: #7f90a4;

  --ink: #172635;
  --ink2: #1d3041;
  --ink3: #244966;
  --inkline: #2a3a4a;
  --inkmut: #8496aa;

  --teal: #4f91f3;
  --teald: #9bc5ff;
  --tealw: rgba(79, 145, 243, .13);

  --shadow:
    0 1px 0 rgba(255,255,255,.022),
    0 8px 22px rgba(0,0,0,.13);
}

/* Main canvas */
html,
body,
.app,
.main,
.content,
.main-content,
.page-content,
.content-wrapper,
.app-content,
.technician-app-shell,
.technician-main,
.technician-content {
  background: #121922 !important;
}

/* Sidebar */
.rail,
.technician-rail {
  background:
    linear-gradient(
      180deg,
      #172635 0%,
      #13212e 100%
    ) !important;
  border-right-color: #2a3a4a !important;
}

.navgrp .lbl {
  color: #8092a8 !important;
}

.nav {
  color: #bdc8d5 !important;
}

.nav:hover {
  background: #1d3041 !important;
  color: #f2f6fa !important;
}

.nav.active {
  background: #244966 !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(116,176,255,.13) !important;
}

.nav.active::before {
  background: #5b9cff !important;
}

.railfoot {
  border-top-color: #2a3a4a !important;
}

.railfoot .av {
  background: #2a4056 !important;
}

/* Header */
.topbar {
  background: rgba(20, 29, 39, .97) !important;
  border-bottom-color: #2a3a4a !important;
}

.crumbs {
  color: #93a3b5 !important;
}

.crumbs .c {
  color: #a1b0bf !important;
}

.crumbs .cur {
  color: #eef3f8 !important;
}

/* Search / notification */
.search input,
.bell,
.menubtn {
  background: #182430 !important;
  border-color: #324457 !important;
}

.search input {
  color: #edf2f7 !important;
}

.search input:hover,
.bell:hover,
.menubtn:hover {
  border-color: #435b72 !important;
  background: #1d2d3b !important;
}

/* Cards */
.card,
.form-card,
.settings-card,
.reportcard,
.technician-profile-card,
.technician-job-card,
.technician-job-detail-head,
.technician-empty-state,
.field-stepper,
.field-site-summary,
.field-pickup-summary,
.detailhead,
.tablewrap,
.assignment-group,
.equipment-assignment-section {
  background: #18222e !important;
  border-color: #2b3a4b !important;
}

.card .hd,
.form-card > .hd,
.tbar,
.assignment-group-head,
.assignment-main-header {
  background:
    linear-gradient(
      180deg,
      #1d2936 0%,
      #19232f 100%
    ) !important;
  border-bottom-color: #2b3a4b !important;
}

.card .bd,
.form-card > .bd {
  background: #18222e !important;
}

/* KPI */
.kpi {
  background:
    linear-gradient(
      180deg,
      #1d2936 0%,
      #18222e 100%
    ) !important;
  border-color: #2b3a4b !important;
}

/* Tables */
thead th {
  background: #1d2936 !important;
  color: #91a5ba !important;
  border-bottom-color: #36495d !important;
}

tbody tr {
  background: #18222e !important;
}

tbody tr:nth-child(even) {
  background: #1b2734 !important;
}

tbody tr:hover {
  background: #223447 !important;
}

tbody td {
  border-bottom-color: #263646 !important;
  color: #bac6d3;
}

.rowmain,
td .rowmain {
  color: #f0f4f8;
}

/* Forms */
.form-grid input,
.form-grid select,
.form-grid textarea,
.filterbar input,
.filterbar select,
.inline-form input,
.inline-form select,
.inline-form textarea,
.upload-field input,
.upload-field select,
.upload-field textarea,
.settings-card input,
.settings-card select,
.settings-card textarea,
.field-location-form input,
.field-location-form select,
.field-location-form textarea,
.field-verification-form input,
.field-verification-form select,
.field-verification-form textarea,
.assignment-search-input,
.searchable-select-input,
.assignment-search input,
[data-work-order-form] .form-grid input,
[data-work-order-form] .form-grid select,
[data-work-order-form] .requirement-row input {
  background: #17232f !important;
  border-color: #35485c !important;
  color: #edf2f7 !important;
}

.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover,
.filterbar input:hover,
.filterbar select:hover,
.inline-form input:hover,
.inline-form select:hover,
.inline-form textarea:hover,
.upload-field input:hover,
.upload-field select:hover,
.upload-field textarea:hover,
.settings-card input:hover,
.settings-card select:hover,
.settings-card textarea:hover,
.field-location-form input:hover,
.field-location-form select:hover,
.field-location-form textarea:hover,
.field-verification-form input:hover,
.field-verification-form select:hover,
.field-verification-form textarea:hover,
.assignment-search-input:hover,
.searchable-select-input:hover {
  border-color: #49637c !important;
}

/* Dropdowns */
.searchable-select-menu {
  background: #1a2633 !important;
  border-color: #35485c !important;
}

.searchable-select-option {
  color: #d1dae4 !important;
}

.searchable-select-option:hover,
.searchable-select-option.is-active {
  background: rgba(79,145,243,.15) !important;
  color: #c9e0ff !important;
}

/* Notes and action areas */
.form-actions,
.standalone-actions,
.assignment-toolbar,
.assignment-pagination,
.assignment-group-foot {
  background: #17232f !important;
  border-color: #2b3a4b !important;
}

.note {
  background: rgba(79,145,243,.10) !important;
}

.warnnote {
  background: rgba(180,83,9,.13) !important;
}

/* Upload / misc panels */
.uploadzone,
.tech-col,
.jcard,
.field-document,
[data-work-order-form] .detail-preview > div,
[data-work-order-form] .requirement-row,
.stock-choice {
  background: #1b2734 !important;
  border-color: #2b3a4b !important;
}

/* Timeline / progress support */
.tev .tbox,
.assignment-total {
  background: #1b2734 !important;
  border-color: #2b3a4b !important;
}

.prog,
.site-progress-track {
  background: #283848 !important;
}

/* Slightly softer global scrollbar */
html,
body,
.main,
.content,
.tablewrap,
.technician-table-scroll,
.assignment-table-wrap,
.searchable-select-menu {
  scrollbar-color: #425569 #121922;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.tablewrap::-webkit-scrollbar-track,
.technician-table-scroll::-webkit-scrollbar-track,
.assignment-table-wrap::-webkit-scrollbar-track,
.searchable-select-menu::-webkit-scrollbar-track {
  background: #121922 !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.tablewrap::-webkit-scrollbar-thumb,
.technician-table-scroll::-webkit-scrollbar-thumb,
.assignment-table-wrap::-webkit-scrollbar-thumb,
.searchable-select-menu::-webkit-scrollbar-thumb {
  border-color: #121922 !important;
  background: #425569 !important;
}

.rail .brand.brand-image {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 108px;

  padding: 13px 14px 15px;
  margin: 0;

  text-decoration: none;

  border-bottom: 1px solid #2a3a4a;
  background: transparent;
}

/* Actual Novus360 logo */
.rail .sidebar-brand-logo {
  display: block;

  width: 120%;
  max-width: 220px;
  height: auto;
  max-height: 82px;

  object-fit: contain;
  object-position: center;

  margin: 0 auto;
}

/* Prevent old brand styles affecting image logo */
.rail .brand.brand-image b,
.rail .brand.brand-image small,
.rail .brand.brand-image .logo {
  display: none;
}

/* Small hover polish */
.rail .brand.brand-image {
  transition: background .15s ease;
}

.rail .brand.brand-image:hover {
  background: rgba(255,255,255,.018);
}

/* Tablet/mobile sidebar */
@media (max-width: 820px) {
  .rail .brand.brand-image {
    min-height: 96px;
    padding: 11px 14px 13px;
  }

  .rail .sidebar-brand-logo {
    max-width: 185px;
    max-height: 72px;
  }
}
































































































































/* TEST TECHNICIAN


/* ========================================================================
   TECHNICIAN PORTAL — ADMIN VISUAL PARITY
   ------------------------------------------------------------------------
   Final scoped layer for every technician page. This intentionally stays at
   the end of app.css so older page-level light-theme rules cannot override
   the shared Novus360 dark system.
   ======================================================================== */

.technician-app-shell {
  --tech-canvas: #121922;
  --tech-surface: #18222e;
  --tech-surface-raised: #1d2936;
  --tech-surface-soft: #1b2734;
  --tech-input: #17232f;
  --tech-border: #2b3a4b;
  --tech-border-strong: #35485c;
  --tech-text: #e9eef5;
  --tech-muted: #a2b0c0;
  --tech-faint: #7f90a4;
  --tech-accent: #4f91f3;
  --tech-accent-soft: rgba(79,145,243,.13);
  color-scheme: dark;
  background: var(--tech-canvas) !important;
  color: var(--tech-text);
}

.technician-app-shell .technician-main,
.technician-app-shell .technician-content,
.technician-app-shell .field-stage-page,
.technician-app-shell .stage-page,
.technician-app-shell .stage7-page,
.technician-app-shell .closeout-page,
.technician-app-shell .jobs-page,
.technician-app-shell .tech-dashboard {
  background: transparent !important;
  color: var(--tech-text) !important;
}

/* Match the admin sidebar brand and navigation. */
.technician-app-shell .technician-rail {
  background: linear-gradient(180deg,#172635 0%,#13212e 100%) !important;
  border-right: 1px solid #2a3a4a !important;
}

.technician-app-shell .brand.brand-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 108px;
  padding: 13px 14px 15px;
  border-bottom: 1px solid #2a3a4a;
  text-decoration: none;
}

.technician-app-shell .sidebar-brand-logo {
  display: block;
  width: 120%;
  max-width: 220px;
  max-height: 82px;
  height: auto;
  object-fit: contain;
}

.technician-app-shell .technician-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 42px;
  padding: 10px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(20,29,39,.97) !important;
  border-bottom: 1px solid #2a3a4a;
  box-shadow: 0 1px 0 rgba(255,255,255,.015),0 8px 24px rgba(0,0,0,.12);
}

.technician-app-shell .technician-topbar .technician-topbar-label {
  margin-left: auto;
  color: #8092a8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Page headings. */
.technician-app-shell :is(
  .tech-dashboard-heading,
  .jobs-heading,
  .field-stage-heading,
  .stage-heading,
  .stage7-heading,
  .closeout-heading,
  .technician-pagehead,
  .technician-job-detail-head
) {
  color: var(--tech-text) !important;
}

.technician-app-shell :is(
  .tech-dashboard-heading,
  .jobs-heading,
  .field-stage-heading,
  .stage-heading,
  .stage7-heading,
  .closeout-heading,
  .technician-pagehead,
  .technician-job-detail-head
) h1 {
  color: #f5f8fc !important;
  font-family: Roboto, Inter, "Segoe UI", system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: -.015em;
}

.technician-app-shell :is(
  .tech-dashboard-heading,
  .jobs-heading,
  .field-stage-heading,
  .stage-heading,
  .stage7-heading,
  .closeout-heading,
  .technician-pagehead,
  .technician-job-detail-head
) p,
.technician-app-shell :is(
  .tech-dashboard-user,
  .jobs-user,
  .stage7-user,
  .closeout-user,
  .technician-user-text
) small {
  color: var(--tech-muted) !important;
}

.technician-app-shell .technician-eyebrow,
.technician-app-shell .eyebrow {
  color: #79afff !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Every card/panel uses the admin surface system. */
.technician-app-shell :is(
  .card,
  .tablewrap,
  .tech-dashboard-stat,
  .tech-dashboard-card,
  .jobs-wrap,
  .jobs-card,
  .summary-card,
  .panel,
  .field-stepper,
  .field-site-summary,
  .field-pickup-summary,
  .field-custody-preview,
  .field-arrival-photo,
  .field-evidence-card,
  .equipment-card,
  .stage7-card,
  .stage7-panel,
  .stage7-section,
  .closeout-card,
  .closeout-panel,
  .closeout-summary,
  .closeout-validation,
  .closeout-report,
  .technician-profile-card,
  .technician-job-card,
  .technician-job-detail-head,
  .technician-empty-state
) {
  background: var(--tech-surface) !important;
  border-color: var(--tech-border) !important;
  color: var(--tech-text) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.02),0 8px 22px rgba(0,0,0,.13) !important;
}

.technician-app-shell :is(
  .card .hd,
  .tablewrap .tbar,
  .tech-dashboard-card-header,
  .jobs-card-hd,
  .panel-hd,
  .stage7-panel-hd,
  .closeout-panel-hd
) {
  background: linear-gradient(180deg,#1d2936 0%,#19232f 100%) !important;
  border-color: var(--tech-border) !important;
  color: #f5f8fc !important;
}

.technician-app-shell :is(
  .card .bd,
  .panel-bd,
  .stage7-panel-bd,
  .closeout-panel-bd
) {
  background: var(--tech-surface) !important;
  color: var(--tech-text) !important;
}

.technician-app-shell :is(
  .tech-dashboard-card-header,
  .jobs-card-hd,
  .panel-hd,
  .stage7-panel-hd,
  .closeout-panel-hd,
  .card .hd
) h2,
.technician-app-shell :is(
  .tech-dashboard-card-header,
  .jobs-card-hd,
  .panel-hd,
  .stage7-panel-hd,
  .closeout-panel-hd,
  .card .hd
) h3 {
  color: #f5f8fc !important;
}

/* Dashboard parity. */
.technician-app-shell .tech-dashboard-stat {
  background: linear-gradient(180deg,#1d2936 0%,#18222e 100%) !important;
}

.technician-app-shell .tech-dashboard-stat span {
  color: #91a5ba !important;
}

.technician-app-shell .tech-dashboard-stat b {
  color: #f5f8fc !important;
}

.technician-app-shell .tech-dashboard-stat small,
.technician-app-shell .tech-dashboard-site small,
.technician-app-shell .tech-dashboard-list-item small,
.technician-app-shell .tech-dashboard-action span,
.technician-app-shell .tech-dashboard-empty {
  color: var(--tech-muted) !important;
}

.technician-app-shell .tech-dashboard-list-item,
.technician-app-shell .tech-dashboard-action {
  border-color: var(--tech-border) !important;
}

.technician-app-shell .tech-dashboard-action {
  background: var(--tech-input) !important;
}

.technician-app-shell .tech-dashboard-action:hover {
  border-color: var(--tech-accent) !important;
  background: #1d2d3b !important;
}

.technician-app-shell .tech-dashboard-open,
.technician-app-shell .open-link,
.technician-app-shell .jobs-btn {
  background: linear-gradient(135deg,#4f91f3,#3677e8) !important;
  border-color: #4f91f3 !important;
  color: #fff !important;
}

/* Tables, including every workflow equipment/validation table. */
.technician-app-shell :is(
  .technician-table-scroll,
  .tech-dashboard-table-wrap,
  .table-wrap,
  .stage7-table-wrap,
  .closeout-table-wrap
) {
  border-color: var(--tech-border) !important;
  background: var(--tech-surface) !important;
}

.technician-app-shell table {
  color: var(--tech-text) !important;
}

.technician-app-shell table thead th {
  background: var(--tech-surface-raised) !important;
  border-color: #36495d !important;
  color: #91a5ba !important;
}

.technician-app-shell table tbody tr,
.technician-app-shell .tech-dashboard-table tbody tr {
  background: var(--tech-surface) !important;
}

.technician-app-shell table tbody tr:nth-child(even),
.technician-app-shell .tech-dashboard-table tbody tr:nth-child(even) {
  background: var(--tech-surface-soft) !important;
}

.technician-app-shell table tbody tr:hover,
.technician-app-shell .tech-dashboard-table tbody tr:hover {
  background: #223447 !important;
}

.technician-app-shell table :is(td,th),
.technician-app-shell .tech-dashboard-table :is(td,th) {
  border-color: #263646 !important;
}

.technician-app-shell table td,
.technician-app-shell .tech-dashboard-table td {
  color: #d7e0ea !important;
}

.technician-app-shell :is(.tid,.mono,.site-cell small) {
  color: #8fbdff !important;
}

/* Forms and upload controls. */
.technician-app-shell :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .photo-field,
  .uploadzone
) {
  background: var(--tech-input) !important;
  border-color: var(--tech-border-strong) !important;
  color: #edf2f7 !important;
}

.technician-app-shell :is(input,select,textarea)::placeholder {
  color: #74879c !important;
}

.technician-app-shell :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
):hover {
  border-color: #49637c !important;
}

.technician-app-shell :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
):focus {
  border-color: var(--tech-accent) !important;
  box-shadow: 0 0 0 3px rgba(79,145,243,.13) !important;
  outline: none !important;
}

.technician-app-shell input[type="file"]::file-selector-button {
  background: #223447;
  border: 1px solid #40546a;
  color: #eaf1f8;
  border-radius: 6px;
  padding: 7px 10px;
  margin-right: 10px;
}

.technician-app-shell :is(label,.field,.jobs-field,.stage7-field,.closeout-field) > span,
.technician-app-shell :is(dt,.field-block-label) {
  color: #91a5ba !important;
}

.technician-app-shell :is(dd,.compact-dl dd) {
  color: #e5ebf2 !important;
}

/* Workflow steppers and summaries. */
.technician-app-shell :is(.field-stepper,.stepper,.stage7-progress,.closeout-stepper) {
  background: var(--tech-surface) !important;
  border-color: var(--tech-border) !important;
}

.technician-app-shell :is(.field-step,.step,.stage7-step,.closeout-step) {
  background: var(--tech-surface-soft) !important;
  border-color: var(--tech-border) !important;
  color: #c7d2de !important;
}

.technician-app-shell :is(.field-step,.step,.stage7-step,.closeout-step).is-current,
.technician-app-shell :is(.field-step,.step,.stage7-step,.closeout-step).current {
  background: rgba(79,145,243,.14) !important;
  border-color: #4f91f3 !important;
  color: #d9e9ff !important;
}

.technician-app-shell :is(.field-step,.step,.stage7-step,.closeout-step).is-complete,
.technician-app-shell :is(.field-step,.step,.stage7-step,.closeout-step).complete {
  background: rgba(52,211,153,.10) !important;
  border-color: rgba(52,211,153,.34) !important;
  color: #a7f3d0 !important;
}

.technician-app-shell :is(.field-step,.step,.stage7-step,.closeout-step) small {
  color: var(--tech-muted) !important;
}

.technician-app-shell :is(.field-stepper,.stepper,.stage7-progress,.closeout-stepper) > i,
.technician-app-shell .connector,
.technician-app-shell .closeout-connector {
  border-color: #405066 !important;
  background: #405066 !important;
}

.technician-app-shell :is(
  .field-site-summary dl > div,
  .field-pickup-summary > div,
  .field-stat-list > div,
  .confirm-item,
  .closeout-validation-row,
  .closeout-check,
  .closeout-count,
  .stage7-card
) {
  border-color: var(--tech-border) !important;
}

/* Notices and status blocks. */
.technician-app-shell .field-info-banner,
.technician-app-shell :is(.notice,.stage7-notice,.closeout-notice) {
  background: rgba(79,145,243,.10) !important;
  border-color: rgba(79,145,243,.28) !important;
  color: #c1dbff !important;
}

.technician-app-shell .field-success-banner,
.technician-app-shell :is(.notice.success,.status.success) {
  background: rgba(5,150,105,.12) !important;
  border-color: rgba(52,211,153,.28) !important;
  color: #a7f3d0 !important;
}

.technician-app-shell .field-status-warning,
.technician-app-shell :is(.notice.warning,.status.warning) {
  background: rgba(180,83,9,.13) !important;
  border-color: rgba(251,191,36,.28) !important;
  color: #fde68a !important;
}

.technician-app-shell :is(.notice.error,.status.error),
.technician-app-shell .field-danger-text {
  background: rgba(190,24,93,.12) !important;
  border-color: rgba(251,113,133,.28) !important;
  color: #fda4af !important;
}

/* Secondary workflow surfaces. */
.technician-app-shell :is(
  .field-document,
  .field-next-step,
  .field-readiness-item,
  .field-verification-editor td,
  .equipment-top,
  .pickup-selector,
  .confirm-item,
  .closeout-report,
  .closeout-check,
  .stage7-checkbox,
  .stage7-card,
  .stage7-section,
  .jobs-toolbar,
  .jobs-summary
) {
  background: var(--tech-surface-soft) !important;
  border-color: var(--tech-border) !important;
  color: var(--tech-text) !important;
}

.technician-app-shell :is(
  .field-document,
  .field-evidence-card,
  .equipment-card,
  .pickup-selector,
  .technician-job-card
):hover {
  border-color: var(--tech-accent) !important;
  background: #1e3041 !important;
}

.technician-app-shell :is(
  .muted,
  .sub,
  .field-inline-sub,
  .field-location-message,
  .jobs-summary,
  .closeout-validation-status
) {
  color: var(--tech-muted) !important;
}

/* Tabs and filters on My Jobs. */
.technician-app-shell .jobs-tabs {
  border-color: var(--tech-border) !important;
}

.technician-app-shell .jobs-tab {
  background: var(--tech-input) !important;
  border-color: var(--tech-border-strong) !important;
  color: #b9c6d4 !important;
}

.technician-app-shell .jobs-tab.active {
  background: var(--tech-accent-soft) !important;
  border-color: var(--tech-accent) !important;
  color: #cfe3ff !important;
}

/* Buttons use the same blue hierarchy as admin. */
.technician-app-shell .btn.primary,
.technician-app-shell :is(
  .stage7-button,
  .closeout-button,
  .field-checkout-button,
  .field-navigation-button,
  .field-full-button
) {
  background: linear-gradient(135deg,#4f91f3,#3677e8) !important;
  border-color: #4f91f3 !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(79,145,243,.16) !important;
}

.technician-app-shell .btn.secondary,
.technician-app-shell :is(.stage7-button.secondary,.closeout-button.secondary) {
  background: var(--tech-input) !important;
  border-color: var(--tech-border-strong) !important;
  color: #d8e1eb !important;
}

.technician-app-shell .btn.danger,
.technician-app-shell :is(.stage7-button.danger,.closeout-button.danger) {
  background: rgba(190,24,93,.13) !important;
  border-color: rgba(251,113,133,.32) !important;
  color: #fda4af !important;
}

/* Keep colored status pills readable on dark surfaces. */
.technician-app-shell .pill,
.technician-app-shell .status-pill,
.technician-app-shell .stage7-pill,
.technician-app-shell .badge,
.technician-app-shell .tech-dashboard-pill {
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: none !important;
}

.technician-app-shell .tech-dashboard-pill {
  background: rgba(79,145,243,.13) !important;
  color: #bfdbfe !important;
}

.technician-app-shell .tech-dashboard-pill.attention {
  background: rgba(180,83,9,.14) !important;
  color: #fde68a !important;
}

.technician-app-shell :is(.emptyhint,.jobs-empty) {
  color: var(--tech-muted) !important;
}

/* Responsive behavior mirrors the admin shell. */
@media (max-width: 1000px) {
  .technician-app-shell .technician-content {
    padding: 22px !important;
  }

  .technician-app-shell .technician-topbar {
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (max-width: 820px) {
  .technician-app-shell .technician-topbar {
    display: none;
  }

  .technician-app-shell .technician-mobile-bar {
    background: rgba(20,29,39,.98) !important;
    border-bottom: 1px solid #2a3a4a !important;
  }

  .technician-app-shell .brand.brand-image {
    min-height: 96px;
    padding: 11px 14px 13px;
  }

  .technician-app-shell .sidebar-brand-logo {
    max-width: 185px;
    max-height: 72px;
  }
}

@media (max-width: 700px) {
  .technician-app-shell .technician-content {
    padding: 16px 14px 26px !important;
  }

  .technician-app-shell :is(
    .tech-dashboard-stat,
    .tech-dashboard-card,
    .jobs-wrap,
    .jobs-card,
    .card,
    .panel,
    .stage7-panel,
    .closeout-panel
  ) {
    border-radius: 9px !important;
  }
}





/* ========================================================================
   TECHNICIAN PORTAL — FULL-WIDTH + FINAL VISUAL POLISH
   Keep this after the Technician Portal visual-parity block above.
   ======================================================================== */

/* Use the full canvas beside the sidebar on every technician route. */
.technician-app-shell .technician-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.technician-app-shell .technician-content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 24px 26px 60px !important;
}

.technician-app-shell .technician-content > *,
.technician-app-shell :is(
  .tech-dashboard,
  .jobs-page,
  .field-stage-page,
  .stage-page,
  .stage7-page,
  .closeout-page
) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Prevent inner grids and tables from imposing a narrow page width. */
.technician-app-shell :is(
  .tech-dashboard-layout,
  .tech-dashboard-stats,
  .jobs-wrap,
  .jobs-toolbar,
  .field-two-column,
  .field-transport-layout,
  .field-pickup-layout,
  .stage7-grid,
  .closeout-grid,
  .tablewrap,
  .technician-table-scroll
) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Admin-style dashboard title icon. */
.technician-app-shell .tech-dashboard-heading h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0 !important;
}

.technician-app-shell .tech-dashboard-heading h1::before {
  content: "▥";
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  border: 1px solid rgba(96,165,250,.28);
  border-radius: 11px;
  background: linear-gradient(145deg,rgba(59,130,246,.22),rgba(37,99,235,.10));
  color: #60a5fa;
  font-size: 19px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

/* Give KPI cards the same restrained colored corner glow as admin. */
.technician-app-shell .tech-dashboard-stat {
  position: relative !important;
  isolation: isolate;
  min-height: 126px;
  overflow: hidden !important;
  padding: 16px 18px !important;
}

.technician-app-shell .tech-dashboard-stat > * {
  position: relative;
  z-index: 2;
}

.technician-app-shell .tech-dashboard-stat::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -29px;
  bottom: -38px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(79,145,243,.12);
  filter: blur(2px);
  pointer-events: none;
}

.technician-app-shell .tech-dashboard-stat:nth-child(2)::after {
  background: rgba(99,102,241,.13);
}

.technician-app-shell .tech-dashboard-stat:nth-child(3)::after {
  background: rgba(14,165,233,.12);
}

.technician-app-shell .tech-dashboard-stat:nth-child(4)::after {
  background: rgba(251,113,133,.12);
}

.technician-app-shell .tech-dashboard-stat:nth-child(5)::after {
  background: rgba(52,211,153,.11);
}

.technician-app-shell .tech-dashboard-stat b {
  font-size: 29px !important;
  line-height: 1.1;
}

/* Remaining page-specific light surfaces. */
.technician-app-shell :is(
  .jobs-user,
  .tech-dashboard-user,
  .stage7-user,
  .closeout-user
) {
  background: var(--tech-surface) !important;
  border: 1px solid var(--tech-border) !important;
  border-radius: 10px !important;
  color: var(--tech-text) !important;
  box-shadow: var(--shadow) !important;
}

.technician-app-shell .tech-dashboard-user {
  padding: 10px 13px;
  min-width: 142px;
}

.technician-app-shell :is(
  .jobs-user,
  .stage7-user,
  .closeout-user
) {
  padding: 12px 14px !important;
}

.technician-app-shell :is(
  .jobs-user,
  .tech-dashboard-user,
  .stage7-user,
  .closeout-user
) b {
  color: #f5f8fc !important;
}

.technician-app-shell :is(
  .jobs-user,
  .tech-dashboard-user,
  .stage7-user,
  .closeout-user
) small,
.technician-app-shell :is(
  .jobs-user,
  .stage7-user,
  .closeout-user
) span {
  color: var(--tech-muted) !important;
}

/* Remove white pills while retaining semantic status colors. */
.technician-app-shell :is(
  .pill,
  .status-pill,
  .stage7-pill,
  .badge,
  .tech-dashboard-pill
) {
  background: #223142 !important;
  border-color: #3a4d62 !important;
  color: #d7e2ee !important;
}

.technician-app-shell :is(.st-blue,.status-pill.st-blue) {
  background: rgba(59,130,246,.14) !important;
  border-color: rgba(96,165,250,.32) !important;
  color: #bfdbfe !important;
}

.technician-app-shell :is(.st-indigo,.status-pill.st-indigo) {
  background: rgba(99,102,241,.14) !important;
  border-color: rgba(129,140,248,.34) !important;
  color: #c7d2fe !important;
}

.technician-app-shell :is(.st-teal,.status-pill.st-teal) {
  background: rgba(13,148,136,.15) !important;
  border-color: rgba(45,212,191,.31) !important;
  color: #99f6e4 !important;
}

.technician-app-shell :is(.st-green,.status-pill.st-green) {
  background: rgba(5,150,105,.15) !important;
  border-color: rgba(52,211,153,.31) !important;
  color: #a7f3d0 !important;
}

.technician-app-shell :is(.st-amber,.status-pill.st-amber) {
  background: rgba(180,83,9,.16) !important;
  border-color: rgba(251,191,36,.32) !important;
  color: #fde68a !important;
}

.technician-app-shell :is(.st-red,.status-pill.st-red) {
  background: rgba(190,24,93,.15) !important;
  border-color: rgba(251,113,133,.32) !important;
  color: #fecdd3 !important;
}

/* Light workflow step tiles/circles that were still visible on some stages. */
.technician-app-shell :is(
  .stepper .step,
  .stage7-progress .stage7-step,
  .closeout-stepper .closeout-step
) {
  background: var(--tech-surface-soft) !important;
  border-color: var(--tech-border) !important;
  color: #cbd6e2 !important;
}

.technician-app-shell :is(
  .stepper .step,
  .stage7-progress .stage7-step,
  .closeout-stepper .closeout-step
) :is(span,b,small) {
  color: inherit !important;
}

.technician-app-shell :is(
  .stepper .step.current,
  .stage7-progress .stage7-step.current,
  .closeout-stepper .closeout-step.current
) {
  background: rgba(79,145,243,.16) !important;
  border-color: #4f91f3 !important;
  color: #dbeafe !important;
}

.technician-app-shell :is(
  .stepper .step.complete,
  .stage7-progress .stage7-step.complete,
  .closeout-stepper .closeout-step.complete
) {
  background: rgba(5,150,105,.15) !important;
  border-color: rgba(52,211,153,.32) !important;
  color: #a7f3d0 !important;
}

/* Disabled controls should remain dark rather than reverting to browser white. */
.technician-app-shell :is(input,select,textarea,button):disabled,
.technician-app-shell :is(.btn,.stage7-button,.closeout-button).disabled {
  background-color: #202c38 !important;
  border-color: #324354 !important;
  color: #77899c !important;
  opacity: 1 !important;
}

@media (min-width: 1900px) {
  .technician-app-shell .technician-content {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (max-width: 1000px) {
  .technician-app-shell .technician-content {
    padding: 22px 22px 40px !important;
  }
}

@media (max-width: 700px) {
  .technician-app-shell .technician-content {
    padding: 16px 14px 28px !important;
  }

  .technician-app-shell .tech-dashboard-heading h1::before {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 9px;
    font-size: 17px;
  }

  .technician-app-shell .tech-dashboard-stat {
    min-height: 112px;
  }
}

/* ========================================================================
   NOVUS360 — FINAL LIGHT THEME
   Matches the supplied light dashboard reference.
   IMPORTANT: keep this block at the very END of app.css.
   ======================================================================== */

:root {
  color-scheme: light;

  /* Core canvas / surfaces */
  --paper: #f5f7fb;
  --card: #ffffff;
  --line: #dbe3ed;
  --line2: #edf1f5;

  /* Text */
  --text: #15243a;
  --muted: #65758a;
  --faint: #8b99aa;

  /* Sidebar / dark token compatibility */
  --ink: #ffffff;
  --ink2: #f5f8fc;
  --ink3: #e8f3ff;
  --inkline: #dbe3ed;
  --inkmut: #8292a6;

  /* Brand / semantic colors */
  --teal: #2f7df6;
  --teald: #155fc1;
  --tealw: #eaf3ff;

  --blue: #2f6fed;
  --bluew: #eaf1ff;

  --indigo: #5b55e7;
  --indigow: #efedff;

  --amber: #f59e0b;
  --amberw: #fff6df;

  --violet: #7c3aed;
  --violetw: #f3ecff;

  --green: #12a56b;
  --greenw: #e7f8f1;

  --red: #ff4d5e;
  --redw: #fff0f2;

  --slate: #64748b;
  --slatew: #eef2f6;

  --radius: 14px;
  --shadow:
    0 1px 2px rgba(15, 23, 42, .045),
    0 8px 24px rgba(15, 23, 42, .045);

  /* Compatibility with prior ORYA theme variables */
  --orya-app-bg: #f5f7fb;
  --orya-sidebar-bg: #ffffff;
  --orya-sidebar-bg-deep: #ffffff;
  --orya-sidebar-border: #dbe3ed;
  --orya-sidebar-hover: #f3f7fc;
  --orya-sidebar-active: #e8f3ff;
}

/* ---------- Global canvas ---------- */
html,
body {
  color-scheme: light !important;
  background: #f5f7fb !important;
  color: var(--text) !important;
}

body {
  font-family: Inter, Roboto, "Segoe UI", system-ui, -apple-system, sans-serif !important;
}

::selection {
  background: #dbeafe !important;
  color: #12335f !important;
}

.app,
.main,
.content,
.main-content,
.page-content,
.content-wrapper,
.app-content,
.technician-app-shell,
.technician-main,
.technician-content,
.technician-app-shell .technician-main,
.technician-app-shell .technician-content,
.technician-app-shell .field-stage-page,
.technician-app-shell .stage-page,
.technician-app-shell .stage7-page,
.technician-app-shell .closeout-page,
.technician-app-shell .jobs-page,
.technician-app-shell .tech-dashboard {
  background: #f5f7fb !important;
  color: var(--text) !important;
}

.main {
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.rail,
.technician-rail,
.technician-app-shell .technician-rail {
  background: #ffffff !important;
  border-right: 1px solid #dbe3ed !important;
  color: #3b4e66 !important;
  box-shadow: 1px 0 0 rgba(15, 23, 42, .02) !important;
}

.rail .brand.brand-image,
.technician-app-shell .brand.brand-image {
  background: #ffffff !important;
  border-bottom: 1px solid #e5eaf0 !important;
}

.rail .brand.brand-image:hover,
.technician-app-shell .brand.brand-image:hover {
  background: #fbfcfe !important;
}

.brand b {
  color: #12325f !important;
}

.brand small,
.navgrp .lbl {
  color: #73849b !important;
}

.navgrp .lbl {
  font-weight: 700 !important;
  letter-spacing: .15em !important;
}

.nav {
  color: #334861 !important;
  border: 1px solid transparent;
}

.nav:hover {
  background: #f2f6fb !important;
  color: #173b67 !important;
}

.nav.active {
  background: #e8f3ff !important;
  color: #1769d2 !important;
  border-color: #d7e8ff !important;
  box-shadow: none !important;
}

.nav.active::before {
  background: #2f7df6 !important;
  width: 3px !important;
}

.nav-icon,
.nav .nav-icon,
.nav svg {
  color: #55708e !important;
}

.nav.active .nav-icon,
.nav.active svg {
  color: #2f7df6 !important;
}

.nav .ct {
  background: #eef3f8 !important;
  color: #66788d !important;
}

.nav.active .ct {
  background: #d9ebff !important;
  color: #1769d2 !important;
}

.railfoot {
  background: #ffffff !important;
  border-top: 1px solid #e5eaf0 !important;
}

.railfoot .av {
  background: #dfe7ff !important;
  color: #5f63c9 !important;
}

.railfoot .who {
  color: #32465e !important;
}

.railfoot .who small {
  color: #8a98a9 !important;
}

.railscroll {
  scrollbar-color: #c6d0db transparent !important;
}

.railscroll::-webkit-scrollbar-track {
  background: transparent !important;
}

.railscroll::-webkit-scrollbar-thumb {
  background: #c6d0db !important;
}

/* ---------- Top bar ---------- */
.topbar,
.technician-app-shell .technician-topbar {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid #dbe3ed !important;
  color: #3d5068 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.crumbs {
  color: #718196 !important;
}

.crumbs .c {
  color: #65778d !important;
}

.crumbs .c:hover {
  color: #2f7df6 !important;
}

.crumbs .sep {
  color: #a7b2bf !important;
}

.crumbs .cur {
  color: #1b2d44 !important;
}

.search input {
  background: #ffffff !important;
  border-color: #d6e0ea !important;
  color: #24364d !important;
  box-shadow: none !important;
  color-scheme: light !important;
}

.search input::placeholder {
  color: #8b9aab !important;
}

.search input:hover {
  border-color: #bdcad8 !important;
}

.search input:focus {
  border-color: #7eb3ff !important;
  box-shadow: 0 0 0 3px rgba(47, 125, 246, .10) !important;
}

.search svg,
.search-symbol {
  color: #6f8197 !important;
}

.bell,
.menubtn {
  background: #ffffff !important;
  border-color: #d6e0ea !important;
  color: #48607a !important;
}

.bell:hover,
.menubtn:hover {
  background: #f7faff !important;
  border-color: #bdd0e4 !important;
  color: #1f5faa !important;
}

.bell .dot {
  border-color: #ffffff !important;
}

/* ---------- Headings ---------- */
h1.page,
.technician-pagehead h1,
.technician-job-detail-head h1,
.field-stage-heading h1,
.technician-app-shell :is(
  .tech-dashboard-heading,
  .jobs-heading,
  .field-stage-heading,
  .stage-heading,
  .stage7-heading,
  .closeout-heading,
  .technician-pagehead,
  .technician-job-detail-head
) h1 {
  color: #12243c !important;
  font-family: Inter, Roboto, "Segoe UI", system-ui, sans-serif !important;
  font-weight: 750 !important;
  letter-spacing: -.025em !important;
}

.pagehead p.sub,
.technician-pagehead p,
.field-stage-heading p,
.technician-app-shell :is(
  .tech-dashboard-heading,
  .jobs-heading,
  .field-stage-heading,
  .stage-heading,
  .stage7-heading,
  .closeout-heading,
  .technician-pagehead,
  .technician-job-detail-head
) p {
  color: #65758a !important;
}

.phase-tag {
  background: #eef4fb !important;
  border: 1px solid #d6e3f1 !important;
  color: #4e6580 !important;
}

/* Optional icon tile used beside the page heading */
.pagehead > .page-icon,
.pagehead .page-icon,
.technician-app-shell .tech-dashboard-heading h1::before {
  border: 1px solid #cfe2ff !important;
  background: #f2f7ff !important;
  color: #2f7df6 !important;
  box-shadow: none !important;
}

/* ---------- Buttons ---------- */
.btn {
  background: #ffffff !important;
  border-color: #d6e0ea !important;
  color: #33475f !important;
  box-shadow: none !important;
}

.btn:hover {
  background: #f8faff !important;
  border-color: #bacada !important;
  color: #173a63 !important;
}

.btn.primary,
.technician-app-shell .btn.primary,
.technician-app-shell :is(
  .stage7-button,
  .closeout-button,
  .field-checkout-button,
  .field-navigation-button,
  .field-full-button
),
.technician-app-shell .tech-dashboard-open,
.technician-app-shell .open-link,
.technician-app-shell .jobs-btn {
  background: linear-gradient(135deg, #2f7df6, #2469df) !important;
  border-color: #2f7df6 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(47, 125, 246, .16) !important;
}

.btn.primary:hover,
.technician-app-shell .btn.primary:hover,
.technician-app-shell :is(
  .stage7-button,
  .closeout-button,
  .field-checkout-button,
  .field-navigation-button,
  .field-full-button
):hover {
  background: linear-gradient(135deg, #3d88f8, #1f63d4) !important;
  border-color: #2b74e4 !important;
}

.btn.ghost {
  color: #53677f !important;
  background: transparent !important;
}

.btn.ghost:hover {
  background: #f0f5fb !important;
  color: #173a63 !important;
}

.btn.danger,
.technician-app-shell .btn.danger {
  background: #fff5f6 !important;
  border-color: #ffcbd0 !important;
  color: #c92b3d !important;
}

.btn.danger:hover,
.technician-app-shell .btn.danger:hover {
  background: #ffedef !important;
  border-color: #ffb5bd !important;
  color: #b31f30 !important;
}

/* ---------- Cards / panels ---------- */
.card,
.form-card,
.settings-card,
.reportcard,
.detailhead,
.tablewrap,
.kpi,
.technician-profile-card,
.technician-job-card,
.technician-job-detail-head,
.technician-empty-state,
.field-stepper,
.field-site-summary,
.field-pickup-summary,
.assignment-group,
.equipment-assignment-section,
.technician-app-shell :is(
  .card,
  .tablewrap,
  .tech-dashboard-stat,
  .tech-dashboard-card,
  .jobs-wrap,
  .jobs-card,
  .summary-card,
  .panel,
  .field-stepper,
  .field-site-summary,
  .field-pickup-summary,
  .field-custody-preview,
  .field-arrival-photo,
  .field-evidence-card,
  .equipment-card,
  .stage7-card,
  .stage7-panel,
  .stage7-section,
  .closeout-card,
  .closeout-panel,
  .closeout-summary,
  .closeout-validation,
  .closeout-report,
  .technician-profile-card,
  .technician-job-card,
  .technician-job-detail-head,
  .technician-empty-state
) {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
  color: #24364d !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .035),
    0 7px 20px rgba(15, 23, 42, .035) !important;
}

/* Dashboard cards are slightly larger/softer like the reference image */
.kpi {
  min-height: 160px;
  padding: 18px 18px !important;
  border-radius: 14px !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.kpi > * {
  position: relative;
  z-index: 2;
}

.kpi::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -34px;
  bottom: -47px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: rgba(47, 125, 246, .07);
  pointer-events: none;
}

.g4 .kpi:nth-child(2)::after {
  background: rgba(124, 58, 237, .065);
}

.g4 .kpi:nth-child(3)::after {
  background: rgba(18, 165, 107, .07);
}

.g4 .kpi:nth-child(4)::after {
  background: rgba(255, 77, 94, .065);
}

.kpi .k-lbl {
  color: #536579 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase;
}

.kpi .k-lbl svg {
  color: #2f7df6 !important;
}

.kpi .k-val {
  color: #15243a !important;
  font-family: Inter, Roboto, "Segoe UI", sans-serif !important;
  font-size: 31px !important;
  font-weight: 760 !important;
  letter-spacing: -.03em;
}

.kpi .k-val span {
  color: #8c99a9 !important;
}

.card .hd,
.form-card > .hd,
.tbar,
.technician-app-shell :is(
  .card .hd,
  .tablewrap .tbar,
  .tech-dashboard-card-header,
  .jobs-card-hd,
  .panel-hd,
  .stage7-panel-hd,
  .closeout-panel-hd
) {
  background: #ffffff !important;
  border-bottom-color: #e5eaf0 !important;
  color: #17283f !important;
}

.card .hd h3,
.form-card > .hd h3,
.technician-app-shell :is(
  .tech-dashboard-card-header,
  .jobs-card-hd,
  .panel-hd,
  .stage7-panel-hd,
  .closeout-panel-hd,
  .card .hd
) h2,
.technician-app-shell :is(
  .tech-dashboard-card-header,
  .jobs-card-hd,
  .panel-hd,
  .stage7-panel-hd,
  .closeout-panel-hd,
  .card .hd
) h3 {
  color: #17283f !important;
}

.card .hd .sub,
.form-card > .hd .sub {
  color: #6f7f92 !important;
}

.card .bd,
.form-card > .bd,
.technician-app-shell :is(
  .card .bd,
  .panel-bd,
  .stage7-panel-bd,
  .closeout-panel-bd
) {
  background: #ffffff !important;
  color: #24364d !important;
}

/* ---------- Status pills ---------- */
.pill,
.status-pill,
.stage7-pill,
.badge,
.tech-dashboard-pill,
.technician-app-shell :is(
  .pill,
  .status-pill,
  .stage7-pill,
  .badge,
  .tech-dashboard-pill
) {
  box-shadow: none !important;
}

.st-blue,
.technician-app-shell :is(.st-blue, .status-pill.st-blue) {
  background: #eaf1ff !important;
  border-color: #cfe0ff !important;
  color: #245ec5 !important;
}

.st-indigo,
.technician-app-shell :is(.st-indigo, .status-pill.st-indigo) {
  background: #efedff !important;
  border-color: #dcd8ff !important;
  color: #544fc7 !important;
}

.st-teal,
.technician-app-shell :is(.st-teal, .status-pill.st-teal) {
  background: #e7f7f6 !important;
  border-color: #c8ece9 !important;
  color: #137f80 !important;
}

.st-green,
.technician-app-shell :is(.st-green, .status-pill.st-green) {
  background: #e7f8f1 !important;
  border-color: #c7eddc !important;
  color: #0f8d5c !important;
}

.st-amber,
.technician-app-shell :is(.st-amber, .status-pill.st-amber) {
  background: #fff6df !important;
  border-color: #f9e4a9 !important;
  color: #a86800 !important;
}

.st-red,
.technician-app-shell :is(.st-red, .status-pill.st-red) {
  background: #fff0f2 !important;
  border-color: #ffd0d5 !important;
  color: #d33a4b !important;
}

.st-violet {
  background: #f3ecff !important;
  color: #6c38bd !important;
}

.st-slate {
  background: #eef2f6 !important;
  color: #526274 !important;
}

/* ---------- Tables ---------- */
.tablewrap,
.technician-app-shell :is(
  .technician-table-scroll,
  .tech-dashboard-table-wrap,
  .table-wrap,
  .stage7-table-wrap,
  .closeout-table-wrap
) {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
}

thead th,
.assignment-stock-table thead th,
.technician-app-shell table thead th {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #7b8b9d !important;
}

tbody tr,
.assignment-stock-table tbody tr:nth-child(odd),
.technician-app-shell table tbody tr,
.technician-app-shell .tech-dashboard-table tbody tr {
  background: #ffffff !important;
}

tbody tr:nth-child(even),
.assignment-stock-table tbody tr:nth-child(even),
.technician-app-shell table tbody tr:nth-child(even),
.technician-app-shell .tech-dashboard-table tbody tr:nth-child(even) {
  background: #fbfcfe !important;
}

tbody tr:hover,
.assignment-stock-table tbody tr:hover,
.technician-app-shell table tbody tr:hover,
.technician-app-shell .tech-dashboard-table tbody tr:hover {
  background: #f3f7fc !important;
}

tbody td,
.assignment-stock-table tbody td,
.technician-app-shell table td {
  border-bottom-color: #edf1f5 !important;
  color: #42566f !important;
}

td .rowmain,
.rowmain,
.assignment-equipment-name,
.assignment-warehouse-name {
  color: #21344c !important;
}

td .rowsub,
.rowsub,
.assignment-warehouse-id {
  color: #8291a3 !important;
}

.tid,
.assignment-equipment-id,
.technician-app-shell :is(.tid, .mono, .site-cell small) {
  color: #276fd5 !important;
}

.tbar .chip {
  background: #ffffff !important;
  border-color: #d6e0ea !important;
  color: #66778b !important;
}

.tbar .chip:hover {
  background: #f7faff !important;
  border-color: #c3d1df !important;
}

.tbar .chip.on {
  background: #eaf3ff !important;
  border-color: #bcd8ff !important;
  color: #1f65c6 !important;
}

/* ---------- Forms ---------- */
.form-grid input,
.form-grid select,
.form-grid textarea,
.filterbar input,
.filterbar select,
.inline-form input,
.inline-form select,
.inline-form textarea,
.upload-field input,
.upload-field select,
.upload-field textarea,
.settings-card input,
.settings-card select,
.settings-card textarea,
.field-location-form input,
.field-location-form select,
.field-location-form textarea,
.field-verification-form input,
.field-verification-form select,
.field-verification-form textarea,
.assignment-search-input,
.searchable-select-input,
.assignment-search input,
[data-work-order-form] .form-grid input,
[data-work-order-form] .form-grid select,
[data-work-order-form] .requirement-row input,
.technician-app-shell :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .photo-field,
  .uploadzone
) {
  background: #ffffff !important;
  border-color: #d4dee8 !important;
  color: #24364d !important;
  color-scheme: light !important;
}

input::placeholder,
textarea::placeholder,
.technician-app-shell :is(input, select, textarea)::placeholder {
  color: #97a4b3 !important;
}

.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover,
.filterbar input:hover,
.filterbar select:hover,
.inline-form input:hover,
.inline-form select:hover,
.inline-form textarea:hover,
.upload-field input:hover,
.upload-field select:hover,
.upload-field textarea:hover,
.settings-card input:hover,
.settings-card select:hover,
.settings-card textarea:hover,
.field-location-form input:hover,
.field-location-form select:hover,
.field-location-form textarea:hover,
.field-verification-form input:hover,
.field-verification-form select:hover,
.field-verification-form textarea:hover,
.assignment-search-input:hover,
.searchable-select-input:hover,
.technician-app-shell :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
):hover {
  border-color: #b8c6d5 !important;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.filterbar input:focus,
.filterbar select:focus,
.inline-form input:focus,
.inline-form select:focus,
.inline-form textarea:focus,
.upload-field input:focus,
.upload-field select:focus,
.upload-field textarea:focus,
.settings-card input:focus,
.settings-card select:focus,
.settings-card textarea:focus,
.field-location-form input:focus,
.field-location-form select:focus,
.field-location-form textarea:focus,
.field-verification-form input:focus,
.field-verification-form select:focus,
.field-verification-form textarea:focus,
.assignment-search-input:focus,
.searchable-select-input:focus,
.searchable-select.is-open .searchable-select-input,
.technician-app-shell :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
):focus {
  outline: none !important;
  border-color: #7eb3ff !important;
  box-shadow: 0 0 0 3px rgba(47, 125, 246, .10) !important;
}

select option,
select optgroup {
  background: #ffffff !important;
  color: #24364d !important;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  color-scheme: light !important;
}

/* Chrome autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #24364d !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  caret-color: #24364d !important;
}

/* File inputs */
input[type="file"] {
  color: #66778b !important;
}

input[type="file"]::file-selector-button,
.technician-app-shell input[type="file"]::file-selector-button {
  background: #f4f7fb !important;
  border: 1px solid #d4dee8 !important;
  color: #40556e !important;
}

input[type="file"]::file-selector-button:hover,
.technician-app-shell input[type="file"]::file-selector-button:hover {
  background: #eaf3ff !important;
  border-color: #b8d5ff !important;
  color: #1f65c6 !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #2f7df6 !important;
}

/* ---------- Form action bars ---------- */
.form-actions,
.standalone-actions,
[data-work-order-form] .standalone-actions,
.assignment-toolbar,
.assignment-pagination,
.assignment-group-foot {
  background: rgba(255, 255, 255, .96) !important;
  border-color: #dbe3ed !important;
  box-shadow: 0 -8px 22px rgba(15, 23, 42, .035) !important;
}

/* ---------- Work-order special surfaces ---------- */
[data-work-order-form] .form-card,
[data-work-order-form] .form-card .hd,
[data-work-order-form] .form-card .bd {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
  color: #24364d !important;
}

[data-work-order-form] .detail-preview {
  background: #f8fafc !important;
  border-color: #d6e0ea !important;
}

[data-work-order-form] .detail-preview.is-populated {
  background: #f2f8ff !important;
  border-color: #c3dcff !important;
  box-shadow: inset 0 0 0 1px rgba(47, 125, 246, .02) !important;
}

[data-work-order-form] .detail-preview > div,
[data-work-order-form] .requirement-row {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-work-order-form] .detail-preview span,
[data-work-order-form] .requirement-head,
[data-work-order-form] .field-help {
  color: #7f8e9f !important;
}

[data-work-order-form] .detail-preview b {
  color: #20344c !important;
}

[data-work-order-form] .field-help {
  background: #f5f7fa !important;
}

[data-work-order-form] .btn[data-add-equipment-row] {
  background: #eef6ff !important;
  border-color: #c4dcff !important;
  color: #2469ca !important;
}

[data-work-order-form] .btn[data-add-equipment-row]:hover {
  background: #e1efff !important;
}

/* ---------- Dropdowns ---------- */
.searchable-select-menu {
  background: #ffffff !important;
  border-color: #d6e0ea !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .12) !important;
}

.searchable-select-option {
  color: #33475e !important;
}

.searchable-select-option:hover,
.searchable-select-option.is-active {
  background: #eaf3ff !important;
  color: #1f65c6 !important;
}

.searchable-select-option.is-selected {
  color: #174e9b !important;
}

.searchable-select-empty {
  color: #8b98a8 !important;
}

/* ---------- Assignment / stock selection ---------- */
.assignment-group,
.equipment-assignment-section {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
}

.assignment-main-header,
.assignment-group-head {
  background: #f8fafc !important;
  border-color: #e0e7ef !important;
}

.assignment-main-header h3,
.assignment-group-title {
  color: #1c3048 !important;
}

.assignment-main-header .sub,
.assignment-group-summary {
  color: #6e7f92 !important;
}

.assignment-group-summary b {
  color: #23374e !important;
}

.assignment-total,
.assignment-limit-badge {
  background: #eef6ff !important;
  border-color: #c7ddff !important;
  color: #255fba !important;
}

.assignment-total b {
  background: #dcecff !important;
  color: #1f60bc !important;
}

.assignment-toolbar,
.assignment-pagination {
  background: #f8fafc !important;
  border-color: #e0e7ef !important;
}

.assignment-result-count,
.assignment-selection-summary,
.assignment-page-status {
  color: #6a7c90 !important;
}

.assignment-result-count b,
.assignment-selection-summary b,
.assignment-page-status b {
  color: #263a52 !important;
}

.assignment-stock-table tbody tr.is-selected {
  background: #eefaf5 !important;
}

.assignment-checkbox-label span {
  background: #ffffff !important;
  border-color: #82aef1 !important;
}

.assignment-checkbox-label input:checked + span {
  background: #12a56b !important;
  border-color: #12a56b !important;
}

.assignment-checkbox-label input:disabled + span {
  background: #edf1f5 !important;
  border-color: #c8d2dd !important;
}

.assignment-no-result {
  background: #f8fafc !important;
  color: #687b90 !important;
}

.assignment-page-button {
  background: #ffffff !important;
  border-color: #d5dfe9 !important;
  color: #3d536c !important;
}

.assignment-page-button:hover:not(:disabled) {
  background: #eaf3ff !important;
  border-color: #b8d4ff !important;
  color: #1f65c6 !important;
}

.assignment-page-button:disabled {
  background: #f1f4f7 !important;
  border-color: #e0e6ec !important;
  color: #9aa6b4 !important;
}

.equipment-assignment-actions {
  background: #ffffff !important;
  border-top-color: #dbe3ed !important;
  box-shadow: 0 -10px 25px rgba(15, 23, 42, .05) !important;
}

.assignment-action-message strong {
  color: #24364d !important;
}

.assignment-action-message span {
  color: #718196 !important;
}

.assignment-submit-button {
  background: linear-gradient(135deg, #2f7df6, #2469df) !important;
  border-color: #2f7df6 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(47, 125, 246, .18) !important;
}

.assignment-submit-count {
  background: #ffffff !important;
  color: #2368ca !important;
}

.assignment-search input,
.stock-choice,
.tech-col,
.jcard {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
  color: #24364d !important;
}

.stock-choice:hover,
.stock-choice:has(input:checked) {
  background: #eef6ff !important;
  border-color: #a8ccff !important;
}

.stock-choice-title {
  color: #263a52 !important;
}

.stock-choice-id {
  color: #2a6dce !important;
}

.stock-choice-meta,
.stock-choice-warehouse,
.jcard .jm {
  color: #7e8da0 !important;
}

/* ---------- Notes / alerts ---------- */
.note,
.field-info-banner,
.technician-app-shell .field-info-banner,
.technician-app-shell :is(.notice, .stage7-notice, .closeout-notice) {
  background: #eef6ff !important;
  border-color: #c9defd !important;
  color: #245caa !important;
}

.warnnote,
.field-status-warning,
.technician-app-shell .field-status-warning,
.technician-app-shell :is(.notice.warning, .status.warning) {
  background: #fff7e7 !important;
  border-color: #f4dca7 !important;
  color: #946209 !important;
}

.flash {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
  color: #42566e !important;
}

.flash-success,
.field-success-banner,
.technician-app-shell .field-success-banner,
.technician-app-shell :is(.notice.success, .status.success) {
  background: #eaf8f1 !important;
  border-color: #c7ead8 !important;
  color: #148255 !important;
}

.flash-error,
.technician-app-shell :is(.notice.error, .status.error) {
  background: #fff0f2 !important;
  border-color: #ffd0d5 !important;
  color: #c93648 !important;
}

.flash-warning {
  background: #fff7e7 !important;
  border-color: #f4dca7 !important;
  color: #946209 !important;
}

.tag {
  background: #eef2f6 !important;
  border-color: #dde4eb !important;
  color: #596b7f !important;
}

/* ---------- Upload / secondary surfaces ---------- */
.uploadzone,
.technician-app-shell .uploadzone,
.field-document,
.field-next-step,
.field-readiness-item,
.field-verification-editor td,
.field-arrival-photo,
.field-evidence-card,
.technician-app-shell :is(
  .field-document,
  .field-next-step,
  .field-readiness-item,
  .field-verification-editor td,
  .equipment-top,
  .pickup-selector,
  .confirm-item,
  .closeout-report,
  .closeout-check,
  .stage7-checkbox,
  .stage7-card,
  .stage7-section,
  .jobs-toolbar,
  .jobs-summary
) {
  background: #f8fafc !important;
  border-color: #e1e7ef !important;
  color: #33475e !important;
}

.uploadzone:hover,
.field-document:hover,
.field-evidence-card:hover,
.technician-app-shell :is(
  .field-document,
  .field-evidence-card,
  .equipment-card,
  .pickup-selector,
  .technician-job-card
):hover {
  background: #f3f8ff !important;
  border-color: #a8ccff !important;
}

.field-document span {
  color: #2f7df6 !important;
}

/* ---------- Detail / tabs / lifecycle ---------- */
.detailhead {
  background: #ffffff !important;
}

.detailhead .icon {
  background: #eef6ff !important;
  border-color: #cfe2ff !important;
  color: #2f7df6 !important;
}

.detailhead h2 {
  color: #17283f !important;
}

.detailhead .meta {
  color: #6f7f92 !important;
}

.detailhead .meta b {
  color: #2c4058 !important;
}

.tabs {
  border-bottom-color: #dbe3ed !important;
}

.tab {
  color: #6b7c90 !important;
}

.tab:hover {
  color: #29445f !important;
}

.tab.active {
  color: #2165c6 !important;
  border-bottom-color: #2f7df6 !important;
}

.dl dt {
  color: #8491a1 !important;
  border-bottom-color: #edf1f5 !important;
}

.dl dd {
  color: #33475e !important;
  border-bottom-color: #edf1f5 !important;
}

.lc .dot,
.tev .tdot {
  background: #ffffff !important;
  border-color: #cbd6e1 !important;
  color: #718196 !important;
}

.lc.done .dot {
  background: #2f7df6 !important;
  border-color: #2f7df6 !important;
  color: #ffffff !important;
}

.lc.cur .dot {
  background: #ffffff !important;
  border-color: #2f7df6 !important;
  color: #2165c6 !important;
  box-shadow: 0 0 0 4px #eaf3ff !important;
}

.lc .bar,
.timeline::before {
  background: #dce4ec !important;
}

.lc.done .bar {
  background: #2f7df6 !important;
}

.tev .tdot {
  border-color: #2f7df6 !important;
}

.tev .tdot i {
  background: #2f7df6 !important;
}

.tev .tbox,
.assignment-total {
  background: #f8fafc !important;
  border-color: #e1e7ef !important;
  color: #66788d !important;
}

.tev .tbox b {
  color: #2f435b !important;
}

.prog,
.site-progress-track {
  background: #e8edf3 !important;
}

.prog i {
  background: #2f7df6 !important;
}

/* ---------- Field / technician workflow ---------- */
.technician-app-shell {
  --tech-canvas: #f5f7fb;
  --tech-surface: #ffffff;
  --tech-surface-raised: #f8fafc;
  --tech-surface-soft: #f7f9fc;
  --tech-input: #ffffff;
  --tech-border: #dbe3ed;
  --tech-border-strong: #d1dce7;
  --tech-text: #24364d;
  --tech-muted: #6f8094;
  --tech-faint: #8d9bab;
  --tech-accent: #2f7df6;
  --tech-accent-soft: #eaf3ff;
  color-scheme: light !important;
  background: #f5f7fb !important;
  color: #24364d !important;
}

.technician-app-shell .technician-mobile-bar {
  background: rgba(255,255,255,.98) !important;
  border-bottom-color: #dbe3ed !important;
}

.technician-app-shell .technician-eyebrow,
.technician-app-shell .eyebrow,
.technician-profile-card small,
.technician-user-text small {
  color: #2d70d1 !important;
}

.technician-app-shell .tech-dashboard-stat {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
}

.technician-app-shell .tech-dashboard-stat span {
  color: #73849a !important;
}

.technician-app-shell .tech-dashboard-stat b {
  color: #17283f !important;
}

.technician-app-shell .tech-dashboard-stat small,
.technician-app-shell .tech-dashboard-site small,
.technician-app-shell .tech-dashboard-list-item small,
.technician-app-shell .tech-dashboard-action span,
.technician-app-shell .tech-dashboard-empty {
  color: #7b8b9d !important;
}

.technician-app-shell .tech-dashboard-action {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
}

.technician-app-shell .tech-dashboard-action:hover {
  background: #f3f8ff !important;
  border-color: #a8ccff !important;
}

.technician-app-shell :is(
  .field-step,
  .step,
  .stage7-step,
  .closeout-step,
  .stepper .step,
  .stage7-progress .stage7-step,
  .closeout-stepper .closeout-step
) {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
  color: #52657d !important;
}

.technician-app-shell :is(
  .field-step,
  .step,
  .stage7-step,
  .closeout-step
).is-current,
.technician-app-shell :is(
  .field-step,
  .step,
  .stage7-step,
  .closeout-step
).current,
.technician-app-shell :is(
  .stepper .step.current,
  .stage7-progress .stage7-step.current,
  .closeout-stepper .closeout-step.current
) {
  background: #eaf3ff !important;
  border-color: #8ebcff !important;
  color: #205fb9 !important;
}

.technician-app-shell :is(
  .field-step,
  .step,
  .stage7-step,
  .closeout-step
).is-complete,
.technician-app-shell :is(
  .field-step,
  .step,
  .stage7-step,
  .closeout-step
).complete,
.technician-app-shell :is(
  .stepper .step.complete,
  .stage7-progress .stage7-step.complete,
  .closeout-stepper .closeout-step.complete
) {
  background: #eaf8f1 !important;
  border-color: #bfe8d3 !important;
  color: #138253 !important;
}

.technician-app-shell :is(
  .field-stepper,
  .stepper,
  .stage7-progress,
  .closeout-stepper
) > i,
.technician-app-shell .connector,
.technician-app-shell .closeout-connector {
  border-color: #cdd8e3 !important;
  background: #cdd8e3 !important;
}

.field-site-symbol,
.field-next-number {
  background: #eaf3ff !important;
  color: #2f7df6 !important;
}

.field-site-summary h2 {
  color: #1f334b !important;
}

.field-site-summary > div > small,
.field-pickup-summary small,
.field-custody-preview small {
  color: #2d70d1 !important;
}

.field-site-summary dl > div,
.field-pickup-summary > div,
.field-stat-list > div {
  border-color: #edf1f5 !important;
}

/* User cards that were dark in the technician portal */
.technician-app-shell :is(
  .jobs-user,
  .tech-dashboard-user,
  .stage7-user,
  .closeout-user
) {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
  color: #24364d !important;
  box-shadow: var(--shadow) !important;
}

.technician-app-shell :is(
  .jobs-user,
  .tech-dashboard-user,
  .stage7-user,
  .closeout-user
) b {
  color: #1d3048 !important;
}

.technician-app-shell :is(
  .jobs-user,
  .tech-dashboard-user,
  .stage7-user,
  .closeout-user
) small,
.technician-app-shell :is(
  .jobs-user,
  .stage7-user,
  .closeout-user
) span {
  color: #74859a !important;
}

/* ---------- Map / photo / mobile-preview helpers ---------- */
.map {
  border-color: #dbe3ed !important;
  background:
    radial-gradient(circle at 30% 40%, rgba(47,125,246,.05), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(18,165,107,.04), transparent 40%),
    linear-gradient(#f7f9fc, #eef3f8) !important;
}

.map::before {
  background-image:
    linear-gradient(#e5ebf1 1px, transparent 1px),
    linear-gradient(90deg, #e5ebf1 1px, transparent 1px) !important;
}

.ph {
  border-color: #dbe3ed !important;
  background: linear-gradient(135deg, #eef2f6, #f7f9fb) !important;
}

.screen {
  background: #f5f7fb !important;
}

.mnav,
.mcard {
  background: #ffffff !important;
  border-color: #dbe3ed !important;
  color: #24364d !important;
}

.mcard .mrow {
  border-bottom-color: #edf1f5 !important;
}

.mbtn {
  background: #2f7df6 !important;
}

.mbtn.alt,
.stepnav button {
  background: #ffffff !important;
  border-color: #d6e0ea !important;
  color: #61738a !important;
}

.stepnav button.on {
  background: #eaf3ff !important;
  border-color: #bcd8ff !important;
  color: #1f65c6 !important;
}

/* ---------- Disabled controls ---------- */
.form-grid input:disabled,
.form-grid select:disabled,
.form-grid textarea:disabled,
.inline-form input:disabled,
.inline-form select:disabled,
.upload-field input:disabled,
.settings-card input:disabled,
.settings-card select:disabled,
.settings-card textarea:disabled,
.technician-app-shell :is(input, select, textarea, button):disabled,
.technician-app-shell :is(.btn, .stage7-button, .closeout-button).disabled {
  background: #f1f4f7 !important;
  border-color: #e0e6ec !important;
  color: #97a4b3 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* ---------- Global scrollbar ---------- */
html,
body,
.main,
.content,
.tablewrap,
.technician-table-scroll,
.assignment-table-wrap,
.searchable-select-menu {
  scrollbar-color: #c7d1dc #f5f7fb !important;
  scrollbar-width: thin;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.tablewrap::-webkit-scrollbar-track,
.technician-table-scroll::-webkit-scrollbar-track,
.assignment-table-wrap::-webkit-scrollbar-track,
.searchable-select-menu::-webkit-scrollbar-track {
  background: #f5f7fb !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.tablewrap::-webkit-scrollbar-thumb,
.technician-table-scroll::-webkit-scrollbar-thumb,
.assignment-table-wrap::-webkit-scrollbar-thumb,
.searchable-select-menu::-webkit-scrollbar-thumb {
  border-color: #f5f7fb !important;
  background: #c7d1dc !important;
}

/* ---------- Responsive light shell ---------- */
@media (max-width: 900px) {
  .content,
  .technician-app-shell .technician-content {
    background: #f5f7fb !important;
  }
}

@media (max-width: 820px) {
  .topbar,
  .technician-app-shell .technician-mobile-bar {
    background: rgba(255,255,255,.98) !important;
  }

  .rail,
  .technician-rail,
  .technician-app-shell .technician-rail {
    background: #ffffff !important;
    box-shadow: 12px 0 34px rgba(15,23,42,.12) !important;
  }
}




/* =========================================================
   Technician light-theme readability fixes
   Keep this at the very bottom of app.css
   ========================================================= */

/* Standard technician text */
.technician-app-shell {
  color: #24364d !important;
}

.technician-app-shell :is(
  .tech-dashboard-site b,
  .tech-dashboard-list-item b,
  .tech-dashboard-list-item span,
  .tech-dashboard-action b,
  .summary-card b,
  .field-stat-list dd,
  .compact-dl dd,
  .card .bd dd
) {
  color: #24364d !important;
}

/* Secondary descriptions and IDs */
.technician-app-shell :is(
  .tech-dashboard-site small,
  .tech-dashboard-list-item small,
  .tech-dashboard-action span,
  .tech-dashboard-empty,
  .summary-card small,
  .field-stat-list dt,
  .compact-dl dt
) {
  color: #65758a !important;
}

/* Dashboard table text */
.technician-app-shell .tech-dashboard-table tbody td {
  color: #33475f !important;
}

.technician-app-shell .tech-dashboard-table tbody td a:not(.tech-dashboard-open) {
  color: #2165c6 !important;
}

.technician-app-shell .tech-dashboard-site b {
  color: #1b3048 !important;
}

.technician-app-shell .tech-dashboard-site small {
  color: #60748c !important;
}

/* Dashboard workflow-stage pills */
.technician-app-shell .tech-dashboard-pill {
  background: #e7f7f6 !important;
  border: 1px solid #bfe7e4 !important;
  color: #0b6f73 !important;
  font-weight: 700 !important;
}

.technician-app-shell .tech-dashboard-pill.attention {
  background: #fff4dc !important;
  border-color: #efd69a !important;
  color: #8a5700 !important;
}

/* All standard status pills */
.technician-app-shell .pill {
  font-weight: 700 !important;
}

.technician-app-shell .st-blue {
  background: #eaf2ff !important;
  border-color: #c7dcff !important;
  color: #1f5fc4 !important;
}

.technician-app-shell .st-indigo {
  background: #efedff !important;
  border-color: #d6d2ff !important;
  color: #514bc4 !important;
}

.technician-app-shell .st-teal {
  background: #e6f7f6 !important;
  border-color: #bfe7e4 !important;
  color: #0b7477 !important;
}

.technician-app-shell .st-green {
  background: #e8f8ef !important;
  border-color: #bfe7d0 !important;
  color: #087a49 !important;
}

.technician-app-shell .st-amber {
  background: #fff4dc !important;
  border-color: #efd69a !important;
  color: #8a5700 !important;
}

.technician-app-shell .st-red {
  background: #fff0f2 !important;
  border-color: #ffcbd1 !important;
  color: #bd293b !important;
}

.technician-app-shell .st-violet {
  background: #f2ecff !important;
  border-color: #ded0ff !important;
  color: #6735b5 !important;
}

.technician-app-shell .st-slate {
  background: #eaf0f5 !important;
  border-color: #ccd8e3 !important;
  color: #40566d !important;
}

/* Workflow page information */
.technician-app-shell :is(
  .field-site-summary,
  .field-pickup-summary,
  .summary-card,
  .card,
  .panel
) :is(p, dd, li) {
  color: #33475f;
}

.technician-app-shell :is(
  .field-site-summary,
  .field-pickup-summary,
  .summary-card,
  .card,
  .panel
) :is(dt, small) {
  color: #6b7d92;
}

/* Links, serials, equipment IDs and work-order IDs */
.technician-app-shell :is(
  .tid,
  .mono,
  .site-cell small,
  table td a
) {
  color: #1f65c6 !important;
}

/* Ensure disabled elements remain readable */
.technician-app-shell :is(
  input,
  select,
  textarea,
  button
):disabled,
.technician-app-shell :is(
  .btn,
  .stage7-button,
  .closeout-button
).disabled {
  color: #748397 !important;
  background: #edf1f5 !important;
  border-color: #d5dde6 !important;
  opacity: 1 !important;
}

/* Keep primary disabled buttons visually distinct */
.technician-app-shell .btn.primary:disabled,
.technician-app-shell .btn.primary.disabled {
  background: #dbe5ef !important;
  border-color: #cedae6 !important;
  color: #65768a !important;
  box-shadow: none !important;
}


/* ========================================================================
   NOVUS360 — FINAL SHARED HYBRID SHELL
   Dark navy sidebar + topbar with light application workspace.
   This block MUST remain at the very END of app.css.
   ======================================================================== */

:root {
  color-scheme: light;

  /* Light application workspace */
  --paper: #f5f7fb;
  --card: #ffffff;
  --line: #d9e3ee;
  --line2: #edf1f5;

  --text: #14233a;
  --muted: #65758a;
  --faint: #8a99ab;

  /* Main interaction blue */
  --teal: #2f7df6;
  --teald: #1d66d4;
  --tealw: #eaf3ff;

  --blue: #2f7df6;
  --bluew: #eaf3ff;

  --indigo: #5b55e7;
  --indigow: #efedff;

  --green: #13a56b;
  --greenw: #e7f8f1;

  --amber: #f5a30c;
  --amberw: #fff6df;

  --red: #ff4d5e;
  --redw: #fff0f2;

  --radius: 14px;
  --shadow:
    0 1px 2px rgba(15,23,42,.035),
    0 8px 24px rgba(15,23,42,.045);

  /* Dark shared shell */
  --shell-navy: #061a34;
  --shell-navy-2: #071d3b;
  --shell-navy-3: #0a2447;
  --shell-border: #18395d;
  --shell-muted: #9cb1ca;
  --shell-text: #f3f7fc;
  --shell-hover: rgba(255,255,255,.055);
  --shell-active: #1f6ff0;
}

/* ------------------------------------------------------------------------
   LIGHT MAIN WORKSPACE
   ------------------------------------------------------------------------ */

html,
body,
.app,
.main,
.content,
.main-content,
.page-content,
.content-wrapper,
.app-content {
  background: #f5f7fb !important;
  color: var(--text) !important;
}

body {
  color-scheme: light !important;
  font-family:
    Inter,
    Roboto,
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif !important;
}

.main {
  min-height: 100vh;
}

.content {
  background: #f5f7fb !important;
}

/* ------------------------------------------------------------------------
   DARK NAVY LEFT SIDEBAR
   ------------------------------------------------------------------------ */

.rail,
.technician-rail,
.technician-app-shell .technician-rail {
  background:
    linear-gradient(
      180deg,
      #061a34 0%,
      #06182f 52%,
      #05162b 100%
    ) !important;

  border-right: 1px solid #18395d !important;
  color: #d6e1ee !important;

  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.018),
    8px 0 28px rgba(5,22,43,.08) !important;
}

/* Logo area remains dark */
.rail .brand,
.rail .brand.brand-image,
.technician-app-shell .brand.brand-image {
  background: transparent !important;
  border-bottom: 1px solid rgba(139,174,211,.18) !important;
}

.rail .brand.brand-image:hover,
.technician-app-shell .brand.brand-image:hover {
  background: rgba(255,255,255,.025) !important;
}

.brand b {
  color: #ffffff !important;
}

.brand small {
  color: #8da5bf !important;
}

/* Group labels */
.navgrp .lbl {
  color: #9eb1c7 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .145em !important;
  opacity: .92;
}

/* Navigation */
.nav {
  min-height: 40px;
  margin-bottom: 3px;
  border: 1px solid transparent !important;
  border-radius: 8px !important;

  background: transparent !important;
  color: #eef4fb !important;

  font-weight: 600 !important;
}

.nav-icon,
.nav .nav-icon,
.nav svg {
  color: #d7e5f3 !important;
  opacity: .95 !important;
}

.nav:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(146,184,224,.09) !important;
  color: #ffffff !important;
}

.nav:hover .nav-icon,
.nav:hover svg {
  color: #ffffff !important;
}

/* Strong blue selected item like reference */
.nav.active {
  background:
    linear-gradient(
      135deg,
      #2878f5 0%,
      #1764e9 100%
    ) !important;

  border-color: rgba(112,173,255,.58) !important;

  color: #ffffff !important;

  box-shadow:
    0 5px 14px rgba(17,91,221,.24),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
}

.nav.active::before {
  display: none !important;
}

.nav.active .nav-icon,
.nav.active svg {
  color: #ffffff !important;
}

.nav .ct {
  background: rgba(255,255,255,.08) !important;
  color: #c8d8e8 !important;
}

.nav.active .ct {
  background: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
}

/* Sidebar footer */
.railfoot {
  background: rgba(3,16,34,.20) !important;
  border-top: 1px solid rgba(139,174,211,.18) !important;
}

.railfoot .av {
  background: #ffffff !important;
  color: #27395d !important;
  border: 1px solid #dce5f2;
}

.railfoot .who {
  color: #ffffff !important;
}

.railfoot .who small {
  color: #adc0d5 !important;
}

.signout {
  border-color: rgba(145,178,216,.22) !important;
  background: rgba(255,255,255,.035) !important;
  color: #d6e3f0 !important;
}

.signout:hover {
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
}

/* Dark sidebar scrollbar */
.railscroll {
  scrollbar-color: #365778 transparent !important;
}

.railscroll::-webkit-scrollbar-track {
  background: transparent !important;
}

.railscroll::-webkit-scrollbar-thumb {
  background: #365778 !important;
}

/* ------------------------------------------------------------------------
   DARK NAVY TOPBAR
   ------------------------------------------------------------------------ */

.topbar,
.technician-app-shell .technician-topbar {
  background:
    linear-gradient(
      90deg,
      #061a34 0%,
      #071c39 48%,
      #06182f 100%
    ) !important;

  border-bottom: 1px solid #18395d !important;

  color: #ffffff !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.025),
    0 5px 18px rgba(5,24,48,.11) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Breadcrumb */
.crumbs {
  color: #d3deea !important;
}

.crumbs .c {
  color: #eef4fb !important;
}

.crumbs .c:hover {
  color: #8dc0ff !important;
}

.crumbs .sep {
  color: #8ea4bd !important;
}

.crumbs .cur {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Search box in topbar */
.topbar .search input,
.technician-app-shell .technician-topbar .search input {
  background: rgba(6,24,50,.72) !important;
  border: 1px solid #355375 !important;
  color: #f4f8fc !important;
  color-scheme: dark !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.topbar .search input::placeholder,
.technician-app-shell .technician-topbar .search input::placeholder {
  color: #b5c5d8 !important;
}

.topbar .search input:hover,
.technician-app-shell .technician-topbar .search input:hover {
  background: rgba(10,34,66,.82) !important;
  border-color: #496a91 !important;
}

.topbar .search input:focus,
.technician-app-shell .technician-topbar .search input:focus {
  background: #0a2547 !important;
  border-color: #5f9eff !important;
  box-shadow: 0 0 0 3px rgba(74,145,255,.14) !important;
}

.topbar .search svg,
.topbar .search-symbol {
  color: #c3d2e3 !important;
}

/* Notification button */
.topbar .bell,
.topbar .menubtn,
.technician-app-shell .technician-topbar .bell {
  background: rgba(6,24,50,.72) !important;
  border: 1px solid #355375 !important;
  color: #f0f5fb !important;
}

.topbar .bell:hover,
.topbar .menubtn:hover,
.technician-app-shell .technician-topbar .bell:hover {
  background: #0a2547 !important;
  border-color: #496a91 !important;
}

.topbar .bell .dot {
  border-color: #061a34 !important;
}

/* ------------------------------------------------------------------------
   DASHBOARD PAGE HEADING
   ------------------------------------------------------------------------ */

.pagehead {
  align-items: center !important;
}

h1.page {
  color: #14233a !important;
  font-weight: 800 !important;
}

/* Support page heading icon tile */
.pagehead > .page-icon,
.pagehead .page-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;

  border: 1px solid #d6e5fb !important;
  border-radius: 12px !important;

  background: #f4f8ff !important;
  color: #2f7df6 !important;

  box-shadow:
    0 2px 5px rgba(15,23,42,.025) !important;
}

.pagehead p.sub {
  color: #65758a !important;
}

/* Right-side dashboard action buttons */
.pagehead .actions .btn {
  min-height: 42px;
  border-radius: 9px !important;
}

.pagehead .actions .btn:not(.primary) {
  background: #071b37 !important;
  border-color: #143c68 !important;
  color: #ffffff !important;

  box-shadow:
    0 4px 10px rgba(6,27,55,.10) !important;
}

.pagehead .actions .btn:not(.primary):hover {
  background: #0b2850 !important;
  border-color: #24548a !important;
}

/* Live operational data button/tag */
.phase-tag,
.pagehead .actions .phase-tag {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;

  border: 1px solid #143c68 !important;
  border-radius: 9px !important;

  background: #071b37 !important;
  color: #28dc8d !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ------------------------------------------------------------------------
   DASHBOARD KPI CARDS
   ------------------------------------------------------------------------ */

.g4 {
  gap: 14px !important;
}

.kpi {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;

  min-height: 162px !important;
  padding: 20px 18px 18px !important;

  border: 1px solid #dce4ed !important;
  border-radius: 14px !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 78%,
      #fbfcfe 100%
    ) !important;

  box-shadow:
    0 1px 2px rgba(15,23,42,.035),
    0 8px 24px rgba(15,23,42,.045) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.kpi:hover {
  transform: translateY(-2px);

  border-color: #cfdbe8 !important;

  box-shadow:
    0 3px 8px rgba(15,23,42,.04),
    0 14px 28px rgba(15,23,42,.065) !important;
}

.kpi > * {
  position: relative;
  z-index: 2;
}

/* Large lower-right semantic circles */
.kpi::after {
  content: "";
  position: absolute;
  z-index: 0;

  right: -34px;
  bottom: -48px;

  width: 126px;
  height: 126px;

  border-radius: 50%;

  background: rgba(47,125,246,.085);

  pointer-events: none;
}

.g4 .kpi:nth-child(1)::after {
  background: rgba(47,125,246,.085);
}

.g4 .kpi:nth-child(2)::after {
  background: rgba(91,85,231,.080);
}

.g4 .kpi:nth-child(3)::after {
  background: rgba(18,165,107,.085);
}

.g4 .kpi:nth-child(4)::after {
  background: rgba(255,77,94,.075);
}

.kpi .k-lbl {
  color: #52677f !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase;
}

.kpi .k-val {
  margin-top: 25px !important;

  color: #11213a !important;

  font-family:
    Inter,
    Roboto,
    "Segoe UI",
    sans-serif !important;

  font-size: 33px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.kpi .k-delta,
.kpi .k-sub,
.kpi small {
  margin-top: 12px !important;
  color: #61758e !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.5;
}

/* Optional KPI icon tiles if markup provides them */
.kpi .k-icon,
.kpi .kpi-icon,
.kpi > .icon {
  position: absolute !important;
  z-index: 3;
  top: 18px;
  right: 18px;

  width: 41px;
  height: 41px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: #edf4ff !important;
  border: 1px solid #d6e5fb !important;

  color: #2f7df6 !important;
}

.g4 .kpi:nth-child(2) :is(.k-icon,.kpi-icon,.icon) {
  background: #f3efff !important;
  border-color: #e3dafa !important;
  color: #5b55e7 !important;
}

.g4 .kpi:nth-child(3) :is(.k-icon,.kpi-icon,.icon) {
  background: #eaf8f2 !important;
  border-color: #cfeee0 !important;
  color: #13a56b !important;
}

.g4 .kpi:nth-child(4) :is(.k-icon,.kpi-icon,.icon) {
  background: #fff0f2 !important;
  border-color: #ffd5da !important;
  color: #ff4d5e !important;
}

/* ------------------------------------------------------------------------
   DASHBOARD CHART / STATUS PANELS
   ------------------------------------------------------------------------ */

.card,
.tablewrap,
.reportcard,
.settings-card,
.form-card {
  background: #ffffff !important;
  border-color: #dce4ed !important;

  box-shadow:
    0 1px 2px rgba(15,23,42,.03),
    0 7px 20px rgba(15,23,42,.035) !important;
}

.card .hd,
.tbar,
.form-card > .hd {
  background: #ffffff !important;
  border-bottom: 1px solid #e6ebf1 !important;
}

.card .hd h3,
.tbar > b,
.tbar strong {
  color: #17283f !important;
  font-weight: 800 !important;
}

.card .hd .sub,
.tbar .rt {
  color: #6c7f94 !important;
}

.card .bd,
.form-card > .bd {
  background: #ffffff !important;
  color: #33475f !important;
}

/* Clean status list rows similar to the reference chart legend */
.status-summary .summary-row,
.summary-row {
  min-height: 40px;

  padding: 8px 10px !important;

  border: 1px solid #e2e8ef !important;
  border-radius: 8px !important;

  background: #ffffff !important;
}

.status-summary .summary-row + .summary-row,
.summary-row + .summary-row {
  margin-top: 7px;
}

.summary-row:hover {
  background: #f8faff !important;
}

/* ------------------------------------------------------------------------
   TABLES
   ------------------------------------------------------------------------ */

thead th {
  background: #f8fafc !important;
  border-bottom-color: #e3e9f0 !important;
  color: #7b8c9f !important;
}

tbody tr {
  background: #ffffff !important;
}

tbody tr:nth-child(even) {
  background: #fbfcfe !important;
}

tbody tr:hover {
  background: #f3f7fc !important;
}

tbody td {
  border-bottom-color: #edf1f5 !important;
  color: #42566f !important;
}

.rowmain,
td .rowmain {
  color: #21344c !important;
}

.rowsub,
td .rowsub {
  color: #8291a3 !important;
}

.tid,
.mono {
  color: #276fd5 !important;
}

/* ------------------------------------------------------------------------
   SCROLLBARS
   ------------------------------------------------------------------------ */

html,
body,
.main,
.content,
.tablewrap,
.assignment-table-wrap,
.searchable-select-menu {
  scrollbar-color: #c5d0dc #f5f7fb !important;
  scrollbar-width: thin;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.tablewrap::-webkit-scrollbar-track,
.assignment-table-wrap::-webkit-scrollbar-track,
.searchable-select-menu::-webkit-scrollbar-track {
  background: #f5f7fb !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.tablewrap::-webkit-scrollbar-thumb,
.assignment-table-wrap::-webkit-scrollbar-thumb,
.searchable-select-menu::-webkit-scrollbar-thumb {
  border: 2px solid #f5f7fb !important;
  border-radius: 999px;
  background: #c5d0dc !important;
}

/* ------------------------------------------------------------------------
   RESPONSIVE SHELL
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .content {
    background: #f5f7fb !important;
  }
}

@media (max-width: 820px) {
  .topbar {
    background: #061a34 !important;
  }

  .rail,
  .technician-rail,
  .technician-app-shell .technician-rail {
    background:
      linear-gradient(
        180deg,
        #061a34,
        #05162b
      ) !important;

    box-shadow:
      12px 0 34px rgba(5,22,43,.28) !important;
  }
}


/* ========================================================================
   NOVUS360 — GREY WORKSPACE SURFACE OVERRIDE
   Replaces pure-white workspace surfaces with restrained enterprise greys.
   Keep this block at the VERY END of app.css.
   ======================================================================== */

:root {
  --grey-canvas: #e9eef4;
  --grey-canvas-soft: #eef2f6;
  --grey-surface: #f4f6f9;
  --grey-surface-raised: #f7f9fb;
  --grey-surface-soft: #edf1f5;
  --grey-border: #d5dde6;
  --grey-border-soft: #e2e7ed;
  --grey-hover: #e8eef5;
}

/* Main workspace */
html,
body,
.app,
.main,
.content,
.main-content,
.page-content,
.content-wrapper,
.app-content {
  background: var(--grey-canvas) !important;
}

/* Generic content cards and panels */
.card,
.form-card,
.settings-card,
.reportcard,
.detailhead,
.tablewrap,
.kpi,
.technician-profile-card,
.technician-job-card,
.technician-job-detail-head,
.technician-empty-state,
.field-stepper,
.field-site-summary,
.field-pickup-summary,
.assignment-group,
.equipment-assignment-section {
  background: var(--grey-surface) !important;
  border-color: var(--grey-border) !important;
}

/* Card headers */
.card .hd,
.form-card > .hd,
.tbar {
  background:
    linear-gradient(
      180deg,
      #f7f9fb 0%,
      #f1f4f7 100%
    ) !important;
  border-bottom-color: var(--grey-border-soft) !important;
}

/* Card bodies */
.card .bd,
.form-card > .bd {
  background: var(--grey-surface) !important;
}

/* KPI cards */
.kpi {
  background:
    linear-gradient(
      180deg,
      #f7f9fb 0%,
      #f2f5f8 76%,
      #edf1f5 100%
    ) !important;
  border-color: #d2dbe5 !important;
}

.kpi:hover {
  background:
    linear-gradient(
      180deg,
      #f9fafc 0%,
      #f3f6f9 74%,
      #edf2f6 100%
    ) !important;
  border-color: #c8d3df !important;
}

/* Header icon tiles */
.pagehead > .page-icon,
.pagehead .page-icon {
  background: #edf2f8 !important;
  border-color: #d5e0ec !important;
}

/* Inputs outside dark topbar */
.form-grid input,
.form-grid select,
.form-grid textarea,
.filterbar input,
.filterbar select,
.inline-form input,
.inline-form select,
.inline-form textarea,
.upload-field input,
.upload-field select,
.upload-field textarea,
.settings-card input,
.settings-card select,
.settings-card textarea,
.field-location-form input,
.field-location-form select,
.field-location-form textarea,
.field-verification-form input,
.field-verification-form select,
.field-verification-form textarea,
.assignment-search-input,
.searchable-select-input,
.assignment-search input {
  background: #f7f9fb !important;
  border-color: #cfd8e2 !important;
}

.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover,
.filterbar input:hover,
.filterbar select:hover,
.inline-form input:hover,
.inline-form select:hover,
.inline-form textarea:hover,
.upload-field input:hover,
.upload-field select:hover,
.upload-field textarea:hover,
.settings-card input:hover,
.settings-card select:hover,
.settings-card textarea:hover,
.field-location-form input:hover,
.field-location-form select:hover,
.field-location-form textarea:hover,
.field-verification-form input:hover,
.field-verification-form select:hover,
.field-verification-form textarea:hover,
.assignment-search-input:hover,
.searchable-select-input:hover {
  background: #fafbfd !important;
  border-color: #b9c6d3 !important;
}

/* Native dropdowns */
select option,
select optgroup {
  background: #f4f6f9 !important;
  color: #24364d !important;
}

/* Searchable select popup */
.searchable-select-menu {
  background: #f4f6f9 !important;
  border-color: #cfd8e2 !important;
}

.searchable-select-option:hover,
.searchable-select-option.is-active {
  background: #e5edf7 !important;
}

/* Tables */
thead th,
.assignment-stock-table thead th {
  background: #e8edf3 !important;
  border-color: #d7dfe8 !important;
}

tbody tr,
.assignment-stock-table tbody tr:nth-child(odd) {
  background: #f5f7f9 !important;
}

tbody tr:nth-child(even),
.assignment-stock-table tbody tr:nth-child(even) {
  background: #eef2f6 !important;
}

tbody tr:hover,
.assignment-stock-table tbody tr:hover {
  background: #e4ebf3 !important;
}

/* Toolbars and action strips */
.form-actions,
.standalone-actions,
.assignment-toolbar,
.assignment-pagination,
.assignment-group-foot {
  background: #edf1f5 !important;
  border-color: #d6dee7 !important;
}

/* Equipment assignment */
.assignment-group,
.equipment-assignment-section {
  background: #f3f5f8 !important;
}

.assignment-main-header,
.assignment-group-head {
  background:
    linear-gradient(
      180deg,
      #eef2f6 0%,
      #e8edf3 100%
    ) !important;
}

.assignment-stock-table tbody tr.is-selected {
  background: #e3f4ec !important;
}

.assignment-checkbox-label span {
  background: #f7f9fb !important;
}

/* Notes */
.note,
.field-info-banner {
  background: #e8f0f9 !important;
}

.warnnote,
.field-status-warning {
  background: #f6edd9 !important;
}

/* Secondary panels */
.uploadzone,
.field-document,
.field-next-step,
.field-readiness-item,
.field-arrival-photo,
.field-evidence-card,
.stock-choice,
.tech-col,
.jcard {
  background: #eef2f6 !important;
  border-color: #d6dee7 !important;
}

.uploadzone:hover,
.field-document:hover,
.field-evidence-card:hover,
.stock-choice:hover {
  background: #e5edf6 !important;
}

/* Definition rows / timelines */
.tev .tbox,
.assignment-total {
  background: #edf1f5 !important;
  border-color: #d8e0e8 !important;
}

/* Tabs */
.tabs,
.site-detail-tabs {
  background: #eef2f6 !important;
  border-color: #d5dde6 !important;
}

.tab:hover {
  background: #e7edf4 !important;
}

.tab.active {
  background: #dce9f9 !important;
}

/* Generic secondary buttons */
.btn:not(.primary):not(.danger):not(.ghost) {
  background: #2573c1 !important;
  border-color: #cbd5df !important;
  color: #ffffff !important;
}

.btn:not(.primary):not(.danger):not(.ghost):hover {
  background: #1b4c7d !important;
  border-color: #b8c5d2 !important;
}

/* Keep topbar dark even though shared button rules are grey */
.topbar .bell,
.topbar .menubtn,
.topbar .search input,
.topbar .btn,
.technician-app-shell .technician-topbar .bell,
.technician-app-shell .technician-topbar .search input {
  background: rgba(6,24,50,.72) !important;
  border-color: #355375 !important;
  color: #f4f8fc !important;
}

/* Sidebar footer avatar can stay light, but not pure white */
.railfoot .av {
  background: #e8edf5 !important;
}

/* Scrollbars */
html,
body,
.main,
.content,
.tablewrap,
.assignment-table-wrap,
.searchable-select-menu {
  scrollbar-color: #b7c3cf var(--grey-canvas) !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.tablewrap::-webkit-scrollbar-track,
.assignment-table-wrap::-webkit-scrollbar-track,
.searchable-select-menu::-webkit-scrollbar-track {
  background: var(--grey-canvas) !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.tablewrap::-webkit-scrollbar-thumb,
.assignment-table-wrap::-webkit-scrollbar-thumb,
.searchable-select-menu::-webkit-scrollbar-thumb {
  border-color: var(--grey-canvas) !important;
  background: #b7c3cf !important;
}

@media (max-width: 900px) {
  .content {
    background: var(--grey-canvas) !important;
  }
}














/* ============================================================
   Responsive Technician Workflow Navigation
   ============================================================ */

.technician-app-shell .technician-workflow-stepper {
  display: grid !important;

  /*
   Seven stage columns with six smaller connector columns.
   The stages shrink proportionally instead of overflowing.
  */
  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr) minmax(12px, .28fr)
    )
    minmax(0, 1fr) !important;

  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px !important;
  overflow: visible !important;
  overflow-x: visible !important;
  box-sizing: border-box !important;
}

.technician-app-shell
.technician-workflow-stepper
> .technician-workflow-link {
  display: grid !important;
  grid-template-columns:
    30px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 7px !important;
  align-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 7px 6px !important;
  box-sizing: border-box !important;

  color: inherit;
  text-decoration: none;
}

.technician-app-shell
.technician-workflow-link
> span {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;

  width: 30px !important;
  height: 30px !important;
  flex: none !important;
}

.technician-app-shell
.technician-workflow-link
> b {
  grid-column: 2 !important;
  grid-row: 1 !important;

  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.technician-app-shell
.technician-workflow-link
> small {
  grid-column: 2 !important;
  grid-row: 2 !important;

  min-width: 0 !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

/* Connector lines */
.technician-app-shell
.technician-workflow-stepper
> i {
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Completed and current stages are clickable. */
.technician-app-shell
a.technician-workflow-link {
  cursor: pointer !important;

  transition:
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.technician-app-shell
a.technician-workflow-link:hover {
  border-color: var(--blue) !important;
  background: var(--bluew) !important;
  box-shadow:
    0 4px 12px rgba(37, 99, 235, .12) !important;
  transform: translateY(-1px);
}

.technician-app-shell
a.technician-workflow-link:focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 2px !important;
}

/* The current stage remains clickable. */
.technician-app-shell
a.technician-workflow-link.is-current {
  cursor: pointer !important;
}

/* Upcoming stages remain non-clickable. */
.technician-app-shell
.technician-workflow-link.is-locked {
  cursor: default !important;
  opacity: .55 !important;
}

.technician-app-shell
.technician-workflow-link.is-locked:hover {
  transform: none !important;
  box-shadow: none !important;
}

/*
   Smaller laptops and tablets:
   hide connector lines and display stages in a grid.
*/
@media (max-width: 1200px) {
  .technician-app-shell
  .technician-workflow-stepper {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .technician-app-shell
  .technician-workflow-stepper
  > i {
    display: none !important;
  }
}

/* Small tablets */
@media (max-width: 800px) {
  .technician-app-shell
  .technician-workflow-stepper {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    padding: 11px !important;
  }
}

/* Phones */
@media (max-width: 480px) {
  .technician-app-shell
  .technician-workflow-stepper {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }
}





/* Technician Dashboard and My Jobs blue Open buttons */
.technician-app-shell a.tech-dashboard-open,
.technician-app-shell a.open-link,
.technician-app-shell a.tech-dashboard-open:visited,
.technician-app-shell a.open-link:visited,
.technician-app-shell a.tech-dashboard-open:hover,
.technician-app-shell a.open-link:hover,
.technician-app-shell a.tech-dashboard-open:focus,
.technician-app-shell a.open-link:focus {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  opacity: 1 !important;
  text-decoration: none !important;
}


/* Technician My Jobs tabs */
.technician-app-shell .jobs-tab {
  color: #334155 !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

.technician-app-shell .jobs-tab:hover {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  border-color: #60a5fa !important;
}

.technician-app-shell .jobs-tab.active {
  color: #ffffff !important;
  background: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, .2);
}















/* Stage 7 typed photo evidence rows */
.technician-app-shell .stage7-photo-rows {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.technician-app-shell .stage7-photo-entry {
  padding: 14px;
  border: 1px solid #d7e1ec;
  border-radius: 11px;
  background: #f8fafc;
}

.technician-app-shell .stage7-photo-entry-grid {
  display: grid;
  grid-template-columns:
    minmax(220px, 1fr)
    minmax(250px, 1fr)
    minmax(220px, 1fr)
    auto;
  gap: 12px;
  align-items: end;
}

.technician-app-shell
.stage7-photo-entry
.stage7-field {
  min-width: 0;
}

.technician-app-shell
.stage7-photo-entry
[data-file-help] {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 10px;
}

.technician-app-shell .stage7-remove-photo {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff5f5;
  color: #b42332;
  font-weight: 700;
  cursor: pointer;
}

.technician-app-shell
.stage7-remove-photo:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.technician-app-shell
.stage7-photo-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.technician-app-shell
.stage7-baseband-choice {
  border-left: 4px solid #2f7df6 !important;
}

.technician-app-shell
.stage7-baseband-toggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid #cfe0f5;
  border-radius: 10px;
  background: #f2f7fd;
  cursor: pointer;
}

.technician-app-shell
.stage7-baseband-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #2f7df6;
}

.technician-app-shell
.stage7-baseband-toggle span,
.technician-app-shell
.stage7-baseband-toggle b,
.technician-app-shell
.stage7-baseband-toggle small {
  display: block;
}

.technician-app-shell
.stage7-baseband-toggle small {
  margin-top: 3px;
  color: #64748b;
}

.technician-app-shell
[data-baseband-section][hidden] {
  display: none !important;
}

@media (max-width: 1100px) {
  .technician-app-shell
  .stage7-photo-entry-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .technician-app-shell
  .stage7-photo-entry-grid {
    grid-template-columns: 1fr;
  }

  .technician-app-shell
  .stage7-photo-form-actions {
    flex-direction: column;
  }

  .technician-app-shell
  .stage7-photo-form-actions
  .stage7-button {
    width: 100%;
  }
}











/* Align Stage 7 photo type, file input, notes and remove button */
.technician-app-shell .stage7-photo-entry-grid {
  align-items: start;
}

.technician-app-shell .stage7-photo-entry-grid > .stage7-field {
  display: flex;
  flex-direction: column;
}

.technician-app-shell .stage7-photo-entry-grid > .stage7-field > label {
  min-height: 18px;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
}

.technician-app-shell .stage7-photo-entry-grid select,
.technician-app-shell .stage7-photo-entry-grid input[type="text"],
.technician-app-shell .stage7-photo-entry-grid input[type="file"] {
  height: 40px;
  min-height: 40px;
}

.technician-app-shell .stage7-remove-photo {
  margin-top: 25px;
  height: 40px;
  min-height: 40px;
}


.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.crumbs {
    flex-shrink: 0;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-right .search {
    width: 230px;
    max-width: none;

    margin: 0 !important;
    flex: 0 0 230px;
}

.topbar-ust-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ust-header-logo {
    display: block;
    width: auto;
    height: 28px;
    max-width: 85px;
    object-fit: contain;
}

.topbar-right .bell {
    margin: 0 !important;
    flex: 0 0 auto;
}


@media (max-width: 900px) {

    .topbar-right .search {
        width: 220px;
        max-width: 32vw;
    }

    .ust-header-logo {
        height: 24px;
        max-width: 70px;
    }
}

@media (max-width: 700px) {

    .topbar-right .search {
        display: none;
    }

    .ust-header-logo {
        height: 22px;
        max-width: 60px;
    }
}







/* =========================================================
   USER MANAGEMENT AND PERMISSION MATRIX
   ========================================================= */

.permission-table {
  margin-top: 18px;
  overflow: auto;
}

.permission-table table {
  min-width: 920px;
}

.perm-head,
.perm-cell {
  text-align: center;
  white-space: nowrap;
}

.perm-head label,
.perm-cell label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.perm-cell input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.perm-cell span {
  font-size: 12px;
  color: var(--muted);
}

.access-form > .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;

  margin-top: 16px;
  padding: 14px 18px;

  background: rgba(
    237,
    240,
    243,
    0.96
  );

  border: 1px solid var(--line);
  border-radius: 12px;

  backdrop-filter: blur(8px);
}

.permission-options {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;

  padding: 14px;

  border: 1px solid var(--line);
  border-radius: 10px;
}

.permission-options legend {
  padding: 0 8px;

  font-weight: 600;
  color: var(--text);
}

.access-denied {
  max-width: 640px;

  margin: 8vh auto;

  text-align: center;
}

.access-denied .bd {
  padding: 48px 28px;
}

.access-denied-code {
  margin-bottom: 12px;

  color: var(--blue);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 64px;
  font-weight: 700;
  line-height: 1;
}

.access-denied h1 {
  margin: 0 0 10px;
}

.access-denied p {
  margin: 0 0 24px;

  color: var(--muted);
}

@media (max-width: 900px) {
  .permission-table table {
    min-width: 780px;
  }

  .permission-options {
    gap: 14px;
  }
}


/* ========================================================================== */
/* NOVUS360 — STAGE 7 VERTICAL TECHNICIAN WORKFLOW                            */
/* ========================================================================== */

.stage7-page {
  --s7-navy: #10243d;
  --s7-text: #334a64;
  --s7-muted: #6d8096;
  --s7-border: #d4dee9;
  --s7-border-soft: #e3eaf1;
  --s7-surface: #ffffff;
  --s7-surface-soft: #f7f9fb;
  --s7-blue: #2f7df6;
  --s7-blue-dark: #1d68df;
  --s7-blue-soft: #eaf2ff;
  --s7-green: #0ca66b;
  --s7-green-dark: #087a50;
  --s7-green-soft: #eaf8f1;
  --s7-amber: #c47b08;
  --s7-amber-soft: #fff5dc;
  --s7-red: #d94052;
  --s7-red-soft: #fff0f2;

  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  color: var(--s7-text);
}

.stage7-page *,
.stage7-page *::before,
.stage7-page *::after {
  box-sizing: border-box;
}

.stage7-page [hidden] {
  display: none !important;
}

/* Page heading */

.stage7-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 98px;
  padding: 20px 24px;
  overflow: hidden;
  border: 1px solid #ccd8e5;
  border-radius: 15px;
  background: #f7f9fc;
  box-shadow: 0 8px 24px rgba(15, 35, 58, 0.05);
}

.stage7-heading::before {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--s7-blue);
  content: "";
}

.stage7-heading h1 {
  margin: 3px 0 5px;
  color: var(--s7-navy);
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.stage7-heading p {
  margin: 0;
  color: var(--s7-muted);
  font-size: 12px;
}

.stage7-user {
  min-width: 170px;
  padding: 11px 14px;
  border: 1px solid var(--s7-border);
  border-radius: 10px;
  background: var(--s7-surface);
  text-align: right;
  box-shadow: 0 5px 15px rgba(15, 35, 58, 0.06);
}

.stage7-user b,
.stage7-user small {
  display: block;
}

.stage7-user b {
  color: var(--s7-navy);
  font-size: 12px;
}

.stage7-user small {
  margin-top: 3px;
  color: var(--s7-muted);
  font-size: 10px;
}

/* Site overview */

.stage7-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.42fr);
  align-items: center;
  gap: 24px;
  padding: 17px 20px;
  border: 1px solid var(--s7-border);
  border-radius: 13px;
  background: var(--s7-surface);
  box-shadow: 0 5px 16px rgba(15, 35, 58, 0.04);
}

.stage7-overview-main {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.4fr)
    minmax(150px, 1fr)
    minmax(170px, 1fr);
  align-items: center;
}

.stage7-overview-main > div {
  min-width: 0;
  min-height: 48px;
  padding: 0 20px;
  border-right: 1px solid var(--s7-border-soft);
}

.stage7-overview-main > div:first-child {
  padding-left: 0;
}

.stage7-overview-main > div:last-child {
  border-right: 0;
}

.stage7-overview-label,
.stage7-overview-main strong,
.stage7-overview-main small {
  display: block;
}

.stage7-overview-label {
  margin-bottom: 5px;
  color: var(--s7-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stage7-overview-main strong {
  overflow: hidden;
  color: var(--s7-navy);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage7-overview-main small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--s7-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage7-status-pill,
.stage7-evidence-count,
.stage7-required-key {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.stage7-status-pill {
  border: 1px solid #f0d28a;
  background: var(--s7-amber-soft);
  color: #8d5d08;
}

.stage7-overview-progress {
  min-width: 0;
}

.stage7-overview-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.stage7-overview-progress-copy strong {
  color: var(--s7-navy);
  font-size: 12px;
}

.stage7-overview-progress-copy span {
  overflow: hidden;
  color: var(--s7-blue-dark);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage7-progress-track {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5ebf2;
}

.stage7-progress-track span {
  display: block;
  min-width: 5px;
  height: 100%;
  border-radius: inherit;
  background: var(--s7-blue);
}

/* Vertical workflow */

.stage7-workflow {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.stage7-workflow-step {
  overflow: hidden;
  border: 1px solid var(--s7-border);
  border-radius: 11px;
  background: var(--s7-surface);
  box-shadow: 0 3px 11px rgba(15, 35, 58, 0.025);
}

.stage7-workflow-step.current {
  border-color: #8eb9ff;
  border-left: 4px solid var(--s7-blue);
  box-shadow: 0 8px 22px rgba(47, 125, 246, 0.1);
}

.stage7-workflow-step.complete {
  border-color: #a8dfc7;
  background: var(--s7-green-soft);
}

.stage7-workflow-step.upcoming {
  background: #f8fafc;
}

.stage7-workflow-step > summary {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 11px 44px 11px 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.stage7-workflow-step > summary::-webkit-details-marker {
  display: none;
}

.stage7-workflow-step > summary::after {
  position: absolute;
  top: 50%;
  right: 17px;
  color: var(--s7-muted);
  content: "⌄";
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.18s ease;
}

.stage7-workflow-step[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.stage7-workflow-step.current > summary {
  background: var(--s7-blue-soft);
}

.stage7-workflow-step.complete > summary {
  background: var(--s7-green-soft);
}

.stage7-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: #8592a1;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.stage7-workflow-step.current .stage7-step-marker {
  background: var(--s7-blue);
  box-shadow: 0 0 0 4px rgba(47, 125, 246, 0.12);
}

.stage7-workflow-step.complete .stage7-step-marker {
  background: var(--s7-green);
}

.stage7-step-copy {
  min-width: 0;
}

.stage7-step-copy strong,
.stage7-step-copy small {
  display: block;
}

.stage7-step-copy strong {
  color: var(--s7-navy);
  font-size: 13px;
  font-weight: 700;
}

.stage7-step-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--s7-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage7-step-state {
  min-width: 76px;
  color: var(--s7-muted);
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}

.stage7-workflow-step.current .stage7-step-state {
  color: var(--s7-blue-dark);
}

.stage7-workflow-step.complete .stage7-step-state {
  color: var(--s7-green-dark);
}

.stage7-step-body {
  padding: 20px;
  border-top: 1px solid var(--s7-border-soft);
  background: var(--s7-surface);
}

/* Step content */

.stage7-step-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
}

.stage7-step-intro.compact {
  margin-bottom: 12px;
}

.stage7-step-intro h2,
.stage7-step-intro h3,
.stage7-step-intro p {
  margin: 0;
}

.stage7-step-intro h2 {
  color: var(--s7-navy);
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 18px;
  line-height: 1.25;
}

.stage7-step-intro h3 {
  color: var(--s7-navy);
  font-size: 14px;
}

.stage7-step-intro p {
  margin-top: 4px;
  color: var(--s7-muted);
  font-size: 11px;
}

.stage7-evidence-count {
  flex: 0 0 auto;
  border: 1px solid #b8d1fb;
  background: var(--s7-blue-soft);
  color: var(--s7-blue-dark);
}

.stage7-required-key {
  flex: 0 0 auto;
  border: 1px solid #efcf85;
  background: var(--s7-amber-soft);
  color: #8d5d08;
}

.stage7-required,
.stage7-optional {
  display: inline-flex;
  margin-left: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.stage7-required {
  color: #b96700;
}

.stage7-optional {
  color: var(--s7-muted);
  font-weight: 500;
}

/* Form fields */

.stage7-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.stage7-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.stage7-field.full,
.stage7-checkbox.full {
  grid-column: 1 / -1;
}

.stage7-field label {
  color: #50667f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.stage7-field input,
.stage7-field select,
.stage7-field textarea {
  width: 100%;
  min-height: 41px;
  padding: 9px 11px;
  border: 1px solid #c9d5e2;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  color: var(--s7-navy);
  font: inherit;
  font-size: 11px;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.stage7-field textarea {
  min-height: 80px;
  resize: vertical;
}

.stage7-field input:focus,
.stage7-field select:focus,
.stage7-field textarea:focus {
  border-color: var(--s7-blue);
  box-shadow: 0 0 0 3px rgba(47, 125, 246, 0.12);
}

.stage7-field input[type="file"] {
  padding: 6px;
  background: var(--s7-surface-soft);
}

.stage7-field small {
  color: var(--s7-muted);
  font-size: 9px;
}

/* Actions and buttons */

.stage7-actions,
.stage7-photo-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.stage7-photo-form-actions {
  justify-content: space-between;
}

.stage7-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.stage7-button:not(:disabled):hover {
  transform: translateY(-1px);
}

.stage7-button.primary {
  border-color: var(--s7-blue);
  background: var(--s7-blue);
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(47, 125, 246, 0.2);
}

.stage7-button.primary:not(:disabled):hover {
  border-color: var(--s7-blue-dark);
  background: var(--s7-blue-dark);
}

.stage7-button.secondary {
  border-color: #c8d4e1;
  background: #ffffff;
  color: #38516c;
}

.stage7-button.warning {
  border-color: #d99419;
  background: #d99419;
  color: #ffffff;
}

.stage7-button.danger {
  border-color: var(--s7-red);
  background: var(--s7-red);
  color: #ffffff;
}

.stage7-button:disabled {
  border-color: #d7dfe8;
  background: #dfe5ec;
  color: #8795a5;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* Photo forms */

.stage7-photo-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stage7-photo-entry {
  padding: 13px;
  border: 1px solid var(--s7-border-soft);
  border-radius: 9px;
  background: var(--s7-surface-soft);
}

.stage7-photo-entry-grid {
  display: grid;
  grid-template-columns:
    minmax(190px, 1fr)
    minmax(220px, 1fr)
    minmax(190px, 1fr)
    auto;
  align-items: end;
  gap: 11px;
}

.stage7-remove-photo {
  min-height: 41px;
  padding: 8px 11px;
  border: 1px solid #d3dce6;
  border-radius: 8px;
  background: #ffffff;
  color: #62758a;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.stage7-remove-photo:not(:disabled):hover {
  border-color: #efb0b8;
  background: var(--s7-red-soft);
  color: var(--s7-red);
}

.stage7-remove-photo:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Checkboxes and selections */

.stage7-baseband-toggle,
.stage7-choice-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid #c9daf3;
  border-radius: 9px;
  background: #f2f7ff;
  cursor: pointer;
}

.stage7-baseband-toggle input,
.stage7-choice-card input,
.stage7-checkbox input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--s7-blue);
}

.stage7-baseband-toggle span,
.stage7-choice-card span {
  display: block;
}

.stage7-baseband-toggle b,
.stage7-baseband-toggle small,
.stage7-choice-card b,
.stage7-choice-card small {
  display: block;
}

.stage7-baseband-toggle b,
.stage7-choice-card b {
  color: var(--s7-navy);
  font-size: 11px;
}

.stage7-baseband-toggle small,
.stage7-choice-card small {
  margin-top: 3px;
  color: var(--s7-muted);
  font-size: 9px;
}

.stage7-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--s7-text);
  font-size: 11px;
}

/* Utility classes */

.stage7-divider {
  height: 1px;
  margin: 20px 0;
  background: var(--s7-border-soft);
}

.stage7-top-gap {
  margin-top: 14px;
}

.stage7-hidden {
  display: none !important;
}

/* Notices */

.stage7-notice {
  padding: 12px 14px;
  border: 1px solid;
  border-radius: 9px;
  font-size: 11px;
}

.stage7-notice.success {
  border-color: #9fdcc1;
  background: var(--s7-green-soft);
  color: #08754d;
}

.stage7-notice.warning {
  border-color: #efd28d;
  background: var(--s7-amber-soft);
  color: #885907;
}

.stage7-notice.error {
  border-color: #efb7bf;
  background: var(--s7-red-soft);
  color: #a8293a;
}

.stage7-notice.neutral {
  border-color: #cdd9e5;
  background: #f3f6f9;
  color: #546a81;
}

.stage7-locked-message,
.stage7-empty-state {
  padding: 15px;
  border: 1px dashed #ccd7e2;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--s7-muted);
  font-size: 11px;
  text-align: center;
}

/* Access failure panel */

.stage7-exception-panel {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #ead1d5;
  border-radius: 9px;
  background: #fffafa;
}

.stage7-exception-panel > summary {
  padding: 12px 14px;
  color: #a33947;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.stage7-exception-body {
  padding: 15px;
  border-top: 1px solid #f0dfe2;
  background: #ffffff;
}

.stage7-exception-body > p {
  margin: 0 0 14px;
  color: var(--s7-muted);
  font-size: 10px;
}

/* Equipment table */

.stage7-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--s7-border-soft);
  border-radius: 8px;
}

.stage7-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

.stage7-table th,
.stage7-table td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--s7-border-soft);
  color: var(--s7-text);
  font-size: 10px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.stage7-table th {
  background: #f3f6f9;
  color: #667b91;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.stage7-table tbody tr:last-child td {
  border-bottom: 0;
}

.stage7-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--s7-blue);
}

.stage7-table .stage7-serial-input {
  min-width: 160px;
  height: 34px;
  padding: 6px 8px;
  border: 1px solid #c9d5e2;
  border-radius: 7px;
}

.stage7-empty-row {
  padding: 20px !important;
  color: var(--s7-muted) !important;
  text-align: center !important;
}

.stage7-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--s7-blue-soft);
  color: var(--s7-blue-dark);
  font-size: 9px;
  font-weight: 700;
}

/* Completion panel */

.stage7-complete-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 1px solid #9edcc0;
  border-radius: 10px;
  background: var(--s7-green-soft);
}

.stage7-complete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: var(--s7-green);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
}

.stage7-complete-panel h2,
.stage7-complete-panel p {
  margin: 0;
}

.stage7-complete-panel h2 {
  color: #086b47;
  font-size: 15px;
}

.stage7-complete-panel p {
  margin-top: 3px;
  color: #39785f;
  font-size: 10px;
}

/* Reference and summary panels */

.stage7-reference {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.stage7-reference-panel {
  overflow: hidden;
  border: 1px solid var(--s7-border);
  border-radius: 10px;
  background: #ffffff;
}

.stage7-reference-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.stage7-reference-panel > summary::-webkit-details-marker {
  display: none;
}

.stage7-reference-panel > summary strong,
.stage7-reference-panel > summary small {
  display: block;
}

.stage7-reference-panel > summary strong {
  color: var(--s7-navy);
  font-size: 11px;
}

.stage7-reference-panel > summary small,
.stage7-reference-panel > summary > span:last-child {
  margin-top: 2px;
  color: var(--s7-muted);
  font-size: 9px;
}

.stage7-reference-body {
  padding: 14px;
  border-top: 1px solid var(--s7-border-soft);
}

/* Evidence and equipment counts */

.stage7-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.stage7-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--s7-border-soft);
  border-radius: 8px;
  background: var(--s7-surface-soft);
}

.stage7-count span {
  color: var(--s7-muted);
  font-size: 9px;
}

.stage7-count b {
  color: var(--s7-navy);
  font-size: 13px;
}

/* Uploaded photo gallery */

.stage7-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stage7-photo-grid a {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.stage7-photo-grid img {
  display: block;
  width: 100%;
  height: 125px;
  object-fit: cover;
  border: 1px solid var(--s7-border-soft);
  border-radius: 8px;
  background: #eef2f6;
}

.stage7-photo-grid small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--s7-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage7-page-footer {
  display: flex;
  justify-content: flex-start;
  padding-top: 2px;
}

/* Responsive design */

@media (max-width: 1180px) {
  .stage7-overview {
    grid-template-columns: 1fr;
  }

  .stage7-overview-progress {
    padding-top: 14px;
    border-top: 1px solid var(--s7-border-soft);
  }

  .stage7-photo-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage7-remove-photo {
    width: fit-content;
  }
}

@media (max-width: 820px) {
  .stage7-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .stage7-user {
    width: 100%;
    text-align: left;
  }

  .stage7-overview-main {
    grid-template-columns: 1fr;
  }

  .stage7-overview-main > div {
    min-height: auto;
    padding: 11px 0;
    border-right: 0;
    border-bottom: 1px solid var(--s7-border-soft);
  }

  .stage7-overview-main > div:first-child {
    padding-top: 0;
  }

  .stage7-overview-main > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .stage7-fields,
  .stage7-reference,
  .stage7-counts {
    grid-template-columns: 1fr;
  }

  .stage7-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .stage7-page {
    gap: 12px;
  }

  .stage7-heading {
    min-height: auto;
    padding: 17px;
  }

  .stage7-heading h1 {
    font-size: 22px;
  }

  .stage7-overview {
    padding: 15px;
  }

  .stage7-workflow-step > summary {
    grid-template-columns: 32px minmax(0, 1fr);
    padding-right: 38px;
  }

  .stage7-step-state {
    grid-column: 2;
    min-width: 0;
    text-align: left;
  }

  .stage7-step-body {
    padding: 15px;
  }

  .stage7-step-intro {
    flex-direction: column;
  }

  .stage7-photo-entry-grid {
    grid-template-columns: 1fr;
  }

  .stage7-photo-form-actions,
  .stage7-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .stage7-button,
  .stage7-remove-photo {
    width: 100%;
  }

  .stage7-photo-grid {
    grid-template-columns: 1fr;
  }
}











/* Stage 7 saved evidence */

.stage7-saved-evidence {
  margin-bottom: 18px;
}

.stage7-saved-evidence-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.stage7-saved-evidence-heading h3,
.stage7-saved-evidence-heading p {
  margin: 0;
}

.stage7-saved-evidence-heading h3 {
  color: var(--s7-navy);
  font-size: 13px;
}

.stage7-saved-evidence-heading p {
  margin-top: 4px;
  color: var(--s7-muted);
  font-size: 10px;
}

.stage7-saved-evidence-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stage7-saved-photo {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #b8dfcd;
  border-radius: 10px;
  background: #f4fbf7;
}

.stage7-saved-photo-preview {
  display: block;
  min-height: 165px;
  background: #e9f1ed;
}

.stage7-saved-photo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 165px;
  object-fit: cover;
}

.stage7-saved-photo-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
}

.stage7-saved-photo-details span {
  display: block;
  margin-bottom: 3px;
  color: var(--s7-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.stage7-saved-photo-details strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--s7-navy);
  font-size: 10px;
}

.stage7-saved-photo-details p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--s7-text);
  font-size: 10px;
  line-height: 1.45;
}

.stage7-saved-photo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid #d6e9df;
}

.stage7-saved-photo-meta span {
  margin: 0;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 900px) {
  .stage7-saved-evidence-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .stage7-saved-evidence-heading {
    flex-direction: column;
  }

  .stage7-saved-photo {
    grid-template-columns: 1fr;
  }

  .stage7-saved-photo-preview,
  .stage7-saved-photo-preview img {
    min-height: 190px;
  }
}



/* ==========================================================================
   TECHNICIAN DECOMMISSIONED RETURNS
   ========================================================================== */

.decomm-page {
  --decomm-ink: #13243a;
  --decomm-text: #33475f;
  --decomm-muted: #6b7d91;
  --decomm-line: #d4dee8;
  --decomm-soft: #f4f7fa;
  --decomm-blue: #2f7df6;
  --decomm-green: #0ba66d;
  --decomm-amber: #d99716;
  --decomm-violet: #6867e8;

  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--decomm-text);
}


/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.decomm-hero {
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
  min-height: 116px;
  padding: 22px 26px;

  border: 1px solid #ccd8e4;
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 92% 20%,
      rgba(47, 125, 246, .11),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #f8fafc,
      #eef3f8
    );

  box-shadow:
    0 9px 26px
    rgba(15, 35, 60, .055);
}

.decomm-hero::before {
  content: "";

  position: absolute;
  inset: 18px auto 18px 0;

  width: 4px;

  border-radius:
    0 5px 5px 0;

  background:
    var(--decomm-blue);
}

.decomm-eyebrow {
  display: block;

  margin-bottom: 4px;

  color: #1f68d8;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .13em;
  text-transform: uppercase;
}

.decomm-hero h1 {
  margin: 0;

  color: var(--decomm-ink);

  font-family:
    "Space Grotesk",
    Inter,
    sans-serif;

  font-size:
    clamp(
      25px,
      2.1vw,
      32px
    );

  line-height: 1.15;
}

.decomm-hero p {
  margin:
    6px 0 0;

  color:
    var(--decomm-muted);

  font-size: 13px;
}

.decomm-user-card {
  position: relative;
  z-index: 1;

  min-width: 176px;

  padding:
    13px 16px;

  border:
    1px solid #d7e0e9;

  border-radius: 12px;

  background:
    rgba(255, 255, 255, .9);

  box-shadow:
    0 5px 18px
    rgba(21, 40, 64, .06);
}

.decomm-user-card span,
.decomm-user-card small,
.decomm-user-card strong {
  display: block;
}

.decomm-user-card span,
.decomm-user-card small {
  color:
    var(--decomm-muted);

  font-size: 11px;
}

.decomm-user-card strong {
  margin:
    4px 0 2px;

  color:
    var(--decomm-ink);
}


/* ==========================================================================
   SUMMARY CARDS
   ========================================================================== */

.decomm-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 12px;
}

.decomm-stat {
  position: relative;
  overflow: hidden;

  min-height: 112px;

  padding:
    17px 18px;

  border:
    1px solid
    var(--decomm-line);

  border-top:
    4px solid
    var(--stat-color);

  border-radius: 14px;

  background: #f7f9fb;

  box-shadow:
    0 5px 16px
    rgba(20, 39, 63, .04);
}

.decomm-stat::after {
  content: "";

  position: absolute;
  right: -18px;
  bottom: -30px;

  width: 105px;
  height: 105px;

  border-radius: 50%;

  background:
    rgba(47, 125, 246, .07);
}

.decomm-stat-blue {
  --stat-color:
    var(--decomm-blue);
}

.decomm-stat-amber {
  --stat-color:
    var(--decomm-amber);
}

.decomm-stat-violet {
  --stat-color:
    var(--decomm-violet);
}

.decomm-stat-green {
  --stat-color:
    var(--decomm-green);
}

.decomm-stat span,
.decomm-stat small,
.decomm-stat strong {
  position: relative;
  z-index: 1;

  display: block;
}

.decomm-stat span {
  color: #61758d;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .05em;
  text-transform: uppercase;
}

.decomm-stat strong {
  margin:
    7px 0 3px;

  color:
    var(--decomm-ink);

  font-family:
    "Space Grotesk",
    Inter,
    sans-serif;

  font-size: 27px;
  line-height: 1;
}

.decomm-stat small {
  color:
    var(--decomm-muted);

  font-size: 11px;
}


/* ==========================================================================
   SHARED CARDS
   ========================================================================== */

.decomm-panel,
.decomm-list-panel,
.decomm-workflow-card,
.decomm-side-card,
.decomm-detail-summary {
  border:
    1px solid
    var(--decomm-line);

  border-radius: 14px;

  background: #fff;

  box-shadow:
    0 5px 18px
    rgba(20, 39, 63, .045);
}


/* ==========================================================================
   SEARCH AND FILTERS
   ========================================================================== */

.decomm-toolbar {
  display: grid;

  grid-template-columns:
    minmax(260px, 1fr)
    minmax(210px, 280px);

  gap: 12px;

  padding: 16px;
}

.decomm-search-field,
.decomm-filter-field,
.decomm-field {
  display: flex;
  flex-direction: column;

  gap: 6px;
  min-width: 0;
}

.decomm-search-field > span,
.decomm-filter-field > span,
.decomm-field > span:first-child {
  color: #60748c;

  font-size: 10px;
  font-style: normal;
  font-weight: 800;

  letter-spacing: .045em;
  text-transform: uppercase;
}

.decomm-field b {
  margin-left: 4px;

  color: #d03c50;

  font-size: 9px;
}

.decomm-field em {
  margin-left: 4px;

  color: #8492a3;

  font-size: 9px;
  font-style: normal;
  font-weight: 600;

  text-transform: none;
}

.decomm-search-field input,
.decomm-filter-field select,
.decomm-field input,
.decomm-field select,
.decomm-field textarea {
  width: 100%;
  min-width: 0;

  border:
    1px solid #cbd7e3;

  border-radius: 9px;

  outline: 0;

  background: #fff;
  color:
    var(--decomm-ink);

  font: inherit;
  font-size: 12px;

  transition:
    border-color .15s,
    box-shadow .15s;
}

.decomm-search-field input,
.decomm-filter-field select,
.decomm-field input,
.decomm-field select {
  min-height: 42px;

  padding:
    9px 11px;
}

.decomm-field textarea {
  min-height: 80px;

  padding:
    10px 11px;

  resize: vertical;
}

.decomm-search-field input:focus,
.decomm-filter-field select:focus,
.decomm-field input:focus,
.decomm-field select:focus,
.decomm-field textarea:focus {
  border-color:
    var(--decomm-blue);

  box-shadow:
    0 0 0 3px
    rgba(47, 125, 246, .12);
}

.decomm-field input[readonly] {
  background: #f7f9fb;
}

.decomm-field small {
  color:
    var(--decomm-muted);

  font-size: 10px;
}


/* ==========================================================================
   ACTIVE / COMPLETED TABS
   ========================================================================== */

.decomm-tabs {
  display: flex;

  gap: 8px;

  padding:
    0 16px 15px;
}

.decomm-tab {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding:
    8px 13px;

  border:
    1px solid #d1dce7;

  border-radius: 999px;

  background: #fff;
  color: #586b82;

  font-size: 12px;
  font-weight: 800;
}

.decomm-tab span {
  min-width: 20px;

  padding:
    1px 6px;

  border-radius: 999px;

  background: #e9eef4;

  text-align: center;
}

.decomm-tab.is-active {
  border-color:
    var(--decomm-blue);

  background:
    var(--decomm-blue);

  color: #fff;

  box-shadow:
    0 5px 12px
    rgba(47, 125, 246, .2);
}

.decomm-tab.is-active span {
  background:
    rgba(255, 255, 255, .2);
}


/* ==========================================================================
   EQUIPMENT LIST
   ========================================================================== */

.decomm-list-panel {
  overflow: hidden;
}

.decomm-panel-heading,
.decomm-side-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;
}

.decomm-panel-heading {
  padding:
    16px 18px;

  border-bottom:
    1px solid #dbe3eb;
}

.decomm-panel-heading h2,
.decomm-side-heading h2 {
  margin: 0;

  color:
    var(--decomm-ink);

  font-family:
    "Space Grotesk",
    Inter,
    sans-serif;

  font-size: 16px;
}

.decomm-panel-heading p {
  margin:
    3px 0 0;

  color:
    var(--decomm-muted);

  font-size: 11px;
}

.decomm-panel-heading > span,
.decomm-side-heading > span {
  color:
    var(--decomm-muted);

  font-size: 11px;
}

.decomm-table-wrap {
  overflow-x: auto;
}

.decomm-table {
  width: 100%;

  border-collapse:
    collapse;

  font-size: 12px;
}

.decomm-table th,
.decomm-table td {
  padding:
    13px 14px;

  border-bottom:
    1px solid #e2e8ef;

  text-align: left;
  vertical-align: middle;
}

.decomm-table th {
  background: #eef2f6;
  color: #61748b;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .045em;
  text-transform: uppercase;

  white-space: nowrap;
}

.decomm-table tbody tr:hover {
  background: #f8fafc;
}

.decomm-table tbody tr:last-child td {
  border-bottom: 0;
}

.decomm-equipment-cell strong,
.decomm-equipment-cell span,
.decomm-equipment-cell small,
.decomm-table td > strong,
.decomm-cell-note {
  display: block;
}

.decomm-equipment-cell strong,
.decomm-table td > strong {
  color:
    var(--decomm-ink);
}

.decomm-equipment-cell span {
  margin-top: 3px;

  color: #1f68d8;

  font-size: 11px;
}

.decomm-equipment-cell small,
.decomm-cell-note {
  margin-top: 4px;

  color:
    var(--decomm-muted);

  font-size: 10px;
}

.decomm-mono {
  font-family:
    "IBM Plex Mono",
    Consolas,
    monospace;
}


/* ==========================================================================
   STATUS PILLS
   ========================================================================== */

.decomm-status {
  display: inline-flex;
  align-items: center;

  gap: 6px;
  width: fit-content;

  padding:
    6px 9px;

  border:
    1px solid #d3dce6;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;

  white-space: nowrap;
}

.decomm-status i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: currentColor;
}

.decomm-status-collected {
  border-color: #ecd49f;
  background: #fff6df;
  color: #b87508;
}

.decomm-status-storage {
  border-color: #cbc9f6;
  background: #f0efff;
  color: #554fc8;
}

.decomm-status-transit {
  border-color: #b8d1f7;
  background: #eaf2ff;
  color: #1f68d8;
}

.decomm-status-complete {
  border-color: #a8ddc7;
  background: #e7f8f0;
  color: #07875a;
}

.decomm-status-unknown {
  background: #edf1f5;
  color: #728196;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.decomm-action-cell {
  text-align: right !important;
}

.decomm-open-button,
.decomm-submit-button,
.decomm-location-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;

  border: 0;
  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      #3485fa,
      #246ee7
    );

  color: #fff;

  font-size: 11px;
  font-weight: 800;

  text-decoration: none;

  box-shadow:
    0 5px 12px
    rgba(47, 125, 246, .18);
}

.decomm-open-button {
  padding:
    8px 13px;
}

.decomm-submit-button {
  min-width: 210px;

  padding:
    10px 17px;
}

.decomm-location-button {
  padding:
    8px 12px;
}

.decomm-open-button:hover,
.decomm-submit-button:hover,
.decomm-location-button:hover {
  filter:
    brightness(.97);

  color: #fff;
}

.decomm-submit-button:disabled,
.decomm-location-button:disabled {
  cursor: wait;

  opacity: .62;
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.decomm-empty {
  padding:
    46px 20px;

  color:
    var(--decomm-muted);

  text-align: center;
}

.decomm-empty span {
  display: block;

  margin-bottom: 8px;

  color: #91a0b1;

  font-size: 28px;
}

.decomm-empty h3 {
  margin:
    0 0 4px;

  color:
    var(--decomm-ink);
}

.decomm-empty p {
  margin: 0;
}


/* ==========================================================================
   DETAIL PAGE
   ========================================================================== */

.decomm-back-link {
  width: fit-content;

  color: #245fae;

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;
}

.decomm-back-link:hover {
  color: #174b8e;

  text-decoration: underline;
}

.decomm-detail-hero {
  min-height: 104px;
}

.decomm-detail-summary {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  padding: 0;
}

.decomm-detail-summary > div {
  min-width: 0;

  padding:
    16px 18px;

  border-right:
    1px solid #dbe3eb;
}

.decomm-detail-summary > div:last-child {
  border-right: 0;
}

.decomm-detail-summary span,
.decomm-detail-summary strong {
  display: block;
}

.decomm-detail-summary span {
  color:
    var(--decomm-muted);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .045em;
  text-transform: uppercase;
}

.decomm-detail-summary strong {
  overflow: hidden;

  margin-top: 5px;

  color:
    var(--decomm-ink);

  text-overflow: ellipsis;
  white-space: nowrap;
}

.decomm-detail-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 340px);

  gap: 16px;

  align-items: start;
}

.decomm-workflow-card {
  overflow: hidden;
}


/* ==========================================================================
   VERTICAL WORKFLOW
   ========================================================================== */

.decomm-vertical-steps {
  padding: 16px;
}

.decomm-step {
  position: relative;

  display: grid;

  grid-template-columns:
    42px minmax(0, 1fr);

  gap: 12px;

  padding-bottom: 14px;
}

.decomm-step:last-child {
  padding-bottom: 0;
}

.decomm-step::before {
  content: "";

  position: absolute;

  top: 38px;
  bottom: -2px;
  left: 20px;

  width: 2px;

  background: #dce4ec;
}

.decomm-step:last-child::before {
  display: none;
}

.decomm-step-marker {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border:
    2px solid #d4dde7;

  border-radius: 50%;

  background: #fff;
  color: #758498;

  font-weight: 800;
}

.decomm-step-content {
  overflow: hidden;

  border:
    1px solid #d8e1ea;

  border-radius: 12px;

  background: #fff;
}

.decomm-step-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    14px 16px;
}

.decomm-step-heading span:first-child {
  color: #718198;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .07em;
  text-transform: uppercase;
}

.decomm-step-heading h3 {
  margin:
    2px 0 3px;

  color:
    var(--decomm-ink);

  font-size: 14px;
}

.decomm-step-heading p {
  margin: 0;

  color:
    var(--decomm-muted);

  font-size: 11px;
}

.decomm-step-state {
  flex: none;

  padding:
    5px 8px;

  border-radius: 999px;

  color: #738296;

  font-size: 9px;
  font-weight: 800;

  text-transform: uppercase;
}


/* Completed workflow step */

.decomm-step-complete
.decomm-step-marker {
  border-color:
    var(--decomm-green);

  background:
    var(--decomm-green);

  color: #fff;
}

.decomm-step-complete::before {
  background: #9fdfc7;
}

.decomm-step-complete
.decomm-step-content {
  border-color: #a9dfca;

  background: #f0faf6;
}

.decomm-step-complete
.decomm-step-state {
  background: #dcf5e9;

  color: #07875a;
}


/* Current workflow step */

.decomm-step-current
.decomm-step-marker {
  border-color:
    var(--decomm-blue);

  background:
    var(--decomm-blue);

  color: #fff;

  box-shadow:
    0 0 0 5px
    rgba(47, 125, 246, .12);
}

.decomm-step-current
.decomm-step-content {
  border-color: #78aafa;

  box-shadow:
    0 5px 16px
    rgba(47, 125, 246, .09);
}

.decomm-step-current
.decomm-step-heading {
  background: #edf4ff;
}

.decomm-step-current
.decomm-step-state {
  background: #dceaff;

  color: #1d64d2;
}


/* Upcoming workflow step */

.decomm-step-upcoming
.decomm-step-content,
.decomm-step-upcoming
.decomm-step-marker {
  background: #f7f9fb;
}

.decomm-step-upcoming
.decomm-step-content {
  opacity: .78;
}


/* ==========================================================================
   WORKFLOW FORM
   ========================================================================== */

.decomm-action-form {
  padding: 16px;

  border-top:
    1px solid #d8e2ec;
}

.decomm-form-intro {
  margin-bottom: 14px;

  padding:
    12px 14px;

  border-left:
    3px solid
    var(--decomm-blue);

  border-radius:
    0 8px 8px 0;

  background: #f2f7ff;
}

.decomm-form-intro strong {
  display: block;

  color:
    var(--decomm-ink);
}

.decomm-form-intro p {
  margin:
    3px 0 0;

  color:
    var(--decomm-muted);

  font-size: 11px;
}

.decomm-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 13px;
}

.decomm-field-wide {
  grid-column:
    1 / -1;
}


/* ==========================================================================
   GPS
   ========================================================================== */

.decomm-gps-block {
  padding: 13px;

  border:
    1px solid #d5e1ed;

  border-radius: 10px;

  background: #f7f9fb;
}

.decomm-gps-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 11px;
}

.decomm-gps-heading strong,
.decomm-gps-heading span {
  display: block;
}

.decomm-gps-heading strong {
  color:
    var(--decomm-ink);
}

.decomm-gps-heading span {
  margin-top: 2px;

  color:
    var(--decomm-muted);

  font-size: 10px;
}

.decomm-gps-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;
}

.decomm-location-message {
  display: block;

  margin-top: 8px;

  color: #7b899a;

  font-size: 10px;
}

.decomm-location-message.is-success {
  color: #07875a;

  font-weight: 700;
}


/* ==========================================================================
   PHOTO UPLOAD
   ========================================================================== */

.decomm-file-control {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 44px;

  padding:
    7px 10px;

  border:
    1px dashed #aebdcd;

  border-radius: 9px;

  background: #f8fafc;
  color: #697a8e;

  font-size: 11px;

  text-transform:
    none !important;
}

.decomm-file-control input {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  cursor: pointer;

  opacity: 0;
}

.decomm-photo-preview {
  display: block;

  width: 120px;

  overflow: hidden;

  border:
    1px solid #d5dfe9;

  border-radius: 9px;

  background: #eef2f6;
}

.decomm-photo-preview[hidden] {
  display: none;
}

.decomm-photo-preview img {
  display: block;

  width: 100%;
  height: 90px;

  object-fit: cover;
}


/* ==========================================================================
   FORM FOOTER AND MESSAGES
   ========================================================================== */

.decomm-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-top: 16px;

  padding-top: 14px;

  border-top:
    1px solid #dce4ec;
}

.decomm-form-footer > span {
  max-width: 520px;

  color:
    var(--decomm-muted);

  font-size: 10px;
}

.decomm-form-message {
  margin-top: 14px;

  padding:
    10px 12px;

  border:
    1px solid;

  border-radius: 8px;

  font-size: 11px;
  font-weight: 700;
}

.decomm-form-message.is-error {
  border-color: #f2b4bd;

  background: #fff0f2;
  color: #b52d42;
}

.decomm-form-message.is-success {
  border-color: #9ed9c1;

  background: #ebf9f3;
  color: #067a50;
}


/* ==========================================================================
   RIGHT SIDEBAR
   ========================================================================== */

.decomm-detail-sidebar {
  display: flex;
  flex-direction: column;

  gap: 14px;
}

.decomm-side-card {
  overflow: hidden;
}

.decomm-side-heading {
  padding:
    14px 15px;

  border-bottom:
    1px solid #dce4ec;
}

.decomm-side-heading h2 {
  font-size: 14px;
}

.decomm-detail-list {
  margin: 0;

  padding:
    5px 15px;
}

.decomm-detail-list div {
  display: grid;

  grid-template-columns:
    1fr 1.15fr;

  gap: 12px;

  padding:
    10px 0;

  border-bottom:
    1px solid #e4e9ef;
}

.decomm-detail-list div:last-child {
  border-bottom: 0;
}

.decomm-detail-list dt {
  color:
    var(--decomm-muted);

  font-size: 10px;
}

.decomm-detail-list dd {
  margin: 0;

  color:
    var(--decomm-ink);

  font-size: 11px;
  font-weight: 700;

  text-align: right;
}


/* Evidence */

.decomm-evidence-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 9px;

  padding: 12px;
}

.decomm-evidence-grid a {
  overflow: hidden;

  border:
    1px solid #d5dfe9;

  border-radius: 9px;

  background: #f6f8fa;
  color:
    var(--decomm-ink);

  text-decoration: none;
}

.decomm-evidence-grid img {
  display: block;

  width: 100%;
  height: 100px;

  background: #e8edf2;

  object-fit: cover;
}

.decomm-evidence-grid span,
.decomm-evidence-grid small {
  display: block;
  overflow: hidden;

  padding:
    0 8px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.decomm-evidence-grid span {
  padding-top: 7px;

  font-size: 10px;
  font-weight: 700;
}

.decomm-evidence-grid small {
  padding-top: 2px;
  padding-bottom: 7px;

  color:
    var(--decomm-muted);

  font-size: 9px;
}


/* Custody history */

.decomm-history {
  margin: 0;

  padding:
    12px 15px;

  list-style: none;
}

.decomm-history li {
  position: relative;

  display: grid;

  grid-template-columns:
    12px 1fr;

  gap: 9px;

  padding-bottom: 15px;
}

.decomm-history li:last-child {
  padding-bottom: 0;
}

.decomm-history li::before {
  content: "";

  position: absolute;

  top: 9px;
  bottom: 0;
  left: 4px;

  width: 1px;

  background: #d5dee7;
}

.decomm-history li:last-child::before {
  display: none;
}

.decomm-history i {
  position: relative;
  z-index: 1;

  width: 9px;
  height: 9px;

  margin-top: 3px;

  border:
    2px solid #fff;

  border-radius: 50%;

  background:
    var(--decomm-blue);

  box-shadow:
    0 0 0 1px
    var(--decomm-blue);
}

.decomm-history strong,
.decomm-history span,
.decomm-history small {
  display: block;
}

.decomm-history strong {
  color:
    var(--decomm-ink);

  font-size: 10px;
}

.decomm-history span {
  margin-top: 2px;

  color: #53667d;

  font-size: 10px;
}

.decomm-history small {
  margin-top: 2px;

  color:
    var(--decomm-muted);

  font-size: 9px;
}

.decomm-side-empty {
  margin: 0;

  padding:
    18px 15px;

  color:
    var(--decomm-muted);

  font-size: 11px;
}


/* ==========================================================================
   RESPONSIVE TABLET
   ========================================================================== */

@media (max-width: 1120px) {
  .decomm-stat-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .decomm-detail-grid {
    grid-template-columns:
      1fr;
  }

  .decomm-detail-sidebar {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .decomm-detail-sidebar
  .decomm-side-card:last-child {
    grid-column:
      1 / -1;
  }
}


/* ==========================================================================
   RESPONSIVE MOBILE
   ========================================================================== */

@media (max-width: 760px) {
  .decomm-page {
    gap: 13px;
  }

  .decomm-hero {
    align-items: flex-start;
    flex-direction: column;

    min-height: 0;

    padding:
      19px 18px;
  }

  .decomm-user-card {
    width: 100%;
    min-width: 0;
  }

  .decomm-stat-grid {
    grid-template-columns:
      1fr 1fr;

    gap: 9px;
  }

  .decomm-stat {
    min-height: 102px;

    padding: 14px;
  }

  .decomm-toolbar {
    grid-template-columns:
      1fr;
  }

  .decomm-tabs {
    overflow-x: auto;
  }

  .decomm-table thead {
    display: none;
  }

  .decomm-table,
  .decomm-table tbody,
  .decomm-table tr,
  .decomm-table td {
    display: block;

    width: 100%;
  }

  .decomm-table tr {
    padding:
      13px 14px;

    border-bottom:
      1px solid #dce4ec;
  }

  .decomm-table td {
    padding:
      6px 0;

    border: 0;
  }

  .decomm-table td:nth-child(2)::before,
  .decomm-table td:nth-child(3)::before,
  .decomm-table td:nth-child(4)::before,
  .decomm-table td:nth-child(5)::before {
    display: block;

    margin-bottom: 3px;

    color: #7b899b;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
  }

  .decomm-table td:nth-child(2)::before {
    content: "Removed From";
  }

  .decomm-table td:nth-child(3)::before {
    content: "Current Location";
  }

  .decomm-table td:nth-child(4)::before {
    content: "Return Status";
  }

  .decomm-table td:nth-child(5)::before {
    content: "Next Action";
  }

  .decomm-action-cell {
    padding-top:
      10px !important;

    text-align:
      left !important;
  }

  .decomm-open-button {
    width: 100%;
  }

  .decomm-detail-summary {
    grid-template-columns:
      1fr 1fr;
  }

  .decomm-detail-summary
  > div:nth-child(2) {
    border-right: 0;
  }

  .decomm-detail-summary
  > div:nth-child(-n + 2) {
    border-bottom:
      1px solid #dbe3eb;
  }

  .decomm-step {
    grid-template-columns:
      34px minmax(0, 1fr);

    gap: 8px;
  }

  .decomm-step-marker {
    width: 34px;
    height: 34px;
  }

  .decomm-step::before {
    top: 32px;
    left: 16px;
  }

  .decomm-step-heading {
    align-items: flex-start;

    padding: 12px;
  }

  .decomm-action-form {
    padding: 12px;
  }

  .decomm-form-grid,
  .decomm-gps-grid {
    grid-template-columns:
      1fr;
  }

  .decomm-form-footer,
  .decomm-gps-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .decomm-submit-button,
  .decomm-location-button {
    width: 100%;
  }

  .decomm-detail-sidebar {
    display: flex;
  }
}


@media (max-width: 460px) {
  .decomm-stat-grid {
    grid-template-columns:
      1fr;
  }

  .decomm-detail-summary {
    grid-template-columns:
      1fr;
  }

  .decomm-detail-summary > div {
    border-right: 0;

    border-bottom:
      1px solid #dbe3eb;
  }

  .decomm-detail-summary
  > div:last-child {
    border-bottom: 0;
  }
}


.decomm-page {
    display: grid;
    gap: 14px;
}

.warehouse-dispatch-page {
    display: grid;
    gap: 16px;
}

.wd-card {
    overflow: visible;

    border: 1px solid #dfe6ee;
    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 4px 16px
        rgba(15, 23, 42, .04);
}

.wd-card-head {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 14px 16px;

    border-bottom:
        1px solid #edf1f5;
}

.wd-card-head h3 {
    margin: 0;

    color: #172033;

    font-size: 14px;
    font-weight: 800;
}

.wd-card-head p {
    margin: 4px 0 0;

    color: #7c899a;

    font-size: 10px;
}

.wd-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 14px;

    padding: 16px;
}

.wd-form-grid label > span {
    display: block;

    margin-bottom: 6px;

    color: #607087;

    font-size: 10px;
    font-weight: 750;
}

.wd-form-grid select,
.wd-form-grid textarea {
    width: 100%;

    border: 1px solid #d5dee8;
    border-radius: 9px;

    background: white;
}

.wd-form-grid select {
    min-height: 42px;

    padding: 0 10px;
}

.wd-form-grid textarea {
    min-height: 85px;

    padding: 10px;
}

.span-2 {
    grid-column: span 2;
}

.wd-selected-counter {
    padding: 6px 10px;

    border: 1px solid #d5e5fb;
    border-radius: 999px;

    background: #edf5ff;

    color: #3567a6;

    font-size: 10px;
    font-weight: 700;
}

.wd-selected-counter strong {
    margin-left: 5px;

    color: #2266d5;
}

.wd-search-area {
    position: relative;

    padding: 16px;
}

.wd-search-area > input {
    width: 100%;
    min-height: 44px;

    padding: 0 13px;

    border: 1px solid #d5dee8;
    border-radius: 9px;

    background: #fff;

    font-size: 11px;
}

.wd-search-area > input:focus {
    outline: none;

    border-color: #2f7df6;

    box-shadow:
        0 0 0 3px
        rgba(47,125,246,.10);
}

.wd-search-results {
    margin-top: 8px;

    overflow: hidden;

    border: 1px solid #dfe6ee;
    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 10px 28px
        rgba(15,23,42,.09);
}

.wd-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 12px 14px;

    border-bottom:
        1px solid #edf1f5;
}

.wd-search-result:last-child {
    border-bottom: 0;
}

.wd-result-info {
    min-width: 0;
}

.wd-search-empty {
    padding: 22px;

    color: #8492a4;

    text-align: center;

    font-size: 10px;
}

.wd-table-wrap {
    overflow-x: auto;
}

.wd-table {
    width: 100%;

    border-collapse: collapse;
}

.wd-table th {
    padding: 10px 13px;

    border-bottom:
        1px solid #e5ebf1;

    background: #f8fafc;

    color: #68798f;

    text-align: left;

    font-size: 9px;
    font-weight: 800;
}

.wd-table td {
    padding: 12px 13px;

    border-bottom:
        1px solid #edf1f5;

    color: #526174;

    vertical-align: middle;

    font-size: 10.5px;
}

.wd-empty {
    padding: 30px !important;

    color: #8492a4 !important;

    text-align: center;
}

.wd-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    padding: 2px 0 14px;
}

.wd-actions .btn.primary span {
    margin-left: 7px;

    padding: 2px 6px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.20);
}

@media (
    max-width: 700px
) {

    .wd-form-grid {
        grid-template-columns:
            1fr;
    }

    .span-2 {
        grid-column:
            span 1;
    }
}

/* ============================
   KPI
   ============================ */

.decomm-kpis {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.decomm-kpi {
    position: relative;
    min-height: 82px;
    padding: 13px 15px;
    overflow: hidden;

    border: 1px solid #dce5ef;
    border-top: 3px solid #2f7df6;
    border-radius: 11px;

    background: #fff;

    box-shadow:
        0 2px 8px
        rgba(15, 23, 42, .035);
}

.decomm-kpi::after {
    content: "";

    position: absolute;
    right: -24px;
    bottom: -35px;

    width: 95px;
    height: 95px;

    border-radius: 50%;

    background:
        rgba(47, 125, 246, .06);
}

.decomm-kpi.amber {
    border-top-color: #e4a11b;
}

.decomm-kpi.purple {
    border-top-color: #6d63e8;
}

.decomm-kpi.green {
    border-top-color: #18a66a;
}

.decomm-kpi-label {
    position: relative;
    z-index: 1;

    color: #65778f;
    font-size: 9px;
    font-weight: 800;
}

.decomm-kpi-value {
    position: relative;
    z-index: 1;

    margin-top: 5px;

    color: #1d2b40;
    font-size: 22px;
    font-weight: 800;
}

.decomm-kpi-sub {
    position: relative;
    z-index: 1;

    margin-top: 1px;

    color: #8996a8;
    font-size: 9px;
}


/* ============================
   FILTERS
   ============================ */

.decomm-filter-card {
    padding: 13px;

    border: 1px solid #dce5ef;
    border-radius: 11px;

    background: #fff;
}

.decomm-filter-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        210px;

    gap: 10px;
}

.decomm-filter-card label {
    display: block;

    margin-bottom: 5px;

    color: #75869c;

    font-size: 8px;
    font-weight: 800;
}

.decomm-filter-card input,
.decomm-filter-card select {
    width: 100%;
    height: 35px;

    padding: 0 10px;

    border:
        1px solid #d7e0ea;
    border-radius: 7px;

    background: #fff;

    color: #41536b;

    font-size: 10px;
}

.decomm-tabs {
    display: flex;
    gap: 7px;

    margin-top: 11px;
}

.decomm-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 29px;

    padding: 5px 11px;

    border: 1px solid #d5dfe9;
    border-radius: 999px;

    background: white;

    color: #53657b;

    cursor: pointer;

    font-size: 10px;
    font-weight: 750;
}

.decomm-tab span {
    min-width: 18px;

    padding: 2px 6px;

    border-radius: 999px;

    background: #eef3f8;

    text-align: center;

    font-size: 9px;
}

.decomm-tab.active {
    border-color: #2f7df6;
    background: #2f7df6;
    color: white;

    box-shadow:
        0 4px 9px
        rgba(47,125,246,.18);
}

.decomm-tab.active span {
    background:
        rgba(255,255,255,.20);

    color: white;
}


/* ============================
   TABLE
   ============================ */

.decomm-table-card {
    overflow: hidden;

    border: 1px solid #dce5ef;
    border-radius: 11px;

    background: #fff;
}

.decomm-table-head {
    min-height: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 11px 14px;

    border-bottom:
        1px solid #e7edf3;
}

.decomm-table-head h3 {
    margin: 0;

    color: #18273d;

    font-size: 13px;
    font-weight: 800;
}

.decomm-table-head p {
    margin: 4px 0 0;

    color: #8492a4;

    font-size: 9px;
}

.decomm-count {
    color: #75859a;

    font-size: 9px;
}

.decomm-table-scroll {
    overflow-x: auto;
}

.decomm-table {
    width: 100%;

    border-collapse: collapse;
}

.decomm-table th {
    padding: 10px 11px;

    border-bottom:
        1px solid #e5ebf1;

    background: #f8fafc;

    color: #71839a;

    text-align: left;

    font-size: 8px;
    font-weight: 800;
}

.decomm-table td {
    padding: 12px 11px;

    border-bottom:
        1px solid #edf1f5;

    color: #43536a;

    vertical-align: middle;

    font-size: 10px;
}

.decomm-table tr:last-child td {
    border-bottom: 0;
}

.equipment-name {
    color: #192a40;

    font-size: 10.5px;
    font-weight: 800;
}

.equipment-id {
    display: block;

    margin-top: 3px;

    color: #2f7df6;

    text-decoration: none;

    font-size: 9px;
}

.equipment-meta {
    margin-top: 5px;

    color: #8a98a9;

    font-size: 8.5px;
}

.equipment-site {
    color: #26374d;

    font-weight: 750;
}


/* ============================
   STATUS
   ============================ */

.decomm-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 8.5px;
    font-weight: 800;
}

.decomm-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}

.decomm-status.amber {
    border: 1px solid #f0ce82;
    background: #fff8e8;
    color: #b77705;
}

.decomm-status.purple {
    border: 1px solid #d2cef9;
    background: #f5f4ff;
    color: #6259d6;
}

.decomm-status.blue {
    border: 1px solid #c7ddf8;
    background: #f1f7ff;
    color: #3474c8;
}

.decomm-status.green {
    border: 1px solid #bde6d2;
    background: #f0fbf5;
    color: #13815a;
}

.decomm-status.grey {
    border: 1px solid #d8e0e8;
    background: #f5f7f9;
    color: #738295;
}


/* ============================
   ACTION
   ============================ */

.next-action-title {
    color: #17283f;

    font-size: 10px;
    font-weight: 800;
}

.next-action-sub {
    margin-top: 3px;

    color: #8b98a8;

    font-size: 8.5px;
}

.decomm-action-cell {
    width: 90px;

    text-align: right;
}

.decomm-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 62px;
    min-height: 31px;

    padding: 6px 10px;

    border-radius: 6px;

    background: #2f7df6;

    color: white;

    text-decoration: none;

    font-size: 9px;
    font-weight: 800;

    box-shadow:
        0 5px 10px
        rgba(47,125,246,.18);
}

.decomm-action-btn:hover {
    background: #2269dd;
}

.no-action {
    color: #a0acb9;
}

.decomm-empty {
    padding: 35px !important;

    text-align: center;

    color: #8492a5 !important;
}


/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 1050px) {

    .decomm-kpis {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}

@media (max-width: 700px) {

    .decomm-kpis {
        grid-template-columns: 1fr;
    }

    .decomm-filter-grid {
        grid-template-columns: 1fr;
    }

}


.decomm-storage-error {
  color: #b52d42 !important;
  font-weight: 700;
}

.wd-form-grid select,
.wd-form-grid input[type="date"],
.wd-form-grid textarea {
    width: 100%;

    border: 1px solid #d5dee8;
    border-radius: 9px;

    background: #fff;

    color: #172033;

    font: inherit;

    box-sizing: border-box;
}

.wd-form-grid select,
.wd-form-grid input[type="date"] {
    min-height: 42px;
}

.wd-form-grid textarea {
    min-height: 85px;
    padding: 10px 12px;
}

.wd-form-grid select:focus,
.wd-form-grid input[type="date"]:focus,
.wd-form-grid textarea:focus {
    outline: none;

    border-color: #2f7df6;

    box-shadow:
        0 0 0 3px
        rgba(47,125,246,.10);
}

.wd-form-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    padding: 16px;
}

.span-3 {
    grid-column: span 3;
}

@media (max-width: 900px) {

    .wd-form-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .span-3 {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {

    .wd-form-grid {
        grid-template-columns: 1fr;
    }

    .span-3 {
        grid-column: span 1;
    }
}
.wd-form-grid input[type="date"] {
    width: 100%;
    min-height: 42px;

    padding: 0 12px;

    border: 1px solid #d5dee8;
    border-radius: 9px;

    background: #fff;
    color: #172033;

    font: inherit;

    box-sizing: border-box;
    cursor: pointer;
}

.wd-form-grid input[type="date"]:focus {
    outline: none;

    border-color: #2f7df6;

    box-shadow:
        0 0 0 3px
        rgba(47,125,246,.10);
}



/* Decommissioned returns: handover and completion */

.decomm-page .decomm-tabs {
  flex-wrap: wrap;
}

.decomm-page .decomm-history-help {
  margin: 0;
  padding: 0 18px 16px;
  line-height: 1.6;
}

.decomm-page .decomm-history-label {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 9px;
  border: 1px solid #d9def5;
  border-radius: 999px;
  background: #f0f2ff;
  color: #5553a6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.decomm-page .decomm-completion-note {
  color: #087f5b;
  font-weight: 600;
}

.decomm-page .decomm-access-notice {
  padding: 16px 18px;
  border: 1px solid #dbe3ef;
  border-left-width: 4px;
  border-radius: 12px;
  background: #f7f9fc;
}

.decomm-page .decomm-access-notice strong {
  display: block;
  color: #172b47;
  font-size: 14px;
}

.decomm-page .decomm-access-notice p {
  margin: 6px 0 0;
  color: #536782;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.decomm-page .decomm-access-notice-history {
  border-color: #d9def5;
  border-left-color: #7771d9;
  background: #f5f5ff;
}

.decomm-page .decomm-access-notice-complete {
  border-color: #bce7d7;
  border-left-color: #0aa779;
  background: #eefaf5;
}

.decomm-page .decomm-access-notice-complete strong {
  color: #087f5b;
}

.decomm-page .decomm-readonly-step {
  margin: 16px;
  padding: 14px 16px;
  border: 1px solid #dce5f0;
  border-radius: 10px;
  background: #f7f9fc;
  color: #536782;
  font-size: 13px;
  line-height: 1.65;
}

.decomm-page .decomm-detail-list dd {
  color: #243b58;
  overflow-wrap: anywhere;
}

.decomm-page .decomm-detail-list dd small {
  display: block;
  margin-top: 4px;
  color: #6b7d95;
  font-size: 11px;
  font-weight: 400;
}

.decomm-page .decomm-open-button {
  color: #fff;
}

.decomm-page [hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .decomm-page .decomm-access-notice {
    padding: 14px;
  }

  .decomm-page .decomm-history-help {
    padding-right: 14px;
    padding-left: 14px;
  }

  .decomm-page .decomm-readonly-step {
    margin: 12px;
    padding: 12px;
  }
}

/* ========================================================================
   NOVUS360 — FINAL UST BRAND PALETTE
   ------------------------------------------------------------------------
   Canonical final theme layer.
   Palette sampled from the supplied UST brand reference:

   Dark Teal   #006E74
   Light Teal  #0097AC
   Soft Black  #231F20
   White       #F2F7F8
   Purple      #881E87
   Green       #01B27C
   Coral       #FC6A59
   Beige       #DBD3BD
   Grey Lilac  #7A7480
   Deep Blue   #003C51
   Blue Grey   #D7E0E3
   Cream       #ECECE1
   Grey        #C2BCBE

   IMPORTANT:
   Keep this block at the VERY END of app.css.
   ======================================================================== */

:root {
  color-scheme: light;

  /* UST brand palette */
  --ust-dark-teal: #006E74;
  --ust-dark-teal-deep: #005A60;
  --ust-dark-teal-darker: #004D53;
  --ust-light-teal: #0097AC;
  --ust-soft-black: #231F20;
  --ust-white: #F2F7F8;
  --ust-purple: #881E87;
  --ust-green: #01B27C;
  --ust-coral: #FC6A59;
  --ust-beige: #DBD3BD;
  --ust-grey-lilac: #7A7480;
  --ust-deep-blue: #003C51;
  --ust-blue-grey: #D7E0E3;
  --ust-cream: #ECECE1;
  --ust-grey: #C2BCBE;

  /* Shared Novus360 tokens */
  --paper: #F2F5F5;
  --card: #FFFFFF;
  --line: #D7E0E3;
  --line2: #E7ECEE;

  --text: #231F20;
  --muted: #65757A;
  --faint: #89969A;

  --ink: #006E74;
  --ink2: #005F65;
  --ink3: #0097AC;
  --inkline: rgba(255,255,255,.15);
  --inkmut: rgba(255,255,255,.68);

  --teal: #0097AC;
  --teald: #006E74;
  --tealw: #E4F4F5;

  --blue: #003C51;
  --bluew: #E8F0F2;

  --indigo: #7A7480;
  --indigow: #F0EEF1;

  --violet: #881E87;
  --violetw: #F5E9F4;

  --green: #01B27C;
  --greenw: #E5F8F1;

  --amber: #B49755;
  --amberw: #F7F2E5;

  --red: #FC6A59;
  --redw: #FFF0ED;

  --slate: #7A7480;
  --slatew: #EEF1F2;

  --radius: 11px;
  --shadow:
    0 1px 2px rgba(35,31,32,.035),
    0 7px 22px rgba(0,60,81,.045);
}

/* ------------------------------------------------------------------------
   MAIN WORKSPACE
   ------------------------------------------------------------------------ */

html,
body,
.app,
.main,
.content,
.main-content,
.page-content,
.content-wrapper,
.app-content {
  background: #F2F5F5 !important;
  color: #231F20 !important;
}

body {
  color-scheme: light !important;
}

.content {
  background: #F2F5F5 !important;
}

/* ------------------------------------------------------------------------
   SIDEBAR — UST DARK TEAL
   ------------------------------------------------------------------------ */

.rail,
.technician-rail,
.technician-app-shell .technician-rail {
  background:
    linear-gradient(
      180deg,
      #006E74 0%,
      #00686E 50%,
      #005A60 100%
    ) !important;
  border-right: 1px solid rgba(0,60,81,.38) !important;
  color: #F2F7F8 !important;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.025),
    7px 0 24px rgba(0,60,81,.07) !important;
}

.rail .brand,
.rail .brand.brand-image,
.technician-app-shell .brand.brand-image {
  background: #006E74 !important;
  border-bottom: 1px solid rgba(242,247,248,.16) !important;
}

.rail .brand.brand-image:hover,
.technician-app-shell .brand.brand-image:hover {
  background: #00686E !important;
}

.brand b,
.railfoot .who {
  color: #F2F7F8 !important;
}

.brand small,
.railfoot .who small {
  color: rgba(242,247,248,.70) !important;
}

.navgrp .lbl {
  color: rgba(242,247,248,.68) !important;
  font-weight: 800 !important;
  letter-spacing: .145em !important;
}

.nav {
  min-height: 40px;
  margin-bottom: 3px;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(242,247,248,.90) !important;
  font-weight: 600 !important;
}

.nav-icon,
.nav .nav-icon,
.nav svg {
  color: rgba(242,247,248,.90) !important;
  opacity: .95 !important;
}

.nav:hover {
  background: rgba(242,247,248,.10) !important;
  border-color: rgba(242,247,248,.08) !important;
  color: #FFFFFF !important;
}

.nav.active {
  background:
    linear-gradient(
      135deg,
      #0097AC 0%,
      #00889B 100%
    ) !important;
  border-color: rgba(242,247,248,.30) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 5px 14px rgba(0,60,81,.18),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.nav.active::before {
  display: none !important;
}

.nav.active .nav-icon,
.nav.active svg {
  color: #FFFFFF !important;
}

.nav .ct {
  background: rgba(255,255,255,.10) !important;
  color: rgba(242,247,248,.82) !important;
}

.nav.active .ct {
  background: rgba(255,255,255,.18) !important;
  color: #FFFFFF !important;
}

.railfoot {
  background: rgba(0,60,81,.12) !important;
  border-top: 1px solid rgba(242,247,248,.16) !important;
}

.railfoot .av {
  background: #F2F7F8 !important;
  color: #006E74 !important;
  border: 1px solid rgba(255,255,255,.38) !important;
}

.signout {
  border-color: rgba(242,247,248,.22) !important;
  background: rgba(255,255,255,.06) !important;
  color: #F2F7F8 !important;
}

.signout:hover {
  background: rgba(255,255,255,.12) !important;
}

.railscroll {
  scrollbar-color: rgba(242,247,248,.28) transparent !important;
}

.railscroll::-webkit-scrollbar-track {
  background: transparent !important;
}

.railscroll::-webkit-scrollbar-thumb {
  background: rgba(242,247,248,.28) !important;
}

/* ------------------------------------------------------------------------
   TOPBAR — SAME UST DARK TEAL AS SIDEBAR
   ------------------------------------------------------------------------ */

.topbar,
.technician-app-shell .technician-topbar {
  background:
    linear-gradient(
      90deg,
      #006E74 0%,
      #006A70 55%,
      #005F65 100%
    ) !important;
  border-bottom: 1px solid rgba(0,60,81,.38) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.035),
    0 5px 16px rgba(0,60,81,.09) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.crumbs {
  color: rgba(242,247,248,.82) !important;
}

.crumbs .c {
  color: rgba(242,247,248,.88) !important;
}

.crumbs .c:hover {
  color: #FFFFFF !important;
}

.crumbs .sep {
  color: rgba(242,247,248,.50) !important;
}

.crumbs .cur {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.topbar-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.topbar-right .search {
  margin: 0 !important;
  flex: 0 0 230px !important;
  width: 230px !important;
  max-width: none !important;
}

.topbar .search input,
.technician-app-shell .technician-topbar .search input {
  background: rgba(0,60,81,.28) !important;
  border: 1px solid rgba(242,247,248,.28) !important;
  color: #FFFFFF !important;
  color-scheme: dark !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.topbar .search input::placeholder,
.technician-app-shell .technician-topbar .search input::placeholder {
  color: rgba(242,247,248,.72) !important;
}

.topbar .search input:hover,
.technician-app-shell .technician-topbar .search input:hover {
  background: rgba(0,60,81,.38) !important;
  border-color: rgba(242,247,248,.40) !important;
}

.topbar .search input:focus,
.technician-app-shell .technician-topbar .search input:focus {
  background: rgba(0,60,81,.48) !important;
  border-color: #F2F7F8 !important;
  box-shadow: 0 0 0 3px rgba(242,247,248,.12) !important;
}

.topbar .search svg,
.topbar .search-symbol {
  color: rgba(242,247,248,.86) !important;
}

.topbar .bell,
.topbar .menubtn,
.technician-app-shell .technician-topbar .bell {
  margin: 0 !important;
  flex: 0 0 auto !important;
  background: rgba(0,60,81,.28) !important;
  border: 1px solid rgba(242,247,248,.28) !important;
  color: #FFFFFF !important;
}

.topbar .bell:hover,
.topbar .menubtn:hover,
.technician-app-shell .technician-topbar .bell:hover {
  background: rgba(0,60,81,.45) !important;
  border-color: rgba(242,247,248,.42) !important;
}

.topbar .bell .dot {
  background: #FC6A59 !important;
  border-color: #006E74 !important;
}

.topbar-ust-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 2px !important;
}

.ust-header-logo {
  display: block !important;
  width: auto !important;
  height: 29px !important;
  max-width: 86px !important;
  object-fit: contain !important;
}

/* ------------------------------------------------------------------------
   PAGE HEADINGS
   ------------------------------------------------------------------------ */

h1.page,
.pagehead h1,
.technician-pagehead h1,
.technician-job-detail-head h1,
.field-stage-heading h1 {
  color: #231F20 !important;
}

.pagehead p.sub,
.technician-pagehead p,
.field-stage-heading p {
  color: #65757A !important;
}

.pagehead > .page-icon,
.pagehead .page-icon,
.technician-app-shell .tech-dashboard-heading h1::before {
  border: 1px solid #D7E0E3 !important;
  background: #F2F7F8 !important;
  color: #006E74 !important;
  box-shadow: none !important;
}

.phase-tag,
.pagehead .actions .phase-tag {
  background: #E5F8F1 !important;
  border: 1px solid #BFE8D7 !important;
  color: #007A58 !important;
}

/* ------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------ */

.btn {
  background: #FFFFFF !important;
  border-color: #D7E0E3 !important;
  color: #003C51 !important;
  box-shadow: none !important;
}

.btn:hover {
  background: #F2F7F8 !important;
  border-color: #B9C9CD !important;
  color: #006E74 !important;
}

.btn.primary,
.technician-app-shell .btn.primary,
.technician-app-shell :is(
  .stage7-button,
  .closeout-button,
  .field-checkout-button,
  .field-navigation-button,
  .field-full-button
) {
  background:
    linear-gradient(
      135deg,
      #0097AC,
      #006E74
    ) !important;
  border-color: #006E74 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(0,110,116,.16) !important;
}

.btn.primary:hover,
.technician-app-shell .btn.primary:hover {
  background:
    linear-gradient(
      135deg,
      #00A3B9,
      #005F65
    ) !important;
  border-color: #005F65 !important;
}

.btn:not(.primary):not(.danger):not(.ghost) {
  background: #FFFFFF !important;
  border-color: #D7E0E3 !important;
  color: #006E74 !important;
}

.btn:not(.primary):not(.danger):not(.ghost):hover {
  background: #E4F4F5 !important;
  border-color: #AFCFD2 !important;
  color: #005A60 !important;
}

.pagehead .actions .btn:not(.primary) {
  background: #FFFFFF !important;
  border-color: #D7E0E3 !important;
  color: #006E74 !important;
  box-shadow: none !important;
}

.pagehead .actions .btn:not(.primary):hover {
  background: #E4F4F5 !important;
  border-color: #AFCFD2 !important;
}

.btn.danger {
  background: #FFF0ED !important;
  border-color: #F8C5BE !important;
  color: #D34D3F !important;
}

.btn.danger:hover {
  background: #FFE6E1 !important;
  border-color: #F2A89E !important;
}

/* ------------------------------------------------------------------------
   CARDS / PANELS
   ------------------------------------------------------------------------ */

.card,
.form-card,
.settings-card,
.reportcard,
.detailhead,
.tablewrap,
.technician-profile-card,
.technician-job-card,
.technician-job-detail-head,
.technician-empty-state,
.field-stepper,
.field-site-summary,
.field-pickup-summary,
.assignment-group,
.equipment-assignment-section {
  background: #FFFFFF !important;
  border-color: #D7E0E3 !important;
  box-shadow: var(--shadow) !important;
}

.card .hd,
.form-card > .hd,
.tbar {
  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F7FAFA 100%
    ) !important;
  border-bottom-color: #E5EBED !important;
}

.card .hd h3,
.form-card > .hd h3,
.tbar > b,
.tbar strong {
  color: #231F20 !important;
}

.card .hd .sub,
.form-card > .hd .sub,
.tbar .rt {
  color: #65757A !important;
}

.card .bd,
.form-card > .bd {
  background: #FFFFFF !important;
  color: #33474C !important;
}

/* ------------------------------------------------------------------------
   KPI / SUMMARY CARDS — APPROXIMATELY HALF PREVIOUS HEIGHT
   ------------------------------------------------------------------------ */

.g4 {
  gap: 12px !important;
}

.kpi {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;

  min-height: 82px !important;
  height: auto !important;
  padding: 9px 13px !important;

  border: 1px solid #D7E0E3 !important;
  border-radius: 11px !important;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F8FAFA 100%
    ) !important;

  box-shadow:
    0 1px 2px rgba(35,31,32,.025),
    0 5px 14px rgba(0,60,81,.035) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.kpi:hover {
  transform: translateY(-1px);
  border-color: #C5D3D6 !important;
  box-shadow:
    0 2px 5px rgba(35,31,32,.03),
    0 8px 18px rgba(0,60,81,.05) !important;
}

.kpi > * {
  position: relative;
  z-index: 2;
}

.kpi::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -24px;
  bottom: -38px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(0,151,172,.075) !important;
  pointer-events: none;
}

.g4 .kpi:nth-child(1)::after {
  background: rgba(0,151,172,.075) !important;
}

.g4 .kpi:nth-child(2)::after {
  background: rgba(136,30,135,.065) !important;
}

.g4 .kpi:nth-child(3)::after {
  background: rgba(1,178,124,.075) !important;
}

.g4 .kpi:nth-child(4)::after {
  background: rgba(252,106,89,.07) !important;
}

.kpi .k-lbl {
  color: #65757A !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.kpi .k-lbl svg {
  width: 13px !important;
  height: 13px !important;
  color: #006E74 !important;
}

.kpi .k-val {
  margin-top: 5px !important;
  color: #231F20 !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

.kpi .k-val span {
  font-size: 11px !important;
  color: #89969A !important;
}

.kpi .k-delta,
.kpi .k-sub,
.kpi small {
  margin-top: 3px !important;
  color: #65757A !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

.kpi .k-icon,
.kpi .kpi-icon,
.kpi > .icon {
  top: 9px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: #E4F4F5 !important;
  border: 1px solid #C6E4E6 !important;
  color: #006E74 !important;
}

.g4 .kpi:nth-child(2) :is(.k-icon,.kpi-icon,.icon) {
  background: #F5E9F4 !important;
  border-color: #E7CDE5 !important;
  color: #881E87 !important;
}

.g4 .kpi:nth-child(3) :is(.k-icon,.kpi-icon,.icon) {
  background: #E5F8F1 !important;
  border-color: #C9ECDD !important;
  color: #01B27C !important;
}

.g4 .kpi:nth-child(4) :is(.k-icon,.kpi-icon,.icon) {
  background: #FFF0ED !important;
  border-color: #F9D1CB !important;
  color: #FC6A59 !important;
}

/* Technician dashboard KPI cards use the same compact proportions. */
.technician-app-shell .tech-dashboard-stat {
  min-height: 82px !important;
  padding: 10px 14px !important;
  background: #FFFFFF !important;
  border-color: #D7E0E3 !important;
}

.technician-app-shell .tech-dashboard-stat b {
  font-size: 23px !important;
  color: #231F20 !important;
}

.technician-app-shell .tech-dashboard-stat::after {
  width: 90px !important;
  height: 90px !important;
  right: -24px !important;
  bottom: -38px !important;
  background: rgba(0,151,172,.075) !important;
}

.technician-app-shell .tech-dashboard-stat:nth-child(2)::after {
  background: rgba(136,30,135,.065) !important;
}

.technician-app-shell .tech-dashboard-stat:nth-child(3)::after {
  background: rgba(1,178,124,.075) !important;
}

.technician-app-shell .tech-dashboard-stat:nth-child(4)::after {
  background: rgba(252,106,89,.07) !important;
}

/* ------------------------------------------------------------------------
   STATUS PILLS — UST ACCENT PALETTE
   ------------------------------------------------------------------------ */

.st-blue {
  background: #E8F0F2 !important;
  color: #003C51 !important;
}

.st-blue .d {
  background: #003C51 !important;
}

.st-teal {
  background: #E4F4F5 !important;
  color: #006E74 !important;
}

.st-teal .d {
  background: #0097AC !important;
}

.st-indigo,
.st-slate {
  background: #F0EEF1 !important;
  color: #655F6A !important;
}

.st-indigo .d,
.st-slate .d {
  background: #7A7480 !important;
}

.st-violet {
  background: #F5E9F4 !important;
  color: #881E87 !important;
}

.st-violet .d {
  background: #881E87 !important;
}

.st-green {
  background: #E5F8F1 !important;
  color: #00855D !important;
}

.st-green .d {
  background: #01B27C !important;
}

.st-red {
  background: #FFF0ED !important;
  color: #D55345 !important;
}

.st-red .d {
  background: #FC6A59 !important;
}

.st-amber {
  background: #F7F2E5 !important;
  color: #8A7447 !important;
}

.st-amber .d {
  background: #B49755 !important;
}

/* ------------------------------------------------------------------------
   TABLES
   ------------------------------------------------------------------------ */

.tablewrap {
  background: #FFFFFF !important;
  border-color: #D7E0E3 !important;
}

thead th,
.assignment-stock-table thead th {
  background: #EEF2F3 !important;
  border-color: #D7E0E3 !important;
  color: #65757A !important;
}

tbody tr,
.assignment-stock-table tbody tr:nth-child(odd) {
  background: #FFFFFF !important;
}

tbody tr:nth-child(even),
.assignment-stock-table tbody tr:nth-child(even) {
  background: #F7F9F9 !important;
}

tbody tr:hover,
.assignment-stock-table tbody tr:hover {
  background: #EAF4F5 !important;
}

tbody td,
.assignment-stock-table tbody td {
  border-bottom-color: #E7ECEE !important;
  color: #46595E !important;
}

.rowmain,
td .rowmain {
  color: #231F20 !important;
}

.rowsub,
td .rowsub {
  color: #7A878B !important;
}

.tid,
.mono,
.assignment-equipment-id {
  color: #006E74 !important;
}

/* ------------------------------------------------------------------------
   FORMS / INPUTS
   ------------------------------------------------------------------------ */

.form-grid input,
.form-grid select,
.form-grid textarea,
.filterbar input,
.filterbar select,
.inline-form input,
.inline-form select,
.inline-form textarea,
.upload-field input,
.upload-field select,
.upload-field textarea,
.settings-card input,
.settings-card select,
.settings-card textarea,
.field-location-form input,
.field-location-form select,
.field-location-form textarea,
.field-verification-form input,
.field-verification-form select,
.field-verification-form textarea,
.assignment-search-input,
.searchable-select-input,
.assignment-search input {
  background: #FFFFFF !important;
  border-color: #D2DCDF !important;
  color: #231F20 !important;
  color-scheme: light !important;
}

.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover,
.filterbar input:hover,
.filterbar select:hover,
.inline-form input:hover,
.inline-form select:hover,
.inline-form textarea:hover,
.upload-field input:hover,
.upload-field select:hover,
.upload-field textarea:hover,
.settings-card input:hover,
.settings-card select:hover,
.settings-card textarea:hover,
.field-location-form input:hover,
.field-location-form select:hover,
.field-location-form textarea:hover,
.field-verification-form input:hover,
.field-verification-form select:hover,
.field-verification-form textarea:hover,
.assignment-search-input:hover,
.searchable-select-input:hover {
  border-color: #B9C9CD !important;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.filterbar input:focus,
.filterbar select:focus,
.inline-form input:focus,
.inline-form select:focus,
.inline-form textarea:focus,
.upload-field input:focus,
.upload-field select:focus,
.upload-field textarea:focus,
.settings-card input:focus,
.settings-card select:focus,
.settings-card textarea:focus,
.field-location-form input:focus,
.field-location-form select:focus,
.field-location-form textarea:focus,
.field-verification-form input:focus,
.field-verification-form select:focus,
.field-verification-form textarea:focus,
.assignment-search-input:focus,
.searchable-select-input:focus,
.searchable-select.is-open .searchable-select-input {
  border-color: #0097AC !important;
  box-shadow: 0 0 0 3px rgba(0,151,172,.11) !important;
}

input::placeholder,
textarea::placeholder {
  color: #98A4A7 !important;
}

select option,
select optgroup {
  background: #FFFFFF !important;
  color: #231F20 !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #0097AC !important;
}

/* ------------------------------------------------------------------------
   SECONDARY SURFACES / TABS / NOTES
   ------------------------------------------------------------------------ */

.form-actions,
.standalone-actions,
.assignment-toolbar,
.assignment-pagination,
.assignment-group-foot {
  background: #F2F7F8 !important;
  border-color: #D7E0E3 !important;
}

.tabs,
.site-detail-tabs {
  background: #F2F7F8 !important;
  border-color: #D7E0E3 !important;
}

.tab {
  color: #65757A !important;
}

.tab:hover {
  background: #E4F4F5 !important;
  color: #006E74 !important;
}

.tab.active {
  background: #DDF0F2 !important;
  color: #006E74 !important;
  border-bottom-color: #0097AC !important;
}

.note,
.field-info-banner {
  background: #E4F4F5 !important;
  border-color: #C6E4E6 !important;
  color: #006E74 !important;
}

.warnnote,
.field-status-warning {
  background: #F7F2E5 !important;
  border-color: #E4D7B8 !important;
  color: #856F40 !important;
}

.flash-success,
.field-success-banner {
  background: #E5F8F1 !important;
  border-color: #C9ECDD !important;
  color: #00855D !important;
}

.flash-error {
  background: #FFF0ED !important;
  border-color: #F9D1CB !important;
  color: #D55345 !important;
}

.uploadzone,
.field-document,
.field-next-step,
.field-readiness-item,
.field-arrival-photo,
.field-evidence-card,
.stock-choice,
.tech-col,
.jcard {
  background: #F7F9F9 !important;
  border-color: #D7E0E3 !important;
}

.uploadzone:hover,
.field-document:hover,
.field-evidence-card:hover,
.stock-choice:hover {
  background: #EAF4F5 !important;
  border-color: #AFCFD2 !important;
}

/* ------------------------------------------------------------------------
   SEARCHABLE SELECTS
   ------------------------------------------------------------------------ */

.searchable-select-menu {
  background: #FFFFFF !important;
  border-color: #D2DCDF !important;
  box-shadow: 0 16px 34px rgba(0,60,81,.12) !important;
}

.searchable-select-option {
  color: #33474C !important;
}

.searchable-select-option:hover,
.searchable-select-option.is-active {
  background: #E4F4F5 !important;
  color: #006E74 !important;
}

.searchable-select-option.is-selected {
  color: #005A60 !important;
}

/* ------------------------------------------------------------------------
   ASSIGNMENT / STOCK PANELS
   ------------------------------------------------------------------------ */

.assignment-group,
.equipment-assignment-section {
  background: #FFFFFF !important;
  border-color: #D7E0E3 !important;
}

.assignment-main-header,
.assignment-group-head {
  background:
    linear-gradient(
      135deg,
      #006E74,
      #005A60
    ) !important;
  border-color: #00545A !important;
}

.assignment-main-header h3,
.assignment-group-title {
  color: #FFFFFF !important;
}

.assignment-main-header .sub,
.assignment-group-summary {
  color: rgba(242,247,248,.78) !important;
}

.assignment-group-summary b {
  color: #FFFFFF !important;
}

.assignment-total,
.assignment-limit-badge {
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.23) !important;
  color: #FFFFFF !important;
}

.assignment-stock-table tbody tr.is-selected {
  background: #E5F8F1 !important;
}

.assignment-checkbox-label input:checked + span {
  background: #01B27C !important;
  border-color: #01B27C !important;
}

.equipment-assignment-actions {
  background:
    linear-gradient(
      135deg,
      #006E74,
      #005A60
    ) !important;
  border-top-color: #00545A !important;
}

.assignment-action-message strong,
.assignment-action-message span {
  color: #FFFFFF !important;
}

.assignment-submit-button {
  background:
    linear-gradient(
      135deg,
      #0097AC,
      #007F90
    ) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: #FFFFFF !important;
}

/* ------------------------------------------------------------------------
   DECOMMISSION PAGE — ALIGN WITH UST PALETTE
   ------------------------------------------------------------------------ */

.decomm-page {
  --decomm-ink: #231F20;
  --decomm-text: #46595E;
  --decomm-muted: #718085;
  --decomm-line: #D7E0E3;
  --decomm-soft: #F2F7F8;
  --decomm-blue: #0097AC;
  --decomm-green: #01B27C;
  --decomm-amber: #B49755;
  --decomm-violet: #881E87;
}

.decomm-hero {
  background:
    radial-gradient(
      circle at 92% 20%,
      rgba(0,151,172,.10),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #FFFFFF,
      #F2F7F8
    ) !important;
}

.decomm-hero::before,
.decomm-kpi:not(.amber):not(.purple):not(.green) {
  border-color: #0097AC !important;
}

.decomm-eyebrow,
.equipment-id {
  color: #006E74 !important;
}

.decomm-kpi.amber {
  border-top-color: #DBD3BD !important;
}

.decomm-kpi.purple {
  border-top-color: #881E87 !important;
}

.decomm-kpi.green {
  border-top-color: #01B27C !important;
}

.decomm-action-btn,
.decomm-open-button,
.decomm-submit-button,
.decomm-location-button {
  background:
    linear-gradient(
      135deg,
      #0097AC,
      #006E74
    ) !important;
}

/* ------------------------------------------------------------------------
   SCROLLBARS
   ------------------------------------------------------------------------ */

html,
body,
.main,
.content,
.tablewrap,
.technician-table-scroll,
.assignment-table-wrap,
.searchable-select-menu {
  scrollbar-color: #BFCBCD #F2F5F5 !important;
  scrollbar-width: thin;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.tablewrap::-webkit-scrollbar-track,
.technician-table-scroll::-webkit-scrollbar-track,
.assignment-table-wrap::-webkit-scrollbar-track,
.searchable-select-menu::-webkit-scrollbar-track {
  background: #F2F5F5 !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.tablewrap::-webkit-scrollbar-thumb,
.technician-table-scroll::-webkit-scrollbar-thumb,
.assignment-table-wrap::-webkit-scrollbar-thumb,
.searchable-select-menu::-webkit-scrollbar-thumb {
  border: 2px solid #F2F5F5 !important;
  border-radius: 999px;
  background: #BFCBCD !important;
}

/* ------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .topbar-right .search {
    width: 205px !important;
    flex-basis: 205px !important;
    max-width: 31vw !important;
  }

  .ust-header-logo {
    height: 25px !important;
    max-width: 72px !important;
  }

  .kpi {
    min-height: 78px !important;
  }
}

@media (max-width: 820px) {
  .topbar {
    background: #006E74 !important;
  }

  .rail,
  .technician-rail,
  .technician-app-shell .technician-rail {
    background:
      linear-gradient(
        180deg,
        #006E74,
        #005A60
      ) !important;
    box-shadow: 12px 0 34px rgba(0,60,81,.24) !important;
  }
}

@media (max-width: 700px) {
  .topbar-right .search {
    display: none !important;
  }

  .ust-header-logo {
    height: 22px !important;
    max-width: 60px !important;
  }

  .kpi {
    min-height: 76px !important;
    padding: 9px 12px !important;
  }

  .kpi .k-val {
    font-size: 21px !important;
  }
}

/* ========================================================================
   NOVUS360 — FINAL DARK TEAL ACTION BUTTONS
   Keep at the VERY END of app.css
   ======================================================================== */

:root {
    --action-teal: #006E74;
    --action-teal-hover: #005B61;
    --action-teal-active: #004C51;
    --action-teal-soft: #E4F3F3;
}


/* Standard buttons */
.btn:not(.danger):not(.ghost),
.btn.primary {
    background: #006E74 !important;
    border-color: #006E74 !important;
    color: #ffffff !important;

    box-shadow:
        0 4px 10px
        rgba(0, 110, 116, .14) !important;
}


.btn:not(.danger):not(.ghost):hover,
.btn.primary:hover {
    background: #005B61 !important;
    border-color: #005B61 !important;
    color: #ffffff !important;
}


.btn:not(.danger):not(.ghost):active,
.btn.primary:active {
    background: #004C51 !important;
    border-color: #004C51 !important;
}


/* Decommission action buttons */
.decomm-action-btn,
.decomm-open-button,
.decomm-submit-button,
.decomm-location-button {
    background:
        linear-gradient(
            135deg,
            #007B82,
            #006E74
        ) !important;

    border-color: #006E74 !important;

    color: #ffffff !important;

    box-shadow:
        0 5px 12px
        rgba(0, 110, 116, .18) !important;
}


.decomm-action-btn:hover,
.decomm-open-button:hover,
.decomm-submit-button:hover,
.decomm-location-button:hover {
    background:
        linear-gradient(
            135deg,
            #006E74,
            #005B61
        ) !important;

    color: #ffffff !important;
}


/* Equipment assignment */
.assignment-submit-button {
    background:
        linear-gradient(
            135deg,
            #007B82,
            #006E74
        ) !important;

    border-color: #006E74 !important;

    box-shadow:
        0 8px 20px
        rgba(0, 110, 116, .18) !important;
}


.assignment-submit-button:hover:not(:disabled) {
    background:
        linear-gradient(
            135deg,
            #006E74,
            #005B61
        ) !important;
}


.assignment-submit-count {
    background: #ffffff !important;
    color: #006E74 !important;
}


/* Technician portal primary actions */
.technician-app-shell .btn.primary,
.technician-app-shell .stage7-button.primary,
.technician-app-shell .closeout-button.primary,
.technician-app-shell .field-checkout-button,
.technician-app-shell .field-navigation-button,
.technician-app-shell .field-full-button,
.technician-app-shell .tech-dashboard-open,
.technician-app-shell .open-link,
.technician-app-shell .jobs-btn {
    background:
        linear-gradient(
            135deg,
            #007B82,
            #006E74
        ) !important;

    border-color: #006E74 !important;

    color: #ffffff !important;

    box-shadow:
        0 6px 15px
        rgba(0, 110, 116, .17) !important;
}


.technician-app-shell .btn.primary:hover,
.technician-app-shell .stage7-button.primary:hover,
.technician-app-shell .closeout-button.primary:hover,
.technician-app-shell .field-checkout-button:hover,
.technician-app-shell .field-navigation-button:hover,
.technician-app-shell .field-full-button:hover,
.technician-app-shell .tech-dashboard-open:hover,
.technician-app-shell .open-link:hover,
.technician-app-shell .jobs-btn:hover {
    background:
        linear-gradient(
            135deg,
            #006E74,
            #005B61
        ) !important;

    border-color: #005B61 !important;

    color: #ffffff !important;
}


/* Stage 7 actions */
.stage7-button.primary {
    background: #006E74 !important;
    border-color: #006E74 !important;

    color: #ffffff !important;

    box-shadow:
        0 5px 12px
        rgba(0, 110, 116, .18) !important;
}


.stage7-button.primary:not(:disabled):hover {
    background: #005B61 !important;
    border-color: #005B61 !important;
}


/* Pagination / small action buttons when active */
.assignment-page-button:hover:not(:disabled),
.reports-page-btn:hover:not(:disabled) {
    border-color: #006E74 !important;

    background: #E4F3F3 !important;

    color: #006E74 !important;
}


.reports-page-btn.active {
    border-color: #006E74 !important;
    background: #006E74 !important;
    color: #ffffff !important;
}


/* Links styled as action buttons */
a.btn.primary,
a.decomm-action-btn,
a.decomm-open-button {
    color: #ffffff !important;
    text-decoration: none !important;
}


/* Disabled buttons */
.btn.primary:disabled,
.assignment-submit-button:disabled,
.decomm-submit-button:disabled,
.stage7-button.primary:disabled {
    background: #B7CDCF !important;
    border-color: #B7CDCF !important;
    color: #6E8587 !important;
    box-shadow: none !important;
}




/* Expandable completed decommission stages */

.decomm-page .decomm-stage-evidence {
  border-top: 1px solid #cfe8dd;
}

.decomm-page .decomm-stage-evidence > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  list-style: none;
  cursor: pointer;
  color: #087f5b;
  font-size: 13px;
  font-weight: 700;
}

.decomm-page .decomm-stage-evidence > summary::-webkit-details-marker {
  display: none;
}

.decomm-page .decomm-stage-evidence > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
}

.decomm-page .decomm-stage-evidence[open] > summary::after {
  content: "−";
}

.decomm-page .decomm-stage-evidence > summary:hover {
  background: rgba(10, 167, 121, 0.05);
}

.decomm-page .decomm-stage-evidence > summary:focus-visible {
  outline: 2px solid #269b83;
  outline-offset: -3px;
  border-radius: 8px;
}

.decomm-page .decomm-stage-photo-count {
  padding: 3px 8px;
  border: 1px solid #bde2d3;
  border-radius: 999px;
  background: #fff;
  color: #087f5b;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.decomm-page .decomm-stage-evidence-body {
  padding: 0 18px 18px;
  background: #fff;
  border-radius: 0 0 12px 12px;
}

.decomm-page .decomm-stage-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #e0e8ef;
  border-radius: 10px;
  background: #f8fafc;
}

.decomm-page .decomm-stage-details dt,
.decomm-page .decomm-stage-meta-label {
  display: block;
  color: #71839a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.decomm-page .decomm-stage-details dd {
  margin: 5px 0 0;
  color: #243b58;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.decomm-page .decomm-stage-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.decomm-page .decomm-stage-photo-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cfe8dd;
  border-radius: 11px;
  background: #f5fbf8;
}

.decomm-page .decomm-stage-photo-link {
  display: block;
  flex: 0 0 130px;
  min-height: 190px;
  background: #e7f0ed;
}

.decomm-page .decomm-stage-photo-link img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
}

.decomm-page .decomm-stage-photo-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
}

.decomm-page .decomm-stage-photo-info strong,
.decomm-page .decomm-stage-photo-info > a {
  margin-top: 5px;
  color: #18364d;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.decomm-page .decomm-stage-photo-info > a {
  color: #1670c5;
}

.decomm-page .decomm-stage-photo-info .decomm-stage-meta-label:not(:first-child) {
  margin-top: 12px;
}

.decomm-page .decomm-stage-photo-info p {
  margin: 5px 0 12px;
  color: #536782;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.decomm-page .decomm-stage-photo-info footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #dbeae3;
  color: #71839a;
  font-size: 10px;
  line-height: 1.5;
}

.decomm-page .decomm-stage-restricted,
.decomm-page .decomm-stage-empty {
  margin: 0;
  padding: 14px 18px;
  color: #6b7d95;
  font-size: 12px;
  line-height: 1.6;
}

.decomm-page .decomm-stage-restricted {
  border-top: 1px solid #dcebe4;
}

@media (max-width: 1100px) {
  .decomm-page .decomm-stage-photo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .decomm-page .decomm-stage-details {
    grid-template-columns: 1fr;
  }

  .decomm-page .decomm-stage-photo-card {
    flex-direction: column;
  }

  .decomm-page .decomm-stage-photo-link {
    flex-basis: auto;
    height: 190px;
  }

  .decomm-page .decomm-stage-photo-link img {
    height: 190px;
  }

  .decomm-page .decomm-stage-evidence-body {
    padding: 0 12px 12px;
  }
}


/* =========================================================
   STAGE 7 — ADD ANOTHER PHOTO
   ========================================================= */

.technician-app-shell
.stage7-add-photo-button {
    min-height: 42px;

    padding:
        9px
        17px;

    border:
        1px solid
        #2563EB !important;

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #1D4ED8
        ) !important;

    color:
        #ffffff !important;

    font-weight: 800;

    box-shadow:
        0 6px 16px
        rgba(37, 99, 235, .24) !important;
}


.technician-app-shell
.stage7-add-photo-button
span {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}


.technician-app-shell
.stage7-add-photo-button:not(:disabled):hover {
    border-color:
        #1E40AF !important;

    background:
        linear-gradient(
            135deg,
            #1D4ED8,
            #1E40AF
        ) !important;

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, .32) !important;

    transform:
        translateY(-1px);
}


.technician-app-shell
.stage7-add-photo-button:not(:disabled):active {
    transform:
        translateY(0);

    box-shadow:
        0 3px 9px
        rgba(37, 99, 235, .24) !important;
}


.technician-app-shell
.stage7-add-photo-button:focus-visible {
    outline:
        3px solid
        rgba(37, 99, 235, .28);

    outline-offset:
        3px;
}


@media (max-width: 700px) {
    .technician-app-shell
    .stage7-add-photo-button {
        width: 100%;
        min-height: 46px;
    }
}