/* ═══════════════════════════════════════════════════════════════
   ecommerce.css — E-commerce tab
   ───────────────────────────────────────────────────────────────
   Selectors that ONLY render in the E-commerce tab.
   Extracted from dashboard.css in Phase 3.5 (2026-05-30).
   Loaded AFTER dashboard.css; shared chrome lives there.
   ═══════════════════════════════════════════════════════════════ */


/* Segmented pill ribbon — two adjacent colored segments showing the
   WhatsApp vs Email order share. Widths are driven by a CSS custom
   property set inline (data-pct attribute mirrored to style is the
   only inline; we use flex-basis with the data attribute via the
   :where selector below). Because we cannot read data-pct in pure CSS
   for sizing without a helper, the segments use flex with explicit
   percent values written into a CSS variable. */
.dash-ecom-split {
  display: flex;
  width: 100%;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-surface, rgba(255,255,255,0.04));
  margin-top: 0.5rem;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}

.dash-ecom-split-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  transition: flex-basis 0.4s ease;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.dash-ecom-split-segment--waba {
  background: var(--accent-green, #25D366);
  color: var(--text-primary, #e8ecf1);
}

.dash-ecom-split-segment--email {
  background: rgba(255,255,255,0.12);
  color: var(--text-secondary, #8b95a5);
}

.dash-ecom-split-segment--full {
  flex: 1 1 100%;
}

/* Width buckets in 5% increments. The render layer rounds the live
   percentage to the nearest bucket and applies the matching class —
   keeps the markup style-attribute-free while staying granular enough
   that the bar visually tracks the data. */
.dash-ecom-split-segment--w0   { flex: 0 0 0%; }
.dash-ecom-split-segment--w5   { flex: 0 0 5%; }
.dash-ecom-split-segment--w10  { flex: 0 0 10%; }
.dash-ecom-split-segment--w15  { flex: 0 0 15%; }
.dash-ecom-split-segment--w20  { flex: 0 0 20%; }
.dash-ecom-split-segment--w25  { flex: 0 0 25%; }
.dash-ecom-split-segment--w30  { flex: 0 0 30%; }
.dash-ecom-split-segment--w35  { flex: 0 0 35%; }
.dash-ecom-split-segment--w40  { flex: 0 0 40%; }
.dash-ecom-split-segment--w45  { flex: 0 0 45%; }
.dash-ecom-split-segment--w50  { flex: 0 0 50%; }
.dash-ecom-split-segment--w55  { flex: 0 0 55%; }
.dash-ecom-split-segment--w60  { flex: 0 0 60%; }
.dash-ecom-split-segment--w65  { flex: 0 0 65%; }
.dash-ecom-split-segment--w70  { flex: 0 0 70%; }
.dash-ecom-split-segment--w75  { flex: 0 0 75%; }
.dash-ecom-split-segment--w80  { flex: 0 0 80%; }
.dash-ecom-split-segment--w85  { flex: 0 0 85%; }
.dash-ecom-split-segment--w90  { flex: 0 0 90%; }
.dash-ecom-split-segment--w95  { flex: 0 0 95%; }
.dash-ecom-split-segment--w100 { flex: 0 0 100%; }

.dash-ecom-split-label {
  padding: 0 0.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
}