/* Order Desk – plain CSS, no build step */

:root {
  --bg: #f3f6fb;
  --card: #ffffff;
  --subtle: #f7f9fc;
  --border: #e5eaf2;
  --border-strong: #d3dbe7;
  --text: #0f172a;
  --muted: #64748b;
  --faint: #94a3b8;
  --dark: #0f1b33;
  --dark-2: #1c2b4b;
  --dark-text: #e2e8f0;
  --link: #1d64d8;
  --focus: rgba(37, 117, 252, .18);

  --primary: #2172f3;
  --primary-2: #1557cc;
  --primary-grad: linear-gradient(135deg, #3b8bff 0%, #1a62e0 100%);
  --primary-shadow: 0 8px 20px rgba(33, 114, 243, .28);

  --orange-bg: #fff1e7;
  --orange: #c2410c;
  --orange-line: #f97316;
  --yellow-bg: #fff6db;
  --yellow: #a16207;
  --blue-bg: #e9f2ff;
  --blue: #1d5fd1;
  --purple-bg: #f2ecff;
  --purple: #6d28d9;
  --green-bg: #e8f8ed;
  --green: #15803d;
  --grey-bg: #eef2f7;
  --grey: #475569;

  --bar-green: #22c55e;
  --bar-yellow: #f59e0b;
  --bar-orange: #f97316;

  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .04);
  --shadow-lift: 0 14px 34px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  font: 14px/1.5 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

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

h2 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.005em;
}

h3 {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
}

::selection {
  background: #f1dfc8;
}

.mono {
  font-family: var(--mono);
  font-size: 13px;
}

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

.small {
  font-size: 12.5px;
}

.warn {
  color: var(--orange);
}

.right {
  text-align: right;
}

.nowrap {
  white-space: nowrap;
}

.link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(138, 43, 31, .35);
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  transition: text-decoration-color .15s;
}

.link:hover {
  text-decoration-color: currentColor;
}

.hidden {
  display: none !important;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Layout ---------- */
.app {
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--dark);
  color: var(--dark-text);
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  padding: 2px 10px 26px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #f4f2ec;
  color: var(--dark);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  flex: none;
}

.brand b {
  display: block;
  font-size: 17px;
  letter-spacing: .22em;
  line-height: 1.15;
}

.brand span {
  font-size: 10.5px;
  letter-spacing: .18em;
  color: #a9a59b;
}

.nav-label {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #77746c;
  padding: 0 12px 8px;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #d9d6ce;
  margin-bottom: 2px;
  transition: background .15s, color .15s;
}

.nav a .icon {
  opacity: .75;
}

.nav a:hover {
  background: var(--dark-2);
  color: #fff;
}

.nav a.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}

.nav a.active .icon {
  opacity: 1;
}

.nav-count {
  margin-left: auto;
  background: var(--orange-line);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 0 7px;
  line-height: 18px;
}

.requests {
  border-color: #f0d9b6;
  background: linear-gradient(180deg, #fffbf3, #fff 60%);
}

.me {
  margin-top: auto;
  border-top: 1px solid #2c2c2c;
  padding: 16px 6px 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3a3833;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  flex: none;
}

.me-text {
  min-width: 0;
  flex: 1;
}

.me b {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me span {
  display: block;
  font-size: 11.5px;
  color: #a9a59b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me form {
  margin: 0;
}

.me button {
  background: none;
  border: 0;
  color: #a9a59b;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.me button:hover {
  color: #fff;
  background: var(--dark-2);
}

.menu-toggle {
  display: none;
}

.main {
  padding: 30px 32px 64px;
  min-width: 0;
  max-width: 1480px;
  width: 100%;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.page-head .eyebrow {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 4px;
}

.head-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sync {
  font-size: 12.5px;
  color: var(--muted);
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.grid-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.stack {
  display: grid;
  gap: 16px;
}

.grid-2>*,
.grid-half>*,
.stack>*,
.kpis>*,
.board>* {
  min-width: 0;
}

/* let wide content shrink instead of pushing the page wider */
.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.spread {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-pad {
  padding: 18px 20px;
}

.card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.card-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.card.dark {
  background: var(--dark);
  color: var(--dark-text);
  border-color: var(--dark);
}

.card.dark .muted {
  color: #a9a59b;
}

.card h2+p,
.card h3+p {
  margin-top: 6px;
}

.card p {
  margin: 0;
}

details.card>summary {
  cursor: pointer;
  list-style: none;
}

details>summary::-webkit-details-marker {
  display: none;
}

details>summary {
  list-style: none;
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}

.kv b {
  font-weight: 600;
}

.divider {
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

.empty {
  text-align: center;
  padding: 34px 20px;
  color: var(--muted);
}

.empty .icon {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  opacity: .5;
}

/* KPI tiles */
.kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 15px;
  box-shadow: var(--shadow);
  transition: box-shadow .2s, transform .2s;
}

.kpi:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.kpi .label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}

.kpi .value {
  font-size: 28px;
  font-weight: 600;
  margin: 4px 0 2px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi .caption {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.6;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

.badge-orange {
  background: var(--orange-bg);
  color: var(--orange);
}

.badge-yellow {
  background: var(--yellow-bg);
  color: var(--yellow);
}

.badge-blue {
  background: var(--blue-bg);
  color: var(--blue);
}

.badge-purple {
  background: var(--purple-bg);
  color: var(--purple);
}

.badge-green {
  background: var(--green-bg);
  color: var(--green);
}

.badge-grey {
  background: var(--grey-bg);
  color: var(--grey);
}

.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--grey-bg);
  color: var(--grey);
  white-space: nowrap;
}

/* ---------- Buttons and forms ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
  box-shadow: 0 1px 1px rgba(20, 20, 15, .03);
}

.btn:hover {
  border-color: #b9b4a8;
  background: var(--subtle);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible,
.pill:focus-visible,
.nav a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

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

.btn-dark:hover {
  background: #333230;
  border-color: #333230;
}

.btn-light {
  background: #fff;
  color: var(--text);
  border-color: #fff;
}

.btn-light:hover {
  background: #f1efe9;
  border-color: #f1efe9;
}

.btn-block {
  width: 100%;
}

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

.btn[disabled],
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

label.field {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: #55544e;
  margin-bottom: 5px;
}

.input,
select.input,
textarea.input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}

.input::placeholder {
  color: #aaa79e;
}

textarea.input {
  min-height: 76px;
  resize: vertical;
}

.input:hover {
  border-color: #bdb8ac;
}

.input:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--focus);
}

.form-grid {
  display: grid;
  gap: 12px;
}

.check {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  cursor: pointer;
}

.check input {
  width: 17px;
  height: 17px;
  accent-color: var(--dark);
}

.input-wrap {
  position: relative;
}

.input-wrap .input {
  padding-right: 64px;
}

.input-wrap .reveal {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.input-wrap .reveal:hover {
  background: var(--subtle);
  color: var(--text);
}

/* Pills (tabs) */
.pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pills:has(+ .pills-desk) {
  margin-bottom: 8px;
}

.pills-desk {
  align-items: center;
}

.pills-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.pill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  text-decoration: none;
  font-size: 13.5px;
  font: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.pill:hover {
  border-color: #b9b4a8;
}

.pill span {
  color: var(--muted);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

.pill.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

.pill.active span {
  color: #cfcabd;
}

.pill.tone-orange {
  background: var(--orange-bg);
  color: var(--orange);
  border-color: transparent;
}

.pill.tone-yellow {
  background: var(--yellow-bg);
  color: var(--yellow);
  border-color: transparent;
}

.pill.tone-orange.active,
.pill.tone-yellow.active {
  box-shadow: 0 0 0 2px var(--text);
}

/* Flash messages */
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid rgba(31, 95, 43, .15);
  animation: flash-in .25s ease-out;
}

.flash .icon {
  margin-top: 1px;
}

.flash .flash-text {
  flex: 1;
}

.flash.error {
  background: var(--orange-bg);
  color: var(--orange);
  border-color: rgba(154, 52, 18, .15);
}

.flash-close {
  background: none;
  border: 0;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  padding: 0 2px;
  font-size: 18px;
  line-height: 1;
}

.flash-close:hover {
  opacity: 1;
}

@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
}

table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  padding: 10px 12px;
  background: var(--subtle);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table thead tr:first-child th:first-child {
  border-top-left-radius: var(--radius);
}

.table thead tr:first-child th:last-child {
  border-top-right-radius: var(--radius);
}

.table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

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

.table tbody tr {
  transition: background .12s;
}

.table tr.clickable {
  cursor: pointer;
}

.table tr.clickable:hover td,
.table tr.selected td {
  background: var(--subtle);
}

.table tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--dark);
}

.table .sub {
  font-size: 12px;
  color: var(--muted);
}

.table.compact td {
  padding: 9px 8px;
}

.table.compact th {
  padding: 8px;
  background: none;
}

/* Bulk bar */
.bulk-bar {
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lift);
}

.bulk-bar .btn {
  background: transparent;
  color: #fff;
  border-color: #4a4945;
  box-shadow: none;
}

.bulk-bar .btn:hover {
  border-color: #fff;
  background: var(--dark-2);
}

.bulk-bar select {
  background: var(--dark-2);
  color: #fff;
  border: 1px solid #4a4945;
  padding: 7px;
  border-radius: 6px;
  font: inherit;
}

/* Filters */
.filters {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

/* ---------- Today: action list ---------- */
.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}

.action-row:hover {
  background: #fcfbf9;
}

.action-row:last-child {
  border-bottom: 0;
}

.action-row .title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.action-row .title b {
  font-size: 15.5px;
}

.action-row .when {
  font-size: 12px;
  color: var(--muted);
}

.action-row .done {
  color: var(--green);
  font-weight: 500;
}

.bar {
  height: 7px;
  border-radius: 99px;
  background: #efede7;
  margin: 6px 0 12px;
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
}

.bar .green {
  background: var(--bar-green);
}

.bar .yellow {
  background: var(--bar-yellow);
}

.bar .orange {
  background: var(--bar-orange);
}

/* ---------- Order detail ---------- */
.journey {
  list-style: none;
  margin: 0;
  padding: 0;
}

.journey li {
  position: relative;
  padding: 0 0 18px 28px;
}

.journey li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--faint);
  background: #fff;
  z-index: 1;
}

.journey li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
}

.journey li.done::before {
  background: var(--text);
  border-color: var(--text);
}

.journey li.done:not(:last-child)::after {
  background: var(--text);
}

.journey li.current::before {
  border-color: var(--text);
  box-shadow: 0 0 0 4px var(--focus);
}

.journey li.stopped::before {
  background: var(--orange-line);
  border-color: var(--orange-line);
}

.journey li.todo {
  color: var(--muted);
}

.journey li b {
  font-weight: 500;
  display: block;
}

.journey li span {
  font-size: 12px;
  color: var(--muted);
}

.note {
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.note b {
  font-weight: 600;
}

.wa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.wa-grid .btn {
  justify-content: flex-start;
}

.wa-grid .btn.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

.wa-preview {
  background: #eef4ea;
  border: 1px solid #dde8d6;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  white-space: pre-line;
  margin-bottom: 10px;
}

.item-line {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.item-line:last-of-type {
  border-bottom: 0;
}

.item-line b {
  font-size: 15px;
  font-weight: 500;
}

/* ---------- Pack and dispatch ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}

.step.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

.step small {
  font-size: 12px;
  color: var(--muted);
}

.step.active small {
  color: #cfcabd;
}

.step b {
  display: block;
  font-size: 15px;
  margin: 2px 0;
}

.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--subtle);
  padding: 18px;
  margin: 14px 0;
  transition: border-color .15s, background .15s;
}

.dropzone.drag {
  border-color: var(--text);
  background: #f0eee8;
}

/* ---------- Delivery tracker ---------- */
.options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.option {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}

.option.primary {
  border: 2px solid var(--text);
  padding: 13px 15px;
}

label.option:hover {
  border-color: #b9b4a8;
}

.option p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.lane {
  background: #edebe5;
  border-radius: var(--radius);
  padding: 10px;
}

.lane-head {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  padding: 2px 4px 10px;
}

.lane-head span {
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, .7);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 20px;
}

.track-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  box-shadow: var(--shadow);
  transition: box-shadow .15s;
}

.track-card:hover {
  box-shadow: var(--shadow-lift);
}

.track-card.alert {
  border-color: var(--orange-line);
  border-left: 4px solid var(--orange-line);
}

.track-card .top {
  display: flex;
  justify-content: space-between;
}

.track-card .awb {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.track-card .hint {
  font-size: 12px;
  font-weight: 500;
  margin: 2px 0 6px;
}

.track-card .links {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}

.track-card select {
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: #fff;
}

.lane.wide {
  grid-column: 1 / -1;
}

.lane.wide .cards {
  display: grid;
  gap: 8px;
}

.big-num {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---------- Polish: sidebar name, search, tiles, setup, empty screens ---------- */
.brand-text {
  min-width: 0;
}

.brand .brand-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.25;
  font-weight: 600;
}

.brand-text span {
  display: block;
  margin-top: 2px;
}

.search-box {
  position: relative;
}

.search-box .icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.search-box .input {
  padding-left: 34px;
  width: 320px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--faint);
}

.dot-green {
  background: #3a9a52;
  box-shadow: 0 0 0 3px rgba(58, 154, 82, .15);
}

.dot-yellow {
  background: #c79a1e;
}

.dot-grey {
  background: #b4b0a6;
}

.sync {
  display: inline-flex;
  align-items: center;
}

.count-pill {
  background: var(--dark);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 9px;
}

.side-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.side-head .icon {
  color: var(--muted);
  width: 17px;
  height: 17px;
}

.side-head h2 {
  flex: 1;
  min-width: 0;
}

.side-head .chip {
  font-size: 11px;
}

.card.dark .side-head .icon {
  color: #a9a59b;
}

.pickup-warn {
  color: #f5b38a;
  font-weight: 500;
}

.action-row .when {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.action-row .when .icon {
  width: 13px;
  height: 13px;
}

.action-row .title a {
  text-decoration: none;
}

.action-row .title a:hover b {
  text-decoration: underline;
}

.action-msg {
  color: #3d3c38;
}

/* KPI tiles with an icon chip; "alert" tiles get a warm tint */
a.kpi {
  text-decoration: none;
  color: inherit;
  display: block;
}

.kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}

.kpi .label {
  line-height: 1.3;
  min-height: 2.6em;
}

.setup-step .btn {
  margin-top: 8px;
}

.yes {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
}

.yes .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.no {
  color: #c4c0b6;
  font-weight: 600;
}

.person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.person .avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
  background: var(--grey-bg);
  color: var(--grey);
}

.kpi-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
}

.kpi-icon .icon {
  width: 16px;
  height: 16px;
}

.tone-blue {
  background: var(--blue-bg);
  color: var(--blue);
}

.tone-yellow {
  background: var(--yellow-bg);
  color: var(--yellow);
}

.tone-purple {
  background: var(--purple-bg);
  color: var(--purple);
}

.tone-green {
  background: var(--green-bg);
  color: var(--green);
}

.tone-grey {
  background: var(--grey-bg);
  color: var(--grey);
}

.tone-alert {
  background: var(--orange-bg);
  color: var(--orange);
}

.kpi-alert {
  border-color: #f3c3ad;
  background: linear-gradient(180deg, #fff7f3, #fff 70%);
}

.kpi-alert .caption {
  color: var(--orange);
  font-weight: 500;
}

/* "Set up your desk" */
.setup {
  padding: 18px 20px;
  margin-bottom: 20px;
  border-color: #e3dccb;
  background: linear-gradient(135deg, #fffdf8 0%, #fff 60%);
}

.setup-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.setup-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--dark);
  color: #fff;
  display: grid;
  place-items: center;
}

.setup-progress {
  width: 180px;
  height: 8px;
  background: #eeebe3;
  border-radius: 99px;
  overflow: hidden;
}

.setup-progress i {
  display: block;
  height: 100%;
  background: var(--bar-green);
  border-radius: 99px;
  transition: width .4s;
}

.setup-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.setup-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.setup-step b {
  font-weight: 600;
  font-size: 13.5px;
  display: block;
}

.setup-step p {
  margin: 2px 0 0;
}

.setup-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  flex: none;
}

.setup-step.done {
  background: #f6fbf6;
  border-color: #d5e9d8;
}

.setup-step.done b {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, .25);
}

.setup-step.done .setup-num {
  background: var(--bar-green);
  border-color: var(--bar-green);
  color: #fff;
}

.setup-num .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

/* Empty screens */
.empty {
  text-align: center;
  padding: 38px 24px;
  color: var(--muted);
}

.empty-sm {
  padding: 22px 16px;
}

.empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: var(--grey-bg);
  color: var(--grey);
}

.empty-sm .empty-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  margin-bottom: 8px;
}

.empty-icon .icon {
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 1;
}

.empty-title {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}

.empty-text {
  max-width: 380px;
  margin: 4px auto 14px !important;
  font-size: 13px;
}

.empty-sm .empty-text {
  margin-bottom: 0 !important;
}

.empty .btn .icon {
  width: 15px;
  height: 15px;
}

/* Tracker lanes: a colour per stage */
.lane {
  border-top: 3px solid transparent;
}

.lane-0 {
  border-top-color: #b4b0a6;
}

.lane-1 {
  border-top-color: #6c8fd0;
}

.lane-2 {
  border-top-color: #8f7ad6;
}

.lane-3 {
  border-top-color: #5aa66b;
}

.lane.wide {
  border-top-color: var(--orange-line);
}

.lane-empty {
  text-align: center;
  color: var(--faint);
  font-size: 12.5px;
  padding: 18px 8px;
  margin: 0;
  border: 1px dashed #d9d5cb;
  border-radius: 9px;
}

/* Pack and dispatch steps */
.step {
  display: flex;
  gap: 12px;
  align-items: center;
}

.step b {
  margin: 0 0 1px;
}

.step small {
  display: block;
}

.step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  background: var(--grey-bg);
  color: var(--grey);
  flex: none;
}

.step.active .step-num {
  background: #fff;
  color: var(--dark);
}

.step.complete:not(.active) {
  border-color: #d5e9d8;
  background: #f6fbf6;
}

.step.complete:not(.active) .step-num {
  background: var(--bar-green);
  color: #fff;
}

/* Roles on the Team page */
.role-owner {
  background: #1f1f1f;
  color: #fff;
}

.role-ops_lead {
  background: var(--purple-bg);
  color: var(--purple);
}

.role-care {
  background: var(--blue-bg);
  color: var(--blue);
}

.role-packing {
  background: var(--yellow-bg);
  color: var(--yellow);
}

.role-viewer {
  background: var(--grey-bg);
  color: var(--grey);
}

/* ---------- Settings page ---------- */
html {
  scroll-behavior: smooth;
}

.status-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.status-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}

.status-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.status-card .kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.status-card b {
  display: block;
  font-weight: 600;
}

.settings-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 2px;
}

.settings-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #4a4944;
  font-weight: 500;
  transition: background .15s;
}

.settings-nav a:hover {
  background: #ecebe5;
  color: var(--text);
}

.settings-nav a .icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.settings-nav a .dot {
  margin: 0 0 0 auto;
}

.dot-warn {
  background: var(--orange-line);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, .15);
}

.settings-body {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.set-section {
  scroll-margin-top: 20px;
}

.set-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.set-head .kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.set-head p {
  margin: 2px 0 0;
}

.set-body {
  padding: 20px 22px;
}

.set-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.set-step+.set-step {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--border);
}

.set-step .step-num {
  width: 28px;
  height: 28px;
  background: var(--dark);
  color: #fff;
}

.set-step b .chip {
  margin-left: 6px;
  font-weight: 500;
  vertical-align: 1px;
}

.path {
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.hint {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0 !important;
}

.hint code,
.set-body code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
}

.copy-field {
  display: flex;
  gap: 8px;
}

.copy-field .input {
  flex: 1;
  min-width: 0;
  background: var(--subtle);
}

.ship-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ship-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.ship-option:hover {
  border-color: #bdb8ac;
}

.ship-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ship-option b {
  font-size: 14.5px;
  margin-top: 6px;
}

.ship-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--grey-bg);
  color: var(--grey);
}

.ship-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: transparent;
}

.ship-check .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}

.ship-option.selected {
  border-color: var(--dark);
  box-shadow: 0 0 0 3px var(--focus);
  background: #fffdf9;
}

.ship-option.selected .ship-icon {
  background: var(--dark);
  color: #fff;
}

.ship-option.selected .ship-check {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}

.ship-option:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--focus);
}

.ship-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--subtle);
  border: 1px solid var(--border);
}

.ship-panel .input {
  background: #fff;
}

.rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.rule {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--subtle);
}

.rule .input {
  background: #fff;
}

.input-unit {
  display: flex;
  align-items: stretch;
}

.input-unit .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  min-width: 0;
}

.input-unit span {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #f1efe9;
  color: var(--muted);
  font-size: 13px;
}

.input-unit.unit-left span {
  order: -1;
  border-left: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-unit.unit-left .input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.toggle input {
  position: absolute;
  opacity: 0;
}

.toggle-track {
  width: 40px;
  height: 23px;
  border-radius: 99px;
  background: #d6d2c8;
  position: relative;
  flex: none;
  transition: background .2s;
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .2s;
}

.toggle input:checked+.toggle-track {
  background: var(--bar-green);
}

.toggle input:checked+.toggle-track::after {
  transform: translateX(17px);
}

.toggle input:focus-visible+.toggle-track {
  box-shadow: 0 0 0 3px var(--focus);
}

.save-bar {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 20px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

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

@media (max-width: 900px) {

  .status-cards,
  .ship-options,
  .rules {
    grid-template-columns: 1fr;
  }

  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-nav {
    position: static;
    grid-template-columns: repeat(2, 1fr);
  }

  .set-head,
  .set-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .save-bar span {
    display: none;
  }
}

@media (max-width: 1200px) {
  .setup-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .setup-steps {
    grid-template-columns: 1fr;
  }

  .setup-progress {
    width: 100%;
  }

  .search-box,
  .search-box .input {
    width: 100%;
  }
}

/* ---------- Sign-in, register, forgot password (shops) ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.auth-brand {
  background: var(--dark);
  color: var(--dark-text);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.auth-brand::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 242, 236, .10), transparent 70%);
}

.auth-brand .brand {
  padding: 0;
}

.auth-brand h1 {
  font-size: 32px;
  line-height: 1.2;
  max-width: 420px;
  margin: 0 0 14px;
  color: #fff;
}

.auth-brand p {
  color: #b9b5ab;
  max-width: 420px;
  margin: 0;
}

.auth-points {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 12px;
}

.auth-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #dedad2;
}

.auth-points .icon {
  color: #9fd3a8;
  margin-top: 2px;
}

.auth-foot {
  font-size: 12px;
  color: #77746c;
}

.auth-main {
  display: grid;
  place-items: center;
  padding: 40px 24px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
}

.auth-card.wide {
  max-width: 480px;
}

.auth-card h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
}

.auth-card .lead {
  color: var(--muted);
  margin: 6px 0 22px;
}

.auth-alt {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 18px;
}

.or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--faint);
  font-size: 12px;
  margin: 4px 0;
}

.or::before,
.or::after {
  content: "";
  height: 1px;
  background: var(--border);
  flex: 1;
}

/* Legacy single-card sign-in (blocked page, print views) */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.login .card {
  width: 100%;
  max-width: 400px;
  padding: 30px;
}

.login .brand {
  padding: 0 0 20px;
  color: var(--text);
}

.login .brand span {
  color: var(--muted);
}

/* ---------- Fresh look: soft cards, colour accents, blue primary ---------- */
::selection {
  background: #d6e6ff;
}

h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3 {
  font-weight: 700;
}

.link {
  color: var(--link);
  text-decoration-color: rgba(29, 100, 216, .3);
  font-weight: 500;
}

/* Sidebar */
.sidebar {
  background: linear-gradient(180deg, #0f1b33 0%, #13223f 100%);
}

.brand-mark {
  background: var(--primary-grad);
  color: #fff;
  border-radius: 11px;
  box-shadow: var(--primary-shadow);
}

.brand span {
  color: #8193b2;
}

.nav a {
  color: #c5d0e3;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 500;
}

.nav a:hover {
  background: rgba(255, 255, 255, .06);
}

.nav a.active {
  background: var(--primary-grad);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--primary-shadow);
}

.me {
  border-top-color: rgba(255, 255, 255, .08);
}

.avatar {
  background: #24365a;
}

.me span,
.me button {
  color: #8193b2;
}

/* Page header card: icon tile, breadcrumb, title */
.page-head {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px 26px;
  box-shadow: var(--shadow);
  align-items: center;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.page-icon {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  background: var(--primary-grad);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--primary-shadow);
}

.page-icon .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.9;
}

.page-title-text {
  min-width: 0;
}

.crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--faint);
  font-weight: 500;
  margin-bottom: 3px;
}

.crumb .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
}

.crumb b {
  color: var(--primary);
  font-weight: 600;
}

.page-sub {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14.5px;
}

.page-head .eyebrow {
  color: var(--faint);
}

/* Cards */
.card {
  border-color: var(--border);
}

.card-head {
  border-bottom-color: var(--border);
  padding: 18px 22px;
}

.card-pad {
  padding: 20px 22px;
}

.card.dark {
  background: linear-gradient(160deg, #13223f 0%, #0f1b33 100%);
  border-color: transparent;
}

.divider {
  border-top-color: var(--border);
}

/* KPI tiles: coloured left edge, label pill, tinted icon tile */
.kpis {
  gap: 16px;
}

.kpi {
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  border-left: 4px solid var(--kpi, var(--primary));
}

.kpi:hover {
  transform: translateY(-2px);
}

/* label pill on top, then the icon tile beside the big number, then the caption (a.kpi.kpi beats the older a.kpi block rule) */
a.kpi.kpi,
.kpi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "label label" "icon value" "caption caption";
  column-gap: 12px;
  align-items: center;
}

.kpi .kpi-top {
  display: contents;
}

.kpi .label {
  grid-area: label;
  justify-self: start;
  max-width: 100%;
  margin-bottom: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi .kpi-icon {
  grid-area: icon;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.kpi .label {
  height: 22px;
  line-height: 16px;
  vertical-align: top;
}

.kpis {
  align-items: stretch;
}

.kpi {
  align-content: start;
}

.kpi .kpi-icon .icon {
  width: 18px;
  height: 18px;
}

.kpi .value {
  grid-area: value;
  margin: 0;
  line-height: 1;
}

.kpi .caption {
  grid-area: caption;
  margin-top: 12px;
  line-height: 1.35;
}

.kpi .label {
  display: inline-block;
  min-height: 0;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--kpi-text, var(--blue));
  background: var(--kpi-bg, var(--blue-bg));
  border: 1px solid color-mix(in srgb, var(--kpi, var(--primary)) 35%, transparent);
}

.kpi-top {
  align-items: center;
  margin-bottom: 10px;
}

.kpi .value {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 2px;
}

.kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.kpi-tone-blue {
  --kpi: #3b82f6;
  --kpi-bg: var(--blue-bg);
  --kpi-text: var(--blue);
}

.kpi-tone-green {
  --kpi: #22c55e;
  --kpi-bg: var(--green-bg);
  --kpi-text: var(--green);
}

.kpi-tone-yellow {
  --kpi: #f59e0b;
  --kpi-bg: var(--yellow-bg);
  --kpi-text: var(--yellow);
}

.kpi-tone-purple {
  --kpi: #8b5cf6;
  --kpi-bg: var(--purple-bg);
  --kpi-text: var(--purple);
}

.kpi-tone-grey {
  --kpi: #94a3b8;
  --kpi-bg: var(--grey-bg);
  --kpi-text: var(--grey);
}

.kpi-tone-alert {
  --kpi: #f97316;
  --kpi-bg: var(--orange-bg);
  --kpi-text: var(--orange);
}

.kpi.kpi-alert {
  border-color: #fbd5bb;
  border-left-color: var(--kpi);
  background: linear-gradient(180deg, #fff8f3, #fff 70%);
}

/* Badges and chips */
.badge {
  font-weight: 600;
  padding: 3px 10px 3px 9px;
}

.chip {
  background: var(--grey-bg);
  color: var(--grey);
  font-weight: 500;
}

.count-pill {
  background: var(--primary);
}

/* Buttons */
.btn {
  border-radius: 12px;
  padding: 9px 16px;
  font-weight: 600;
  border-color: var(--border-strong);
}

.btn:hover {
  border-color: #a9c4ee;
  background: #f5f9ff;
  color: var(--primary-2);
}

.btn-dark {
  background: var(--primary-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--primary-shadow);
}

.btn-dark:hover {
  background: linear-gradient(135deg, #2d7df5 0%, #1352c4 100%);
  color: #fff;
  border-color: transparent;
}

.btn-sm {
  padding: 6px 12px;
  border-radius: 10px;
}

.wa-grid .btn.active {
  background: var(--primary-grad);
  border-color: transparent;
  color: #fff;
}

/* Forms */
label.field {
  color: #475569;
  font-weight: 600;
}

.input,
select.input,
textarea.input {
  border-radius: 12px;
  padding: 10px 14px;
  border-color: var(--border-strong);
}

.input:hover {
  border-color: #b7c4d8;
}

.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--focus);
}

.check input {
  accent-color: var(--primary);
}

.filters {
  gap: 14px;
  padding: 18px 20px;
}

.filters-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.filters-actions .btn {
  flex: 1;
}

/* Tabs */
.pill {
  padding: 8px 16px;
  font-weight: 500;
  border-color: var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
}

.pill:hover {
  border-color: #a9c4ee;
  color: var(--primary-2);
}

.pill.active {
  background: var(--primary-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--primary-shadow);
}

.pill.active span {
  color: rgba(255, 255, 255, .8);
}

.pill.tone-orange,
.pill.tone-yellow {
  box-shadow: none;
}

/* Tables */
.table th {
  background: var(--subtle);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
}

.table tr.clickable:hover td,
.table tr.selected td {
  background: #f6faff;
}

.table tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--primary);
}

/* Today, dispatch, tracker */
.action-row:hover {
  background: #f8fbff;
}

.bar {
  background: #edf1f7;
}

.step {
  border-radius: var(--radius);
}

.step.active {
  background: var(--primary-grad);
  border-color: transparent;
  box-shadow: var(--primary-shadow);
}

.step.active small {
  color: rgba(255, 255, 255, .8);
}

.step.active .step-num {
  color: var(--primary);
}

.step.complete:not(.active) {
  border-color: #c6ecd2;
  background: #f3fcf6;
}

.dropzone {
  border-color: #bcd0ee;
  background: #f7faff;
  border-radius: var(--radius);
}

.dropzone.drag {
  border-color: var(--primary);
  background: #edf4ff;
}

.option.primary {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--focus);
}

.lane {
  background: #edf1f7;
  border-radius: var(--radius);
  padding: 12px;
}

.track-card {
  border-radius: 14px;
}

.lane-empty {
  border-color: #d3dbe7;
  border-radius: 12px;
}

/* Order journey */
.journey li.done::before {
  background: var(--primary);
  border-color: var(--primary);
}

.journey li.done:not(:last-child)::after {
  background: var(--primary);
}

.journey li.current::before {
  border-color: var(--primary);
}

/* Settings */
.setup {
  border-color: #d6e4fb;
  background: linear-gradient(135deg, #f5f9ff 0%, #fff 60%);
}

.setup-icon,
.set-step .step-num {
  background: var(--primary-grad);
  color: #fff;
}

.settings-nav a {
  border-radius: 12px;
}

.settings-nav a:hover {
  background: #e8eef8;
}

.ship-option {
  border-radius: var(--radius);
}

.ship-option.selected {
  border-color: var(--primary);
  background: #f7faff;
}

.ship-option.selected .ship-icon,
.ship-option.selected .ship-check {
  background: var(--primary-grad);
  border-color: transparent;
  color: #fff;
}

.toggle-track {
  background: #cfd8e5;
}

.role-owner {
  background: var(--dark);
  color: #fff;
}

/* Top bar: search from any page, date, who is signed in */
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: -30px -32px 24px;
  padding: 14px 32px;
  background: rgba(243, 246, 251, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(213, 220, 231, .7);
}

.topbar-search {
  flex: 1;
  max-width: 480px;
}

.topbar-search .input {
  width: 100%;
  background: #fff;
  border-color: var(--border);
  border-radius: 999px;
  padding-top: 9px;
  padding-bottom: 9px;
  box-shadow: var(--shadow);
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  box-shadow: var(--shadow);
}

.topbar-date .icon {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.topbar-user .avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
  background: var(--primary-grad);
}

.topbar-user b {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

.topbar-user small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.2;
}

/* Every tab: gradient banner header. The circles are background shapes, so pop-up forms opening from the header are not clipped. */
.page-head {
  position: relative;
  z-index: 2;
  border: 0;
  color: #fff;
  padding: 28px 30px;
  background:
    radial-gradient(circle at calc(100% + 20px) -40px, rgba(255, 255, 255, .13) 0 150px, transparent 151px),
    radial-gradient(circle at calc(100% - 250px) calc(100% + 70px), rgba(255, 255, 255, .08) 0 100px, transparent 101px),
    linear-gradient(120deg, #1d4ed8 0%, #2f7cf6 55%, #5aa2ff 100%);
  box-shadow: 0 18px 40px rgba(33, 114, 243, .22);
}

.page-head .page-icon {
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.page-head .crumb,
.page-head .crumb b {
  color: rgba(255, 255, 255, .85);
}

.page-head .page-sub,
.page-head .sync,
.page-head>.row .muted {
  color: rgba(255, 255, 255, .88);
}

.page-head h1 {
  color: #fff;
}

.page-head .chip {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* Buttons on the banner: white main button, see-through others */
.page-head>.head-tools .btn,
.page-head>.row .btn,
.page-head>details>summary.btn,
.page-head>.head-tools label.btn {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
  box-shadow: none;
}

.page-head>.head-tools .btn:hover,
.page-head>.row .btn:hover,
.page-head>details>summary.btn:hover {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

.page-head>.head-tools .btn-dark,
.page-head>.head-tools .btn-light,
.page-head>.row .btn-dark,
.page-head>details>summary.btn-dark,
.page-head>.head-tools label.btn-dark {
  background: #fff;
  color: var(--primary-2);
  border-color: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .15);
}

.page-head>.head-tools .btn-dark:hover,
.page-head>.row .btn-dark:hover,
.page-head>details>summary.btn-dark:hover {
  background: #eef4ff;
  color: var(--primary-2);
}

.page-head .btn .icon {
  width: 15px;
  height: 15px;
}

.crumb a {
  text-decoration: none;
}

.crumb a:hover b {
  text-decoration: underline;
}

/* Pop-up forms inside the banner keep the normal card look */
.page-head .card {
  color: var(--text);
  box-shadow: var(--shadow-lift);
}

.page-head details {
  position: relative;
}

.page-head details>.card {
  right: 0;
}

/* Only Today gets the big welcome banner; work tabs get a slim one so the work starts higher up */
.page-head:not(.hero) {
  padding: 16px 24px;
  border-radius: 18px;
  margin-bottom: 20px;
}

.page-head:not(.hero) .page-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.page-head:not(.hero) .page-icon .icon {
  width: 21px;
  height: 21px;
}

.page-head:not(.hero) h1 {
  font-size: 22px;
}

.page-head:not(.hero) .crumb {
  margin-bottom: 1px;
  font-size: 12px;
}

.page-head:not(.hero) .page-sub {
  margin-top: 2px;
  font-size: 13.5px;
}

.page-head:not(.hero) .page-title {
  gap: 14px;
}

/* Sidebar groups and "waiting here" counts; labels stay on one line next to their count */
.app {
  grid-template-columns: 248px 1fr;
}

.nav a {
  white-space: nowrap;
}

.nav .nav-label {
  padding: 0 14px 8px;
}

.nav .nav-label~.nav-label {
  margin-top: 18px;
}

.nav-count {
  background: rgba(255, 255, 255, .12);
  color: #dbe6ff;
  font-weight: 700;
}

.nav-count-alert {
  background: #f97316;
  color: #fff;
}

.nav a.active .nav-count {
  background: #fff;
  color: var(--primary-2);
}

/* Order page: the journey as a progress bar across the top */
.journey-card {
  margin-bottom: 20px;
}

.journey-h {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.journey-h li {
  padding: 28px 12px 0 0;
}

.journey-h li::before {
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
}

.journey-h li:not(:last-child)::after {
  left: 22px;
  right: 6px;
  top: 8px;
  bottom: auto;
  width: auto;
  height: 2px;
}

.journey-h li b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.journey-h li span {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: 3px;
}

.journey-h li.current b {
  color: var(--primary);
}

/* Pack and dispatch: the AWB card stays in view while the packing list scrolls */
.sticky-side {
  position: sticky;
  top: 92px;
}

/* Fold-out for set-up information */
.fold>summary {
  list-style: none;
}

.fold-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
}

.fold-head>span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.fold-head b {
  display: block;
}

.fold-head small {
  display: block;
  font-size: 12.5px;
}

.fold-head .kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.fold-chev {
  color: var(--faint);
  transition: transform .2s;
}

.fold[open] .fold-chev {
  transform: rotate(90deg);
}

.fold-body {
  padding: 0 20px 20px;
}

.fold-body .options {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .journey-h {
    display: block;
  }

  .journey-h li {
    padding: 0 0 18px 28px;
  }

  .journey-h li::before {
    left: 2px;
    top: 4px;
    width: 12px;
    height: 12px;
  }

  .journey-h li:not(:last-child)::after {
    left: 8px;
    right: auto;
    top: 18px;
    bottom: 0;
    width: 1px;
    height: auto;
  }

  .sticky-side {
    position: static;
  }
}

/* ---------- Order page ---------- */
.order-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.order-grid>aside {
  position: sticky;
  top: 92px;
}

/* customer, owner and notes stay in view while you work on the left */
.kpis.kpis-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpis-4 .kpi .value {
  font-size: 26px;
}

/* "Next step" strip: what this order needs right now */
.next-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--next, var(--primary));
  box-shadow: var(--shadow);
}

.next-step .kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.next-step .kpi-icon .icon {
  width: 20px;
  height: 20px;
}

.next-text {
  flex: 1;
  min-width: 0;
  display: grid;
}

.next-text small {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

.next-text b {
  font-size: 16.5px;
  font-weight: 700;
}

.next-text span {
  color: var(--muted);
  font-size: 13.5px;
}

.next-step .btn .icon {
  width: 15px;
  height: 15px;
}

.next-yellow {
  --next: #f59e0b;
  background: linear-gradient(90deg, #fffbeb, #fff 60%);
}

.next-purple {
  --next: #8b5cf6;
  background: linear-gradient(90deg, #faf7ff, #fff 60%);
}

.next-blue {
  --next: #3b82f6;
  background: linear-gradient(90deg, #f3f8ff, #fff 60%);
}

.next-green {
  --next: #22c55e;
  background: linear-gradient(90deg, #f0fdf4, #fff 60%);
}

.next-alert {
  --next: #f97316;
  background: linear-gradient(90deg, #fff5ee, #fff 60%);
}

.next-grey {
  --next: #94a3b8;
}

/* Card headings with a small icon tile */
.sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.sec-head h2 {
  flex: 1;
  min-width: 0;
}

.sec-head h2 label {
  cursor: pointer;
}

.sec-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}

.sec-icon .icon {
  width: 16px;
  height: 16px;
}

.sec-note {
  text-align: right;
}

.journey-card .sec-head {
  margin-bottom: 18px;
}

/* Items */
.product-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.product-line:last-of-type {
  border-bottom: 0;
}

.product-thumb {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--primary-2);
  background: linear-gradient(135deg, #e9f2ff, #f5f0ff);
  border: 1px solid #e3e9f6;
}

.product-info {
  flex: 1;
  min-width: 0;
}

.product-info b {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
}

.product-info .row {
  gap: 6px;
}

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--subtle);
  border: 1px solid var(--border);
  color: var(--muted);
}

.product-price {
  text-align: right;
  display: grid;
}

.product-price b {
  font-size: 15px;
  font-weight: 700;
}

.totals {
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--subtle);
  border: 1px solid var(--border);
}

.totals .kv {
  color: var(--muted);
}

.totals .kv.total {
  color: var(--text);
  border-top: 1px dashed var(--border-strong);
  margin-top: 6px;
  padding-top: 10px;
}

.totals .kv.total b:last-child {
  font-size: 18px;
  color: var(--primary-2);
}

/* Customer */
.customer-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.customer-top .avatar {
  width: 46px;
  height: 46px;
  font-size: 15px;
  font-weight: 700;
}

.customer-top small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.customer-top b {
  font-size: 16px;
  font-weight: 700;
}

.contact {
  display: grid;
  gap: 8px;
}

.contact>div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
}

.contact .icon {
  width: 16px;
  height: 16px;
  color: var(--faint);
  margin-top: 2px;
}

.issue-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0 0 !important;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--orange-bg);
  color: var(--orange);
  font-size: 13px;
  font-weight: 500;
}

.issue-note .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.btn-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-pair .btn .icon {
  width: 15px;
  height: 15px;
}

.flag {
  margin-top: 10px;
}

/* WhatsApp: the preview looks like the message the customer gets */
.wa-card .wa-grid .btn {
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}

.wa-preview {
  position: relative;
  background: #dcf8c6;
  border: 0;
  border-radius: 14px 14px 14px 4px;
  padding: 12px 14px;
  color: #1f2d1a;
  font-size: 13.5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
  margin: 4px 0 12px;
}

#wa-preview {
  padding: 12px;
  border-radius: 14px;
  background: #efeae2;
}

#wa-preview .btn-dark {
  background: linear-gradient(135deg, #25d366, #128c4a);
  box-shadow: 0 8px 18px rgba(18, 140, 74, .25);
}

#wa-preview .btn-dark:hover {
  background: linear-gradient(135deg, #22c35e, #0f7a40);
}

/* WhatsApp in the wide column: message buttons left, chat preview right */
.wa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}

.wa-layout .wa-grid {
  margin: 0;
  align-content: start;
}

.wa-layout .wa-grid .btn {
  min-height: 40px;
}

/* Shipping: AWB, courier and Save on one row in the wide column */
.ship-form {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.ship-form .btn {
  height: 42px;
}

.track-btn {
  margin-top: 12px;
}

.track-btn .icon {
  width: 15px;
  height: 15px;
}

/* Notes */
.note-form textarea.input {
  min-height: 64px;
}

.note-actions {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 4px;
}

#notes-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.note {
  margin: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #faf7ff;
  border-color: #ece4ff;
}

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

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

  .ship-form,
  .wa-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-grid>aside {
    position: static;
  }

  .next-step {
    flex-wrap: wrap;
  }

  .sec-note {
    display: none;
  }
}

/* ---------- Pack and dispatch ---------- */
.dispatch-grid {
  grid-template-columns: minmax(0, 1fr) 400px;
}

.bar .purple {
  background: #8b5cf6;
}

.bar .blue {
  background: #3b82f6;
}

/* Batch overview: progress ring, pickup countdown, meters, then the stepper */
.batch {
  padding: 22px 24px 0;
  margin-bottom: 20px;
  overflow: hidden;
}

.batch-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding-bottom: 20px;
}

.ring {
  --pct: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--primary) calc(var(--pct) * 1%), #e8eef7 0);
}

.ring>div {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .06);
}

.ring b {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.ring small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.batch-title small {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

.batch-title h2 {
  font-size: 21px;
  font-weight: 800;
  margin: 2px 0 8px;
}

.pickup-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
}

.pickup-chip .icon {
  width: 15px;
  height: 15px;
}

.pickup-chip.late {
  background: var(--orange-bg);
  color: var(--orange);
}

.batch-meters {
  display: grid;
  gap: 12px;
}

.meter .spread {
  font-size: 13px;
  color: var(--muted);
}

.meter .spread b {
  color: var(--text);
}

.meter .bar {
  margin: 6px 0 0;
  height: 8px;
}

.batch-top .btn .icon {
  width: 16px;
  height: 16px;
}

.flow {
  list-style: none;
  margin: 0 -24px;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: var(--subtle);
  border-top: 1px solid var(--border);
}

.flow li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.flow li:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  min-width: 16px;
  background: var(--border-strong);
  border-radius: 2px;
}

.flow li.done:not(:last-child)::after {
  background: #22c55e;
}

.flow li>div {
  min-width: 0;
}

.flow b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.flow small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.flow-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  background: #fff;
  border: 1.5px solid var(--border-strong);
  color: var(--muted);
}

.flow-num .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}

.flow li.active .flow-num {
  background: var(--primary-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--primary-shadow);
}

.flow li.active b {
  color: var(--primary-2);
}

.flow li.done .flow-num {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

/* Pick list */
.pick-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.pick-line:last-of-type {
  border-bottom: 0;
}

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

.pick-info b {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.pick-info .row {
  gap: 6px;
}

.order-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--blue-bg);
  color: var(--blue);
  text-decoration: none;
}

.order-chip.big {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 9px;
  font-weight: 700;
  flex: none;
}

a.order-chip:hover {
  background: #dbe8ff;
}

.qty-badge {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 52px;
  padding: 6px 10px;
  border-radius: 13px;
  background: var(--primary-grad);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--primary-shadow);
}

.qty-badge small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 2px;
}

.pick-line.is-packed {
  opacity: .6;
}

.pick-line.is-packed .product-thumb {
  background: var(--green-bg);
  color: var(--green);
  border-color: #c6ecd2;
}

.pick-line.is-packed .product-thumb .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}

.pick-line.is-packed .qty-badge {
  background: var(--grey-bg);
  color: var(--grey);
  box-shadow: none;
}

/* Packing board */
.pack-group+.pack-group {
  margin-top: 16px;
}

.pack-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  padding: 0 2px 8px;
}

.pack-group-head i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.pack-group-head i.dot-purple {
  background: #8b5cf6;
}

.pack-group-head i.dot-yellow {
  background: #f59e0b;
}

.pack-group-head i.dot-green {
  background: #22c55e;
}

.pack-group-head span {
  margin-left: auto;
  background: var(--grey-bg);
  color: var(--grey);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11.5px;
  line-height: 20px;
}

.pack-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 8px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.pack-row:hover {
  border-color: #c9d8f0;
  box-shadow: var(--shadow);
}

.pack-info {
  flex: 1;
  min-width: 0;
  display: grid;
}

.pack-info span {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-info small {
  font-size: 12px;
}

.pack-action {
  flex: none;
  min-width: 120px;
  display: flex;
  justify-content: flex-end;
}

.pack-action .btn .icon {
  width: 15px;
  height: 15px;
}

.pack-action .done {
  color: var(--green);
  font-weight: 600;
}

.awb-chip {
  padding: 4px 10px;
  border-radius: 9px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
}

.needs {
  padding: 4px 10px;
  border-radius: 9px;
  background: var(--yellow-bg);
  color: var(--yellow);
  font-size: 12.5px;
  font-weight: 600;
}

.pack-empty {
  margin: 0 0 4px;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
}

/* AWB card */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-top: 14px;
  border-radius: 14px;
  background: var(--grey-bg);
}

.segmented .pill {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 10px;
  padding: 8px 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  line-height: 1.2;
}

.segmented .pill .icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.segmented .pill.active {
  background: #fff;
  color: var(--primary-2);
  box-shadow: var(--shadow);
}

.awb-card .dropzone {
  text-align: center;
  padding: 22px 18px;
}

.drop-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  background: var(--blue-bg);
  color: var(--primary);
}

.drop-icon .icon {
  width: 24px;
  height: 24px;
}

.awb-card .dropzone.form-grid {
  text-align: left;
}

.preview-box {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

@media (max-width: 1200px) {
  .batch-top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .batch-meters {
    grid-column: 1 / -1;
  }

  .batch-top>.btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow li::after {
    display: none;
  }
}

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

  .flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .pack-row {
    flex-wrap: wrap;
  }
}

/* ---------- Delivery tracker, Returns, Team ---------- */
.kpis.kpis-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Filter toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 18px;
}

.toolbar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
  margin-right: 4px;
}

.toolbar-label .icon {
  width: 15px;
  height: 15px;
}

.toolbar-end {
  margin-left: auto;
}

.toolbar select.input {
  width: auto;
  border-radius: 999px;
  padding: 7px 34px 7px 14px;
}

/* Selected filter pills fill with their own colour (no dark ring) */
.pill.tone-orange.active {
  background: #f97316;
  color: #fff;
  box-shadow: 0 6px 16px rgba(249, 115, 22, .3);
}

.pill.tone-yellow.active {
  background: #f59e0b;
  color: #fff;
  box-shadow: 0 6px 16px rgba(245, 158, 11, .3);
}

.pill-x {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0 -4px 0 6px !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  color: #fff !important;
  font-size: 10px;
}

/* Date range bar */
.date-bar {
  margin-bottom: 12px;
}

.date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--grey-bg);
}

.date-chip {
  padding: 7px 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.date-chip:hover {
  color: var(--primary-2);
  background: rgba(255, 255, 255, .6);
}

.date-chip.active {
  background: #fff;
  color: var(--primary-2);
  box-shadow: var(--shadow);
}

.date-custom {
  position: relative;
}

.date-custom>summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.date-custom>summary::-webkit-details-marker {
  display: none;
}

.date-custom>summary .icon {
  width: 13px;
  height: 13px;
  transform: rotate(90deg);
  transition: transform .15s;
}

.date-custom[open]>summary .icon {
  transform: rotate(-90deg);
}

.date-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 10px;
  width: 250px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
}

.date-pop label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.date-pop .input {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.date-active {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 7px 8px 7px 12px;
  border-radius: 999px;
  background: var(--blue-bg);
  color: var(--primary-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.date-active .icon {
  width: 15px;
  height: 15px;
}

.date-active a {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary-2);
  text-decoration: none;
  font-size: 11px;
}

.date-active a:hover {
  background: var(--primary);
  color: #fff;
}

/* Board lanes and parcel cards */
.board {
  gap: 14px;
}

.lane {
  background: #eef2f8;
  border-top-width: 0;
  border-radius: var(--radius);
  padding: 12px;
}

.lane-head {
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  padding: 2px 4px 12px;
}

.lane-head i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94a3b8;
  flex: none;
}

.lane-head span {
  margin-left: auto;
  background: #fff;
  color: var(--text);
  font-weight: 700;
}

.lane-1 .lane-head i {
  background: #3b82f6;
}

.lane-2 .lane-head i {
  background: #8b5cf6;
}

.lane-3 .lane-head i {
  background: #22c55e;
}

.lane.wide {
  background: #fff7f1;
  border: 1px solid #fde0cc;
}

.lane.wide .lane-head i {
  background: #f97316;
}

.lane.wide .cards {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.lane.wide .cards>.empty {
  grid-column: 1 / -1;
}

.lane-empty {
  background: rgba(255, 255, 255, .55);
}

.track-card {
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 10px;
}

.track-card .top {
  align-items: center;
  margin-bottom: 6px;
}

.track-city {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-card .top {
  gap: 8px;
}

.track-city .icon {
  width: 13px;
  height: 13px;
}

.track-card .awb {
  margin-bottom: 6px;
}

.track-status {
  font-weight: 600;
  font-size: 13px;
}

.track-card .hint {
  display: inline-block;
  margin: 6px 0 10px;
  padding: 2px 9px;
  border-radius: 8px;
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 11.5px;
}

.track-card .hint:empty {
  display: none;
}

.track-card .hint.warn {
  background: var(--orange-bg);
  color: var(--orange);
}

.track-card .links {
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.track-card .links select {
  margin-left: auto;
  border-radius: 8px;
}

.track-card.alert {
  border-color: #fbcfae;
  border-left: 4px solid #f97316;
}

/* Problems first: an orange panel above the board */
.problems {
  margin-bottom: 18px;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff5ee, #fffaf6);
  border: 1px solid #fcd9c2;
}

.problems-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.problems-head .kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.problems-head b {
  display: block;
  font-size: 15.5px;
  color: #9a3412;
}

.problems-head small {
  display: block;
  color: #b4532a;
  font-size: 12.5px;
}

.problems-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.problems-cards .track-card {
  margin: 0;
}

.all-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 11px 16px;
  border-radius: 14px;
  background: var(--green-bg);
  color: var(--green);
  font-weight: 600;
  font-size: 13.5px;
  border: 1px solid #c6ecd2;
}

.all-clear .icon {
  width: 17px;
  height: 17px;
}

/* Columns line up: long ones scroll inside */
.board {
  align-items: start;
}

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

.lane-body {
  max-height: 640px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: #c7d3e6 transparent;
}

.lane-body::-webkit-scrollbar {
  width: 6px;
}

.lane-body::-webkit-scrollbar-thumb {
  background: #c7d3e6;
  border-radius: 6px;
}

.lane-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  color: var(--primary-2);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.lane-more:hover {
  background: var(--blue-bg);
}

.lane-more .icon {
  width: 14px;
  height: 14px;
}

/* Compact parcel card */
.track-card {
  padding: 11px 12px;
  margin-bottom: 8px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.track-card>* {
  min-width: 0;
}

.tc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tc-top .order-chip.big {
  font-size: 12.5px;
  padding: 3px 9px;
}

.tc-when {
  font-size: 11.5px;
  color: var(--faint);
  font-weight: 600;
}

.tc-status {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
}

.tc-status span {
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tc-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex: none;
  background: #94a3b8;
}

.stage-in_transit .tc-status i {
  background: #3b82f6;
}

.stage-out_for_delivery .tc-status i {
  background: #8b5cf6;
}

.stage-delivered .tc-status i {
  background: #22c55e;
}

.stage-delivery_failed .tc-status i,
.stage-rto .tc-status i {
  background: #f97316;
}

.tc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 11.5px;
  color: var(--muted);
}

.tc-meta .track-city {
  max-width: 100%;
  font-size: 11.5px;
}

.tc-meta .awb {
  font-family: var(--mono);
  font-size: 11px;
  margin: 0;
  color: var(--muted);
}

.track-card .hint {
  margin: 0 !important;
  justify-self: start;
}

.tc-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

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

.tc-btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  background: var(--subtle);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
}

.tc-btn:hover {
  border-color: #a9c4ee;
  color: var(--primary-2);
}

.tc-btn .icon {
  width: 15px;
  height: 15px;
}

.tc-btn.wa:hover {
  border-color: #9be2b4;
  color: var(--green);
}

.tc-foot select {
  margin-left: auto;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 150px;
  font: inherit;
  font-size: 11.5px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: #fff;
}

/* Stage tabs and parcel grid */
.stage-board {
  padding: 14px;
  margin-bottom: 4px;
}

.stage-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  background: var(--grey-bg);
  margin-bottom: 14px;
}

.stage-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  color: var(--muted);
  text-align: left;
  transition: background .15s, box-shadow .15s;
  min-width: 0;
}

.stage-tab:hover {
  background: rgba(255, 255, 255, .6);
}

.stage-tab.active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow);
}

.stage-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: #fff;
}

.stage-ico .icon {
  width: 16px;
  height: 16px;
}

.stage-tab.tone-grey .stage-ico {
  color: var(--grey);
}

.stage-tab.tone-blue .stage-ico {
  color: var(--blue);
}

.stage-tab.tone-purple .stage-ico {
  color: var(--purple);
}

.stage-tab.tone-green .stage-ico {
  color: var(--green);
}

.stage-tab.active.tone-grey .stage-ico {
  background: var(--grey-bg);
}

.stage-tab.active.tone-blue .stage-ico {
  background: var(--blue-bg);
}

.stage-tab.active.tone-purple .stage-ico {
  background: var(--purple-bg);
}

.stage-tab.active.tone-green .stage-ico {
  background: var(--green-bg);
}

.stage-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-tab b {
  font-size: 13px;
  font-weight: 800;
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
}

.stage-tab.active b {
  background: var(--primary-grad);
  color: #fff;
}

.parcel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}

.parcel-grid .track-card,
.problems-cards .track-card {
  margin: 0;
  border: 1px solid var(--border);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.parcel-grid .track-card:hover {
  border-color: #c9d8f0;
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.stage-panel .lane-more {
  margin-top: 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
}

/* Card text stays on its lines */
.tc-meta {
  flex-wrap: nowrap;
  overflow: hidden;
}

.tc-meta>* {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.tc-meta .track-city {
  flex: 0 1 auto;
  max-width: 45%;
}

.track-card .hint {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-status span {
  -webkit-line-clamp: 1;
}

.tc-foot select {
  flex: 1 1 auto;
  max-width: none;
}

.problems-cards {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}

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

/* Orders table: items stay to two lines, pagination bar */
.items-cell {
  min-width: 180px;
  max-width: 260px;
}

.items-cell span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.table .person>div {
  min-width: 0;
  max-width: 200px;
}

.table .person .sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table td {
  vertical-align: middle;
}

.awb-cell {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.pager-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 12px 10px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.pager-info {
  font-size: 13.5px;
  color: var(--muted);
}

.pager-info b {
  color: var(--text);
  font-weight: 700;
}

.pager {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pg {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}

a.pg:hover {
  border-color: #a9c4ee;
  background: #f5f9ff;
  color: var(--primary-2);
}

.pg.active {
  background: var(--primary-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--primary-shadow);
}

.pg.disabled {
  color: var(--faint);
  background: var(--subtle);
  cursor: not-allowed;
}

.pg-gap {
  color: var(--faint);
  padding: 0 2px;
}

.pager-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 4px 0;
  font-size: 12.5px;
  color: var(--faint);
}

.pager-note .icon {
  width: 14px;
  height: 14px;
}

/* Date dropdown (like Shiprocket) */
.date-drop {
  position: relative;
}

.date-drop>summary {
  list-style: none;
}

.date-drop>summary::-webkit-details-marker,
.date-item-custom>summary::-webkit-details-marker {
  display: none;
}

.date-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 170px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: #fff;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.date-btn:hover {
  border-color: #a9c4ee;
}

.date-btn>.icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.date-btn>span {
  flex: 1;
  white-space: nowrap;
}

.date-btn.is-set {
  border-color: var(--primary);
  background: var(--blue-bg);
  color: var(--primary-2);
}

.date-caret .icon {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
  transition: transform .15s;
  color: var(--muted);
}

.date-drop[open] .date-caret .icon {
  transform: rotate(-90deg);
}

.date-drop[open]>.date-btn {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--focus);
}

.date-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 240px;
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
}

.date-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  cursor: pointer;
  list-style: none;
}

.date-item:hover {
  background: var(--subtle);
}

.date-item.active {
  color: var(--primary-2);
  font-weight: 600;
  background: var(--blue-bg);
}

.date-item .icon {
  width: 15px;
  height: 15px;
  color: var(--primary);
  stroke-width: 2.4;
}

.date-item-custom {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 4px;
}

.date-custom-form {
  display: grid;
  gap: 8px;
  padding: 8px 6px 4px;
}

.date-custom-form label {
  display: grid;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.date-custom-form .input {
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 13px;
}

.date-clear {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
}

.date-clear:hover {
  background: var(--subtle);
  color: var(--orange);
}

.section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 2px 14px;
}

.section-bar h2 {
  font-size: 17px;
}

.section-tools,
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-tools .date-menu {
  left: auto;
  right: 0;
}

.section-bar,
.toolbar {
  position: relative;
  z-index: 25;
}

.toolbar-sep {
  width: 1px;
  height: 26px;
  background: var(--border);
  margin: 0 4px;
}

/* Cleaner tiles: icon and full label on top, big number, a note only for warnings */
a.kpi.kpi,
.kpi {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "icon" "label" "value" "caption";
  row-gap: 0;
  overflow: hidden;
}

.kpi .kpi-icon {
  justify-self: start;
  margin-bottom: 12px;
}

.kpi .label {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.kpi .label {
  background: none !important;
  border: 0 !important;
  padding: 0;
  height: auto;
  margin: 0;
  white-space: normal;
  overflow: visible;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted) !important;
  line-height: 1.25;
}

.kpi .kpi-icon {
  width: 36px;
  height: 36px;
}

.kpi .value {
  margin-top: 6px;
  font-size: 30px;
}

.kpi .caption {
  margin-top: 8px;
  font-size: 12px;
}

/* Delivery proof and COD */
.proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.proof>div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: var(--subtle);
  border: 1px solid var(--border);
}

.proof .kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.proof b {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.proof small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.cod-due {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--orange-bg);
  color: var(--orange);
  font-weight: 600;
}

.cod-due b {
  font-size: 20px;
  font-weight: 800;
}

/* Returns: stage tiles work as tabs */
.kpis.stage-tiles {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.stage-tiles .kpi {
  padding: 14px 14px 16px;
}

@media (max-width: 1300px) {
  .kpis.stage-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

.stage-tiles .kpi {
  text-decoration: none;
  color: inherit;
}

.stage-tiles .kpi.is-active {
  box-shadow: 0 0 0 2px var(--kpi), var(--shadow-lift);
}

.stage-tiles .kpi.is-active .caption {
  color: var(--kpi-text);
  font-weight: 600;
}

.returns-grid {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.panel-empty {
  text-align: center;
  padding: 10px 4px;
}

.panel-empty b {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.how {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  text-align: left;
}

.how li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
  font-size: 13px;
}

.how span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--primary-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.checklist {
  display: grid;
  gap: 6px;
  margin-bottom: 4px;
}

.checklist .check {
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--subtle);
}

.checklist .check:has(input:checked) {
  background: var(--green-bg);
  border-color: #c6ecd2;
  color: var(--green);
  font-weight: 600;
}

/* Team */
.role-col {
  text-align: center;
}

.role-col .badge {
  font-size: 11px;
}

.table td:has(> .yes),
.table td:has(> .no) {
  text-align: center;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline li {
  position: relative;
  padding: 0 0 14px 22px;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 2px;
  width: 1px;
  background: var(--border-strong);
}

.timeline li small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1200px) {
  .kpis.kpis-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proof {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .returns-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .toolbar-end {
    margin-left: 0;
  }

  .date-active {
    margin-left: 0;
  }

  .date-pop {
    right: auto;
    left: 0;
  }
}

/* Summary cards on other tabs: same coloured edge as the Today tiles */
.status-card {
  border-left: 4px solid #94a3b8;
  border-radius: var(--radius);
}

.status-card:has(.tone-green) {
  border-left-color: #22c55e;
}

.status-card:has(.tone-yellow) {
  border-left-color: #f59e0b;
}

.status-card:has(.tone-purple) {
  border-left-color: #8b5cf6;
}

.status-card:has(.tone-blue) {
  border-left-color: #3b82f6;
}

.status-card:has(.tone-alert) {
  border-left-color: #f97316;
}

.status-card .kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.status-card b {
  font-size: 15px;
}

.step {
  border-left: 4px solid #cbd5e1;
}

.step.complete:not(.active) {
  border-left-color: #22c55e;
}

.step.active {
  border-left-color: transparent;
}

.option {
  border-left: 4px solid #cbd5e1;
  border-radius: var(--radius);
}

.option.primary {
  border-left: 4px solid var(--primary);
}

/* Action rows: text takes the room, buttons stay on one line */
.action-row> :first-child {
  flex: 1;
  min-width: 0;
}

.action-row>.row {
  flex: none;
  flex-wrap: nowrap;
}

.action-row .btn {
  padding: 8px 14px;
}

.action-row .btn .icon {
  width: 16px;
  height: 16px;
}

/* Customer initials in tables */
.person .avatar {
  font-weight: 700;
}

.avatar.avatar-0 {
  background: #e9f2ff;
  color: #1d5fd1;
}

.avatar.avatar-1 {
  background: #e8f8ed;
  color: #15803d;
}

.avatar.avatar-2 {
  background: #fff1e7;
  color: #c2410c;
}

.avatar.avatar-3 {
  background: #f2ecff;
  color: #6d28d9;
}

.avatar.avatar-4 {
  background: #fff6db;
  color: #a16207;
}

.avatar.avatar-5 {
  background: #ffeaf1;
  color: #be185d;
}

/* Sidebar menu label */
.nav-label {
  color: #6f82a4;
  font-weight: 700;
  padding: 0 14px 10px;
}

/* Pages ease in */
.main>.page-head,
.main>.kpis,
.main>.grid-2,
.main>.card,
.main>section,
.main>.board,
.main>.steps,
.main>.grid-half,
.main>form {
  animation: rise .35s ease-out both;
}

.main>.kpis {
  animation-delay: .05s;
}

.main>.grid-2,
.main>.grid-half {
  animation-delay: .1s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main>* {
    animation: none !important;
  }
}

/* Sign-in pages */
.auth-brand::after {
  background: radial-gradient(circle, rgba(59, 139, 255, .25), transparent 70%);
}

@media (max-width: 900px) {
  .topbar {
    position: static;
    margin: -20px -16px 18px;
    padding: 12px 16px;
  }

  .topbar-search {
    max-width: none;
  }

  .topbar-right {
    display: none;
  }

  .action-row>.row {
    flex-wrap: wrap;
  }

  .page-head {
    padding: 18px;
    border-radius: 18px;
  }

  .page-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .page-icon .icon {
    width: 22px;
    height: 22px;
  }

  h1 {
    font-size: 23px;
  }
}

/* ---------- Sign in, register, forgot and new password ---------- */
.auth {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--bg);
}

/* Left panel: deep navy with soft blue glows and a faint dot pattern */
.auth-brand {
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(520px circle at 88% 8%, rgba(59, 130, 246, .42), transparent 62%),
    radial-gradient(460px circle at 4% 96%, rgba(99, 102, 241, .32), transparent 62%),
    radial-gradient(320px circle at 55% 55%, rgba(56, 189, 248, .10), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(160deg, #0a1530 0%, #0f2148 55%, #0b1836 100%);
}

.auth-brand::after {
  display: none;
}

.auth-brand .brand-mark {
  background: var(--primary-grad);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .45);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 15px;
}

.auth-brand .brand-name {
  font-size: 17px;
  color: #fff;
}

.auth-brand .brand span {
  color: #8ea3c7;
}

.auth-pitch {
  max-width: 480px;
}

.auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(96, 165, 250, .14);
  border: 1px solid rgba(147, 197, 253, .25);
  color: #bfdbfe;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 18px;
  margin-top: 5px
}

.auth-kicker .icon {
  width: 15px;
  height: 15px;
}

.auth-brand h1 {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 470px;
  color: #fff;
}

.glow-text {
  background: linear-gradient(90deg, #93c5fd 0%, #60a5fa 50%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-brand p {
  color: #b4c3de;
  font-size: 15px;
}

.auth-points {
  gap: 10px;
  margin-top: 26px;
}

.auth-points li {
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(148, 178, 230, .16);
  color: #e2e9f6;
  font-weight: 500;
  font-size: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s, border-color .2s;
}

.auth-points li:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(147, 197, 253, .3);
}

.auth-points li>span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--primary-grad);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .4);
}

.auth-points li .icon {
  margin: 0;
  color: #fff;
  width: 17px;
  height: 17px;
}

.auth-foot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #7f93b8;
}

.auth-foot .icon {
  width: 15px;
  height: 15px;
}

.auth-foot a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-foot a:hover {
  color: #fff;
}

.brand-domain {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #9fc3ff;
  letter-spacing: 0;
  margin-top: 1px;
}

.auth-main {
  background: radial-gradient(circle at 80% 0%, #e6efff 0, transparent 45%), var(--bg);
}

.auth-card {
  max-width: 440px;
  padding: 34px 32px 30px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04);
}

.auth-card.wide {
  max-width: 560px;
}

.auth-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.auth-card-top .auth-icon {
  margin-bottom: 0;
}

.shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--subtle);
  border: 1px solid var(--border);
}

.shop-chip>i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-2);
  background: var(--blue-bg);
}

.shop-chip>span {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.shop-chip b {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-chip small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-chip small .icon {
  width: 12px;
  height: 12px;
  flex: none;
}

.auth-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--primary-grad);
  color: #fff;
  box-shadow: var(--primary-shadow);
}

.auth-icon .icon {
  width: 25px;
  height: 25px;
}

.auth-card h2 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.auth-card .lead {
  font-size: 14.5px;
  margin: 6px 0 24px;
}

.auth-card .form-grid {
  gap: 16px;
}

.btn-lg {
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 13px;
}

.btn-lg .icon {
  width: 17px;
  height: 17px;
}

.btn-soft {
  background: var(--blue-bg);
  color: var(--primary-2);
  border-color: transparent;
  box-shadow: none;
}

.btn-soft:hover {
  background: #dbe8ff;
  border-color: transparent;
}

.auth-card .or {
  margin: 20px 0 14px;
}

.auth-alt {
  margin-top: 20px;
}

/* Inputs with an icon inside */
.input-icon {
  position: relative;
}

.input-icon>.icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--faint);
  pointer-events: none;
  transition: color .15s;
}

.input-icon .input {
  padding-left: 42px;
  height: 46px;
}

.input-icon:focus-within>.icon {
  color: var(--primary);
}

.auth-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--subtle);
  border: 1px solid var(--border);
}

.auth-note .icon {
  width: 17px;
  height: 17px;
  color: var(--primary);
  margin-top: 2px;
}

.auth-note p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Register: what happens after you send the request */
.auth-steps {
  list-style: none;
  margin: -8px 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.auth-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.auth-steps span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1.5px solid var(--border-strong);
  font-size: 11px;
}

.auth-steps li.active {
  background: var(--blue-bg);
  border-color: #cfe0fb;
  color: var(--primary-2);
}

.auth-steps li.active span {
  background: var(--primary-grad);
  border-color: transparent;
  color: #fff;
}

@media (max-width: 900px) {
  .auth-brand {
    padding: 24px 20px;
  }

  .auth-brand h1 {
    font-size: 22px;
  }

  .auth-kicker {
    display: none;
  }

  .auth-main {
    padding: 24px 16px 40px;
  }

  .auth-card {
    padding: 26px 20px;
    border-radius: 20px;
  }

  .auth-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- HTMX ---------- */
.htmx-request.btn,
.htmx-request .btn {
  opacity: .6;
  pointer-events: none;
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline;
}

/* ---------- Print ---------- */
.print-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
}

@media print {
  .no-print {
    display: none !important;
  }

  body,
  .print-page {
    background: #fff;
    padding: 0;
  }
}

/* ---------- Small screens ---------- */
@media (max-width: 1200px) {
  .kpis {
    grid-template-columns: repeat(4, 1fr);
  }

  .board {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .head-tools,
  .head-tools form,
  .head-tools .input {
    width: 100%;
  }

  .head-tools .input {
    max-width: none !important;
  }

  .card-head {
    flex-wrap: wrap;
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    z-index: 20;
    padding: 12px 16px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .brand {
    padding: 0;
    flex: 1;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    background: var(--dark-2);
    color: #fff;
    border: 0;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    cursor: pointer;
  }

  .nav,
  .nav-label,
  .me {
    display: none;
  }

  .sidebar.open .nav,
  .sidebar.open .me {
    display: block;
    width: 100%;
  }

  .sidebar.open .nav {
    margin-top: 12px;
  }

  .sidebar.open .me {
    display: flex;
    margin-top: 8px;
  }

  .main {
    padding: 20px 16px 48px;
  }

  .grid-2,
  .grid-half,
  .options,
  .steps {
    grid-template-columns: 1fr;
  }

  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .filters {
    grid-template-columns: 1fr 1fr;
  }

  .board {
    grid-template-columns: 1fr;
  }

  .action-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    padding: 28px 24px;
  }

  .auth-brand h1 {
    font-size: 24px;
  }

  .auth-points,
  .auth-foot {
    display: none;
  }
}


/* =====================================================================
   SAR brand theme, matched to sarworldco.com: black on white, light grey
   page, fine grey borders, Inter / Inter Tight, red accent for alerts.
   Last in the file so it wins over the blue theme above.
   ===================================================================== */
:root {
  --bg: #f7f7f7;
  --card: #ffffff;
  --subtle: #fafafa;
  --border: #e9e9e9;
  --border-strong: #d9d9d9;
  --text: #181818;
  --muted: #4d4e4f;
  --faint: #8a8a8a;
  --dark: #1E3A5F;
  --dark-2: #2B4C77;
  --dark-text: #f2f2f2;
  --link: #181818;
  --focus: rgba(30, 58, 95, .15);
  --primary: #1E3A5F;
  --primary-2: #1E3A5F;
  --primary-grad: #1E3A5F;
  --primary-shadow: 0 6px 16px rgba(30, 58, 95, .25);
  --blue-bg: #f2f2f2;
  --blue: #1E3A5F;
  --orange-bg: #fdecec;
  --orange: #c62828;
  --orange-line: #e43131;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-lift: 0 10px 28px rgba(0, 0, 0, .08);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  letter-spacing: -0.005em;
}

h1,
h2,
h3,
.kpi .value,
.big-num,
.ring b,
.batch-title h2,
.auth-card h2,
.auth-brand h1 {
  font-family: "Inter Tight", var(--font);
}

.link {
  color: var(--text);
  text-decoration-color: rgba(20, 20, 20, .3);
}

.link:hover {
  color: #e43131;
}

::selection {
  background: #e9e9e9;
}

/* Sidebar: black like the site's footer, monogram logo */
.sidebar {
  background: #1E3A5F;
}

.brand-img {
  object-fit: cover;
  padding: 0;
  background: #000;
  border: 1px solid #2B4C77;
  box-shadow: none !important;
}

.brand span,
.me span,
.me button {
  color: #9a9a9a;
}

.nav-label,
.nav .nav-label {
  color: #7a7a7a;
}

.nav a {
  color: #cfcfcf;
}

.nav a:hover {
  background: #2B4C77;
  color: #fff;
}

.nav a.active {
  background: #fff;
  color: #1E3A5F;
  box-shadow: none;
}

.nav-count {
  background: #2B4C77;
  color: #e5e5e5;
}

.nav a.active .nav-count {
  background: #1E3A5F;
  color: #fff;
}

.nav-count-alert {
  background: #e43131;
  color: #fff;
}

.avatar {
  background: #2B4C77;
}

/* Page banners: solid black, clean */
.page-head,
.page-head.hero {
  background: #1E3A5F;
  box-shadow: none;
}

.page-head.hero::before,
.page-head.hero::after {
  background: rgba(255, 255, 255, .05);
}

.page-head .page-icon,
.page-head.hero .page-icon {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.page-head>.head-tools .btn-dark,
.page-head>.head-tools .btn-light,
.page-head>.row .btn-dark,
.page-head>details>summary.btn-dark,
.page-head>.head-tools label.btn-dark,
.page-head.hero .btn-light {
  background: #fff;
  color: #1E3A5F;
  border-color: #fff;
  box-shadow: none;
}

.page-head>.head-tools .btn-dark:hover,
.page-head>.row .btn-dark:hover,
.page-head.hero .btn-light:hover {
  background: #ededed;
  color: #1E3A5F;
}

/* Buttons like the shop's: black, square-ish, red-free */
.btn {
  border-radius: 10px;
}

.btn:hover {
  border-color: #1E3A5F;
  background: #fff;
  color: #1E3A5F;
}

.btn-dark {
  background: #1E3A5F;
  color: #fff;
  border-color: #1E3A5F;
  box-shadow: none;
}

.btn-dark:hover {
  background: #2B4C77;
  border-color: #2B4C77;
  color: #fff;
}

.btn-soft {
  background: #f2f2f2;
  color: #1E3A5F;
}

.btn-soft:hover {
  background: #e9e9e9;
}

#wa-preview .btn-dark {
  background: #25d366;
  border-color: #25d366;
  box-shadow: none;
}

/* Inputs, tabs, chips */
.input:focus {
  border-color: #1E3A5F;
  box-shadow: 0 0 0 3px var(--focus);
}

.check input {
  accent-color: #1E3A5F;
}

.pill.active,
.stage-tab.active b,
.pg.active,
.flow li.active .flow-num,
.auth-steps li.active span,
.how span,
.setup-icon,
.set-step .step-num,
.qty-badge,
.auth-icon {
  background: #1E3A5F;
  color: #fff;
  box-shadow: none;
}

.pill:hover,
a.pg:hover,
.date-chip:hover {
  border-color: #1E3A5F;
  color: #1E3A5F;
  background: #fff;
}

.date-btn.is-set,
.date-active,
.order-chip,
.drop-icon,
.date-item.active {
  background: #f2f2f2;
  color: #1E3A5F;
  border-color: #d9d9d9;
}

.date-btn>.icon,
.date-item .icon,
.page-head .crumb b {
  color: inherit;
}

.order-chip:hover,
a.order-chip:hover {
  background: #e9e9e9;
}

.count-pill {
  background: #1E3A5F;
}

.tag,
.chip {
  background: #f2f2f2;
  color: #4d4e4f;
}

.segmented .pill.active,
.date-chip.active,
.stage-tab.active {
  color: #1E3A5F;
}

.option.primary,
.ship-option.selected {
  border-color: #1E3A5F;
  box-shadow: none;
}

.ship-option.selected .ship-icon,
.ship-option.selected .ship-check {
  background: #1E3A5F;
}

.toggle input:checked+.toggle-track {
  background: #1E3A5F;
}

.journey li.done::before,
.journey li.done:not(:last-child)::after,
.timeline li::before {
  background: #1E3A5F;
  border-color: #1E3A5F;
}

.journey li.current::before {
  border-color: #1E3A5F;
}

.journey-h li.current b,
.flow li.active b {
  color: #1E3A5F;
}

.ring {
  background: conic-gradient(#1E3A5F calc(var(--pct) * 1%), #ececec 0);
}

.step.active {
  background: #1E3A5F;
}

.table tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #1E3A5F;
}

.table tr.clickable:hover td,
.table tr.selected td {
  background: #fafafa;
}

.dropzone {
  border-color: #d9d9d9;
  background: #fafafa;
}

.dropzone.drag {
  border-color: #1E3A5F;
  background: #f2f2f2;
}

.stage-tiles .kpi.is-active {
  box-shadow: 0 0 0 2px #1E3A5F;
}

.topbar {
  background: rgba(247, 247, 247, .85);
  border-bottom-color: #e9e9e9;
}

.topbar-user .avatar {
  background: #1E3A5F;
}

.topbar-date .icon {
  color: #1E3A5F;
}

/* Tiles: white cards, thin coloured top line instead of a thick side bar */
.kpi {
  border-left: 1px solid var(--border);
  border-top: 3px solid var(--kpi, #1E3A5F);
  border-radius: 12px;
}

.kpi.kpi-alert {
  border-color: #f6c9c9;
  border-top-color: #e43131;
  background: #fff;
}

.kpi-tone-blue {
  --kpi: #1E3A5F;
  --kpi-bg: #f2f2f2;
  --kpi-text: #1E3A5F;
}

.tone-blue {
  background: #f2f2f2;
  color: #1E3A5F;
}

.kpi-tone-alert {
  --kpi: #e43131;
}

.status-card,
.option,
.step {
  border-left-width: 1px;
}

/* Sign-in pages: black panel with the SAR wordmark on the form */
.auth-brand {
  background: #1E3A5F;
}

.auth-brand .brand-mark {
  width: 48px;
  height: 48px;
}

/* Space between the shop name and the "Order.Delivery..." pill, on every screen size */
.auth-brand .auth-pitch {
  margin-top: 24px;
}

.auth-brand .auth-pitch .auth-kicker {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #e5e5e5;
}

.glow-text {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-decoration: underline;
  text-decoration-color: #e43131;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.auth-brand p,
.auth-foot {
  color: #a3a3a3;
}

.auth-points li {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
}

.auth-points li>span {
  background: #fff;
  box-shadow: none;
}

.auth-points li .icon {
  color: #1E3A5F;
}

.brand-domain {
  color: #d4d4d4;
}

.auth-main {
  background: #f7f7f7;
}

.auth-card {
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .07);
}

.auth-logo {
  display: block;
  height: 64px;
  width: auto;
  margin: -6px auto 14px;
}

.auth-card-top {
  justify-content: space-between;
}

.shop-chip>i {
  background: #1E3A5F;
  color: #fff;
}

.card.dark {
  background: #1E3A5F;
  border-color: #1E3A5F;
}

.pickup-warn {
  color: #ff8a8a;
}

.auth-brand .brand span {
  color: #9a9a9a;
}

/* Charcoal grey brand colour: soft tints for chips and selected states */
.date-btn.is-set,
.date-active,
.order-chip,
.drop-icon,
.date-item.active,
.tag,
.chip,
.btn-soft,
.tone-blue {
  background: #eef3f9;
}

.order-chip:hover,
a.order-chip:hover,
.btn-soft:hover {
  background: #e1e9f3;
}

.sidebar,
.auth-brand {
  background: #1E3A5F;
}

.brand-img {
  border-color: #2B4C77;
}

/* Every tab: deep navy banner, sitting on the charcoal sidebar */
.page-head,
.page-head.hero {
  background: #1E3A5F;
}

/* Navy for every button and highlight; the sidebar and sign-in panel stay charcoal */
.sidebar,
.auth-brand {
  background: #374151;
}

.nav a:hover {
  background: #4B5563;
}

.nav-count {
  background: #4B5563;
}

.brand-img {
  border-color: #4B5563;
}

/* Orders table: fewer, richer columns */
.order-table-card {
  overflow-x: auto;
}

.order-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8f9fb;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--faint);
  padding: 12px 14px;
}

.order-table td {
  padding: 13px 10px;
  border-bottom: 1px solid #f0f1f3;
}

.order-table th {
  padding: 12px 10px;
}

.order-table tbody tr {
  transition: background .12s, box-shadow .12s;
}

.order-table tbody tr:hover td {
  background: #f7f9fc;
}

.order-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #1E3A5F;
}

.col-check {
  width: 44px;
}

.col-go {
  width: 36px;
  color: var(--faint);
}

.col-go .icon {
  width: 16px;
  height: 16px;
  transition: transform .15s;
}

.order-table tr:hover .col-go {
  color: #1E3A5F;
}

.order-table tr:hover .col-go .icon {
  transform: translateX(3px);
}

.ot-order {
  display: grid;
  gap: 2px;
  justify-items: start;
}

.ot-order b {
  font-size: 14.5px;
  font-weight: 700;
}

.ot-order small,
.ot-status small,
.ot-ship small {
  font-size: 12px;
  color: var(--muted);
}

.src-tag {
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  background: #eef3f9;
  color: #1E3A5F;
}

.ot-cust {
  min-width: 0;
  max-width: 160px;
}

.ot-cust b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  text-transform: capitalize;
}

.ot-items {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  max-width: 220px;
}

.ot-items>div {
  min-width: 0;
}

.ot-items b {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ot-thumb {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #1E3A5F;
  background: #eef3f9;
  border: 1px solid #e1e9f3;
}

.ot-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.ot-tags .tag {
  font-size: 11px;
  padding: 0 7px;
}

.tag-more {
  background: #eef3f9 !important;
  color: #1E3A5F !important;
}

.ot-amount {
  display: grid;
  gap: 5px;
  justify-items: start;
  padding-right: 16px;
}

.ot-amount b {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ot-status {
  display: grid;
  gap: 5px;
  justify-items: start;
}

.ot-status small {
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.ot-status small.late {
  color: #c62828;
  font-weight: 600;
}

.ot-status small .icon {
  width: 13px;
  height: 13px;
}

.ot-ship {
  display: grid;
  gap: 2px;
}

.ot-ship .mono {
  font-size: 12.5px;
}

.ot-none {
  font-size: 12.5px;
  color: var(--faint);
}

/* Call card on a computer: the number to copy, or call through Phone Link */
.call-pop {
  position: absolute;
  z-index: 70;
  width: 270px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  animation: flash-in .15s ease-out;
}

.call-pop small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
}

.call-pop b {
  display: block;
  margin: 4px 0 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

.call-pop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.call-pop p {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* Settings as numbered tabs: one section at a time, underline on the open tab */
.settings-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.set-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding: 0 6px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.set-tabs::-webkit-scrollbar {
  display: none;
}

.set-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-bottom: -1px;
  padding: 14px 16px 13px;
  border-bottom: 3px solid transparent;
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.set-tabs a:hover {
  color: var(--text);
  border-bottom-color: var(--border-strong);
}

.set-tabs a.active {
  color: #1E3A5F;
  border-bottom-color: #1E3A5F;
}

.set-tabs a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus);
  border-radius: 10px 10px 0 0;
}

.set-tab-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grey-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  transition: background .15s, color .15s;
}

.set-tabs a.active .set-tab-num {
  background: #1E3A5F;
  color: #fff;
}

.set-tabs a.has-error,
.set-tabs a.has-error.active {
  color: var(--orange);
}

.set-tabs .dot {
  margin: 0;
}

.tabs-ready [data-set-panel]:not(.is-active) {
  display: none;
}

.tabs-ready [data-set-panel].is-active {
  animation: rise .2s ease-out;
}

.tab-pill {
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--grey-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.set-tabs a.active .tab-pill {
  background: #e1e9f3;
  color: #1E3A5F;
}

.tab-pill.alert,
.set-tabs a.active .tab-pill.alert {
  background: #e43131;
  color: #fff;
}

/* ---------- Team and access ---------- */
.role-edge-owner {
  --role: #1E3A5F;
}

.role-edge-ops_lead {
  --role: #8b5cf6;
}

.role-edge-care {
  --role: #3b82f6;
}

.role-edge-packing {
  --role: #f59e0b;
}

.role-edge-viewer {
  --role: #94a3b8;
}

.invite {
  position: relative;
}

.invite>summary .icon {
  width: 15px;
  height: 15px;
}

.invite-form {
  position: absolute;
  right: 0;
  z-index: 20;
  width: 340px;
  margin-top: 8px;
  text-align: left;
}

.invite-head b {
  display: block;
  font-size: 15px;
}

.invite-head span {
  display: block;
}

/* Join requests */
.request-box {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff5f5, #fff 70%);
  border: 1px solid #f6c9c9;
}

.request-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.request-head b {
  display: block;
  font-size: 15px;
}

.request-head span:not(.kpi-icon) {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
}

.request-row+.request-row {
  margin-top: 8px;
}

.request-row .badge {
  margin-top: 4px;
}

.request-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.request-actions select.input {
  width: auto;
}

/* People as cards */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.person-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--role, var(--border));
  box-shadow: var(--shadow);
  transition: box-shadow .2s, transform .2s;
}

.person-card:hover {
  box-shadow: var(--shadow-lift);
}

.person-card.is-off {
  background: var(--subtle);
}

.person-card.is-off .pc-top .avatar,
.person-card.is-off .pc-name {
  opacity: .6;
}

.pc-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pc-top .avatar {
  width: 46px;
  height: 46px;
  font-size: 15px;
  font-weight: 700;
}

.pc-name {
  flex: 1;
  min-width: 0;
}

.pc-name b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15.5px;
  font-weight: 700;
}

.pc-name>span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.you {
  padding: 0 7px;
  border-radius: 6px;
  background: #e1e9f3;
  color: #1E3A5F;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

.pc-role {
  padding: 12px;
  border-radius: 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
}

.pc-role p {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

.role-select {
  width: 100%;
  padding: 7px 12px;
  font-weight: 600;
  border-color: transparent;
}

.role-select.role-owner {
  background-color: var(--dark);
  color: #fff;
}

.pc-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}

.pc-facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
}

.pc-facts dd {
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.pc-facts .dot {
  margin-right: 6px;
}

.pc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.pc-actions .btn .icon {
  width: 14px;
  height: 14px;
}

.pc-pass {
  flex: 1 1 auto;
}

.pc-pass[open] {
  flex-basis: 100%;
}

.pc-pass>form {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
}

.btn-quiet-danger {
  color: #c62828;
}

.btn-quiet-danger:hover {
  border-color: #e43131;
  color: #c62828;
  background: #fff5f5;
}

/* Roles as cards */
.panel-lead {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13.5px;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.role-card {
  padding: 16px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--role);
  box-shadow: var(--shadow);
}

.role-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.role-card header .badge {
  font-size: 12.5px;
}

.role-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.role-card>p {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  min-height: 3.8em;
}

.role-people {
  display: flex;
  margin: 10px 0 0;
}

.role-people .avatar {
  width: 28px;
  height: 28px;
  font-size: 10.5px;
  font-weight: 700;
  border: 2px solid #fff;
  margin-right: -6px;
}

.role-people .avatar.more {
  background: var(--grey-bg);
  color: var(--grey);
}

.can-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 7px;
}

.can-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}

.can-list li.cannot {
  color: var(--faint);
}

.can-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: none;
}

.can-mark .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.8;
}

.can .can-mark {
  background: var(--green-bg);
  color: var(--green);
}

.cannot .can-mark {
  background: var(--grey-bg);
  color: #b0b7c3;
}

/* Activity log by day */
.activity-card {
  padding: 6px 20px 16px;
}

.activity-day {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -20px;
  padding: 12px 20px 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint);
}

.activity-list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.activity-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f1f3;
}

.activity-list li:last-child {
  border-bottom: 0;
}

.activity-list .avatar {
  width: 32px;
  height: 32px;
  font-size: 11.5px;
  font-weight: 700;
}

.activity-list .avatar.system {
  background: var(--grey-bg);
  color: var(--grey);
}

.activity-list .avatar.system .icon {
  width: 15px;
  height: 15px;
}

.activity-list li>div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.activity-list li span {
  font-size: 13.5px;
}

.activity-list li small {
  font-size: 12px;
  color: var(--faint);
}

.activity-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}

.activity-foot .icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 900px) {
  .invite-form {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
  }

  .people-grid,
  .role-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .request-actions,
  .request-actions form {
    width: 100%;
  }

  .request-actions select.input {
    flex: 1;
  }

  .activity-card {
    padding: 4px 16px 14px;
  }

  .activity-day {
    margin: 0 -16px;
    padding: 12px 16px 8px;
  }
}

.save-bar .save-note {
  flex: 1;
  text-align: center;
}

.set-tabs {
  scroll-margin-top: 16px;
}

@media (max-width: 900px) {
  .set-tabs {
    scroll-margin-top: 72px;
    margin: 0 -16px 14px;
    padding: 0 10px;
    background: var(--bg);
  }

  .set-tabs a {
    padding: 12px 10px 11px;
    font-size: 14px;
    gap: 8px;
  }

  .save-bar {
    gap: 8px;
  }

  .save-bar .row {
    flex: 1;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .save-bar .btn {
    flex: 0 1 auto;
    padding: 9px 12px;
  }

  .save-bar .btn-dark {
    flex: 1 1 auto;
  }

  .save-bar .next-name {
    display: none;
  }
}

/* Pack and tick rows: order and status on top, product in full, customer on one line */
.dispatch-pair {
  gap: 16px;
}

.pack-group {
  container-type: inline-size;
}

.pack-row {
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}

.pack-row .pack-info {
  display: grid;
  gap: 4px;
}

.pack-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pack-top .order-chip.big {
  font-size: 12.5px;
  padding: 3px 9px;
}

.pack-top .badge {
  font-size: 11.5px;
  padding: 2px 9px 2px 8px;
}

.pack-info .pack-product {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pack-cust {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pack-cust .icon {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--faint);
}

.pack-action {
  min-width: 0;
}

.pack-action:empty {
  display: none;
}

.awb-chip {
  display: grid;
  justify-items: end;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 10px;
  line-height: 1.2;
}

.awb-chip small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .75;
}

.awb-chip b {
  font-size: 13px;
  font-weight: 600;
}

/* A narrow column (zoomed-in browser, small laptop, phone): the action moves under the text */
@container (max-width: 420px) {
  .pack-row {
    flex-wrap: wrap;
  }

  .pack-action {
    flex: 1 1 100%;
    justify-content: stretch;
  }

  .pack-action>* {
    width: 100%;
  }

  .awb-chip {
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
  }
}

/* Shop logo: Settings upload, invoice header */
.logo-field {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.logo-field>div {
  flex: 1;
  min-width: 0;
}

.logo-preview .brand-mark {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  font-size: 24px;
}

.logo-field .check {
  margin-top: 4px;
}

.logo-field .field .chip {
  margin-left: 4px;
  font-size: 11px;
  vertical-align: 1px;
}

.logo-preview.wide {
  display: grid;
  place-items: center;
  width: 150px;
  height: 72px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  flex: none;
  text-align: center;
}

.logo-preview.wide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}

.auth-logo {
  max-width: 220px;
  max-height: 96px;
  object-fit: contain;
}

@media (max-width: 520px) {
  .logo-field {
    flex-wrap: wrap;
  }
}

.invoice-logo {
  width: auto;
  max-width: 160px;
}

.brand-img {
  object-fit: contain;
  background: #fff;
}

.invoice-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.invoice-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
}

.invoice-brand b,
.invoice-brand span {
  display: block;
}

/* WhatsApp from a computer: QR code for the shop's business phone */
.wa-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, .55);
  animation: flash-in .15s ease-out;
}

.wa-qr-card {
  position: relative;
  width: min(400px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-lift);
  text-align: center;
}

.wa-qr-card>small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
}

.wa-qr-card h2 {
  margin: 4px 0 14px;
  font-size: 18px;
}

.wa-qr {
  width: 230px;
  height: 230px;
  margin: 0 auto 14px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.wa-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wa-qr-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--subtle);
  color: var(--muted);
  cursor: pointer;
}

.wa-qr-close:hover {
  color: var(--text);
  background: var(--grey-bg);
}

.wa-qr-steps {
  margin: 0 0 12px;
  padding-left: 20px;
  text-align: left;
  font-size: 13px;
  display: grid;
  gap: 4px;
}

.wa-qr-msg {
  margin-bottom: 10px;
  text-align: left;
}

.wa-qr-msg summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}

/* The page the QR opens on the shop phone */
body.wa-open {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px 16px;
}

.wa-open-card {
  width: min(420px, 100%);
  padding: 24px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  display: grid;
  gap: 12px;
}

.wa-open-card .auth-icon {
  margin: 0;
  background: #25d366;
}

.wa-open-card>small {
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
}

.wa-open-card h1 {
  font-size: 22px;
}

.wa-open-card .wa-preview {
  margin: 0;
}

.wa-open-card .btn-dark {
  background: #25d366;
  border-color: #25d366;
}

/* =====================================================================
   Phone layout: top bar, slide-in menu, bottom tabs, and every tab
   reworked for one thumb. Desktop is untouched above 900px.
   ===================================================================== */
.m-head,
.tabbar,
.drawer-backdrop {
  display: none;
}

.team-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.proof-grid {
  grid-template-columns: 3fr 2fr;
  margin-top: 20px;
}

@media (max-width: 900px) {

  /* Shell */
  .app {
    display: block;
  }

  .main {
    padding: 0 16px calc(88px + env(safe-area-inset-bottom));
  }

  body.menu-open {
    overflow: hidden;
  }

  .m-head {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 -16px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: #374151;
    color: #fff;
  }

  .m-head .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 13px;
  }

  .m-head-text {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
  }

  .m-head-text b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .m-head-text span {
    display: block;
    font-size: 12px;
    color: #c9ced6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .m-head .avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
    background: #1E3A5F;
  }

  .m-menu {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: #4B5563;
    color: #fff;
    cursor: pointer;
  }

  .topbar {
    position: static;
    margin: 0 -16px 14px;
    padding: 12px 16px 0;
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .topbar-search .input {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  /* Menu: the sidebar slides in from the left over a dark backdrop */
  .sidebar {
    position: fixed;
    z-index: 60;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, 84vw);
    height: 100dvh;
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    transform: translateX(-105%);
    transition: transform .25s ease;
    overflow-y: auto;
  }

  .sidebar.open {
    transform: none;
    box-shadow: 20px 0 50px rgba(0, 0, 0, .3);
  }

  .sidebar .brand {
    padding: 2px 48px 22px 8px;
    flex: none;
  }

  .sidebar .menu-toggle {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: 12px;
    width: 38px;
    height: 38px;
  }

  .sidebar .nav,
  .sidebar.open .nav {
    display: block;
    width: 100%;
    margin: 0;
  }

  .sidebar .nav .nav-label {
    display: block;
  }

  .sidebar .nav a {
    padding: 12px 14px;
    font-size: 15px;
  }

  .sidebar .me,
  .sidebar.open .me {
    display: flex;
    width: 100%;
    margin-top: auto;
  }

  .drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }

  body.menu-open .drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Bottom tabs */
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .05);
  }

  .tabbar a,
  .tabbar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 50px;
    padding: 3px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--faint);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .tab-ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    transition: background .15s;
  }

  .tab-ico .icon {
    width: 20px;
    height: 20px;
  }

  .tabbar .active {
    color: #1E3A5F;
  }

  .tabbar .active .tab-ico {
    background: #e1e9f3;
  }

  .tab-count {
    position: absolute;
    top: -3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #1E3A5F;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
  }

  .tab-count.alert,
  .tab-dot {
    background: #e43131;
  }

  .tab-dot {
    position: absolute;
    top: 1px;
    right: 12px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
  }

  /* Type and touch: 16px inputs stop iPhone zooming in; bigger tap targets */
  .input,
  select.input,
  textarea.input {
    font-size: 16px;
  }

  .btn {
    min-height: 40px;
  }

  .btn-sm {
    min-height: 34px;
  }

  .kpi:hover,
  .status-card:hover,
  .parcel-grid .track-card:hover {
    transform: none;
  }

  /* Page banners: compact, buttons share the width */
  .page-head,
  .page-head:not(.hero) {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
    margin-bottom: 14px;
    border-radius: 16px;
  }

  .page-head .crumb {
    display: none;
  }

  .page-head:not(.hero) h1 {
    font-size: 20px;
  }

  .page-head:not(.hero) .page-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .head-tools {
    gap: 8px;
  }

  .head-tools>.btn,
  .head-tools>form,
  .head-tools>details,
  .head-tools>a {
    flex: 1 1 auto;
  }

  .head-tools>form .btn,
  .head-tools>details>summary.btn {
    width: 100%;
  }

  .page-head>.row {
    gap: 8px;
  }

  .page-head>.row>.btn,
  .page-head>.row>details {
    flex: 1 1 auto;
  }

  /* Pop-up forms in a banner open full width under it */
  .page-head details {
    position: static;
  }

  .page-head details>.card {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }

  /* Cards and grids */
  .card-pad {
    padding: 16px;
  }

  .card-head {
    padding: 14px 16px;
  }

  .grid-2,
  .grid-half,
  .team-grid,
  .proof-grid,
  .order-grid,
  .dispatch-grid,
  .returns-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .proof-grid {
    margin-top: 14px;
  }

  .kpis {
    gap: 10px;
    margin-bottom: 14px;
  }

  .kpi {
    padding: 12px 14px 14px;
  }

  .kpi .kpi-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
  }

  .kpi .value {
    font-size: 24px;
  }

  .kpi .label {
    font-size: 12.5px;
  }

  /* Tabs and filter chips scroll sideways instead of stacking */
  .pills,
  .stage-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pills::-webkit-scrollbar,
  .stage-tabs::-webkit-scrollbar {
    display: none;
  }

  .pills {
    margin: 0 -16px 12px;
    padding: 2px 16px 6px;
  }

  .pill {
    flex: none;
  }

  .stage-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: max-content;
  }

  .stage-name {
    overflow: visible;
  }

  /* Orders: filters two by two, search on its own row */
  .filters {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px;
  }

  .filters> :first-of-type {
    grid-column: 1 / -1;
  }

  .filters-actions {
    grid-column: 1 / -1;
  }

  .toolbar {
    padding: 10px 12px;
  }

  .toolbar select.input {
    flex: 1 1 140px;
  }

  .date-menu {
    width: min(260px, calc(100vw - 32px));
  }

  /* Bars that float above the bottom tabs */
  .bulk-bar {
    position: fixed;
    z-index: 45;
    left: 10px;
    right: 10px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    margin: 0;
  }

  .bulk-bar .btn,
  .bulk-bar select {
    flex: 1 1 auto;
  }

  .save-bar {
    bottom: calc(76px + env(safe-area-inset-bottom));
    padding: 10px 12px;
  }

  .save-bar .btn {
    flex: 1;
  }

  /* Today: action buttons split the row */
  .action-row {
    padding: 14px 16px;
    gap: 10px;
  }

  .action-row>.row {
    width: 100%;
    flex-wrap: nowrap;
  }

  .action-row>.row>* {
    flex: 1 1 0;
  }

  .action-row>.row .btn {
    width: 100%;
  }

  /* Order page: "next step" text gets the full width, its button below */
  .next-step {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
  }

  .next-step .next-text {
    flex: 1 1 calc(100% - 60px);
  }

  .next-step> :last-child:not(.next-text) {
    flex: 1 1 100%;
  }

  .next-step> :last-child:not(.next-text) .btn,
  .next-step>.btn {
    width: 100%;
  }

  .btn-pair .btn {
    min-height: 44px;
  }

  /* Pack and dispatch */
  .batch {
    padding: 16px 16px 0;
  }

  .batch-top {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
  }

  .flow {
    margin: 0 -16px;
    padding: 14px 16px;
  }

  .pack-row {
    gap: 10px;
  }

  .pack-action {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: stretch;
  }

  .pack-action>*,
  .pack-action .btn {
    width: 100%;
  }

  /* Settings: long menu paths wrap instead of widening the page */
  .path {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .set-body code,
  .hint code {
    overflow-wrap: anywhere;
  }

  .set-step {
    gap: 10px;
  }

  .settings-nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px 4px;
  }

  .settings-nav a {
    flex: none;
    background: #fff;
    border: 1px solid var(--border);
  }

  /* Pager */
  .pager-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .pager {
    justify-content: center;
  }

  .pg {
    min-width: 40px;
    height: 40px;
  }

  /* Tables that turn into cards: each row a card, each cell with its label */
  .table-cards thead {
    display: none;
  }

  .table-cards,
  .table-cards tbody {
    display: block;
  }

  .table-cards tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }

  .table-cards tr:last-child {
    border-bottom: 0;
  }

  .table-cards td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  .table-cards td:first-child {
    grid-column: 1 / -1;
  }

  .table-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--faint);
  }

  .table-cards td.td-actions {
    grid-column: 1 / -1;
    text-align: left;
  }

  .table-cards td.td-actions:empty {
    display: none;
  }

  .table-cards tr:has(td[colspan]) {
    display: block;
  }

  .td-actions .row {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .td-actions details {
    position: static !important;
  }

  .td-actions details>form {
    position: static !important;
    width: auto !important;
    margin-top: 10px !important;
  }

  .table-cards select.input {
    width: 100% !important;
  }
}

/* Orders table as cards on phones */
@media (max-width: 760px) {
  .order-table thead {
    display: none;
  }

  .order-table,
  .order-table tbody {
    display: block;
  }

  .order-table tr {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "chk order amount" "chk cust status" "chk items items" "chk ship ship";
    gap: 10px 12px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #f0f1f3;
  }

  .order-table tr:last-child {
    border-bottom: 0;
  }

  .order-table tr:has(td[colspan]) {
    display: block;
  }

  .order-table td {
    padding: 0;
    border: 0;
    min-width: 0;
  }

  .order-table td:nth-child(1) {
    grid-area: chk;
    align-self: start;
    padding-top: 3px;
  }

  .order-table td:nth-child(2) {
    grid-area: order;
  }

  .order-table td:nth-child(3) {
    grid-area: cust;
  }

  .order-table td:nth-child(4) {
    grid-area: items;
  }

  .order-table td:nth-child(5) {
    grid-area: amount;
  }

  .order-table td:nth-child(6) {
    grid-area: status;
  }

  .order-table td:nth-child(7) {
    grid-area: ship;
  }

  .order-table td.col-go {
    display: none;
  }

  .order-table tbody tr:hover td:first-child {
    box-shadow: none;
  }

  .order-table .ot-status {
    justify-items: end;
  }

  .order-table .ot-cust {
    max-width: none;
  }

  .order-table .ot-items {
    min-width: 0;
    max-width: none;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--subtle);
    border: 1px solid #f0f1f3;
  }

  .order-table .ot-ship {
    display: flex;
    gap: 8px;
    align-items: baseline;
  }

  .order-table .ot-ship::before,
  .order-table td:nth-child(7)>.ot-none::before {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--faint);
    margin-right: 6px;
  }

  .order-table .ot-ship::before {
    content: "AWB";
  }

  .order-table td:nth-child(7)>.ot-none::before {
    content: "Shipping";
  }

  .order-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }
}

/* Tracker: Call and Send WhatsApp on parcels that need the customer */
.tc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 2px 0 10px;
}

.tc-actions .btn {
  justify-content: center;
  white-space: nowrap;
}

.tc-actions .btn:only-child {
  grid-column: 1 / -1;
}

/* No phone yet (Shiprocket masks it): the buttons ask Shiprocket, then a small "add phone" form if it stays hidden */
.tc-actions+.tc-phone-form {
  margin-top: -2px;
}

.tc-actions .btn.htmx-request {
  opacity: .6;
  pointer-events: none;
}

.tc-phone-form {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--subtle);
  border: 1px solid var(--border);
}

.tc-phone-form .row {
  display: flex;
  gap: 6px;
}

.tc-phone-form .input {
  flex: 1;
  min-width: 0;
  height: 34px;
}

/* Pack and dispatch with the Shiprocket API: pick list on top, pack and tick below, both full width,
   their lines in as many columns as fit */
.dispatch-stacked {
  display: grid;
  gap: 16px;
}

.dispatch-stacked .pick-lines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  column-gap: 32px;
}

.dispatch-stacked .pick-line:last-of-type {
  border-bottom: 1px solid var(--border);
}

.dispatch-stacked .pack-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 10px;
}

.dispatch-stacked .pack-rows>.pack-empty {
  grid-column: 1 / -1;
}

.dispatch-stacked .pack-row {
  margin-bottom: 0;
}

/* Tracker card: customer name and phone number */
.tc-cust {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 2px 0 4px;
  font-size: 13px;
  color: var(--muted);
}

.tc-cust .icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--faint);
}

.tc-cust .tc-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-cust .tc-phone {
  margin-left: auto;
  flex: none;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tc-cust .tc-nophone {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  color: var(--faint);
  font-style: italic;
}

/* ---------- Customers ---------- */
.cu-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.cu-rank,
.cu-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f1f3;
  color: inherit;
  text-decoration: none;
}

.cu-rank:last-child,
.cu-product:last-child {
  border-bottom: 0;
}

.cu-rank:hover .cu-rank-name {
  color: #1E3A5F;
}

.cu-rank-no {
  width: 20px;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
  text-align: center;
}

.cu-rank .avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
  flex: none;
}

.cu-rank-name,
.cu-product-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cu-rank-name small,
.cu-product-name small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.cu-rank b,
.cu-product b {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.cu-product .product-thumb {
  width: 34px;
  height: 34px;
  font-size: 13px;
  flex: none;
}

.cu-last-offer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #eef3f9;
  border: 1px solid #e1e9f3;
  color: #1E3A5F;
  text-decoration: none;
  font-size: 13.5px;
}

.cu-last-offer span {
  flex: 1;
  min-width: 0;
}

.cu-last-offer .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.cu-filters {
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}

.cu-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 2px 10px;
  font-size: 13.5px;
  color: var(--muted);
}

.cu-results-head b {
  color: var(--text);
}

.cu-table .ot-cust {
  max-width: 190px;
}

.cu-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}

.cu-tag.repeat {
  background: var(--green-bg);
  color: var(--green);
}

.cu-wa {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.cu-wa.on {
  background: #e9f8ef;
  color: #15803d;
}

.cu-wa.off {
  background: var(--orange-bg);
  color: var(--orange);
}

.cu-addr {
  display: grid;
  gap: 2px;
  max-width: 220px;
}

.cu-addr span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cu-addr small,
.cu-last small {
  font-size: 12px;
  color: var(--muted);
}

.cu-bought {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 260px;
}

.cu-prod {
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 8px;
  background: #eef3f9;
  color: #1E3A5F;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cu-prod b {
  font-weight: 700;
}

.cu-last {
  display: grid;
  gap: 2px;
  white-space: nowrap;
}

.cu-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--grey-bg);
  color: var(--grey);
}

.cu-status.sent {
  background: var(--green-bg);
  color: var(--green);
}

.cu-status.failed {
  background: #fdecec;
  color: #c62828;
}

.cu-status.queued {
  background: var(--blue-bg);
  color: var(--blue);
}

.cu-order {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f1f3;
  color: inherit;
  text-decoration: none;
}

.cu-order:last-child {
  border-bottom: 0;
}

.cu-order:hover .cu-order-top>b:first-child {
  color: #1E3A5F;
  text-decoration: underline;
}

.cu-order-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cu-order-total {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.cu-order-items {
  font-size: 13px;
  color: var(--muted);
}

.cu-contact {
  display: grid;
  gap: 12px;
}

.cu-contact small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2px;
}

.cu-optout {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--orange-bg);
  color: var(--orange);
  font-size: 13px;
}

.cu-optout .icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.cu-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
}

.cu-banner .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
}

.cu-banner.warn {
  background: #fff7e6;
  border: 1px solid #fde4b0;
  color: #8a5a00;
}

/* WhatsApp offer form, preview and progress */
.offer-grid {
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
}

.offer-params {
  display: grid;
  gap: 12px;
}

.offer-params [hidden] {
  display: none;
}

.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.45;
}

.check-row input {
  margin-top: 2px;
  width: 17px;
  height: 17px;
  flex: none;
}

.wa-phone {
  padding: 18px 14px;
  border-radius: 16px;
  background: #e5ddd5;
}

.wa-bubble {
  position: relative;
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 4px 12px 12px 12px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.offer-audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin: 4px 0 12px;
}

.offer-audience>div {
  padding: 10px;
  border-radius: 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
  text-align: center;
}

.offer-audience b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.offer-audience small {
  font-size: 12px;
  color: var(--muted);
}

.offer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.offer-progress {
  margin-bottom: 16px;
}

.offer-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.offer-progress-top small {
  display: block;
}

.offer-pct {
  font-size: 26px;
  font-weight: 800;
  color: #1E3A5F;
}

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

  .offer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .cu-filters>div:first-child {
    grid-column: 1 / -1;
  }

  .cu-table tr {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "chk cust spent" "chk wa orders" "chk addr addr" "chk bought bought" "chk last last";
  }

  .cu-table td:nth-child(2) {
    grid-area: cust;
  }

  .cu-table td:nth-child(3) {
    grid-area: wa;
  }

  .cu-table td:nth-child(4) {
    grid-area: addr;
  }

  .cu-table td:nth-child(5) {
    grid-area: bought;
  }

  .cu-table td:nth-child(6) {
    grid-area: orders;
  }

  .cu-table td:nth-child(6)::after {
    content: " orders";
    font-size: 12px;
    color: var(--muted);
  }

  .cu-table td:nth-child(7) {
    grid-area: spent;
  }

  .cu-table td:nth-child(8) {
    grid-area: last;
  }

  .cu-table .cu-addr,
  .cu-table .cu-bought {
    max-width: none;
  }

  .cu-table .cu-last {
    display: flex;
    gap: 8px;
  }
}

.cu-cancelled {
  display: block;
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

/* Confirmation box for data-confirm buttons (replaces the browser pop-up) */
.btn-danger {
  background: #d32f2f;
  color: #fff;
  border-color: #d32f2f;
}

.btn-danger:hover {
  background: #b71c1c;
  border-color: #b71c1c;
  color: #fff;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, .55);
  animation: flash-in .15s ease-out;
}

.confirm-card {
  width: min(420px, 100%);
  padding: 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-lift);
  text-align: center;
}

.confirm-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
  background: #e8f5e9;
  color: #2e7d32;
}

.confirm-icon.is-danger {
  background: #fdecea;
  color: #c62828;
}

.confirm-card h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.confirm-card p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.confirm-card h2:last-of-type+p[hidden] {
  display: none;
}

.confirm-actions {
  display: flex;
  gap: 10px;
}

.confirm-actions .btn {
  flex: 1;
  justify-content: center;
}