/* outOfStock.css — Neo Out of Stock panel.
   Matches the project's "Aggregator Stock In / Out" panel pattern:
   • Indigo/violet gradient header with white text
   • Gray rounded pill-tabs container
   • Pale green table rows + lavender table header
   • Bold "ITEM" / "MOD" type prefix column
   • Numbered pagination + prominent Next CTA in the footer
   All local `--neo-*` vars compose values; rw-* CSS vars are still used where
   they map cleanly (radii, spacing patterns, neutral text colors). */

.neo-oos {
  /* Palette (reference: project Aggregator Stock In/Out panel) */
  --neo-header-start: #5E72E4;
  --neo-header-end:   #5566D6;
  --neo-header-text:  #ffffff;
  --neo-header-soft:  rgba(255, 255, 255, 0.15);
  --neo-header-softer:rgba(255, 255, 255, 0.10);
  --neo-pill-bg:      #F5F7FA;
  --neo-pill-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --neo-row-bg:       #EFF7E5;
  --neo-row-hover:    #E5F1D5;
  --neo-row-selected: #DDEDFB;
  --neo-thead-bg:     #F5F6FA;
  --neo-thead-text:   #8B92AE;
  --neo-divider:      rgba(0, 0, 0, 0.06);
  --neo-warn-text:    #B07814;
  --neo-radius:       8px;
  --neo-radius-sm:    6px;
  --neo-radius-lg:    12px;
  --neo-radius-pill:  999px;
  --neo-ring:         0 0 0 3px rgba(94, 114, 228, 0.18);
  --neo-shadow-md:    0 1px 4px rgba(15, 23, 42, 0.08);
  --neo-shadow-lg:    0 8px 24px rgba(15, 23, 42, 0.12);
}

/* ════════════════════════ modal corner cleanup + size cap ════════════════════════
   The ui-bootstrap modal stack is:
     .modal (overlay) > .modal-dialog > .modal-content > .rw-modal
   `.modal-content` has its own border-radius + a white background and was
   leaking white wedges at the gradient header's rounded corners. The open
   call wires `windowClass: 'neo-oos-modal-window'` onto `.modal` so we can
   clip `.modal-content` here without touching any other modal in the app.
   We also cap the modal to 90vh — header stays pinned, body scrolls. */
.neo-oos-modal-window .modal-content {
  overflow: hidden !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.10) !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
}
.neo-oos-modal-window .modal-body,
.neo-oos-modal-window .modal-header,
.neo-oos-modal-window .modal-footer {
  padding: 0 !important;
  border: 0 !important;
}
.neo-oos-modal-window .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.rw-modal.neo-oos {
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
/* Header and footer stay pinned; the middle body scrolls. */
.rw-modal.neo-oos > .rw-modal-header.neo-head { flex: 0 0 auto; }
.rw-modal.neo-oos > .rw-modal-footer.neo-foot { flex: 0 0 auto; }
.rw-modal.neo-oos > .rw-modal-body.neo-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ════════════════════════ OOS header chips (right cluster) ════════════════════════
   White translucent chips for brand name + items count. Mirrors the
   agg-status header chip pattern but with subtly different content (the
   OOS panel has no per-status rollup, so we surface brand + count). */
.neo-head-actions.neo-oos-head-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.neo-oos-head-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  font-variant-numeric: tabular-nums;
}
.neo-oos-head-chip i {
  font-size: 11px;
  opacity: 0.85;
}
.neo-oos-head-chip strong {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}
.neo-oos-head-chip span {
  color: rgba(255, 255, 255, 0.92);
}
.neo-oos-head-chip.is-count {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.30);
}
@media (max-width: 1024px) {
  .neo-oos-head-chip { padding: 4px 9px; font-size: 11.5px; }
  .neo-oos-head-chip strong { font-size: 12px; }
}
@media (max-width: 720px) {
  /* hide the wordy bits, keep counts + icons so the chips remain useful */
  .neo-oos-head-chip span { display: none; }
  .neo-oos-head-chip.is-count span { display: inline; }
}

/* Force-white header text — overrides `.rw-modal-header h3` in theme.css
   which would otherwise paint the title dark against the gradient. */
.neo-oos .rw-modal-header.neo-head .neo-head-title,
.neo-oos .neo-head .neo-head-title,
.neo-oos .rw-modal-header.neo-head h3,
.neo-oos .neo-head h3 {
  color: #ffffff !important;
}
.neo-oos .rw-modal-header.neo-head .neo-head-sub,
.neo-oos .neo-head .neo-head-sub {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ════════════════════════ modal head (indigo gradient) ════════════════════════
   Compound selectors (`.rw-modal-header.neo-head`) bump specificity over the
   project-wide `.rw-modal-header` rules in theme.css so the gradient lands.
   `!important` on background only — that one property is load-bearing for the
   panel's brand identity. */
.neo-oos .rw-modal-header.neo-head,
.neo-oos .neo-head {
  background: linear-gradient(135deg, var(--neo-header-start) 0%, var(--neo-header-end) 100%) !important;
  color: var(--neo-header-text);
  padding: 12px 20px;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: var(--neo-radius-lg) var(--neo-radius-lg) 0 0;
  display: flex;
  align-items: center;
  /* Override enterprise.css's `.rw-modal-header { justify-content: space-between }`.
     With space-between, hiding the right chip-cluster during boot leaves
     icon + title as the only 2 children — and the title gets pushed to the
     far right of the bar. Pin flex-start so the title always hugs the icon
     on the left; the chip cluster's own margin-left:auto pushes it right
     when it does render. */
  justify-content: flex-start !important;
  gap: 14px;
  margin: 0;
  min-height: auto;
}
.neo-oos .rw-modal-header.neo-head h3,
.neo-oos .neo-head h3 { margin: 0; }
.neo-head-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10));
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.neo-head-titlewrap { display: flex; flex-direction: column; gap: 2px; }
.neo-head-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.neo-head-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}

.neo-head-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.neo-head-action {
  background: var(--neo-header-soft);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--neo-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.neo-head-action:hover { background: rgba(255, 255, 255, 0.25); }
.neo-head-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30);
}
.neo-head-action i { font-size: 11px; }

.neo-head-close {
  border: 0;
  background: transparent;
  width: 30px;
  height: 30px;
  border-radius: var(--neo-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-size: 14px;
}
.neo-head-close:hover {
  background: var(--neo-header-soft);
  color: #fff;
}
.neo-head-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30);
}

/* ════════════════════════ modal body ════════════════════════ */
.neo-oos .rw-modal-body.neo-body,
.neo-oos .neo-body {
  padding: 12px 20px 8px;
  min-height: 420px;
  background: #fff;
}

/* ════════════════════════ boot loader (skeleton cards) ════════════════════════
   Mirror of the agg-status skeleton — three placeholder cards matching
   the eventual content silhouette + an indigo ring spinner beside a
   "Loading…" label. Scoped to `.neo-oos` so it can't collide with the
   agg-status `.neo-as`-scoped version. */
.neo-oos .neo-oos-loader {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0 4px;
}
.neo-oos .neo-oos-skel-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid var(--rw-border);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
/* Card surface stays static. Shimmer lives ONLY on the inner placeholder
   pieces (avatar / lines / pill / toggle) so the loader reads as
   "content arriving piece-by-piece" rather than a header flashing. */
.neo-oos .neo-oos-skel-avatar,
.neo-oos .neo-oos-skel-line,
.neo-oos .neo-oos-skel-pill,
.neo-oos .neo-oos-skel-toggle {
  background: linear-gradient(
    100deg,
    #E4E8F1 0%,
    #E4E8F1 30%,
    rgba(94, 114, 228, 0.22) 50%,
    #E4E8F1 70%,
    #E4E8F1 100%
  );
  background-size: 220% 100%;
  animation: neo-oos-skel-bg 1.3s linear infinite;
}
.neo-oos .neo-oos-skel-card:nth-child(2) .neo-oos-skel-avatar,
.neo-oos .neo-oos-skel-card:nth-child(2) .neo-oos-skel-line,
.neo-oos .neo-oos-skel-card:nth-child(2) .neo-oos-skel-pill,
.neo-oos .neo-oos-skel-card:nth-child(2) .neo-oos-skel-toggle { animation-delay: 0.12s; }
.neo-oos .neo-oos-skel-card:nth-child(3) .neo-oos-skel-avatar,
.neo-oos .neo-oos-skel-card:nth-child(3) .neo-oos-skel-line,
.neo-oos .neo-oos-skel-card:nth-child(3) .neo-oos-skel-pill,
.neo-oos .neo-oos-skel-card:nth-child(3) .neo-oos-skel-toggle { animation-delay: 0.24s; }
.neo-oos .neo-oos-skel-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.neo-oos .neo-oos-skel-id {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.neo-oos .neo-oos-skel-line { height: 11px; border-radius: 4px; }
.neo-oos .neo-oos-skel-line-name { width: 38%; }
.neo-oos .neo-oos-skel-line-meta { width: 24%; height: 9px; }
.neo-oos .neo-oos-skel-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.neo-oos .neo-oos-skel-pill { width: 70px; height: 22px; border-radius: 999px; }
.neo-oos .neo-oos-skel-toggle { width: 60px; height: 32px; border-radius: 999px; }

.neo-oos .neo-oos-loader-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 4px;
  font-size: 13px;
  color: var(--rw-text-light);
  letter-spacing: 0.01em;
}
.neo-oos .neo-oos-loader-spinner {
  display: inline-flex;
  color: var(--neo-header-start);
  animation: neo-oos-loader-spin 0.9s linear infinite;
}
@keyframes neo-oos-skel-bg {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes neo-oos-loader-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .neo-oos .neo-oos-skel-card::after,
  .neo-oos .neo-oos-skel-avatar,
  .neo-oos .neo-oos-skel-line,
  .neo-oos .neo-oos-skel-pill,
  .neo-oos .neo-oos-skel-toggle,
  .neo-oos .neo-oos-loader-spinner { animation: none; }
}
@media (max-width: 720px) {
  .neo-oos .neo-oos-skel-card { padding: 14px 16px; gap: 12px; }
  .neo-oos .neo-oos-skel-pill { display: none; }
}

/* ════════════════════════ inline table skeleton ════════════════════════
   Used inside the items table during reload (page change, search, filter
   change). Uses the SAME bright indigo shimmer as the boot loader so the
   inline state reads unambiguously as "loading" rather than "empty rows".
   The container has no border — it sits inside `.neo-table-wrap`. */
.neo-boot { padding: 8px 0; }
.neo-skeleton-table {
  border: 1px solid var(--rw-border);
  border-radius: var(--neo-radius);
  overflow: hidden;
  background: #ffffff;
}
.neo-skeleton-table.neo-sk-inline { margin: 0; }
.neo-sk-row {
  height: 56px;
  background: linear-gradient(
    100deg,
    #E4E8F1 0%,
    #E4E8F1 30%,
    rgba(94, 114, 228, 0.22) 50%,
    #E4E8F1 70%,
    #E4E8F1 100%
  );
  background-size: 220% 100%;
  animation: neo-shimmer 1.3s linear infinite;
  border-bottom: 1px solid var(--neo-divider);
}
.neo-sk-row:last-child { border-bottom: 0; }
.neo-sk-row:nth-child(2) { animation-delay: 0.12s; }
.neo-sk-row:nth-child(3) { animation-delay: 0.24s; }
.neo-sk-row:nth-child(4) { animation-delay: 0.36s; }
.neo-sk-row:nth-child(5) { animation-delay: 0.48s; }
.neo-boot-text {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--rw-text-light);
}
.neo-boot-text i { margin-right: 6px; }
@keyframes neo-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) { .neo-sk-row { animation: none; } }

/* ════════════════════════ empty / error states ════════════════════════ */
.neo-empty {
  text-align: center;
  padding: 48px 24px;
  max-width: 480px;
  margin: 0 auto;
}
.neo-empty-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--neo-pill-bg);
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--neo-header-start);
  margin-bottom: 16px;
}
.neo-empty-error .neo-empty-icon {
  background: rgba(231, 76, 60, 0.10);
  color: var(--rw-coral, #E74C3C);
}
.neo-empty-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rw-text, #2C3E50);
}
.neo-empty-sub { margin: 0; font-size: 13px; color: var(--rw-text-light); }
.neo-empty .neo-btn { margin-top: 20px; }

.neo-brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
}
.neo-brand-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--rw-white, #fff);
  border: 1px solid var(--rw-border);
  border-radius: var(--neo-radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--rw-text, #2C3E50);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.neo-brand-card:hover {
  border-color: var(--neo-header-start);
  transform: translateY(-1px);
  box-shadow: var(--neo-shadow-md);
}
.neo-brand-card > i:first-child {
  color: var(--rw-text-light);
  font-size: 14px;
}
.neo-brand-card .neo-brand-arrow {
  margin-left: auto;
  color: var(--rw-text-light);
  font-size: 11px;
}

/* ════════════════════════ pill tabs (gray container) ════════════════════════ */
.neo-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--neo-pill-bg);
  border-radius: var(--neo-radius);
  border-bottom: 0;
  margin-bottom: 20px;
}
.neo-tab {
  background: transparent;
  border: 0;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
  border-radius: var(--neo-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s, color 0.12s;
  margin: 0;
}
.neo-tab:hover { color: var(--rw-text, #2C3E50); }
.neo-tab.is-active {
  background: #fff;
  color: var(--neo-header-start);
  font-weight: 600;
  box-shadow: var(--neo-pill-active-shadow);
}
.neo-tab:focus-visible {
  outline: none;
  box-shadow: var(--neo-ring);
}
.neo-tab-badge {
  background: var(--neo-header-start);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  border-radius: var(--neo-radius-pill);
  line-height: 14px;
  font-variant-numeric: tabular-nums;
}
.neo-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rw-yellow, #E5A929);
  box-shadow: 0 0 0 3px rgba(229, 169, 41, 0.18);
  animation: neo-pulse 1.6s ease-in-out infinite;
}
@keyframes neo-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) { .neo-tab-dot { animation: none; } }

/* ════════════════════════ step pills (compact, replaces stepper cards) ════════════════════════ */
.neo-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.neo-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rw-text-light);
  background: transparent;
  border: 0;
  cursor: default;
  user-select: none;
  position: relative;
  transition: color 0.12s;
}
.neo-step + .neo-step::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--rw-border);
  margin: 0 4px 0 -4px;
}
.neo-step.is-done { cursor: pointer; }
.neo-step.is-active { color: var(--neo-header-start); font-weight: 600; }
.neo-step.is-done   { color: var(--rw-green, #22c55e); }
.neo-step:focus-visible { outline: none; box-shadow: var(--neo-ring); border-radius: var(--neo-radius-sm); }

.neo-step-bullet {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--neo-pill-bg);
  color: var(--rw-text-light);
  border: 1px solid var(--rw-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.neo-step.is-active .neo-step-bullet {
  background: var(--neo-header-start);
  color: #fff;
  border-color: transparent;
}
.neo-step.is-done .neo-step-bullet {
  background: var(--rw-green, #22c55e);
  color: #fff;
  border-color: transparent;
}
.neo-step.is-done .neo-step-num { display: none; }
.neo-step .neo-step-check { display: none; font-size: 10px; }
.neo-step.is-done .neo-step-check { display: block; }
.neo-step-label { font-weight: 600; }
.neo-step-meta {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rw-text-light);
  background: var(--neo-pill-bg);
  padding: 1px 7px;
  border-radius: var(--neo-radius-sm);
}

/* ════════════════════════ filters ════════════════════════ */
.neo-filters {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.neo-search { position: relative; grid-column: 2; }
.neo-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--rw-text-light);
  pointer-events: none;
}
.neo-search input {
  padding-left: 38px;
  padding-right: 42px;
}
.neo-search-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--rw-text-light);
  background: var(--neo-pill-bg);
  border: 1px solid var(--rw-border);
  border-radius: var(--neo-radius-sm);
  padding: 1px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.neo-input {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--rw-border);
  border-radius: var(--neo-radius);
  background: var(--rw-white, #fff);
  color: var(--rw-text, #2C3E50);
  /* Themes native form-control affordances (time-picker dropdown highlight, etc.) to Neo indigo instead of browser blue. */
  accent-color: var(--neo-header-start);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.neo-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  filter: invert(45%) sepia(48%) saturate(2078%) hue-rotate(213deg) brightness(91%) contrast(89%);
  transition: opacity 0.15s ease;
}
.neo-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.neo-input:focus,
.neo-input:focus-visible {
  outline: none;
  border-color: var(--neo-header-start);
  box-shadow: var(--neo-ring);
}
.neo-input::placeholder { color: #B0B7C3; }
.neo-select {
  appearance: none;
  padding-right: 32px;
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F8C8D' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.neo-textarea { resize: vertical; min-height: 64px; }

/* "Filter by Aggregator" secondary row */
.neo-secondary-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 16px;
}
.neo-secondary-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--rw-text, #2C3E50);
  white-space: nowrap;
}
.neo-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: 1;
}
.neo-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--rw-border);
  border-radius: var(--neo-radius-pill);
  background: #fff;
  color: var(--rw-text, #2C3E50);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.neo-quick-chip .neo-dot { width: 5px; height: 5px; }
.neo-quick-chip:hover { border-color: var(--rw-text-light); }
.neo-quick-chip.is-active {
  background: rgba(94, 114, 228, 0.08);
  border-color: var(--neo-header-start);
  color: var(--neo-header-start);
  font-weight: 600;
}
.neo-quick-chip-ghost { border-color: transparent; color: var(--rw-text-light); }
.neo-quick-chip-ghost:hover { color: var(--rw-text, #2C3E50); border-color: var(--rw-border); }

/* ════════════════════════ status dots ════════════════════════ */
.neo-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rw-text-light);
  flex-shrink: 0;
}
.neo-dot-success { background: var(--rw-green, #22c55e); }
.neo-dot-warn    { background: var(--rw-yellow, #E5A929); }
.neo-dot-danger  { background: var(--rw-coral, #E74C3C); }
.neo-dot-muted   { background: var(--rw-text-light); }

/* ════════════════════════ table — reference match ════════════════════════ */
.neo-table-wrap {
  border: 1px solid var(--rw-border);
  border-radius: var(--neo-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.neo-table {
  width: 100%;
  border-collapse: collapse;
}
.neo-th {
  font-size: 11px;
  font-weight: 700;
  color: var(--neo-thead-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--neo-thead-bg);
  padding: 7px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rw-border);
  white-space: nowrap;
}
.neo-th-type   { width: 90px; }
.neo-th-name   { min-width: 280px; }
.neo-th-chips  { width: auto; min-width: 240px; }
.neo-th-action { width: 50px; padding: 0; }
.neo-th-select { width: 56px; text-align: center; padding-right: 16px; }

.neo-td {
  padding: 8px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--neo-divider);
  vertical-align: middle;
  color: var(--rw-text, #2C3E50);
  line-height: 1.35;
  background: var(--neo-row-bg);
}
.neo-td-muted { color: var(--rw-text-light); font-size: 12px; }
.neo-td-select { text-align: center; padding-right: 16px; }
.neo-td-action { text-align: right; width: 50px; padding: 0 4px; }
.neo-td-type {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.neo-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--neo-radius-sm);
  background: rgba(94, 114, 228, 0.10);
  color: var(--neo-header-start);
  border: 1px solid rgba(94, 114, 228, 0.18);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.neo-type-pill.is-mod {
  background: rgba(127, 140, 141, 0.10);
  color: #5A6772;
  border-color: rgba(127, 140, 141, 0.22);
}
.neo-type-pill.is-addon {
  background: rgba(229, 169, 41, 0.12);
  color: var(--neo-warn-text);
  border-color: rgba(229, 169, 41, 0.25);
}

/* ─────────── row tint by OOS state (at-a-glance health scan) ───────────
   Designed for "professional enterprise dashboard" reading:
     in-stock     near-white neutral — restful baseline, no action needed
     partial-oos  faint amber  (#FFFBEB) — attention without alarm
     full-oos     faint rose   (#FEF2F2) — clear "stop", not a banner
   The LEFT EDGE STRIPE is the primary signal (amber for partial, rose
   for full); the fill is a subtle echo. Tints stay light enough that the
   chip pills inside (red/amber/blue) keep their contrast and pop. */
.neo-row { transition: background 0.12s ease-out; position: relative; cursor: pointer; }
.neo-row > .neo-td {
  background: #FAFAFB;             /* default = in stock */
  transition: background 0.12s ease-out;
}
.neo-row.is-in-stock    > .neo-td { background: #FAFAFB; }
.neo-row.is-partial-oos > .neo-td { background: #FFFBEB; }
.neo-row.is-full-oos    > .neo-td { background: #FEF2F2; }

/* hover layer: nudge each tint one step darker so the cursor target stays
   obvious without burning through the state colour */
.neo-row.is-in-stock:hover    > .neo-td { background: #F1F2F4; }
.neo-row.is-partial-oos:hover > .neo-td { background: #FEF3C7; }
.neo-row.is-full-oos:hover    > .neo-td { background: #FEE2E2; }

/* Leading state stripe — 3px column on the first cell that carries the
   status colour. Selected / focus / quick-open all override with the
   indigo accent for the active interaction. */
.neo-row > .neo-td:first-child {
  box-shadow: inset 3px 0 0 transparent;
  transition: box-shadow 0.12s ease-out;
}
.neo-row.is-partial-oos > .neo-td:first-child { box-shadow: inset 3px 0 0 #F59E0B; }
.neo-row.is-full-oos    > .neo-td:first-child { box-shadow: inset 3px 0 0 #DC2626; }

/* selected / focus / quick-mark — indigo accent overrides the state stripe */
.neo-row.is-selected > .neo-td {
  background: rgba(94, 114, 228, 0.08);
}
.neo-row.is-selected > .neo-td:first-child { box-shadow: inset 3px 0 0 var(--neo-header-start); }
.neo-row.has-quick-open > .neo-td {
  background: rgba(94, 114, 228, 0.08);
  border-bottom-color: transparent;
}
.neo-row.has-quick-open > .neo-td:first-child { box-shadow: inset 3px 0 0 var(--neo-header-start); }
.neo-row:focus-visible > .neo-td:first-child { box-shadow: inset 3px 0 0 var(--neo-header-start); }
.neo-row:focus-visible { outline: none; }
.neo-row:last-of-type > .neo-td { border-bottom: 0; }

/* enriched item-name cell — thumbnail · name (base paren) · category /
   menu list / pos ref meta line. Single flex row keeps everything baseline
   aligned; .neo-item-text wraps the right column. */
.neo-item-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.neo-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.neo-item-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(94, 114, 228, 0.10), rgba(94, 114, 228, 0.04));
  border: 1px solid rgba(94, 114, 228, 0.20);
  color: var(--neo-header-start);
  font-size: 16px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.neo-item-thumb.has-img {
  background: #ffffff;
  border-color: var(--rw-border);
  box-shadow: none;
}
.neo-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.neo-item-name {
  font-weight: 500;
  font-size: 13px;
  color: var(--rw-text, #2C3E50);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}
.neo-item-name .neo-item-paren {
  color: var(--rw-text-light);
  font-weight: 400;
  margin-left: 4px;
}
.neo-item-meta {
  font-size: 11.5px;
  color: var(--rw-text-light);
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.neo-item-cat {
  font-weight: 500;
  color: var(--rw-text, #2C3E50);
  opacity: 0.78;
}
.neo-item-menus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 320px;
  min-width: 0;
}
.neo-item-menu-icon {
  font-size: 10px;
  opacity: 0.6;
  flex-shrink: 0;
}
.neo-item-menu-list {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.neo-meta-sep { color: var(--rw-border); }
.neo-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--rw-text-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* per-channel chips inside rows */
.neo-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}
/* Base chip — NEUTRAL slate. The variant classes below carry the real
   palette via !important so external/cascade rules can't bleed them
   back to grey (the chip styles were being overridden by something
   higher in the cascade — !important here pins the semantic colour). */
.neo-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--neo-radius-sm);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  background: #EEF1F6;
  color: var(--rw-text-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.neo-chip .neo-dot { width: 5px; height: 5px; background: var(--rw-text-light); }

/* Variants — pinned with max specificity (.neo-oos prefix + double-class)
   AND !important so neither cascade order nor external stylesheets can
   bleed the chip back to the neutral base. Light shades per UX spec. */

/* Success / relayed — light green */
.neo-oos .neo-chip.neo-chip-success,
.neo-oos .rw-badge-yes.neo-chip,
.neo-chip.neo-chip-success,
.rw-badge-yes.neo-chip {
  background: #E6F8EC !important;
  color: #15803D !important;
}
.neo-oos .neo-chip.neo-chip-success .neo-dot,
.neo-chip.neo-chip-success .neo-dot,
.rw-badge-yes.neo-chip .neo-dot {
  background: #22C55E !important;
}

/* Skipped / warn — light yellow */
.neo-oos .neo-chip.neo-chip-warn,
.neo-oos .rw-badge-warn.neo-chip,
.neo-chip.neo-chip-warn,
.rw-badge-warn.neo-chip {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
.neo-oos .neo-chip.neo-chip-warn .neo-dot,
.neo-chip.neo-chip-warn .neo-dot,
.rw-badge-warn.neo-chip .neo-dot {
  background: #F59E0B !important;
}

/* Failed / danger — light red */
.neo-oos .neo-chip.neo-chip-danger,
.neo-oos .rw-badge-no.neo-chip,
.neo-chip.neo-chip-danger,
.rw-badge-no.neo-chip {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}
.neo-oos .neo-chip.neo-chip-danger .neo-dot,
.neo-chip.neo-chip-danger .neo-dot,
.rw-badge-no.neo-chip .neo-dot {
  background: #DC2626 !important;
}

/* Attribute-selector belt-and-suspenders — chips also carry
   `data-status="{{r.status}}"` on the markup, so we target by the raw
   status string directly. Independent of ng-class evaluation timing. */
.neo-chip[data-status="relayed"],
.neo-chip[data-status="success"] {
  background: #E6F8EC !important;
  color: #15803D !important;
}
.neo-chip[data-status="relayed"] .neo-dot,
.neo-chip[data-status="success"] .neo-dot {
  background: #22C55E !important;
}
.neo-chip[data-status="skipped"] {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
.neo-chip[data-status="skipped"] .neo-dot {
  background: #F59E0B !important;
}
.neo-chip[data-status="failed"] {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}
.neo-chip[data-status="failed"] .neo-dot {
  background: #DC2626 !important;
}
.neo-chip[data-status="pending"] {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}
.neo-chip[data-status="pending"] .neo-dot {
  background: #3B82F6 !important;
}
.neo-oos-dash {
  font-size: 14px;
  color: var(--rw-text-light);
  font-weight: 500;
}

/* row quick-action button (hover-only) */
.neo-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--neo-radius-sm);
  background: transparent;
  color: var(--neo-header-start);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  opacity: 0;
  white-space: nowrap;
}
.neo-row:hover .neo-row-action,
.neo-row:focus-within .neo-row-action,
.neo-row-action:focus-visible { opacity: 1; }
.neo-row-action i { font-size: 12px; color: var(--rw-yellow, #E5A929); }
.neo-row-action-label { display: none; }
.neo-row-action:hover {
  background: #fff;
  color: var(--neo-header-start);
  border-color: var(--rw-border);
  width: auto;
  padding: 0 12px;
  height: 32px;
}
.neo-row-action:hover .neo-row-action-label,
.neo-row-action:hover .neo-kbd { display: inline; }
.neo-row-action:focus-visible {
  outline: none;
  box-shadow: var(--neo-ring);
  background: #fff;
  border-color: var(--rw-border);
}

.neo-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--rw-text-light);
  background: var(--neo-pill-bg);
  border: 1px solid var(--rw-border);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 14px;
  display: none;
}
.neo-kbd-soft {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--rw-text-light);
  opacity: 0.8;
  margin-left: 4px;
}

/* checkbox cell (right side of row) */
.neo-check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #C4CAD6;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.1s;
  flex-shrink: 0;
}
.neo-check-wrap i {
  font-size: 11px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.08s;
}
.neo-check-wrap.is-checked {
  background: var(--neo-header-start);
  border-color: var(--neo-header-start);
}
.neo-check-wrap.is-checked i { opacity: 1; }
.neo-check-wrap:hover { border-color: var(--neo-header-start); }
.neo-check-wrap:focus-visible {
  outline: none;
  box-shadow: var(--neo-ring);
}

/* ════════════════════════ inline quick-mark sheet ════════════════════════ */
.neo-quick-row > td {
  padding: 0 !important;
  background: var(--neo-row-selected);
}
.neo-quick-sheet {
  position: relative;
  background: #fff;
  border: 1px solid var(--neo-header-start);
  border-radius: var(--neo-radius);
  margin: 8px 16px 14px;
  padding: 14px 16px 14px;
  box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.10);
}
.neo-quick-caret {
  position: absolute;
  top: -7px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--neo-header-start);
  border-top: 1px solid var(--neo-header-start);
  transform: rotate(45deg);
}
.neo-quick-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--rw-text, #2C3E50);
  margin-bottom: 12px;
  font-weight: 500;
}
.neo-quick-head i.fa-bolt { color: var(--rw-yellow, #E5A929); font-size: 13px; }
.neo-quick-head strong { font-weight: 600; }
.neo-quick-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  width: 24px;
  height: 24px;
  border-radius: var(--neo-radius-sm);
  color: var(--rw-text-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.neo-quick-close:hover { background: var(--neo-pill-bg); color: var(--rw-text, #2C3E50); }
.neo-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-bottom: 12px;
}
.neo-quick-field { display: flex; flex-direction: column; gap: 6px; }
.neo-quick-reason { grid-column: 1 / -1; }
.neo-quick-cond { grid-column: span 1; }
.neo-quick-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rw-text-light);
}
.neo-quick-helper {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--rw-text-light);
  opacity: 0.8;
  margin-left: 4px;
}

.neo-chan-toggles { display: flex; flex-wrap: wrap; gap: 4px; }
.neo-chan-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--rw-border);
  background: #fff;
  border-radius: var(--neo-radius-pill);
  color: var(--rw-text, #2C3E50);
  cursor: pointer;
  transition: all 0.12s;
}
.neo-chan-toggle:hover { border-color: var(--neo-header-start); }
.neo-chan-toggle.is-on {
  background: var(--neo-header-start);
  color: #fff;
  border-color: var(--neo-header-start);
}
.neo-chan-toggle:focus-visible { outline: none; box-shadow: var(--neo-ring); }
.neo-chan-toggle-logo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(94, 114, 228, 0.10);
  color: var(--neo-header-start);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.neo-chan-toggle.is-on .neo-chan-toggle-logo {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.neo-chan-toggle-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.neo-dur-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.neo-dur-pill {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid #E5E8ED;
  background: #FAFBFC;
  border-radius: var(--neo-radius-pill);
  color: var(--rw-text, #2C3E50);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  letter-spacing: 0;
}
.neo-dur-pill:hover {
  border-color: rgba(94, 114, 228, 0.42);
  background: #F4F6FA;
}
.neo-dur-pill.is-on {
  background: var(--neo-header-start);
  border-color: var(--neo-header-start);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(94, 114, 228, 0.25);
}
.neo-dur-pills-lg .neo-dur-pill { padding: 9px 18px; font-size: 13px; min-width: 52px; text-align: center; }
.neo-dur-pill:focus-visible { outline: none; box-shadow: var(--neo-ring); }

.neo-quick-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rw-border);
}
.neo-quick-spacer { flex: 1; }

/* ════════════════════════ section (step 2) ════════════════════════
   Clean, breathing layout. Each section is a flat card with a clear
   header band and generous internal padding so the channel switches and
   schedule pills don't crowd each other. Sections stack with a
   consistent 16px gap. */
.neo-section {
  background: #fff;
  border: 1px solid var(--rw-border);
  border-radius: 10px;
  padding: 18px 20px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.neo-section:last-child { margin-bottom: 0; }
.neo-section-title {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rw-text, #2C3E50);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.005em;
}
.neo-section-title i {
  color: var(--neo-header-start);
  font-size: 12px;
  opacity: 0.7;
}
.neo-section-sub-inline {
  font-weight: 400;
  color: var(--rw-text-light);
  font-size: 12px;
  letter-spacing: 0;
  margin-left: 4px;
}
.neo-section-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--rw-text-light);
}
.neo-section-sub strong { color: var(--rw-text, #2C3E50); }
.neo-section .neo-quick-label {
  margin: 18px 0 8px;
  display: block;
}
.neo-section .neo-quick-label:first-child { margin-top: 0; }

.neo-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
/* Selectable channel card — whole card is the click target, check-circle in the
   top-right signals "selected for this batch". Deliberately NOT a switch — the
   user is picking, not toggling the channel's live online/offline state. */
.neo-channel-pick-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: #FAFBFC;
  border: 1px solid #E5E8ED;
  border-radius: var(--neo-radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.neo-channel-pick-card:hover {
  background: #F4F6FA;
  border-color: rgba(94, 114, 228, 0.30);
}
.neo-channel-pick-card.is-selected {
  background: rgba(94, 114, 228, 0.04);
  border-color: rgba(94, 114, 228, 0.55);
  box-shadow: 0 0 0 1px rgba(94, 114, 228, 0.18);
}
.neo-channel-pick-card:focus-visible {
  outline: none;
  box-shadow: var(--neo-ring);
}
.neo-channel-pick-card .neo-channel-body { gap: 4px; flex: 1; min-width: 0; }
.neo-channel-pick-card .neo-channel-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.neo-channel-pick-card .neo-channel-state { font-size: 11px; }

/* Channel logo on switch cards — renders ch.logoUrl as a 32px circle;
   falls back to a theme-tinted initial chip when no logo is configured. */
.neo-channel-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(94, 114, 228, 0.10);
  border: 1px solid rgba(94, 114, 228, 0.18);
}
.neo-channel-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.neo-channel-logo-fallback {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--neo-header-start);
}

/* Section-head row — title + trailing meta widget (e.g. global toggle). */
.neo-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.neo-section-head .neo-section-title { margin: 0; }
/* Bulk select/clear — text-link affordance so it reads as an action, not a power switch. */
.neo-section-bulk-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--neo-radius-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--neo-header-start);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.neo-section-bulk-action:hover {
  background: rgba(94, 114, 228, 0.08);
  border-color: rgba(94, 114, 228, 0.18);
}
.neo-section-bulk-action:focus-visible {
  outline: none;
  box-shadow: var(--neo-ring);
}
.neo-section-bulk-action i { font-size: 12px; }

/* Step 2 bottom split — Action + Schedule side-by-side at 50/50 so the
   whole final step fits without scrolling. Collapses to a single column
   when the viewport gets narrow. */
.neo-step-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.neo-step-bottom .neo-step-bottom-col {
  margin-bottom: 0;
  min-width: 0;
  height: 100%;
}
@media (max-width: 900px) {
  .neo-step-bottom { grid-template-columns: 1fr; }
}

/* When the Action picker lives inside the 50%-wide column, stack its
   two cards vertically (In stock on top, Out of stock below) so each
   card keeps a readable width. */
.neo-action-picker-stack {
  grid-template-columns: 1fr;
}

/* ════════════════════════ action selector ════════════════════════
   In Stock / Out of Stock picker — two large radio-style cards.
   Replaces the dual Restock + Mark buttons that used to live in the
   footer. The selected card lights up in its semantic colour (emerald
   for in-stock, rose for out-of-stock); the footer's single Confirm
   CTA mirrors the same colour so the action choice reads as one
   continuous statement panel → button. */
.neo-action-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.neo-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #FAFBFC;
  border: 1.5px solid #E5E8ED;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.neo-action-card:hover {
  background: #F4F6FA;
  border-color: #CBD1DC;
}
.neo-action-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.20);
}
.neo-action-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #E5E8ED;
  color: #94A3B8;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.neo-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.neo-action-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--rw-text, #2C3E50);
  letter-spacing: -0.005em;
}
.neo-action-sub {
  font-size: 11.5px;
  color: var(--rw-text-light);
  line-height: 1.35;
}

/* selected — In stock (emerald accent) */
.neo-action-card-in.is-on {
  background: rgba(34, 197, 94, 0.06);
  border-color: #22C55E;
  box-shadow: 0 1px 3px rgba(34, 197, 94, 0.12);
}
.neo-action-card-in.is-on .neo-action-icon {
  background: #22C55E;
  border-color: #22C55E;
  color: #fff;
}
.neo-action-card-in.is-on .neo-action-title { color: #15803D; }

/* selected — Out of stock (rose accent) */
.neo-action-card-out.is-on {
  background: rgba(220, 38, 38, 0.05);
  border-color: #DC2626;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.12);
}
.neo-action-card-out.is-on .neo-action-icon {
  background: #DC2626;
  border-color: #DC2626;
  color: #fff;
}
.neo-action-card-out.is-on .neo-action-title { color: #B91C1C; }

@media (max-width: 720px) {
  .neo-action-picker { grid-template-columns: 1fr; }
}
.neo-channel-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--rw-border);
  border-radius: var(--neo-radius);
  background: #fff;
  cursor: pointer;
  transition: all 0.12s;
}
.neo-channel-card:hover { border-color: var(--rw-text-light); }
.neo-channel-card.is-on {
  border-color: var(--neo-header-start);
  background: rgba(94, 114, 228, 0.06);
}
.neo-channel-card input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* Pick-card selection badge — round, top-right, theme-fills when card is selected.
   Reads as a clear "selected" affordance, not a toggle. */
.neo-channel-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #C4CAD6;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.neo-channel-check i { font-size: 11px; color: #fff; opacity: 0; transition: opacity 0.12s ease; }
.neo-channel-card.is-on .neo-channel-check,
.neo-channel-pick-card.is-selected .neo-channel-check {
  background: var(--neo-header-start);
  border-color: var(--neo-header-start);
}
.neo-channel-pick-card.is-selected .neo-channel-check i { opacity: 1; }
.neo-channel-card.is-on .neo-channel-check i { opacity: 1; }
.neo-channel-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.neo-channel-name { font-size: 13px; font-weight: 500; color: var(--rw-text, #2C3E50); }
.neo-channel-state {
  font-size: 11px;
  color: var(--rw-text-light);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: capitalize;
}

/* Compact review strip — three small stat chips on one horizontal row.
   Replaces the original "big tile with 24px numerals" — same info, ~⅓
   the vertical real estate so the rest of the step fits without scroll. */
.neo-preview {
  background: #F7F8FB;
  border: 1px solid #E5E8ED;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.neo-preview-title { display: none; }
.neo-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.neo-preview-stat {
  background: #fff;
  border: 1px solid #E8EBF1;
  border-radius: 6px;
  padding: 6px 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.neo-preview-stat-accent {
  border-color: rgba(94, 114, 228, 0.32);
  background: rgba(94, 114, 228, 0.05);
}
.neo-preview-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--rw-text, #2C3E50);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.neo-preview-stat-accent .neo-preview-num { color: var(--neo-header-start); }
.neo-preview-label {
  font-size: 11px;
  color: var(--rw-text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0;
}
/* Conditional input panel — appears right under the active duration
   pill (Next day / Custom). Reads as an extension of the pill above,
   not a separate form region: indigo-tinted background, inline label
   + compact input on one row, focus ring matched to the theme. */
.neo-cond {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(94, 114, 228, 0.06);
  border: 1px solid rgba(94, 114, 228, 0.20);
  border-radius: 10px;
  max-width: 100%;
}
.neo-cond .neo-quick-label {
  margin: 0;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--neo-header-start);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.neo-cond .neo-quick-label::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--neo-header-start);
}
.neo-cond .neo-input {
  flex: 1;
  margin: 0;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rw-text, #2C3E50);
  background: #ffffff;
  border: 1px solid rgba(94, 114, 228, 0.32);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.neo-cond .neo-input:hover {
  border-color: rgba(94, 114, 228, 0.50);
}
.neo-cond .neo-input:focus {
  outline: none;
  border-color: var(--neo-header-start);
  box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.18);
}

@media (max-width: 720px) {
  .neo-cond { flex-direction: column; align-items: stretch; gap: 8px; }
  .neo-cond .neo-quick-label { font-size: 10.5px; }
}

/* ════════════════════════ inline messages (loading/error/empty) ════════════════════════ */
.neo-inline-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--neo-pill-bg);
  border-radius: var(--neo-radius);
  border: 1px dashed var(--rw-border);
}
.neo-inline-state > i {
  font-size: 22px;
  color: var(--neo-header-start);
  flex-shrink: 0;
}
.neo-inline-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.neo-inline-text strong { color: var(--rw-text, #2C3E50); font-size: 13px; font-weight: 600; }
.neo-inline-text span { color: var(--rw-text-light); font-size: 12.5px; }
.neo-inline-error { background: rgba(231, 76, 60, 0.04); border-color: rgba(231, 76, 60, 0.20); }
.neo-inline-error > i { color: var(--rw-coral, #E74C3C); }

/* ════════════════════════ pagination (numbered, reference-match) ════════════════════════ */
.neo-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 0 4px;
}
.neo-pager-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--rw-border);
  background: #fff;
  color: var(--rw-text, #2C3E50);
  border-radius: var(--neo-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  font-variant-numeric: tabular-nums;
}
.neo-pager-num {
  width: 36px;
  padding: 0;
}
.neo-pager-num.is-active {
  background: var(--neo-header-start);
  border-color: var(--neo-header-start);
  color: #fff;
  font-weight: 600;
}
.neo-pager-btn:hover:not(:disabled):not(.is-active) {
  border-color: var(--neo-header-start);
  color: var(--neo-header-start);
}
.neo-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.neo-pager-btn:focus-visible { outline: none; box-shadow: var(--neo-ring); }
.neo-pager-text {
  font-size: 12px;
  color: var(--rw-text-light);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}

/* ════════════════════════ step actions footer ════════════════════════ */
.neo-step-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rw-border);
}
.neo-selection {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  font-size: 13px;
  color: var(--rw-text-light);
}
.neo-sel-count strong { color: var(--rw-text, #2C3E50); font-weight: 600; }
.neo-sel-count.is-max strong { color: var(--rw-coral, #E74C3C); }
.neo-link {
  border: 0;
  background: transparent;
  color: var(--neo-header-start);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.neo-link:hover { text-decoration: underline; }
.neo-spacer { flex: 1; }

/* ════════════════════════ buttons ════════════════════════ */
.neo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--neo-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
  min-height: 38px;
}
.neo-btn i { font-size: 11px; }
.neo-btn:focus { outline: none; }
.neo-btn:focus-visible { outline: none; box-shadow: var(--neo-ring); }
.neo-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.neo-btn:disabled:hover { background: inherit; border-color: inherit; }

.neo-btn-primary {
  background: var(--neo-header-start);
  border-color: var(--neo-header-start);
  color: #fff;
}
.neo-btn-primary:hover:not(:disabled) { background: var(--neo-header-end); border-color: var(--neo-header-end); }

.neo-btn-secondary {
  background: #fff;
  border-color: var(--rw-border);
  color: var(--rw-text, #2C3E50);
}
.neo-btn-secondary:hover:not(:disabled) { border-color: var(--rw-text-light); }

.neo-btn-success {
  background: var(--rw-green, #22c55e);
  border-color: var(--rw-green, #22c55e);
  color: #fff;
}
.neo-btn-success:hover:not(:disabled) { filter: brightness(0.92); }

.neo-btn-danger {
  background: var(--rw-coral, #E74C3C);
  border-color: var(--rw-coral, #E74C3C);
  color: #fff;
}
.neo-btn-danger:hover:not(:disabled) { filter: brightness(0.92); }

/* Disabled-state overrides for semantic buttons in the modal footer.
   Without these, neo-btn-danger:disabled fades to ~55% opacity and
   blends into the white footer — looks like it "disappeared" instead of
   "disabled". Pin the fill colors so the action's identity (green
   restock, red mark-OOS) remains obvious in the disabled state. */
.neo-oos .neo-foot .neo-btn-success:disabled {
  background: var(--rw-green, #22C55E) !important;
  border-color: var(--rw-green, #22C55E) !important;
  color: #ffffff !important;
  opacity: 0.70 !important;
}
.neo-oos .neo-foot .neo-btn-danger:disabled {
  background: var(--rw-coral, #E74C3C) !important;
  border-color: var(--rw-coral, #E74C3C) !important;
  color: #ffffff !important;
  opacity: 0.70 !important;
}

/* ════════════════════════ activity (results) page ════════════════════════
   Reads as a clean status report card. Hero header carries the action
   name + request id + a single prominent status chip on the right.
   Overall progress is a tall, smooth bar with the summary chips inline.
   Per-channel rows are a 3-column grid (name · bar · count) with the
   bars vertically aligned across rows. */
.neo-act-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 0 0 16px;
  background: linear-gradient(180deg, #F8F9FC 0%, #F4F6FB 100%);
  border: 1px solid #E5E8ED;
  border-radius: 10px;
}
.neo-act-head-main { flex: 1; min-width: 0; }
.neo-act-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rw-text, #2C3E50);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.005em;
}
.neo-act-title i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--neo-header-start);
  background: rgba(94, 114, 228, 0.12);
  border: 1px solid rgba(94, 114, 228, 0.22);
}
.neo-act-meta {
  font-size: 12px;
  color: var(--rw-text-light);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.neo-act-status { display: inline-flex; align-items: center; flex-shrink: 0; }
.neo-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--neo-radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  border: 1px solid transparent;
  line-height: 1;
}
.neo-status-chip.is-pending {
  background: rgba(245, 158, 11, 0.12);
  color: #B45309;
  border-color: rgba(245, 158, 11, 0.32);
  animation: neo-status-pulse 1.8s ease-in-out infinite;
}
.neo-status-chip.is-success {
  background: rgba(34, 197, 94, 0.12);
  color: #15803D;
  border-color: rgba(34, 197, 94, 0.32);
}
.neo-status-chip.is-warn {
  background: rgba(245, 158, 11, 0.14);
  color: #B45309;
  border-color: rgba(245, 158, 11, 0.32);
}
.neo-status-chip.is-danger {
  background: rgba(220, 38, 38, 0.10);
  color: #B91C1C;
  border-color: rgba(220, 38, 38, 0.30);
}
@keyframes neo-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .neo-status-chip.is-pending { animation: none; }
}

.neo-act-dedup {
  background: rgba(94, 114, 228, 0.06);
  border: 1px solid rgba(94, 114, 228, 0.25);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--rw-text, #2C3E50);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.neo-act-dedup i { color: var(--neo-header-start); }

/* Overall progress block — single tall bar + percent + summary chips. */
.neo-act-progress {
  background: #fff;
  border: 1px solid #E5E8ED;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.neo-progress-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.neo-progress-row:last-child { margin-bottom: 0; }
.neo-progress-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--neo-thead-text);
  width: 80px;
  flex-shrink: 0;
}
.neo-progress-bar {
  flex: 1;
  height: 10px;
  background: #EEF1F6;
  border-radius: var(--neo-radius-pill);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.neo-progress-bar-sm { height: 6px; }
.neo-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neo-header-start) 0%, #6E5EE8 100%);
  border-radius: var(--neo-radius-pill);
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(94, 114, 228, 0.35);
}
.neo-progress-fill.is-done {
  background: linear-gradient(90deg, #22C55E 0%, #16A34A 100%);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}
.neo-progress-fill.is-partial {
  background: linear-gradient(90deg, #22C55E 0%, #F59E0B 100%);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.30);
}
@media (prefers-reduced-motion: reduce) {
  .neo-progress-fill { transition: none; }
}
.neo-progress-pct {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rw-text, #2C3E50);
  width: 52px;
  text-align: right;
  letter-spacing: -0.01em;
}
.neo-progress-pct-sm { font-size: 11.5px; font-weight: 500; color: var(--rw-text-light); width: auto; }
.neo-progress-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 94px;
}
.neo-act-relays-text {
  font-size: 11.5px;
  color: var(--rw-text-light);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Per-channel rows — 3-column grid keeps bars vertically aligned. */
.neo-act-section {
  background: #fff;
  border: 1px solid #E5E8ED;
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 0;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.neo-channel-progress {
  display: grid;
  grid-template-columns: 140px 1fr 110px;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #F1F2F5;
}
.neo-channel-progress:last-child { border-bottom: 0; padding-bottom: 0; }
.neo-channel-progress:first-child { padding-top: 0; }
.neo-channel-progress-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rw-text, #2C3E50);
  text-transform: capitalize;
  letter-spacing: -0.005em;
}
.neo-channel-progress .neo-progress-pct-sm {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.neo-act-section-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neo-thead-text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.neo-act-section-head-toggle {
  cursor: pointer;
  user-select: none;
  padding: 8px 10px;
  margin: 0 -10px 4px;
  border-radius: var(--neo-radius-sm);
}
.neo-act-section-head-toggle:hover { background: var(--neo-pill-bg); color: var(--rw-text, #2C3E50); }
.neo-act-section-head-toggle i { margin-left: auto; font-size: 11px; }
.neo-act-section-head-toggle:focus-visible { outline: none; box-shadow: var(--neo-ring); }

.neo-channel-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.neo-channel-progress-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rw-text, #2C3E50);
  width: 110px;
  flex-shrink: 0;
  text-transform: capitalize;
}
.neo-failed-tag { color: var(--rw-coral, #E74C3C); font-weight: 600; margin-left: 4px; }
.neo-table-act .neo-row { cursor: default; }
.neo-table-act .neo-row > .neo-td { background: #fff; }
.neo-table-act .neo-row:hover > .neo-td { background: var(--neo-pill-bg); }

/* ════════════════════════ footer ════════════════════════ */
.neo-oos .rw-modal-footer.neo-foot,
.neo-oos .neo-foot {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 24px !important;
  border-top: 1px solid var(--rw-border) !important;
  background: #fff !important;
  border-radius: 0 0 var(--neo-radius-lg) var(--neo-radius-lg);
  margin: 0;
}
.neo-foot-hint {
  font-size: 11.5px;
  color: var(--rw-text, #2C3E50);
  opacity: 0.65;
  flex: 1;
}
.neo-foot-hint .neo-kbd-soft { margin: 0 2px 0 6px; }

/* Step-aware footer — selection count on the left, navigation buttons on
   the right. The footer was previously right-aligned for a single Close
   button; that override is gone now so the two clusters justify-between. */
.neo-oos .rw-modal-footer.neo-foot,
.neo-oos .neo-foot {
  justify-content: space-between !important;
  gap: 12px;
  /* Allow the left meta cluster to wrap below the right actions if the
     modal is too narrow to fit both on one line — better than clipping
     the action buttons off-screen. */
  flex-wrap: wrap;
}
.neo-foot-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.neo-foot-count {
  font-size: 13px;
  color: var(--rw-text, #2C3E50);
  font-variant-numeric: tabular-nums;
}
.neo-foot-count strong {
  font-weight: 700;
  font-size: 14px;
  color: var(--neo-header-start);
}
.neo-foot-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;          /* keep Close + Back + Confirm on one line */
  justify-content: flex-end;
  flex-shrink: 0;
  /* Force-right anchor — when the left .neo-foot-meta cluster is hidden
     (boot / error / brand-pick states), the parent's space-between only
     has one child and would otherwise stick it to the start. */
  margin-left: auto;
}
/* Disabled primary buttons in the footer still need to read as a CTA
   (not a ghosted shape on white). Lock the indigo fill so the user can
   see "this is your next action, once you select something". */
.neo-oos .neo-foot .neo-btn-primary:disabled {
  background: var(--neo-header-start) !important;
  border-color: var(--neo-header-start) !important;
  color: #ffffff !important;
}

/* ════════════════════════ tablet (≤ 1024px) ════════════════════════ */
@media (max-width: 1024px) {
  .neo-head { padding: 14px 16px; }
  .neo-head-action span { display: none; }
  .neo-head-action { padding: 7px 10px; }
  .neo-body { padding: 16px; }
  .neo-foot { padding: 12px 16px; }

  .neo-filters { grid-template-columns: 1fr; gap: 8px; }
  .neo-search { grid-column: auto; }

  .neo-preview-grid { grid-template-columns: 1fr; }
  .neo-channel-grid { grid-template-columns: 1fr 1fr; }

  .neo-btn { min-height: 44px; padding: 10px 16px; }
  .neo-check-wrap { width: 24px; height: 24px; }
  .neo-quick-chip { padding: 8px 14px; min-height: 36px; }
  .neo-chan-toggle { padding: 8px 14px; min-height: 36px; }
  .neo-dur-pill { padding: 8px 14px; min-height: 36px; }
  .neo-row-action { padding: 8px 12px; min-height: 36px; }
  .neo-row > .neo-td { padding-top: 14px; padding-bottom: 14px; }
}

@media (max-width: 720px) {
  .neo-stepper { flex-wrap: wrap; }
  .neo-channel-grid { grid-template-columns: 1fr; }
  .neo-quick-grid { grid-template-columns: 1fr; }
  .neo-th-type, .neo-td-type { display: none; }
  .neo-act-status { display: block; margin-top: 8px; }
  .neo-act-head { flex-direction: column; gap: 8px; }
}

/* ════════════════════════ premium toggle switch ════════════════════════
   Duplicate of the agg-status switch, scoped to .neo-oos so it works on
   the channel-pick step. Keep visually identical to the agg-status panel
   so the same component reads the same to the user across both flows. */
.neo-oos .neo-as-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 60px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.neo-oos .neo-as-toggle:focus { outline: none; }
.neo-oos .neo-as-toggle:focus-visible .neo-as-toggle-track {
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.10),
    0 0 0 3px rgba(94, 114, 228, 0.30);
}
.neo-oos .neo-as-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #DCE0E8 0%, #C8CFDC 100%);
  border: 1px solid #B6BFCD;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55);
  overflow: hidden;
  transition:
    background   0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow   0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.neo-oos .neo-as-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FB 100%);
  box-shadow:
    0 1px 1px rgba(15, 23, 42, 0.06),
    0 2px 4px rgba(15, 23, 42, 0.16),
    0 4px 10px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  font-size: 11px;
  transition:
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
    color     0.28s ease,
    box-shadow 0.28s ease;
}
.neo-oos .neo-as-toggle-glyph {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.neo-oos .neo-as-toggle:hover:not(:disabled) .neo-as-toggle-thumb {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 3px 6px rgba(15, 23, 42, 0.20),
    0 6px 14px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.neo-oos .neo-as-toggle:active:not(:disabled) .neo-as-toggle-thumb {
  transform: translateX(var(--neo-as-thumb-x, 0)) scale(0.94);
  transition-duration: 0.08s;
}
.neo-oos .neo-as-toggle.is-on {
  --neo-as-thumb-x: 28px;
}
.neo-oos .neo-as-toggle.is-on .neo-as-toggle-track {
  background: linear-gradient(135deg, var(--neo-header-start) 0%, #6E5EE8 50%, #7A4FE2 100%);
  border-color: rgba(94, 114, 228, 0.85);
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    0 2px 10px rgba(94, 114, 228, 0.45),
    0 0 0 1px rgba(94, 114, 228, 0.20);
}
.neo-oos .neo-as-toggle.is-on .neo-as-toggle-thumb {
  transform: translateX(28px);
  color: var(--neo-header-start);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.10),
    0 2px 5px rgba(15, 23, 42, 0.18),
    0 4px 12px rgba(94, 114, 228, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.neo-oos .neo-as-toggle.is-on .neo-as-toggle-glyph {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .neo-oos .neo-as-toggle-track,
  .neo-oos .neo-as-toggle-thumb,
  .neo-oos .neo-as-toggle-glyph { transition: none; }
}