/* M2 — Demand Forecast & Replenishment (.rp-*)
 * Family A: teal→blue, 1.5px hairlines, soft white cards, 14–18px radii —
 * matching Message Templates / Evri Claims. Motion comes from motion.css tokens;
 * no keyframes are defined here.
 */
:root{
  --rp-primary:#0588b6; --rp-primary-d:#03658e;
  --rp-grad:linear-gradient(135deg,#03658e,#0588b6);
  --rp-ink:#0f2740; --rp-sub:#5b7183; --rp-line:#e6edf5; --rp-line-s:#cfdcea;
  --rp-shadow:0 10px 30px rgba(15,23,42,.06);
}

.rp-wrap{ max-width:1280px; margin:0 auto; padding:6px 4px 40px; }
.rp-head{ margin:4px 0 18px; }
.rp-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--rp-primary); }
.rp-title{ font-size:25px; font-weight:800; color:var(--rp-ink); margin:4px 0; line-height:1.15; }
.rp-lede{ font-size:13.5px; color:var(--rp-sub); margin:0; max-width:70ch; line-height:1.5; }

/* KPI band */
.rp-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin:16px 0; }
.rp-kpi{ background:#fff; border:1.5px solid var(--rp-line); border-radius:14px; padding:14px 16px; box-shadow:var(--rp-shadow); }
.rp-kpi-k{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--rp-sub); }
.rp-kpi-v{ font-size:26px; font-weight:900; color:var(--rp-ink); line-height:1.1; margin-top:5px; font-variant-numeric:tabular-nums; }
.rp-kpi-v.bad{ color:#dc2626; } .rp-kpi-v.warn{ color:#b45309; } .rp-kpi-v.unk{ color:#8fa3b4; }
.rp-kpi-s{ font-size:11.5px; color:#90a3b6; margin-top:3px; }

/* Lead-time banner — everything on this screen depends on it, so it gets its own row */
.rp-lead{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff;
  border:1.5px solid var(--rp-line); border-radius:12px; padding:11px 14px; margin-bottom:14px;
  box-shadow:var(--rp-shadow); font-size:13px; color:var(--rp-ink); }
.rp-lead-k{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--rp-sub); }

.rp-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.rp-chip{ border:1.5px solid var(--rp-line-s); background:#fff; color:#3f5f79; font-size:12.5px;
  font-weight:700; padding:6px 13px; border-radius:999px; cursor:pointer;
  transition:border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out); }
.rp-chip:hover{ border-color:var(--rp-primary); color:var(--rp-primary); }
.rp-chip.on{ background:var(--rp-grad); border-color:transparent; color:#fff; }
.rp-chip:focus-visible{ outline:2px solid var(--rp-primary); outline-offset:2px; }

/* Table */
.rp-tw{ overflow-x:auto; border:1.5px solid var(--rp-line); border-radius:14px; background:#fff; box-shadow:var(--rp-shadow); }
table.rp-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:900px; }
table.rp-table thead th{ background:#f4f9fd; text-align:left; font-size:10.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--rp-sub); padding:11px 13px;
  border-bottom:1.5px solid var(--rp-line); white-space:nowrap; }
table.rp-table tbody td{ padding:11px 13px; border-bottom:1px solid #eef3f9; vertical-align:middle; }
table.rp-table tbody tr:last-child td{ border-bottom:0; }
table.rp-table tbody tr:hover{ background:#f7fbfe; }
.rp-row-bad{ background:#fef6f6; }
.rp-r{ text-align:right; font-variant-numeric:tabular-nums; }
.rp-mono{ font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:12px; }
.rp-name{ font-weight:700; color:var(--rp-ink); }
.rp-sub{ font-size:11px; color:#90a3b6; }
.rp-flagless{ color:#b45309; font-weight:700; }

/* An unknown must never look like a number. */
.rp-unk{ color:#8fa3b4; }
.rp-inf{ color:#8fa3b4; font-size:11.5px; }
.rp-ok{ color:#16a34a; font-weight:700; }
.rp-warn{ color:#b45309; font-weight:700; }
.rp-bad{ color:#dc2626; font-weight:800; }

.rp-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  padding:3px 10px; border-radius:999px; white-space:nowrap; }
.rp-p-bad{ background:#fdeeee; color:#dc2626; }
.rp-p-warn{ background:#fdf5e7; color:#b45309; }
.rp-p-ok{ background:#eaf9f0; color:#16a34a; }
.rp-p-unk{ background:#f1f5f9; color:#64748b; }

.rp-empty{ text-align:center; padding:34px 20px; color:#90a3b6; font-size:13px; }

/* Loading — reuses the shared shimmer, no new keyframe */
.rp-skel{ padding:14px; }
.rp-skel-line{ height:14px; border-radius:6px; margin:10px 0;
  background:var(--rms-skel-fill); background-size:400% 100%;
  animation:rms-shimmer var(--t-shimmer) var(--e-in-out) infinite; }

html[data-theme="dark"] .rp-kpi,
html[data-theme="dark"] .rp-lead,
html[data-theme="dark"] .rp-tw{ background:#101f2e; border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .rp-title,
html[data-theme="dark"] .rp-name,
html[data-theme="dark"] .rp-kpi-v{ color:#dfeaf4; }
html[data-theme="dark"] table.rp-table thead th{ background:#14273a; }
html[data-theme="dark"] .rp-row-bad{ background:rgba(220,38,38,.08); }