/* ============================================
   Replenishment v2 — bulk-action bar, composer, AI, per-DC expansion
   ============================================ */

/* ─────────────────────────────────────────────
   0. Row-level integration helpers
   ───────────────────────────────────────────── */

.replen-checkbox-cell {
  text-align: center;
  width: 28px;
}

.replen-edit-cell {
  text-align: center;
  width: 56px;
}

/* Warning badge — fires when a SKU has a pending ForecastReview. Same
   warm-amber palette as the sub-MOQ chip / group-below indicator so the
   visual language stays consistent. Clickable: deep-links to the queue. */
.badge-open-review {
  font-size: 9px;
  padding: 2px 8px;
  background: #fffbeb;
  color: #c47e00;
  border: 1px solid #fde68a;
  vertical-align: middle;
  text-decoration: none;
}

.badge-open-review:hover {
  background: #fef3c7;
  color: var(--ink);
}

/* SKU cell — code-as-label (toggles row checkbox on click) + sibling
   external-link icon (opens SKU detail in a new tab).  Replaces the
   prior pattern where the SKU code itself was a navigation link. */
/* ─────────────────────────────────────────────
   0a. Mode B Group Header Card
   ───────────────────────────────────────────── */

.moq-group-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  font-family: "DM Sans", system-ui, sans-serif;
}

/* The card's header used to live at .moq-group-card__header / __name /
   __sku-count / __vendor / __actions / __ai-btn / __csv-btn / __csv-link.
   All of those were replaced by the canonical .group-head + .gtitle +
   .gcount + .gvendor + .ghdr-actions + .ai-review-btn + .csv-btn rules
   defined further down (Group Header Styling Guide). The status bar
   below is unchanged. */

/* Status bar (warm tint when below MOQ, success tint when met) */
.moq-group-card__status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: #fffbeb;
  border-top: 1px solid #fde68a;
  border-bottom: 1px solid #fde68a;
  flex-wrap: wrap;
  font-size: 12px;
}

.moq-group-card__status[data-state="met"] {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

/* 200ms color pulse on aggregate update (po_creation_ui_spec §6.5).
   Brief opacity bump on a same-color overlay so the underlying state
   background (warm-amber for below, warm-green for met) still owns the
   resting paint after the animation ends. */
.moq-group-card__status--pulse {
  animation: moq-group-status-pulse 220ms ease-out;
}
@keyframes moq-group-status-pulse {
  0%   { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); }
  35%  { box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.35); }
  100% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); }
}

.moq-group-card__status-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.moq-group-card__progress-numbers {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.moq-group-card__below {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: #c47e00;
}

.moq-group-card__below::before { content: "⚠"; font-size: 12px; }

.moq-group-card__met {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--green);
}

.moq-group-card__met::before { content: "✓"; font-size: 12px; }

.moq-group-card__to-order {
  color: var(--muted);
}

.moq-group-card__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}

.moq-group-card__cta:hover {
  border-color: var(--ink);
  background: var(--surface-alt);
}

.moq-group-card__progress-bar {
  height: 4px;
  background: var(--border-light);
  position: relative;
  overflow: hidden;
}

.moq-group-card__progress-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--amber);
  transition: width 200ms ease-out;
}

.moq-group-card__progress-bar[data-state="met"] .moq-group-card__progress-bar__fill {
  background: var(--green);
}

/* Product subtitle row under the product link */
.replen-product-subtitle {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ─────────────────────────────────────────────
   1. Bulk Action Bar (Lane A.4)
   ───────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────────
   Bulk-action bar — dark variant (round-3 prototype, May 2026)
   Single floating pill at the bottom of the viewport.  Black bg / white text,
   pill chips for selection/vendor/group/warnings, accent-red Generate PO.
   ──────────────────────────────────────────────────────────────────────── */
.bulk-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 50;
  background: #1a1a1a;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
  padding: 10px 14px;
  font-family: "DM Sans", system-ui, sans-serif;
  transition: transform 220ms ease-out;
  max-width: calc(100vw - 32px);
}

.bulk-bar[data-bulk-action-bar-visible-value="true"] {
  transform: translate(-50%, 0);
}

.bulk-bar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bulk-bar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bulk-bar__row--primary {
  /* primary row only — fills width with spacer pushing actions right */
}

/* Mode A controls row — only renders when selection includes Mode A SKUs.
   When the selection is entirely Mode B, JS sets display:none. */
.bulk-bar__row--controls {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.bulk-bar__spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

/* ── Chips ──────────────────────────────────────────────────────────── */
.bulk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  font-family: inherit;
}

/* Selection summary chip — bare; just the inline counts on the bar bg */
.bulk-chip--summary {
  padding-left: 4px;
  padding-right: 4px;
  font-weight: 500;
}

.bulk-chip--summary strong {
  font-weight: 700;
  color: #fff;
}

.bulk-chip__sep {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
  margin: 0 2px;
}

/* Vendor / warehouse pill — light grey on dark bar */
.bulk-chip--vendor {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.04);
}

/* Mode B group progress chip — purple-tinted */
.bulk-chip--group {
  background: rgba(124, 58, 237, 0.18);
  color: #c4b5fd;
  border-color: rgba(124, 58, 237, 0.35);
}

.bulk-chip--group strong {
  color: #fff;
  font-weight: 700;
}

.bulk-chip__icon {
  font-size: 12px;
}

/* Sub-MOQ warning chip — warm red on dark */
.bulk-chip--warning {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.35);
  cursor: pointer;
  font-family: inherit;
}

.bulk-chip--warning strong {
  color: #fff;
  font-weight: 700;
}

.bulk-chip__icon {
  display: inline-block;
  width: 12px;
  height: 12px;
}

/* Mode A controls — labels + selects on dark bar */
.bulk-bar__control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bulk-bar__control label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Inline "?" affordance next to control labels — hover/focus reveals the
   styled tooltip from hover_tooltip_controller. Quiet at rest, brighter
   on hover so it doesn't compete with the actual select. */
.bulk-bar__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
  font-size: 9px;
  font-weight: 700;
  cursor: help;
  font-family: "DM Sans", system-ui, sans-serif;
  transition: all 0.15s;
  margin-right: 2px;
}

.bulk-bar__help:hover,
.bulk-bar__help:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.bulk-bar__control select {
  padding: 4px 28px 4px 8px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
}

/* Native dropdown panel inherits color from the select. The bar's white
   text on near-transparent dark background works for the closed trigger,
   but the OPEN <option> list paints on the system's white background —
   white text on white = invisible. Force ink-on-white for the options so
   they read properly when the dropdown is open. */
.bulk-bar__control select option {
  background-color: #fff;
  color: var(--ink, #1a1a1a);
}

.bulk-bar__control select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
}

/* ─── Add to PO ▼ split button ─── */

.add-to-po-split {
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}

.add-to-po-split:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.add-to-po-split__primary {
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  padding: 8px 14px;
  border: none;
  border-radius: 7px 0 0 7px;
  cursor: pointer;
  white-space: nowrap;
}

.add-to-po-split__primary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.add-to-po-split__primary:disabled {
  color: rgba(255, 255, 255, 0.4);
  cursor: progress;
}

.add-to-po-split__chevron {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 7px 7px 0;
  padding: 0 10px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
}

.add-to-po-split__chevron:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.add-to-po-split__menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  min-width: 360px;
  max-width: 460px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  padding: 6px;
  display: none;
}

.add-to-po-split__menu[data-open="true"] {
  display: block;
}

/* Loading state — shown immediately on chevron click, replaced once the
   smart-drafts fetch resolves. Acknowledges the click for slow networks
   or large selections. */
.add-to-po-split__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  font-size: 12px;
  color: var(--muted);
  font-family: "DM Sans", system-ui, sans-serif;
}

.add-to-po-split__loading-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ── Multi-vendor menu: commit row, vendor sections, footer ── */

.add-to-po-split__commit-row {
  position: sticky;
  top: -6px;
  margin: -6px -6px 6px;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 1;
}

.add-to-po-split__commit-btn {
  width: 100%;
  padding: 9px 12px;
  background: var(--accent, #e54d2e);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 100ms;
}
.add-to-po-split__commit-btn:hover {
  background: #c43d22;
}

.add-to-po-split__vendor-sections {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-to-po-split__vendor {
  border-radius: 6px;
  padding: 0;
}
.add-to-po-split__vendor[open] {
  background: rgba(0, 0, 0, 0.02);
}

.add-to-po-split__vendor-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}
.add-to-po-split__vendor-summary::-webkit-details-marker { display: none; }
.add-to-po-split__vendor-summary::before {
  content: "▸";
  width: 10px;
  font-size: 10px;
  color: var(--muted);
  transition: transform 100ms;
}
.add-to-po-split__vendor[open] > .add-to-po-split__vendor-summary::before {
  transform: rotate(90deg);
}
.add-to-po-split__vendor-summary:hover {
  background: var(--surface-alt);
}

.add-to-po-split__vendor-name {
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-to-po-split__summary-pick {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  flex-shrink: 0;
}
.add-to-po-split__summary-pick--new {
  color: var(--accent);
}

.add-to-po-split__vendor-body {
  padding: 4px 4px 6px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-to-po-split__footer {
  position: sticky;
  bottom: -6px;
  margin: 6px -6px -6px;
  padding: 6px 10px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.add-to-po-split__reset-btn {
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 100ms, color 100ms;
}
.add-to-po-split__reset-btn:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

.add-to-po-split__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  transition: background 100ms;
}

.add-to-po-split__item:hover {
  background: var(--surface-alt);
}

/* Smart-default — warm amber tint per the prototype, distinguishes the
   "this is the recommended target" item from the merely-listed others. */
.add-to-po-split__item--default {
  background: #fef3c7;
}
.add-to-po-split__item--default:hover {
  background: #fde68a;
}

/* Create new PO — accent-red label so it reads as a CTA inside the menu,
   not just another list row. Subtitle stays muted. */
.add-to-po-split__item--create-new .add-to-po-split__item__title--accent {
  color: var(--accent);
}

.add-to-po-split__item__check {
  width: 14px;
  flex: 0 0 14px;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
}

.add-to-po-split__item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.add-to-po-split__item__title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The PO number itself reads as a code pill — mono, slight tint, lets the
   buyer scan PO-2026-04-07 / 04-08 / 04-09 down a list at a glance. */
.add-to-po-split__item__po {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--ink);
}

.add-to-po-split__item__label-tag {
  font-weight: 600;
  color: var(--accent);
}

.add-to-po-split__item__meta {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* "smart default" right-side tag inside the meta row of the highlighted
   item — small, muted, still readable. */
.add-to-po-split__item__tag {
  color: var(--muted);
}

.add-to-po-split__separator {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

.add-to-po-split__section-label {
  padding: 8px 12px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--light, #b0aead);
}

/* Empty per-vendor section in the multi-vendor dropdown — vendor has no
   recent drafts. Shown muted so the buyer knows the section is real but
   currently empty. */
.add-to-po-split__section-empty {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* ─── Generate PO primary button ─── */

.bulk-bar__generate {
  background: var(--accent);
  color: white;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s;
}

.bulk-bar__generate:hover {
  opacity: 0.85;
}

/* Loading state — applied to any commit-trigger button (Generate PO, the
   split-button primary half, the dropdown's Commit selections header, the
   confirm modal's submit button). Visually communicates "click registered,
   request in flight" so the buyer doesn't mash and create duplicate POs.
   Pairs with disabled=true on the button (set in JS). */
.bulk-bar__btn--loading {
  cursor: progress !important;
  opacity: 0.7 !important;
  position: relative;
  padding-left: 30px !important;
}

.bulk-bar__btn--loading::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  margin-top: -7px;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  opacity: 0.85;
}

.bulk-bar__btn--loading:disabled {
  cursor: progress !important;
}

/* ─────────────────────────────────────────────
   2. Confirm Modal (Lane A.4)
   ───────────────────────────────────────────── */

.po-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.po-confirm-modal {
  background: var(--surface);
  border-radius: 12px;
  width: 100%;
  max-width: 780px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  font-family: "DM Sans", system-ui, sans-serif;
  overflow: hidden;
}

.po-confirm-modal__header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.po-confirm-modal__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.po-confirm-modal__close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
}

.po-confirm-modal__body {
  padding: 16px 24px;
  overflow-y: auto;
  flex: 1;
}

.po-confirm-modal__intro {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 12px;
}

.po-confirm-modal__vendor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.po-confirm-modal__vendor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: var(--surface-alt);
  border-radius: 6px;
  font-size: 13px;
}

.po-confirm-modal__vendor-name {
  font-weight: 600;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.po-confirm-modal__vendor-meta {
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.po-confirm-modal__vendor-dest {
  font-size: 11px;
  font-weight: 600;
  font-family: "JetBrains Mono", monospace;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 10px;
}
.po-confirm-modal__vendor-dest--merge {
  background: #fef3c7;
  color: #92400e;
}
.po-confirm-modal__vendor-dest--new {
  background: rgba(229, 77, 46, 0.12);
  color: var(--accent, #c43d22);
}

.po-confirm-modal__padded {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 12px;
}

.po-confirm-modal__padded-header {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.po-confirm-modal__padded-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #eff6ff;
  padding: 8px;
  border-radius: 6px;
}

.po-confirm-modal__padded-row {
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  padding: 4px 6px;
  color: var(--ink);
}

.po-confirm-modal__submoq {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 12px;
}

.po-confirm-modal__submoq-header {
  font-size: 13px;
  font-weight: 600;
  color: #c47e00;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.po-confirm-modal__submoq-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fffbeb;
  padding: 8px;
  border-radius: 6px;
}

.po-confirm-modal__submoq-row {
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  padding: 4px 6px;
  color: var(--ink);
}

.po-confirm-modal__open-reviews {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 12px;
}

.po-confirm-modal__open-reviews-header {
  font-size: 13px;
  font-weight: 600;
  color: #c47e00;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.po-confirm-modal__open-reviews-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fffbeb;
  padding: 8px;
  border-radius: 6px;
}

.po-confirm-modal__open-reviews-row {
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  padding: 4px 6px;
  color: var(--ink);
}

.po-confirm-modal__open-reviews-row a {
  color: #c47e00;
  text-decoration: underline;
}

.po-confirm-modal__open-reviews-row a:hover {
  color: var(--ink);
}

.po-confirm-modal__total {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.po-confirm-modal__deferred {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.po-confirm-modal__footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.po-confirm-modal__cancel {
  background: var(--surface);
  color: #555;
  border: 1px solid var(--border-hover);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

.po-confirm-modal__cancel:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.po-confirm-modal__submit {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.po-confirm-modal__submit:hover {
  opacity: 0.85;
}

/* ─────────────────────────────────────────────
   3. Inline Qty Composer Popover (Lane C.5)
   ───────────────────────────────────────────── */

.composer-popover {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 16px 20px;
  min-width: 480px;
  max-width: 560px;
  z-index: 60;
  font-family: "DM Sans", system-ui, sans-serif;
}

.composer-popover__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.composer-popover__row:last-child {
  margin-bottom: 0;
}

.composer-popover__suggested {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.composer-popover__arrow {
  color: var(--light);
  font-size: 14px;
}

.composer-popover__stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}

.composer-popover__stepper button {
  background: var(--surface);
  border: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
}

.composer-popover__stepper button:hover {
  background: var(--surface-alt);
}

.composer-popover__qty-input {
  width: 80px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 6px 8px;
  font-size: 14px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--ink);
}

.composer-popover__qty-input:focus {
  outline: none;
  background: var(--surface-alt);
}

.composer-popover__unit {
  font-size: 12px;
  color: var(--muted);
}

.composer-popover__moq-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
}

.composer-popover__moq-chip[data-state="below"] {
  background: #fffbeb;
  color: #c47e00;
}

.composer-popover__moq-chip[data-state="met"] {
  background: #dcfce7;
  color: var(--green);
}

.composer-popover__moq-chip[data-state="over"] {
  background: #eff6ff;
  color: var(--blue);
}

.composer-popover__moq-chip[data-state="none"] {
  display: none;
}

/* AI Recommends chip (per AI Recommends Chip Implementation Spec).
   Green = "act on it" (AI says higher), Red = "pull back" (AI says lower).
   Green/red is the composer convention; the row-level verdict pill uses
   amber/blue. Composer is an action surface, row pills are status.

   Container row — collapses cleanly when AI matches current qty. */
.composer-popover__ai-row[data-visible="false"] {
  display: none;
}
.composer-popover__ai-row {
  margin-top: -2px;
  padding-bottom: 4px;
}

.iqc-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid;
}
.iqc-ai-chip svg {
  flex-shrink: 0;
}
.iqc-ai-chip.iqc-ai-higher {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}
.iqc-ai-chip.iqc-ai-lower {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}
.iqc-ai-label {
  font-weight: 600;
}
.iqc-ai-num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  font-size: 12px;
}
.iqc-ai-delta {
  font-weight: 500;
  opacity: 0.8;
  font-size: 10px;
}
.iqc-ai-accept {
  margin-left: 4px;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  transition: background 100ms;
}
.iqc-ai-accept:hover {
  background: #fff;
}

.composer-popover__multi-dc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  padding: 8px 0;
  border-top: 1px solid var(--border-light);
  margin-top: 6px;
  position: relative;
}

.composer-popover__dc-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  color: var(--light);
}

.composer-popover__dc-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.composer-popover__dc-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  background: var(--surface-alt, #fafaf8);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.composer-popover__dc-chip strong {
  font-weight: 700;
  color: var(--ink);
}

.composer-popover__dc-chip--single {
  background: #fff7e6;
  border-color: #f0c870;
}

.composer-popover__dc-sep {
  color: var(--light);
  font-size: 11px;
}

.composer-popover__dc-empty {
  font-style: italic;
  color: var(--light);
}

.composer-popover__dc-spacer {
  flex: 1;
}

.composer-popover__dc-action {
  position: relative;
}

.composer-popover__dc-single,
.composer-popover__dc-revert {
  border: 1px solid var(--border-light);
  background: transparent;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 100ms;
}

.composer-popover__dc-single:hover,
.composer-popover__dc-revert:hover {
  background: var(--surface-alt, #fafaf8);
  color: var(--ink);
}

.composer-popover__dc-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  padding: 4px 0;
  z-index: 10;
}

.composer-popover__dc-menu[hidden] { display: none; }

.composer-popover__dc-menu-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}

.composer-popover__dc-menu-item:hover {
  background: var(--surface-alt, #fafaf8);
}

.composer-popover__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  margin-top: 8px;
}

.composer-popover__cancel,
.composer-popover__save {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid;
}

.composer-popover__cancel {
  background: var(--surface);
  color: #555;
  border-color: var(--border-hover);
}

.composer-popover__cancel:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.composer-popover__save {
  background: var(--accent, #e54d2e);
  color: white;
  border-color: var(--accent, #e54d2e);
}

.composer-popover__save:hover {
  filter: brightness(0.95);
}

.composer-popover__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.composer-popover__hints {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.composer-popover__hints kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  line-height: 1.3;
}

.composer-popover__hints__sep {
  color: var(--light);
}

.composer-popover__error {
  display: none;
  font-size: 11px;
  color: var(--red);
  background: #fef2f2;
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 6px;
}

.composer-popover__error[data-visible="true"] {
  display: block;
}

/* ─────────────────────────────────────────────
   4. Pencil + Revert Affordances (Decision F)
   ───────────────────────────────────────────── */

/* The pencil + revert affordances used to live at .qty-cell / .qty-cell__
   edit-btn / .qty-cell__revert-btn / .qty-cell__was / .qty-cell--mode-b.
   All of those were replaced by .row-edit-cell / .row-edit-btn (with
   .is-overridden / .is-ai-source variants) / .row-revert-btn / .sug-num-was
   from the SKU Row Styling Guide. Rules removed; consult that section. */

/* ─────────────────────────────────────────────
   5. AI Column (Lane C.6)
   ───────────────────────────────────────────── */

.ai-cell {
  text-align: center;
  width: 64px;
}

.ai-sparkle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.ai-sparkle:hover {
  background: var(--surface-alt);
}

.ai-sparkle[data-state="agrees"] {
  background: #dcfce7;
  color: var(--green);
}

.ai-sparkle[data-state="suggest_lower"] {
  background: #eff6ff;
  color: var(--blue);
}

.ai-sparkle[data-state="suggest_higher"] {
  background: #fffbeb;
  color: var(--amber);
}

.ai-sparkle[data-state="not_analyzed"] {
  color: var(--light);
}

.ai-sparkle[data-state="em_dash"] {
  color: var(--light);
}

.ai-sparkle[data-state="pending"] {
  color: var(--purple);
  animation: ai-pulse 1s ease-in-out infinite;
}

@keyframes ai-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── AI Evaluation Modal ─── */

.ai-modal {
  background: var(--surface);
  border-radius: 14px;
  width: 630px;
  max-width: calc(100vw - 48px);
  max-height: 600px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
  font-family: "DM Sans", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}

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

/* Violet icon box — sparkles glyph in white on a #7c3aed square. */
.ai-modal__header-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.ai-modal__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.ai-modal__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Subtle "Analyzed N ago" line under the SKU subtitle. The full ISO
   timestamp lives on the title attribute for hover-precision; this
   reads as a footnote, not a primary fact. */
.ai-modal__analyzed-at {
  font-size: 11px;
  font-weight: 500;
  color: var(--light, #b0aead);
  letter-spacing: 0.1px;
  margin-top: 2px;
}

.ai-modal__close {
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  align-self: flex-start;
}

.ai-modal__close:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

/* Verdict bar — colored icon-box on the left, label + line in the middle,
   transition value right-aligned. Background tint matches the verdict
   semantic from the AI Result Row Styling Guide. */
.ai-modal__verdict {
  margin: 16px 22px;
  padding: 14px 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ai-modal__verdict[data-verdict="agrees"] {
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

.ai-modal__verdict[data-verdict="suggest_lower"] {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.ai-modal__verdict[data-verdict="suggest_higher"] {
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.ai-modal__verdict[data-verdict="em_dash"] {
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.ai-modal__verdict-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.ai-modal__verdict[data-verdict="agrees"] .ai-modal__verdict-icon {
  background: #16a34a;
}
.ai-modal__verdict[data-verdict="suggest_lower"] .ai-modal__verdict-icon {
  background: #2563eb;
}
.ai-modal__verdict[data-verdict="suggest_higher"] .ai-modal__verdict-icon {
  background: #d97706;
}
.ai-modal__verdict[data-verdict="em_dash"] .ai-modal__verdict-icon {
  background: var(--muted);
}

.ai-modal__verdict-body {
  flex: 1;
  min-width: 0;
}

.ai-modal__verdict-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 2px;
}

.ai-modal__verdict-line {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

.ai-modal__verdict-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.ai-modal__verdict[data-verdict="agrees"] .ai-modal__verdict-value {
  color: #16a34a;
}
.ai-modal__verdict[data-verdict="suggest_lower"] .ai-modal__verdict-value {
  color: #2563eb;
}
.ai-modal__verdict[data-verdict="suggest_higher"] .ai-modal__verdict-value {
  color: #d97706;
}

.ai-modal__verdict-arrow {
  margin: 0 4px;
  font-weight: 500;
  opacity: 0.85;
}

.ai-modal__verdict-delta {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 600;
}

.ai-modal__reasoning {
  padding: 0 22px 16px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
  overflow-y: auto;
  flex: 1;
}

.ai-modal__footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--surface-alt);
}

.ai-modal__btn-secondary {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border-hover);
  background: var(--surface);
  color: var(--ink);
  transition: all 0.15s;
}

.ai-modal__btn-secondary:hover {
  border-color: var(--ink);
  background: var(--surface-alt);
}

.ai-modal__btn-primary {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: #7c3aed;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.ai-modal__btn-primary:hover {
  background: #6d28d9;
}

/* ─────────────────────────────────────────────
   6. Per-DC Inline Expansion (Lane D.7)
   ───────────────────────────────────────────── */

.dc-expand-chevron {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.15s;
}

.dc-expand-chevron[data-open="true"] {
  transform: rotate(90deg);
  color: var(--ink);
}

.dc-expansion {
  background: var(--surface-alt);
  border-top: 1px solid var(--border-light);
  padding: 12px 24px;
  font-family: "DM Sans", system-ui, sans-serif;
}

.dc-expansion table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.dc-expansion th {
  text-align: left;
  font-weight: 700;
  color: var(--light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 9px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light);
}

.dc-expansion td {
  padding: 6px 10px;
  color: var(--ink);
  font-size: 11px;
}

.dc-expansion__empty {
  font-size: 11px;
  color: var(--muted);
  padding: 12px;
  text-align: center;
}

/* ─────────────────────────────────────────────
   7. Total Suggested Order Footer (Lane A.8)
   ───────────────────────────────────────────── */

.total-suggested-footer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "DM Sans", system-ui, sans-serif;
}

.total-suggested-footer__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--light);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.total-suggested-footer__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
}

/* ─────────────────────────────────────────────
   8. Flash Banner
   ───────────────────────────────────────────── */

.flash-banner {
  position: fixed;
  top: 16px;
  right: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-left-color: var(--green);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  color: var(--ink);
  z-index: 80;
  max-width: 400px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.flash-banner__close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  margin-left: auto;
  font-size: 16px;
}

.flash-banner__link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.flash-banner__link:hover {
  text-decoration: underline;
}

/* Hover tooltip bubble (po_creation_ui_spec §8.2) — appears on hover/
   focus of any element with [data-controller="hover-tooltip"]. Dark ink
   background, white text, 8px radius, 12px DM Sans, max-width 280px,
   200ms fade-in. Auto-positions above (or below if no room). */
.hover-tooltip {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  background: #1a1a1a;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  max-width: 280px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.hover-tooltip.hover-tooltip--visible {
  opacity: 1;
}

.hover-tooltip > div + div {
  margin-top: 4px;
}

/* PO commit toast — replaces the old redirect-on-Generate-PO behavior
   per user direction: stay on the replenishment page, surface the
   result inline. Pinned bottom-right; slides up + fades in; auto-
   dismisses at 6s. Single instance at a time is fine for v1; if we
   ever need stacking, switch to a column container with gap. */
.po-toast {
  position: fixed;
  bottom: 88px;          /* clears the floating bulk-action bar */
  right: 24px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid #16a34a;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
  font-family: "DM Sans", system-ui, sans-serif;
  min-width: 320px;
  max-width: 480px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.po-toast--in {
  opacity: 1;
  transform: translateY(0);
}

/* Error-tone toast: red border + amber-on-red icon. Same layout, same screen
   real estate the buyer is already trained to look at for commit feedback. */
.po-toast--error {
  border-left-color: #dc2626;
}

.po-toast__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dcfce7;
  color: #16a34a;
  border-radius: 8px;
}

.po-toast--error .po-toast__icon {
  background: #fee2e2;
  color: #dc2626;
}

.po-toast__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.po-toast__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.po-toast__subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-toast__warnings {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  max-height: 96px;
  overflow-y: auto;
}

.po-toast__warning {
  font-size: 11.5px;
  font-weight: 500;
  color: #c47e00;
  line-height: 1.3;
}

.po-toast__view {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue, #2563eb);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.po-toast__view:hover {
  background: rgba(37, 99, 235, 0.08);
}

.po-toast__close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}

.po-toast__close:hover {
  color: var(--ink);
  background: var(--surface-alt);
}

/* ════════════════════════════════════════════════════════════════════════
   SKU Row Styling — per Replenishment SKU Row Styling Guide.
   Applies to .data-table on the three full-feature replenishment surfaces
   plus the inline cells on /replenishment_by_dc.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Cell utilities ─────────────────────────────────────────────────── */
.data-table tbody td.num,
.data-table tbody td .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table tbody td.mono,
.data-table tbody td .mono {
  font-family: "JetBrains Mono", monospace;
}
.data-table tbody td.ctr {
  text-align: center;
}

/* Numeric color semantics (driven by num_class lambda in _sku_row.html.erb) */
.num-bad   { color: var(--red, #dc2626); font-weight: 700; }
.num-zero  { color: var(--red, #dc2626); font-weight: 700; }
.num-okay  { color: var(--ink); }

/* ── Row state tints ────────────────────────────────────────────────── */
.data-table tbody tr.is-selected {
  background: #f0f7ff;
}
.data-table tbody tr.is-selected:hover {
  background: #e6f0ff;
}
.data-table tbody tr.has-override {
  background: linear-gradient(to right, rgba(255, 247, 237, 0.7), transparent 60%);
}
.data-table tbody tr.has-override.is-selected {
  background: linear-gradient(to right, rgba(255, 247, 237, 0.85), #f0f5ff);
}
.data-table tbody tr.has-ai-override {
  background: linear-gradient(to right, rgba(243, 232, 255, 0.55), transparent 60%);
}
.data-table tbody tr.has-ai-override.is-selected {
  background: linear-gradient(to right, rgba(243, 232, 255, 0.6), rgba(238, 242, 255, .35) 70%);
}

/* ── Cell 1 — checkbox + DC disclosure ──────────────────────────────── */
.cb-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dc-disclosure {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  transition: transform 140ms ease, color 100ms, background 100ms;
}
.dc-disclosure:hover    { color: var(--ink); background: var(--surface-alt); }
.dc-disclosure.is-open  { color: var(--ink); transform: rotate(90deg); }
.dc-disclosure-spacer   { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; }

/* ── Cell 2 — SKU pill + view link ──────────────────────────────────── */
.sku-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sku-pill {
  display: inline-flex;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: all .15s;
}
.sku-pill:hover {
  background: #ece9e3;
  border-color: var(--border-hover, #d8d6d1);
}
.sku-pill-btn {
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
}
.sku-pill-link {
  cursor: pointer;
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
}
.sku-pill-link:hover {
  color: var(--ink);
  text-decoration: none;
}
.sku-view-link {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--light, #b0aead);
  border-radius: 5px;
  transition: all .15s;
  text-decoration: none;
}
.sku-view-link:hover {
  color: var(--blue, #2563eb);
  background: var(--surface-alt);
}
.sku-view-link svg {
  display: block;
}

/* ── Cell 3 — Product cell ──────────────────────────────────────────── */
.data-table tbody td.prod-cell {
  max-width: 240px;
}
.prod-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
  line-height: 1.35;
  transition: all .15s;
  cursor: pointer;
}
.prod-link:hover {
  color: var(--blue, #2563eb);
  text-decoration-color: var(--blue, #2563eb);
}

/* Header variant — used by the per-product card heading on /replenishment/
   by_product. Inherits .prod-link visuals (ink → blue on hover, border-color
   underline) but bumps to the h3-style size of 16px / 600 to match the
   surrounding heading typography. */
.prod-link--header {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* Dedicated VARIANT column — used by /replenishment/by_product so the
   variant + season info has its own column rather than sitting inline as
   a subtitle under the SKU pill. */
.variant-cell {
  font-size: 12px;
  color: var(--ink);
}
.variant-cell .prod-variant-sub {
  margin-top: 0;
  font-size: 12px;
  color: var(--ink);
}

/* ── Per-group HEADER (Group Header Styling Guide) ──────────────────────
   Two shapes share a base. Compact (single row, used by Replenishment by
   MOQ Group / "by Subtitle"). Stacked (.product-head, used by Replen by
   Product) layers a two-row .ghdr-main on top.
   Hard-white bg distinguishes the header from the MOQ status bar (off-
   white) and the table head (--surface-alt). */
.group-head {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  flex-wrap: wrap;
}
.group-head .gtitle {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.group-head .gtitle-link {
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: all 0.15s;
}
.group-head .gtitle-link:hover {
  color: var(--blue, #2563eb);
  text-decoration-color: var(--blue, #2563eb);
}
.group-head .gcount {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.group-head .gvendor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}
.group-head .gvendor svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.group-head .ghdr-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Stacked variant — used on by_product (product cards). */
.group-head.product-head {
  padding: 16px 20px;
  align-items: flex-start;
}
.group-head.product-head .ghdr-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.group-head.product-head .ghdr-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.group-head.product-head .ghdr-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}

/* Inline meta flow: bold values + dot separators.
   <b> tag inside .meta-item bumps to ink; the wrapper carries the muted
   label color so the cadence reads "**bold value** label · ..." */
.ghdr-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.ghdr-meta .meta-item b {
  color: var(--ink);
  font-weight: 700;
}
.ghdr-meta .meta-sep,
.ghdr-row2 .meta-sep {
  color: var(--light, #b0aead);
  font-weight: 400;
}

/* Badge taxonomy — three pills, three meanings. Don't invent a fourth. */
/* Descriptive: surface-alt fill, neutral. Reused by SKU rows as .ptype-mini.
   Base spec for the header lives here; .ptype-mini overrides the radius. */
.ptype-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* Temporal: indigo. Reserved for time-bounded data (seasons, dates). */
.season-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  white-space: nowrap;
}
.season-chip svg {
  flex-shrink: 0;
}

/* Hierarchical: violet, square. The square shape distinguishes it from
   the rounded badges in row 1. */
.subtitle-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f3e8ff;
  color: #6b21a8;
  white-space: nowrap;
}

/* Inline secondary action — convention: 11px blue underlined, brackets
   are part of the link text. */
.view-link-sm {
  font-size: 11px;
  color: var(--blue, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.view-link-sm:hover {
  filter: brightness(0.9);
}

/* AI Review button — quiet idle, gradient when reviewed. */
.ai-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--purple, #7c3aed);
  border: 1px solid #ddd6fe;
  cursor: pointer;
  transition: all 0.15s;
}
.ai-review-btn:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
}
.ai-review-btn:disabled {
  opacity: 0.7;
  cursor: progress;
}
.ai-review-btn.reviewed {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  border-color: transparent;
}
.ai-review-btn.reviewed:hover {
  filter: brightness(1.05);
}

/* CSV button — quietest button on the page. */
.csv-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.csv-btn:hover {
  color: var(--ink);
  border-color: var(--border-hover, #d8d6d1);
}

/* ── Per-group footer (Group Footer Styling Guide) ──────────────────────
   One row, one label, one number. Right-aligned so the orange total sits
   directly under the Suggested Order column. Override-aware via the
   group_foot Stimulus controller. */
.group-foot {
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  background: var(--surface-alt);
  border-top: 1px solid var(--border-light, #f0eeea);
}
.group-foot .total-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.group-foot .total-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}
.prod-variant-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.prod-variant-sub .sep {
  color: var(--border-hover, #d8d6d1);
}

/* ── Cell 4 — Product type badge (mini) ─────────────────────────────── */
.ptype-badge.ptype-mini {
  display: inline-block;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: #555;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

/* ── Cell 5 — ABC pill ──────────────────────────────────────────────── */
.abc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--surface-alt);
  color: #555;
  border: 1px solid var(--border);
  letter-spacing: .3px;
}

/* ── Cell 6 — demand availability sub-text ──────────────────────────── */
.demand-avail {
  color: var(--muted);
  font-weight: 500;
  margin-left: 5px;
  font-size: 11px;
}

/* ── Cell 10 — MOQ group link (Mode B only) ─────────────────────────── */
.moq-group-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  max-width: 180px;
  overflow: hidden;
  transition: all .15s;
}
.moq-group-link .moq-group-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moq-group-link:hover {
  background: #ece9e3;
  border-color: var(--border-hover, #d8d6d1);
  color: var(--blue, #2563eb);
}
.moq-group-link:hover svg {
  color: var(--blue, #2563eb);
}

/* ── Cell 11 — Suggested order ──────────────────────────────────────── */
.sug-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sug-cell .sug-num {
  color: var(--accent);
  font-size: 13px;
}
.sug-cell .sug-num-zero {
  color: var(--light, #b0aead);
  font-size: 13px;
  font-weight: 500;
}
.sug-cell .sug-num-clickable {
  cursor: pointer;
}
.sug-cell .sug-moq-of {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  margin-right: 1px;
}
.sug-cell .sug-moq-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 2px;
  color: #b91c1c;
}
.sug-cell .sug-moq-flag svg {
  stroke-width: 2.5;
}

/* Override variant — column layout with "was N" tucked underneath. */
.sug-cell.sug-cell-overridden {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1.15;
}
.sug-cell .sug-num-override {
  color: #b45309;
  font-size: 13px;
  font-weight: 800;
  position: relative;
}
.sug-cell .sug-num-was {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: .2px;
}

/* ── Cell 12 — Edit cell (pencil + revert) ──────────────────────────── */
.row-edit-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.row-edit-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
  flex-shrink: 0;
  position: relative;
  padding: 0;
}
.row-edit-btn:hover:not(:disabled) {
  background: #fff;
  color: var(--accent);
  border-color: var(--accent);
}
.row-edit-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.row-edit-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.row-edit-btn.is-overridden {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}
.row-edit-btn.is-overridden:hover:not(:disabled) {
  background: #fde68a;
}
.row-edit-btn.is-ai-source {
  background: #f3e8ff;
  color: #7e22ce;
  border-color: #d8b4fe;
}
.row-edit-btn.is-ai-source:hover:not(:disabled) {
  background: #e9d5ff;
}
.row-edit-btn.is-ai-source .row-edit-dot {
  background: #a855f7;
}
.row-edit-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d97706;
  border: 1.5px solid #fff;
}
.row-revert-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 100ms, color 100ms;
  flex-shrink: 0;
  padding: 0;
}
.row-revert-btn:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* ── AI cell (per AI Result Row Styling Guide) ──────────────────────── */
.ai-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  border: none;
  font-family: inherit;
}
.ai-cell.ai-agree {
  background: transparent;
  color: #15803d;
  padding: 2px;
  border-radius: 50%;
}
.ai-cell.ai-agree:hover {
  background: #dcfce7;
  transform: none;
}
.ai-cell.ai-agree svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
.ai-cell.ai-higher {
  background: #fef3c7;
  color: #b45309;
  font-variant-numeric: tabular-nums;
}
.ai-cell.ai-higher:hover {
  transform: translateY(-1px);
}
.ai-cell.ai-higher svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.4;
}
.ai-cell.ai-lower {
  background: #dbeafe;
  color: #1d4ed8;
  font-variant-numeric: tabular-nums;
}
.ai-cell.ai-lower:hover {
  transform: translateY(-1px);
}
.ai-cell.ai-lower svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.4;
}
.ai-cell-none {
  color: var(--light, #b0aead);
  font-size: 11px;
}
.ai-row-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--light, #b0aead);
  cursor: pointer;
  padding: 0;
  transition: all 120ms;
  font-family: inherit;
}
.ai-row-trigger:hover {
  background: #f5f3ff;
  color: #6d28d9;
  border-color: #ddd6fe;
}
.ai-row-trigger:disabled {
  cursor: default;
  opacity: .85;
}
.ai-row-trigger svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}
.ai-row-trigger.analyzing {
  color: #6d28d9;
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.ai-row-trigger.analyzing svg {
  animation: ai-row-spin 0.9s linear infinite;
}
@keyframes ai-row-spin {
  to { transform: rotate(360deg); }
}
.ai-cell.ai-row-just-analyzed {
  animation: ai-cell-slide 220ms ease-out;
}
@keyframes ai-cell-slide {
  from { opacity: 0; transform: translateY(-3px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

/* ──────── §10. Help modal (replenishment_help) ────────
   Replicates the auction-command-center modal styles (acc-modal-*) so the
   shared `_help_modal.html.erb` partial works on replenishment pages where
   auction_command_center.css isn't loaded. Same visual treatment, same DOM
   contract — only the stylesheet origin differs. */
.acc-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: replenHelpFade 0.15s ease-out;
}
.acc-modal-backdrop[hidden] { display: none !important; }
.acc-modal {
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-width: 90vw; max-height: 85vh;
  display: flex; flex-direction: column;
  animation: replenHelpIn 0.2s ease-out;
}
.acc-modal-lg { width: 760px; }
.acc-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.acc-modal-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
}
.acc-modal-body {
  padding: 20px; overflow-y: auto; flex: 1;
  font-size: 13px; line-height: 1.55; color: var(--ink);
}
.acc-modal-body p { margin: 0 0 10px; }
.acc-icon-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--muted);
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.acc-icon-btn:hover { background: var(--surface-alt); color: var(--ink); }

.acc-help-body h4.acc-help-h {
  margin: 22px 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--border-light, #f0eeea);
  padding-top: 16px;
}
.acc-help-body h4.acc-help-h:first-child {
  margin-top: 8px;
  border-top: none;
  padding-top: 0;
}
.acc-help-list { margin: 0 0 12px 20px; padding: 0; }
.acc-help-list li { margin: 5px 0; }
.acc-help-body kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--ink);
  white-space: nowrap;
}
.acc-help-body strong { font-weight: 700; color: var(--ink); }
.acc-help-body em { color: var(--muted); }
.acc-help-body .skv-text-muted-sm {
  font-size: 12px;
  color: var(--muted);
  margin: -4px 0 12px;
}

.replen-help-modal { width: 760px; }
.replen-help-intro {
  background: var(--surface-alt);
  padding: 12px 14px;
  border-radius: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--ink);
}
.replen-help-footer {
  margin-top: 24px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* Help-trigger button in the page header — matches the existing Export CSV
   link styling but with a left-side question-mark icon. */
.replen-help-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--blue);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
.replen-help-link::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--blue);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

@keyframes replenHelpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes replenHelpIn   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }