@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root, html[data-theme="dark"] {
  --bg: #0B0B0C;
  --panel: #141416;
  --panel-alt: #1A1A1C;
  --header: #000000;
  --border: #2A2A2E;
  --border-strong: #3A3A40;
  --text: #F2F2F2;
  --muted: #9A9AA0;
  --muted-2: #6B6B72;
  --hover-row: #101012;
  --ticket-hover: #161618;
  --red: #C8202E;
  --red-hover: #E02838;
  --red-soft: #3A1518;
  --red-soft-text: #F0A0A6;
  --red-soft-border: #6B2228;
  --ok: #2F9E6B;
  --ok-soft: #123528;
  --ok-soft-text: #7DDBB0;
  --ok-soft-border: #1F5C40;
  --warn: #C48A1A;
  --warn-soft: #3A2E12;
  --warn-soft-text: #E8C56A;
  --warn-soft-border: #6B5318;
  --info: #4A6FA5;
  --info-soft: #1A2740;
  --info-soft-text: #9BB6E0;
  --info-soft-border: #2E4468;
  --shipped-soft: #1C1C1E;
  --secondary-btn-bg: #FFFFFF;
  --secondary-btn-fg: #000000;
  --input-bg: #0B0B0C;
  --shadow: 0 1px 0 rgba(255,255,255,0.03);
}

html[data-theme="light"] {
  --bg: #F4F4F5;
  --panel: #FFFFFF;
  --panel-alt: #F0F0F1;
  --header: #FFFFFF;
  --border: #D0D0D6;
  --border-strong: #9A9AA4;
  --text: #121214;
  /* muted = secondary text; muted-2 = de-emphasized but still readable on white */
  --muted: #4A4A52;
  --muted-2: #6E6E78;
  --hover-row: #F7F7F8;
  --ticket-hover: #FAFAFA;
  --red: #C8202E;
  --red-hover: #A91A26;
  --red-soft: #F8E6E8;
  --red-soft-text: #8F1520;
  --red-soft-border: #E5B0B5;
  --ok: #1F7A52;
  --ok-soft: #E5F5ED;
  --ok-soft-text: #145C3C;
  --ok-soft-border: #A8D8C0;
  --warn: #A67A12;
  --warn-soft: #F8F0DC;
  --warn-soft-text: #7A5A0C;
  --warn-soft-border: #E2C98A;
  --info: #3A5F94;
  --info-soft: #E8EEF7;
  --info-soft-text: #2A4570;
  --info-soft-border: #B0C2DE;
  --shipped-soft: #EEEEF0;
  --secondary-btn-bg: #121214;
  --secondary-btn-fg: #FFFFFF;
  --input-bg: #FFFFFF;
  --shadow: 0 1px 2px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.status {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid transparent;
}
.status-new { background: var(--red); color: #fff; border-color: var(--red); }
.status-working { background: var(--warn-soft); color: var(--warn-soft-text); border-color: var(--warn-soft-border); }
.status-waiting-parts {
  background: transparent;
  color: var(--muted);
  border-color: var(--border-strong);
  border-style: dashed;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.status-on-hold {
  background: var(--warn);
  color: #000;
  border-color: var(--warn);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent);
}
.status-packed { background: var(--ok-soft); color: var(--ok-soft-text); border-color: var(--ok-soft-border); }
.status-ready { background: var(--info-soft); color: var(--info-soft-text); border-color: var(--info-soft-border); }
.status-shipped { background: var(--shipped-soft); color: var(--muted); border-color: var(--border); }
.status-needs { background: var(--red-soft); color: var(--red-soft-text); border-color: var(--red-soft-border); }

.ticket {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  box-shadow: var(--shadow);
  transition: border-color 0.12s ease, background 0.12s ease;
  display: flex;
  flex-direction: column;
}
.ticket:hover { border-color: var(--border-strong); background: var(--ticket-hover); }
.ticket.is-working { border-left-color: var(--warn); }
.ticket.is-new { border-left-color: var(--red); }
.ticket.is-waiting-parts {
  border-left-color: var(--muted-2);
  border-left-style: dashed;
  opacity: 0.92;
}
.ticket.is-on-hold {
  border-left-color: var(--warn);
  border-left-width: 5px;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      color-mix(in srgb, var(--warn) 7%, transparent) 8px,
      color-mix(in srgb, var(--warn) 7%, transparent) 16px
    ),
    var(--panel);
}
.ticket.is-on-hold:hover {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      color-mix(in srgb, var(--warn) 10%, transparent) 8px,
      color-mix(in srgb, var(--warn) 10%, transparent) 16px
    ),
    var(--ticket-hover);
}
.ticket.is-packed { border-left-color: var(--ok); }
.ticket.is-ready { border-left-color: var(--info); }
.ticket.is-ready-for-pickup { border-left-color: var(--info); }
.ticket.is-shipped { border-left-color: var(--muted-2); }
.ticket.is-needs { border-left-color: var(--red); }

/* Status-colored card headers (hold keeps diagonal stripe treatment) */
.ticket-head {
  padding: 0.85rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, var(--muted-2));
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ticket-head-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.ticket-head-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
}
/* Board cards: ctn left of carrier stamp */
.ticket .ticket-head-right {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}
.ticket .ticket-head-right .ticket-head-meta {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--text);
}
/* Mobile board: tighter sides so order + open + ctn + carrier stay one row */
@media (max-width: 640px) {
  main.board-main {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1.15rem !important;
  }
  .ticket-head {
    padding: 0.8rem 0.55rem 0.7rem;
    gap: 0.48rem;
  }
  .ticket-head-top {
    gap: 0.3rem;
    flex-wrap: nowrap;
    padding-bottom: 0.08rem;
  }
  .ticket-prog-wrap {
    padding-top: 0.12rem;
    padding-bottom: 0.08rem;
  }
  .ticket-vendor {
    margin-top: 0.1rem;
  }
  .ticket-head-meta-row {
    margin-top: 0.08rem;
    row-gap: 0.35rem;
  }
  .ticket .px-4.py-3,
  .ticket .px-4 {
    padding-top: 0.8rem !important;
    padding-bottom: 0.75rem !important;
  }
  .ticket .item-row {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .ticket .foot-bar {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  .ticket .space-y-1 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.3rem;
  }
  .ticket-order {
    font-size: 1.02rem;
    min-width: 0;
  }
  .ticket-open-top {
    padding: 0.22rem 0.4rem !important;
    font-size: 0.55rem !important;
    flex-shrink: 0;
  }
  .ticket .ticket-head-right {
    gap: 0.28rem;
    margin-left: 0.15rem;
  }
  .ticket .ticket-head-right .ticket-head-meta {
    gap: 0.2rem;
  }
  .ticket .ctn-meta .ctn-num {
    font-size: 1.05rem;
  }
  .ticket .ctn-meta .ctn-unit {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }
  .ticket .stamp,
  .ticket .stamp-logo {
    min-width: 44px;
    min-height: 26px;
    height: 26px;
    padding: 0 0.28rem;
    font-size: 0.5rem;
  }
  .ticket .stamp-logo {
    min-width: 58px;
    min-height: 30px;
    height: auto;
  }
  .ticket .px-4 {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }
  .ticket .foot-bar {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
  .ticket-check {
    width: 1rem;
    height: 1rem;
  }
  .ticket-check input {
    width: 0.9rem;
    height: 0.9rem;
  }
}
.ticket-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  cursor: pointer;
}
.ticket-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--red);
  cursor: pointer;
}
.ticket-check.is-disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
.ticket-order {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}
.ticket-vendor {
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-shipto {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-head-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ticket-head-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}
.ticket.is-selected {
  outline: 1px solid color-mix(in srgb, var(--red) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 25%, transparent);
}

/* Segmented progress pill */
.prog-rail {
  display: flex;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  background: color-mix(in srgb, #000 35%, var(--panel));
  min-height: 1.35rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.prog-seg {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.18rem 0.15rem;
  position: relative;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: transparent;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, filter 0.12s ease;
}
.prog-seg:last-child { border-right: 0; }
.prog-seg.is-clickable {
  cursor: pointer;
}
.prog-seg.is-clickable:hover {
  filter: brightness(1.12);
  z-index: 1;
}
.prog-seg.is-clickable:focus-visible {
  outline: 2px solid color-mix(in srgb, #fff 55%, transparent);
  outline-offset: -2px;
  z-index: 2;
}
.ticket-open-top {
  padding: 0.28rem 0.55rem !important;
  font-size: 0.62rem !important;
  border-radius: 999px;
  opacity: 0.92;
}
.ticket-open-top:hover {
  border-color: var(--red) !important;
  color: var(--red);
}
.ticket-head[data-open-id]:hover {
  background: color-mix(in srgb, var(--ticket-hover, var(--panel)) 88%, #fff 4%);
}
.prog-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted-2) 70%, transparent);
  box-shadow: none;
  flex-shrink: 0;
}
.prog-lbl {
  line-height: 1;
  white-space: nowrap;
  font-size: 0.55rem;
  letter-spacing: 0.03em;
}
.prog-ico {
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0.95;
  flex-shrink: 0;
}
.prog-rail.has-icons .prog-seg {
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.28rem 0.12rem 0.22rem;
  min-height: 2.35rem;
}
.prog-rail.has-icons .prog-dot { display: none; }
/* Keep labels on mobile — icons + short text */
@media (max-width: 420px) {
  .prog-rail.has-icons .prog-lbl {
    display: inline;
    font-size: 0.5rem;
    letter-spacing: 0.02em;
  }
  .prog-rail:not(.has-icons) .prog-lbl { display: none; }
}
.prog-seg.is-done {
  color: color-mix(in srgb, #fff 82%, transparent);
}
.prog-seg.is-done .prog-dot {
  background: currentColor;
  opacity: 0.9;
}
.prog-seg.is-current {
  color: #fff;
  font-weight: 900;
}
.prog-seg.is-current .prog-dot {
  background: #fff;
  box-shadow: 0 0 10px currentColor, 0 0 2px #fff;
}
.prog-seg.is-todo {
  opacity: 0.55;
}
/* per-stage colors */
.prog-seg.prog-new.is-done,
.prog-seg.prog-new.is-current {
  background: color-mix(in srgb, var(--red) 55%, #1a0505);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--red) 45%, transparent);
  color: #fff;
}
.prog-seg.prog-working.is-done,
.prog-seg.prog-working.is-current {
  background: color-mix(in srgb, var(--warn) 50%, #1a1200);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--warn) 40%, transparent);
  color: #fff;
}
.prog-seg.prog-packed.is-done,
.prog-seg.prog-packed.is-current {
  background: color-mix(in srgb, var(--ok) 48%, #04140a);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--ok) 40%, transparent);
  color: #fff;
}
.prog-seg.prog-ready.is-done,
.prog-seg.prog-ready.is-current {
  background: color-mix(in srgb, var(--info) 52%, #041018);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--info) 42%, transparent);
  color: #fff;
}
.prog-seg.prog-shipped.is-done,
.prog-seg.prog-shipped.is-current {
  background: color-mix(in srgb, var(--muted-2) 45%, #0c0c0e);
  box-shadow: inset 0 0 10px color-mix(in srgb, #fff 10%, transparent);
  color: #e8e8ea;
}

/* Light mode: cleaner grayed / inactive progress + stamps */
html[data-theme="light"] .prog-rail {
  background: #ECECEE;
  border-color: #C4C4CA;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .prog-seg {
  color: #5A5A64;
  border-right-color: #D2D2D8;
}
html[data-theme="light"] .prog-seg.is-todo {
  opacity: 1;
  color: #6A6A74;
  background: transparent;
}
html[data-theme="light"] .prog-seg.is-todo .prog-dot {
  background: #A0A0A8;
  opacity: 1;
}
html[data-theme="light"] .prog-seg.is-done {
  color: #1a1a1e;
}
html[data-theme="light"] .prog-seg.is-current {
  color: #fff;
}
html[data-theme="light"] .prog-seg.prog-new.is-done,
html[data-theme="light"] .prog-seg.prog-new.is-current {
  background: color-mix(in srgb, var(--red) 82%, #fff);
  box-shadow: none;
}
html[data-theme="light"] .prog-seg.prog-working.is-done,
html[data-theme="light"] .prog-seg.prog-working.is-current {
  background: color-mix(in srgb, var(--warn) 78%, #fff);
  box-shadow: none;
  color: #1a1200;
}
html[data-theme="light"] .prog-seg.prog-working.is-current {
  color: #1a1200;
}
html[data-theme="light"] .prog-seg.prog-working.is-current .prog-dot {
  background: #1a1200;
  box-shadow: none;
}
html[data-theme="light"] .prog-seg.prog-packed.is-done,
html[data-theme="light"] .prog-seg.prog-packed.is-current {
  background: color-mix(in srgb, var(--ok) 72%, #fff);
  box-shadow: none;
  color: #062816;
}
html[data-theme="light"] .prog-seg.prog-packed.is-current .prog-dot {
  background: #062816;
  box-shadow: none;
}
html[data-theme="light"] .prog-seg.prog-ready.is-done,
html[data-theme="light"] .prog-seg.prog-ready.is-current {
  background: color-mix(in srgb, var(--info) 75%, #fff);
  box-shadow: none;
  color: #0c1a30;
}
html[data-theme="light"] .prog-seg.prog-ready.is-current .prog-dot {
  background: #0c1a30;
  box-shadow: none;
}
html[data-theme="light"] .prog-seg.prog-shipped.is-done,
html[data-theme="light"] .prog-seg.prog-shipped.is-current {
  background: #D8D8DE;
  box-shadow: none;
  color: #2a2a30;
}
html[data-theme="light"] .prog-seg.prog-shipped.is-current .prog-dot {
  background: #2a2a30;
  box-shadow: none;
}
html[data-theme="light"] .stamp:not(.has-carrier) {
  color: #6A6A74;
  border-color: #C4C4CA;
  background: #F3F3F5;
  opacity: 1;
}
html[data-theme="light"] .claim-footer {
  color: #6A6A74;
  border-top-color: #E0E0E4;
}
html[data-theme="light"] .claim-footer .claim-who {
  color: #3A3A42;
}
html[data-theme="light"] .ticket-head-meta,
html[data-theme="light"] .ticket-head-dates {
  color: #5A5A64;
}
html[data-theme="light"] .recent-track,
html[data-theme="light"] .recent-track .ago {
  color: #5A5A64;
}
.prog-rail.is-side-hold .prog-seg.is-current {
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--warn) 55%, #1a1200),
      color-mix(in srgb, var(--warn) 55%, #1a1200) 6px,
      color-mix(in srgb, var(--warn) 35%, #1a1200) 6px,
      color-mix(in srgb, var(--warn) 35%, #1a1200) 12px
    );
}
.flag-hold {
  background: color-mix(in srgb, var(--warn) 22%, var(--panel));
  color: var(--warn-soft-text, #f5d78e);
  border-color: var(--warn);
}

/* Bottom recent track (status sparkline + just-now marker) */
.recent-track {
  position: relative;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, #000 28%, var(--panel));
  padding: 0.45rem 0.7rem 0.5rem;
}
.recent-track.is-hot {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 35%, transparent);
}
.recent-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.28rem;
}
.recent-label .ago {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--text) 70%, var(--muted));
}
.spark {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 16px;
}
.spark i {
  flex: 1 1 0;
  display: block;
  min-width: 0;
  border-radius: 2px 2px 1px 1px;
  background: color-mix(in srgb, var(--muted-2) 45%, #111);
  height: 22%;
  opacity: 0.45;
}
.spark i.dim {
  opacity: 0.22;
  height: 18% !important;
  background: color-mix(in srgb, var(--muted-2) 35%, #111) !important;
  box-shadow: none !important;
}
.spark i.new { background: color-mix(in srgb, var(--red) 72%, #222); height: 42%; opacity: 0.75; }
.spark i.working { background: color-mix(in srgb, var(--warn) 75%, #222); height: 55%; opacity: 0.8; }
.spark i.packed { background: color-mix(in srgb, var(--ok) 72%, #222); height: 68%; opacity: 0.8; }
.spark i.ready { background: color-mix(in srgb, var(--info) 78%, #222); height: 82%; opacity: 0.85; }
.spark i.shipped { background: #6b7280; height: 100%; opacity: 0.85; }
.spark i.now {
  opacity: 1;
  outline: 1px solid color-mix(in srgb, #fff 40%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, #fff 25%, transparent);
}
.spark i.ready.now { box-shadow: 0 0 10px color-mix(in srgb, var(--info) 70%, transparent); }
.spark i.working.now { box-shadow: 0 0 10px color-mix(in srgb, var(--warn) 65%, transparent); }
.spark i.packed.now { box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 65%, transparent); }
.spark i.new.now { box-shadow: 0 0 10px color-mix(in srgb, var(--red) 65%, transparent); }
.hot-tag {
  position: absolute;
  right: 0.55rem;
  bottom: 1.35rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0b1220;
  background: #7dd3fc;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(125, 211, 252, 0.55);
  z-index: 2;
}
.just-touched {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--info), #7dd3fc, var(--info), transparent);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.85), 0 0 2px #7dd3fc;
  animation: recent-pulse 1.8s ease-in-out infinite;
}
@keyframes recent-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.ticket.is-hot-recent {
  border-color: color-mix(in srgb, var(--info) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--info) 28%, transparent);
}

/* Select all (current tab / step) */
.select-all-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 90%, #000);
}
.select-all-wrap.hidden { display: none; }
.select-all-wrap input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--red);
  cursor: pointer;
}
.select-all-wrap:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.select-all-wrap.is-partial input {
  opacity: 0.85;
}

/* Bulk claim bar */
.bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 50;
}
.bulk-bar.hidden { display: none; }
.bulk-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--panel) 92%, #000);
  box-shadow: 0 10px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
}
.bulk-count {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0 0.35rem;
}
.bulk-count b { color: var(--text); font-size: 0.95rem; }

/* Ticket detail progress */
.ticket-detail-prog {
  margin: 0.75rem 0 0.25rem;
  max-width: 42rem;
}
.ticket-detail-prog .prog-rail {
  min-height: 1.55rem;
}
.ticket-detail-prog .prog-lbl {
  font-size: 0.62rem;
}
.ticket.is-new .ticket-head {
  background: color-mix(in srgb, var(--red) 16%, var(--panel));
  border-bottom-color: color-mix(in srgb, var(--red) 35%, var(--border));
}
.ticket.is-working .ticket-head {
  background: color-mix(in srgb, var(--warn) 18%, var(--panel));
  border-bottom-color: color-mix(in srgb, var(--warn) 40%, var(--border));
}
.ticket.is-waiting-parts .ticket-head {
  background: color-mix(in srgb, var(--muted-2) 18%, var(--panel));
  border-bottom-style: dashed;
}
.ticket.is-on-hold .ticket-head {
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--warn) 22%, var(--panel)),
      color-mix(in srgb, var(--warn) 22%, var(--panel)) 8px,
      color-mix(in srgb, var(--warn) 10%, var(--panel)) 8px,
      color-mix(in srgb, var(--warn) 10%, var(--panel)) 16px
    );
  border-bottom-color: var(--warn);
}
.ticket.is-packed .ticket-head {
  background: color-mix(in srgb, var(--ok) 16%, var(--panel));
  border-bottom-color: color-mix(in srgb, var(--ok) 35%, var(--border));
}
.ticket.is-ready .ticket-head,
.ticket.is-ready-for-pickup .ticket-head {
  background: color-mix(in srgb, var(--info) 16%, var(--panel));
  border-bottom-color: color-mix(in srgb, var(--info) 35%, var(--border));
}
.ticket.is-shipped .ticket-head {
  background: color-mix(in srgb, var(--muted-2) 14%, var(--panel));
}
.ticket.is-needs .ticket-head {
  background: color-mix(in srgb, var(--red) 20%, var(--panel));
}
.ticket-order { color: inherit; text-decoration: none; }
.ticket-order:hover { color: var(--red); }
.ticket-head-sub { color: var(--text); opacity: 0.92; }
.ticket-head-dates { color: var(--muted); }
.ticket-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35rem 0.55rem;
  color: var(--text);
}
/* Big carton count under carrier stamp — no label count ("lbl" ≈ lbs) */
.ctn-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ctn-meta .ctn-num {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ctn-meta .ctn-unit {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ctn-meta.is-empty .ctn-num { color: var(--muted); opacity: 0.7; }
.plt-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.plt-meta .plt-num {
  font-size: 0.95rem;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.plt-meta .plt-unit {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ship-cartons .ctn-meta .ctn-num { font-size: 1.15rem; }
.flag-vendor {
  background: color-mix(in srgb, var(--secondary-btn-bg, #444) 55%, var(--panel));
  color: var(--text);
  border-color: var(--border-strong);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 0.62rem;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-row { border: 1px solid transparent; cursor: pointer; user-select: none; position: relative; }
.item-row:hover { background: var(--hover-row); border-color: var(--border); }
.item-row.is-picked,
.line-item-row.is-picked {
  color: color-mix(in srgb, var(--muted) 70%, #6b3a1f);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      color-mix(in srgb, #6b3a1f 14%, transparent) 6px,
      color-mix(in srgb, #6b3a1f 14%, transparent) 12px
    ),
    color-mix(in srgb, #6b3a1f 6%, var(--panel));
  border-color: color-mix(in srgb, #6b3a1f 35%, var(--border));
}
.item-row.is-picked .item-sku,
.line-item-row.is-picked .item-sku,
.line-item-row.is-picked .item-sku-sub {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, #6b3a1f 75%, transparent);
  text-decoration-thickness: 2px;
}
.item-row.is-pick-busy,
.line-item-row.is-pick-busy { opacity: 0.65; pointer-events: none; }
.item-metrics .im-ctn.is-pack {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
  transition: 0.12s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: transparent;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hover); }
.btn-secondary { background: var(--secondary-btn-bg); color: var(--secondary-btn-fg); }
.btn-secondary:hover { opacity: 0.9; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--muted-2); }
.btn-warn { background: var(--warn); color: #000; }
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
}
.btn-icon:hover { border-color: var(--red); color: var(--red); }

/* Legacy stat cards kept for other pages if needed */
.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong);
  box-shadow: var(--shadow);
  padding: 0.75rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: 0.12s ease;
  width: 100%;
  color: inherit;
  font: inherit;
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.stat:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.stat.is-active {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}
.stat-new {
  border-top-color: var(--red);
  background: linear-gradient(180deg, color-mix(in srgb, var(--red) 14%, var(--panel)), var(--panel));
}
.stat-new .label, .stat-new .stat-num { color: var(--red); }
.stat-working { border-top-color: var(--warn); }
.stat-waiting-parts {
  border-top-color: var(--muted-2);
  opacity: 0.85;
}
.stat-waiting-parts .stat-num { color: var(--muted); font-size: 1.55rem !important; }
.stat-on-hold {
  border-top-color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 16%, var(--panel)), var(--panel));
}
.stat-on-hold .label,
.stat-on-hold .stat-num { color: var(--warn-soft-text); }
.stat-on-hold.is-active {
  border-color: var(--warn);
  box-shadow: 0 0 0 1px var(--warn);
}
.stat-packed { border-top-color: var(--ok); }
.stat-ready { border-top-color: var(--info); }
.stat-shipped { border-top-color: var(--muted-2); }

/* Board: single-page status tabs */
.board-tabs-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.55rem 0.85rem;
  justify-content: flex-start;
  align-content: flex-start;
}
.status-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}
.status-tabs-main {
  flex: 0 1 auto;
}
/* Niche group sits just after main flow with a small spacer — not far-right orphan */
.status-tabs-niche {
  flex: 0 0 auto;
  opacity: 0.88;
  border-style: dashed;
  margin-left: 0.35rem;
}
/* visual break between main pack flow and niche states */
.status-tabs-niche::before {
  content: none;
}
.status-tab {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.55rem 0.85rem;
  min-width: 4.5rem;
  transition: background 0.12s ease, color 0.12s ease;
}
.status-tab:last-child { border-right: 0; }
.status-tab:hover { background: var(--hover-row); color: var(--text); }
.status-tab:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; z-index: 1; }
.status-tab .tab-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
}
.status-tab .tab-count {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.status-tab.is-active {
  background: color-mix(in srgb, var(--red) 12%, var(--panel));
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--red);
}
.status-tab.is-active .tab-count { color: var(--red); }
.status-tab.tab-new.is-active { box-shadow: inset 0 -3px 0 var(--red); }
.status-tab.tab-working.is-active { box-shadow: inset 0 -3px 0 var(--warn); }
.status-tab.tab-working.is-active .tab-count { color: var(--warn-soft-text); }
.status-tab.tab-packed.is-active { box-shadow: inset 0 -3px 0 var(--ok); }
.status-tab.tab-packed.is-active .tab-count { color: var(--ok-soft-text); }
.status-tab.tab-ready.is-active { box-shadow: inset 0 -3px 0 var(--info); }
.status-tab.tab-ready.is-active .tab-count { color: var(--info-soft-text); }
.status-tab.tab-shipped.is-active { box-shadow: inset 0 -3px 0 var(--muted-2); }
.status-tab.tab-shipped.is-active .tab-count { color: var(--muted); }
/* On Hold — deliberately loud in the tab strip */
.status-tab.tab-on-hold {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--warn-soft-text);
}
.status-tab.tab-on-hold .tab-count { color: var(--warn-soft-text); }
.status-tab.tab-on-hold.is-active {
  background: color-mix(in srgb, var(--warn) 22%, var(--panel));
  box-shadow: inset 0 -3px 0 var(--warn);
}
/* Waiting Parts — discrete, de-emphasized */
.status-tab.is-discrete,
.status-tab.tab-waiting-parts {
  opacity: 0.72;
  min-width: 3.75rem;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}
.status-tab.tab-waiting-parts .tab-label {
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.status-tab.tab-waiting-parts .tab-count {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 700;
}
.status-tab.tab-waiting-parts.is-active {
  opacity: 1;
  box-shadow: inset 0 -3px 0 var(--muted-2);
  background: color-mix(in srgb, var(--muted-2) 12%, var(--panel));
}

/* Multi-status dropdown */
.multi-filter-wrap {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
}
.multi-filter-btn {
  height: 100%;
  min-height: 100%;
  gap: 0.45rem;
  white-space: nowrap;
}
.multi-filter-btn.is-active {
  border-color: var(--red);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
}
.multi-filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  padding: 0.4rem 0;
}
.multi-filter-head {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.4rem 0.85rem 0.55rem;
}
.multi-filter-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font-size: 0.8rem;
}
.multi-filter-item:hover { background: var(--hover-row); }
.multi-filter-item input { accent-color: var(--red); }
.multi-filter-item .multi-count {
  margin-left: auto;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.75rem;
}
.multi-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem 0.35rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}

.logo-img { height: 28px; width: auto; display: block; }
.qty { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Line-item qty / carton counts — easy floor scan */
.item-metrics {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.item-metrics .im-qty,
.item-metrics .im-ctn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.item-metrics .im-ctn { color: var(--ok); }
.item-metrics .im-unit {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--muted);
  margin-right: 0.15rem;
}
.item-metrics .im-sep {
  color: var(--muted-2);
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0 0.1rem;
}
.item-row .item-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
}
.line-item-row {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.line-item-row .item-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
}
.line-item-row .item-sku-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.line-item-row .item-metrics .im-qty,
.line-item-row .item-metrics .im-ctn {
  font-size: 1.25rem;
}
.line-item-row .item-metrics .im-unit {
  font-size: 0.78rem;
}
html[data-theme="light"] .item-metrics .im-unit {
  color: #5A5A64;
}
html[data-theme="light"] .item-metrics .im-ctn {
  color: #145C3C;
}
.topbar { background: var(--header); border-bottom: 1px solid var(--border); }
.divider { background: var(--border-strong); width: 1px; }
.foot-bar {
  background: color-mix(in srgb, var(--bg) 70%, #000 30%);
  border-top: 1px solid var(--border);
}
html[data-theme="light"] .foot-bar { background: var(--panel-alt); }

/* Thin assignee strip — keeps names off the badge row */
.assignee-strip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 26px;
  padding: 0.2rem 1rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 70%, var(--panel));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assignee-strip .who {
  color: var(--text);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0.02em;
}
.assignee-strip.is-empty .who { color: var(--muted-2); font-weight: 600; }
.assignee-strip.is-hold {
  color: var(--warn-soft-text);
  background: color-mix(in srgb, var(--warn) 12%, var(--panel));
}
.assignee-strip .hold-line {
  font-weight: 800;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assignee-strip .age-chip-strip {
  margin-left: auto;
  flex-shrink: 0;
}

/* Board card footer — tiny claimed-by line */
.claim-footer {
  padding: 0.12rem 1rem 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 0.58rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
}
.claim-footer .claim-who {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Days-since-added — intentionally tiny */
.age-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--muted-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.age-chip:hover { opacity: 1; color: var(--muted); }
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
  width: 100%;
}

.needs-row {
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
  border: 1px solid var(--red-soft-border);
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
html[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.search-input {
  min-width: min(280px, 70vw);
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
}
.search-input:focus {
  outline: 1px solid var(--red);
  border-color: var(--red);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--red);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
}
.filter-chip button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 800;
  padding: 0 0 0 0.25rem;
}

.empty-state {
  border: 1px dashed var(--border);
  color: var(--muted);
  text-align: center;
  padding: 2.5rem 1rem;
  margin-top: 0.5rem;
}
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Nav */
.nav-links { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.nav-link {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 0.4rem 0.65rem;
  border: 1px solid transparent;
}
.nav-link:hover { color: var(--text); border-color: var(--border); }
.nav-link.is-active {
  color: var(--text);
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

/* Niche tab buttons (inside the separate niche strip) */
.status-tabs-niche .status-tab,
.status-tab.is-niche {
  min-width: 4.1rem;
  padding: 0.45rem 0.7rem;
  opacity: 0.88;
}
.status-tabs-niche .status-tab .tab-label,
.status-tab.is-niche .tab-label {
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}
.status-tabs-niche .status-tab .tab-count,
.status-tab.is-niche .tab-count {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 700;
}

/* Pickup / carrier totals */
.pickup-bar {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}
.pickup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.pickup-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  padding: 0.15rem 0.05rem 0.25rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.pickup-note .pickup-meta {
  color: var(--muted);
}
@media (max-width: 1100px) {
  .pickup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pickup-grid { grid-template-columns: 1fr; }
}
.pickup-card {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pickup-card .carrier-name {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pickup-card .carton-total {
  font-size: 1.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pickup-meta {
  font-size: 0.75rem;
  color: var(--muted);
}
.pickup-card.is-pickup-day {
  border-color: color-mix(in srgb, var(--ok) 50%, var(--border));
}
.pickup-card.is-empty { opacity: 0.65; }
.pickup-card .stamp-logo {
  min-width: 72px;
  min-height: 36px;
  flex-shrink: 0;
}
.pickup-card .stamp-fx .stamp-brand { font-size: 0.72rem; }
.pickup-card .stamp-fx .stamp-svc { font-size: 0.52rem; }
.pickup-card .stamp-ups .ups-brand { font-size: 0.85rem; }
.pickup-card .stamp-dhl .dhl-mark { font-size: 0.95rem; }


.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 28px;
  padding: 0 0.4rem;
  border: 1px dashed var(--border-strong);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
  box-sizing: border-box;
  line-height: 1;
  vertical-align: middle;
}
.stamp.has-carrier {
  border-style: solid;
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--panel-alt);
}
/* UPS brown locked — must beat .stamp.has-carrier (panel-alt) in both themes */
.stamp.ups,
.stamp.has-carrier.stamp-ups,
.stamp.stamp-ups {
  border-color: #351c15;
  background: #351c15;
  color: #ffb500;
}
.stamp.fedex {
  border-color: #4d148c;
  background: #4d148c;
  color: #ff6600;
}

/* Bigger logo-style stamps — FedEx Express vs Ground */
.stamp-logo {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 78px;
  height: auto;
  min-height: 38px;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  border-width: 2px;
  letter-spacing: 0;
  text-transform: none;
  gap: 0;
}
.stamp-logo .stamp-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.5rem 0.12rem;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
  font-style: italic;
  font-family: Arial Black, Arial, Helvetica, sans-serif;
}
.stamp-logo .stamp-brand i {
  font-style: italic;
  font-weight: 900;
}
.stamp-logo .stamp-svc {
  display: block;
  text-align: center;
  padding: 0.14rem 0.4rem 0.18rem;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

/* FedEx wordmark: Fed purple / Ex orange on white brand bar */
.stamp-fx {
  border-color: #4d148c;
  background: #fff;
  color: #4d148c;
  min-width: 88px;
}
.stamp-fx .stamp-brand {
  background: #fff;
  gap: 0;
}
.stamp-fx .fx-fed { color: #4d148c; }
.stamp-fx .fx-ex { color: #ff6600; }

/* Express = purple service strip (air/intl network) */
.stamp-fx.fx-express {
  border-color: #4d148c;
  box-shadow: 0 1px 0 rgba(77, 20, 140, 0.25);
}
.stamp-fx.fx-express .stamp-svc {
  background: #4d148c;
  color: #fff;
}

/* Ground = green service strip (Ground / Home Delivery / Ground Economy) */
.stamp-fx.fx-ground {
  border-color: #4d148c;
  box-shadow: 0 1px 0 rgba(0, 114, 41, 0.2);
}
.stamp-fx.fx-ground .stamp-svc {
  background: #007229;
  color: #fff;
}

/* Unknown FedEx subtype — brand only, no service strip */
.stamp-fx.fx-unk {
  min-height: 34px;
}
.stamp-fx.fx-unk .stamp-brand {
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
}

/* UPS — gold shield badge on chocolate brown (same in light + dark) */
.stamp.has-carrier.stamp-ups,
.stamp.stamp-ups,
html[data-theme="light"] .stamp.has-carrier.stamp-ups,
html[data-theme="light"] .stamp.stamp-ups {
  border-color: #ffb500;
  background: linear-gradient(180deg, #4a281c 0%, #351c15 55%, #2a1510 100%);
  color: #ffb500;
  min-width: 78px;
  min-height: 40px;
  box-shadow: inset 0 1px 0 rgba(255, 181, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .stamp-ups .ups-brand {
  color: #ffb500;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .stamp-ups .ups-shield::after {
  background: #351c15;
}
.stamp-ups .ups-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.32rem 0.5rem 0.34rem;
}
.stamp-ups .ups-shield {
  width: 0.95rem;
  height: 1.12rem;
  flex-shrink: 0;
  background: linear-gradient(180deg, #ffd24d 0%, #ffb500 55%, #e0a000 100%);
  clip-path: polygon(8% 0, 92% 0, 100% 14%, 100% 62%, 50% 100%, 0 62%, 0 14%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  position: relative;
}
.stamp-ups .ups-shield::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 42%;
  height: 28%;
  transform: translate(-50%, -50%);
  background: #351c15;
  border-radius: 1px 1px 2px 2px;
}
.stamp-ups .ups-brand {
  color: #ffb500;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  padding: 0;
  font-family: Arial Black, Arial, Helvetica, sans-serif;
}

/* DHL — red wordmark on brand yellow */
.stamp-dhl {
  border-color: #d40511;
  background: #ffcc00;
  min-width: 78px;
  min-height: 40px;
  box-shadow: 0 1px 0 rgba(212, 5, 17, 0.25);
}
.stamp-dhl .dhl-brand {
  background: #ffcc00;
  padding: 0.34rem 0.55rem 0.3rem;
}
.stamp-dhl .dhl-mark {
  color: #d40511;
  font-style: italic;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1;
  font-family: Arial Black, Impact, Arial, Helvetica, sans-serif;
}
.stamp-dhl .stamp-svc.dhl-bar {
  display: block;
  height: 5px;
  padding: 0;
  background: #d40511;
  letter-spacing: 0;
  font-size: 0;
  line-height: 0;
}

.stamp-other {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

.stamp-freight {
  border-color: var(--info);
  background: var(--info-soft);
  color: var(--info-soft-text);
  min-width: 72px;
  min-height: 34px;
}
.stamp-freight .stamp-brand {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  padding: 0.35rem 0.45rem;
}

/* Ticket detail stamp can be a touch larger */
#carrierStamp .stamp-logo {
  min-width: 100px;
  min-height: 44px;
}
#carrierStamp .stamp-fx .stamp-brand {
  font-size: 0.92rem;
  padding: 0.28rem 0.6rem 0.14rem;
}
#carrierStamp .stamp-fx .stamp-svc {
  font-size: 0.66rem;
  padding: 0.18rem 0.5rem 0.22rem;
  letter-spacing: 0.16em;
}
#carrierStamp .stamp-ups {
  min-width: 96px;
  min-height: 46px;
}
#carrierStamp .stamp-ups .ups-brand {
  font-size: 1.12rem;
}
#carrierStamp .stamp-ups .ups-shield {
  width: 1.1rem;
  height: 1.28rem;
}
#carrierStamp .stamp-dhl {
  min-width: 96px;
  min-height: 46px;
}
#carrierStamp .stamp-dhl .dhl-mark {
  font-size: 1.2rem;
}

.carton-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.carton-badge .num {
  font-size: 1.1rem;
  font-weight: 800;
}
.carton-badge .lbl {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Tables for rules / boxes */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.data-table th {
  text-align: left;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 40%, var(--panel));
}
.data-table td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: var(--hover-row); }
.low-stock { color: var(--red); font-weight: 700; }
.page-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem;
}
.page-sub { color: var(--muted); font-size: 0.875rem; margin: 0 0 1.25rem; }
.matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.matrix-card {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow);
}
.matrix-card .pair {
  font-weight: 700;
  font-size: 0.9rem;
}


/* Status flow timeline on cards / ready rows */
.flow-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  font-size: 0.65rem;
  line-height: 1.2;
}
.flow-step {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 50%, var(--panel));
  min-width: 4.5rem;
}
.flow-step.is-current {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
}
.flow-label {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.flow-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.flow-note {
  color: var(--warn-soft-text, #E8C56A);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.flow-arrow { color: var(--muted-2); font-weight: 700; }

/* Ready / shipped / archived — horizontal list rows */
.ready-list,
.ship-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ready-row,
.ship-row {
  border-left-width: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-2);
}
.ship-row.is-shipped { border-left-color: var(--muted-2); }
.ship-row.is-archived { border-left-color: color-mix(in srgb, var(--muted-2) 70%, var(--info)); opacity: 0.95; }
.ready-main,
.ship-main {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(160px, 1.2fr) auto minmax(180px, 1.5fr) auto;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.7rem 1rem;
}
.ready-id,
.ship-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.ready-meta,
.ship-meta { min-width: 0; }
.ship-meta .ticket-vendor {
  font-size: 0.88rem;
  margin: 0;
}
.ship-meta .ticket-shipto {
  margin-top: 0.1rem;
}
.ready-cartons,
.ship-cartons { justify-self: center; white-space: nowrap; }
.ready-timeline,
.ship-lines { min-width: 0; }
.ready-actions,
.ship-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}
.ship-row .recent-track {
  padding-top: 0.35rem;
  padding-bottom: 0.4rem;
}
.ship-row .spark { height: 12px; }
.ship-row .hot-tag { bottom: 1.1rem; }
@media (max-width: 1100px) {
  .ready-main,
  .ship-main { grid-template-columns: 1fr 1fr; }
  .ready-timeline,
  .ship-lines,
  .ready-actions,
  .ship-actions { grid-column: 1 / -1; }
  .ready-actions,
  .ship-actions { align-items: stretch; justify-content: flex-start; }
}
.status-tab.tab-archived.is-active { box-shadow: inset 0 -3px 0 var(--muted-2); }

/* Flags: label/paid priority, important, notes */
.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid transparent;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flag-label {
  background: color-mix(in srgb, #2F9E6B 22%, var(--panel));
  color: var(--ok-soft-text);
  border-color: var(--ok-soft-border);
  box-shadow: 0 0 0 1px color-mix(in srgb, #2F9E6B 35%, transparent);
}
.flag-important {
  background: color-mix(in srgb, var(--red) 18%, var(--panel));
  color: var(--red-soft-text);
  border-color: var(--red-soft-border);
}
.flag-notes {
  background: color-mix(in srgb, var(--info) 16%, var(--panel));
  color: var(--info-soft-text, var(--info));
  border-color: var(--info-soft-border, var(--border-strong));
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 0.62rem;
}
.ticket.has-label { box-shadow: inset 3px 0 0 var(--ok); }
.ticket.is-important { box-shadow: inset 3px 0 0 var(--red); }
.ticket.has-label.is-important {
  box-shadow: inset 3px 0 0 var(--red), inset 6px 0 0 var(--ok);
}
.note-preview {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--info-soft-text, var(--text));
  background: color-mix(in srgb, var(--info) 10%, var(--panel));
  border: 1px solid var(--info-soft-border, var(--border));
  padding: 0.5rem 0.65rem;
}
.note-preview i { margin-right: 0.35rem; opacity: 0.85; }
.inv-row {
  border: 1px solid var(--border);
  padding: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.inv-row label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.inv-row select, .inv-row input {
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.45rem 0.55rem;
  font: inherit;
  width: 100%;
}
.inv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; }
.side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }


/* Freight statuses */
.status-waiting-vt { background: var(--warn-soft); color: var(--warn-soft-text); border-color: var(--warn-soft-border); }
.status-bol-ready { background: var(--info-soft); color: var(--info-soft-text); border-color: var(--info-soft-border); }
.status-picked-up { background: color-mix(in srgb, var(--ok) 18%, var(--panel)); color: var(--ok-soft-text); border-color: var(--ok-soft-border); }
.status-delivered { background: var(--shipped-soft); color: var(--muted); border-color: var(--border); }
.ticket.is-waiting-vt { border-left-color: var(--warn); }
.ticket.is-bol-ready { border-left-color: var(--info); }
.ticket.is-picked-up { border-left-color: var(--ok); }
.ticket.is-delivered { border-left-color: var(--muted-2); }
.status-tab.tab-waiting-vt.is-active { box-shadow: inset 0 -3px 0 var(--warn); }
.status-tab.tab-bol-ready.is-active { box-shadow: inset 0 -3px 0 var(--info); }
.status-tab.tab-picked-up.is-active { box-shadow: inset 0 -3px 0 var(--ok); }
.status-tab.tab-delivered.is-active { box-shadow: inset 0 -3px 0 var(--muted-2); }
.flag-freight {
  background: color-mix(in srgb, var(--info) 18%, var(--panel));
  color: var(--info-soft-text);
  border-color: var(--info-soft-border);
}
.flag-bol {
  background: color-mix(in srgb, var(--ok) 16%, var(--panel));
  color: var(--ok-soft-text);
  border-color: var(--ok-soft-border);
}
.stamp.xpo { border-color: #c41230; background: #c41230; color: #fff; }
.stamp.freight { border-color: var(--info); background: var(--info-soft); color: var(--info-soft-text); }

/* Ticket chat */
.chat-thread {
  max-height: min(42vh, 420px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.15rem;
}
.chat-msg {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 70%, var(--panel));
  padding: 0.55rem 0.7rem;
}
.chat-msg.is-vt { border-left: 3px solid var(--info); }
.chat-msg.is-question { border-left: 3px solid var(--warn); }
.chat-msg.is-blocker { border-left: 3px solid var(--red); }
.chat-msg.is-bol { border-left: 3px solid var(--ok); }
.chat-msg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  align-items: baseline;
  margin-bottom: 0.25rem;
  font-size: 0.68rem;
  color: var(--muted);
}
.chat-msg-meta .who { font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; }
.chat-msg-meta .kind {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.58rem;
  border: 1px solid var(--border);
  padding: 1px 5px;
}
.chat-msg-body {
  white-space: pre-wrap;
  font-size: 0.88rem;
  line-height: 1.4;
}
.chat-kind {
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
}
.chat-compose textarea {
  width: 100%;
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 0.65rem;
  font: inherit;
}
.freight-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.78rem;
}
.freight-meta b { display: block; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 800; }

/* Compact wrap chips under ticket header */
.freight-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: -0.35rem 0 1rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--warn) 7%, var(--panel));
}
.freight-meta-bar.hidden { display: none; }
.fm-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.22rem 0.45rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 40%, var(--panel));
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  max-width: 100%;
}
.fm-chip b {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.fm-chip span {
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}
.ticket-head-right {
  text-align: right;
  min-width: 8rem;
}
.ticket-detail-prog .prog-rail.has-icons {
  min-height: 2.55rem;
}
.ticket-detail-prog .prog-lbl {
  font-size: 0.58rem;
}
.ticket-detail-prog .prog-ico {
  font-size: 0.82rem;
}


/* Packing truth panel (VT-visible) */
.packing-panel {
  border-color: color-mix(in srgb, var(--info) 35%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 12%, transparent);
}
.packing-panel.is-freight {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 6%, var(--panel));
}
.packing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}
@media (max-width: 720px) {
  .packing-grid { grid-template-columns: 1fr; }
}
.pack-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.pack-field > span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pack-field input {
  width: 100%;
  font-size: 1.45rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  padding: 0.85rem 0.95rem;
  border: 2px solid var(--border-strong);
  border-radius: 0.35rem;
  background: var(--input-bg, var(--bg));
  color: var(--text);
  font-family: inherit;
}
.pack-field input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent);
}
.packing-panel.is-freight .pack-field input {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--border-strong));
}

/* Chat — user-colored, easy scan */
.chat-thread {
  max-height: min(48vh, 520px);
  gap: 0.7rem;
}
.chat-msg {
  display: flex;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--user-color, var(--border)) 35%, var(--border));
  background: color-mix(in srgb, var(--user-color, var(--panel-alt)) 10%, var(--panel));
  padding: 0;
  overflow: hidden;
}
.chat-msg-bar {
  width: 6px;
  flex-shrink: 0;
  background: var(--user-color, var(--muted-2));
}
.chat-msg-inner {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.85rem 0.8rem;
}
.chat-msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin-bottom: 0.4rem;
}
.chat-avatar {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #0b0b0c;
  flex-shrink: 0;
}
.chat-msg-meta .who {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.office-pill {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.office-pill.office-ca {
  background: color-mix(in srgb, #2563EB 28%, var(--panel));
  color: #bfdbfe;
  border-color: color-mix(in srgb, #2563EB 55%, var(--border));
}
.office-pill.office-vt {
  background: color-mix(in srgb, #D97706 28%, var(--panel));
  color: #fde68a;
  border-color: color-mix(in srgb, #D97706 55%, var(--border));
}
/* Light mode: dark text on tinted chips for readable CA/VT tags */
html[data-theme="light"] .office-pill.office-ca {
  background: #DBEAFE;
  color: #1E3A8A;
  border-color: #93C5FD;
}
html[data-theme="light"] .office-pill.office-vt {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FCD34D;
}
.chat-msg-body {
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 500;
}
.chat-when { font-size: 0.68rem; color: var(--muted); }

/* Board message badge */
.msg-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.45rem 0.18rem 0.3rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--user-color, var(--border)) 50%, var(--border));
  background: color-mix(in srgb, var(--user-color, var(--panel-alt)) 18%, var(--panel));
  color: var(--text);
  max-width: 8.5rem;
  flex-shrink: 0;
}
.msg-badge .msg-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--user-color, var(--muted-2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--user-color, transparent) 25%, transparent);
  flex-shrink: 0;
}
.msg-badge .msg-who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 4.5rem;
}
.msg-badge.is-unread {
  border-color: var(--user-color, var(--red));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--user-color, var(--red)) 35%, transparent),
    0 0 14px color-mix(in srgb, var(--user-color, var(--red)) 35%, transparent);
  animation: msg-pulse 1.6s ease-in-out infinite;
}
.msg-badge .msg-new {
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #0b0b0c;
  background: var(--user-color, #7dd3fc);
  padding: 1px 4px;
  border-radius: 999px;
}
@keyframes msg-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
.ticket-head-top .msg-badge { margin-left: 0.15rem; }

/* Read chat chip — bottom of board card (not in the crowded head) */
.ticket-chat-foot {
  padding: 0.1rem 1rem 0.35rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: transparent;
}
.ticket-chat-foot .msg-badge-foot {
  text-decoration: none;
  display: inline-flex;
  max-width: 100%;
}
.ticket-chat-foot .msg-badge {
  font-size: 0.58rem;
  padding: 0.12rem 0.4rem 0.12rem 0.28rem;
  opacity: 0.92;
}
.ticket-chat-foot .msg-badge:hover {
  opacity: 1;
  filter: brightness(1.08);
}

/* Ticket page — collapsible chat */
.chat-collapse-btn {
  padding: 0.2rem 0.45rem !important;
  min-width: 2rem;
}
.chat-collapsed-preview {
  margin-bottom: 0.5rem;
}
.chat-collapsed-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--user-color, var(--border)) 45%, var(--border));
  background: color-mix(in srgb, var(--user-color, var(--panel-alt)) 12%, var(--panel));
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  color: inherit;
}
.chat-collapsed-card:hover {
  filter: brightness(1.05);
}
.chat-collapsed-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.chat-collapsed-body {
  font-size: 0.92rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-collapsed-hint {
  margin-top: 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
#chatPanel.is-collapsed .chat-compose {
  /* compose stays inside expandable; hidden when collapsed */
}

/* Ticket controls — hold / parts / important */
.side-actions .side-act-hold i,
.side-actions .side-act-parts i,
.side-actions .side-act-important i {
  margin-right: 0.35rem;
}
.side-actions .side-act-important.is-on {
  border-color: color-mix(in srgb, #f59e0b 55%, var(--border));
  background: color-mix(in srgb, #f59e0b 18%, var(--panel));
  color: #fbbf24;
  font-weight: 800;
}
.doc-source-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}


/* Unread chat — board card full-header pulse */
.ticket.has-unread-chat {
  border-color: color-mix(in srgb, var(--user-color, var(--red)) 55%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--user-color, var(--red)) 40%, transparent),
    0 0 22px color-mix(in srgb, var(--user-color, var(--red)) 28%, transparent);
}
.ticket-head.is-unread-chat {
  position: relative;
  animation: head-chat-pulse 1.5s ease-in-out infinite;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--user-color, #7dd3fc) 28%, var(--panel)),
      color-mix(in srgb, var(--user-color, #7dd3fc) 10%, var(--panel))
    ) !important;
  border-bottom-color: color-mix(in srgb, var(--user-color, var(--red)) 55%, var(--border)) !important;
}
@keyframes head-chat-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent;
    filter: brightness(1);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--user-color, #7dd3fc) 50%, transparent),
      0 0 18px color-mix(in srgb, var(--user-color, #7dd3fc) 35%, transparent);
    filter: brightness(1.08);
  }
}
.msg-head-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.45rem 0.75rem;
  margin: -0.15rem -0.05rem 0.45rem;
  border-bottom: 1px solid color-mix(in srgb, var(--user-color, var(--border)) 45%, var(--border));
  background: color-mix(in srgb, var(--user-color, #7dd3fc) 22%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
}
.msg-head-pulse {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--user-color, #7dd3fc);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--user-color, #7dd3fc) 60%, transparent);
  animation: msg-dot-ping 1.4s ease-out infinite;
  flex-shrink: 0;
}
@keyframes msg-dot-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--user-color, #7dd3fc) 55%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.msg-head-label {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0b0b0c;
  background: var(--user-color, #7dd3fc);
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
}
.msg-head-who { font-weight: 900; }
.msg-head-preview {
  color: var(--text);
  opacity: 0.9;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 8rem;
}

/* Chat panel mark-as-read */
#chatPanel.has-unread {
  border-color: color-mix(in srgb, var(--user-color, var(--red)) 45%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--user-color, var(--red)) 25%, transparent);
}
.chat-unread-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0b0b0c;
  background: #fbbf24;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  animation: msg-pulse 1.4s ease-in-out infinite;
}
.chat-unread-banner {
  margin-bottom: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--user-color, #fbbf24) 50%, var(--border));
  background: color-mix(in srgb, var(--user-color, #fbbf24) 16%, var(--panel));
  padding: 0.65rem 0.75rem;
}
.chat-unread-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}
.chat-unread-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--user-color, #fbbf24);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--user-color, #fbbf24) 55%, transparent);
  animation: msg-dot-ping 1.4s ease-out infinite;
  flex-shrink: 0;
}
.chat-unread-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.chat-unread-banner .btn { margin-left: auto; }


/* Multi-pallet cards */
.pack-count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.pack-count-field {
  max-width: 14rem;
  flex: 0 0 auto;
}
.pack-count-field input {
  font-size: 2rem !important;
  max-width: 8rem;
}
.pack-totals {
  padding-bottom: 0.55rem;
  font-weight: 700;
}
.pallet-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pallet-card {
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--panel-alt) 70%, var(--panel));
  padding: 0.85rem 1rem 1rem;
  border-left: 4px solid var(--info);
}
.packing-panel.is-freight .pallet-card {
  border-left-color: var(--warn);
}
.pallet-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.pallet-card-num {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pallet-card-sub {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pallet-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem 1rem;
}
@media (max-width: 900px) {
  .pallet-card-grid { grid-template-columns: 1fr; }
}
.pack-field-weight input.is-pending,
.pack-field-weight input:placeholder-shown {
  border-style: dashed;
  opacity: 0.85;
  color: var(--muted);
}
.pack-field-weight span {
  color: color-mix(in srgb, var(--muted) 85%, var(--warn));
}


/* Fix input clipping */
.pack-field input,
.pack-field select,
.pack-select {
  line-height: 1.35 !important;
  padding-top: 0.95rem !important;
  padding-bottom: 0.95rem !important;
  min-height: 3.15rem;
  box-sizing: border-box;
}
.pack-select {
  width: 100%;
  font-size: 1.05rem;
  font-weight: 700;
  border: 2px solid var(--border-strong);
  border-radius: 0.35rem;
  background: var(--input-bg, var(--bg));
  color: var(--text);
  font-family: inherit;
}

/* Carrier row under order # (not crushed by NEW CHAT banner) */
.ticket-head-carrier-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}
.ticket-head.is-unread-chat .ticket-head-carrier-row {
  border-top: 1px dashed color-mix(in srgb, var(--user-color, var(--border)) 40%, var(--border));
}
.ticket-head-top {
  flex-wrap: wrap;
}
.ticket-head-top .ticket-order {
  min-width: 0;
}

/* Chat edit/delete */
.chat-msg-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.45rem;
  justify-content: flex-end;
}
.chat-msg-actions .chat-act {
  padding: 0.25rem 0.55rem !important;
  font-size: 0.58rem !important;
  opacity: 0.75;
}
.chat-msg.is-mine:hover .chat-msg-actions .chat-act,
.chat-msg-actions .chat-act:hover {
  opacity: 1;
}
.pallet-card-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1fr) !important;
}
@media (max-width: 1100px) {
  .pallet-card-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* Chat scroll + body not crushed */
#chatPanel .chat-thread,
.chat-thread {
  max-height: min(52vh, 560px) !important;
  min-height: 14rem;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  padding: 0.5rem !important;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: color-mix(in srgb, #000 22%, var(--panel));
}
#chatPanel .chat-msg,
.chat-msg {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.chat-msg-inner { overflow: visible !important; }
.chat-msg-body {
  white-space: pre-wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  line-height: 1.45 !important;
  max-height: none !important;
  display: block !important;
}
.chat-msg-actions {
  display: flex !important;
  gap: 0.4rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
  opacity: 1 !important;
  visibility: visible !important;
}
.chat-msg-actions .chat-act {
  padding: 0.35rem 0.65rem !important;
  font-size: 0.62rem !important;
  border: 1px solid var(--border-strong) !important;
  opacity: 1 !important;
  cursor: pointer;
}
#chatPanel.chat-flash {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--info) 55%, transparent),
    0 0 24px color-mix(in srgb, var(--info) 35%, transparent);
}
.pallet-card-grid-simple {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.85rem 1rem !important;
  align-items: end;
}
@media (max-width: 900px) {
  .pallet-card-grid-simple { grid-template-columns: 1fr 1fr !important; }
}
.pallet-card-grid-simple .pack-field input {
  font-size: 1.2rem !important;
  min-height: 3rem !important;
  line-height: 1.35 !important;
  padding: 0.8rem 0.85rem !important;
  width: 100%;
  overflow: visible;
}
.msg-head-banner.is-link {
  display: flex;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.msg-head-banner.is-link:hover { filter: brightness(1.08); }

/* Parcel chat always — packing truth is freight-only */
.packing-panel.hidden { display: none !important; }
#chatPanel { scroll-margin-top: 1rem; }

/* Ticket docs list — preview tabs + Stirling action */
.doc-row .doc-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1.1;
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 6px;
  flex-shrink: 0;
}
.doc-row .doc-print {
  color: var(--text);
  border: 1px solid var(--border);
}
.doc-row .doc-print:hover {
  background: var(--panel-alt);
}
.doc-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.15rem 0.25rem 0.15rem 0;
  background: color-mix(in srgb, var(--panel-alt) 70%, transparent);
}
.doc-row.is-active {
  border-color: color-mix(in srgb, var(--info) 55%, var(--border));
  background: color-mix(in srgb, var(--info) 12%, var(--panel));
}
.doc-row .doc-tab {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.doc-row .doc-stirling {
  flex-shrink: 0;
}

/* ── Ops banner (clock / pickup countdown) ───────────────────── */
.ops-banner {
  margin: 0 0 1rem;
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--red) 10%, var(--panel)) 0%,
      var(--panel) 45%,
      color-mix(in srgb, var(--info) 8%, var(--panel)) 100%);
  padding: 1rem 1.15rem;
}
.ops-banner-inner {
  display: grid;
  grid-template-columns: minmax(12rem, 1.1fr) minmax(14rem, 1.2fr) minmax(12rem, 1.4fr);
  gap: 1rem 1.25rem;
  align-items: stretch;
}
@media (max-width: 960px) {
  .ops-banner-inner { grid-template-columns: 1fr; }
}
.ops-kicker {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.ops-clock {
  font-size: clamp(1.8rem, 3.2vw, 2.55rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ops-date {
  margin-top: 0.2rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--muted);
}
.ops-pickup, .ops-freight, .ops-clock-block {
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  padding: 0.75rem 0.9rem;
  min-height: 5.5rem;
}
.ops-big {
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* Pickup day before window — amber "Today" + progress to 3 PM */
.ops-pickup.is-today {
  position: relative;
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 18%, transparent);
}
.ops-pickup.is-today .ops-kicker {
  color: var(--warn-soft-text);
  letter-spacing: 0.1em;
  font-weight: 800;
}
.ops-pickup.is-today .ops-big {
  color: var(--warn-soft-text);
}
.ops-pickup.is-today .ops-big-soft {
  font-weight: 800;
  opacity: 0.72;
  font-size: 0.72em;
  letter-spacing: 0.04em;
}
.ops-pickup.is-today .ops-sub {
  color: color-mix(in srgb, var(--warn-soft-text) 70%, var(--muted));
  font-weight: 700;
}
.ops-pickup.is-today .ops-sub .mono {
  color: var(--warn-soft-text);
  font-weight: 800;
}

/* Progress meter: midnight → 3 PM (today) or 3 → 5 PM (open) */
.ops-pickup-meter {
  margin-top: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 55%, var(--border));
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  overflow: hidden;
}
.ops-pickup-meter-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--warn) 75%, #fff),
    var(--warn)
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--warn) 35%, transparent);
  transition: width 0.9s linear;
}
.ops-pickup-meter-fill.is-open-fill {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ok) 70%, #fff),
    var(--ok)
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 35%, transparent);
}
html[data-theme="light"] .ops-pickup.is-today {
  background: color-mix(in srgb, var(--warn-soft) 75%, var(--panel));
  border-color: var(--warn-soft-border);
}
html[data-theme="light"] .ops-pickup-meter {
  background: #e8e8ec;
}

/* Open parcel pickup window — soft green tint; gentle breathe (not neon flash) */
.ops-pickup.is-open {
  position: relative;
  border-color: color-mix(in srgb, var(--ok) 48%, var(--border));
  background: color-mix(in srgb, var(--ok) 12%, var(--panel));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ok) 22%, transparent),
    0 0 14px color-mix(in srgb, var(--ok) 16%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--ok) 6%, transparent);
  animation: ops-pickup-glow 5s ease-in-out infinite;
}
.ops-pickup.is-open .ops-kicker {
  color: var(--ok-soft-text);
  letter-spacing: 0.1em;
  font-weight: 800;
  text-transform: uppercase;
}
.ops-pickup.is-open .ops-big {
  color: var(--ok-soft-text);
}
.ops-pickup.is-open .ops-sub {
  color: color-mix(in srgb, var(--ok-soft-text) 75%, var(--muted));
  font-weight: 700;
}
.ops-pickup.is-open .ops-sub .mono {
  color: var(--ok-soft-text);
  font-weight: 800;
}
@keyframes ops-pickup-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--ok) 18%, transparent),
      0 0 10px color-mix(in srgb, var(--ok) 12%, transparent),
      inset 0 0 10px color-mix(in srgb, var(--ok) 4%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--ok) 32%, transparent),
      0 0 18px color-mix(in srgb, var(--ok) 20%, transparent),
      inset 0 0 14px color-mix(in srgb, var(--ok) 8%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ops-pickup.is-open { animation: none; }
}
html[data-theme="light"] .ops-pickup.is-open {
  background: color-mix(in srgb, var(--ok-soft) 70%, var(--panel));
  border-color: var(--ok-soft-border);
}
.ops-sub {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.ops-freight-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.2rem; }
.ops-freight-row {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.ops-freight-row:hover { color: var(--red-soft-text); }
.ops-freight.is-empty .ops-sub { margin-top: 0.4rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Nav user tools: theme + color picker */
.nav-user-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.user-chip-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.45rem;
  cursor: pointer;
  border-radius: 999px;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: color-mix(in srgb, var(--panel-alt) 70%, transparent);
}
.pw-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.pw-modal-backdrop.hidden { display: none; }
.pw-modal {
  width: min(400px, 100%);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  padding: 1rem 1.1rem 1.1rem;
}
.pw-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.pw-modal-title {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.pw-modal-close {
  min-width: 2rem;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
}
.pw-modal-sub {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}
.pw-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pw-field input {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.55rem 0.65rem;
  width: 100%;
}
.pw-modal-err {
  min-height: 1.1em;
  color: var(--red-soft-text);
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0.15rem 0 0.65rem;
}
.pw-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}
.theme-toggle {
  min-width: 2.1rem;
  justify-content: center;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}
.color-picker-wrap { position: relative; }
.color-dot-btn {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  background: var(--user-color, #6366f1);
  cursor: pointer;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--user-color, #6366f1) 25%, transparent);
}
.color-dot-btn:hover { filter: brightness(1.08); }
.color-picker-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 40;
  width: 12.5rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}
.color-picker-menu.hidden { display: none; }
.color-picker-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.color-swatches {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}
.color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
}
.color-swatch.is-on {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}
.color-reset {
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
  font-size: 0.62rem;
}

.pickup-window-wrap {
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}
.pickup-window-wrap input[type="datetime-local"] {
  width: 100%;
  padding: 0.55rem 0.6rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
}

/* Freight ops banner — both boards, high visibility */
.ops-banner-inner.has-freight {
  grid-template-columns: minmax(11rem, 0.9fr) minmax(12rem, 1fr) minmax(16rem, 1.5fr);
}
@media (max-width: 1100px) {
  .ops-banner-inner.has-freight { grid-template-columns: 1fr 1fr; }
  .ops-banner-inner.has-freight .ops-freight { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ops-banner-inner.has-freight { grid-template-columns: 1fr; }
}
.ops-freight {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--warn) 16%, var(--panel)) 0%,
      color-mix(in srgb, var(--red) 8%, var(--panel)) 100%);
  padding: 0.75rem 0.85rem 0.65rem;
  min-height: 6.2rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 12%, transparent);
}
.ops-freight.is-due {
  border-color: color-mix(in srgb, var(--red) 55%, var(--border));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--red) 18%, var(--panel)) 0%,
      color-mix(in srgb, var(--warn) 12%, var(--panel)) 100%);
  animation: freightPulse 1.6s ease-in-out infinite;
}
.ops-freight.is-empty {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg) 40%, var(--panel));
  box-shadow: none;
  animation: none;
}
@keyframes freightPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 0%, transparent); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
}
.ops-freight-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
}
.ops-freight-icon {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 0.55rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.2rem;
  color: #1a1200;
  background: color-mix(in srgb, var(--warn) 75%, #fff);
  border: 1px solid color-mix(in srgb, var(--warn) 60%, var(--border));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--warn) 25%, transparent);
}
.ops-freight-icon.is-muted {
  color: var(--muted);
  background: var(--panel-alt);
  border-color: var(--border);
  box-shadow: none;
}
.ops-freight-next {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ops-freight.is-due .ops-freight-next {
  color: var(--red-soft-text);
  letter-spacing: 0.08em;
}
.ops-freight-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.15rem;
  max-height: 7.5rem;
  overflow: auto;
}
.ops-freight-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.45rem 0.55rem;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  padding: 0.38rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--bg) 45%, var(--panel));
  font-size: 0.78rem;
  font-weight: 700;
}
.ops-freight-row:hover {
  border-color: color-mix(in srgb, var(--warn) 50%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
}
.ops-freight-row.is-due {
  border-color: color-mix(in srgb, var(--red) 45%, var(--border));
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
}
.ops-fr-ico {
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 30%, var(--panel));
  color: var(--warn-soft-text);
  font-size: 0.7rem;
}
.ops-fr-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.ops-fr-order {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 900;
  font-size: 0.86rem;
}
.ops-fr-who {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-fr-when {
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
}
.ops-fr-count {
  font-weight: 800;
  font-size: 0.72rem;
  min-width: 5.2rem;
  max-width: 8.5rem;
  text-align: right;
  color: var(--muted);
  line-height: 1.15;
}
.ops-fr-count.is-live {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.ops-fr-count.is-due {
  color: var(--red-soft-text);
  letter-spacing: 0.08em;
  font-weight: 900;
}
.ops-freight-next:not(.mono) {
  font-family: inherit;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.ops-big:not(.mono) {
  font-family: inherit;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
  font-variant-numeric: normal;
}
html[data-theme="light"] .ops-freight-icon {
  color: #3a2a00;
  background: #F6D979;
  border-color: #D4A82A;
}
html[data-theme="light"] .ops-freight {
  background: linear-gradient(135deg, #FFF6D8 0%, #FFEFE5 100%);
  border-color: #E2C06A;
}
html[data-theme="light"] .ops-freight.is-due {
  background: linear-gradient(135deg, #FFE8EA 0%, #FFF0DC 100%);
  border-color: #E5A0A6;
}
html[data-theme="light"] .ops-freight.is-due .ops-freight-next {
  color: #8F1520;
}

/* Ticket freight pickup form */
.pickup-window-wrap .pickup-ico {
  color: var(--warn-soft-text);
  font-size: 0.95rem;
}
.pickup-window-wrap select {
  width: 100%;
  padding: 0.55rem 0.6rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}
.pickup-window-preview {
  margin-top: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 14%, var(--panel));
  font-size: 0.85rem;
  font-weight: 700;
}
.pickup-window-preview i { color: var(--warn-soft-text); }

/* Board card freight pickup chip */
.freight-pickup-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--border));
  background: color-mix(in srgb, var(--warn) 16%, var(--panel));
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--text);
  max-width: 100%;
}
.freight-pickup-chip i { color: var(--warn-soft-text); font-size: 0.72rem; }
.freight-pickup-chip.is-due {
  border-color: color-mix(in srgb, var(--red) 50%, var(--border));
  background: color-mix(in srgb, var(--red) 14%, var(--panel));
}

/* ── New shipping labels (board) ───────────────────────────── */
.labels-banner {
  margin: 0 0 0.85rem;
  border: 1px solid color-mix(in srgb, #f59e0b 55%, var(--border));
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, #f59e0b 28%, var(--panel)),
      color-mix(in srgb, #fbbf24 12%, var(--panel)) 40%,
      var(--panel)
    );
  box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 25%, transparent),
    0 8px 28px color-mix(in srgb, #f59e0b 18%, transparent);
  animation: labels-banner-glow 2s ease-in-out infinite;
}
@keyframes labels-banner-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}
.labels-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  padding: 0.7rem 0.9rem;
}
.labels-banner-pulse {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 0 color-mix(in srgb, #f59e0b 70%, transparent);
  animation: msg-dot-ping 1.3s ease-out infinite;
  flex-shrink: 0;
}
.labels-banner-ico {
  color: #b45309;
  font-size: 1.05rem;
}
.labels-banner-text { min-width: 0; flex: 1 1 14rem; }
.labels-banner-title {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.labels-banner-sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.12rem;
}
.labels-banner-jump { flex-shrink: 0; }

.sync-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.15rem;
  flex-wrap: wrap;
}
.sync-last {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  max-width: 16rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#btnDriveSync.is-busy { opacity: 0.85; cursor: wait; }

/* Pipeline / new-docs indicator */
.pipeline-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: min(22rem, 70vw);
  padding: 0.28rem 0.55rem 0.28rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.pipeline-status .pipeline-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--muted-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted-2) 25%, transparent);
}
.pipeline-status .pipeline-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pipeline-status .pipeline-detail {
  font-weight: 700;
  color: var(--muted-2);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9rem;
}
.pipeline-status .pipeline-detail.hidden { display: none; }
.pipeline-status.is-idle .pipeline-dot { background: #6b6b72; }
.pipeline-status.is-done {
  color: var(--ok-soft-text);
  border-color: color-mix(in srgb, var(--ok) 40%, var(--border));
  background: color-mix(in srgb, var(--ok) 10%, var(--panel));
}
.pipeline-status.is-done .pipeline-dot {
  background: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent);
}
.pipeline-status.is-running {
  color: var(--warn-soft-text);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 12%, var(--panel));
}
.pipeline-status.is-running .pipeline-dot {
  background: var(--warn);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 35%, transparent);
  animation: pipeline-pulse 1.1s ease-in-out infinite;
}
.pipeline-status.has-new {
  color: #1c1917;
  border-color: color-mix(in srgb, #f59e0b 55%, var(--border));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #fbbf24 55%, var(--panel)),
    color-mix(in srgb, #f59e0b 18%, var(--panel))
  );
}
.pipeline-status.has-new .pipeline-dot {
  background: #b45309;
  box-shadow: 0 0 0 2px color-mix(in srgb, #f59e0b 45%, transparent);
}
.pipeline-status.has-new .pipeline-detail { color: #78350f; }
.pipeline-status.is-error {
  color: var(--red-soft-text);
  border-color: color-mix(in srgb, var(--red) 45%, var(--border));
  background: color-mix(in srgb, var(--red) 12%, var(--panel));
}
.pipeline-status.is-error .pipeline-dot {
  background: var(--red);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 35%, transparent);
}
@keyframes pipeline-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .pipeline-status.is-running .pipeline-dot { animation: none; }
}
html[data-theme="light"] .pipeline-status.has-new {
  color: #1c1917;
}
html[data-theme="light"] .pipeline-status.is-running {
  background: color-mix(in srgb, var(--warn-soft) 80%, var(--panel));
}

.labels-head-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: -0.15rem -0.05rem 0.45rem;
  border-bottom: 1px solid color-mix(in srgb, #f59e0b 50%, var(--border));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #f59e0b 34%, transparent),
    color-mix(in srgb, #fbbf24 16%, transparent)
  );
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  animation: labels-head-glow 1.6s ease-in-out infinite;
}
@keyframes labels-head-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
.labels-head-pulse {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: #f59e0b;
  animation: msg-dot-ping 1.3s ease-out infinite;
  flex-shrink: 0;
}
.labels-head-ico { color: #b45309; }
.labels-head-label {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1c1917;
  background: #fbbf24;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, #b45309 35%, transparent);
}
.labels-head-count { font-weight: 800; color: var(--text); }
.labels-head-cta {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92400e;
  opacity: 0.9;
}
.labels-head-dismiss {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.62rem !important;
  padding: 0.35rem 0.65rem !important;
  background: #1c1917 !important;
  color: #fbbf24 !important;
  border-color: #1c1917 !important;
}
.labels-head-dismiss:hover {
  filter: brightness(1.1);
}
.labels-banner-inner .btn { flex-shrink: 0; }

@keyframes labels-ico-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, #f59e0b 55%, transparent); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 8px transparent; }
}

.ticket.has-new-labels {
  border-color: color-mix(in srgb, #f59e0b 60%, var(--border));
  box-shadow:
    inset 4px 0 0 #f59e0b,
    0 0 0 1px color-mix(in srgb, #f59e0b 35%, transparent),
    0 0 24px color-mix(in srgb, #f59e0b 22%, transparent);
}
.ticket-head.is-new-labels {
  animation: head-labels-pulse 1.5s ease-in-out infinite;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #fbbf24 26%, var(--panel)),
      color-mix(in srgb, #f59e0b 8%, var(--panel))
    ) !important;
}
@keyframes head-labels-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.07); }
}

.flag-label.is-new-labels {
  background: #fbbf24;
  color: #1c1917;
  border-color: #d97706;
  animation: labels-ico-pulse 1.4s ease-in-out infinite;
}
.flag-label .label-flag-ico { margin-right: 0.15rem; }

.status-tab.has-new-labels {
  position: relative;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 45%, transparent);
}
.status-tab.has-new-labels .tab-labels-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-right: 0.25rem;
  border-radius: 999px;
  background: #fbbf24;
  color: #92400e;
  font-size: 0.62rem;
  animation: labels-ico-pulse 1.2s ease-in-out infinite;
}
.status-tab.has-new-labels.is-active .tab-labels-pulse {
  box-shadow: 0 0 0 2px color-mix(in srgb, #fff 40%, transparent);
}

html[data-theme="light"] .labels-banner {
  background: linear-gradient(90deg, #fef3c7, #fffbeb 45%, var(--panel));
}
html[data-theme="light"] .labels-head-banner {
  background: linear-gradient(90deg, #fde68a, #fef3c7);
}


/* Right-side editor drawer (inventory + ticket admin) */
.editor-panel, .modal-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%);
  background: var(--panel); border-left: 1px solid var(--border); z-index: 40;
  padding: 1rem; overflow: auto; display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0,0,0,.35);
}
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35; }
.editor-panel label, .modal-panel label {
  display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.editor-panel input, .editor-panel select, .editor-panel textarea,
.modal-panel input, .modal-panel select, .modal-panel textarea {
  font: inherit; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .9rem;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); padding: .5rem .6rem; width: 100%;
}
.editor-panel .hint, .modal-panel .hint {
  font-size: .8rem; color: var(--muted); margin: .25rem 0 1rem; line-height: 1.4;
}
.editor-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.editor-check {
  display: flex; gap: .5rem; align-items: center;
  text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600; color: var(--text);
}
.editor-check input { width: auto; }

/* Boxes used panel (ticket detail) */
.boxes-used-panel {
  border-color: color-mix(in srgb, var(--info) 28%, var(--border));
}
.boxes-used-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  min-width: 4.2rem;
}
.boxes-used-stat .n {
  font-size: 1.35rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.boxes-used-stat .l {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.boxes-used-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.boxes-used-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 5.5rem auto;
  gap: 0.45rem;
  align-items: center;
}
@media (max-width: 720px) {
  .boxes-used-row { grid-template-columns: 1fr 1fr; }
}
.boxes-used-row select,
.boxes-used-row input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.4rem 0.5rem;
  font: inherit;
}
.boxes-used-row .kind-pill {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border);
  color: var(--muted);
  text-align: center;
}
.boxes-used-row .kind-pill.is-factory {
  border-color: color-mix(in srgb, var(--info) 50%, var(--border));
  color: var(--info-soft-text);
  background: var(--info-soft);
}
.boxes-used-row .kind-pill.is-uline {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
  color: var(--ok-soft-text);
  background: var(--ok-soft);
}

/* Ticket document viewer — auto-cropped labels */
.doc-frame-wrap {
  width: 100%;
  height: min(70vh, 780px);
  border: 1px solid var(--border);
  background: #111;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-frame-wrap .doc-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #111;
}
.doc-frame-wrap.is-rot90 .doc-frame,
.doc-frame-wrap.is-rot270 .doc-frame {
  width: min(70vh, 780px);
  height: 100%;
  max-width: none;
  transform-origin: center center;
}
.doc-frame-wrap.is-rot90 .doc-frame { transform: rotate(90deg) scale(0.72); }
.doc-frame-wrap.is-rot270 .doc-frame { transform: rotate(270deg) scale(0.72); }


/* ── SKU color indicators (TBH1 Black / Tan / OD Green) ───────── */
:root {
  --sku-black: #1a1a1c;
  --sku-black-fg: #f2f2f2;
  --sku-black-border: #6b6b72;
  --sku-tan: #c4a574;
  --sku-tan-fg: #1a1208;
  --sku-tan-border: #8a6f45;
  --sku-od: #4a5c28;
  --sku-od-fg: #f0f4e4;
  --sku-od-border: #6f8640;
}
html[data-theme="light"] {
  --sku-black: #222226;
  --sku-black-fg: #f7f7f8;
  --sku-black-border: #4a4a52;
  --sku-tan: #d2b48c;
  --sku-tan-fg: #2a1c0a;
  --sku-tan-border: #9a7b4a;
  --sku-od: #556b2f;
  --sku-od-fg: #f4f7ea;
  --sku-od-border: #3f5122;
}

.sku-color-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
}
.sku-color-label {
  min-width: 0;
}

.sku-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  flex-shrink: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}

/* A — solid pill */
.sku-color--pill {
  padding: 0.28rem 0.42rem;
  border-radius: 999px;
  border: 1px solid transparent;
  min-width: 2.1rem;
}
.sku-color--pill.sku-color--black {
  background: var(--sku-black);
  color: var(--sku-black-fg);
  border-color: var(--sku-black-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.sku-color--pill.sku-color--tan {
  background: var(--sku-tan);
  color: var(--sku-tan-fg);
  border-color: var(--sku-tan-border);
}
.sku-color--pill.sku-color--od {
  background: var(--sku-od);
  color: var(--sku-od-fg);
  border-color: var(--sku-od-border);
}

/* B — dot + short label */
.sku-color--dot {
  padding: 0.18rem 0.35rem 0.18rem 0.22rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
  color: var(--text);
  gap: 0.32rem;
}
.sku-color--dot .sku-color-swatch {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.sku-color--dot.sku-color--black .sku-color-swatch { background: var(--sku-black); }
.sku-color--dot.sku-color--tan .sku-color-swatch { background: var(--sku-tan); }
.sku-color--dot.sku-color--od .sku-color-swatch { background: var(--sku-od); }
.sku-color--dot .sku-color-text { letter-spacing: 0.08em; }

/* C — left rail on row */
.item-row.has-sku-color-rail,
.line-item-row.has-sku-color-rail {
  border-left: 4px solid transparent;
  padding-left: calc(0.75rem - 1px);
}
.item-row.sku-color-rail--black,
.line-item-row.sku-color-rail--black { border-left-color: var(--sku-black); }
.item-row.sku-color-rail--tan,
.line-item-row.sku-color-rail--tan { border-left-color: var(--sku-tan); }
.item-row.sku-color-rail--od,
.line-item-row.sku-color-rail--od { border-left-color: var(--sku-od); }
/* subtle wash so rail is scannable on busy boards */
.item-row.sku-color-rail--black,
.line-item-row.sku-color-rail--black {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sku-black) 14%, transparent), transparent 42%);
}
.item-row.sku-color-rail--tan,
.line-item-row.sku-color-rail--tan {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sku-tan) 18%, transparent), transparent 42%);
}
.item-row.sku-color-rail--od,
.line-item-row.sku-color-rail--od {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sku-od) 18%, transparent), transparent 42%);
}

/* D — square swatch only */
.sku-color--chip {
  padding: 0;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.35);
  overflow: hidden;
}
.sku-color--chip .sku-color-swatch {
  display: block;
  width: 100%;
  height: 100%;
}
.sku-color--chip.sku-color--black .sku-color-swatch { background: var(--sku-black); }
.sku-color--chip.sku-color--tan .sku-color-swatch { background: var(--sku-tan); }
.sku-color--chip.sku-color--od .sku-color-swatch { background: var(--sku-od); }
.sku-color--chip.sku-color--black {
  box-shadow: 0 0 0 1px var(--sku-black-border);
}

/* E — outline pill */
.sku-color--outline {
  padding: 0.24rem 0.4rem;
  border-radius: 999px;
  background: transparent;
  min-width: 2.1rem;
  border: 1.5px solid currentColor;
}
.sku-color--outline.sku-color--black {
  color: color-mix(in srgb, var(--text) 88%, #888);
  border-color: var(--sku-black-border);
  background: color-mix(in srgb, var(--sku-black) 12%, transparent);
}
.sku-color--outline.sku-color--tan {
  color: color-mix(in srgb, var(--sku-tan) 70%, var(--text));
  border-color: var(--sku-tan-border);
  background: color-mix(in srgb, var(--sku-tan) 14%, transparent);
}
.sku-color--outline.sku-color--od {
  color: color-mix(in srgb, var(--sku-od) 75%, var(--text));
  border-color: var(--sku-od-border);
  background: color-mix(in srgb, var(--sku-od) 14%, transparent);
}

/* picked rows still show color, slightly muted */
.item-row.is-picked .sku-color,
.line-item-row.is-picked .sku-color { opacity: 0.78; }
.item-row.is-picked .sku-color-label,
.line-item-row.is-picked .sku-color-label { text-decoration: line-through; }