/* ============================================================================
   TwentyFour DMS — corporate light theme
   Light lavender field (#F4F2F8) with dot-grid + paper grain, frosted-glass
   cards, purple ink (#3B1A58) and lime (#C6F400) used sparingly as an accent.
   Type: Bricolage Grotesque (display) · Hanken Grotesk (body) · JetBrains Mono.
   ========================================================================== */
:root{
  --bg:#F4F2F8;
  --bg-2:#ECE8F2;
  --panel:rgba(255,255,255,.72);   /* frosted card */
  --panel-solid:#ffffff;
  --panel-2:#F0EDF6;               /* chip / subtle fill */
  --line:rgba(59,26,88,.14);
  --line-2:rgba(59,26,88,.24);
  --ink:#2C1A40;
  --ink-dim:#6B5B7E;
  --ink-mute:#8B7EA0;
  --purple:#3B1A58;
  --purple-lit:#5B3A82;
  --purple-glow:#6A4A88;
  --lime:#C6F400;
  --lime-dim:#A6CF00;
  --lime-deep:#7E9E00;             /* lime that is readable as text on white */
  --green:#0C6C31;
  --green-dark:#095126;
  --amber:#B7791F;                 /* readable amber on light */
  --amber-bright:#E0922A;
  --red:#C0392B;
  --red-lit:#C0392B;
  --ok-bg:rgba(126,158,0,.12);
  --warn-bg:rgba(183,121,31,.12);
  --bad-bg:rgba(192,57,43,.10);
  --radius:0px;       /* squared, corporate */
  --radius-sm:0px;
  --sidebar-w:248px;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;
  --cond:"Bricolage Grotesque","Hanken Grotesk",Arial,sans-serif;
  --shadow:0 24px 50px -32px rgba(59,26,88,.42);
  --shadow-sm:0 10px 26px -20px rgba(59,26,88,.45);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 520px at 82% -8%, rgba(198,244,0,.10), transparent 60%),
    radial-gradient(900px 560px at -8% 4%, rgba(59,26,88,.10), transparent 58%),
    radial-gradient(circle, rgba(59,26,88,.05) 1px, transparent 1.4px);
  background-size:auto, auto, 24px 24px;
  background-position:center, center, center;
  background-attachment:fixed, fixed, fixed;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
/* fine paper-grain overlay for depth */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  opacity:.26;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
a{color:var(--purple);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--cond);font-weight:700;letter-spacing:-.015em;line-height:1.08;margin:0 0 .4em;color:var(--purple)}
h1{font-size:1.95rem;font-weight:800}
h2{font-size:1.25rem}
.muted{color:var(--ink-dim)}
.dim{color:var(--ink-mute)}
.mono{font-family:var(--mono)}

/* ---- top bar (frosted, light) -------------------------------------------- */
.topbar{
  display:flex;align-items:center;gap:1.4rem;
  padding:.7rem clamp(1rem,3vw,1.6rem);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 20px -18px rgba(59,26,88,.5);
  position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--purple)!important;text-decoration:none}
.brand-logo{height:24px;width:auto;display:block}
.brand-name{font-family:var(--cond);font-weight:700;font-size:1.05rem;letter-spacing:.01em;color:var(--purple);
  padding-left:.7rem;border-left:1px solid var(--line-2)}
@media(max-width:720px){.brand-name{display:none}}
.mainnav{display:flex;gap:.1rem;flex-wrap:wrap}
.mainnav a{
  color:var(--ink-dim)!important;text-decoration:none;
  padding:.4rem .65rem;border-radius:8px;font-size:.86rem;font-weight:500;
  border-bottom:2px solid transparent;
}
.mainnav a:hover{background:rgba(59,26,88,.06);color:var(--purple)!important}
.mainnav a[aria-current=page]{
  color:var(--purple)!important;font-weight:700;
  background:rgba(59,26,88,.05);border-bottom-color:var(--lime);
}
.user{margin-left:auto;display:flex;align-items:center;gap:.7rem;font-size:.9rem}
.user-name{color:var(--ink-dim)!important;text-decoration:none;font-weight:600}
.user-name:hover{color:var(--purple)!important;text-decoration:underline}
.inline{display:inline}
.topbar .btn-ghost{color:var(--purple);border-color:var(--line-2);background:rgba(255,255,255,.5)}
.topbar .btn-ghost:hover{border-color:var(--purple);background:#fff;color:var(--purple)}

/* ---- shell --------------------------------------------------------------- */
.shell{max-width:1120px;margin:0 auto;padding:1.8rem clamp(1rem,3vw,1.6rem) 4rem}
.shell-centred{max-width:460px;display:flex;flex-direction:column;justify-content:center;min-height:80vh}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.page-head p{margin:.25rem 0 0}

/* ---- cards & grid -------------------------------------------------------- */
.card{
  background:var(--panel);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad{padding:1.4rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.runner-grid{grid-template-columns:1fr!important}}

.kpi{padding:1.15rem 1.25rem;border-radius:var(--radius);background:var(--panel);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.kpi .n{font-family:var(--cond);font-size:2rem;font-weight:800;color:var(--purple);line-height:1}
.kpi .l{color:var(--ink-mute);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;margin-top:.35rem;font-family:var(--mono)}
.kpi.alert{border-color:rgba(192,57,43,.35);box-shadow:0 10px 26px -20px rgba(192,57,43,.6)}
.kpi.alert .n{color:var(--red)}

/* ---- pills / badges ------------------------------------------------------ */
.pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:.22rem .6rem;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-dim);background:var(--panel-2);font-family:var(--mono)}
.pill.cd{color:var(--red);border-color:rgba(192,57,43,.35);background:var(--bad-bg)}
.pill.ok{color:var(--green);border-color:rgba(12,108,49,.3);background:var(--ok-bg)}
.pill.warn{color:var(--amber);border-color:rgba(183,121,31,.35);background:var(--warn-bg)}
.pill.seal{color:var(--ink-dim);border-color:var(--line-2);background:var(--panel-2)}
.status-open{color:var(--ink-dim)}
.status-in_progress{color:var(--amber)}
.status-completed{color:var(--green)}
.status-aborted{color:var(--red)}
.status-released{color:var(--green)}
.status-draft{color:var(--ink-dim)}
.status-retired{color:var(--ink-mute)}
.role-admin{color:var(--purple-glow);border-color:var(--purple-lit)}
.role-pharmacist{color:var(--green)}

/* ---- tables -------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:.92rem}
thead th{
  text-align:left;font-weight:600;color:var(--ink-mute);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);
  padding:.6rem .7rem;border-bottom:1px solid var(--line)}
tbody td{padding:.7rem .7rem;border-bottom:1px solid var(--line)}
tbody tr:hover{background:rgba(59,26,88,.035)}
td.num,th.num{text-align:right;font-family:var(--mono)}
.tbl-wrap{overflow-x:auto}

/* ---- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--sans);font-weight:600;font-size:.9rem;cursor:pointer;
  padding:.6rem 1.05rem;border-radius:10px;border:1px solid transparent;
  background:var(--purple);color:#fff;transition:.15s;
}
.btn:hover{filter:brightness(1.12);text-decoration:none;box-shadow:0 10px 22px -12px rgba(59,26,88,.7)}
.btn:active{transform:translateY(1px)}
.btn-lime{background:var(--lime);color:#26310A}
.btn-lime:hover{filter:none;box-shadow:0 10px 24px -10px rgba(166,207,0,.7)}
.btn-ghost{background:rgba(255,255,255,.6);border-color:var(--line-2);color:var(--purple)}
.btn-ghost:hover{border-color:var(--purple);background:#fff;color:var(--purple);box-shadow:none}
.btn-danger{background:#fff;border-color:rgba(192,57,43,.5);color:var(--red)}
.btn-danger:hover{background:var(--bad-bg);box-shadow:none}
.btn-sm{padding:.35rem .7rem;font-size:.8rem}
.btn-lg{padding:.85rem 1.4rem;font-size:1.02rem}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ---- forms --------------------------------------------------------------- */
label{display:block;font-size:.8rem;color:var(--ink-dim);margin:0 0 .3rem;font-weight:600}
.field{margin-bottom:1rem}
input,select,textarea{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:var(--panel-solid);border:1px solid var(--line-2);border-radius:10px;padding:.6rem .7rem;
}
input::placeholder,textarea::placeholder{color:var(--ink-mute)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(59,26,88,.15)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--purple)}
.row{display:flex;gap:1rem;flex-wrap:wrap}
.row > *{flex:1;min-width:140px}
.check{display:flex;align-items:center;gap:.5rem}
.check label{margin:0}
.help{font-size:.78rem;color:var(--ink-mute);margin-top:.3rem}

/* ---- flash --------------------------------------------------------------- */
.flash{padding:.75rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:.92rem;border:1px solid;backdrop-filter:blur(6px)}
.flash-success{background:var(--ok-bg);border-color:rgba(12,108,49,.3);color:var(--green-dark)}
.flash-error{background:var(--bad-bg);border-color:rgba(192,57,43,.35);color:#8c2419}
.flash-info{background:rgba(59,26,88,.07);border-color:rgba(59,26,88,.2);color:var(--purple)}

/* ---- login (mimics the corporate portal splash) -------------------------- */
.login-card{padding:clamp(2.2rem,5vw,3.2rem);position:relative;text-align:center}
.login-logo{font-size:2.4rem;color:var(--purple);text-align:center}
.login-logo-img{display:block;height:34px;width:auto;margin:0 auto 1.4rem;position:relative;z-index:2}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--purple-glow);display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.9rem}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(198,244,0,.85)}
.hl{background-image:linear-gradient(var(--lime),var(--lime));background-repeat:no-repeat;
  background-position:0 88%;background-size:100% .38em;padding:0 .05em}
/* corner brackets — console frame */
.br{position:absolute;width:26px;height:26px;border:2px solid var(--purple);opacity:.85}
.br::after{content:"";position:absolute;width:6px;height:6px;background:var(--lime);border-radius:1px}
.br.tl{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.br.tr{top:-1px;right:-1px;border-left:0;border-bottom:0;border-top-right-radius:6px}
.br.bl{bottom:-1px;left:-1px;border-right:0;border-top:0;border-bottom-left-radius:6px}
.br.brr{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:6px}
.br.tl::after{top:-2px;left:-2px}.br.tr::after{top:-2px;right:-2px}
.br.bl::after{bottom:-2px;left:-2px}.br.brr::after{bottom:-2px;right:-2px}

/* ============================================================================
   RUNNER — the live dispensing instrument (a deliberate dark readout panel)
   ========================================================================== */
.runner-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.1rem;align-items:start}

.scale-panel{
  background:radial-gradient(130% 150% at 50% 0%, #2c1547, #190a2b 72%);
  border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1.4rem 1.4rem 1.1rem;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  color:#e7defb;
}
.scale-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.scale-head .src{font-family:var(--mono);font-size:.72rem;color:#a594c4;text-transform:uppercase;letter-spacing:.08em}
.link-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6f6088;margin-right:.4rem;vertical-align:middle}
.link-dot.live{background:var(--lime);box-shadow:0 0 8px var(--lime);animation:pulse 1.6s infinite}
.link-dot.down{background:var(--red);box-shadow:0 0 8px var(--red)}
@keyframes pulse{50%{opacity:.4}}

.readout{
  font-family:var(--mono);font-weight:500;text-align:center;
  font-size:clamp(3.2rem,11vw,5.4rem);line-height:1;letter-spacing:-.02em;
  color:#f1ead9;padding:.4rem 0 .2rem;font-variant-numeric:tabular-nums;
}
.readout .unit{font-size:.32em;color:#a594c4;margin-left:.2em;letter-spacing:0}
.readout.unstable{color:#ffd98a}
.readout.intol{color:#d6f24b;text-shadow:0 0 24px rgba(198,244,0,.35)}
.readout.outtol{color:#ff8f82}

.stability{display:flex;justify-content:center;gap:.5rem;font-size:.72rem;color:#a594c4;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:.8rem}
.stability .flag{padding:.15rem .5rem;border-radius:6px;border:1px solid rgba(255,255,255,.12)}
.stability .flag.on-stable{color:#d6f24b;border-color:rgba(198,244,0,.4);background:rgba(198,244,0,.10)}
.stability .flag.on-motion{color:#ffcf86;border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.10)}

/* tolerance gauge */
.gauge{margin:.4rem 0 1rem}
.gauge-track{position:relative;height:12px;border-radius:7px;background:#120a20;border:1px solid rgba(255,255,255,.1);overflow:hidden}
.gauge-zone{position:absolute;top:0;bottom:0;background:rgba(198,244,0,.18);border-left:1px solid rgba(198,244,0,.5);border-right:1px solid rgba(198,244,0,.5)}
.gauge-fill{position:absolute;top:0;bottom:0;left:0;background:linear-gradient(90deg,var(--purple-glow),var(--lime));transition:width .12s linear}
.gauge-needle{position:absolute;top:-3px;bottom:-3px;width:2px;background:#fff;box-shadow:0 0 6px #fff;transition:left .12s linear}
.gauge-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:#a594c4;margin-top:.35rem}
.target-line{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.86rem;margin-top:.3rem;color:#c9bce4}
.target-line b{color:#fff}

.scale-actions{display:flex;gap:.6rem;margin-top:.4rem}
.scale-actions .btn{flex:1}
.scale-panel .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#e7defb}
.scale-panel .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}

/* step card */
.step-card{padding:1.4rem}
.step-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.step-counter{font-family:var(--mono);font-size:.74rem;color:var(--ink-mute);letter-spacing:.05em}
.step-type{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .55rem;border-radius:6px;font-family:var(--mono);font-weight:600;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim)}
.step-type.weigh{color:var(--green);border-color:rgba(12,108,49,.3)}
.step-type.tare{color:var(--purple-glow);border-color:var(--purple-lit)}
.step-type.qc_check{color:var(--amber);border-color:rgba(183,121,31,.35)}
.step-title{font-family:var(--cond);font-size:1.5rem;font-weight:700;margin:.1rem 0 .3rem;color:var(--purple)}
.step-detail{color:var(--ink-dim);margin-bottom:1rem}

.progress{display:flex;gap:4px;margin-bottom:1.1rem}
.progress i{height:6px;flex:1;border-radius:3px;background:var(--line)}
.progress i.done{background:var(--lime-dim)}
.progress i.cur{background:var(--amber-bright)}
.progress i.fail{background:var(--red)}

.capture-result{padding:.8rem 1rem;border-radius:10px;margin-top:.9rem;font-weight:600;display:none}
.capture-result.show{display:block}
.capture-result.pass{background:var(--ok-bg);border:1px solid rgba(12,108,49,.35);color:var(--green-dark)}
.capture-result.fail{background:var(--bad-bg);border:1px solid rgba(192,57,43,.4);color:#8c2419}

.records-mini{font-size:.86rem}
.records-mini td{padding:.45rem .6rem}
.tick{color:var(--green)} .cross{color:var(--red)}

/* batch record (print) */
.record-sheet{background:#fff;color:#1a1a1a;border-radius:12px;padding:2rem;font-size:.9rem;box-shadow:var(--shadow)}
.record-sheet h1,.record-sheet h2{color:#111}
.record-sheet table{font-size:.84rem}
.record-sheet thead th{color:#555;border-color:#ccc}
.record-sheet tbody td{border-color:#e2e2e2}
.record-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem 1.4rem;margin:1rem 0}
.record-meta .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#888;font-family:var(--mono)}
.record-meta .v{font-weight:600}
.sign-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
.sign-line{border-top:1px solid #333;padding-top:.4rem;font-size:.8rem;color:#555;margin-top:2.5rem}
@media print{
  .topbar,.no-print,.sitefoot{display:none!important}
  body{background:#fff}
  body::after{display:none}
  .shell{padding:0;max-width:none}
  .record-sheet{box-shadow:none;border-radius:0;padding:0}
}

/* misc */
.list-meta{display:flex;gap:1rem;color:var(--ink-mute);font-size:.85rem;flex-wrap:wrap}
.empty{text-align:center;padding:3rem 1rem;color:var(--ink-mute)}
.empty .big{font-size:2rem;margin-bottom:.5rem;color:var(--lime-deep)}
hr{border:none;border-top:1px solid var(--line);margin:1.2rem 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;font-size:.9rem}
.kv dt{color:var(--ink-mute);font-weight:600}
.kv dd{margin:0;font-weight:500}
.comp-add{margin:.4rem 0 1rem}
.comp-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:.5rem;margin-bottom:.5rem;align-items:end}
.comp-row .mini{font-size:.7rem}
@media(max-width:720px){.comp-row{grid-template-columns:1fr 1fr}}

/* ============================================================================
   Footer + document model + compliance components
   ========================================================================== */
.sitefoot{
  max-width:1120px;margin:2.5rem auto 0;padding:1.2rem clamp(1rem,3vw,1.6rem) 2.2rem;
  border-top:1px solid var(--line);
  display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;
  color:var(--ink-mute);font-size:.78rem;font-family:var(--mono);letter-spacing:.03em;
}
.sitefoot a{color:var(--ink-dim)}
.foot-contact{display:flex;gap:.55rem;align-items:center}
.foot-contact .dot{color:var(--lime-deep)}

/* e-signature field on the runner */
.esign-field{border:1px solid rgba(166,207,0,.5);border-radius:var(--radius-sm);
  background:rgba(166,207,0,.08);padding:.85rem .9rem;margin:.4rem 0 1rem}
.esign-field label{color:var(--green-dark)}

/* details-as-button */
details > summary.btn{list-style:none}
details > summary.btn::-webkit-details-marker{display:none}

/* batch disposition banner on the record sheet */
.disposition{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  border-radius:10px;padding:.7rem 1rem;margin:1rem 0;border:1px solid #ddd}
.disposition-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#777;font-family:var(--mono)}
.disposition-value{font-weight:700;font-size:1.05rem}
.disposition-by{color:#666;font-size:.82rem;margin-left:auto}
.disposition-released{background:#eef6dd;border-color:#bcd35a}
.disposition-released .disposition-value{color:#2f6e0a}
.disposition-rejected,.disposition-quarantined{background:#fdeaea;border-color:#e3a6a0}
.disposition-rejected .disposition-value,.disposition-quarantined .disposition-value{color:#C0392B}
.disposition-pending{background:#faf6e6;border-color:#e2d28a}
.disposition-pending .disposition-value{color:#8a6d10}

/* signature table on records */
.sig-table{font-size:.82rem;margin-top:.4rem}
.sig-table thead th{color:#666;border-color:#ccc}
.sig-table tbody td{border-color:#e2e2e2}

/* step icons + editor + safety callouts */
.step-ic{height:18px;width:18px;vertical-align:middle;margin-right:.35rem;color:var(--purple-glow)}
.steps-list .step-edit-row{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .9rem;margin-bottom:.6rem;background:var(--panel-solid)}
.step-edit-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.step-edit-actions{margin-left:auto;display:flex;gap:.3rem}
.step-type.ppe{color:var(--green);border-color:rgba(12,108,49,.3)}
.step-type.cleaning{color:var(--purple-glow);border-color:var(--purple-lit)}
.step-type.safety{color:var(--amber);border-color:rgba(183,121,31,.35)}
.step-type.hold{color:var(--red);border-color:rgba(192,57,43,.4)}
.step-type.instruction{color:var(--ink-dim)}
.safety-callout{display:flex;align-items:center;gap:1rem;background:var(--warn-bg);
  border:1px solid rgba(183,121,31,.35);border-radius:var(--radius-sm);padding:1rem;margin:.4rem 0 1rem}
.safety-ic{width:52px;height:52px;flex:0 0 auto;color:var(--amber)}
.safety-kicker{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:700;color:var(--amber);margin-bottom:.2rem;font-family:var(--mono)}
.safety-ppe{background:var(--ok-bg);border-color:rgba(12,108,49,.3)} .safety-ppe .safety-ic,.safety-ppe .safety-kicker{color:var(--green)}
.safety-hold{background:var(--bad-bg);border-color:rgba(192,57,43,.4)} .safety-hold .safety-ic,.safety-hold .safety-kicker{color:var(--red)}
.safety-cleaning{background:rgba(59,26,88,.07);border-color:var(--purple-lit)} .safety-cleaning .safety-ic,.safety-cleaning .safety-kicker{color:var(--purple-glow)}
.ack-check{font-weight:600}
.flag-widget{display:inline-block} .flag-widget>summary{display:inline-flex;list-style:none}
.flag-widget>summary::-webkit-details-marker{display:none}

/* sidebar station selector + login badge scan */
.side-station{display:block;text-decoration:none;border:1px solid var(--line);background:rgba(59,26,88,.04);padding:.5rem .6rem;margin-bottom:.3rem}
.side-station:hover{border-color:var(--purple-lit);background:rgba(59,26,88,.08);text-decoration:none}
.side-station-k{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute)}
.side-station-v{display:block;font-weight:700;color:var(--purple);font-size:.9rem}
.badge-scan input{font-family:var(--mono);letter-spacing:.04em}
.login-or{display:flex;align-items:center;gap:.7rem;color:var(--ink-mute);font-size:.74rem;margin:1.1rem 0;text-transform:uppercase;letter-spacing:.09em}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* section sub-navigation (Admin tabs etc.) */
.subnav{display:flex;gap:.1rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:1.7rem}
.subnav a{padding:.55rem .95rem;color:var(--ink-dim)!important;text-decoration:none;font-weight:600;font-size:.9rem;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--purple)!important;background:rgba(59,26,88,.05)}
.subnav a.active{color:var(--purple)!important;border-bottom-color:var(--lime)}

/* permission matrix */
.perm-matrix th{vertical-align:bottom}
.perm-matrix td,.perm-matrix th{padding:.45rem .6rem}
.perm-matrix tr.grp td{background:rgba(59,26,88,.06);font-weight:700;color:var(--purple);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--line);font-family:var(--mono)}
.perm-matrix input[type=checkbox]{width:18px;height:18px}

/* ---- branded print/report documents (white-field brand model) ----------- */
.doc{position:relative}
.doc .doc-head{border-bottom:3px solid var(--lime);padding-bottom:.8rem;margin-bottom:1rem}
.doc .doc-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#8FB22D;font-weight:700;font-family:var(--mono)}
.doc h1{color:#3B1A58;font-family:var(--cond)}
.doc h2{color:#5B3A82;border-bottom:2px solid var(--lime);padding-bottom:.2rem;display:inline-block}

/* ============================================================================
   Layout v2 — left sidebar nav · squared corners · stacked full-width content
   ========================================================================== */

/* square the few elements that carry hard-coded radii */
.btn,input,select,textarea,.pill,.flash,.capture-result,.disposition,
.scale-panel,.gauge-track,.step-type,.stability .flag,.record-sheet,.br{border-radius:0!important}

/* fixed left sidebar + fluid content column */
.layout{display:flex;align-items:stretch;min-height:100vh}
.sidebar{
  flex:0 0 var(--sidebar-w);width:var(--sidebar-w);
  position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:.2rem;padding:1.1rem .85rem;
  background:rgba(255,255,255,.8);backdrop-filter:blur(12px);
  border-right:1px solid var(--line);
}
.sidebar .brand{display:flex;align-items:center;gap:.6rem;padding:.3rem .55rem 1rem;
  border-bottom:1px solid var(--line);margin-bottom:.7rem;color:var(--purple)!important}
.sidebar .brand-logo{height:24px;width:auto}
.sidebar .brand-name{font-family:var(--cond);font-weight:700;font-size:1rem;color:var(--purple);border:0;padding:0}
.sidenav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto}
.sidenav a{display:block;padding:.58rem .8rem;color:var(--ink-dim)!important;text-decoration:none;
  font-weight:600;font-size:.9rem;border-left:3px solid transparent}
.sidenav a:hover{background:rgba(59,26,88,.06);color:var(--purple)!important}
.sidenav a[aria-current=page]{background:rgba(59,26,88,.08);color:var(--purple)!important;
  border-left-color:var(--lime);font-weight:700}
.side-foot{border-top:1px solid var(--line);margin-top:.7rem;padding-top:.8rem;
  display:flex;flex-direction:column;gap:.55rem}
.side-state{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.side-state strong{color:var(--purple)}
.side-user{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.side-user .user-name{color:var(--ink)!important;font-weight:600;font-size:.9rem}

.content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.content-inner{flex:1 1 auto;width:100%;max-width:1500px;padding:2.2rem clamp(1.4rem,3.2vw,3rem)}

/* stack content cards full-width; widen spacing for breathing room */
.grid{gap:1.5rem}
.card-pad{padding:1.7rem}
.page-head{margin-bottom:1.9rem}
.runner-grid{grid-template-columns:1fr;gap:1.5rem}
.grid-2{grid-template-columns:1fr}
/* the live dispensing runner keeps the scale beside the step on wide screens */
@media(min-width:1000px){#runner{grid-template-columns:1.15fr .85fr}}

.content .sitefoot{max-width:none;margin:2.5rem 0 0;padding-left:0;padding-right:0;justify-content:flex-start;gap:1.4rem}

/* responsive — sidebar collapses to a top strip on narrow screens */
@media(max-width:900px){
  .layout{flex-direction:column}
  .sidebar{flex-basis:auto;width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;
    align-items:center;border-right:0;border-bottom:1px solid var(--line);padding:.7rem 1rem}
  .sidebar .brand{border-bottom:0;margin:0;padding:.2rem .4rem}
  .sidenav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%;gap:0;margin-top:.4rem}
  .sidenav a{border-left:0;border-bottom:3px solid transparent;padding:.45rem .7rem}
  .sidenav a[aria-current=page]{border-left:0;border-bottom-color:var(--lime)}
  .side-foot{flex-direction:row;align-items:center;border-top:0;margin:0 0 0 auto;padding:0;gap:.7rem}
  .content-inner{padding:1.4rem 1.1rem}
}
@media print{ .content-inner{padding:0;max-width:none} }

/* ---- stock / product labels (Code 128 for SATO + Wasp) ------------------- */
.label-sheet{background:#fff;color:#111;border:1px solid var(--line);width:96mm;max-width:100%;
  padding:6mm;font-family:var(--sans);box-shadow:var(--shadow)}
.label-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  border-bottom:2px solid #111;padding-bottom:3mm;margin-bottom:3mm}
.label-kind{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#555}
.label-name{font-family:var(--cond);font-weight:800;font-size:18px;line-height:1.1;color:#111;margin-top:1px}
.label-code{font-family:var(--mono);font-size:11px;color:#444}
.label-cd{border:2px solid #C0392B;color:#C0392B;font-weight:800;font-family:var(--cond);font-size:17px;
  padding:2px 8px;text-align:center;line-height:1.05;flex:0 0 auto}
.label-cd span{display:block;font-size:8px;font-weight:600;font-family:var(--mono)}
.label-primary{display:flex;align-items:baseline;gap:8px;margin:2mm 0}
.label-primary-tag{font-family:var(--mono);font-size:9px;color:#555;border:1px solid #999;padding:1px 5px}
.label-primary-val{font-family:var(--mono);font-weight:600;font-size:20px;color:#111}
.label-meta{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:3mm}
.label-meta th{text-align:left;color:#555;font-weight:600;padding:1px 6px 1px 0;white-space:nowrap;
  width:36%;font-family:var(--mono);font-size:10px;border:0;text-transform:none;letter-spacing:0}
.label-meta td{padding:1px 0;color:#111;border:0;font-weight:500}
.label-barcode{text-align:center;margin:2mm 0}
.label-barcode svg{max-width:100%;height:auto}
.label-foot{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:8px;
  color:#666;border-top:1px solid #ccc;padding-top:2mm;margin-top:1mm}
@media print{
  body::after{display:none}
  .label-sheet{border:0;box-shadow:none;width:auto;padding:0}
  @page{margin:6mm}
}