/* ===========================================================================
   "About to go back on sale" alert — upcomingRestocks.html
   ---------------------------------------------------------------------------
   Self-contained: own tokens, own .nur- prefix, own modal-shell class. Reads
   nothing from outOfStock.css, so neither surface can break the other.

   Palette VALUES are copied from the Neo OOS panel so the two look like one
   product. Copied rather than shared: matching by value keeps the visual
   language aligned without re-coupling the stylesheets.

   Laid out as a dense table, not a card stack. One alert routinely carries
   several return times, and a per-item "Back at" column beats a group header.
   =========================================================================== */

/* ── modal shell ─────────────────────────────────────────────────────────────
   ui-bootstrap stacks .modal > .modal-dialog > .modal-content > .nur.
   .modal-content carries its own radius + white background and leaks white
   wedges at the gradient header's corners, so clip it here. Scoped to the
   windowClass the watcher passes, so no other modal in the app is touched. */
.nur-modal-window .modal-dialog {
  max-width: 780px;
  width: auto;
}

.nur-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;
}

.nur-modal-window .modal-body,
.nur-modal-window .modal-header,
.nur-modal-window .modal-footer {
  padding: 0 !important;
  border: 0 !important;
}

.nur-modal-window .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */

.nur {
  /* Values mirrored from .neo-oos in outOfStock.css */
  --nur-header-start: #5E72E4;
  --nur-header-end: #5566D6;
  --nur-header-text: #ffffff;
  --nur-header-soft: rgba(255, 255, 255, 0.16);
  --nur-accent: #5E72E4;
  --nur-accent-wash: #EEF0FD;
  --nur-surface: #ffffff;
  --nur-bg: #F5F6FA;
  --nur-text: #2C3E50;
  --nur-muted: #8B92AE;
  --nur-divider: rgba(0, 0, 0, 0.06);
  --nur-border: rgba(15, 23, 42, 0.10);
  --nur-line: #E7EAEE;          /* --rw-border, light */
  --nur-text-light: #6A6F77;    /* --rw-text-light, light */
  --nur-warn-text: #B07814;
  --nur-warn-bg: #FDF6E8;
  --nur-warn-bd: #F0DCAE;
  --nur-go-text: #1E8E5A;
  --nur-go-bg: #E9F6EF;
  --nur-go-bd: #B7E3CE;
  --nur-radius: 8px;
  --nur-radius-lg: 12px;
  --nur-radius-pill: 999px;
  --nur-ring: 0 0 0 3px rgba(94, 114, 228, 0.18);
  /* one gutter for header, rows, bar and footer — the thing that makes the
     modal read as a single column rather than four stacked strips */
  --nur-gutter: 20px;

  overflow: hidden;
  border-radius: var(--nur-radius-lg);
  background: var(--nur-surface);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--nur-text);
}

/* ── header ─────────────────────────────────────────────────────────────── */

.nur-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--nur-gutter);
  background: linear-gradient(135deg, var(--nur-header-start) 0%, var(--nur-header-end) 100%);
  color: var(--nur-header-text);
  border: 0;
}

.nur-head-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--nur-header-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.nur-head-text { min-width: 0; }
.nur-head-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.nur-head-sub { display: block; font-size: 11px; opacity: 0.82; line-height: 1.35; }

/* ── select-all bar ─────────────────────────────────────────────────────── */

.nur-selbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--nur-gutter);
  background: var(--nur-bg);
  border-bottom: 1px solid var(--nur-line);
}

.nur-selall {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.nur-selall input {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--nur-accent); cursor: pointer;
}
.nur-selall input.is-partial { opacity: 0.55; }
.nur-selall input[disabled] { cursor: not-allowed; opacity: 0.45; }

.nur-selstate {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--nur-muted);
}
.nur-selstate.is-on { color: var(--nur-text); font-weight: 600; }

.nur-link {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--nur-accent); cursor: pointer; text-decoration: underline;
}
.nur-link:focus-visible { outline: none; box-shadow: var(--nur-ring); border-radius: 4px; }

/* ── item list ──────────────────────────────────────────────────────────── */

.nur-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.nur-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 14px var(--nur-gutter);
  border-bottom: 1px solid var(--nur-divider);
  font-weight: 400;
  cursor: pointer;
}
.nur-row:last-child { border-bottom: 0; }
.nur-row:hover { background: var(--nur-accent-wash); }
.nur-row.sel { background: var(--nur-accent-wash); box-shadow: inset 3px 0 0 var(--nur-accent); }
/* a hairline where the return time changes, so shared timers group visually */
.nur-row.newtime { border-top: 1px solid var(--nur-line); }
.nur-row.newtime:first-child { border-top: 0; }
.nur-row.unlisted { cursor: default; }
.nur-row.unlisted:hover { background: none; }
.nur-row.unlisted .nur-row-name { color: var(--nur-text-light); font-style: italic; }

.nur-row-check { flex: 0 0 18px; padding-top: 10px; }
.nur-row-check input {
  width: 16px; height: 16px; margin: 0; display: block;
  accent-color: var(--nur-accent); cursor: pointer;
}
.nur-row-check input[disabled] { cursor: not-allowed; opacity: 0.45; }

.nur-thumb {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(94, 114, 228, 0.12), rgba(94, 114, 228, 0.05));
  border: 1px solid rgba(94, 114, 228, 0.22);
  color: var(--nur-accent);
  font-size: 16px;
  overflow: hidden;
}
.nur-thumb.has-img { background: #fff; border-color: var(--nur-line); }
.nur-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nur-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nur-row-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.nur-row-brand { font-size: 12px; color: var(--nur-text-light); line-height: 1.3; }

.nur-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.nur-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--nur-accent);
  background: var(--nur-accent-wash);
  border: 1px solid rgba(94, 114, 228, 0.22);
  border-radius: var(--nur-radius-pill);
  padding: 2px 10px;
  white-space: nowrap;
}

.nur-row-lock {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px; font-size: 11.5px; color: var(--nur-muted);
}

.nur-row-when {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; padding-top: 2px;
}
.nur-row-eta {
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.25;
  white-space: nowrap;
}
/* Under five minutes reads urgent. The row shows "in 3 min", so the words carry
   the meaning and the colour only reinforces it. */
.nur-row.soon .nur-row-eta { color: var(--nur-warn-text); }

/* ── keep-off row ───────────────────────────────────────────────────────── */

.nur-keep {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px var(--nur-gutter);
  border-top: 1px solid var(--nur-line);
  background: var(--nur-surface);
}
.nur-keep-label { font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.nur-presets { display: flex; flex-wrap: wrap; gap: 8px; }


.nur-pill {
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid var(--nur-border);
  border-radius: var(--nur-radius-pill);
  background: var(--nur-surface);
  color: var(--nur-text);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nur-pill:hover:not([disabled]) {
  border-color: var(--nur-accent); color: var(--nur-accent); background: var(--nur-accent-wash);
}
.nur-pill:focus-visible { outline: none; box-shadow: var(--nur-ring); }
.nur-pill[disabled] { opacity: 0.45; cursor: not-allowed; }
/* armed, not sent — Apply is the only thing that calls e3 */
.nur-pill.is-chosen {
  border-color: var(--nur-accent);
  background: var(--nur-accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(94, 114, 228, 0.35);
}
.nur-pill.is-chosen:hover:not([disabled]) {
  border-color: var(--nur-accent); background: var(--nur-accent); color: #fff;
}

/* once armed it joins the others — one armed look, whatever the action */

.nur-pill i { margin-right: 6px; }

/* ── all-clear + footer ─────────────────────────────────────────────────── */

.nur-clear { flex: 1 1 auto; text-align: center; padding: 32px 20px; color: var(--nur-muted); }
.nur-clear-icon { font-size: 32px; color: var(--nur-go-text); }
.nur-clear-title { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--nur-text); }

.nur-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px var(--nur-gutter);
  background: var(--nur-bg);
  border-top: 1px solid var(--nur-line);
}
.nur-foot-spacer { flex: 1 1 auto; }
.nur-foot-note { font-size: 11.5px; color: var(--nur-muted); }

.nur-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--nur-border);
  border-radius: var(--nur-radius);
  background: var(--nur-surface);
  color: var(--nur-text);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.nur-btn:hover:not([disabled]) { border-color: var(--nur-accent); color: var(--nur-accent); }
.nur-btn:focus-visible { outline: none; box-shadow: var(--nur-ring); }
.nur-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.nur-btn.is-primary {
  border-color: var(--nur-accent);
  background: var(--nur-accent);
  color: #fff;
}
.nur-btn.is-primary:hover:not([disabled]) {
  border-color: var(--nur-header-end); background: var(--nur-header-end); color: #fff;
}

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .nur { --nur-gutter: 14px; }
  .nur-chips { display: none; }
  .nur-keep-label { width: 100%; }
  .nur-foot-spacer { display: none; }
  .nur-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nur-pill { transition: none; }
}