/* ─────────────────────────────────────────────────────────────────────
 * DC detail row — expandable per-SKU breakdown rendered as an extra <tr>
 * below the canonical SKU row across the three Replenishment views
 * (by_sku, by_product, by_moq_group). Extracted from inline styles in
 * app/views/replenishment/_dc_detail_row.html.erb per CLAUDE.md
 * "NO INLINE STYLES IN PRODUCTION CODE".
 *
 * All colors come from design-system CSS variables; nothing hard-coded.
 * ───────────────────────────────────────────────────────────────────── */

.dc-detail-row {
  display: none;
  background: var(--surface-alt, #fafaf8);
}

.dc-detail-row__cell {
  padding: 8px 16px 12px 32px;
}

.dc-detail-row__header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 6px;
}

.dc-detail-table {
  width: auto;
  font-size: 12px;
  border-collapse: collapse;
}

.dc-detail-table thead tr {
  border-bottom: 1px solid var(--border-light);
}

.dc-detail-table th {
  padding: 3px 12px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--light);
}

.dc-detail-table th.dc-th--location {
  padding-left: 0;
}

.dc-detail-table th.dc-th--num {
  text-align: right;
}

.dc-detail-table td {
  padding: 3px 12px;
}

.dc-detail-table td.dc-td--location {
  padding-left: 0;
  font-weight: 600;
}

.dc-detail-table td.dc-td--num {
  text-align: right;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.dc-detail-table td.dc-td--num-plain {
  text-align: right;
}

.dc-detail-table td.dc-td--suggested {
  text-align: right;
  font-weight: 600;
}

/* On-order column: blue when nonzero, neutral when zero.
 * Replaces an inline conditional `style="color: …"` swap. */
.dc-detail-table td.dc-td--on-order {
  text-align: right;
  color: var(--accent-blue, #3b82f6);
}

.dc-detail-table td.dc-td--on-order.is-zero {
  color: var(--border-light, #ccc);
}

.dc-detail-table .badge {
  font-size: 9px;
}

.dc-detail-empty {
  font-size: 11px;
  color: var(--light);
}