/* SheinFlow: black and white for the brand and the shop's own actions; colour
   only where it means something. Green for money earned and things ready, amber
   for money tied up and things in progress, red for what's owed, late or lost,
   blue for what's still being filled. Every text/background pair meets WCAG AA. */
:root {
  --bg: #f4f3f1;
  --surface: #ffffff;
  --surface-2: #efeeeb;
  --text: #111113;
  --muted: #5e5e66;
  --line: #e3e2de;
  --primary: #111113;
  --primary-hover: #2b2b30;
  --primary-text: #ffffff;
  --primary-soft: #e9e8e4;
  --focus: #111113;
  --ok: #0b7350;
  --ok-bg: #e2f5ec;
  --info: #2561d9;
  --info-bg: #e7eefc;
  --warn: #975a00;
  --warn-bg: #fdf0d9;
  --danger: #c2352b;
  --danger-bg: #fdeceb;
  --wa: #128a45;
  /* The top bar is black in both themes, like the app icon. */
  --chrome: #0f0f11;
  --chrome-text: #f5f5f6;
  --chrome-muted: #a5a5ad;
  --chrome-line: #232327;
  --chrome-hover: #1d1d21;
  --chrome-current: #2e2e34;
  --brand-font: "Avenir Next", Avenir, Montserrat, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(17 17 19 / 0.04), 0 4px 16px rgb(17 17 19 / 0.05);
  --shadow-lift: 0 2px 6px rgb(17 17 19 / 0.07), 0 12px 32px rgb(17 17 19 / 0.12);
  color-scheme: light;
}

/* Dark: by the phone's setting, unless the theme button chose light; or chosen outright. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0c;
    --surface: #151517;
    --surface-2: #1e1e21;
    --text: #f1f1f3;
    --muted: #a1a1aa;
    --line: #29292e;
    --primary: #f4f4f5;
    --primary-hover: #ffffff;
    --primary-text: #0b0b0c;
    --primary-soft: #2a2a2f;
    --focus: #f4f4f5;
    --ok: #4fd39c;
    --ok-bg: #11291f;
    --info: #82a9ff;
    --info-bg: #172440;
    --warn: #f3c062;
    --warn-bg: #33270f;
    --danger: #ff8b80;
    --danger-bg: #3a1714;
    --wa: #4fd18a;
    --chrome: #070708;
    --chrome-line: #1f1f23;
    --shadow: none;
    --shadow-lift: 0 10px 30px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0c;
  --surface: #151517;
  --surface-2: #1e1e21;
  --text: #f1f1f3;
  --muted: #a1a1aa;
  --line: #29292e;
  --primary: #f4f4f5;
  --primary-hover: #ffffff;
  --primary-text: #0b0b0c;
  --primary-soft: #2a2a2f;
  --focus: #f4f4f5;
  --ok: #4fd39c;
  --ok-bg: #11291f;
  --info: #82a9ff;
  --info-bg: #172440;
  --warn: #f3c062;
  --warn-bg: #33270f;
  --danger: #ff8b80;
  --danger-bg: #3a1714;
  --wa: #4fd18a;
  --chrome: #070708;
  --chrome-line: #1f1f23;
  --shadow: none;
  --shadow-lift: 0 10px 30px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a {
  color: var(--focus);
  text-underline-offset: 2px;
}

h1 {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 8px 0 16px;
}

p {
  margin: 0 0 6px;
}

code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.muted {
  color: var(--muted);
}
.small {
  font-size: 13px;
}
.error {
  color: var(--danger);
  font-weight: 600;
}
.pre {
  white-space: pre-line;
}
.break {
  word-break: break-all;
}
.print-only {
  display: none;
}
/* hidden always hides, whatever display a class gives the element. */
[hidden] {
  display: none !important;
}
/* A box whose figure comes from elsewhere (a carton, what was paid) rests, visibly. */
input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
ul.plain {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}

/* ------------------------------------------------------------ chrome */

/* The SheinFlow bar: black, with the white mark, in both themes. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
  color: var(--chrome-text);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
/* The S with its spark: drawn in the text colour, so it's black on light and white on black. */
.logo-mark {
  flex: none;
  width: 30px;
  height: 30px;
}
.brand-text {
  display: grid;
  min-width: 0;
  line-height: 1.1;
}
.brand-word {
  font-family: var(--brand-font);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.brand-word b {
  font-weight: 800;
}
.brand-name {
  overflow: hidden;
  color: var(--chrome-muted);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
}
.brand-name:empty {
  display: none;
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--chrome-text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover {
  background: var(--chrome-hover);
}
.nav a[aria-current="page"] {
  background: var(--chrome-current);
  color: #fff;
}
/* + New order: the one white button in the bar. */
.nav a.nav-new {
  background: #fff;
  color: #111113;
}
.nav a.nav-new:hover {
  background: #e9e8e4;
}
.nav a.nav-new[aria-current="page"] {
  box-shadow: 0 0 0 2px var(--chrome), 0 0 0 3px #fff;
}
.nav form {
  display: inline;
  margin: 0 0 0 6px;
}
.nav .nav-quiet {
  color: var(--chrome-muted);
  font-weight: 500;
}
.topbar :focus-visible {
  outline-color: #fff;
}
.theme-btn {
  display: grid;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  place-items: center;
  border: 1px solid #3a3a40;
  border-radius: 999px;
  background: transparent;
  color: var(--chrome-muted);
  cursor: pointer;
}
.theme-btn:hover {
  color: #fff;
  border-color: #fff;
}
.theme-btn .icon {
  width: 18px;
  height: 18px;
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 16px 72px;
  outline: none;
}
.banner {
  padding: 10px 16px;
  text-align: center;
  font-weight: 600;
}
.banner.warn {
  background: var(--warn-bg);
  color: var(--warn);
}
/* Under the bar: the admin's messages and what the shop is told about paying. */
.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  padding: 10px 16px;
  font-weight: 600;
  text-align: center;
}
.notice-message {
  background: var(--info-bg);
  color: var(--info);
}
.notice-payment {
  background: var(--warn-bg);
  color: var(--warn);
}
.notice-payment.overdue {
  background: var(--danger-bg);
  color: var(--danger);
}
.notice-admin {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.notice .btn.small {
  min-height: 30px;
}
.notice-close {
  padding: 0 6px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ------------------------------------------------------------ controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--muted);
}
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
  box-shadow: 0 1px 2px rgb(23 23 31 / 0.12);
}
.btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.btn .icon {
  width: 18px;
  height: 18px;
}
.btn.quiet {
  background: transparent;
  border-color: transparent;
}
.btn.quiet:hover {
  background: var(--surface-2);
}
.btn.small {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
}
.btn.big {
  min-height: 48px;
  padding: 0 24px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.danger {
  color: var(--danger) !important;
}
.linklike {
  background: none;
  border: none;
  padding: 0;
  color: var(--focus);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.linklike.small {
  font-size: 13px;
}

input,
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* keeps iOS from zooming into the field */
}
textarea {
  resize: vertical;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field-label {
  font-weight: 600;
  font-size: 14px;
}
.field-hint {
  color: var(--muted);
  font-size: 13px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Order states: waiting grey, partly arrived amber, ready green (deliver it), fulfilled violet (done). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}
.badge-waiting::before,
.badge-partial::before,
.badge-ready::before,
.badge-fulfilled::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.badge-partial {
  background: var(--warn-bg);
  color: var(--warn);
}
.badge-ready {
  background: var(--ok-bg);
  color: var(--ok);
}
.badge-fulfilled {
  background: var(--primary-soft);
  color: var(--primary);
}
.badge-returning {
  background: var(--primary-soft);
  color: var(--primary);
}
.badge-new {
  background: var(--info-bg);
  color: var(--info);
}
.badge-warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.card-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-title {
  margin: 28px 0 10px;
  font-size: 16px;
}
.notice.warn {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn);
}
/* A notice with its fix beside it. */
.notice.reprice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.img-missing {
  visibility: hidden;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 60;
  max-width: min(92vw, 560px);
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.2);
  transform: translateX(-50%);
}
.toast.error {
  background: var(--danger);
  color: #fff;
}
.toast.warn {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn);
}

/* ------------------------------------------------------------ scanning */

.scan-form {
  display: flex;
  gap: 8px;
}
.scan-input {
  flex: 1;
  height: 58px;
  padding: 0 18px;
  border: 2px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-size: 20px;
}
.scan-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.cam-btn {
  min-height: 58px;
  border-radius: 14px;
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}
.cam-btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scan-result:empty {
  display: none;
}
.scan-result {
  margin-top: 12px;
}
.scan-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.scan-card.ok {
  border-left-color: var(--ok);
  background: linear-gradient(135deg, var(--ok-bg), var(--surface) 55%);
}
.scan-card.warn {
  border-left-color: var(--warn);
  background: linear-gradient(135deg, var(--warn-bg), var(--surface) 55%);
}
.scan-card.miss {
  grid-template-columns: 1fr;
  border-left-color: var(--danger);
  background: linear-gradient(135deg, var(--danger-bg), var(--surface) 55%);
}
.scan-img {
  width: 150px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface-2);
}
.scan-for {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.scan-who {
  margin: 2px 0 8px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
}
.scan-no {
  display: inline-block;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--primary-text);
}
.scan-card.warn .scan-who,
.scan-card.miss .scan-who {
  font-size: 22px;
}
.scan-item {
  font-weight: 600;
}
.scan-progress {
  margin-top: 8px;
  font-weight: 600;
}
.scan-ready {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 700;
}
.scan-others {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.scan-others .other {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.result:hover {
  border-color: var(--muted);
}
.result-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.result-text .muted {
  overflow-wrap: anywhere;
}
.result-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.result-text code b {
  color: var(--text);
}
.elsewhere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.mini {
  width: 40px;
  flex: none;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  background: var(--surface-2);
}
.picker {
  margin-top: 12px;
}
.picker .section-title {
  margin-top: 0;
}
.picker-list {
  max-height: 440px;
  margin-top: 10px;
  overflow: auto;
}
.picker-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.picker-text {
  min-width: 0;
}
.picker-text strong,
.picker-text span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cam-frame {
  position: relative;
  width: min(82vw, 440px);
  height: 170px;
  border: 3px solid rgb(255 255 255 / 0.9);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.35);
}
.cam-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 16px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgb(0 0 0 / 0.8) 36px);
  color: #fff;
  text-align: center;
}
.cam-status {
  max-width: 460px;
  font-weight: 600;
}
.cam-status.problem {
  color: #ffe08a;
}
.cam-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cam-buttons:empty {
  display: none;
}
/* Light buttons on the camera picture, in either theme. */
.cam .btn {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.cam .cam-toggle {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.7);
  color: #fff;
}
.cam .cam-toggle[aria-pressed='true'] {
  background: #fff;
  color: #111;
}

/* ------------------------------------------------------------ order list */

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 12px;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tab[aria-selected="true"],
.tab[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}
.tab-count {
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.tab[aria-selected="true"] .tab-count {
  background: rgb(255 255 255 / 0.22);
  color: inherit;
}
/* Ready orders are the ones to act on: their tab count is green. */
.tab-ready .tab-count {
  background: var(--ok-bg);
  color: var(--ok);
}

.order-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1fr) 118px;
  grid-template-areas: "no who progress money state";
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 4px 0 0 var(--line);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.order-row:hover {
  border-color: var(--primary);
}
/* A coloured edge for the order's state; ready orders also get a green wash. */
.order-row.state-partial {
  box-shadow: inset 4px 0 0 var(--warn);
}
.order-row.state-ready {
  background: linear-gradient(90deg, var(--ok-bg), var(--surface) 45%);
  box-shadow: inset 4px 0 0 var(--ok);
}
.order-row.state-fulfilled {
  box-shadow: inset 4px 0 0 var(--primary);
}
.order-row .due {
  color: var(--warn);
  font-weight: 600;
}
.order-row .paid {
  color: var(--ok);
  font-weight: 600;
}
.order-no {
  grid-area: no;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.order-who {
  grid-area: who;
  min-width: 0;
}
.order-progress {
  grid-area: progress;
}
.order-money {
  grid-area: money;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.order-state {
  grid-area: state;
  text-align: right;
}
.order-who strong,
.order-who small,
.order-money strong,
.order-money small,
.order-progress small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-row small {
  color: var(--muted);
  font-size: 13px;
}
.bar {
  display: block;
  height: 6px;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-2);
}
.bar i {
  display: block;
  height: 100%;
  background: var(--ok);
}
.empty {
  padding: 40px 16px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.empty p {
  margin-bottom: 14px;
  color: var(--muted);
}

/* ------------------------------------------------------------ new order */

.form {
  max-width: 760px;
}
.preview {
  margin: -4px 0 16px;
}
.preview:empty {
  display: none;
}
.preview-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
/* Every product of the cart, with its quantity. Scrolls inside itself so a
   50-item cart doesn't push the customer fields off the screen. */
.pick-list {
  max-height: min(62vh, 540px);
  margin-top: 10px;
  padding: 0 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pick-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.pick-row:last-child {
  border-bottom: none;
}
.pick-img {
  width: 48px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-2);
}
.pick-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pick-name {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 600;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.pick-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-top: 2px;
}
/* A price that can be typed over, "$ [3.81]": a link gives every size of a product one price. */
.price-edit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
}
.price-edit input {
  width: 84px;
  padding: 5px 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.size-note {
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 600;
}
.pick-row.off .pick-img,
.pick-row.off .pick-text {
  opacity: 0.45;
}
.summary {
  margin: 2px 0 6px;
  padding: 2px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.summary:empty {
  display: none;
}

/* ------------------------------------------------------------ one order */

.back {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
  text-decoration: none;
}
.order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 16px;
}
.order-head h1 {
  margin: 0 0 4px;
}
.order-head .actions {
  margin-top: 0;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.customer-name {
  font-size: 20px;
  font-weight: 700;
}
.wa {
  margin-left: 12px;
  color: var(--wa);
  font-weight: 700;
}
.notes {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}
.pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px dashed var(--line);
  font-variant-numeric: tabular-nums;
}
.pay-row:last-child {
  border-bottom: none;
}
.pay-total strong {
  font-size: 18px;
}
.pay-balance strong {
  font-size: 21px;
}
.money-input {
  width: 130px;
  padding: 7px 10px;
  text-align: right;
}

.item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  margin-bottom: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.item-here {
  box-shadow: inset 5px 0 0 var(--ok);
}
.item-off {
  opacity: 0.55;
}
.item-img {
  width: 72px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-2);
}
.item-name {
  display: -webkit-box;
  margin: 0 0 2px;
  overflow: hidden;
  font-weight: 600;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.codes {
  margin: 4px 0;
}
.codes code {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 12px;
  user-select: all;
}
.item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.item-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stepper-label {
  min-width: 36px;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}
.step {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.step:disabled {
  opacity: 0.35;
  cursor: default;
}
.stepper-value {
  min-width: 38px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}
/* The typeable number between − and +. 16px keeps iOS from zooming in. */
.qty-input {
  width: 46px;
  height: 34px;
  padding: 0 2px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}

.links li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.link-row a {
  font-weight: 600;
}
.inline-form {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0;
}
.inline-form textarea {
  flex: 1;
}
.manual summary {
  padding: 8px 0;
  font-weight: 600;
  cursor: pointer;
}
.manual-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 100px 70px auto;
  gap: 8px;
}

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

body.login {
  display: grid;
  min-height: 100vh;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 16px;
}
/* The SheinFlow lockup: the mark, the name, and ORDERS MADE SIMPLE. */
.lockup {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--text);
  text-align: center;
}
.lockup-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lockup .logo-mark {
  width: 46px;
  height: 46px;
}
.lockup .brand-word {
  font-size: 36px;
  line-height: 1;
}
.tagline {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.login-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, 100%);
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.login-card h1 {
  margin: 0 0 8px;
  font-size: 22px;
}
.login-card label {
  font-weight: 600;
}
.login-card .btn {
  margin-top: 6px;
  min-height: 46px;
}
.locked-title {
  font-size: 18px;
  font-weight: 700;
}
.locked-card form {
  display: grid;
}

/* ------------------------------------------------------------ dashboard */

.dash-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.dash-top h1 {
  margin-bottom: 4px;
}
.downloads {
  display: flex;
  gap: 8px;
}
.periods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin: 12px 0 18px;
}
.range .field {
  margin: 0;
}
.range input,
.range select {
  min-height: 42px;
}
.dash-body {
  transition: opacity 0.15s;
}
.dash-body.loading {
  opacity: 0.5;
}
/* Tones: one colour family per kind of figure, set on a tile with .tone-*. */
.tone-ink {
  --tone: var(--primary);
  --tone-bg: var(--primary-soft);
}
.tone-green {
  --tone: var(--ok);
  --tone-bg: var(--ok-bg);
}
.tone-blue {
  --tone: var(--info);
  --tone-bg: var(--info-bg);
}
.tone-amber {
  --tone: var(--warn);
  --tone-bg: var(--warn-bg);
}
.tone-red {
  --tone: var(--danger);
  --tone-bg: var(--danger-bg);
}
.pos {
  color: var(--ok);
}
.neg {
  color: var(--danger);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.kpi {
  position: relative;
  padding: 14px 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* A soft corner of the tile's colour. */
.kpi::after {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--tone-bg, transparent);
  opacity: 0.7;
  content: "";
  pointer-events: none;
}
.kpi > * {
  position: relative;
  z-index: 1;
}
.kpi p {
  margin: 0;
}
.kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kpi-icon {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--tone-bg);
  color: var(--tone);
}
.kpi-icon .icon {
  width: 18px;
  height: 18px;
}
.kpi-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kpi-value {
  margin-top: 8px !important;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kpi-note {
  margin-top: 4px !important;
  color: var(--muted);
  font-size: 13px;
}
.kpi.big .kpi-value {
  color: var(--tone);
}
.delta.up {
  color: var(--ok);
  font-weight: 600;
}
.delta.down {
  color: var(--danger);
  font-weight: 600;
}

/* Where the money is right now: tinted tiles, the figures in their colour. */
.now-card {
  margin-bottom: 12px;
}
.now-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.now-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tone-bg);
  color: inherit;
  text-decoration: none;
}
a.now-tile:hover {
  box-shadow: inset 0 0 0 2px var(--tone);
}
.now-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tone);
  font-size: 13px;
  font-weight: 700;
}
.now-label .icon {
  width: 16px;
  height: 16px;
}
.now-value {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.now-note {
  color: var(--muted);
  font-size: 12.5px;
}

.notice-margin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary-soft);
}
.notice-margin p {
  flex: 1 1 260px;
  margin: 0;
}
.inline-pct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inline-pct input {
  width: 84px;
  text-align: right;
}

.chart-card .card-head {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.chart-card .card-title {
  margin: 0;
}
.small-tabs .tab {
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
}
.chart {
  min-height: 190px;
}
.chart svg {
  display: block;
  overflow: visible;
}
.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}
.chart-zero {
  stroke: var(--muted);
  stroke-width: 1;
}
.chart-axis {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.chart-bar {
  fill: var(--primary);
  opacity: 0.85;
}
.chart-bar.m-orders,
.chart-bar.m-items {
  fill: var(--info);
}
.chart-bar.m-profit {
  fill: var(--ok);
}
.chart-bar.m-profit.loss {
  fill: var(--danger);
}
.chart-bar.on {
  opacity: 1;
}
.chart-hit {
  fill: transparent;
  cursor: pointer;
}
.chart-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  color: var(--muted);
}
.chart-readout {
  min-height: 1.45em;
  margin: 8px 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chart-numbers {
  margin-top: 8px;
}
.chart-numbers summary {
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}
table.figures {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.figures th,
.figures td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.figures th:first-child,
.figures td:first-child {
  text-align: left;
}
.figures th {
  color: var(--muted);
  font-size: 12px;
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin-top: 12px;
}
.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-variant-numeric: tabular-nums;
}
.stat-row:last-child {
  border-bottom: none;
}
.stat-row > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.stat-row > span:last-child {
  flex: none;
  font-weight: 600;
}
.stat-row.strong {
  font-weight: 800;
}
.stat-row.strong > span:last-child {
  font-size: 17px;
}
.stat-row.gap {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.stat-row.sub {
  padding-left: 14px;
  color: var(--muted);
  font-size: 14px;
}
.stat-row.total {
  margin-top: 6px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: var(--tone-bg, var(--surface-2));
}
.stat-row.total > span:last-child {
  color: var(--tone, var(--text));
  font-size: 19px;
  font-weight: 800;
}
.top-title {
  margin: 14px 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.cat-bar {
  display: block;
  height: 6px;
  margin: 2px 0 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-2);
}
.cat-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--tone, var(--danger));
}

/* ------------------------------------------------------------ expenses */

.kind-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
}
.kind-switch button {
  min-height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* The page colour on red or green reads well in both themes (light: dark red, white text; dark: light red, dark text). */
.kind-switch button[aria-pressed="true"].k-expense {
  background: var(--danger);
  color: var(--bg);
}
.kind-switch button[aria-pressed="true"].k-income {
  background: var(--ok);
  color: var(--bg);
}
.ledger-form {
  display: grid;
  grid-template-columns: 150px 1fr 130px;
  gap: 10px 12px;
  margin-top: 12px;
}
.ledger-form .wide {
  grid-column: 1 / -1;
}
.ledger-month {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 8px;
}
.ledger-month h2 {
  margin: 0;
  font-size: 16px;
}
.entry {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: inset 4px 0 0 var(--danger);
}
.entry.income {
  box-shadow: inset 4px 0 0 var(--ok);
}
.entry-amount {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ profit on an order */

.money-box {
  margin: 4px 0 16px;
  padding: 14px 14px 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.money-box h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
.money-box.profit-box {
  border-color: var(--ok);
  background: linear-gradient(180deg, var(--ok-bg), var(--surface-2) 70%);
}
.field-row.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profit-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 700;
}
.profit-line.loss {
  background: var(--danger-bg);
  color: var(--danger);
}
.profit-line strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.who-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -6px 0 14px;
  font-size: 14px;
}
.who-hint:empty {
  display: none;
}
.order-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  gap: 16px;
}
.profit-card {
  border-color: var(--ok);
}
.profit-card .card-title {
  color: var(--ok);
}
.pct-input {
  width: 86px;
  padding: 7px 10px;
  text-align: right;
}
.source-note {
  color: var(--muted);
  font-size: 12.5px;
}
/* "Prices as SHEIN's app shows them in [country]" under a cart. */
.price-from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 2px;
  font-weight: 600;
}
.inline-select {
  width: auto;
  padding: 6px 10px;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}
.settings-card .setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.settings-card .setting.gap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.settings-card select {
  width: auto;
  min-width: 220px;
}

/* ------------------------------------------------------------ cartons */

/* The carton an order is in, as a small tag on its row. */
.carton-chip {
  display: inline-block;
  max-width: 12em;
  margin-left: 4px;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.badge.carton-filling {
  background: var(--info-bg);
  color: var(--info);
}
.badge.carton-ordered {
  background: var(--warn-bg);
  color: var(--warn);
}
.badge.carton-arrived {
  background: var(--ok-bg);
  color: var(--ok);
}
.badge.carton-delivered {
  background: var(--primary-soft);
  color: var(--primary);
}
.carton-mark {
  display: flex;
  align-items: center;
  color: var(--warn);
}
.carton-mark .icon {
  width: 22px;
  height: 22px;
}
.new-carton {
  max-width: 760px;
  margin-top: 18px;
}
/* "Carton [AP-1217 ▾] Open the carton →" under an order's title. */
.carton-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.carton-line select {
  width: auto;
  max-width: 100%;
}
.inline-select.small {
  padding: 4px 8px;
  font-size: 14px;
}
.carton-fill {
  margin: 4px 0 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 600;
}
/* An order on its carton's page: its row, and a list to move it to another carton. */
.carton-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.carton-order .order-row {
  margin-bottom: 0;
}
.carton-orders {
  margin-top: 22px;
}
.carton-orders .card-head {
  margin-bottom: 10px;
}
.carton-adder {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  background: var(--surface);
}
.tick-list {
  display: grid;
  gap: 2px;
  max-height: 340px;
  margin-bottom: 10px;
  overflow-y: auto;
}
.tick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.tick-row input {
  width: 20px;
  height: 20px;
  flex: none;
}
.merge {
  margin-top: 18px;
}
.merge summary {
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.inline-form select {
  width: auto;
  min-width: 240px;
}
/* A carton picked by searching: the choice as a button, and under it a search
   box over the likeliest cartons, those still being filled first. */
.picker {
  position: relative;
  min-width: 0;
  max-width: 100%;
}
.picker-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--primary);
  border-radius: 10px;
  background: var(--surface);
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.picker-current:hover {
  background: var(--primary-soft);
}
.picker-current.small {
  padding: 4px 10px;
  font-size: 14px;
}
/* In a form it looks like the other fields. */
.field .picker-current {
  width: 100%;
  padding: 10px 12px;
  border-color: var(--line);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}
.field .picker-current:hover {
  border-color: var(--muted);
  background: var(--surface);
}
.picker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-caret {
  margin-left: auto;
  padding-left: 4px;
  color: var(--muted);
  font-size: 12px;
}
.picker-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  width: min(440px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
/* A row's "Move to…" button sits at its right edge: its list opens leftwards. */
.picker.compact .picker-panel {
  right: 0;
  left: auto;
}
.picker-list {
  display: grid;
  gap: 2px;
  max-height: min(340px, 55vh);
  margin-top: 8px;
  overflow-y: auto;
}
.picker-option {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.picker-option:hover,
.picker-option[aria-selected="true"] {
  background: var(--surface-2);
}
.picker-option.chosen {
  box-shadow: inset 3px 0 0 var(--primary);
}
.picker-option.special {
  color: var(--primary);
  font-weight: 700;
}
.picker-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.picker-note {
  margin: 6px 10px;
}
.tick-filter,
.carton-find {
  margin-bottom: 6px;
}
.carton-find {
  width: min(320px, 100%);
}
.tabs.dimmed {
  opacity: 0.45;
}

/* ------------------------------------------------------------ alerts and WhatsApp messages */

/* How many things are late or unpaid, on Orders in the top bar. */
.nav-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  vertical-align: 1px;
}
/* "Needs attention" on the Orders page. */
.alerts {
  margin: 0 0 16px;
  padding: 0;
  border-left: 6px solid var(--danger);
}
.alerts > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.alerts[open] > summary {
  border-bottom: 1px solid var(--line);
}
.alerts > summary::after {
  content: "Show ▾";
  margin-left: auto;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
}
.alerts[open] > summary::after {
  content: "Hide ▴";
}
.alert-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.alert-count {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.alert-count.alert-late {
  background: var(--warn-bg);
  color: var(--warn);
}
.alert-count.alert-delivery {
  background: var(--info-bg);
  color: var(--info);
}
.alert-count.alert-unpaid {
  background: var(--danger-bg);
  color: var(--danger);
}
.alerts > p {
  margin: 0;
  padding: 10px 16px 14px;
}
.alert-group {
  padding: 12px 16px 4px;
}
.alert-group h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.alert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.alert-what {
  display: grid;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.alert-what:hover strong {
  text-decoration: underline;
}
.alert-what .carton-chip {
  justify-self: start;
  margin: 2px 0;
}
.alert-what small {
  color: var(--muted);
}
.alert-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.alert-row.done {
  opacity: 0.6;
}
/* A WhatsApp button: WhatsApp's green, so it's found at a glance. */
.btn.wa-btn {
  border-color: var(--wa);
  color: var(--wa);
}
.btn.wa-btn:hover {
  background: var(--ok-bg);
  border-color: var(--wa);
}
/* An order's ready-written messages. */
.wa-menu {
  margin: 4px 0 10px;
}
.wa-menu > summary {
  list-style: none;
}
.wa-menu > summary::-webkit-details-marker {
  display: none;
}
.wa-menu > summary::after {
  content: "▾";
  margin-left: 2px;
}
.wa-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.wa-option {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.wa-option:hover {
  border-color: var(--wa);
}
.wa-option strong {
  color: var(--wa);
}
/* Messaging a carton's customers one after another. */
.wa-carton {
  margin-top: 18px;
}
.wa-carton > summary {
  color: var(--wa);
  font-weight: 700;
  cursor: pointer;
}
.wa-tabs {
  margin: 10px 0;
}
.wa-sample {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
}
.wa-sample p {
  margin: 4px 0 0;
}
.wa-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.wa-row.done .wa-who::after {
  content: " ✓ opened";
  color: var(--ok);
  font-size: 13px;
  font-weight: 700;
}
.wa-row .due {
  color: var(--warn);
  font-weight: 600;
}
/* Reached from a link: clear of the sticky top bar. */
#alert-settings,
#message-settings,
.wa-carton {
  scroll-margin-top: 76px;
}
/* "A carton usually arrives within [14] days of being ordered." */
.days-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 10px;
}
.days-input {
  width: 80px;
  padding: 6px 8px;
  text-align: center;
}
.settings-card code {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 13px;
}
/* Orders | Cartons on the dashboard. */
.view-tabs {
  margin: 4px 0 12px;
}
/* The dashboard's cartons, one line each. */
.carton-table {
  display: grid;
}
.carton-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.9fr) 92px;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.carton-line-row:hover {
  background: var(--surface-2);
}
.carton-line-row small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}
.cl-name strong,
.cl-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-money,
.cl-profit {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cl-profit {
  font-weight: 700;
}
.cl-state {
  text-align: right;
}
/* An item whose printed code ends in what was typed, for an unknown barcode. */
.picker-row.tail {
  background: var(--ok-bg);
}

/* ------------------------------------------------------------ payments and a carton's stages */

.badge.paid-paid {
  background: var(--ok-bg);
  color: var(--ok);
}
.badge.paid-partial {
  background: var(--warn-bg);
  color: var(--warn);
}
.badge.paid-unpaid {
  background: var(--danger-bg);
  color: var(--danger);
}
/* Two badges side by side, wrapping under each other when narrow. */
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.pay-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
/* "Did they pay it when they got their bag?" when an order is handed over with money still due. */
.handover {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: var(--warn-bg);
}
.handover p {
  margin: 0 0 10px;
  font-weight: 600;
}
.handover .actions {
  margin: 0;
}
/* A carton's stages, left to right: made, ordered, arrived, delivered, paid. */
.stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stage {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: var(--muted);
}
.stage-dot {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 2px solid var(--line);
  border-radius: 50%;
}
.stage.reached {
  color: var(--text);
}
.stage.reached .stage-dot {
  border-color: var(--ok);
  background: var(--ok);
}
.stage-text strong,
.stage-text small {
  display: block;
}
.stage-text small {
  color: var(--muted);
  font-size: 12.5px;
}
.stage-set {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.stage-set input[type="date"] {
  width: auto;
  min-width: 140px;
  max-width: 100%;
  padding: 4px 8px;
  font-size: 14px;
}
.carton-tabs {
  margin-top: 16px;
}

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

/* ------------------------------------------------------------ phones */

@media (max-width: 720px) {
  h1 {
    font-size: 22px;
  }
  /* A carton's stages run down the page on a phone. */
  .stages {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .carton-order {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .carton-order select,
  .carton-order .picker {
    justify-self: end;
    width: auto;
    max-width: 100%;
  }
  /* A picker's list is as wide as the screen: one starting mid-line gets its own line. */
  .carton-line .picker,
  .merge-form .picker {
    flex: 1 1 100%;
  }
  .carton-line-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
  }
  .cl-money {
    text-align: right;
  }
  .cl-profit {
    text-align: left;
  }
  .inline-form select {
    min-width: 0;
    flex: 1;
  }
  .nav {
    gap: 12px;
  }
  .nav .nav-quiet {
    font-size: 14px;
  }
  .nav a[download] {
    display: none;
  }
  .scan-input {
    font-size: 17px;
  }
  .cam-btn-label {
    display: none;
  }
  .scan-card {
    grid-template-columns: 96px 1fr;
    gap: 12px;
  }
  .scan-img {
    width: 96px;
  }
  .scan-who {
    font-size: 22px;
  }
  .order-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "no state"
      "who money"
      "progress progress";
    gap: 6px 12px;
  }
  .order-state {
    text-align: right;
  }
  .two-col,
  .field-row {
    grid-template-columns: 1fr;
  }
  .item {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .item-img {
    width: 64px;
  }
  .item-side {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .inline-form {
    flex-direction: column;
    align-items: stretch;
  }
  .manual-form {
    grid-template-columns: 1fr 1fr;
  }
  .manual-form input:first-child {
    grid-column: 1 / -1;
  }
  /* The quantity drops under the text, so the product name keeps the row's width. */
  .pick-row {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    row-gap: 6px;
  }
  .pick-row .stepper {
    grid-column: 2;
    justify-self: end;
  }
  .nav a {
    padding: 6px 9px;
  }
  .field-row.three,
  .ledger-form {
    grid-template-columns: 1fr;
  }
  .entry {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .entry-day {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 13px;
  }
  /* On a phone the periods scroll sideways instead of stacking into a block of buttons. */
  .periods {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .periods::-webkit-scrollbar {
    display: none;
  }
  .periods .tab {
    flex: none;
  }
  .downloads {
    width: 100%;
  }
  .downloads .btn {
    flex: 1;
  }
  .kpi {
    padding: 12px;
  }
  .kpi-value {
    font-size: 21px;
  }
  .range .field {
    flex: 1 1 140px;
  }
  .range input,
  .range select {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .nav .nav-new {
    display: none;
  }
  /* The mark alone leaves the menu room on a small phone. */
  .brand-text {
    display: none;
  }
  .nav {
    gap: 2px;
  }
  .nav a {
    padding: 6px 8px;
  }
  /* With Cartons in the menu too, the menu needs the mark's room: Orders already leads home. */
  .topbar:has(#nav-cartons:not([hidden])) .brand {
    display: none;
  }
  .now-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .now-value {
    font-size: 19px;
  }
  .kpi-label {
    font-size: 11px;
    letter-spacing: 0.03em;
  }
}
.nav .linklike {
  white-space: nowrap;
}

/* ------------------------------------------------------------ print (packing slip) */

@media print {
  .topbar,
  .banner,
  .toast,
  .back,
  .no-print,
  .sources {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .wrap {
    max-width: none;
    padding: 0;
  }
  .card,
  .item {
    box-shadow: none;
    border-color: #bbb;
    break-inside: avoid;
  }
  .print-only {
    display: block;
    margin-top: 4px;
    font-size: 13px;
  }
  .money-input {
    border: none;
    padding: 0;
  }
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.rate-note {
  margin: 6px 0 0;
}

/* ------------------------------------------------------------ admin */

.due {
  color: var(--warn);
  font-weight: 600;
}
.gap {
  margin-top: 14px;
}
.card-sub {
  margin: 16px 0 6px;
  font-size: 14px;
}
.admin-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* What a client's month stands at, and whether it can sign in. */
.badge.st-paid {
  background: var(--ok-bg);
  color: var(--ok);
}
.badge.st-due,
.badge.st-partial {
  background: var(--warn-bg);
  color: var(--warn);
}
.badge.st-overdue,
.badge.st-locked {
  background: var(--danger-bg);
  color: var(--danger);
}
.badge.st-free {
  background: var(--surface-2);
  color: var(--muted);
}
.client-list {
  display: grid;
  gap: 8px;
}
.client-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 0.9fr) auto;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
.client-row:hover {
  border-color: var(--muted);
}
.client-row.is-locked {
  box-shadow: inset 4px 0 0 var(--danger);
}
.client-row.is-archived {
  opacity: 0.7;
}
.client-who,
.client-pay,
.client-use {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.client-who small,
.client-pay small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-pay .badge {
  justify-self: start;
}
.client-state {
  justify-self: end;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.locked-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  border-left: 6px solid var(--danger);
}
.months {
  display: grid;
  margin: 10px 0;
}
.month-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.month-row > .badge {
  grid-row: 1;
  grid-column: 2;
}
.month-name {
  font-weight: 600;
}
.month-info {
  grid-row: 2;
  grid-column: 1 / -1;
}
.month-actions {
  display: flex;
  grid-row: 1;
  grid-column: 3;
  gap: 10px;
}
.month-row .pay-form {
  grid-column: 1 / -1;
}
.pay-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
}
.pay-form input,
.pay-form select {
  width: auto;
  min-width: 0;
  flex: 1 1 110px;
  padding: 6px 8px;
}
.pay-line {
  display: grid;
  gap: 4px;
}
.pay-line .client-row {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) auto;
}
.pay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.month-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.credentials {
  border: 2px solid var(--primary);
}
.cred {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 0;
}
.cred span {
  min-width: 6em;
}
.cred code {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 15px;
  word-break: break-all;
}
.notice-list,
.backup-list,
.audit-list {
  display: grid;
  margin-top: 8px;
}
.notice-item,
.backup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.notice-item small {
  grid-column: 1;
}
.notice-item button {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.notice-item.done {
  opacity: 0.6;
}
.backup-row {
  grid-template-columns: minmax(9em, auto) minmax(0, 1fr) auto;
}
.audit-row {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 0 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.audit-row > small:last-child {
  grid-column: 2;
}
.btn.danger-btn {
  border-color: var(--danger);
  color: var(--danger);
}
.btn.danger-btn:hover {
  background: var(--danger-bg);
}
.linklike.danger {
  color: var(--danger);
}
@media (max-width: 720px) {
  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .client-row,
  .pay-line .client-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .client-use {
    display: none;
  }
  .audit-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .audit-row > small:last-child {
    grid-column: 1;
  }
  .lockup .brand-word {
    font-size: 30px;
  }
}
/* A phone: the menu slides sideways inside the bar rather than pushing the page wider. */
@media (max-width: 720px) {
  .topbar {
    gap: 8px;
  }
  .nav {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .nav > :first-child {
    margin-left: auto;
  }
  .nav > * {
    flex: none;
  }
}