/* ── THEME TOKENS ──────────────────────────────────────────────────────────

   Dark is the default palette and lives on bare :root, because this is a
   dark-first product and every existing value must stay exactly as it was.
   Light is the override.

   Three states, not two:
     data-theme="dark"   explicit dark  - beats a light OS
     data-theme="light"  explicit light - beats a dark OS
     no attribute        follow the OS via prefers-color-scheme
   The unstamped case is the common one: most people never touch a theme
   control, so it has to be right rather than an afterthought.

   Never declare a colour ONLY inside a media or [data-theme] block. A value
   that exists in one branch and not the other renders one theme's text on
   the other theme's background. Every token below is defined here first. */
:root {
  /* surfaces, darkest to lightest */
  --cd:#111110;                 /* topbar and footers - sits below --ch */
  --ch:#1a1a18;--cm:#222220;--cl:#2e2e2b;--cb:#3a3a36;

  /* text */
  --m:#a0a098;--tl:#c8c4ba;--w:#f0ece4;
  /* Text dimmer than --m. This role was being filled by --cb, a BORDER
     colour, which reads fine on dark where borders are lighter than the
     ground and is unreadable on light where they are paler. The dark value
     here is identical to --cb, so nothing moves in dark. */
  --faint:#3a3a36;

  /* brand */
  --y:#f5c842;                  /* fills, borders, accents */
  --y-txt:#f5c842;              /* yellow used AS TEXT - differs in light */
  --on-y:#1a1a18;               /* text placed ON a yellow fill */

  /* semantic - these had no token and were written out 200+ times */
  --bad:#e57373;                /* danger, failure, destructive */
  --ok:#4caf50;                 /* success, verified, available */
  --warn:#f5a623;               /* attention, incomplete */
  --info:#7cb9e8;               /* informational, sourced, procure */
  --bad-d:#c0392b;              /* the pressed/darker destructive */
  --y-d:#e8ba30;                /* the pressed/darker brand */

  /* tints, derived from the semantic colours */
  --bad-bg:rgba(229,115,115,.08);
  --ok-bg:rgba(76,175,80,.08);
  --warn-bg:rgba(245,166,35,.10);
  --info-bg:rgba(124,185,232,.12);
  --y-bg:rgba(245,200,66,.05);
  --y-bg-2:rgba(245,200,66,.15);

  color-scheme: dark;
}

/* ── LIGHT ────────────────────────────────────────────────────────────────

   Designed, not inverted. Two things a naive inversion gets wrong:

   Yellow on white is illegible. --y stays the brand yellow for FILLS and
   borders, where it works, but --y-txt darkens to an amber that actually
   reads as text on paper. Anything using yellow as text switches token, not
   colour, and --on-y stays near-black because text on a yellow fill is dark
   in both themes.

   Flat grey reads as unconsidered. The neutrals carry the same warm bias as
   the brand's paper tone (#f0ece4), so light mode looks like the same
   company rather than a default bootstrap page. */
html[data-theme="light"] {
  --cd:#ffffff;
  --ch:#faf8f4;--cm:#f2efe8;--cl:#e9e5db;--cb:#d5cfc2;
  --m:#6b675e;--tl:#3d3a34;--w:#1a1a18;
  --faint:#6d685f;              /* still faint, but clears AA on the light ground */

  --y:#f5c842;
  --y-txt:#7a6000;              /* yellow is unreadable on white; amber is not */
  --on-y:#1a1a18;

  --bad:#b3342a;--ok:#256b29;--warn:#8a5800;--info:#15608f;
  --bad-d:#96271b;--y-d:#d9a922;

  --bad-bg:rgba(192,57,43,.08);
  --ok-bg:rgba(46,125,50,.08);
  --warn-bg:rgba(168,106,0,.10);
  --info-bg:rgba(26,111,168,.10);
  --y-bg:rgba(245,200,66,.16);
  --y-bg-2:rgba(245,200,66,.30);

  color-scheme: light;
}

/* NO bare prefers-color-scheme block here, deliberately.

   The obvious thing is to let an unstamped page follow the OS. That would have
   flipped every operator on a light-mode machine to a light ERP the first time
   they loaded it, without anyone asking - and this product has been dark for its
   whole life. Changing what people see is a decision they make, not a side
   effect of shipping a toggle.

   So the CSS only ever knows two states: no attribute means dark, exactly as
   before. "Follow the system" is a real option, but it is one an operator picks,
   and the JS resolves it to a concrete data-theme on load and re-resolves it
   when the OS flips. That keeps the resolution in one place instead of split
   between a media query and a script that can disagree. */

/* Surfaces and text transition; nothing else does. Animating every property
   makes the whole ERP shimmer on toggle, and a table of 200 rows animating
   at once is visibly slow. */
html.theme-anim, html.theme-anim body,
html.theme-anim .topbar, html.theme-anim .sidebar, html.theme-anim .content,
html.theme-anim .card, html.theme-anim .modal-box, html.theme-anim .tbl {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim * { transition: none !important; }
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:var(--ch);color:var(--w);font-family:'Barlow',sans-serif;font-size:14px;overflow:hidden;}

/* ── LAYOUT ── */
.app{display:grid;grid-template-rows:48px 1fr;height:100vh;}
.topbar{background:var(--cd);border-bottom:1px solid var(--cb);display:flex;align-items:center;padding:0 1.5rem;gap:0;z-index:100;}
.tb-logo{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.1em;color:var(--w);white-space:nowrap;}
.tb-logo span{color:var(--y-txt);}
.tb-nav{display:flex;gap:.2rem;flex:1;padding-left:0;}
.tb-btn{font-family:'Barlow Condensed',sans-serif;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  background:none;border:none;color:var(--m);padding:.4rem .9rem;cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;}
.tb-btn:hover{color:var(--tl);}
.tb-btn.active{color:var(--on-y) !important;background:var(--y);border-bottom-color:var(--y-txt);}
.tb-cfg{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--m);background:none;border:1px solid var(--cb);padding:.3rem .8rem;cursor:pointer;transition:all .15s;}
.tb-cfg:hover{border-color:var(--y-txt);color:var(--y-txt);}

.main{display:grid;grid-template-columns:220px 1fr;overflow:hidden;}
.sidebar{background:var(--cm);border-right:1px solid var(--cb);display:flex;flex-direction:column;overflow-y:auto;}
.content{overflow-y:auto;padding:2rem;}

/* ── SIDEBAR ── */
.sb-section{padding:.8rem 1rem .4rem;}
.sb-section-label{font-family:'Barlow Condensed',sans-serif;font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);margin-bottom:.5rem;}
.sb-item{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;cursor:pointer;border-radius:2px;transition:background .12s;color:var(--m);font-family:'Barlow Condensed',sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;}
.sb-item:hover{background:var(--cl);color:var(--tl);}
.sb-item.active{background:var(--cl);color:var(--y-txt);}
.sb-dot{width:6px;height:6px;border-radius:50%;background:var(--cb);flex-shrink:0;}
.sb-item.active .sb-dot{background:var(--y);}
.sb-empty{padding:.8rem;font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.15em;color:var(--faint);text-transform:uppercase;}
.sb-count{margin-left:auto;font-size:.6rem;color:var(--faint);font-family:'Barlow Condensed',sans-serif;}
.sb-item.active .sb-count{color:rgba(245,200,66,.5);}

/* ── PANELS ── */
.panel{display:none;}
.panel.active{display:block;}

/* ── PAGE HEADER ── */
.ph{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.8rem;}
.ph-title{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.06em;}
.ph-title span{color:var(--y-txt);}
.ph-actions{display:flex;gap:.6rem;}
.btn{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.45rem 1rem;cursor:pointer;border:none;transition:all .15s;}
.btn-y{background:var(--y);color:var(--on-y);font-weight:700;}
.btn-y:hover{background:var(--y-d);}
.btn-ghost{background:none;border:1px solid var(--cb);color:var(--tl);}
.btn-ghost:hover{border-color:var(--tl);}
.btn-red{background:none;border:1px solid var(--bad-d);color:var(--bad-d);}
.btn-red:hover{background:var(--bad-d);color:white;}

/* ── STATS ROW ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem;}
.stat{background:var(--cm);border:1px solid var(--cb);padding:1rem 1.2rem;}
.stat-val{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--y-txt);letter-spacing:.04em;}
.stat-label{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--m);}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{font-family:'Barlow Condensed',sans-serif;font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;color:var(--m);text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--cb);}
.tbl td{padding:.7rem .8rem;border-bottom:1px solid rgba(58,58,54,.4);vertical-align:middle;color:var(--tl);font-size:.85rem;}
.tbl tr:hover td{background:var(--cm);}
.tbl-name{color:var(--w);font-weight:400;}
.tbl-brand{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--m);}
.status-badge{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;padding:.2rem .6rem;border:1px solid;}

/* ── Custom checkboxes: charcoal bg, yellow border/check ── */
input[type=checkbox].cb-saga {
  appearance:none;-webkit-appearance:none;
  width:14px;height:14px;flex-shrink:0;
  background:var(--cm);border:1px solid var(--y);
  cursor:pointer;position:relative;transition:background .12s;
}
input[type=checkbox].cb-saga:checked {
  background:var(--y);
}
input[type=checkbox].cb-saga:checked::after {
  content:'';position:absolute;left:3px;top:1px;
  width:5px;height:8px;border:2px solid var(--ch);
  border-top:none;border-left:none;transform:rotate(45deg);
}
input[type=checkbox].cb-saga:disabled {
  opacity:.3;cursor:not-allowed;
}
.status-available{color:var(--ok);border-color:rgba(76,175,80,.4);}
.status-rented{color:var(--y-txt);border-color:rgba(245,200,66,.4);}
.status-maintenance{color:var(--bad);border-color:rgba(229,115,115,.4);}
.status-enquiry{color:var(--m);border-color:var(--faint);}
.status-offer_sent{color:var(--tl);border-color:var(--faint);}
.status-confirmed{color:var(--y-txt);border-color:rgba(245,200,66,.4);}
.status-kit_ready{color:var(--warn);border-color:rgba(245,166,35,.4);}
.status-out{color:var(--ok);border-color:rgba(76,175,80,.4);}
.status-returned{color:var(--tl);border-color:var(--faint);}
.status-invoiced{color:var(--info);border-color:rgba(124,185,232,.4);}
.status-cancelled{color:var(--bad);border-color:rgba(229,115,115,.4);}
.status-complete{color:var(--m);border-color:var(--faint);}
.status-procurement{color:var(--m);border-color:var(--faint);}

/* ── PIPELINE ── */
.pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:2rem;}
.pipe-col{background:var(--cm);border:1px solid var(--cb);padding:1rem;}
.pipe-col-hdr{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--m);margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid var(--cb);}
.pipe-col-hdr span{color:var(--y-txt);}
.pipe-card{background:var(--cl);padding:.7rem .8rem;margin-bottom:.5rem;cursor:pointer;border-left:2px solid var(--cb);transition:border-color .15s;}
.pipe-card:hover{border-left-color:var(--y-txt);}
.pipe-card-name{font-size:.82rem;color:var(--w);margin-bottom:.2rem;}
.pipe-card-meta{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.1em;color:var(--m);}
.pipe-card-val{font-family:'Bebas Neue',sans-serif;font-size:1rem;color:var(--y-txt);margin-top:.3rem;}

/* ── FORMS ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;}
.form-grid.full{grid-template-columns:1fr;}
.form-field{display:flex;flex-direction:column;gap:.35rem;}
.form-label{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--m);}
.form-input{background:var(--cm);border:1px solid var(--cb);color:var(--tl);padding:.55rem .8rem;font-family:'Barlow',sans-serif;font-size:.85rem;outline:none;transition:border-color .15s;}
.form-input:focus{border-color:var(--y-txt);}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}
.form-select{background:var(--cm);border:1px solid var(--cb);color:var(--tl);padding:.55rem .8rem;font-family:'Barlow Condensed',sans-serif;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;outline:none;cursor:pointer;}
.form-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--cb);}
.form-section-title{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.06em;color:var(--w);margin-bottom:1rem;}

/* ── HANDOVER ── */
.handover-header{background:var(--y);color:var(--on-y);padding:1.2rem 1.5rem;margin-bottom:1.5rem;}
.handover-title{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.06em;}
.handover-meta{font-family:'Barlow Condensed',sans-serif;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;opacity:.7;margin-top:.2rem;}
.scan-zone{border:2px dashed var(--cb);padding:2rem;text-align:center;margin-bottom:1.5rem;cursor:pointer;transition:border-color .15s;}
.scan-zone:hover,.scan-zone.active{border-color:var(--y-txt);}
.scan-icon{font-size:2.5rem;margin-bottom:.5rem;opacity:.4;}
.scan-label{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--m);}
.checklist-item{display:flex;align-items:center;gap:1rem;padding:.7rem .8rem;border-bottom:1px solid rgba(58,58,54,.4);transition:background .12s;}
.checklist-item:hover{background:var(--cm);}
.checklist-item.checked-out{background:rgba(76,175,80,.05);}
.checklist-item.checked-in{background:var(--y-bg);}
.check-box{width:22px;height:22px;border:2px solid var(--cb);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.check-box.done{background:var(--y);border-color:var(--y-txt);}
.check-box.done::after{content:'✓';color:var(--on-y);font-size:.75rem;font-weight:700;}
.check-box.damaged{background:var(--bad-d);border-color:var(--bad-d);}
.check-box.damaged::after{content:'!';color:white;font-size:.75rem;font-weight:700;}
.check-item-info{flex:1;}
.check-item-name{color:var(--w);font-size:.88rem;}
.check-item-id{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--m);}
.check-actions{display:flex;gap:.4rem;}
.check-btn{font-family:'Barlow Condensed',sans-serif;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
  background:none;border:1px solid var(--cb);color:var(--m);padding:.25rem .6rem;cursor:pointer;transition:all .12s;}
.check-btn:hover{border-color:var(--tl);color:var(--tl);}
.check-btn.ok{border-color:rgba(76,175,80,.4);color:var(--ok);}
.check-btn.dmg{border-color:rgba(192,57,43,.4);color:var(--bad);}

/* ── QR LABELS ── */
.qr-grid{display:flex;flex-wrap:wrap;gap:4mm;padding:4mm;}
.qr-label{width:50mm;height:20mm;padding:1.2mm 2mm;text-align:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative;}.qr-label.label-sm{width:32mm;height:20mm;}.qr-label.label-lg{width:62mm;height:20mm;}
.bc-top{font-family:'Bebas Neue',sans-serif;font-size:6.5pt;letter-spacing:.15em;color:var(--on-y);margin-bottom:.4mm;line-height:1;font-weight:700;white-space:nowrap;overflow:hidden;}.bc-top span{color:var(--on-y);}
.bc-svg{display:block;width:100%;height:10mm;flex:1;}
.bc-bottom{font-family:'Barlow Condensed',sans-serif;font-size:5pt;letter-spacing:.06em;text-transform:uppercase;color:var(--on-y);margin-top:.5mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;line-height:1;}
.qr-label-name{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--w);margin-top:.7rem;margin-bottom:.1rem;}
.qr-label-id{font-family:'Barlow Condensed',sans-serif;font-size:.55rem;letter-spacing:.2em;color:var(--m);}
.qr-label-price{font-family:'Bebas Neue',sans-serif;font-size:.95rem;color:var(--y-txt);margin-top:.3rem;}

/* ── CONFIG ── */
.config-panel{position:fixed;right:0;top:0;bottom:0;width:360px;background:var(--cm);border-left:1px solid var(--cb);
  padding:2rem;z-index:200;transform:translateX(100%);transition:transform .25s;}
.config-panel.open{transform:translateX(0);}
.config-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.06em;margin-bottom:1.5rem;}
.config-note{font-size:.8rem;color:var(--m);line-height:1.6;margin-bottom:1.5rem;}
.config-close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:var(--m);font-size:1.2rem;cursor:pointer;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;display:none;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--cm);border:1px solid var(--cb);width:560px;max-height:80vh;overflow-y:auto;padding:2rem;display:flex;flex-direction:column;}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.06em;margin-bottom:1.5rem;}
.modal-actions{display:flex;gap:.8rem;margin-top:1.5rem;}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:4rem 2rem;color:var(--m);}
.empty-icon{font-size:2.5rem;margin-bottom:.8rem;opacity:.3;}
.empty-label{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;}

@media print{
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  body { background: white !important; }

  /* ── Kit prep pack list ── */
  body[data-print="kit"] .topbar,
  body[data-print="kit"] .sidebar,
  body[data-print="kit"] .content,
  body[data-print="kit"] #kp-noprint { display:none !important; }
  body[data-print="kit"] #kit-prep-overlay { position:static !important; background:white !important; }
  @page { size: A4 portrait; margin: 12mm; }

  /* ── QR labels ── */
  body[data-print="labels"] .topbar,
  body[data-print="labels"] .sidebar,
  body[data-print="labels"] .tb-nav,
  body[data-print="labels"] .ph-actions,
  body[data-print="labels"] .config-panel { display:none !important; }
  body[data-print="labels"] .app { display:block !important; height:auto !important; }
  body[data-print="labels"] .main { display:block !important; }
  body[data-print="labels"] .content { overflow:visible !important; padding:0 !important; }
  body[data-print="labels"] .panel { display:none !important; }
  body[data-print="labels"] #panel-qr { display:block !important; }
  body[data-print="labels"] .ph { display:none !important; }
  body[data-print="labels"] .qr-grid { display:flex !important; flex-wrap:wrap !important; gap:3mm !important; padding:0 !important; }
  body[data-print="labels"] .qr-label { width:50mm !important; height:20mm !important; break-inside:avoid !important; page-break-inside:avoid !important; box-sizing:border-box !important; }
  body[data-print="labels"] .qr-label.label-sm { width:32mm !important; height:20mm !important; }
  body[data-print="labels"] .qr-label.label-lg { width:62mm !important; height:20mm !important; }
  body[data-print="labels"] .qr-select { display:none !important; }
  body[data-print="labels"] .panel > div:not(.qr-grid) { display:none !important; }
  body[data-print="labels"] .qr-label svg,
  body[data-print="labels"] .qr-label svg * { display:block !important; visibility:visible !important; }

  /* ── Resources / procedures ── */
  body[data-print="resources"] .topbar,
  body[data-print="resources"] .sidebar,
  body[data-print="resources"] .tb-nav,
  body[data-print="resources"] .ph-actions,
  body[data-print="resources"] .config-panel { display:none !important; }
  body[data-print="resources"] .app { display:block !important; height:auto !important; }
  body[data-print="resources"] .main { display:block !important; }
  body[data-print="resources"] .content { overflow:visible !important; padding:1rem !important; }
  body[data-print="resources"] .panel { display:none !important; }
  body[data-print="resources"] #panel-resources { display:block !important; }
  body[data-print="resources"] #res-home { display:none !important; }
  body[data-print="resources"] #res-content { display:block !important; }
}

.sb-task {
  display: grid;
  grid-template-columns: 3px 1fr 28px;
  border-bottom: 1px solid rgba(58,58,54,.7);
  cursor: pointer;
  transition: background .12s;
}
.sb-task:hover { background: rgba(255,255,255,.04); }
.sb-task-stripe { width: 3px; }
.sb-task-body { padding: .6rem .75rem .55rem; min-width: 0; }
.sb-task-row1 { display: flex; align-items: center; gap: .35rem; margin-bottom: .22rem; }
.sb-task-type-pill {
  font-family: 'Barlow Condensed', sans-serif; font-size: .53rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700;
  padding: .08rem .42rem; border-radius: 2px; flex-shrink: 0;
}
.sb-task-urgent-badge {
  font-family: 'Barlow Condensed', sans-serif; font-size: .5rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--bad); font-weight: 700;
}
.sb-task-title { font-size: .85rem; color: var(--w); line-height: 1.35; margin-bottom: .2rem; }
.sb-task-meta {
  font-family: 'Barlow Condensed', sans-serif; font-size: .6rem; letter-spacing: .08em;
  color: var(--m); display: flex; flex-wrap: wrap; gap: 0 .4rem; align-items: center;
}
.sb-task-meta-sep { color:var(--faint); }
.sb-task-meta-wo { color: rgba(245,200,66,.6); }
.sb-task-meta-due-ok { color: var(--m); }
.sb-task-meta-due-warn { color:var(--y-txt); }
.sb-task-meta-due-over { color: var(--bad); }
.sb-task-check-col { display: flex; align-items: flex-start; justify-content: center; padding: .55rem .3rem 0 0; }
.sb-check-box {
  width: 17px; height: 17px; border: 1.5px solid var(--cb); border-radius: 3px;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sb-check-box:hover { border-color: var(--ok); background: rgba(76,175,80,.15); }
.sb-check-box.checking { border-color: var(--ok); background: var(--ok); }
.sb-check-box.checking::after { content: '✓'; color: white; font-size: .62rem; font-weight: 700; }
.sb-empty { padding: 1.5rem .9rem; font-family: 'Barlow Condensed', sans-serif; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color:var(--faint); text-align: center; }


.inv-edit-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
  background: none; border: 1px solid var(--cb); color: var(--m);
  padding: .28rem .8rem; cursor: pointer; transition: border-color .15s, color .15s;
  display: block; margin: 0 auto; white-space: nowrap;
}
.inv-edit-btn:hover { border-color:var(--y-txt); color:var(--y-txt); }


.scan-camera-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--y); border: none; color:var(--on-y);
  font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: .06em;
  padding: .8rem 2rem; cursor: pointer; width: 100%; margin-bottom: .8rem;
  transition: background .15s;
}
.scan-camera-btn:hover { background: var(--y-d); }
.scan-camera-btn.scanning { background: var(--bad); color: white; }
#camera-preview-wrap {
  display: none; position: relative; width: 100%; max-width: 480px;
  margin: 0 auto .8rem; background: #000;
}
#camera-preview-wrap.active { display: block; }
#camera-preview { width: 100%; display: block; }
#camera-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 240px; height: 80px; border: 2px solid var(--y);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.5);
}
#camera-overlay::before, #camera-overlay::after {
  content: ''; position: absolute; width: 20px; height: 20px; border-color:var(--y-txt); border-style: solid;
}
#camera-overlay::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
#camera-overlay::after  { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }
.scan-beep-indicator {
  display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(76,175,80,.3); pointer-events: none;
}
.scan-beep-indicator.flash { display: block; animation: flash .3s ease-out; }
@keyframes flash { 0%{opacity:1} 100%{opacity:0} }


.res-tile{background:var(--cl);border:1px solid var(--cb);padding:1.1rem .8rem 1rem;cursor:pointer;transition:border-color .15s,background .15s;text-align:center;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.res-tile:hover{border-color:var(--y-txt);background:var(--y-bg);}
.res-icon{width:28px;height:28px;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;}.res-icon svg{width:100%;height:100%;}
.res-label{font-family:Barlow Condensed,sans-serif;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--w);font-weight:700;margin-bottom:.2rem;}
.res-sub{font-family:Barlow Condensed,sans-serif;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--m);}
.res-section-title{font-family:Barlow Condensed,sans-serif;font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--y-txt);font-weight:700;margin-bottom:.8rem;padding-bottom:.4rem;border-bottom:1px solid var(--cb);}
.proc-step{display:flex;gap:.8rem;padding:.65rem 0;border-bottom:1px solid rgba(58,58,54,.4);align-items:flex-start;}
.proc-num{font-family:Bebas Neue,sans-serif;font-size:1.2rem;color:var(--y-txt);flex-shrink:0;width:22px;line-height:1.1;}
.proc-text{font-size:.85rem;color:var(--tl);line-height:1.5;}
.proc-sub{font-family:Barlow Condensed,sans-serif;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--m);margin-top:.1rem;}