/* ==========================================================================
   Mobile Shop - "Counter"

   A shop counter has two directions and the whole interface encodes them:
   stock coming IN is slate blue, stock going OUT is pine. That duotone is the
   only decoration, and it always means something.

   Type: Archivo for signage and headings, IBM Plex Sans for reading,
   IBM Plex Mono wherever digits must line up - money, SKUs, invoice numbers.
   ========================================================================== */

/* --- Tokens: light is the base, dark redefines only the values ----------- */

:root {
  /* Tells the browser to draw its own furniture - scrollbars, the date picker,
     spin buttons - to match. Without it those stay stubbornly light and a dark
     page ends up with a white calendar popup hanging off it. */
  color-scheme: light;

  --ground: #f4f6f4;
  --surface: #ffffff;
  --sunken: #eaeeeb;
  --raised: #ffffff;

  --ink: #101816;
  --ink-strong: #060b0a;
  --ink-muted: #5a6862;
  --ink-faint: #8a978f;

  --line: #dde4df;
  --line-strong: #c6d0c9;

  --accent: #0b5d4f;
  --accent-hover: #094a3f;
  --accent-ink: #ffffff;
  --accent-soft: #e2efea;
  --accent-soft-ink: #084a3e;

  /* Direction of stock movement. */
  --in: #1f5da4;
  --in-soft: #e4edf8;
  --in-ink: #17497f;
  --out: #0b5d4f;
  --out-soft: #e2efea;
  --out-ink: #084a3e;

  /* State, kept separate from the accent. */
  --ok: #157a5c;
  --ok-soft: #e0f0e9;
  --warn: #9c5a00;
  --warn-soft: #fbeeda;
  --crit: #a3271e;
  --crit-soft: #f9e5e2;

  --focus: #1f8f77;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 22, 0.06);
  --shadow: 0 2px 8px rgba(16, 24, 22, 0.07), 0 1px 2px rgba(16, 24, 22, 0.05);
  --shadow-lg: 0 12px 32px rgba(16, 24, 22, 0.14);

  --rail: 236px;

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ground: #0d1211;
    --surface: #151b19;
    --sunken: #111716;
    --raised: #1b2321;

    --ink: #e5ebe8;
    --ink-strong: #f4f8f6;
    --ink-muted: #93a29b;
    --ink-faint: #6d7b75;

    --line: #263130;
    --line-strong: #37443f;

    --accent: #2fb497;
    --accent-hover: #45c3a8;
    --accent-ink: #04231d;
    --accent-soft: #14312a;
    --accent-soft-ink: #7fd9c2;

    --in: #6aa6ec;
    --in-soft: #17273c;
    --in-ink: #a6cbf5;
    --out: #2fb497;
    --out-soft: #14312a;
    --out-ink: #7fd9c2;

    --ok: #4cc79e;
    --ok-soft: #14312a;
    --warn: #d99b3f;
    --warn-soft: #33260f;
    --crit: #e5817a;
    --crit-soft: #3a1d1a;

    --focus: #4cd0b0;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ground: #0d1211;
  --surface: #151b19;
  --sunken: #111716;
  --raised: #1b2321;

  --ink: #e5ebe8;
  --ink-strong: #f4f8f6;
  --ink-muted: #93a29b;
  --ink-faint: #6d7b75;

  --line: #263130;
  --line-strong: #37443f;

  --accent: #2fb497;
  --accent-hover: #45c3a8;
  --accent-ink: #04231d;
  --accent-soft: #14312a;
  --accent-soft-ink: #7fd9c2;

  --in: #6aa6ec;
  --in-soft: #17273c;
  --in-ink: #a6cbf5;
  --out: #2fb497;
  --out-soft: #14312a;
  --out-ink: #7fd9c2;

  --ok: #4cc79e;
  --ok-soft: #14312a;
  --warn: #d99b3f;
  --warn-soft: #33260f;
  --crit: #e5817a;
  --crit-soft: #3a1d1a;

  --focus: #4cd0b0;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6);
}

/* --- Base --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* --- Scrollbars ---------------------------------------------------------

   Left alone, these are the one part of the interface Windows still draws
   itself: a wide grey trough with arrow buttons on the ends, which is why the
   application can look a decade old in an otherwise current layout.

   Both syntaxes are here because neither covers everything on its own. The
   standard properties are what current Chromium and Firefox actually obey, and
   they inherit, so setting them once on the root reaches the sidebar, the table
   wrappers and the dropdowns without naming any of them. The ::-webkit- rules
   underneath carry older Chromium and Safari, where the standard pair does
   nothing. On a browser that supports both, the standard ones win - which is
   why the two are tuned to land in the same place rather than fight.

   Every colour is an existing token, so this follows the light and dark themes,
   and any future retheme, without being touched again.
   ------------------------------------------------------------------------ */

:root {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;

  /* A transparent border plus padding-box clipping insets the thumb inside the
     gutter, so it reads as a floating pill rather than a bar wedged against the
     window edge. Plain width alone cannot do this. */
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint);
  background-clip: padding-box;
}

/* Where a pane scrolls both ways, the square between the two bars. Left as the
   default it is an opaque grey notch sitting on a themed panel. */
::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ink-strong);
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

h2 {
  font-size: 1.0625rem;
  font-weight: 600;
}

h3 {
  font-size: 0.9375rem;
  font-weight: 600;
}

p {
  margin: 0 0 0.75rem;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.muted {
  color: var(--ink-muted);
}

.faint {
  color: var(--ink-faint);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
}

/* --- Shell -------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.125rem 0.875rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.375rem;
  text-decoration: none;
  color: inherit;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  flex: none;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--ink-strong);
}

.brand-sub {
  font-size: 0.6875rem;
  color: var(--ink-faint);
  line-height: 1.2;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-group > .eyebrow {
  padding: 0 0.5rem 0.3125rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 0.8125rem;
  border-left: 2px solid transparent;
}

.nav-link:hover {
  background: var(--sunken);
  color: var(--ink);
  text-decoration: none;
}

.nav-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke-width: 1.75;
}

.nav-link.is-active {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  border-left-color: var(--accent);
  font-weight: 600;
}

.nav-link.is-in.is-active {
  background: var(--in-soft);
  color: var(--in-ink);
  border-left-color: var(--in);
}

.nav-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 0.0625rem 0.3125rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
}

/* --- Theme toggle ------------------------------------------------------- */

/* Three states rather than two, because "follow the system" is a real answer
   and the commonest correct one: the till should go dark in the evening on its
   own if the machine does. */
.theme-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.theme-option {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  padding: 0.3125rem 0;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: var(--ink-faint);
  cursor: pointer;
  line-height: 0;
}

.theme-option:hover {
  background: var(--surface);
  color: var(--ink);
}

.theme-option svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.75;
}

.theme-option[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* On the sign-in page there is no rail, so it floats in the corner. */
.theme-toggle.is-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 108px;
  background: var(--surface);
}

.rail-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.375rem;
}

.who-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sunken);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-muted);
  flex: none;
}

.who-name {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
}

.who-role {
  font-size: 0.6875rem;
  color: var(--ink-faint);
}

/* --- Main --------------------------------------------------------------- */

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.content {
  padding: 1.75rem 2rem 3rem;
  max-width: 1440px;
  width: 100%;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.page-head p {
  margin: 0.25rem 0 0;
  color: var(--ink-muted);
  max-width: 62ch;
}

.head-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.5625rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.9;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-in {
  background: var(--in);
  color: #fff;
}

.btn-in:hover {
  filter: brightness(1.08);
}

.btn-quiet {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-quiet:hover {
  background: var(--sunken);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-muted);
  padding: 0.375rem 0.5rem;
}

.btn-ghost:hover {
  background: var(--sunken);
  color: var(--ink);
}

.btn-danger {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--crit);
}

.btn-danger:hover {
  background: var(--crit-soft);
  border-color: var(--crit);
}

.btn-sm {
  padding: 0.3125rem 0.5rem;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* --- Panels ------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--line);
}

.panel-body {
  padding: 1.125rem;
}

.panel-body.tight {
  padding: 0;
}

.panel-foot {
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--line);
  background: var(--sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.grid {
  display: grid;
  gap: 1rem;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- Stat tiles --------------------------------------------------------- */

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  position: relative;
  overflow: hidden;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--line-strong);
}

.tile.is-out::before {
  background: var(--out);
}

.tile.is-in::before {
  background: var(--in);
}

.tile.is-warn::before {
  background: var(--warn);
}

.tile.is-crit::before {
  background: var(--crit);
}

.tile-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink-strong);
  letter-spacing: -0.02em;
}

.tile-value .unit {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  font-weight: 400;
}

.tile-note {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

/* --- Tables ------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

table.data thead th {
  background: var(--sunken);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

table.data thead th.num {
  text-align: right;
}

table.data tbody td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

table.data tbody tr:last-child td {
  border-bottom: 0;
}

table.data tbody tr:hover {
  background: var(--sunken);
}

table.data tfoot td {
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--line-strong);
  background: var(--sunken);
  font-weight: 600;
}

td.tight,
th.tight {
  width: 1%;
  white-space: nowrap;
}

.cell-primary {
  font-weight: 500;
  color: var(--ink-strong);
}

.cell-sub {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* A hairline severity stripe, so a row that needs attention reads at a glance. */
tr.row-warn td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}

tr.row-crit td:first-child {
  box-shadow: inset 3px 0 0 var(--crit);
}

tr.is-archived td {
  opacity: 0.6;
}

/* --- Product pictures --------------------------------------------------- */

/* A photo of a handset is nearly always portrait and a photo of a cable is
   nearly always landscape, so every thumbnail is a fixed square and the image is
   contained rather than cropped. Nothing gets its edges cut off. */
.thumb {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--sunken);
  object-fit: contain;
  display: block;
}

.thumb-pick {
  width: 36px;
  height: 36px;
}

.thumb-lg {
  width: 148px;
  height: 148px;
  border-radius: var(--radius-lg);
}

/* No photo yet: a category glyph rather than a broken image or empty space. */
.thumb-empty {
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--sunken) 0 5px,
      transparent 5px 10px
    ),
    var(--surface);
}

.thumb-empty svg {
  width: 45%;
  height: 45%;
  stroke-width: 1.4;
}

.cell-with-thumb {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.picture-field {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.picture-controls {
  flex: 1 1 240px;
  min-width: 0;
}

input[type="file"] {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--ink-muted);
  width: 100%;
}

input[type="file"]::file-selector-button {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.4375rem 0.75rem;
  margin-right: 0.625rem;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--sunken);
}

/* --- Pills -------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.1875rem 0.4375rem;
  border-radius: 4px;
  white-space: nowrap;
}

.pill-ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.pill-warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.pill-crit {
  background: var(--crit-soft);
  color: var(--crit);
}

.pill-in {
  background: var(--in-soft);
  color: var(--in-ink);
}

.pill-out {
  background: var(--out-soft);
  color: var(--out-ink);
}

.pill-neutral {
  background: var(--sunken);
  color: var(--ink-muted);
}

/* --- Filters ------------------------------------------------------------ */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.625rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--line);
}

.filters .field {
  margin: 0;
}

.chips {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.chip {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  background: var(--surface);
}

.chip:hover {
  background: var(--sunken);
  text-decoration: none;
}

.chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* --- Forms -------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  margin-bottom: 0.875rem;
}

.field > label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

.hint {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.625rem;
  width: 100%;
  min-width: 0;
}

input[type="number"],
input.money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

textarea {
  resize: vertical;
  min-height: 68px;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
}

input:disabled,
select:disabled {
  background: var(--sunken);
  color: var(--ink-faint);
}

.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.875rem;
}

.form-grid .field {
  margin-bottom: 0;
}

.span-2 {
  grid-column: span 2;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-top: 0.25rem;
}

.form-narrow {
  max-width: 520px;
}

.field-error,
.text-danger,
span.field-validation-error {
  display: block;
  font-size: 0.75rem;
  color: var(--crit);
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
  border-color: var(--crit);
}

/* --- Notices ------------------------------------------------------------ */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
}

.notice svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
}

.notice-success {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
}

.notice-warning {
  background: var(--warn-soft);
  border-color: var(--warn);
  color: var(--warn);
}

.notice-error {
  background: var(--crit-soft);
  border-color: var(--crit);
  color: var(--crit);
}

.notice-info {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-soft-ink);
}

.notice ul {
  margin: 0;
  padding-left: 1.125rem;
}

.validation-summary-valid {
  display: none;
}

/* --- Empty state -------------------------------------------------------- */

.empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-muted);
}

.empty h3 {
  margin-bottom: 0.25rem;
}

.empty p {
  max-width: 44ch;
  margin: 0 auto 1rem;
}

/* --- Pager -------------------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.pager-links {
  display: flex;
  gap: 0.25rem;
}

.pager-links a,
.pager-links span {
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 500;
}

.pager-links a:hover {
  background: var(--sunken);
  text-decoration: none;
}

.pager-links span {
  opacity: 0.45;
}

/* --- Revenue chart (plain divs; no library for ten bars) ---------------- */

.chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 132px;
  padding-top: 0.5rem;
}

.chart-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  height: 100%;
}

.chart-bar {
  width: 100%;
  background: var(--out-soft);
  border-top: 2px solid var(--out);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  position: relative;
}

.chart-col.is-peak .chart-bar {
  background: var(--out);
  border-top-color: var(--out);
}

.chart-col.is-zero .chart-bar {
  background: var(--sunken);
  border-top: 1px dashed var(--line-strong);
}

.chart-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 0.375rem;
  margin-top: 0.25rem;
}

/* --- Till: the two-pane counter ---------------------------------------- */

.till {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 1rem;
  align-items: start;
}

.picker-results {
  max-height: 460px;
  overflow-y: auto;
}

.pick {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.625rem 1.125rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
}

.pick:hover,
.pick:focus-visible {
  background: var(--accent-soft);
}

.pick-body {
  min-width: 0;
  flex: 1;
}

.pick-name {
  font-weight: 500;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-faint);
}

.pick-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.basket {
  position: sticky;
  top: 1rem;
}

.basket-lines {
  max-height: 340px;
  overflow-y: auto;
}

.basket-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 96px 28px;
  gap: 0.375rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.basket-line input {
  padding: 0.3125rem 0.375rem;
  font-size: 0.75rem;
}

.basket-name {
  min-width: 0;
}

.basket-name .n {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.basket-name .s {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--ink-faint);
}

.basket-drop {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  line-height: 0;
}

.basket-drop:hover {
  background: var(--crit-soft);
  color: var(--crit);
}

/* Services and one-off costs. Marked with a rail in the accent rather than the
   stock colour, because the whole point is that these lines move no stock. */
.basket-line.is-service {
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--accent-soft);
}

.service-block {
  border-top: 1px solid var(--line);
  padding: 0.75rem 0 0;
}

.service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 1.125rem 0.375rem;
}

.service-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 88px auto;
  gap: 0.375rem;
  align-items: center;
  padding: 0.5rem 1.125rem 0.75rem;
}

.service-add.no-cost {
  grid-template-columns: minmax(0, 1fr) 88px auto;
}

.service-add input {
  padding: 0.4375rem 0.5rem;
  font-size: 0.75rem;
}

.service-empty {
  padding: 0 1.125rem 0.5rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.totals {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.8125rem;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.totals-row > span:first-child {
  color: var(--ink-muted);
}

.totals-row .v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.totals-row.grand {
  border-top: 1px solid var(--line-strong);
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink-strong);
}

.totals-row.grand .v {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.totals-row.change .v {
  color: var(--ok);
  font-weight: 600;
}

.totals-row.due .v {
  color: var(--crit);
  font-weight: 600;
}

/* --- Receipt / invoice -------------------------------------------------- */

.receipt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow);
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}

/* The torn top edge of a docket. Decoration, but it says "this is a receipt". */
.receipt::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 6px;
  background:
    repeating-radial-gradient(circle at 6px 0, var(--ground) 0 4px, transparent 4px 8px);
  background-size: 12px 6px;
}

.receipt-head {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.75rem 1.75rem 1.25rem;
  border-bottom: 2px solid var(--ink-strong);
}

.receipt-shop h2 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.receipt-shop address {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.55;
  margin-top: 0.25rem;
}

.receipt-doc {
  text-align: right;
}

.receipt-kind {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.1875rem 0.4375rem;
  border-radius: 3px;
}

.receipt-kind.out {
  background: var(--out-soft);
  color: var(--out-ink);
}

.receipt-kind.in {
  background: var(--in-soft);
  color: var(--in-ink);
}

.receipt-number {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 500;
  margin-top: 0.375rem;
  color: var(--ink-strong);
}

.receipt-date {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.receipt-parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 1.5rem;
  padding: 1.125rem 1.75rem;
  border-bottom: 1px solid var(--line);
}

.receipt-party .eyebrow {
  display: block;
  margin-bottom: 0.1875rem;
}

.receipt-party .v {
  font-weight: 500;
  color: var(--ink-strong);
}

.receipt-lines {
  padding: 0 0.75rem;
}

.receipt-lines table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.receipt-lines th {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  padding: 0.625rem 0.5rem;
  border-bottom: 1px solid var(--line);
}

.receipt-lines th.num {
  text-align: right;
}

.receipt-lines td {
  padding: 0.5rem;
  border-bottom: 1px dotted var(--line);
  vertical-align: top;
}

.receipt-lines tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}

.receipt-foot {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.75rem 1.75rem;
}

.receipt-notes {
  font-size: 0.75rem;
  color: var(--ink-muted);
  max-width: 40ch;
}

.receipt-totals {
  min-width: 250px;
  margin-left: auto;
}

/* --- Cash drawer -------------------------------------------------------
   Laid out as the arithmetic it is - opening + in - out = expected - because
   a column of four unrelated figures does not show anyone how the total was
   arrived at, and the whole point is being able to check it. */

.drawer-flow {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.drawer-step {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.75rem 0.875rem;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.drawer-step.is-expected {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.drawer-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}

.drawer-note {
  font-size: 0.6875rem;
  color: var(--ink-faint);
}

.drawer-op {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink-faint);
  flex: 0 0 0.75rem;
}

.drawer-result {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  border: 1px solid;
}

.drawer-result > div {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.drawer-result.is-ok {
  background: var(--ok-soft);
  border-color: var(--ok);
}

.drawer-result.is-short {
  background: var(--crit-soft);
  border-color: var(--crit);
}

.drawer-result.is-over {
  background: var(--warn-soft);
  border-color: var(--warn);
}

.drawer-signoff {
  margin-left: auto;
  text-align: right;
  font-size: 0.8125rem;
}

.drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.drawer-form {
  display: flex;
  gap: 0.625rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.drawer-opening summary {
  font-size: 0.75rem;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0.25rem 0;
}

.drawer-opening summary:hover {
  color: var(--ink);
}

/* --- Payment ledger on a document ------------------------------------- */

.ledger {
  border-top: 1px solid var(--line);
  padding: 1.125rem 1.75rem;
  background: var(--sunken);
}

.ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78125rem;
}

.ledger-table th {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 0.3125rem 0.5rem;
  border-bottom: 1px solid var(--line-strong);
}

.ledger-table th.num {
  text-align: right;
}

.ledger-table td {
  padding: 0.4375rem 0.5rem;
  border-bottom: 1px dotted var(--line-strong);
  vertical-align: top;
}

.ledger-table tbody tr:last-child td {
  border-bottom: 1px solid var(--line-strong);
}

.ledger-table tfoot td {
  padding: 0.4375rem 0.5rem;
  font-weight: 600;
}

.ledger-table tfoot tr.ledger-due td {
  color: var(--crit);
  border-top: 1px solid var(--line-strong);
}

.receipt-signoff {
  border-top: 1px solid var(--line);
  padding: 0.875rem 1.75rem 1.25rem;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Sign-in ------------------------------------------------------------ */

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--accent-soft), transparent 62%),
    var(--ground);
}

.gate-card {
  width: 100%;
  max-width: 384px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem;
}

.gate-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  .till {
    grid-template-columns: minmax(0, 1fr);
  }

  .basket {
    position: static;
  }
}

@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar {
    display: flex;
  }

  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: 268px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: var(--shadow-lg);
  }

  .rail.is-open {
    transform: translateX(0);
  }

  .rail-scrim {
    position: fixed;
    inset: 0;
    background: rgba(6, 11, 10, 0.45);
    z-index: 30;
  }

  .content {
    padding: 1.25rem 1rem 3rem;
  }

  .page-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- Print: only the document ------------------------------------------ */

@media print {
  /* Paper is always light. Without this reset, printing an invoice while the
     screen is in dark mode puts dark panels and pale hairlines onto the page,
     which wastes ink and prints borders nobody can see. Resetting the tokens
     fixes every component at once rather than overriding them one by one. */
  :root {
    color-scheme: light;

    --ground: #ffffff;
    --surface: #ffffff;
    --sunken: #f4f4f4;
    --raised: #ffffff;

    --ink: #000000;
    --ink-strong: #000000;
    --ink-muted: #333333;
    --ink-faint: #666666;

    --line: #cccccc;
    --line-strong: #999999;

    --accent: #0b5d4f;
    --accent-soft: #eef4f2;
    --accent-soft-ink: #0b5d4f;

    --in: #1f5da4;
    --in-soft: #eef2f8;
    --in-ink: #1f5da4;
    --out: #0b5d4f;
    --out-soft: #eef4f2;
    --out-ink: #0b5d4f;

    --ok: #157a5c;
    --ok-soft: #eef5f2;
    --warn: #7a4600;
    --warn-soft: #f8f2e8;
    --crit: #8f1f18;
    --crit-soft: #f8eeed;

    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: none;
  }

  .rail,
  .topbar,
  .no-print,
  .rail-scrim,
  .theme-toggle {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .shell {
    display: block;
  }

  .content {
    padding: 0;
    max-width: none;
  }

  .receipt {
    border: 0;
    box-shadow: none;
    max-width: none;
    margin: 0;
  }

  .receipt::before {
    display: none;
  }

  .receipt-head {
    border-bottom: 1.5pt solid #000;
  }

  .receipt-lines td,
  .receipt-lines th {
    border-color: #999;
  }

  .ledger {
    background: none;
    border-top: 1px solid #999;
  }

  .ledger-table td,
  .ledger-table th {
    border-color: #999;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  @page {
    margin: 12mm;
  }
}