/* ════════════════════════════════════════════════════════════════════════════
   orderOos.css — "Out of stock from this order"

   Additive only. The modal shell, header, sections, channel cards, duration
   pills, buttons and footer all come from outOfStock.css (the template carries
   `neo-oos` for exactly that reason). Everything here is either
     (a) new to this modal — the order-item rows, the step chrome and recap,
         the "from this order" badge, the inline warn/error panels, the wider
         dialog; or
     (b) a scoped colour correction — see the CONTRAST block below.

   Light-only, like outOfStock.css (which carries no dark-theme rules at all).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── scrolling body ──
   .neo-body is `overflow: hidden` and expects ONE inner scroller, so the main
   pane is it. Header, footer and the section headings stay put. */
.neo-oo .neo-oo-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* 12px, and .neo-section's own 16px margin-bottom is zeroed below — the two
     together were stacking 36px of dead space between every section. */
  gap: 12px;
  padding: 4px 0;
}

/* ════════════════════════ CONTRAST ════════════════════════
   Two shipped Neo tokens fail WCAG AA against the white text sitting on them:
     neo-btn-danger  #E07A52  → 2.97:1
     neo-btn-primary #5E72E4  → 4.18:1
   Both are corrected here, SCOPED TO `.neo-oo` so the existing panel is left
   byte-identical. The gradient header keeps #5E72E4: its title is 17px 600,
   which clears the 3:1 large-text bar.
   ══════════════════════════════════════════════════════════ */
.neo-oo .neo-oo-btn-danger {
  background: #C2410C;          /* 5.18:1 on #fff */
  border-color: #C2410C;
  color: #fff;
}
.neo-oo .neo-oo-btn-danger:hover:not(:disabled) { background: #A8380B; border-color: #A8380B; }
.neo-oo .neo-oo-btn-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.28);
}
/* Disabled must still read as "this button, disabled" rather than "the button
   went away" — same reasoning as .neo-oos .neo-foot .neo-btn-*:disabled. */
.neo-oo .neo-oo-btn-danger:disabled {
  background: #E3B8A4;
  border-color: #E3B8A4;
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
}
.neo-oo .neo-btn-primary {
  background: #5266DC;          /* 4.88:1 on #fff */
  border-color: #5266DC;
}
.neo-oo .neo-btn-primary:hover:not(:disabled) { background: #4453BC; border-color: #4453BC; }

/* ════════════════════════ order item rows ════════════════════════ */
.neo-oo .neo-oo-list {
  border: 1px solid var(--rw-border, #E2E5EA);
  border-radius: var(--neo-radius, 8px);
  overflow: hidden;
}

.neo-oo .neo-oo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 44px min so the whole row is a comfortable touch target at the till. */
  min-height: 44px;
  padding: 10px 14px;
  margin: 0;
  background: #fff;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.12s ease;
}
.neo-oo .neo-oo-row + .neo-oo-row { border-top: 1px solid var(--neo-divider, rgba(0, 0, 0, 0.06)); }
.neo-oo .neo-oo-row:hover { background: var(--neo-row-hover, #E5F1D5); }
.neo-oo .neo-oo-row.is-on { background: var(--neo-row-selected, #DDEDFB); }
.neo-oo .neo-oo-row.is-on:hover { background: #CFE4F7; }

/* Modifiers sit under their line. The indent is the only thing saying
   "belongs to the row above", so it is deliberately generous. */
.neo-oo .neo-oo-row-addon { padding-left: 42px; }

.neo-oo .neo-oo-check {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #5266DC;
  cursor: pointer;
}
.neo-oo .neo-oo-check:focus-visible {
  outline: none;
  box-shadow: var(--neo-ring, 0 0 0 3px rgba(94, 114, 228, 0.18));
}

.neo-oo .neo-oo-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--neo-thead-bg, #F5F6FA);
  color: var(--neo-thead-text, #8B92AE);
  font-size: 11px;
}
.neo-oo .neo-oo-row.is-on .neo-oo-icon {
  background: rgba(94, 114, 228, 0.12);
  color: #5266DC;
}

.neo-oo .neo-oo-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--neo-thead-text, #8B92AE);
  background: var(--neo-thead-bg, #F5F6FA);
  border-radius: 4px;
  padding: 2px 6px;
}

.neo-oo .neo-oo-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--rw-text, #1F2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.neo-oo .neo-oo-row:not(.neo-oo-row-addon) .neo-oo-name { font-weight: 500; }

.neo-oo .neo-oo-qty {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--rw-text-light, #6B7280);
}
.neo-oo .neo-oo-amt {
  flex: 0 0 auto;
  width: 72px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rw-text, #1F2937);
  /* Tabular figures so the column lines up down the list. */
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════ "from this order" badge ════════════════════════
   Replaces the live-status line on the one channel the order arrived on, so
   the pre-ticked card explains itself rather than just looking selected. */
.neo-oo .neo-oo-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: #4453BC;
  letter-spacing: 0;
}


/* ════════════════════════ inline warn / error ════════════════════════
   Same geometry as .neo-inline-state (outOfStock.css) with a semantic skin.
   Each pairs its tint with an icon AND wording, so the meaning survives for
   anyone who cannot separate the two colours. */
.neo-oo .neo-oo-warn,
.neo-oo .neo-oo-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--neo-radius, 8px);
  margin-top: 10px;
}
.neo-oo .neo-oo-warn > i,
.neo-oo .neo-oo-error > i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 14px;
}

.neo-oo .neo-oo-warn {
  background: #FEF7E6;
  border: 1px solid #EBD08A;
}
.neo-oo .neo-oo-warn > i { color: var(--neo-warn-text, #B07814); }
.neo-oo .neo-oo-warn .neo-inline-text > span { color: #6B5015; }

.neo-oo .neo-oo-error {
  background: #FDF3EE;
  border: 1px solid #E8B79C;
  margin-top: 0;
}
.neo-oo .neo-oo-error > i { color: #C2410C; }
.neo-oo .neo-oo-error .neo-inline-text > span { color: #8A4B28; }

/* The reason textarea follows a label directly; the shared .neo-quick-label
   has no top margin of its own outside .neo-cond. */
.neo-oo .neo-section > .neo-quick-label { margin-top: 14px; }
.neo-oo .neo-oo-nextday { margin-top: 12px; }

/* ════════════════════════ narrow tills ════════════════════════
   Some tills run at 1024. The channel grid already reflows; the item rows drop
   the amount column rather than squeezing the name. */
@media (max-width: 1024px) {
  .neo-oo .neo-oo-amt { display: none; }
  .neo-oo .neo-oo-row-addon { padding-left: 34px; }
}

/* ════════════════════════ the cart button ════════════════════════
   Lives in _cartPageV2.html under the CRM box, not in the modal — kept here so
   every stylesheet change for this feature is in one new file.

   Secondary weight is the whole point: Settle is the cart's primary action and
   this must not compete with it. A tinted indigo ground reads as "available"
   at a glance without becoming a second primary. */
.neo-oo-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 11px 16px;
  /* A white button with a #C9D2F5 hairline was invisible against the cart
     (reported 2026-09-17). Tinted ground + a solid indigo border reads at a
     glance while staying clearly secondary to the green Settle button. */
  background: #EEF3FF;
  border: 1.5px solid #5266DC;
  border-radius: var(--neo-radius, 8px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #3B49B0;                 /* 6.9:1 on #EEF3FF */
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.neo-oo-cart-btn:hover { background: #DFE7FD; border-color: #4453BC; }
.neo-oo-cart-btn:active { background: #D2DCFB; }
.neo-oo-cart-btn:focus-visible {
  outline: none;
  box-shadow: var(--neo-ring, 0 0 0 3px rgba(94, 114, 228, 0.18));
}
.neo-oo-cart-btn > i { font-size: 13px; }

/* ════════════════════════ density ════════════════════════
   Measured on a live 12-channel outlet (2026-09-17): the pane needed ~900px of
   scroll for one order line. The shared .neo-section is tuned for the big
   panel, so it is compacted here — nowhere else.

   Where the height went, and what each rule takes back:
     section padding 18/20 → 12/14          ~26px × 3 sections
     section margin-bottom 16 → 0           ~16px × 3 (the flex gap owns it now)
     title/head margin 16 → 9               ~7px  × 3
     (channel grid + card sizing live in "channel card fixes" below — one
      place only; a first pass at 150px tracks proved too narrow.)
     channel card padding 12/16 → 8/10      ~8px  × 4 rows
   ═════════════════════════════════════════════════════════ */
.neo-oo .neo-section {
  padding: 12px 14px 14px;
  margin-bottom: 0;
  border-radius: var(--neo-radius, 8px);
}
.neo-oo .neo-section-head { margin-bottom: 9px; }
.neo-oo .neo-section-title { margin-bottom: 9px; }
.neo-oo .neo-section-head .neo-section-title { margin-bottom: 0; }

.neo-oo .neo-channel-state,
.neo-oo .neo-oo-badge { font-size: 10px; }

/* The header title was wrapping to two lines once the brand + order chips were
   in, costing ~24px and looking broken. One line, ellipsis if it must. */
.neo-oo .neo-head { padding-top: 12px; padding-bottom: 12px; }
.neo-oo .neo-head-titlewrap { flex: 1 1 auto; min-width: 0; }
.neo-oo .neo-head-title {
  font-size: 15.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.neo-oo .neo-oos-head-chip { padding: 4px 9px; font-size: 11px; }

/* Duration pills: one row at this width. */
.neo-oo .neo-dur-pills-lg { gap: 6px; }
.neo-oo .neo-dur-pill { padding: 6px 12px; font-size: 12px; min-height: 34px; }

/* Collapsed-by-default reason field. */
.neo-oo .neo-oo-reason-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #5266DC;
  cursor: pointer;
}
.neo-oo .neo-oo-reason-toggle:hover { color: #4453BC; text-decoration: underline; }
.neo-oo .neo-oo-reason-toggle > i { font-size: 10px; }
.neo-oo .neo-oo-reason { margin-top: 10px; }


/* ════════════════════════ modal width ════════════════════════
   Bootstrap's default 600px dialog was too narrow once a real outlet's channel
   list arrived: at 12 channels the three-up grid wrapped names onto two lines
   ("Hunger Station", "Ownly By Rapido", "Talabat Marketplace") and every row
   grew ~20px for nothing.

   880px is applied via this modal's OWN window class — the `$modal.open` call
   passes `neo-oos-modal-window neo-oo-modal-window`, so the full Neo OOS panel
   (which only carries the first) keeps its own width. */
.neo-oo-modal-window .modal-dialog {
  width: 880px;
  max-width: 94vw;
}

/* ════════════════════════ steps ════════════════════════ */
.neo-oo .neo-oo-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* What step 1 settled, so step 2 rarely needs Back to check. */
.neo-oo .neo-oo-recap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: var(--rw-primary-light, #EEF3FF);
  border: 1px solid #C9D2F5;
  border-radius: var(--neo-radius, 8px);
  font-size: 12px;
  color: #3B49B0;
}
.neo-oo .neo-oo-recap strong { font-weight: 700; }
.neo-oo .neo-oo-recap-sep { opacity: 0.45; }

/* The void choice. Mirrors the panel's .neo-action-card geometry; only the
   "on" skin differs, because this option destroys the order. */
.neo-oo .neo-oo-action-card-void.is-on {
  background: #FDF3EE;
  border-color: #C2410C;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.14);
}
.neo-oo .neo-oo-action-card-void.is-on .neo-action-icon {
  background: #C2410C;
  border-color: #C2410C;
  color: #fff;
}
.neo-oo .neo-oo-action-card-void.is-on .neo-action-title { color: #8A2F08; }

/* The void reason, shown rather than typed — the cashier already said why by
   picking the items, so this is what gets written to bill.voidComment. */
.neo-oo .neo-oo-reason-chip {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 7px;
  background: #fff;
  border: 1px solid #E8B79C;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #8A4B28;
  white-space: nowrap;
}

/* ════════════════════════ channel card fixes ════════════════════════
   Reported 2026-09-18: "Talabat Marketplace" ran UNDER the blue check badge.

   Root cause is the classic flexbox one — `.neo-channel-body` is `flex: 1`
   with no `min-width: 0`, so it refuses to shrink below its longest word and
   shoves the `flex-shrink: 0` badge out of the card. Fixed here rather than in
   outOfStock.css so the existing panel (whose cards are wider, and which has
   never hit this) is untouched. */
.neo-oo .neo-channel-body {
  min-width: 0;
}
.neo-oo .neo-channel-name {
  font-size: 12.5px;
  line-height: 1.25;
  /* Wrap rather than truncate — an aggregator the cashier cannot read is worse
     than two lines — but break long words so nothing ever reaches the badge. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 150px tracks gave FIVE columns at 880px, which is what squeezed the names.
   240px gives three at this width and two on a narrow till, and every name up
   to "Talabat Marketplace" fits on one line. */
.neo-oo .neo-channel-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.neo-oo .neo-channel-pick-card {
  padding: 8px 10px;
  gap: 9px;
  /* Uniform height so a wrapped name cannot make one row taller than the next. */
  min-height: 52px;
  align-items: center;
}
.neo-oo .neo-channel-logo { width: 28px; height: 28px; }

/* ════════════════════════ footer hint ════════════════════════
   Why the primary action is disabled, stated in the footer instead of only in a
   title attribute. */
.neo-oo .neo-oo-foot-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 3px 9px;
  background: #FEF7E6;
  border: 1px solid #EBD08A;
  border-radius: var(--neo-radius-pill, 999px);
  font-size: 11.5px;
  font-weight: 500;
  color: #6B5015;
  white-space: nowrap;
}
.neo-oo .neo-oo-foot-hint > i { font-size: 9px; opacity: 0.7; }

@media (max-width: 1100px) {
  /* Narrow till: the count matters more than the hint chip. */
  .neo-oo .neo-oo-foot-hint { display: none; }
}

/* ════════════════════════ step indicator ════════════════════════
   Three panes need a "where am I" strip; two did not. Chips are real buttons so
   Tab reaches them and a cashier can jump back a pane without the footer.
   Forward jumps are gated in the controller, not here. */
.neo-oo .neo-oo-steps {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 4px;
}
.neo-oo .neo-oo-stepchip {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  background: #FAFBFC;
  border: 1px solid #E5E8ED;
  border-radius: var(--neo-radius, 8px);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--rw-text-light, #6B7280);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.neo-oo .neo-oo-stepchip:hover:not(:disabled) { border-color: #C9D2F5; }
.neo-oo .neo-oo-stepchip:disabled { cursor: default; }
.neo-oo .neo-oo-stepchip:focus-visible {
  outline: none;
  box-shadow: var(--neo-ring, 0 0 0 3px rgba(94, 114, 228, 0.18));
}

/* The pane you are on. */
.neo-oo .neo-oo-stepchip.is-on {
  background: var(--rw-primary-light, #EEF3FF);
  border-color: #5266DC;
  color: #3B49B0;
  font-weight: 600;
}
/* A pane already satisfied — tick instead of a number, so "done" is not
   carried by colour alone. */
.neo-oo .neo-oo-stepchip.is-done { background: #fff; color: var(--rw-text, #1F2937); }

.neo-oo .neo-oo-stepnum {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E5E8ED;
  color: var(--rw-text-light, #6B7280);
  font-size: 11px;
  font-weight: 600;
}
.neo-oo .neo-oo-stepchip.is-on .neo-oo-stepnum { background: #5266DC; color: #fff; }
.neo-oo .neo-oo-stepchip.is-done .neo-oo-stepnum { background: #16A34A; color: #fff; }
.neo-oo .neo-oo-stepnum i { font-size: 9px; }

.neo-oo .neo-oo-steplabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  /* Narrow till: the numbers alone still say where you are. */
  .neo-oo .neo-oo-steplabel { display: none; }
  .neo-oo .neo-oo-stepchip { flex: 0 0 auto; padding: 8px; }
}