/* =========================================================================
   Cage Tracker — stylesheet
   Aesthetic: industrial inventory-tag / loading-dock status board.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Design tokens. Retuned to sit alongside the in-store Coles apps staff already
   use all day: a pale blue-grey ground, white cards with generous corners,
   near-black text, and yellow reserved for the one action on a screen.
   Only the palette and shape changed — every colour still means what it meant.
   --------------------------------------------------------------------------- */
:root {
  /* Neutrals */
  --ink: #1a1a1a;
  --ink-soft: #3f4a54;
  --ink-mute: #67737f;
  --steel-050: #eaf0f5;   /* page background */
  --steel-100: #dfe8ef;
  --steel-200: #d2dde6;   /* hairlines */
  --steel-300: #b7c4d0;
  --steel-400: #8c99a6;
  --paper: #ffffff;

  /* The action colour. One per screen, like the in-store apps. */
  --brand: #ffe600;
  --brand-hover: #f2d900;
  --brand-ink: #1a1a1a;

  /* State signal colours — unchanged in meaning, refreshed in tone */
  --go: #007a33;
  --go-tint: #e4f2e9;
  --go-ink: #005322;

  --warn: #e0a800;
  --warn-tint: #fdf3d6;
  --warn-ink: #6b4a00;

  --caution: #e2691a;
  --caution-tint: #fce7d7;
  --caution-ink: #6d3005;

  --stop: #d0021b;
  --stop-tint: #fbe0e3;
  --stop-ink: #7a0210;

  --void: #97a4b1;
  --void-tint: #edf1f5;
  --void-ink: #46505a;

  /* Typography */
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout — rounder than before */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(26, 32, 40, .04);
  --shadow-2: 0 6px 18px rgba(26, 32, 40, .10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--steel-050);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button {
  font: inherit;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  font-size: 16px; /* prevents iOS zoom on focus */
}

/* =========================================================================
   Scan page — full-screen response
   ========================================================================= */

body.scan {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  color: #fff;
  background: var(--go);
  transition: background-color 200ms ease;
}
body.scan.is-loading   { background: var(--ink-soft); }
body.scan.is-cooldown  { background: var(--warn); }
body.scan.is-disabled  { background: var(--stop); }
body.scan.is-error     { background: var(--ink-soft); }

.scan__inner {
  max-width: 520px;
  width: 100%;
  text-align: center;
}

.scan__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .85;
  margin: 0 0 16px;
}

.scan__mark {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop 220ms ease-out both;
}
.scan__mark svg { width: 52px; height: 52px; }
.scan__mark--glyph svg { width: 46px; height: 46px; }

.scan__cage {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(64px, 18vw, 128px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
  text-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.scan__cage span {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 4px;
}

.scan__label {
  display: block;
  margin-top: 8px;
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 500;
  opacity: .95;
}

.scan__status {
  margin: 18px 0 6px;
  font-size: clamp(17px, 4.4vw, 20px);
  font-weight: 500;
}

.scan__time {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 15px;
  opacity: .9;
}

.scan__sub {
  margin: 8px 0 0;
  font-size: 15px;
  opacity: .95;
}

.scan__msg {
  margin: 12px 0 0;
  font-size: 15px;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
  opacity: .95;
}

.scan__receipt {
  margin: 22px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  opacity: .7;
}

.scan__retry {
  margin-top: 20px;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
}
.scan__retry:hover, .scan__retry:focus-visible {
  background: rgba(255,255,255,.24);
}

/* Loading spinner (scan page) */
.spinner {
  width: 44px;
  height: 44px;
  margin: 6px auto 12px;
  border: 3px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

@keyframes pop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =========================================================================
   Buttons (shared)
   ========================================================================= */

.btn {
  border: 1px solid var(--steel-300);
  background: var(--paper);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background 100ms, border-color 100ms, transform 60ms;
  white-space: nowrap;
}
.btn:hover      { background: var(--steel-050); }
.btn:active     { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.btn:disabled   { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--primary:hover { background: #000; }

.btn--go {
  background: var(--go);
  color: #fff;
  border-color: var(--go);
}
.btn--go:hover { background: var(--go-ink); }

.btn--stop {
  background: var(--stop);
  color: #fff;
  border-color: var(--stop);
}
.btn--stop:hover { background: var(--stop-ink); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}
.btn--ghost:hover {
  background: var(--steel-100);
  color: var(--ink);
}

.btn--sm {
  padding: 5px 10px;
  font-size: 13px;
}

/* =========================================================================
   Login page
   ========================================================================= */

body.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login__card {
  background: var(--paper);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 32px;
  max-width: 380px;
  width: 100%;
}
.login__title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
}
.login__sub {
  margin: 0 0 22px;
  color: var(--ink-mute);
  font-size: 14px;
}
.login__form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.login__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
.login__input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 0;
  border-color: var(--ink);
}
.login__submit {
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 15px;
}
.login__msg {
  margin-top: 14px;
  font-size: 13px;
  color: var(--stop-ink);
  min-height: 18px;
}

/* =========================================================================
   Dashboard shell
   ========================================================================= */

body.app {
  background: var(--steel-050);
  min-height: 100vh;
  min-height: 100dvh;
}

.app__bar {
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: max(12px, env(safe-area-inset-top));
}
.app__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  flex: 1;
}
.app__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.app__refresh {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-right: 8px;
}
.app__bar .btn--ghost {
  color: rgba(255,255,255,.85);
}
.app__bar .btn--ghost:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.app__main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =========================================================================
   Stats row
   ========================================================================= */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
.stat__value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
}
.stat--warn { border-left: 4px solid var(--stop); }
.stat--warn .stat__value { color: var(--stop-ink); }
.stat--stop { border-left: 4px solid var(--ink-soft); }

/* =========================================================================
   Panels (settings, add form)
   ========================================================================= */

.panel {
  background: var(--paper);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
}
.panel__title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.panel__grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}
.panel__grid input, .panel__grid select {
  padding: 8px 10px;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
.panel__grid input:focus, .panel__grid select:focus {
  outline: 2px solid var(--ink);
  border-color: var(--ink);
}
.panel__actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.msg {
  font-size: 13px;
  color: var(--ink-mute);
}
.msg--ok    { color: var(--go); }
.msg--err   { color: var(--stop-ink); }

/* Add cage form – re-uses .panel__grid */
.add-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
}
.add-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}
.add-form input, .add-form select {
  padding: 8px 10px;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
.add-form input:focus, .add-form select:focus {
  outline: 2px solid var(--ink);
  border-color: var(--ink);
}
.add-form button {
  height: 38px;
}
.add-form .msg {
  grid-column: 1 / -1;
}

/* =========================================================================
   Overdue notices section
   ========================================================================= */

.notices {
  background: #fff5f4;
  border: 1px solid var(--stop);
  border-left-width: 5px;
  border-radius: var(--radius);
  padding: 16px 20px;
}
.notices__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--stop-ink);
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.notices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notice-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--stop-tint);
  border-left: 4px solid var(--stop);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}
.notice-item__num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.notice-item__body {
  min-width: 0;
}
.notice-item__label {
  font-weight: 600;
  color: var(--ink);
}
.notice-item__meta {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.notice-item__note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
  font-style: italic;
}
.notice-item__days {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--stop-ink);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: block;
}

/* =========================================================================
   Grouped manifest
   ========================================================================= */

.group {
  background: var(--paper);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.group + .group { margin-top: 16px; }

.group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--steel-050);
  border-bottom: 1px solid var(--steel-200);
}
.group__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.group__count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  background: var(--paper);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--steel-200);
}

.group__cages {
  display: flex;
  flex-direction: column;
}

/* Cage row */
.cage {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--steel-100);
  border-left: 4px solid transparent;
  background: var(--paper);
  position: relative;
}
.cage:first-child { border-top: none; }

.cage__num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.cage__body { min-width: 0; }

.cage__label {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cage__meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-mute);
}
.cage__since {
  font-family: var(--font-mono);
}
.cage__cooldown {
  color: var(--warn-ink);
}
.cage__notice {
  color: var(--stop-ink);
  font-weight: 600;
}

.cage__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --- Staleness colouring (row background + left stripe) --- */
.cage--state-green   { background: var(--go-tint);      border-left-color: var(--go); }
.cage--state-yellow  { background: var(--warn-tint);    border-left-color: var(--warn); }
.cage--state-orange  { background: var(--caution-tint); border-left-color: var(--caution); }
.cage--state-red     { background: var(--stop-tint);    border-left-color: var(--stop); }
.cage--state-grey    { background: var(--void-tint);    border-left-color: var(--void); }

.cage--state-green   .cage__since { color: var(--go-ink); }
.cage--state-yellow  .cage__since { color: var(--warn-ink); }
.cage--state-orange  .cage__since { color: var(--caution-ink); }
.cage--state-red     .cage__since { color: var(--stop-ink); }
.cage--state-grey    .cage__since { color: var(--void-ink); }

/* Disabled row overrides everything else */
.cage--disabled {
  background: repeating-linear-gradient(
    45deg,
    var(--steel-100),
    var(--steel-100) 12px,
    var(--steel-050) 12px,
    var(--steel-050) 24px
  );
  border-left-color: var(--ink-soft);
  opacity: .78;
}
.cage--disabled .cage__num,
.cage--disabled .cage__label {
  color: var(--ink-mute);
}
.cage--disabled .cage__since,
.cage--disabled .cage__cooldown {
  color: var(--ink-mute);
}

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 6px;
}
.badge--disabled { background: var(--ink); color: #fff; }
.badge--notice   { background: var(--stop); color: #fff; }

/* Warning banner (row-level, before deadline) */
.cage__banner {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--warn-tint);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--warn);
  font-size: 13px;
  color: var(--warn-ink);
}

/* =========================================================================
   Empty state
   ========================================================================= */

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-mute);
  background: var(--paper);
  border: 1px dashed var(--steel-300);
  border-radius: var(--radius);
}
.empty__title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* =========================================================================
   Modal (native <dialog>)
   ========================================================================= */

dialog.modal {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  background: var(--paper);
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  color: var(--ink);
}
dialog.modal::backdrop {
  background: rgba(20, 24, 28, .55);
  backdrop-filter: blur(2px);
}
.modal__inner { padding: 22px 24px; }
.modal__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}
.modal__sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ink-mute);
}
.modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal__grid label,
.modal__row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}
.modal__grid label.full { grid-column: 1 / -1; }
.modal__grid input, .modal__grid select, .modal__grid textarea,
.modal__row input, .modal__row select, .modal__row textarea {
  padding: 8px 10px;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.modal__grid input:focus, .modal__grid select:focus, .modal__grid textarea:focus,
.modal__row input:focus, .modal__row select:focus, .modal__row textarea:focus {
  outline: 2px solid var(--ink);
  border-color: var(--ink);
}
.modal__row { margin-bottom: 12px; }
.modal__foot {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.modal__foot .msg { margin-right: auto; }

/* Notice type radios */
.radio-row {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}
.radio-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 720px) {
  .cage {
    grid-template-columns: 56px 1fr;
    gap: 10px;
  }
  .cage__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .cage__num { font-size: 24px; }
  .app__title { font-size: 13px; }
  .app__refresh { display: none; }
}
@media (max-width: 480px) {
  .app__main { padding: 14px; }
  .notice-item {
    grid-template-columns: 48px 1fr;
  }
  .notice-item__days { grid-column: 2; margin-top: 4px; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .scan__mark { animation: none; }
  .spinner { animation-duration: 2000ms; }
  body.scan { transition: none; }
}

/* =========================================================================
   Area picker overlay
   ========================================================================= */

.picker {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.picker[hidden] { display: none; }
.picker__card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  color: #fff;
}
.picker__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 10px;
}
.picker__title {
  margin: 0 0 26px;
  font-size: 24px;
  font-weight: 600;
}
.picker__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.picker__opt {
  padding: 26px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background 120ms, transform 60ms;
}
.picker__opt:hover, .picker__opt:focus-visible {
  background: rgba(255,255,255,.16);
}
.picker__opt:active { transform: scale(.98); }

/* Area chip in the top bar */
.area-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: #fff;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
}
.area-chip:hover { background: var(--steel-100); }
.area-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =========================================================================
   Search
   ========================================================================= */

.search {
  position: relative;
}
.search__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.search__input:focus {
  outline: 2px solid var(--ink);
  border-color: var(--ink);
}
.suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--paper);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.suggest__head {
  padding: 8px 14px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.suggest__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: none;
  color: var(--ink);
}
.suggest__opt:hover, .suggest__opt:focus-visible {
  background: var(--steel-050);
}
.suggest__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  min-width: 34px;
}

/* =========================================================================
   Compact / collapsible panel
   ========================================================================= */

.panel--compact { padding: 10px 14px; }
.panel__toggle {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 2px;
}
.panel__toggle:hover { color: var(--ink); }
.panel--compact #addFormWrap { margin-top: 14px; }

/* =========================================================================
   Search-hit flash
   ========================================================================= */

.cage--flash {
  animation: flash 1.5s ease-out;
}
@keyframes flash {
  0%   { box-shadow: inset 0 0 0 3px var(--ink); }
  100% { box-shadow: inset 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .cage--flash { animation: none; box-shadow: inset 0 0 0 3px var(--ink); }
}

/* =========================================================================
   Login page (.auth/.card markup)
   ========================================================================= */

.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 30px;
  max-width: 380px;
  width: 100%;
}
.card__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.card__brand h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}
.card__sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-mute);
}
.brandmark {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  flex-shrink: 0;
}
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
.field:focus {
  outline: 2px solid var(--ink);
  outline-offset: 0;
  border-color: var(--ink);
}
.card .btn {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 600;
}
.card .btn:hover { background: #000; }
.notice--error {
  margin-top: 14px;
  font-size: 13px;
  color: var(--stop-ink);
  background: var(--stop-tint);
  border-radius: var(--radius-sm);
  padding: 0;
  max-height: 0;
  overflow: hidden;
}
.notice--error.is-shown {
  padding: 10px 12px;
  max-height: 100px;
}

/* =========================================================================
   Scan page — pending (offline queued) state
   ========================================================================= */

body.scan.is-pending { background: #46525e; }

/* =========================================================================
   Toolbar: status chips + list actions
   ========================================================================= */

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--steel-300);
  background: var(--paper);
  color: var(--ink-soft);
}
.chip:hover { background: var(--steel-050); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
/* Colour hints on the state chips (dot before the text) */
.chip--green::before, .chip--yellow::before, .chip--orange::before,
.chip--red::before, .chip--grey::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.chip--green::before  { background: var(--go); }
.chip--yellow::before { background: var(--warn); }
.chip--orange::before { background: var(--caution); }
.chip--red::before    { background: var(--stop); }
.chip--grey::before   { background: var(--void); }

.toolbar__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* =========================================================================
   Select mode + sticky bulk bar
   ========================================================================= */

.cage--selectmode {
  grid-template-columns: 30px 70px 1fr auto;
}
.cage__check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cage__check input {
  width: 20px;
  height: 20px;
  accent-color: var(--ink);
}

.bulkbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.bulkbar[hidden] { display: none; }
.bulkbar__count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bulkbar .btn {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.bulkbar .btn:hover { background: rgba(255,255,255,.2); }
.bulkbar .btn--stop {
  background: var(--stop);
  border-color: var(--stop);
}
.bulkbar .btn--stop:hover { background: var(--stop-ink); }

/* =========================================================================
   Scan history panel (per cage row)
   ========================================================================= */

.cage__history {
  grid-column: 1 / -1;
  margin-top: 8px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.cage--disabled .cage__history { background: rgba(255,255,255,.4); }
.cage__history-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  border-top: 1px dashed var(--steel-200);
}
.cage__history-row:first-child { border-top: none; }
.cage__history-n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  min-width: 16px;
}
.cage__history-ago {
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 110px;
}
.cage__history-time { color: var(--ink-mute); }
.cage__history-empty {
  font-size: 13px;
  color: var(--ink-mute);
  padding: 2px 0;
}

@media (max-width: 720px) {
  .cage--selectmode {
    grid-template-columns: 30px 56px 1fr;
  }
}

/* =========================================================================
   Scan page — confirmation state
   ========================================================================= */

body.scan.is-confirm { background: var(--ink); }

.scan__confirm {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 22px auto 0;
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 700;
  background: var(--go);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(11, 143, 78, .35);
}
.scan__confirm:hover, .scan__confirm:focus-visible {
  background: #0aa257;
}
.scan__confirm:active { transform: translateY(1px); }

.is-confirm .scan__retry { margin-top: 12px; }

/* =========================================================================
   Settings panel — checkbox row
   ========================================================================= */

.panel__check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}
.panel__check-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--ink);
  flex-shrink: 0;
}
.panel__check-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-mute);
  line-height: 1.3;
}

/* =========================================================================
   Multi-store: login store picker, dashboard badge, scan store line
   ========================================================================= */

/* --- Login: step 1 store selection --- */
.card__step {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.store-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.store-opt {
  padding: 22px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--steel-300);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: background 120ms, border-color 120ms, transform 60ms;
}
.store-opt:hover, .store-opt:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.store-opt:active { transform: scale(.98); }

/* --- Login: step 2 chosen-store bar --- */
.store-chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--steel-050);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
}
.store-chosen__code {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
}

/* --- Dashboard: fixed store badge (not a button — cannot be changed) --- */
.store-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  cursor: default;
}

/* --- Scan screen: store line above the cage number --- */
.scan__store {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .85;
}

@media (max-width: 720px) {
  .store-badge { font-size: 10px; padding: 4px 9px; letter-spacing: .12em; }
}

/* =========================================================================
   Admin console
   ========================================================================= */

.admin-badge {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--ink);
}

/* --- Per-store overview cards --- */
.store-card {
  background: var(--paper);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
}
.store-card + .store-card { margin-top: 12px; }

.store-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.store-card__code {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.store-card__name {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 3px;
}

.store-card__bars {
  display: flex;
  gap: 2px;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--steel-100);
}
.minibar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  min-width: 20px;
}
.minibar--green  { background: var(--go); }
.minibar--yellow { background: var(--warn); }
.minibar--orange { background: var(--caution); }
.minibar--red    { background: var(--stop); }
.minibar--grey   { background: var(--void); }

.store-card__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-mute);
}
.store-card__meta b {
  color: var(--ink);
  font-family: var(--font-mono);
}
.store-card__meta .is-alert, .store-card__meta .is-alert b { color: var(--stop-ink); }

/* --- Store management rows --- */
.manage-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.manage-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--paper);
  border-top: 1px solid var(--steel-100);
}
.manage-row:first-child { border-top: none; }
.manage-row__code {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
}
.manage-row__name { font-weight: 600; }
.manage-row__meta {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.manage-row__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 620px) {
  .manage-row { grid-template-columns: 56px 1fr; }
  .manage-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* =========================================================================
   Scan page — "Not right?" label report
   ========================================================================= */

.scan__label--none {
  opacity: .65;
  font-style: italic;
}

.report {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.22);
}
.report__open {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
}
.report__open:hover, .report__open:focus-visible {
  background: rgba(255,255,255,.16);
}
.report__form {
  max-width: 340px;
  margin: 0 auto;
  text-align: left;
}
.report__label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  opacity: .9;
}
.report__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.12);
  color: #fff;
}
.report__input::placeholder { color: rgba(255,255,255,.55); }
.report__input:focus {
  outline: 2px solid #fff;
  outline-offset: 1px;
  background: rgba(255,255,255,.2);
}
.report__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.report__send {
  flex: 1;
  background: #fff;
  color: var(--ink);
  border: none;
  font-weight: 600;
  padding: 11px 14px;
}
.report__send:hover { background: var(--steel-100); }
.report__cancel {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  padding: 11px 14px;
}
.report__cancel:hover { background: rgba(255,255,255,.14); }
.report__msg {
  margin: 8px 0 0;
  font-size: 13px;
  min-height: 18px;
  opacity: .95;
}
.report__done {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

/* =========================================================================
   Dashboard — label report flags
   ========================================================================= */

.stat--flag { border-left: 4px solid var(--warn); }
.stat--flag .stat__value { color: var(--warn-ink); }

.badge--flag { background: var(--warn); color: var(--ink); }

.flags {
  background: #fffaf0;
  border: 1px solid var(--warn);
  border-left-width: 5px;
  border-radius: var(--radius);
  padding: 16px 20px;
}
.flags__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--warn-ink);
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.flags__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flag-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--warn-tint);
  border-left: 4px solid var(--warn);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}
.flag-item__num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.flag-item__body { min-width: 0; }
.flag-item__change {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.flag-item__was {
  color: var(--ink-mute);
  text-decoration: line-through;
}
.flag-item__arrow { color: var(--ink-mute); }
.flag-item__now {
  font-weight: 700;
  color: var(--ink);
}
.flag-item__meta {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 3px;
}
.flag-item__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 620px) {
  .flag-item { grid-template-columns: 48px 1fr; }
  .flag-item__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* =========================================================================
   Scan page — cage details (photo + description)
   ========================================================================= */

.details {
  margin-top: 22px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
}
.details__photo {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  background: rgba(0,0,0,.2);
}
.details__text {
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* =========================================================================
   Dashboard — details editor + tag link
   ========================================================================= */

.badge--details {
  background: var(--steel-200);
  color: var(--ink-soft);
  font-weight: 700;
}

.photo-edit { margin-bottom: 16px; }
.photo-edit__preview {
  width: 100%;
  height: 190px;
  border: 1px dashed var(--steel-300);
  border-radius: var(--radius-sm);
  background: var(--steel-050);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}
.photo-edit__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.photo-edit__empty {
  color: var(--ink-mute);
  font-size: 14px;
}
.photo-edit__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.photo-edit__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
}

#detailsDescription {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  resize: vertical;
  background: var(--paper);
  color: var(--ink);
}
#detailsDescription:focus {
  outline: 2px solid var(--ink);
  border-color: var(--ink);
}

/* --- Tag link + QR --- */
.linkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--steel-050);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 16px;
}
.linkbox__url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
  line-height: 1.4;
}
.qr-wrap {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
}
.qr-wrap svg {
  width: 220px;
  height: 220px;
}

@media (max-width: 480px) {
  .qr-wrap svg { width: 180px; height: 180px; }
}

/* Scan screen: the two staff prompts sit side by side, and the photo the
   person just took is previewed before they send it. */
.report__triggers {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
/* An explicit display beats the browser's own [hidden] rule, so the
   attribute has to be honoured here or the triggers never go away. */
.report__triggers[hidden] { display: none; }
.report__preview {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: 10px 0 0;
  border: 1px solid rgba(255,255,255,.35);
}
.report__done {
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

/* Dashboard flags: a photo suggestion shows the current and proposed images
   side by side, so the choice can be made without opening anything. */
.flag-item__change--photo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.flag-photo {
  margin: 0;
  text-align: center;
}
.flag-photo img {
  display: block;
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--steel-200);
  background: var(--steel-050);
}
.flag-photo figcaption {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
.flag-photo--none div {
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
  border: 1px dashed var(--steel-200);
  border-radius: var(--radius-sm);
}

/* ===========================================================================
   STOCKROOM MAP — the first thing on the dashboard
   One square is one cage, coloured by the same staleness thresholds as the
   list below so the two can never disagree.
   ========================================================================= */
.mapsec {
  background: var(--paper);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.mapsec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mapsec__title {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.mapsec__actions { display: flex; align-items: center; gap: 10px; }

.map-run + .map-run { margin-top: 16px; }
.map-run__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}
.map-run__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  border: 1px solid var(--steel-200);
  border-radius: 999px;
  padding: 1px 7px;
}
/* Horizontal scroll rather than wrapping: a run is a physical row, and
   breaking it across lines would misrepresent the room. */
.map-run__slots {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.map-slot {
  position: relative;
  flex: 0 0 auto;
  width: 74px;
  height: 66px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  padding: 4px;
}
.map-slot__label {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  text-align: center;
  word-break: break-word;
}
.map-slot__ago {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: .85;
}
.map-slot__wb {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 12px;
  line-height: 1;
  opacity: .95;
}
.map-slot:hover { filter: brightness(.96); }
.map-slot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.map-slot--green  { background: var(--go-tint);      color: var(--go-ink);      border-color: var(--go); }
.map-slot--yellow { background: var(--warn-tint);    color: var(--warn-ink);    border-color: var(--warn); }
.map-slot--orange { background: var(--caution-tint); color: var(--caution-ink); border-color: var(--caution); }
.map-slot--red    { background: var(--stop-tint);    color: var(--stop-ink);    border-color: var(--stop); }
.map-slot--grey   { background: var(--steel-100);    color: var(--ink-mute);    border-color: var(--steel-300); }
/* No cage linked yet — an outline, so a gap in the map is obvious. */
.map-slot--none {
  background: transparent;
  color: var(--ink-mute);
  border: 1px dashed var(--steel-300);
}

.mapsec__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--steel-100);
  font-size: 12px;
  color: var(--ink-mute);
}
.map-key { display: flex; align-items: center; gap: 6px; }
.map-key::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid var(--steel-300);
}
.map-key--green::before  { background: var(--go-tint);      border-color: var(--go); }
.map-key--yellow::before { background: var(--warn-tint);    border-color: var(--warn); }
.map-key--orange::before { background: var(--caution-tint); border-color: var(--caution); }
.map-key--red::before    { background: var(--stop-tint);    border-color: var(--stop); }
.map-key--grey::before   { background: var(--steel-100); }
.map-key--wb::before     { display: none; }

.map-empty {
  text-align: center;
  padding: 18px 10px 6px;
  color: var(--ink-mute);
}
.map-empty p { max-width: 460px; margin: 0 auto 14px; line-height: 1.5; }

/* ---- Map editor ---- */
.modal--wide .modal__inner { max-width: 720px; }
.map-edit-run {
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
}
.map-edit-run__head {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.map-edit-run__head label { display: flex; flex-direction: column; font-size: 12px; gap: 4px; }
.map-edit-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
}
.map-edit-slot {
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-edit-slot__n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  width: 18px;
  text-align: right;
}
.map-edit-slot input[data-slot-label] { flex: 1 1 auto; min-width: 0; }

@media (max-width: 640px) {
  .map-slot { width: 64px; height: 60px; }
  .map-slot__label { font-size: 14px; }
}

/* A section square (Promo, Eggs) holds several cages, so it is wider and
   carries the count in its corner. */
.map-slot--section { width: 104px; }
.map-slot__holds {
  position: absolute;
  top: 3px;
  left: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
}
.map-edit-legend {
  display: none;
}
@media (min-width: 720px) {
  .map-edit-legend {
    display: grid;
    grid-template-columns: 18px 1fr 110px 62px;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-mute);
    margin-bottom: 4px;
    padding-left: 24px;
  }
}
.map-edit-slot input[data-slot-cages] { width: 104px; flex: 0 0 auto; }
.map-edit-slot input[data-slot-holds] { width: 56px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .map-slot--section { width: 92px; }
}

/* Map editor: assigning a cage to a square. Cage numbers mean nothing on
   their own, so every chip and option carries the cage's name too. */
.map-edit-slots { grid-template-columns: 1fr; }
.map-edit-slot {
  display: block;
  border: 1px solid var(--steel-100);
  border-radius: var(--radius-sm);
  padding: 8px;
}
.map-edit-slot__top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-edit-slot__top input[data-slot-label] { flex: 1 1 auto; min-width: 0; }
.map-edit-slot__holds {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-mute);
  flex: 0 0 auto;
}
.map-edit-slot__holds input { width: 56px; }
.map-edit-slot__cages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-left: 24px;
}
.cage-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  background: var(--steel-050);
  border: 1px solid var(--steel-200);
  border-radius: 999px;
  padding: 3px 4px 3px 9px;
  max-width: 100%;
}
.cage-chip b { font-family: var(--font-mono); }
.cage-chip--none {
  color: var(--ink-mute);
  font-style: italic;
  border-style: dashed;
  padding-right: 9px;
}
.cage-chip button {
  border: none;
  background: transparent;
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.cage-chip button:hover { color: var(--stop-ink); }
.map-edit-slot__cages select { max-width: 100%; }

/* Grid and flex children don't shrink below their content unless told to, so
   on a phone the editor rows grew wider than the dialog and clipped. */
.map-edit-run,
.map-edit-slots > .map-edit-slot,
.map-edit-slot__top,
.map-edit-slot__cages { min-width: 0; }
.map-edit-slot__top input[data-slot-label] { width: 100%; min-width: 0; }
.map-edit-slot__cages select {
  flex: 1 1 150px;
  min-width: 0;
  max-width: 100%;
}
.cage-chip { min-width: 0; }
@media (max-width: 480px) {
  .map-edit-slot__cages { padding-left: 0; }
  .map-edit-run__head label { flex: 1 1 120px; }
  .map-edit-run__head input { width: 100%; }
}

/* Per-square controls: move along the run, insert after, remove. */
.map-edit-slot__ops {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 8px;
}
.map-edit-slot__ops button {
  width: 32px;
  height: 30px;
  border: 1px solid var(--steel-200);
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}
.map-edit-slot__ops button:hover:not(:disabled) { background: var(--steel-050); }
.map-edit-slot__ops button:disabled { opacity: .35; cursor: default; }
.map-edit-slot__ops button.is-remove:hover { color: var(--stop-ink); border-color: var(--stop); }
.map-edit-run__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  border: 1px solid var(--steel-200);
  border-radius: 999px;
  padding: 2px 9px;
  align-self: center;
}
.map-edit-run__foot { margin-top: 10px; }
.map-run__none {
  font-size: 12px;
  color: var(--ink-mute);
  border: 1px dashed var(--steel-200);
  border-radius: var(--radius-sm);
  padding: 12px;
}

/* Choosing which cage in a section square to open. */
.pick-cage-list { display: flex; flex-direction: column; gap: 6px; }
.pick-cage {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
}
.pick-cage:hover { background: var(--steel-050); }
.pick-cage__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  min-width: 34px;
}
.pick-cage__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick-cage__label { font-weight: 600; }
.pick-cage__meta { font-size: 12px; color: var(--ink-mute); }

/* Devices grouped by name: one row per person, expandable to the individual
   device ids behind it. */
.dev-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
}
.dev-sub {
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-mute);
}
.dev-members {
  margin-top: 10px;
  border-top: 1px solid var(--steel-100);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dev-member {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-mute);
}
.dev-member code {
  font-family: var(--font-mono);
  background: var(--steel-050);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--ink-soft);
}
.dev-member span { flex: 1 1 200px; min-width: 0; }

/* Links to the legal documents. Present, not shouting. */
.app__legal {
  margin: 28px 0 8px;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.7;
}
.app__legal a { color: var(--ink-soft); }
.auth__legal {
  margin: 16px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-align: center;
}
.auth__legal a { color: rgba(255,255,255,.85); }

/* Clearing data: visibly a different kind of control from the rest. */
.panel--danger { border-color: var(--stop); }
.panel--danger .panel__title { color: var(--stop-ink); }
.reset-opts { display: flex; flex-direction: column; gap: 10px; }
.reset-opts label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.reset-opts label:hover { background: var(--steel-050); }
.reset-opts input { margin-top: 3px; flex: 0 0 auto; }
.reset-opts small { color: var(--ink-mute); line-height: 1.45; }
.reset-opts input:disabled + span { opacity: .45; }
.reset-opts__nuke {
  border-color: var(--stop) !important;
  background: var(--stop-tint);
}
.reset-opts__nuke:hover { background: var(--stop-tint) !important; }

/* =========================================================================
   IN-STORE LOOK
   A presentation layer only — no markup changed, no behaviour changed. It
   restyles the shell (bars, cards, chips, buttons, headings) to sit with the
   Coles apps staff already use. Every colour that carries meaning still
   carries it: green is worked, red is stop, the staleness palette is intact.
   ========================================================================= */

/* ---- Type: heavy sans for display, mono kept only where it aids scanning --- */
.app__title,
.stat__value,
.stat__label,
.panel__title,
.mapsec__title,
.chip,
.badge,
.area-chip,
.store-badge,
.cage__num,
.map-slot__label,
.flags__title {
  font-family: var(--font-sans);
}
.app__title {
  font-weight: 800;
  letter-spacing: .04em;
}
.panel__title,
.mapsec__title,
.flags__title {
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
  font-size: 17px;
  color: var(--ink);
}

/* ---- Top bar ------------------------------------------------------------- */
.app__bar {
  background: #2b2b2b;
  padding-left: 16px;
  padding-right: 16px;
  gap: 10px;
}
.app__refresh {
  font-family: var(--font-sans);
  letter-spacing: .02em;
  text-transform: none;
  font-size: 12px;
}
.app__bar .btn--ghost {
  border-radius: 999px;
  padding: 7px 14px;
}

/* ---- Cards: white, generously rounded, separated by the ground ----------- */
.stat,
.panel,
.mapsec,
.flags,
.card {
  border-color: transparent;
  box-shadow: var(--shadow-1);
}
.stat { padding: 18px 18px 16px; }
.stat__value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.stat__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  margin-top: 4px;
}
/* The coloured edge still marks a stat that needs attention. */
.stat--warn, .stat--stop, .stat--flag { border-radius: var(--radius); }

/* ---- Pills: outlined by default, solid black when active ----------------- */
.chip,
.area-chip,
.store-badge {
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 999px;
}
.chip {
  font-size: 12px;
  padding: 8px 15px;
  border-color: var(--steel-300);
  color: var(--ink-soft);
}
.chip.is-active {
  background: #1a1a1a;
  border-color: #1a1a1a;
}
.area-chip { padding: 7px 16px; font-size: 12px; }

/* ---- Buttons: pill shaped, and yellow is the one action ------------------ */
.btn {
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  border-color: var(--steel-300);
}
.btn--sm { padding: 7px 14px; font-size: 13px; }
.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
}
.btn--primary:hover { background: var(--brand-hover); }
.btn--primary:focus-visible { outline-color: var(--ink); }

/* ---- Status badges: solid pills, like the Active tag in the store apps ---- */
.badge {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--go);
  color: #fff;
}
.badge--disabled { background: #1a1a1a; }
.badge--notice   { background: var(--stop); }

/* ---- Cage rows ----------------------------------------------------------- */
.cage {
  border-radius: var(--radius);
  border-color: transparent;
}
.cage__num {
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---- Inputs -------------------------------------------------------------- */
.field,
.search input,
input[type="text"], input[type="number"], input[type="password"], select, textarea {
  border-radius: var(--radius-sm);
}
.search input { border-radius: 999px; padding-left: 18px; }

/* ---- Map --------------------------------------------------------------- */
.map-slot { border-radius: 14px; }
.map-slot__label { font-weight: 800; }

/* ---- Modals ------------------------------------------------------------- */
.modal__inner { border-radius: 20px; }

/* Keep a panel heading and its action on one line, as the store apps do. */
.mapsec__head { flex-wrap: nowrap; gap: 10px; }
.mapsec__title { flex: 1 1 auto; min-width: 0; }
.mapsec__actions { flex: 0 0 auto; }

/* Row actions: keep the pill shape but not the bulk — a cage row carries seven
   of these, and on a phone the extra padding cost a whole line each. */
.cage__actions .btn--sm,
.manage-row__actions .btn--sm {
  padding: 6px 12px;
  font-size: 12.5px;
}

/* ---- Scan screen: same heavy sans as the rest, no monospaced status-board -- */
.scan__eyebrow,
.scan__cage,
.scan__cage span,
.scan__label,
.scan__status,
.minibar {
  font-family: var(--font-sans);
}
.scan__eyebrow {
  font-weight: 700;
  letter-spacing: .12em;
}
.scan__cage {
  font-weight: 800;
  letter-spacing: -.03em;
  text-shadow: none;
}
.scan__cage span { font-weight: 700; letter-spacing: .1em; }
.scan__label { font-weight: 700; }
.scan__status { font-weight: 700; }
.minibar { letter-spacing: .06em; }
/* The staff prompts read as pills, matching the buttons everywhere else. */
.report__open {
  border-radius: 999px;
  font-weight: 600;
  padding: 11px 20px;
}
.report__send, .report__cancel { border-radius: 999px; font-weight: 700; }
.report__input { border-radius: var(--radius-sm); }
.scan__time, .scan__receipt { font-family: var(--font-sans); }
.scan__time { font-weight: 600; letter-spacing: 0; }
.scan__receipt { letter-spacing: .1em; font-weight: 600; }

/* ---- Sign-in --------------------------------------------------------------- */
.store-opt, .card__step {
  font-family: var(--font-sans);
}
.store-opt { font-weight: 800; border-radius: var(--radius); }
.card__step { font-weight: 700; letter-spacing: .1em; }
.card { border-radius: 20px; }


/* ---- Secure tag section of the Link dialog (NTAG 424 DNA) ---- */
.securetag { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line, #d7dee5); }
.securetag__title { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.securetag__status { font-size: 13px; margin: 0 0 8px; }
.securetag__list { list-style: none; margin: 0 0 10px; padding: 0; }
.securetag__item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; font-size: 13px; border-top: 1px solid var(--line, #d7dee5); }
.securetag__item b { font-family: var(--font-mono); font-weight: 600; }
.securetag__how summary { cursor: pointer; font-size: 13px; font-weight: 700; padding: 4px 0; }
.securetag__how p { font-size: 13px; margin: 6px 0 10px; }
.securetag__how .linkbox__url { word-break: break-all; }
.securetag__btns { display: flex; gap: 6px; flex-shrink: 0; }