/* delivery-scan admin UI. No inline styles anywhere (strict CSP). */
:root { --bg:#f5f6f8; --card:#fff; --fg:#1b1f24; --muted:#59636e;
  --accent:#0b5fff; --danger:#c62828; --border:#d0d7de; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171a; --card:#1e2227; --fg:#e8ecf0; --muted:#9aa5b1;
    --accent:#6ea0ff; --danger:#ff6b6b; --border:#363d45; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.bar { display:flex; gap:.75rem; align-items:center; padding:.6rem 1rem;
  background:var(--card); border-bottom:1px solid var(--border); }
.spacer { flex:1; }
main { max-width:42rem; margin:1.5rem auto; padding:0 1rem; }
.card { background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:1.25rem; margin-bottom:1rem; }
h1 { font-size:1.25rem; margin:0 0 .75rem; }
label { display:block; margin:.75rem 0 .25rem; font-size:.9rem;
  color:var(--muted); }
input, select { width:100%; padding:.6rem .7rem; font:inherit;
  color:var(--fg); background:var(--bg); border:1px solid var(--border);
  border-radius:8px; }
.bar select { width:auto; }
button { font:inherit; padding:.6rem 1rem; border-radius:8px; border:0;
  background:var(--accent); color:#fff; cursor:pointer; margin-top:1rem; }
button.link { background:none; color:var(--accent); margin:0; padding:.2rem; }
.msg { padding:.7rem .9rem; border-radius:8px; margin:.75rem 0;
  background:var(--bg); border:1px solid var(--border); }
.msg.error { border-color:var(--danger); color:var(--danger); }
code { background:var(--bg); padding:.1rem .35rem; border-radius:4px; }
.row { display:grid; grid-template-columns:1fr 6rem; gap:.75rem; }
h2 { font-size:1rem; margin:1.25rem 0 0; }
.head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.head h1 { margin:0; }
.head button { margin:0; }
table { width:100%; border-collapse:collapse; margin-top:.75rem; }
th, td { text-align:left; padding:.45rem .4rem; border-bottom:1px solid var(--border); }
th { font-size:.8rem; color:var(--muted); font-weight:600; }
td button.link { font-size:1rem; }
textarea { width:100%; padding:.6rem .7rem; font:inherit; color:var(--fg);
  background:var(--bg); border:1px solid var(--border); border-radius:8px; }
label.check { display:flex; align-items:center; gap:.6rem; }
label.check input { width:auto; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.actions button { margin-top:.5rem; }
button.secondary { background:var(--bg); color:var(--fg); border:1px solid var(--border); }
button.danger { background:var(--danger); }
.hint { font-size:.85rem; color:var(--muted); }
.msg.ok { border-color:#2e7d32; color:#2e7d32; }
.qr { text-align:center; }
.qr img { max-width:100%; height:auto; background:#fff; padding:.5rem; border-radius:8px; }
.qr code { word-break:break-all; }

/* section tabs, filter bar, tables (archive / audit) */
.tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--border, #ccc); }
.tab { border: 0; background: none; padding: 10px 14px; font: inherit; cursor: pointer;
  color: inherit; border-bottom: 3px solid transparent; }
.tab.active { border-bottom-color: currentColor; font-weight: 600; }
.card.wide { max-width: 1100px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.filters label { margin: 0; }
.scroll { overflow-x: auto; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 12px; }
td { vertical-align: top; }