/* Kitizen: the whole field UI stylesheet. System font, high contrast, big targets. */
:root {
  --ink: #111111;
  --muted: #4a4a4a;
  --paper: #ffffff;
  --ok: #0b6e2e;      /* EN STOCK, geste réussi */
  --loan: #0b4fc4;    /* PRÊTÉ */
  --warn: #9a4a00;    /* À RÉPARER, rupture */
  --danger: #b3261e;  /* rebut */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main { max-width: 480px; margin: 0 auto; padding: 16px; }

h1 { font-size: 30px; line-height: 1.15; margin: 0 0 8px; }

.btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; width: 100%; margin: 12px 0 0; padding: 0 16px;
  border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 20px; font-weight: 700; text-decoration: none;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-danger { border-color: var(--danger); color: var(--danger); }

.band { padding: 12px 16px; color: var(--paper); font-weight: 800; letter-spacing: .04em; }
.band-stock { background: var(--ok); }
.band-loan { background: var(--loan); }
.band-repair { background: var(--warn); }
.band-out { background: #3a3a3a; }

input[type="text"], input[type="search"], input[inputmode="numeric"] {
  width: 100%; min-height: 60px; padding: 0 16px;
  border: 3px solid var(--ink); font: inherit; font-size: 22px;
}
label { display: block; margin: 16px 0 6px; font-weight: 700; }

/* Scanner: dark screen, everything else stays light. */
body.dark { background: #000; color: #fff; }
body.dark .btn { background: #000; color: #fff; border-color: #fff; }
body.dark .btn-primary { background: #fff; color: #000; }
body.dark a { color: #fff; }
.back { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.scan-view { position: relative; margin-top: 12px; aspect-ratio: 3 / 4; background: #1f1f1f; overflow: hidden; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame {
  position: absolute; inset: 18%; border: 6px solid #fff;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
}
.scan-status { margin: 12px 0 0; }
.scan-result { margin-top: 12px; padding: 16px; border: 3px solid #fff; }
.scan-value { margin: 0; font-size: 20px; font-weight: 800; word-break: break-all; }
.scan-meta { margin: 6px 0 0; color: #cfcfcf; }
.scan-manual { margin-top: 8px; }