@font-face{
  font-family:'Rustica';
  src: url('/fonts/rustica-variable.woff2') format('woff2-variations'),
       url('/fonts/rustica-variable.woff2') format('woff2');
  font-weight: 75 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:'Rustica';
  src: url('/fonts/rustica-variable-italic.woff2') format('woff2-variations'),
       url('/fonts/rustica-variable-italic.woff2') format('woff2');
  font-weight: 75 900;
  font-style: italic;
  font-display: swap;
}

:root{
  /* BP Supply brand */
  --brand-primary:#7c2529;
  --brand-secondary:#53565a;
  --brand-tertiary:#ffffff;

  --ink:#3a3c3e;
  --paper:#ffffff;
  --panel:#ffffff;
  --panel-2:#f4f3f2;
  --line:#dcdad9;
  --muted:#7b7e81;
  --accent:var(--brand-primary);
  --accent-ink:var(--brand-tertiary);
  --ok:#3f7a4f;
  --ok-bg:#e4f0e6;
  --warn:#9c7415;
  --warn-bg:#f5ecd2;
  --danger:#a83c34;
  --danger-bg:#f5e0dc;
  --shadow: 0 1px 2px rgba(20,20,20,.06), 0 6px 20px -8px rgba(20,20,20,.18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e9e7e6;
    --paper:#1c1d1f;
    --panel:#242527;
    --panel-2:#2b2c2f;
    --line:#3c3d40;
    --muted:#a6a8ab;
    --accent:#b3474d;
    --accent-ink:#fff8f2;
    --ok:#7fc793;
    --ok-bg:#1b2b1f;
    --warn:#e3bc57;
    --warn-bg:#2e2712;
    --danger:#e6867f;
    --danger-bg:#33201e;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 24px -10px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Rustica',system-ui,sans-serif;
}
h1,h2,h3,.display{
  font-family:'Rustica',system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-wrap:balance;
  margin:0;
}
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric: tabular-nums; }
a{ color:var(--accent); }

.shell{ max-width:1180px; margin:0 auto; padding-inline:20px; }

header.topbar{ position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); }
.topbar-inner{ max-width:1180px; margin:0 auto; padding:16px 20px 0; }
.brand-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand .mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px;height:30px; border-radius:6px;
  background:var(--accent); color:var(--accent-ink);
  font-family:'Rustica'; font-weight:700; font-size:14px;
  flex:none;
}
.brand h1{ font-size:19px; }
.brand .sub{ color:var(--muted); font-size:12.5px; }

.who{ display:flex; align-items:center; gap:10px; }
.user-label{ font-size:12.5px; color:var(--muted); font-weight:600; }

nav.tabs{ display:flex; gap:4px; margin-top:14px; overflow-x:auto; }
nav.tabs button{
  font-family:'Rustica'; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  background:none; border:none; color:var(--muted);
  padding:10px 14px; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent;
}
nav.tabs button.active{ color:var(--ink); border-bottom-color:var(--accent); }
nav.tabs button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

main{ padding-block:24px 60px; }
.view{ display:none; }
.view.active{ display:block; }

.panel{ background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.panel-pad{ padding:20px; }
.eyebrow{ font-family:'Rustica'; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.scan-grid{ display:grid; grid-template-columns: 1.5fr 1fr; gap:18px; align-items:start; }
@media (max-width:760px){ .scan-grid{ grid-template-columns:1fr; } }

.scan-card{ padding:22px; }
.scan-card .eyebrow{ margin-bottom:8px; }
.scan-input-row{ display:flex; gap:10px; margin-top:6px; }
#scanInput{
  flex:1; min-width:0;
  font-family:'JetBrains Mono'; font-size:22px; font-weight:600; letter-spacing:.03em;
  padding:14px 16px; border-radius:8px; border:1.5px solid var(--line);
  background:var(--panel-2); color:var(--ink);
}
#scanInput::placeholder{ color:var(--muted); font-weight:400; }
.scan-hint{ color:var(--muted); font-size:12.5px; margin-top:8px; }

.result-wrap{ margin-top:18px; min-height:2px; }
.result-card{ border:1px solid var(--line); border-radius:10px; padding:18px; background:var(--panel-2); animation: rise .22s ease-out; }
@keyframes rise{ from{ opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.result-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.result-tag{ font-family:'JetBrains Mono'; font-size:20px; font-weight:700; letter-spacing:.02em; }
.result-desc{ color:var(--muted); font-size:14px; margin-top:2px; }

.pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:100px; }
.pill.unassigned{ background:var(--warn-bg); color:var(--warn); }
.pill.assigned{ background:var(--ok-bg); color:var(--ok); }
.pill.retired{ background:var(--danger-bg); color:var(--danger); }

.kv{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13.5px; margin-top:14px; }
.kv dt{ color:var(--muted); }
.kv dd{ margin:0; }

.btnrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
button.btn{
  font-family:'Rustica'; font-weight:600; font-size:13.5px;
  padding:9px 14px; border-radius:7px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); cursor:pointer;
}
button.btn:hover{ border-color:var(--muted); }
button.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
button.btn.primary:hover{ filter:brightness(1.05); }
button.btn.danger{ color:var(--danger); }
button.btn.ghost{ background:none; }
button.btn.small{ padding:6px 10px; font-size:12.5px; }
button.btn:disabled{ opacity:.5; cursor:not-allowed; }

.assign-box{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); display:none; }
.assign-box.open{ display:block; }
.field-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
select, input[type=text]{
  font-family:'Rustica'; font-size:13.5px; padding:8px 10px; border-radius:7px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink);
}
label.field-label{ font-size:12px; color:var(--muted); display:block; margin-bottom:4px; }

.newasset-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.newasset-form .full{ grid-column:1/-1; }
@media (max-width:520px){ .newasset-form{ grid-template-columns:1fr; } }
.newasset-form input{ width:100%; }

.feed{ display:flex; flex-direction:column; }
.feed-item{ display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px; }
.feed-item:last-child{ border-bottom:none; }
.feed-dot{ width:8px;height:8px;border-radius:50%; margin-top:5px; flex:none; }
.feed-dot.assign{ background:var(--ok); }
.feed-dot.return{ background:var(--warn); }
.feed-dot.retire{ background:var(--danger); }
.feed-dot.add{ background:var(--accent); }
.feed-text b{ font-family:'JetBrains Mono'; font-weight:600; }
.feed-time{ color:var(--muted); font-size:11.5px; }
.empty{ color:var(--muted); font-size:13.5px; padding:10px 0; }

.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.toolbar input[type=text]{ flex:1; min-width:180px; }
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ font-size:12px; font-weight:600; padding:6px 11px; border-radius:100px; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; }
.chip.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
table{ width:100%; border-collapse:collapse; min-width:640px; font-size:13.5px; }
thead th{
  text-align:left; font-family:'Rustica'; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--line); background:var(--panel-2);
}
tbody td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ cursor:pointer; }
tbody tr:hover{ background:var(--panel-2); }
td.tag{ font-family:'JetBrains Mono'; font-weight:600; }

.people-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.person-card{ padding:14px; }
.person-card .name{ font-weight:700; font-size:15px; }
.person-card .dept{ color:var(--muted); font-size:12.5px; margin-top:2px; }
.person-count{ margin-top:10px; display:inline-flex; align-items:baseline; gap:5px; font-family:'JetBrains Mono'; font-size:20px; font-weight:700; }
.person-count span{ font-family:'Rustica'; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; }

.add-inline{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

.section-title{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.section-title h2{ font-size:16px; }
.count-tag{ font-family:'JetBrains Mono'; font-size:12.5px; color:var(--muted); }

.banner{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:9px; background:var(--danger-bg); color:var(--danger); font-size:13px; font-weight:600; margin-bottom:16px; }

.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--paper); font-size:13.5px; font-weight:600;
  padding:10px 16px; border-radius:8px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  z-index:50; max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

::selection{ background:var(--accent); color:var(--accent-ink); }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }