/* 锦合 De Luxe Circle: black, gold and cream, the colours of the company logo.

   Two layouts.
   Phone:   the bar with the store is at the top, the pages are at the bottom of the screen
            (within reach of the thumb), a form fills the screen, a table is a list of cards.
   Desktop: from 1000px wide the bar is a column at the left, tables are real tables and the
            Transfer page has two columns.

   Many workers need large print. Every size is in rem, so the text size setting
   (Standard / Large / Extra large, "Large" to start with) scales the whole screen. */

:root {
  color-scheme: light dark;
  --ink: #1f1f1f;
  --gold: #faa805;
  --cream: #fbf8ef;

  --bg: #f4efe2;
  --surface: #ffffff;
  --stripe: #faf6ec;
  --hover: #f3ecd9;
  --text: #1a1a1a;
  --muted: #56514a;
  --border: #ddd5c3;
  --line: #8c8372;          /* edge of inputs and buttons: has to be easy to see */
  --accent: var(--gold);
  --accent-edge: #b87900;
  --on-accent: #1f1f1f;
  --selected: #1f1f1f;
  --on-selected: #ffffff;
  --focus: #1f1f1f;
  --on-solid: #ffffff;
  --in: #0f6b31;
  --in-bg: #dff5e5;
  --out: #b3211b;
  --out-bg: #fde5e2;
  --set: #8a5200;
  --set-bg: #fff0c4;
  --send: #5b21b6;
  --send-bg: #ede8fd;
  --shadow: 0 1px 3px rgba(31, 31, 31, 0.1);

  /* The bar, dialog titles and table headings are black in both themes. */
  --side-bg: #1f1f1f;
  --side-text: #fbf8ef;
  --side-muted: #d6cfbf;
  --side-line: rgba(251, 248, 239, 0.5);

  --brand-font: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --mono-font: Consolas, "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: #1f1f1f;
    --stripe: #272727;
    --hover: #33302a;
    --text: #fbf8ef;
    --muted: #cfc8b8;
    --border: #45413a;
    --line: #9a9282;
    --selected: var(--gold);
    --on-selected: #1f1f1f;
    --focus: #faa805;
    --on-solid: #121212;
    --in: #6ee797;
    --in-bg: #123d22;
    --out: #ff9c94;
    --out-bg: #4a1512;
    --set: #ffd166;
    --set-bg: #4a3300;
    --send: #cdbcff;
    --send-bg: #33205f;
    --shadow: none;
    --side-bg: #0b0b0b;
  }
}

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
html[data-text="normal"] { font-size: 100%; }
html[data-text="xlarge"] { font-size: 131.25%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.45 "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

button, input, select, textarea { font: inherit; color: inherit; }
/* A label that does not fit on one line breaks between the English and the Chinese, not inside the Chinese. */
button, .btn { cursor: pointer; word-break: keep-all; overflow-wrap: break-word; }
h2 { margin: 1.4rem 0.1rem 0.6rem; font-size: 1.2rem; line-height: 1.25; }
h2.alert-title { color: var(--out); }
.zh { font-weight: 400; }

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

input[type="search"], input[type="text"], input[type="password"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 1.1rem;
}
::placeholder { color: var(--muted); opacity: 1; font-size: 0.95rem; }
input[type="file"] { flex: 2 1 15rem; max-width: 100%; min-height: 3.25rem; padding: 0.45rem 0.6rem; border: 2px dashed var(--line); border-radius: 12px; background: var(--surface); }
input[type="file"]::file-selector-button { min-height: 2.25rem; margin-right: 0.8rem; padding: 0.3rem 0.9rem; border: 2px solid var(--line); border-radius: 10px; background: var(--stripe); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
textarea { font-family: var(--mono-font); font-size: 0.95rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--selected); }

/* ---------------------------------------------------------------- brand */

/* The company logo (static/logo.png) is black on a clear background, and the bar it sits in is
   black, so it stands on a cream tile. */
.brand-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.2rem;
  border-radius: 12px;
  background: var(--cream);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-mark.big { width: 7rem; height: 7rem; padding: 0.5rem; border-radius: 20px; }

/* ---------------------------------------------------------------- sign in */

.login { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.login-brand {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.4rem;
  padding: 1.25rem 1rem 1.1rem;
  border-bottom: 4px solid var(--gold);
  background: var(--side-bg);
  color: var(--side-text);
  text-align: center;
}
.login-brand h1 { margin: 0; font: 700 2rem/1.2 var(--brand-font); }
.login-company { margin: 0.4rem 0 0; color: var(--gold); font: 700 1.15rem/1.2 var(--brand-font); letter-spacing: 0.02em; }

.card { display: grid; gap: 0.9rem; width: min(27rem, 100%); padding: 1.25rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.card.narrow { width: min(36rem, 100%); }
.login .card { align-self: start; justify-self: center; width: min(27rem, calc(100% - 2rem)); margin: 1.25rem 0 2rem; }

.tools { display: grid; gap: 0.4rem; }
.tools-caption { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.text-size { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.text-size-btn {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 3.75rem;
  padding: 0.25rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.2;
}
/* The three letters keep their own sizes whatever size is chosen, so the choice is easy to see. */
.text-size-btn b { line-height: 1.1; }
.size-normal b { font-size: 16px; }
.size-large b { font-size: 21px; }
.size-xlarge b { font-size: 27px; }
.text-size-btn[aria-pressed="true"] { border-color: var(--selected); background: var(--selected); color: var(--on-selected); }

/* ---------------------------------------------------------------- the bar: phone */

/* Two lines: the company and the account, then the store. When the page is scrolled the first
   line moves out of view and the store stays (the bar sticks one line higher than the screen). */
.side {
  position: sticky;
  top: -3.9rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 3px solid var(--gold);
  background: var(--side-bg);
  color: var(--side-text);
}
.side :focus-visible { outline-color: var(--gold); }

.brand { flex: 1 1 0; display: flex; align-items: center; gap: 0.7rem; min-width: 0; height: 3.25rem; }
.brand-text { display: grid; min-width: 0; line-height: 1.2; }
.brand-text strong { font: 700 1.15rem/1.2 var(--brand-font); }
.brand-text span { color: var(--gold); font-size: 0.85rem; font-weight: 600; }
.brand-text strong, .brand-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The store is always on screen so nobody records stock in the wrong place. */
.store-btn {
  order: 1;
  flex: 1 1 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.25rem 0.8rem;
  border: 0;
  border-radius: 12px;
  background: var(--gold);
  color: #1f1f1f;
  text-align: left;
  line-height: 1.15;
}
.store-label { grid-column: 1; font-size: 0.8rem; font-weight: 600; }
.store-btn strong { grid-column: 1; font-size: 1.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-change { grid-column: 2; grid-row: 1 / span 2; font-size: 0.85rem; font-weight: 700; text-align: center; text-decoration: underline; }
/* An account with one place to work in has nothing to change: the bar only says where it is. */
.store-btn:disabled { cursor: default; }
.store-btn:disabled .store-change { display: none; }

.user-btn {
  flex: none;
  display: grid;
  align-content: center;
  max-width: 40%;
  height: 3.25rem;
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--side-line);
  border-radius: 12px;
  background: none;
  color: inherit;
  text-align: left;
  line-height: 1.2;
}
.user-role { color: var(--side-muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-btn strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-more, .side-tools { display: none; }

/* The pages: a bar at the bottom of the screen. The page that is open is gold. */
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 3px solid var(--gold);
  background: var(--side-bg);
}
.tabs button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 4.25rem;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--side-text);
  /* Five names have to fit across a phone, so their size also follows the width of the screen. */
  font-size: min(0.9rem, 4vw);
  font-weight: 700;
  line-height: 1.15;
}
/* A worker has three pages: there is room for larger names. */
.tabs.worker button { font-size: min(1rem, 5.5vw); }
.tabs.worker [data-tab="transfer"] { order: -1; }
.tab-icon { width: 1.6rem; height: 1.6rem; }
/* English on the first line, Chinese on the second, so five pages fit on a phone. */
.tab-label span { display: block; font-weight: 500; }
.tabs button[aria-selected="true"] { background: var(--gold); color: #1f1f1f; }
.count-badge { display: inline-block; min-width: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: #c62820; color: #ffffff; font-size: 0.8rem; font-weight: 700; line-height: 1.5rem; text-align: center; }
.tabs .count-badge { position: absolute; top: 4px; left: calc(50% + 0.5rem); }

main { max-width: 60rem; margin: 0 auto; padding: 1rem 1rem calc(6.5rem + env(safe-area-inset-bottom)); }
.page-head { display: none; }

/* ---------------------------------------------------------------- shared pieces */

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.7rem 0; }
.filters input[type="search"] { flex: 2 1 15rem; }
.filters select, .filters input[type="date"] { flex: 1 1 10rem; width: auto; }

.segments { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.8rem; }
.segment { min-height: 3rem; padding: 0.3rem 1rem; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 700; line-height: 1.2; }
.segment[aria-pressed="true"] { border-color: var(--selected); background: var(--selected); color: var(--on-selected); }

/* A tick box or one of several choices: the whole line can be tapped. */
.check { display: flex; align-items: center; gap: 0.7rem; min-height: 3.25rem; padding: 0.4rem 0.9rem; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); font-weight: 600; cursor: pointer; }
.check input { flex: none; width: 1.6rem; height: 1.6rem; }
.check:has(input:checked) { border-color: var(--selected); background: var(--stripe); }
.check small { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 400; }

.count { margin: 0.7rem 0.1rem 0.5rem; color: var(--muted); font-size: 0.95rem; }
.hint { margin: 0; color: var(--muted); font-size: 0.95rem; }
.error { margin: 0; color: var(--out); font-weight: 700; }
.empty { padding: 1.5rem 0.75rem; text-align: center; color: var(--muted); }
.code { font-family: var(--mono-font); font-weight: 700; overflow-wrap: anywhere; }
.desc { overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.pre { white-space: pre-wrap; font-family: var(--mono-font); font-size: 0.85rem; overflow-wrap: anywhere; }
pre.pre { margin: 0; padding: 0.7rem; border-radius: 12px; background: var(--bg); max-height: 50vh; overflow: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.5rem 1.1rem;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}
.btn.small { min-height: 2.75rem; padding: 0.3rem 0.8rem; font-size: 1rem; }
.btn.big { min-height: 3.75rem; font-size: 1.2rem; }
.btn.in { background: var(--in); color: var(--on-solid); }
.btn.out { background: var(--out); color: var(--on-solid); }
.btn.send { background: var(--send); color: var(--on-solid); }
.btn.primary { border-color: var(--accent-edge); background: var(--accent); color: var(--on-accent); }
.btn.primary.danger { border-color: transparent; background: var(--out); color: var(--on-solid); }
.btn.ghost { border-color: var(--line); background: var(--surface); color: var(--text); }
.btn:active { filter: brightness(0.92); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.link-btn { min-height: 2.75rem; padding: 0.25rem 0.8rem; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 700; }

.more { display: block; width: 100%; min-height: 3.25rem; margin-top: 0.8rem; border: 2px dashed var(--line); border-radius: 12px; background: none; color: var(--text); font-weight: 700; }

.badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; background: var(--bg); color: var(--muted); }
.badge.IN, .badge.RECEIVE { background: var(--in-bg); color: var(--in); }
.badge.OUT { background: var(--out-bg); color: var(--out); }
.badge.SEND, .badge.CANCEL { background: var(--send-bg); color: var(--send); }
.badge.ADJUST { background: var(--set-bg); color: var(--set); }

/* ---------------------------------------------------------------- lists of pallets and changes */

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* A gold edge at the left: this line can be tapped. */
.card-row.clickable { border-left: 6px solid var(--gold); cursor: pointer; }
.card-row.clickable:hover { background: var(--hover); }
.card-row.hit { border-color: var(--selected); box-shadow: 0 0 0 2px var(--selected); }
.card-row .code { font-size: 1.25rem; line-height: 1.25; }
.card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.list.compact .card-row { padding: 0.6rem 0.8rem; }
.list.compact .card-row .code { font-size: 1.1rem; }
.list > .empty { border: 2px dashed var(--border); border-radius: 14px; }

.qty { text-align: right; white-space: nowrap; }
.qty strong { display: block; font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.qty strong.plus { color: var(--in); }
.qty strong.minus { color: var(--out); }
.qty strong.warn { color: var(--set); }
.uom { color: var(--muted); font-size: 0.9rem; }

.action-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
.action-grid .btn { min-height: 3.75rem; padding: 0.4rem 0.5rem; }
.action-grid.big { grid-template-columns: 1fr; margin: 0 0 0.5rem; }
.action-grid.big .btn { min-height: 4.5rem; font-size: 1.4rem; }

.t-incoming { margin-bottom: 1.25rem; }
.t-incoming:empty { display: none; }
.t-incoming h2:first-child { margin-top: 0.2rem; }
input[type="search"] + .list, input[type="search"] + div { margin-top: 0.6rem; }

/* ---------------------------------------------------------------- rack */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr)); gap: 0.5rem; margin-bottom: 0.8rem; }
.stat { padding: 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.stat span { display: block; color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat strong { font-size: 1.4rem; line-height: 1.2; font-variant-numeric: tabular-nums; }

.row-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.3rem, 1fr)); gap: 0.5rem; margin: 0.8rem 0; }
.row-chip { display: grid; justify-items: center; align-content: center; min-height: 3.4rem; padding: 0.25rem 0.3rem; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); line-height: 1.2; }
.row-chip strong { font-size: 1.1rem; }
.row-chip span { color: var(--muted); font-size: 0.85rem; }
.row-chip[aria-pressed="true"] { border-color: var(--selected); background: var(--selected); color: var(--on-selected); }
.row-chip[aria-pressed="true"] span { color: inherit; }
.row-chip.hit { box-shadow: 0 0 0 3px var(--gold); }

.row-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.3rem 0 0.6rem; color: var(--muted); font-size: 0.9rem; }
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.key { flex: none; width: 1.1rem; height: 1.1rem; border: 2px solid var(--line); border-radius: 5px; background: var(--surface); }

/* A place: its name and the weight on the first line, the product on the second. */
.rack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: 0.5rem; }
.rack-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: baseline;
  gap: 2px 0.4rem;
  min-height: 4rem;
  padding: 0.4rem 0.55rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.25;
  text-align: left;
  overflow: hidden;
}
.rack-cell strong { grid-area: 1 / 1; font-size: 1.15rem; color: var(--text); }
.rack-cell small { grid-area: 1 / 2; justify-self: end; font-size: 0.85rem; white-space: nowrap; }
.rack-cell span { grid-area: 2 / 1 / 3 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.rack-cell.full, .key.full { background: var(--in-bg); border-color: var(--in); color: var(--in); }
.rack-cell.soon, .key.soon { background: var(--set-bg); border-color: var(--set); color: var(--set); }
.rack-cell.expired, .key.expired { background: var(--out-bg); border-color: var(--out); color: var(--out); }
.rack-cell.hit { box-shadow: 0 0 0 4px var(--selected); }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
/* A heading may take two or three lines (English, then Chinese), so more columns fit on the screen. */
th { min-width: 5.25rem; background: var(--side-bg); color: var(--side-text); font-size: 0.9rem; font-weight: 700; line-height: 1.25; vertical-align: bottom; word-break: keep-all; }
/* The column with the product and its description needs room to be read. */
td:has(> div > .code) { min-width: 13rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { white-space: nowrap; }
tbody tr { background: var(--surface); }
tbody tr:nth-child(even) { background: var(--stripe); }
tbody tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--hover); }
tfoot tr { background: var(--surface); }
tfoot td { border-top: 3px solid var(--line); border-bottom: 0; font-weight: 700; }
/* Log lines: an error is red, a wrong password is yellow. */
tbody tr.level-ERROR, tbody tr.level-ERROR:hover { background: var(--out-bg); color: var(--out); font-weight: 600; }
tr.level-ERROR td:first-child { box-shadow: inset 5px 0 0 var(--out); }
tbody tr.level-WARNING, tbody tr.level-WARNING:hover { background: var(--set-bg); color: var(--set); }
.count .error { font-weight: 700; }
td.empty { text-align: center; }

/* ---------------------------------------------------------------- dialogs and forms */

dialog {
  width: min(40rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog-box { display: flex; flex-direction: column; min-height: 100%; }
.dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.7rem 0.7rem 1rem;
  border-bottom: 3px solid var(--gold);
  background: var(--side-bg);
  color: var(--side-text);
}
.dialog-head h2 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.dialog-head :focus-visible { outline-color: var(--gold); }
.icon-btn { flex: none; width: 3rem; height: 3rem; border: 2px solid var(--side-line); border-radius: 12px; background: none; color: inherit; font-size: 1.9rem; line-height: 1; }
#dialogBody { flex: 1 0 auto; display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem; }
.dialog-actions { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; }
.dialog-actions.single { grid-template-columns: 1fr; }
/* The buttons that finish a form stay at the bottom of the form while it is scrolled. */
#dialogBody > .dialog-actions:last-child {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: auto -1rem -1rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.field { display: grid; gap: 0.3rem; font-weight: 600; }
.field small { color: var(--muted); font-size: 0.9rem; font-weight: 400; }
.field input, .field select, .field .hint { font-weight: 400; }
.two { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0.6rem; }
/* Pictures of products and kiosk items */
.thumb { flex: none; width: 3.5rem; height: 3.5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--stripe); object-fit: cover; }
.thumb.zoom { cursor: zoom-in; }
.with-thumb { display: flex; align-items: center; gap: 0.7rem; min-width: 0; text-align: left; }
.with-thumb > :last-child { min-width: 0; }
.photo-box { display: grid; place-items: center; min-height: 6rem; padding: 0.5rem; border: 2px dashed var(--border); border-radius: 12px; background: var(--surface); }
.photo-box img, .photo-box canvas { width: auto; height: auto; max-width: 100%; max-height: 15rem; border-radius: 8px; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.photo-actions .btn { position: relative; flex: 1 1 12rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.photo-view { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, 0.88); cursor: zoom-out; }
.photo-view img { max-width: 100%; max-height: 100%; border-radius: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }

/* The item list of a store without racks: headings as on its form, and items it holds none of in grey */
.list-heading { margin-top: 0.6rem; padding: 0.2rem 0.2rem 0; color: var(--muted); font-size: 1.05rem; font-weight: 800; }
.card-row.none .qty strong { color: var(--muted); font-weight: 600; }

/* Scanning a pallet label with the camera */
.big-buttons { display: grid; gap: 0.6rem; }
.scan-box { display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: #000; }
.scan-video { display: block; width: 100%; max-height: 60vh; object-fit: cover; }

/* Product labels: the photo of a product next to its QR code, the name under them. They exist
   on paper only: the screen never shows them. --pic is the side of the two pictures. */
#printArea { display: none; }
.qr { display: block; background: #fff; }
.qr path { fill: #000; }
.label { --pic: 40mm; display: grid; grid-template-columns: var(--pic) var(--pic); grid-template-rows: var(--pic) auto;
  justify-content: center; align-content: center; gap: 2mm 5mm; padding: 3mm; overflow: hidden;
  color: #000; font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif; line-height: 1.2; text-align: center; break-inside: avoid; }
.label-photo, .label .qr { width: var(--pic); height: var(--pic); }
.label-photo { object-fit: contain; }
.label-photo.none { display: grid; place-items: center; border: 0.3mm dashed #999; color: #666; font-size: 9pt; }
.label-text { grid-column: 1 / -1; min-width: 0; }
/* A long name must not push the lines under it off the label: it is cut. */
.label-name, .label-desc { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.label-name { -webkit-line-clamp: 1; font-size: 18pt; font-weight: 800; }
.label-desc { -webkit-line-clamp: 2; font-size: 9.5pt; }
.label-id { font-size: 8pt; }
/* A4: two across, four down, with a dashed line to cut along */
.labels.a4 { grid-template-columns: 1fr 1fr; }
.labels.a4 .label { height: 70mm; border: 0.2mm dashed #999; }
/* A label printer: one label a page */
.labels:not(.a4) .label { break-after: page; }
.labels:not(.a4) .label:last-child { break-after: auto; }
.labels.s100x100 .label { --pic: 41mm; height: 94mm; gap: 3mm 4mm; }
.labels.s100x100 .label-name { -webkit-line-clamp: 2; font-size: 22pt; }
.labels.s100x100 .label-desc { font-size: 11pt; }
/* tall label: the photo above the code */
.labels.s100x150 .label { --pic: 48mm; height: 144mm; grid-template-columns: var(--pic); grid-template-rows: var(--pic) var(--pic) auto; gap: 3mm; }
.labels.s100x150 .label-name { -webkit-line-clamp: 2; font-size: 22pt; }
.labels.s100x150 .label-desc { font-size: 11pt; }
/* low label: room for the two pictures and the name only */
.labels.s100x50 .label { --pic: 33mm; height: 46mm; gap: 1mm 6mm; padding: 2mm; }
.labels.s100x50 .label-name { font-size: 14pt; }
.labels.s100x50 .label-desc, .labels.s100x50 .label-id { display: none; }
@media print {
  html, body { background: #fff !important; }
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: grid; }
}

/* Stock in: the photo of the chosen product */
.product-photo { display: grid; place-items: center; }
.product-photo img { max-width: 100%; max-height: 12rem; border: 1px solid var(--border); border-radius: 12px; cursor: zoom-in; }

/* Fields of a form that are seldom filled in: closed until "More" is tapped. */
.more-fields { display: flex; flex-direction: column; gap: 0.85rem; }
.more-btn { align-self: flex-start; border-style: dashed; color: var(--muted); text-align: left; }

/* The labels never take more than 45% of the width: a long label wraps instead of squeezing its value into one letter a line. */
.details { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 0.3rem 0.9rem; margin: 0; padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--stripe); border: 1px solid var(--border); }
.details dt { color: var(--muted); }
.details dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

.picker { display: grid; gap: 0.45rem; font-weight: 400; }
.picker > .link-btn { justify-self: start; }
.picker > small { color: var(--muted); font-size: 0.9rem; }
.inline-add { display: flex; gap: 0.6rem; }
.inline-add input { flex: 1; min-width: 0; }
.picker-chosen { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.6rem 0.5rem 0.9rem; border: 2px solid var(--selected); border-radius: 12px; background: var(--stripe); }
.picker-chosen:empty { display: none; }
.picker-chosen strong { font-size: 1.1rem; overflow-wrap: anywhere; }
.picker-results { display: grid; gap: 0.35rem; max-height: 16rem; overflow-y: auto; }
.picker-results:empty { display: none; }
.picker-item { min-height: 3.25rem; padding: 0.4rem 0.8rem; border: 2px solid var(--border); border-radius: 12px; background: var(--stripe); color: var(--text); font-size: 1.05rem; text-align: left; overflow-wrap: anywhere; }
.picker-item:hover { border-color: var(--selected); }

/* The choice of the store. */
.segmented.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
.segmented.pick .seg { display: grid; justify-items: center; align-content: center; min-height: 6rem; padding: 0.6rem; border: 3px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.segmented.pick .seg small { color: var(--muted); font-size: 0.95rem; font-weight: 400; }
.segmented.pick .seg[aria-checked="true"] { border-color: var(--gold); background: var(--side-bg); color: var(--side-text); }
.segmented.pick .seg[aria-checked="true"] small { color: var(--gold); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: calc(100vw - 1.5rem);
  padding: 0.8rem 1.1rem;
  border: 2px solid var(--gold);
  border-radius: 14px;
  background: #1f1f1f;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.toast.bad { border-color: #ffffff; background: #a31b15; }

/* ---------------------------------------------------------------- kiosk: the daily inventory form */

.badge[class*="k-"] { white-space: normal; }
.badge.k-SUBMITTED { background: var(--set-bg); color: var(--set); }
.badge.k-CHECKED { background: var(--send-bg); color: var(--send); }
.badge.k-APPROVED { background: var(--in-bg); color: var(--in); }

.k-today { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; }
.card-actions > .btn:only-child { flex: 1 1 auto; }
.k-head { display: grid; gap: 0.6rem; margin-bottom: 0.4rem; }
.k-returned { margin: 0.6rem 0; padding: 0.75rem 0.9rem; border: 2px solid var(--out); border-radius: 12px; background: var(--out-bg); color: var(--out); font-weight: 600; overflow-wrap: anywhere; }
.k-actions { display: grid; gap: 0.6rem; margin-top: 1.25rem; }

/* One item of the form. Phone: a card with the six figures in two lines of three.
   Its left edge is green once the item is counted and right, red when the count is off. */
.k-lines { display: grid; gap: 0.6rem; }
.k-line { display: grid; gap: 0.5rem; padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-left: 6px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.k-line.counted { border-left-color: var(--in); }
.k-line.off { border-left-color: var(--out); }
.k-line.unsaved { outline: 3px solid var(--out); }
.k-headings { display: none; }
.k-name { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.k-name strong { font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
.k-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 0.5rem; }
.k-cell { display: grid; gap: 0.15rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; line-height: 1.2; }
.k-cell > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-cell input { min-height: 2.75rem; padding: 0.3rem 0.5rem; color: var(--text); font-size: 1.15rem; text-align: right; }
.k-cell output { display: block; min-height: 2.75rem; padding: 0.5rem 0.5rem 0; border-radius: 12px; background: var(--stripe); color: var(--text); font-size: 1.15rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow: hidden; }
.k-diff { color: var(--in); font-size: 0.95rem; font-style: normal; font-weight: 700; text-align: right; }
.k-diff:empty { display: none; }
.k-line.off .k-diff { color: var(--out); }
.k-unit { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.k-unit .link-btn { min-height: 2rem; padding: 0.1rem 0.6rem; border-style: dashed; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.k-remark:not(:has(input:not([hidden]))) { display: none; }
.k-remark input { min-height: 2.75rem; font-size: 1rem; }
.meta:empty { display: none; }
.details:empty { display: none; }

/* ---------------------------------------------------------------- phone: a form fills the screen, a table is a list of cards */

@media (max-width: 759px) {
  dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }

  /* The first line of a list of details is the long one (the product, a file): it gets the full width. */
  .details dt:first-child, .details dt:first-child + dd { grid-column: 1 / -1; }
  .details dt:first-child + dd { margin-bottom: 0.3rem; }

  .table-wrap:not(.wide) { overflow: visible; border: 0; border-radius: 0; background: none; }
  .table-wrap:not(.wide) table, .table-wrap:not(.wide) tbody, .table-wrap:not(.wide) tfoot,
  .table-wrap:not(.wide) tr, .table-wrap:not(.wide) td { display: block; }
  .table-wrap:not(.wide) thead { display: none; }
  .table-wrap:not(.wide) tr {
    margin-bottom: 0.6rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .table-wrap:not(.wide) tr.clickable { border-left: 6px solid var(--gold); }
  .table-wrap:not(.wide) tr.level-ERROR { background: var(--out-bg); border-color: var(--out); }
  .table-wrap:not(.wide) tr.level-WARNING { background: var(--set-bg); border-color: var(--set); }
  .table-wrap:not(.wide) tr.level-ERROR td:first-child { box-shadow: none; }
  .table-wrap:not(.wide) tfoot tr { border: 3px solid var(--line); }
  /* Each value with its heading in front; a value that is empty is left out. */
  .table-wrap:not(.wide) td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    border: 0;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .table-wrap:not(.wide) td::before { content: attr(data-label); flex: none; max-width: 55%; color: var(--muted); font-weight: 400; text-align: left; }
  .table-wrap:not(.wide) td:empty { display: none; }
  .table-wrap:not(.wide) td:first-child { display: block; padding-bottom: 0.35rem; font-size: 1.1rem; font-weight: 700; text-align: left; }
  .table-wrap:not(.wide) td:first-child::before { content: none; }
  .table-wrap:not(.wide) td:first-child .meta { font-weight: 400; }
  .table-wrap:not(.wide) td.empty { font-size: 1rem; font-weight: 400; text-align: center; }
  .table-wrap.wide { font-size: 0.9rem; }
}

/* Phone and tablet: the choices and buttons above a list fill the line, so they are easy to hit. */
@media (max-width: 999px) {
  .segment { flex: 1 1 auto; }
  /* Two choices share the line half and half, also when one of the names is long. */
  .segment:first-child:nth-last-child(2), .segment:first-child:nth-last-child(2) ~ .segment { flex: 1 1 0; }
  /* Four or more: two on a line. */
  .segment:first-child:nth-last-child(n+4), .segment:first-child:nth-last-child(n+4) ~ .segment { flex: 1 1 40%; }
  .filters > .btn:not(.small) { flex: 1 1 auto; }
}

/* Wider than a phone: the company, the store and the account fit on one line. */
@media (min-width: 560px) {
  .side { top: 0; flex-wrap: nowrap; }
  .brand { flex: none; }
  .store-btn { order: 0; flex: 1 1 auto; }
  .user-btn { max-width: 30%; }
  .action-grid.big { grid-template-columns: minmax(15rem, 20rem) 1fr; align-items: center; column-gap: 1rem; }
}

/* On a screen wide enough for a real table its first column stays in view while the rest is scrolled. */
@media (min-width: 760px) {
  td:first-child { position: sticky; left: 0; background: inherit; }
  th:first-child { position: sticky; left: 0; z-index: 1; }
  .toast { bottom: 1.5rem; }
  main { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ---------------------------------------------------------------- desktop: the bar is a column at the left */

@media (min-width: 1000px) {
  .shell { display: grid; grid-template-columns: min(17rem, 30vw) minmax(0, 1fr); align-items: start; }
  .side {
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.25rem 1rem;
    border-bottom: 0;
    border-right: 4px solid var(--gold);
    overflow-y: auto;
  }
  .brand { height: auto; }
  .brand-mark { width: 4.25rem; height: 4.25rem; padding: 0.3rem; border-radius: 14px; }
  .store-btn { flex: none; min-height: 4rem; }
  .store-btn strong { font-size: 1.6rem; }

  .tabs { position: static; flex: 1 0 auto; flex-direction: column; justify-content: flex-start; gap: 0.35rem; padding: 0; border-top: 0; background: none; }
  .tabs button {
    flex: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.9rem;
    min-height: 3.6rem;
    padding: 0.4rem 1rem;
    border-radius: 12px;
    font-size: 1.1rem;
    text-align: left;
  }
  .tabs button:hover { background: rgba(251, 248, 239, 0.14); }
  .tabs button[aria-selected="true"], .tabs button[aria-selected="true"]:hover { background: var(--gold); }
  .tab-label span { display: inline; margin-left: 0.35rem; }
  .tabs .count-badge { position: static; margin-left: auto; }

  .side-tools { display: grid; }
  .side .tools-caption { color: var(--side-muted); }
  .side .text-size-btn { border-color: var(--side-line); background: none; color: var(--side-text); }
  .side .text-size-btn[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: #1f1f1f; }
  .tabs button, .tabs.worker button { font-size: 1.1rem; }
  .user-btn { max-width: none; height: auto; padding: 0.6rem 0.9rem; }
  .user-btn strong { font-size: 1.1rem; }
  .user-role { font-size: 0.85rem; }
  .user-more { display: block; margin-top: 0.2rem; color: var(--gold); font-size: 0.85rem; font-weight: 600; }

  main { max-width: 100rem; margin: 0; padding: 1.5rem 2rem 3rem; }
  .page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin: 0 0 1.25rem; padding-bottom: 0.8rem; border-bottom: 3px solid var(--gold); }
  .page-head h1 { margin: 0; font: 700 1.9rem/1.2 var(--brand-font); }
  .page-store { color: var(--muted); font-size: 1.1rem; font-weight: 600; }

  .rack-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
  .row-chips { grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); }

  /* Sign in: the company at the left, the form at the right. */
  .login { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .login-brand { border-bottom: 0; border-right: 4px solid var(--gold); }
  .login-brand h1 { font-size: 2.6rem; }
  .login-company { font-size: 1.4rem; }
  .login .card { align-self: center; }
  .brand-mark.big { width: 14rem; height: 14rem; padding: 1.1rem; border-radius: 32px; }
}

/* The daily inventory form on a wide screen: one line per item under a row of headings, like the paper form. */
@media (min-width: 1000px) {
  .k-lines { gap: 0.3rem; }
  .k-line { grid-template-columns: minmax(12rem, 2.2fr) minmax(0, 6fr) minmax(8rem, 2fr); align-items: center; gap: 0.8rem; padding: 0.4rem 0.8rem; box-shadow: none; }
  .k-cells { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
  .k-cell > span { display: none; }
  .k-headings { display: grid; border-color: var(--side-bg); background: var(--side-bg); color: var(--side-text); font-size: 0.85rem; font-weight: 700; }
  .k-headings .k-cells { align-items: end; }
  .k-headings .k-cells span { display: block; text-align: right; line-height: 1.25; }
  .k-actions { grid-template-columns: repeat(auto-fit, minmax(14rem, max-content)); }
}

/* A low desktop screen (a laptop): the column at the left is packed closer so the account button
   stays in view. The text size is then chosen in the account dialog. */
@media (min-width: 1000px) and (max-height: 820px) {
  .side { gap: 0.6rem; padding: 0.8rem 1rem; }
  .side-tools { display: none; }
  .brand-mark { width: 3.5rem; height: 3.5rem; }
  .store-btn { min-height: 3.5rem; }
  .tabs button { min-height: 3.1rem; }
}

/* Transfer on a wide screen: the work at the left; what is on the way and today's changes at the right. */
@media (min-width: 1250px) {
  .transfer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "main incoming" "main mine";
    column-gap: 2rem;
    align-items: start;
  }
  .t-main { grid-area: main; }
  .t-main .action-grid.big { grid-template-columns: 1fr; }
  .t-incoming { grid-area: incoming; margin-bottom: 1.25rem; }
  .t-mine { grid-area: mine; }
  .t-incoming, .t-mine { padding: 0.25rem 1rem 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--stripe); }
  .t-incoming h2, .t-mine h2 { margin-top: 0.9rem; }
}