/* Empty boxes tracker, Tablets section of the Stock tab (Noah 2026-09-15).
   Extends the locked Optimum shell: pink #E266A7, teal #67E2E3, Poppins.
   Every token below points at the shell's own variable. The hex after each comma is only the
   fallback, and it is what the design gate reads to prove the palette was declared. */

:root {
  --bx-pink: var(--pink, #E266A7);
  --bx-teal: var(--teal, #67E2E3);
  --bx-surface: var(--bg, #FAF7FC);
  --bx-card: var(--card, #FFFFFF);
  --bx-line: var(--line, #EDE8F3);
  --bx-ink: var(--ink, #1A1633);
  --bx-ink-soft: var(--ink-soft, #5B5870);
  --bx-ok: var(--ok, #17B978);
  --bx-warn: var(--warn, #F2B705);
  --bx-bad: var(--bad, #E9374A);
  --bx-radius: var(--radius, 16px);
  --bx-font: Poppins, Helvetica, system-ui, sans-serif;
}

/* ── CARD ────────────────────────────────────────────────────────────────── */
.bx-card {
  margin-top: 12px;
  padding: 16px;
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-top: 2px solid var(--bx-teal);   /* the tablets accent, same as the In Stock tile */
  border-radius: var(--bx-radius);
  box-shadow: 0 6px 20px rgba(26, 22, 51, 0.06);
  font-family: var(--bx-font);
  color: var(--bx-ink);
}
.bx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.bx-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bx-ink-soft);
}

/* Status pills keep ink text. The status colours fail contrast as text, so they tint and outline. */
.bx-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--bx-ink);
  background: var(--bx-surface);
  border: 1px solid var(--bx-line);
}
.bx-pill.bx-GREEN { background: rgba(23, 185, 120, 0.14); border-color: var(--bx-ok); }
.bx-pill.bx-YELLOW { background: rgba(242, 183, 5, 0.18); border-color: var(--bx-warn); }
.bx-pill.bx-RED { background: rgba(233, 55, 74, 0.12); border-color: var(--bx-bad); }

/* The number IS the button. A dashed teal hairline and the chip say it can be changed. */
.bx-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 8px 12px;
  font: inherit;
  text-align: left;
  color: var(--bx-ink);
  background: var(--bx-surface);
  border: 1px dashed var(--bx-teal);
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bx-count:active { transform: scale(0.98); border-style: solid; }
.bx-count:focus-visible { outline: 2px solid var(--bx-teal); outline-offset: 2px; }
.bx-num {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bx-tap {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--bx-ink);
  background: rgba(103, 226, 227, 0.2);
  border: 1px solid var(--bx-teal);
}

.bx-runway {
  height: 4px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bx-line);
}
.bx-runway > i {
  display: block;
  height: 100%;
  width: var(--bx-w, 0%);
  border-radius: 999px;
  transform-origin: left center;
  animation: bxRunway 300ms cubic-bezier(0.2, 0, 0, 1) both;
}
.bx-runway.bx-GREEN > i { background: var(--bx-ok); }
.bx-runway.bx-YELLOW > i { background: var(--bx-warn); }
.bx-runway.bx-RED > i { background: var(--bx-bad); }

/* ── FORECAST (Noah 2026-09-16): the tablets card's 4 squares, plus the order countdown ─────────── */
.bx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.bx-grid-3 > :last-child { grid-column: 1 / -1; }
.bx-tile {
  min-width: 0;
  padding: 12px;
  background: var(--bx-surface);
  border: 1px solid var(--bx-line);
  border-radius: 12px;
}
.bx-tile p { margin: 0; }
.bx-tile-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bx-ink-soft);
}
.bx-tile .bx-tile-value {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--bx-ink);
  overflow-wrap: anywhere;
}
.bx-tile .bx-tile-value-sm { font-size: 20px; }
.bx-tile .bx-tile-sub { margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--bx-ink-soft); }
.bx-tile .bx-runway { margin-top: 8px; }

/* The countdown square and the sentence under the squares tint by how close the order-by day is. */
.bx-order-tile.bx-GREEN { background: rgba(23, 185, 120, 0.1); border-color: var(--bx-ok); }
.bx-order-tile.bx-YELLOW { background: rgba(242, 183, 5, 0.16); border-color: var(--bx-warn); }
.bx-order-tile.bx-RED { background: rgba(233, 55, 74, 0.1); border-color: var(--bx-bad); }
.bx-tile.bx-order-tile .bx-tile-label,
.bx-tile.bx-order-tile .bx-tile-sub { color: var(--bx-ink); }

.bx-order {
  margin: 12px 0 0;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bx-ink);
  background: var(--bx-surface);
  border: 1px solid var(--bx-line);
  border-left: 4px solid var(--bx-ok);
  border-radius: 12px;
}
.bx-order.bx-YELLOW { background: rgba(242, 183, 5, 0.16); border-color: var(--bx-warn); }
.bx-order.bx-RED { background: rgba(233, 55, 74, 0.1); border-color: var(--bx-bad); }

.bx-velocity {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--bx-ink-soft);
}
.bx-velocity b { font-weight: 700; color: var(--bx-ink); font-variant-numeric: tabular-nums; }

.bx-meta { margin: 12px 0 0; font-size: 14px; color: var(--bx-ink); }
.bx-meta b { font-weight: 700; font-variant-numeric: tabular-nums; }
.bx-note { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--bx-ink-soft); }

/* ── THE 5 STATES ────────────────────────────────────────────────────────── */
.bx-empty { padding: 4px 0 0; }
.bx-empty-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--bx-ink); }
.bx-empty-sub { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--bx-ink-soft); }

.bx-success {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bx-ink);
  background: rgba(23, 185, 120, 0.14);
  border: 1px solid var(--bx-ok);
  animation: bxIn 240ms cubic-bezier(0.2, 0, 0, 1) both;
}
.bx-error,
.bx-offline {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--bx-ink);
}
.bx-error { background: rgba(233, 55, 74, 0.1); border: 1px solid var(--bx-bad); }
.bx-offline { background: rgba(242, 183, 5, 0.18); border: 1px solid var(--bx-warn); }
.bx-loading .bx-input { opacity: 0.6; }

/* ── BUTTONS: solid, never a gradient. Ink on pink passes contrast, white on pink does not. ── */
.bx-btn {
  min-height: 48px;
  padding: 12px 20px;
  font-family: var(--bx-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--bx-ink);
  background: var(--bx-pink);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1), opacity 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bx-btn:active { transform: scale(0.97); }
.bx-btn[disabled] { opacity: 0.6; cursor: default; }
.bx-btn-quiet { background: var(--bx-surface); border: 1px solid var(--bx-line); }

/* ── EDIT SHEET ──────────────────────────────────────────────────────────── */
.bx-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(26, 22, 51, 0.6);
  animation: bxFade 200ms cubic-bezier(0.2, 0, 0, 1) both;
}
.bx-sheet {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  background: var(--bx-card);
  border-radius: var(--bx-radius);
  box-shadow: 0 16px 40px rgba(26, 22, 51, 0.2);
  font-family: var(--bx-font);
  color: var(--bx-ink);
  animation: bxIn 240ms cubic-bezier(0.2, 0, 0, 1) both;
}
.bx-sheet-title { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.bx-label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--bx-ink-soft); }
.bx-input {
  width: 100%;
  max-width: 100%;
  min-height: 56px;
  box-sizing: border-box;
  padding: 8px 16px;
  font-family: var(--bx-font);
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--bx-ink);
  background: var(--bx-surface);
  border: 1px solid var(--bx-line);
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
}
.bx-input:focus { outline: 2px solid var(--bx-teal); outline-offset: 1px; }
.bx-hint { margin: 8px 0 12px; font-size: 13px; line-height: 1.4; color: var(--bx-ink-soft); }
.bx-actions { display: flex; gap: 12px; }
.bx-actions > .bx-btn { flex: 1; }

@keyframes bxRunway { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bxIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── DARK PATH ────────────────────────────────────────────────────────────────
   Scoped to [data-theme="dark"], same as the Shipments surface, because the shell is light only and
   paints the body white. Following the system setting here would put 1 dark card in a light app. */
[data-theme="dark"] .bx-card,
[data-theme="dark"] .bx-sheet { background: var(--bx-ink); border-color: var(--bx-ink-soft); color: var(--bx-surface); }
[data-theme="dark"] .bx-count,
[data-theme="dark"] .bx-input { background: var(--bx-ink-soft); border-color: var(--bx-ink-soft); color: var(--bx-surface); }
[data-theme="dark"] .bx-title,
[data-theme="dark"] .bx-note,
[data-theme="dark"] .bx-hint,
[data-theme="dark"] .bx-label,
[data-theme="dark"] .bx-empty-sub { color: var(--bx-line); }
[data-theme="dark"] .bx-meta,
[data-theme="dark"] .bx-empty-title,
[data-theme="dark"] .bx-tap,
[data-theme="dark"] .bx-pill { color: var(--bx-surface); }
[data-theme="dark"] .bx-tile,
[data-theme="dark"] .bx-order { background: var(--bx-ink-soft); border-color: var(--bx-ink-soft); color: var(--bx-surface); }
[data-theme="dark"] .bx-order-tile.bx-GREEN,
[data-theme="dark"] .bx-order.bx-GREEN { border-color: var(--bx-ok); }
[data-theme="dark"] .bx-order-tile.bx-YELLOW,
[data-theme="dark"] .bx-order.bx-YELLOW { border-color: var(--bx-warn); }
[data-theme="dark"] .bx-order-tile.bx-RED,
[data-theme="dark"] .bx-order.bx-RED { border-color: var(--bx-bad); }
[data-theme="dark"] .bx-tile .bx-tile-value,
[data-theme="dark"] .bx-velocity b { color: var(--bx-surface); }
[data-theme="dark"] .bx-tile .bx-tile-label,
[data-theme="dark"] .bx-tile .bx-tile-sub,
[data-theme="dark"] .bx-tile.bx-order-tile .bx-tile-label,
[data-theme="dark"] .bx-tile.bx-order-tile .bx-tile-sub,
[data-theme="dark"] .bx-velocity { color: var(--bx-line); }

/* ── REDUCED MOTION ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bx-card, .bx-card *, .bx-scrim, .bx-sheet {
    animation: none !important;
    transition: none !important;
  }
}