/* Folkrm warehouse app. Brand: white / black, Cyber Purple on the one primary
   action only. Status colours (green accept, red reject) override brand. */
:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --line: #dddddd;
  --surface: #f4f4f4;
  --primary: #9d00ff;
  --primary-fg: #ffffff;
  --secondary: #111111;
  --secondary-fg: #ffffff;
  --ok: #1a9c3e;
  --err: #d1202f;
  --tap: 64px;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-head: 'Libre Franklin', 'DM Sans', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #121212; --fg: #f2f2f2; --muted: #a8a8a8; --line: #333333; --surface: #1e1e1e;
    --secondary: #f2f2f2; --secondary-fg: #111111;
  }
}
:root[data-theme='dark'] {
  --bg: #121212; --fg: #f2f2f2; --muted: #a8a8a8; --line: #333333; --surface: #1e1e1e;
  --secondary: #f2f2f2; --secondary-fg: #111111;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 18px; line-height: 1.35;
  min-height: 100vh; display: flex; flex-direction: column;
  overflow-x: hidden; touch-action: manipulation;
}
h1, h2 { font-family: var(--font-head); font-weight: 700; margin: 0; }
h1 { font-size: 24px; }
h2 { font-size: 20px; margin: 24px 0 8px; }
a { color: inherit; }
code { font-size: 0.9em; background: var(--surface); padding: 2px 4px; border-radius: 4px; }

.top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: var(--tap); }
.back { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin: -12px 0 -12px -16px; font-size: 40px; text-decoration: none; }
main { flex: 1; padding: 16px; width: 100%; max-width: 480px; margin: 0 auto; }
body.wide main { max-width: 960px; }
.foot { border-top: 1px solid var(--line); padding: 8px 16px; font-size: 14px; color: var(--muted); }
.foot-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; min-height: 40px; }
.foot form { display: inline; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 12px 20px; width: 100%;
  border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--fg);
  font: inherit; font-size: 20px; font-weight: 500; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); font-weight: 700; }
.btn-secondary { background: var(--secondary); border-color: var(--secondary); color: var(--secondary-fg); }
.btn.inline { display: inline-flex; width: auto; min-height: 44px; font-size: 16px; padding: 8px 16px; }
.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; min-height: 40px; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.tile { min-height: 72px; font-size: 22px; }
.tile-big { min-height: 96px; font-size: 28px; font-family: var(--font-head); font-weight: 700; }

.card { padding: 24px 16px; }
.center { text-align: center; }
.lead { font-size: 22px; font-weight: 500; margin: 8px 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.notice { padding: 12px 14px; border-radius: 10px; background: var(--surface); margin: 0 0 12px; }
.notice.err { background: var(--err); color: #fff; }
.notice.ok { background: var(--ok); color: #fff; }
td.ok { color: var(--ok); font-weight: 700; }
td.err { color: var(--err); font-weight: 700; }

/* PIN pad */
.pinpad { display: flex; flex-direction: column; gap: 16px; }
.dots { display: flex; justify-content: center; gap: 16px; min-height: 28px; }
.dots i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--fg); }
.dots i.on { background: var(--fg); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.key { min-height: 72px; font-size: 28px; }

/* Scan test */
.scan-result { min-height: 200px; padding: 16px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; justify-content: center; }
.scan-result .big { font-size: 34px; line-height: 1.15; font-family: var(--font-head); font-weight: 700; margin: 0 0 8px; }
.scan-result .sub { font-size: 20px; margin: 0 0 4px; }
.scan-result.ok { outline: 4px solid var(--ok); }
.scan-result.err { outline: 4px solid var(--err); }

/* Hidden but focusable scan input. Never display:none. */
.scan-input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; }

/* Full-screen colour flash on scan accept / reject. */
.flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 50; transition: opacity 0.35s ease-out; }
.flash.ok { background: var(--ok); opacity: 0.55; transition: none; }
.flash.err { background: var(--err); opacity: 0.65; transition: none; }

/* Forms and tables (admin, desktop) */
.form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.form input:not([type='checkbox']), .form select {
  font: inherit; padding: 12px; min-height: 48px; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg);
}
.form label.check { flex-direction: row; align-items: center; gap: 10px; }
.form input[type='checkbox'] { width: 24px; height: 24px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; }
tr.inactive td { color: var(--muted); }