@import url("tokens.cf47ae3e8089.css");
/* App styles implementing /workspace/brcgs-design (design-brief.md, dashboard.html, login.html). */
*{box-sizing:border-box}
body{font-family:var(--font-sans);font-size:var(--fs-base);color:var(--ink-700);background:var(--canvas);margin:0;font-variant-numeric:tabular-nums}
h1,h2,h3,h4,h5{color:var(--ink-900)}
h1,.h-title{font:800 24px var(--font-display);margin:0}
h2{font:800 20px var(--font-display)} h5{font-size:14px;font-weight:600;margin:0 0 12px}
a{color:var(--brand-600);font-weight:600;text-decoration:none} a:hover{color:var(--brand-700)}
code,.id,.mono{font:500 12px var(--font-mono);color:var(--ink-500)}
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
/* Sidebar */
aside{background:var(--brand-900);color:rgba(255,255,255,.72);padding:20px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
aside .logo{display:flex;align-items:center;gap:10px;color:#fff;font:800 17px/1.15 var(--font-display);padding:4px 8px 22px}aside .logo .name,.brandpanel .logo .name{min-width:0}
.mark{width:30px;height:30px;border-radius:8px;background:var(--brand-500);display:grid;place-items:center;flex:none}
.ph{font:500 10px var(--font-sans);border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:1px 6px;opacity:.7}
aside a{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:8px;font-weight:500;font-size:13.5px;color:rgba(255,255,255,.72)}
aside a:hover{color:#fff;background:rgba(255,255,255,.05)} aside a.on{background:rgba(20,184,166,.18);color:#fff}
aside .grp{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.4);padding:14px 10px 4px}
aside .sub a{padding:6px 10px 6px 40px;font-size:13px}
.sp{flex:1}.user{display:flex;gap:10px;align-items:center;padding:12px 10px;border-top:1px solid rgba(255,255,255,.1);margin-top:8px}
.av{width:32px;height:32px;border-radius:50%;background:var(--brand-500);color:var(--brand-900);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.user b{color:#fff;font-weight:600;display:block;font-size:13px}.user small{font-size:12px}
.user button{background:none;border:0;color:rgba(255,255,255,.6);font-size:12px;padding:0;cursor:pointer}.user button:hover{color:#fff}
/* Header */
.main{display:flex;flex-direction:column;min-width:0}
header.top{height:64px;background:#fff;border-bottom:1px solid var(--ink-200);display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;z-index:5}
.site{display:flex;gap:8px;align-items:center;border:1px solid var(--ink-200);border-radius:8px;padding:7px 12px;font-weight:600;color:var(--ink-900);font-size:13px}
.search{flex:1;max-width:380px;display:flex;gap:8px;align-items:center;background:var(--ink-100);border-radius:8px;padding:0 12px;color:var(--ink-500);font-size:13px;height:36px}
.search input{border:0;background:transparent;outline:0;flex:1;font:13px var(--font-sans)}
.hs{margin-left:auto;display:flex;gap:12px;align-items:center}.bell{position:relative;color:var(--ink-500)}
.bell.dot:after{content:"";position:absolute;top:0;right:0;width:7px;height:7px;background:var(--bad-700);border-radius:50%;border:2px solid #fff}
.wrap{padding:24px 28px;display:grid;gap:20px;align-content:start}
.pagehead{display:flex;align-items:end;justify-content:space-between;gap:16px}.pagehead p{color:var(--ink-500);margin:4px 0 0}
/* Buttons */
.btn{height:38px;padding:0 14px;border-radius:var(--r-md);border:1px solid transparent;background:var(--brand-600);color:#fff;font:600 13px var(--font-sans);display:inline-flex;gap:6px;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--brand-700);color:#fff}.btn:focus-visible{outline:0;box-shadow:var(--focus)}
.btn-sm{height:32px;padding:0 10px;font-size:12.5px}
.btn-lg{height:46px;padding:0 20px;font-size:15px;box-shadow:0 2px 8px rgba(11,46,42,.18)}
.btn-secondary,.btn2,.btn-outline-primary,.btn-outline-secondary{background:#fff;color:var(--ink-900);border-color:var(--ink-300)}
.btn-secondary:hover,.btn2:hover,.btn-outline-primary:hover,.btn-outline-secondary:hover{background:var(--ink-100);color:var(--ink-900)}
.btn-ghost,.btn-link{background:none;color:var(--brand-600);border:0}.btn-ghost:hover,.btn-link:hover{background:var(--brand-50);color:var(--brand-700)}
.btn-danger,.btn-outline-danger{background:var(--bad-700);color:#fff}.btn-danger:hover,.btn-outline-danger:hover{background:#991B1B;color:#fff}
.btn-success{background:var(--brand-600)}.btn-warning{background:#fff;color:var(--warn-700);border-color:#FCD34D}.btn-warning:hover{background:var(--warn-50);color:var(--warn-700)}
/* Inputs */
label,.lbl{display:block;font-weight:600;font-size:13px;color:var(--ink-900);margin:0 0 6px}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{width:100%;min-height:40px;background:#fff;border:1px solid var(--ink-300);border-radius:var(--r-md);padding:8px 12px;font:14px var(--font-sans);color:var(--ink-900)}
.form-control-sm,.form-select-sm,.in-sm{min-height:32px!important;padding:4px 8px!important;font-size:13px!important}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand-600);box-shadow:var(--focus)}
input[type=checkbox]{accent-color:var(--brand-600);width:16px;height:16px;vertical-align:middle}
fieldset[disabled] input,fieldset[disabled] select,fieldset[disabled] textarea{background:var(--ink-100);color:var(--ink-700)}
.errorlist{color:var(--bad-700);font-size:12px;padding:0;list-style:none;margin:4px 0}
.formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 16px;align-items:end}
.formgrid p{margin:0}
/* Cards */
.card{background:var(--surface);border:1px solid var(--ink-200);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:20px;min-width:0}
.ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px}.ch h3{font-size:14px;font-weight:600;color:var(--ink-900);margin:0}.ch a{font-size:13px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g21{grid-template-columns:2.1fr 1fr}
@media (max-width:1100px){.g2,.g3,.g21,.r1{grid-template-columns:1fr!important}.g4{grid-template-columns:1fr 1fr!important}}
/* Dashboard */
.r1{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;gap:16px}.score{display:flex;gap:20px;align-items:center}.score .n{font:800 34px var(--font-display);color:var(--ink-900)}
.bars{flex:1;display:grid;gap:7px;font-size:12px}.bar{display:grid;grid-template-columns:110px 1fr 30px;gap:8px;align-items:center}
.bar i{height:6px;border-radius:9px;background:var(--ink-100);overflow:hidden}.bar i b{display:block;height:100%;border-radius:9px}
.kpi small{color:var(--ink-500);font-weight:500;font-size:13px;display:flex;justify-content:space-between;line-height:1.3}.kpi .n{font:800 30px var(--font-display);color:var(--ink-900);margin:10px 0 6px}.kpi .d{font-size:12px}
.kpi a.n{display:block}
.ev{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--ink-200);align-items:center}.ev:last-child{border:0}
.dt{width:44px;text-align:center;border:1px solid var(--ink-200);border-radius:8px;padding:4px 0;flex:none}.dt small{display:block;font-size:10px;color:var(--ink-500);text-transform:uppercase;font-weight:600}.dt b{font:800 17px var(--font-display);color:var(--ink-900)}
.ev .t{flex:1}.ev .t b{display:block;color:var(--ink-900);font-weight:600;font-size:13px}.ev .t span{font-size:12px;color:var(--ink-500)}
/* Badges (pill, dot + label; colour never alone) */
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:3px 9px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1.4}
.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ok{color:var(--ok-700);background:var(--ok-50)}.warn{color:var(--warn-700);background:var(--warn-50)}.bad{color:var(--bad-700);background:var(--bad-50)}.info{color:var(--info-700);background:var(--info-50)}.muted{color:var(--ink-500);background:var(--ink-100)}
.chip{display:inline-block;font:600 11px var(--font-sans);border-radius:6px;padding:2px 6px;margin:1px;background:var(--bad-50);color:var(--bad-700)}.chip.warn{background:var(--warn-50);color:var(--warn-700)}
/* Tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500);background:var(--ink-100);padding:9px 12px;font-weight:600;white-space:nowrap}
th:first-child{border-radius:8px 0 0 8px}th:last-child{border-radius:0 8px 8px 0}
td{padding:12px;border-bottom:1px solid var(--ink-200);color:var(--ink-700);vertical-align:middle}tbody tr:last-child td,table tr:last-child td{border-bottom:0}
table.hover tr:hover td{background:var(--brand-50)} td b{color:var(--ink-900);font-weight:500}td.num,th.num{text-align:right}
table.compact td{padding:7px 10px}
.row-bad td{background:var(--bad-50)}.row-warn td{background:var(--warn-50)}
/* Alerts & e-sign */
.alert{border-radius:var(--r-md);padding:10px 14px;font-weight:500;border:1px solid}
.alert-success{background:var(--ok-50);color:var(--ok-700);border-color:#BBF7D0}.alert-danger,.alert-error{background:var(--bad-50);color:var(--bad-700);border-color:#FECACA}
.alert-warning{background:var(--warn-50);color:var(--warn-700);border-color:#FDE68A}.alert-info{background:var(--info-50);color:var(--info-700);border-color:#BFDBFE}
.esign{background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r-lg);padding:12px 14px;display:inline-block;margin:0 8px 8px 0}
.esign form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.esign strong{font-size:13px;color:var(--brand-700);display:flex;gap:6px;align-items:center}
.esign input{width:200px!important;min-height:34px!important}
.muted-text,.text-muted{color:var(--ink-500)!important}.small{font-size:12.5px}
.stack{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.mb0{margin-bottom:0}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:13px}dl.kv dt{color:var(--ink-500);font-weight:500}dl.kv dd{margin:0;color:var(--ink-900)}
details summary{cursor:pointer;color:var(--brand-600);font-weight:600;font-size:12px}
pre{white-space:pre-wrap;word-break:break-all;font:11px var(--font-mono);background:var(--ink-100);padding:8px;border-radius:6px}
/* Login */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.brandpanel{background:radial-gradient(circle at 80% 10%,#115E56 0,transparent 45%),var(--brand-900);color:#fff;padding:48px 56px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.brandpanel:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.brandpanel>*{position:relative;z-index:1}.brandpanel .logo{display:flex;align-items:center;gap:10px;font:800 20px var(--font-display)}
.brandpanel .mark{width:34px;height:34px;border-radius:9px}
.brandpanel h1{font:800 40px/1.15 var(--font-display);margin:auto 0 16px;max-width:460px;color:#fff}.lead{color:rgba(255,255,255,.75);font-size:16px;line-height:1.6;max-width:440px;margin:0}
.brandpanel ul{list-style:none;padding:0;margin:28px 0 36px;display:grid;gap:12px}.brandpanel li{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.88)}
.mini{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:18px 20px;display:flex;gap:18px;align-items:center;max-width:420px;margin-bottom:auto}
.mini b{font:800 28px var(--font-display)}.mini small{color:rgba(255,255,255,.6);display:block}.foot{font-size:12px;color:rgba(255,255,255,.5);margin:0}
.formpanel{display:grid;place-items:center;background:#fff;padding:32px}.box{width:400px;max-width:100%}.box h2{font:800 28px var(--font-display);margin:0}.box .sub{color:var(--ink-500);margin:8px 0 28px}
.box .f{margin-bottom:16px;position:relative}.box input:not([type=checkbox]){height:44px}.eye{position:absolute;right:12px;top:37px;color:var(--ink-500);background:none;border:0;cursor:pointer;padding:0}
.box .rowx{display:flex;justify-content:space-between;align-items:center;font-size:13px}.box .rowx label{display:flex;gap:8px;align-items:center;font-weight:500;margin:0;color:var(--ink-700)}
.box .pri{width:100%;height:44px;margin-top:24px;font-size:14px}.note{margin-top:28px;text-align:center;font-size:12px;color:var(--ink-500);display:flex;gap:6px;justify-content:center;align-items:center}
@media (max-width:900px){.login{grid-template-columns:1fr}.brandpanel{display:none}}
.search input{border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important;padding:0!important}
.r1{grid-template-columns:1.9fr 1fr 1fr 1fr 1fr}
.bar{grid-template-columns:minmax(90px,auto) 1fr 28px}.bars{min-width:0}
.pagehead .stack{flex-wrap:nowrap}.pagehead>div:first-child{min-width:0}
.bar i{display:block;min-width:40px}
/* Brand logo (We.Do.Brands wordmark) */
.logo img,.mlogo img{display:block;height:30px;width:auto;max-width:100%}.brandpanel .logo img{height:44px}
.logo .tag,.mlogo .tag{font:800 12px var(--font-display);letter-spacing:.1em;border-radius:6px;padding:3px 7px;align-self:flex-end;margin-bottom:2px}
aside .logo .tag,.brandpanel .logo .tag{color:var(--brand-100);border:1px solid rgba(255,255,255,.28)}
.mlogo{display:none;align-items:center;gap:10px;margin-bottom:28px}.mlogo .tag{color:var(--brand-700);border:1px solid var(--ink-300)}
.menubtn,.navscrim,.navbtn{display:none}
a.logo{text-decoration:none;color:inherit}
.navbtn{place-items:center;height:40px;min-width:40px;border:1px solid var(--ink-200);border-radius:8px;background:#fff;color:var(--ink-900);flex:none;padding:0 8px;gap:6px;text-decoration:none;font:600 14px/1 Inter,system-ui,sans-serif;cursor:pointer}
.navbtn.homebtn,header.top a.navbtn.homebtn{background:var(--brand-700,#141414);border-color:transparent;color:#fff}
.navbtn .navlbl{display:none;color:inherit;margin:0}
@media (min-width:380px){.navbtn.homebtn .navlbl{display:inline}.navbtn.homebtn{padding:0 12px 0 10px}}
@media (display-mode:standalone){.navbtn{display:inline-flex;align-items:center}}
/* Phone / small tablet */
@media (max-width:900px){
  .mlogo{display:flex}
  .formpanel{padding:28px 20px;place-items:start stretch}
  .formpanel .box{width:100%;max-width:400px;margin:0 auto}
  .rowx{flex-wrap:wrap;gap:8px}
  .app{grid-template-columns:1fr}
  aside{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;height:100dvh;z-index:60;transform:translateX(-102%);transition:transform .2s ease;padding-top:max(20px,env(safe-area-inset-top))}
  body.nav-open aside{transform:none;box-shadow:var(--sh-lg)}
  body.nav-open .navscrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55}
  body.nav-open{overflow:hidden}
  .navbtn{display:inline-flex;align-items:center}
  .menubtn{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--ink-200);border-radius:8px;background:#fff;color:var(--ink-900);flex:none;padding:0}
  header.top{height:56px;padding:0 12px;gap:10px;padding-top:env(safe-area-inset-top)}
  header.top .site{display:none}
  .search{max-width:none;min-width:0}
  .hs{gap:8px}.hs .btn{font-size:0;gap:0;padding:0 10px;height:36px}.hs .btn svg{margin:0}
  .wrap{padding:16px 12px;gap:14px}
  .card{padding:14px}
  .pagehead{flex-direction:column;align-items:stretch;gap:10px}.pagehead .stack{flex-wrap:wrap}
  .pagehead h1{font-size:22px}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .card[style*="max-width"]{max-width:100%!important}
  input,select,textarea{max-width:100%}
  .formgrid{grid-template-columns:1fr}
}

/* ---- Cleaning & hygiene ---- */
.overdue-banner{display:flex;gap:10px;align-items:center;background:var(--bad-50);border:1px solid var(--bad-700);color:var(--bad-700);border-radius:10px;padding:10px 14px;margin:0 0 14px;text-decoration:none}
.overdue-banner span{margin-left:auto;font-weight:600;white-space:nowrap}
.cstats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:10px}
.cstats .cs{display:block;border:1px solid var(--line,#E2E8F0);border-radius:10px;padding:10px 12px;color:var(--ink-700);text-decoration:none;font-weight:400}
.cstats .cs b{display:block;font:800 24px var(--font-display);color:var(--ink-900)}.cstats .cs span{font-size:12px;color:var(--ink-500)}
.cstats .cs.bad{background:var(--bad-50);border-color:var(--bad-700)}.cstats .cs.bad b{color:var(--bad-700)}
.cstats .cs.warn{background:var(--warn-50)}.cstats .cs.warn b{color:var(--warn-700)}
.dlist{display:flex;flex-direction:column;gap:8px}
.ditem{display:flex;gap:12px;align-items:center;border:1px solid var(--line,#E2E8F0);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink-700);font-weight:400;text-decoration:none}
.ditem.over{border-left:4px solid var(--bad-700);background:var(--bad-50)}.ditem.gate{border-left:4px solid var(--warn-700)}
.ditem .t{flex:1;min-width:0}.ditem .t b{display:block;color:var(--ink-900)}.ditem .t span{font-size:12px;color:var(--ink-500)}
.ditem .w{text-align:right;font-size:12px;white-space:nowrap}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.2);vertical-align:-1px;margin-right:4px}
.signform label{display:block;font-weight:600;margin:12px 0 4px}.signform input[type=number],.signform textarea,.signform select{width:100%}
.atp-legend{font-size:12px;color:var(--ink-500)}
.photo-thumb{max-width:260px;max-height:260px;border-radius:8px;border:1px solid var(--line,#E2E8F0)}
.secthead{display:flex;align-items:center;gap:8px;margin:18px 0 8px}.secthead h3{margin:0}
@media (max-width:900px){.cstats{grid-template-columns:repeat(2,1fr)}.cstats .cs:last-child{grid-column:span 2}
 .signform input,.signform textarea,.signform select,.signform .btn{font-size:16px}.signform .btn{width:100%;padding:12px}
 .overdue-banner{position:sticky;top:0;z-index:5}}
@media print{.overdue-banner,.noprint{display:none!important}}
/* ---- User management ---- */
.lbl{display:block;font-weight:600;margin:12px 0 6px}
.chips-in{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line,#E2E8F0);border-radius:999px;padding:6px 12px;cursor:pointer;font-weight:500;background:#fff}
.pick input{margin:0}.pick:has(input:checked){border-color:var(--brand-600);background:var(--ok-50);color:var(--brand-700,#0F766E)}
.ditem .av{flex:none}.ditem.muted{opacity:.6}
.chip.ok-chip{background:var(--ok-50);color:var(--ok-700)}
@media (max-width:900px){.pick{padding:9px 14px}}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.filters>input,.filters>select{width:auto!important;flex:1 1 160px;max-width:320px}
/* ---- Recipe version diff ---- */
.diff tr.d-added td{background:var(--ok-50)}.diff tr.d-removed td{background:var(--bad-50);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.diff tr.d-changed td{background:var(--warn-50)}.diff tr.d-same td{color:var(--ink-500)}
@media (max-width:900px){.hide-sm{display:none}}
.pagehead .filters>select{flex:0 0 auto;width:auto!important;min-width:80px}
@media (max-width:900px){.diff .id{display:none}.diff td,.diff th{padding:6px 4px!important;font-size:12px}.diff td.num{white-space:nowrap}}
/* roles & permissions matrix */
table.perm th.c,table.perm td.c{text-align:center;width:84px}
table.perm .rad{display:inline-flex;padding:10px;cursor:pointer}
table.perm .rad input{width:20px;height:20px;accent-color:var(--brand-600)}
table.perm tr:has(input[value=act]:checked) td:first-child b{color:var(--brand-700,#0F766E)}
@media (max-width:760px){table.perm{display:table;white-space:normal;table-layout:fixed}table.perm th.c,table.perm td.c{width:46px;padding-left:0;padding-right:0;font-size:11px}table.perm td:first-child{white-space:normal}table.perm .rad{padding:6px}}
.permsum{border:1px dashed var(--ink-200);border-radius:10px;padding:10px 12px;margin:10px 0 14px;background:var(--ink-50,#F8FAFC)}
/* document library */
.doct{flex:none;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:10px;font:700 11px/1 var(--font-mono);background:var(--ink-100,#F1F5F9);color:var(--ink-700)}
.doct.t-coa{background:var(--ok-50);color:var(--brand-700,#0F766E)}.doct.t-supplier_spec{background:var(--info-50,#EFF6FF);color:var(--info-700)}.doct.t-wdb_spec{background:#141414;color:#fff}.doct.t-client{background:var(--warn-50,#FFFBEB);color:var(--warn-700)}
a.pick{text-decoration:none;color:var(--ink-700)}a.pick.on{border-color:var(--brand-600);background:var(--ok-50);color:var(--brand-700,#0F766E)}a.pick b{margin-left:4px;font-family:var(--font-mono);font-size:12px}
/* scan-to-book-in */
.scanbox{margin-bottom:12px}.scanrow{display:flex;gap:8px}.scanin{flex:1;font:600 16px var(--font-mono);letter-spacing:.02em}
.camwrap{position:relative;margin-top:8px;border-radius:12px;overflow:hidden;background:#000;max-width:520px}.camwrap video{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.camwrap .aim{position:absolute;left:12%;right:12%;top:30%;bottom:30%;border:3px solid rgba(255,255,255,.85);border-radius:10px;box-shadow:0 0 0 999px rgba(0,0,0,.25);pointer-events:none}
.camwrap .camstop{position:absolute;right:8px;bottom:8px}.camwrap .engine{position:absolute;left:10px;bottom:12px;color:#fff}
.scanmsg{margin-top:6px;min-height:18px}.scanmsg.ok{color:var(--brand-700,#0F766E)}.scanmsg.bad{color:var(--bad-700)}
.stepn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand-600);color:#fff;font-size:13px;margin-right:6px}
.blines{display:flex;flex-direction:column;gap:10px}.bline{border:1px solid var(--ink-200);border-radius:10px;padding:10px}.bline.flash{animation:fl 1.2s}@keyframes fl{from{background:var(--ok-50)}to{background:transparent}}
.chk{display:flex;flex-direction:column}.chkrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line,#E2E8F0)}
.seg{display:inline-flex;border:1px solid var(--ink-200);border-radius:999px;overflow:hidden;flex:none}.seg label{cursor:pointer}.seg input{position:absolute;opacity:0}.seg b{display:block;padding:8px 16px;font-weight:600}
.seg input:checked+b{background:var(--ok-50);color:var(--brand-700,#0F766E)}.seg label.f input:checked+b{background:var(--bad-700);color:#fff}
.evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.evbox{display:flex;flex-direction:column;gap:4px;border:1.5px dashed var(--ink-200);border-radius:12px;padding:12px;cursor:pointer}.evbox.req{border-color:var(--warn-700)}.evbox input{font-size:12px;max-width:100%}
.evthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.evt{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink-700)}.evt img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--ink-200)}
.bigbtn{width:100%;padding:16px;font-size:16px;margin:4px 0 30px}
.chkrow[hidden],[hidden]{display:none!important}
/* work order documents panel */
.docgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:10px}
.dtile{display:flex;gap:10px;align-items:center;border:1px solid var(--ink-200);border-radius:10px;padding:10px;text-decoration:none;color:var(--ink-700)}.dtile b{display:block;color:var(--ink-900)}.dtile span{font-size:12px}.dtile.off{opacity:.6}
.dlots{display:flex;flex-direction:column;gap:8px}.dlot{border:1px solid var(--ink-200);border-radius:10px;padding:10px}.dlot.bad{border-left:4px solid var(--bad-700);background:var(--bad-50)}
.dlh{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.dbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.dbtns .btn{min-height:36px}
aside a.logo:hover{background:none}
/* In-app document viewer */
.viewer{display:flex;flex-direction:column;gap:10px}
.vbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.vbar .btn svg{margin-right:4px}
.vtitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.vacts{display:flex;gap:8px}
.vpdf{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.vpage{display:block;width:100%;background:#fff;border:1px solid var(--ink-200);border-radius:6px;box-shadow:var(--sh-sm,0 1px 2px rgba(0,0,0,.06))}
.vframe{width:100%;height:calc(100dvh - 170px);min-height:420px;border:1px solid var(--ink-200);border-radius:6px;background:#fff}
.vimg img{max-width:100%;height:auto;border-radius:6px;border:1px solid var(--ink-200);background:#fff}
.vtext{white-space:pre-wrap;word-break:break-word;background:#fff;border:1px solid var(--ink-200);border-radius:6px;padding:12px;font-size:12px;max-height:none}
@media (max-width:900px){.vtitle{flex-basis:100%;order:-1;white-space:normal}.vacts{margin-left:auto}}
/* supplier certificates */
.tick{display:flex!important;gap:8px;align-items:flex-start;font-weight:500!important}.tick input{width:auto!important;margin-top:3px}
table.certs tr.sub td{border-top:0;padding-top:0;background:transparent}
.suplist td .badge{white-space:nowrap}
@media (max-width:900px){table.suplist{display:block;white-space:normal;overflow:visible}table.suplist thead{display:none}
 table.suplist tbody,table.suplist tr,table.suplist td{display:block;width:auto}table.suplist tr{padding:10px 2px;border-bottom:1px solid var(--line,#E2E8F0)}
 table.suplist td{border:0!important;padding:2px 4px!important;font-size:13px}table.suplist td[data-l]::before{content:attr(data-l) " ";color:#64748B;font-size:12px}
 table.suplist td.hide-sm{display:none}}
/* water checks */
.watercard.wbad{border-left:4px solid var(--bad-700,#B91C1C)}.watercard.wwarn{border-left:4px solid var(--warn-700,#B45309)}.watercard.wok{border-left:4px solid var(--ok-700,#15803D)}
.wlist{display:flex;flex-direction:column}.witem{display:flex;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line,#E2E8F0);color:inherit;text-decoration:none}
.witem:hover{background:#F8FAFC}.witem.w-overdue{background:var(--bad-50,#FEF2F2)}.wdue{text-align:right;white-space:nowrap}
.wform .wread{padding:8px 0;border-bottom:1px dashed var(--line,#E2E8F0)}.wform .yn{display:flex;gap:18px}.wform .yn label{display:flex;gap:6px;align-items:center;font-weight:500;padding:8px 14px;border:1px solid var(--line,#E2E8F0);border-radius:10px}
.wform .yn input{width:auto}
/* batch overage calc */
.batchcalc .calc{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0}.batchcalc .cl{flex:1 1 180px;border:1px solid var(--line,#E2E8F0);border-radius:10px;padding:10px 12px}
.batchcalc .cl span{display:block;font-size:12px;color:#64748B}.batchcalc .cl b{font-size:16px}.batchcalc .cl.tot{background:var(--info-50,#EFF6FF);border-color:#BFDBFE}
/* stages trace tree */
ul.tree,ul.tree ul{list-style:none;margin:0;padding-left:18px}ul.tree{padding-left:0}ul.tree li{position:relative;padding:6px 0 0 14px;border-left:2px solid var(--line,#E2E8F0)}
ul.tree li::before{content:"";position:absolute;left:0;top:16px;width:10px;border-top:2px solid var(--line,#E2E8F0)}.tn{display:inline-block;padding:4px 8px;border:1px solid var(--line,#E2E8F0);border-radius:8px;background:#fff;font-size:13px}
.scanlines{margin-top:10px;display:flex;flex-direction:column;gap:8px}.scanline{border:1px solid var(--line,#e4e7ec);border-radius:10px;padding:10px 12px;background:#fff}
.scanline.blocked{border-color:#fda29b;background:#fef3f2}.scanline.okline{border-color:#75e0a7;background:#ecfdf3}.slhead{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.slrow{display:flex;gap:10px;margin-top:8px;align-items:flex-end;flex-wrap:wrap}.slrow label{display:flex;flex-direction:column;gap:3px;flex:1;min-width:120px}.slrow select,.slrow input{width:100%;min-height:40px}
.slbad{color:#b42318;margin-top:6px}.scanmsg .badge{white-space:normal;text-align:left;line-height:1.35}
/* sample status stepper + next action (npd) */
.nextbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--ink-200,#E2E8F0);border-left:4px solid var(--brand-600);border-radius:var(--r-md,10px);padding:10px 14px;margin:0 0 14px}
.stepper{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.stepper li{font:600 12px var(--font-sans);padding:6px 12px 6px 22px;border-radius:999px;background:var(--ink-100,#F1F5F9);color:var(--ink-500,#64748B);position:relative}
.stepper li:before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:currentColor;opacity:.5}
.stepper li.done{background:var(--ok-50,#F0FDF4);color:var(--ok-700,#15803D)}.stepper li.done:before{content:"✓";background:none;width:auto;height:auto;margin-top:-8px;left:8px;opacity:1}
.stepper li.now{background:var(--brand-600);color:#fff}.stepper li.now:before{opacity:1}
.stepper li.bad{background:var(--bad-50,#FEF2F2);color:var(--bad-700,#B91C1C)}
.nextact{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge.ccode{border:1px solid;font-size:11px;padding:2px 8px;vertical-align:middle}.badge.ccode::before{display:none}
/* book-in: searchable item picker + supplier label photo per line (Rick 20 Oct 2026) */
.isrch .isearch{margin-bottom:6px}.bline .isrch{grid-column:1/-1}.bline .lblphoto{display:flex;flex-direction:column;gap:2px;margin:6px 0;cursor:pointer}
.bline .lblphoto input{max-width:100%}#scanopt{margin:4px 0 8px}#scanopt summary{cursor:pointer;padding:4px 0}

/* book-in: missing fields named at the top (Isaac 20 Oct) */
.bookf .missing{outline:2px solid var(--bad-700,#b42318);outline-offset:2px;border-radius:8px}#formerr ul{padding:0}#submitbtn.busy{opacity:.7}
#ponolines,.text-bad{color:var(--bad-700)}#ponolines{font-weight:600}
/* qty + unit selector (Rick 20 Oct) */
.qtyu{display:flex;gap:6px;align-items:stretch}.qtyu input{flex:1;min-width:0}.qtyu select.usel{width:auto;min-width:64px;flex:0 0 auto;font-weight:600}
/* book-in item type-ahead (Rick 20 Oct) – big touch targets, short list under the box */
.icombo{position:relative;display:block}.icombo .isearch{width:100%;padding-right:44px;font-size:16px}
.icombo .iclear{position:absolute;right:4px;top:4px;width:40px;height:40px;border:0;background:transparent;font-size:24px;line-height:1;color:var(--ink-500);cursor:pointer}
.ilist{list-style:none;margin:0 0 6px;padding:0;border:1px solid var(--ink-300);border-radius:10px;background:var(--surface);max-height:60vh;overflow-y:auto;box-shadow:0 6px 18px rgba(15,23,42,.12);position:relative;z-index:5}
.ilist li{padding:12px 12px;min-height:48px;border-bottom:1px solid var(--ink-100);cursor:pointer;line-height:1.35}.ilist li:last-child{border-bottom:0}
.ilist li:hover,.ilist li.act{background:var(--info-50)}.ilist li.imore{cursor:default;color:var(--ink-500);font-size:.9em;min-height:0}
.ilist li .badge{margin-left:4px}.bline.picked .isearch{background:var(--ok-50)}
.ta{position:relative;display:block}.ta .ta-q{width:100%;padding-right:44px;font-size:16px}.ta .ta-clear{position:absolute;right:4px;top:4px;width:40px;height:40px;border:0;background:transparent;font-size:24px;line-height:1;color:var(--ink-500);cursor:pointer}
.ta .ta-list{list-style:none;margin:4px 0 6px;padding:0;border:1px solid var(--ink-300);border-radius:10px;background:var(--surface);max-height:50vh;overflow-y:auto;box-shadow:0 6px 18px rgba(15,23,42,.12);position:relative;z-index:5}
.ta .ta-list li{padding:12px;min-height:48px;border-bottom:1px solid var(--ink-100);cursor:pointer;line-height:1.35}.ta .ta-list li:last-child{border-bottom:0}
.ta .ta-list li:hover,.ta .ta-list li.act{background:var(--info-50)}.ta .ta-list li.imore{cursor:default;color:var(--ink-500);font-size:.9em;min-height:0}.ta.picked .ta-q{background:var(--ok-50)}
.tafield{margin:0 0 12px}.tafield label{display:block}