/* ACF Asset Register — shared styles for the admin app and the staff scan page.
   Asset tags are styled like printed yellow asset labels. */
:root{
  --bg:#f3f5f4; --surface:#ffffff; --sunk:#e8ecea; --line:#d3dad7;
  --ink:#16211e; --ink-2:#4b5a55; --ink-3:#77857f;
  --accent:#0f5e57; --accent-ink:#ffffff; --accent-soft:#d8ebe8;
  --tag:#f2c230; --tag-ink:#1d1a0e;
  --ok:#237a43; --ok-soft:#dcefe2; --warn:#a35f00; --warn-soft:#fbecd2; --bad:#b4312a; --bad-soft:#f8dedb;
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1514; --surface:#171f1d; --sunk:#1f2926; --line:#2d3a36;
  --ink:#e6eeeb; --ink-2:#a8b8b2; --ink-3:#7c8d87;
  --accent:#5ec2b6; --accent-ink:#06201d; --accent-soft:#183a36;
  --tag:#e8b923; --tag-ink:#1d1a0e;
  --ok:#5fcf86; --ok-soft:#173523; --warn:#f0a845; --warn-soft:#3a2a12; --bad:#f07b72; --bad-soft:#3d1c1a;
  color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:env(safe-area-inset-top,0px) calc(48px + env(safe-area-inset-bottom,0px))}
[hidden]{display:none!important}
.wrap{max-width:1040px;margin:0 auto}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:1.15rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
p{margin:0}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.small{font-size:.85rem}
.eyebrow{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.stack{display:grid;gap:12px}
.stack-lg{display:grid;gap:18px}

/* header */
header.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:16px 10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{font-family:var(--mono);font-weight:700;font-size:.78rem;background:var(--tag);color:var(--tag-ink);padding:4px 7px;border-radius:4px;letter-spacing:.04em}
.brand h1{font-size:1.25rem;font-weight:800}
.who{margin-left:auto;font-size:.85rem;color:var(--ink-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
nav.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:18px;scrollbar-width:none}
nav.tabs a{padding:10px 12px;text-decoration:none;color:var(--ink-2);font-weight:700;font-family:var(--display);font-size:.95rem;border-bottom:3px solid transparent;white-space:nowrap}
nav.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.sm{min-height:36px;padding:0 12px;font-size:.88rem}
.btn.link{border:0;background:none;color:var(--accent);padding:0;min-height:0;text-decoration:underline}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}

/* forms */
input[type=text],input[type=email],input[type=password],input[type=date],input[type=search],input[type=url],select,textarea{
  width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
textarea{min-height:110px;resize:vertical;line-height:1.4}
label.f{display:grid;gap:4px;font-size:.88rem;font-weight:700;color:var(--ink-2)}
.fgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.find{display:flex;gap:8px;margin-bottom:18px}
.find input{flex:1;min-width:0}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.stat{background:var(--surface);padding:12px 14px;min-width:0}
.stat b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:.8rem;color:var(--ink-2)}
.stat.alert b{color:var(--bad)}
.stat.warnc b{color:var(--warn)}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}

section.block{margin-bottom:26px}
.block-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.block-head .muted{font-size:.85rem}
.block-head .btn-row{margin-left:auto}

/* lists */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.row:first-child{border-top:0}
a.row:hover{background:var(--sunk)}
.row .main{min-width:0;text-decoration:none;color:inherit}
.row .name{font-weight:700;overflow-wrap:anywhere}
.row .sub{font-size:.85rem;color:var(--ink-2);overflow-wrap:anywhere}
.row .side{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:520px){.row{grid-template-columns:auto minmax(0,1fr)}.row .side{grid-column:1/-1;justify-content:flex-start}}
.group-label{padding:8px 14px;background:var(--sunk);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ink-2);border-top:1px solid var(--line)}
.group-label:first-child{border-top:0}
.empty{padding:18px 14px;color:var(--ink-2)}

.tagchip{font-family:var(--mono);font-weight:700;font-size:.8rem;background:var(--tag);color:var(--tag-ink);padding:3px 7px;border-radius:4px;white-space:nowrap;letter-spacing:.02em;text-decoration:none}
.tagchip.big{font-size:1rem;padding:5px 10px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--sunk);color:var(--ink-2)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--accent-soft);color:var(--accent)}
.mode{font-size:.75rem;font-weight:700;color:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:2px 6px;white-space:nowrap}
.src{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}

/* asset detail */
.back{display:inline-block;margin-bottom:12px;font-weight:700;text-decoration:none}
.detail-head{display:grid;gap:8px;margin-bottom:16px}
.detail-head h2{font-size:1.6rem;font-weight:800}
.now{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:14px;margin-bottom:18px}
.now-loc{font-family:var(--display);font-size:1.35rem;font-weight:700;overflow-wrap:anywhere}
.now .btn-row .btn{flex:1 1 150px}
.two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px;align-items:start}
@media (max-width:760px){.two{grid-template-columns:minmax(0,1fr)}}
dl.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
dl.facts dt{color:var(--ink-2);font-size:.88rem}
dl.facts dd{margin:0;overflow-wrap:anywhere}
.qrbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;justify-items:center;gap:8px;text-align:center}
.qrbox .qr{width:170px;height:170px;background:#fff;padding:8px;border-radius:6px}
.qr svg{width:100%;height:100%;display:block}
.timeline{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.timeline li{padding:10px 14px;border-top:1px solid var(--line);display:grid;gap:2px}
.timeline li:first-child{border-top:0}
.timeline time{font-size:.8rem;color:var(--ink-3)}

.filters{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:8px;margin-bottom:12px}
@media (max-width:760px){.filters{grid-template-columns:1fr 1fr}.filters .q{grid-column:1/-1}}

/* modal sheet */
.scrim{position:fixed;inset:0;background:rgba(10,20,18,.5);z-index:40;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:700px){.scrim{align-items:center}}
.sheet{background:var(--surface);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:14px 14px 0 0;
  padding:18px max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));display:grid;gap:14px}
@media (min-width:700px){.sheet{border-radius:14px}}
.sheet-head{display:flex;align-items:center;gap:10px}
.sheet-head .x{margin-left:auto}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:8px;font-weight:700;z-index:60;max-width:calc(100% - 32px)}
.note{background:var(--warn-soft);color:var(--ink);border-radius:8px;padding:10px 14px;font-size:.92rem}
.note.info{background:var(--accent-soft)}
.note.bad{background:var(--bad-soft)}

/* labels */
.labels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.lab{background:#fff;color:#111;border:1px dashed #9aa;border-radius:6px;padding:8px;display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;align-items:center;aspect-ratio:63.5/38.1;max-width:100%}
.lab .qr{width:76px;height:76px}
.lab .t{font-family:var(--mono);font-weight:700;font-size:1rem}
.lab .n{font-size:.75rem;line-height:1.25;overflow:hidden;max-height:2.5em}
.lab .o{font-size:.62rem;color:#555}
.pick{display:flex;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--line);cursor:pointer}
.pick:first-child{border-top:0}
.pick input{width:20px;height:20px;flex:none}
.sites{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.setup-site{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:10px}

/* login */
.login{max-width:380px;margin:12vh auto 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:14px}

/* print: label sheet only (Avery L7160, 21 per A4) */
#printArea{display:none}
@media print{
  @page{size:A4;margin:0}
  body{background:#fff;padding:0;margin:0}
  body > *:not(#printArea){display:none!important}
  #printArea{display:block}
  .sheet-a4{width:210mm;height:297mm;padding:15.1mm 7.2mm 0;display:grid;grid-template-columns:repeat(3,63.5mm);grid-template-rows:repeat(7,38.1mm);column-gap:2.5mm;page-break-after:always;break-after:page;box-sizing:border-box}
  .sheet-a4:last-child{page-break-after:auto;break-after:auto}
  .pl{display:flex;align-items:center;gap:2.5mm;padding:2.5mm 3mm;overflow:hidden;color:#000;font-family:Arial,Helvetica,sans-serif}
  .pl .qr{width:28mm;height:28mm;flex:none}
  .pl .t{font:bold 12pt "Courier New",monospace}
  .pl .n{font-size:8pt;margin-top:1mm;max-height:20pt;overflow:hidden}
  .pl .o{font-size:6pt;color:#333;margin-top:1.5mm}
}

/* ---------- staff scan page ---------- */
.scan{max-width:480px;margin:0 auto;padding-top:18px;display:grid;gap:16px}
.scan-org{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:.85rem;font-weight:700}
.scan-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:14px}
.scan-card h1{font-size:1.5rem;font-weight:800}
.state{display:grid;gap:4px;padding:12px 14px;border-radius:10px;background:var(--sunk)}
.state.out{background:var(--warn-soft)}
.state.in{background:var(--ok-soft)}
.state.bad{background:var(--bad-soft)}
.state b{font-family:var(--display);font-size:1.15rem}
.btn.big{min-height:56px;font-size:1.1rem;width:100%}
.done{text-align:center;display:grid;gap:10px;justify-items:center;padding-block:10px}
.tick{width:72px;height:72px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center}
.tick svg{width:40px;height:40px}
.namebar{display:flex;align-items:center;gap:8px;font-size:.95rem;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}